@extends('dashboard::layouts.app')

@section('title')
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
        Banner
    </h5>
@endsection

@section('content')
    <!--begin::Card-->
    <div class="card card-custom gutter-b example example-compact">

        <form class="form">
            <div class="card-footer">
                <div class="row">
                    <div class="col-lg-10">
                        <a href="{{ route('banner.add') }}"><button type="button" class="btn btn-success mr-2">Create New Banner</button></a>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--end::Card-->


    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap py-3">
            <div class="card-title">
                <h3 class="card-label">
                    Banner List
                </h3>
            </div>
        </div>
        <div class="card-body">
            <!--begin: Datatable-->
            <table class="table" >
                <div class="float-right">
                    <form action="{{ route('banner.index') }}" class="" method="get">
                        <div class="input-group mb-3">
                            <input type="text" name="searchkey" class="form-control" placeholder="Search" required />
                            <div class="input-group-append">
                              {{-- <button class="btn btn-outline-secondary" type="button">Button</button> --}}
                              <button type="submit" class="btn btn-sm btn-clean btn-icon mr-2 ">
                                <i class="fa fa-search"></i></button>
                            </div>
                          </div>
                    </form>
                </div>
                <thead>
                    <tr>
                        <th></th>
                        <th>ID</th>
                        <th>Banner Title</th>
                        <th>Image</th>
                        <th>Banner Link</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @if(count($banners))
                    @foreach($banners as $banner)
                    <tr>
                        <td></td>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{Str::title($banner->banner_name)}}</td>
                        <td>
                            <div class="symbol symbol-50 symbol-light mr-1">
                                <span class="symbol-label">
                                    <img src="{{url('uploads/images/banner/thumbnail/'.$banner->banner_image)}}" class="h-50 align-self-center" alt="">
                                </span>
                            </div>
                        </td>
                        <td>
                            {{ $banner->link }}
                        </td>
                        <td>
                                 @if($banner['status']== 1)
                                 <select style="width:120px;" value="{{ $banner['status']  }}" data-id="{{ base64_encode($banner['id']) }}" class="status form-control btn-success change_status"
                                    name="status">
                                    <option value= 1 class="btn-success"  selected="true">Active</option>
                                    <option value= 0 class="btn-danger">Inactive</option>
                                 </select>
                                 @else
                                 <select style="width:120px;" value="{{ $banner['status']  }}" data-id="{{ base64_encode($banner['id']) }}" class="status form-control btn-danger change_status"
                                    name="status">
                                    <option value=1 class="btn-success">Active</option>
                                    <option value=0 class="btn-danger" selected="true">Inactive</option>
                                 </select>
                                 @endif
                              </td>
                        <td>
                            <!-- view details page -->
                            <a href="javascript:;" class="view-detail btn btn-sm btn-clean btn-icon mr-2" title="View details" data-toggle="modal" data-target="#exampleModalSizeSm" data-id="{{$banner->id}}">
                                <span class="svg-icon svg-icon-md">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24" />
                                            <path d="M3,12 C3,12 5.45454545,6 12,6 C16.9090909,6 21,12 21,12 C21,12 16.9090909,18 12,18 C5.45454545,18 3,12 3,12 Z" fill="#000000" fill-rule="nonzero" />
                                            <path d="M12,15 C10.3431458,15 9,13.6568542 9,12 C9,10.3431458 10.3431458,9 12,9 C13.6568542,9 15,10.3431458 15,12 C15,13.6568542 13.6568542,15 12,15 Z" fill="#000000" opacity="0.3" />
                                        </g>
                                    </svg>
                                </span>
                            </a>
                            <!-- edit page -->
                            <a href="javascript:;" class="edit btn btn-sm btn-clean btn-icon mr-2" title="Edit details" data-toggle="modal" data-target="#exampleModalSizeXl" data-id="{{$banner->id}}">
                                <span class="svg-icon svg-icon-md">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24" />
                                            <path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero" \ transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) " />
                                        </g>
                                    </svg>
                                </span>
                            </a>
                            <!-- delete page -->
                            <a href="javascript:;" class="delete btn btn-sm btn-clean btn-icon" title="Delete" data-toggle="modal" data-target="#delete-modal" data-id="{{$banner->id}}">
                                <span class="svg-icon svg-icon-md">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24" />
                                            <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero" />
                                            <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3" />
                                        </g>
                                    </svg>
                                </span>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="7">
                            <div class="text-center">
                                <h4>No Banners found</h4>
                            </div>
                        </td>
                    </tr>
                    @endif
                </tbody>

            </table>
            <!--end: Datatable-->
        </div>
    </div>
    <div class='dataTables_paginate float-right paging_simple_numbers'>
        {{ $banners->links() }}
    </div>
    <!--end::Card-->


    <!-- view detail page -->
    <div class="modal fade" id="exampleModalSizeSm" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="exampleModalSizeSm" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Banner Detail</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body spinner">
                    <!-- <div class="spinner"> -->
                    <div class="card-body">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="text-center">
                                    <h4>Banner Title: <strong id="title-view"></strong></h4>
                                </div>
                            </div>
                            <div class="col-md-12 mb-5">
                                <div class="view-modal-img">
                                    <img id="image-view" src="" alt="" class="img-fluid rounded">
                                </div>
                            </div>
                            <div class="col-md-12">
                             <p> <b>BannerLink:</b><div id="description-view"></div></p>
                            </div>
                        </div>

                    </div>
                    <!-- </div> -->
                </div>
            </div>
        </div>
    </div>
    <!-- end -->




    <!--begin::Modal-->
    <!-- edit modal  -->
    <div class="modal fade" id="exampleModalSizeXl" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="exampleModalSizeXl" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form" action="{{route('banner.update')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id" id="id">
                        <div class="card-body">
                            <div class="mb-15">
                                <div class="form-group row">
                                    <label class="col-lg-3 col-form-label text-right"><span style="color: red">*</span>Banner Name:</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="title form-control" id="title" name="banner_name" placeholder="Enter page title here" />
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-3 col-form-label text-right"><span style="color: red">*</span>Banner Type:</label>
                                    <div class="col-lg-6">
                                        <select class="form-control selectpicker" id="banner_type" name='banner_type' data-size="7" data-live-search="true" required>
                                            <option value="">Select Banner Type</option>
                                            @if(count($banner_categories)>0)
                                                @foreach($banner_categories as $cate)
                                                    <option value="{{ $cate->id }}">{{ $cate->name }}</option>
                                                @endforeach
                                            @else
                                                <option>No Type to Select</option>
                                            @endif
                                        </select>
                                        @error('banner_type')
                                            <span style="color: red;">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-3 col-form-label text-right">Banner Image:</label>
                                    <div class="col-lg-8">
                                        <div class="image-input image-input-outline" id="kt_image_1">
                                            <div class="image-input-wrapper" id="image" style="background-image: url(cd-assets/media/users/100_1.jpg)"></div>

                                            <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
                                                <i class="fa fa-pen icon-sm text-muted"></i>
                                                <input type="file" name="image" accept=".png, .jpg, .jpeg" />
                                                <input type="hidden" name="profile_avatar_remove" />
                                            </label>

                                            <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
                                                <i class="ki ki-bold-close icon-xs text-muted"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-3 col-form-label text-right">Banner Link:</label>
                                    <div class="col-lg-8">
                                       <input type="text" class="form-control" id="banner_link" name="banner_link" placeholder="Enter Redirection Link" />
                                    </div>
                                </div>
                        
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-lg-3"></div>
                                <div class="col-lg-6">
                                    <button type="submit" class="btn btn-success mr-2">Submit</button>
                                    <button type="reset" class="btn btn-secondary">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- end -->
    <!--end::Modal-->

    <!-- delete modal -->
    <div class="modal fade" id="delete-modal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
        <div class="modal-dialog .modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete Banner</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this Banner ?
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger font-weight-bold">Yes, Delete</button>
                    <button type="reset" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">No, Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end -->

  <script>

      // initilize data table
      
   
      // edit page code 
        $(document).ready(function(){
            let url = "{{url('/')}}";
            $(document).on('click','.edit',function(){
                 let item_id=$(this).data('id');
                  $.ajax({
                      type:"GET",
                      url:"/cd-admin/edit-banner/",
                      data:{
                          id:item_id
                      },
                    beforeSend:function(){
                        // $('.loading').show();
                    },
                      success:function(response){
                        console.log(response);
                            $('#id').val(response.id);
                            $('#title').html(response.banner_name);
                            $('.title').val(response.banner_name);
                            $('#banner_type').val(response.banner_type).change();
                            $('#image').css('background-image','url('+url+'/uploads/images/banner/'+response.banner_image+')');
                            $('#banner_link').val(response.link);
                            $('#seo_title').val(response.seo_title);
                            $('#seo_description').html(response.seo_description);
                            $('#seo_keyword').val(response.seo_keyword);                            
                      }
                  })
              });
        });

        // view page code
        $(document).ready(function(){
            let url = "{{url('/')}}";
            $(document).on('click','.view-detail',function(){
                  let item_id=$(this).data('id');
                  $.ajax({
                      type:"GET",
                      url:"/cd-admin/view-banner/",
                      data:{
                          id:item_id
                      },
                    beforeSend:function(){
                        $('.modal-body').addClass('.spinner');
                    },
                      success:function(response){
                            $('.modal-body').removeClass('spinner');
                            $('#title-view').html(response.banner_name);
                            $('#image-view').attr('src',url+'/uploads/images/banner/'+response.banner_image);
                            $('#description-view').html(response.link);
                      }
                  })
              });
        });

        // delete page code
        $(document).ready(function(){
            $(document).on('click','.delete',function(){
                let item_id=$(this).data('id');
                $('#delete-modal').modal('show');
                $(document).on('click','.btn-danger',function(){
                    $.ajax({
                        type:"GET",
                        url:"/cd-admin/delete-banner/",
                        data:{
                            id:item_id
                        },
                        beforeSend:function(){
                           // button loading
                            $('.btn-danger').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span> Loading...');
                            $('.btn-danger').attr('disabled',true);
                        },
                        success:function(response){
                            $('#delete-modal').modal('hide');
                            // reload page
                            toastr.success('Banner Deleted Successfully');
                                location.reload();

                        }
                    })
                });
            });
        });
        
        // status change code
        $(document).on('change','.change_status',function(e){              
              e.preventDefault();
              var id = $(this).data("id");
              var me = this;
              $.ajax({
                      url: "/cd-admin/changestatus-banner/",
                      type: 'GET',
                      data: {
                          'id': id,
                      },
                      success: function(result) {
                          if(Object.keys(result).length == 0){
                              toastr.error('Failed to Update Status');
                          }
                          else{
                           toastr.success('Status Updated successfully');
                           if(result.status == 0){
                                 me.classList.remove('btn-success');
                                 me.classList.add('btn-danger');
                           }
                           else{
                                 me.classList.remove('btn-danger');
                                 me.classList.add('btn-success');
                                 console.log('helo');
         
                           }
                          }
      
                      },
              });
      
      
          })
  </script>

@endsection