@extends('backend.layouts.app')

@section('content')

<div class="aiz-titlebar text-left mt-2 mb-3">
    <div class="row align-items-center">
        <div class="col-md-6">
            <h1 class="h3">{{translate('All Banner')}}</h1>
        </div>
        <div class="col-md-6 text-md-right">
            <a href="{{route('banner.create')}}" class="btn btn-circle btn-info">
                <span>Add New Banner</span>
            </a>
        </div>
    </div>
</div>

<div class="card">
    <form class="" id="sort_banner" action="" method="GET">
        <div class="card-header row gutters-5">
            <div class="col">
                <h5 class="mb-md-0 h6">{{ translate('Banner') }}</h5>
            </div>
            @can('delete_seller')
                <div class="dropdown mb-2 mb-md-0">
                    <button class="btn border dropdown-toggle" type="button" data-toggle="dropdown">
                        {{translate('Bulk Action')}}
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#" onclick="bulk_delete()">{{translate('Delete selection')}}</a>
                    </div>
                </div>
            @endcan
        </div>

        <div class="card-body">
            <table class="table aiz-table mb-0">
                <thead>
                <tr>
                    <th>
                        <div class="form-group">
                            <div class="aiz-checkbox-inline">
                                <label class="aiz-checkbox">
                                    <input type="checkbox" class="check-all">
                                    <span class="aiz-square-check"></span>
                                </label>
                            </div>
                        </div>
                    </th>
                    <th>{{translate('Banner Image')}}</th>
                    <th>{{translate('Banner For')}}</th>
                    <th>{{translate('URL')}}</th>
                    <th>{{translate('State')}}</th>
                    <th>{{translate('District')}}</th>
                    <th>{{translate('Pincodes')}}</th>
                    <th>{{translate('Upload Date')}}</th>
                    <th>{{translate('Actions')}}</th>
                </tr>
                </thead>
                <tbody>
                    @foreach($banner as $key => $value)
                    @php
                        $jsonData=isset($value->pincode) ? json_decode($value->pincode) : "";
                        $pincode=isset($jsonData) ? implode(",",$jsonData) : "";
                    @endphp
                        <tr>
                            <td>

                                <div class="form-group">
                                    <div class="aiz-checkbox-inline">
                                        <label class="aiz-checkbox">
                                            <input type="checkbox" class="check-one" name="id[]" value="{{$value->id}}">
                                            <span class="aiz-square-check"></span>
                                        </label>
                                    </div>
                                </div>
                            </td>
                            <td><img src="{{static_asset($value->upload->file_name)}}" width="50%"></td>
                            <td>{{$value->banner_type}}</td>
                            <td>{{$value->url}}</td>
                            <td>{{$value->state}}</td>
                            <td>{{$value->district}}</td>
                            <td>{{$pincode}}</td>
                            <td>{{date('d-m-Y',strtotime($value->created_at))}}</td>
                            <td>
                                <div class="dropdown">
                                    <button type="button" class="btn btn-sm btn-circle btn-soft-primary btn-icon dropdown-toggle no-arrow" data-toggle="dropdown" href="javascript:void(0);" role="button" aria-haspopup="false" aria-expanded="false">
                                        <i class="las la-ellipsis-v"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-xs">

                                        <a href="{{route('banner.edit',$value->id)}}" class="dropdown-item">
                                            {{translate('Edit')}}
                                        </a>
                                        <a href="#" class="dropdown-item confirm-delete" data-href="{{route('banner.delete', $value->id)}}" class="">
                                            {{translate('Delete')}}
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="aiz-pagination">
              {{ $banner->appends(request()->input())->links() }}
            </div>
        </div>
    </form>
</div>

@endsection
@section('modal')
    @include('modals.delete_modal')
@endsection
@section('script')
    <script type="text/javascript">
        $(document).on("change", ".check-all", function() {
            if(this.checked) {
                // Iterate each checkbox
                $('.check-one:checkbox').each(function() {
                    this.checked = true;
                });
            } else {
                $('.check-one:checkbox').each(function() {
                    this.checked = false;
                });
            }
        });
        function bulk_delete() {
            var data = new FormData($('#sort_banner')[0]);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{route('bulk_banner_delete')}}",
                type: 'POST',
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    if(response == 1) {
                        location.reload();
                    }
                }
            });
        }
    </script>
@endsection