@extends('layouts.admin')
@section('content')
@can('promoter_task_list_create')
    <div style="margin-bottom: 10px;" class="row">
        <div class="col-lg-12">
            <a class="btn btn-success" href="{{ route('admin.promoter-task-lists.create') }}">
                {{ trans('global.assign') }} {{ trans('cruds.promoterTaskList.title_singular') }}
            </a>
            <button class="btn btn-warning" data-toggle="modal" data-target="#csvImportModal">
                {{ trans('global.app_csvImport') }}
            </button>
            @include('csvImport.modal', ['model' => 'Role', 'route' => 'admin.promoter-task-lists.parseCsvImport'])
        </div>
    </div>
@endcan
@if(Session::has('empty_record_messages'))
    <div class="alert alert-danger">
        {{ Session::get('empty_record_messages')}}
    </div>
@endif

<div class="card mb-3 p-3">
    <div class="row">
        <div class="col-12">
            <p>This section is used to filter the data below, displaying results between the selected start date and end date.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <label><strong>Start Date:</strong></label>
            <input type="date" id="start_date" class="form-control">
        </div>
        <div class="col-md-3">
            <label><strong>End Date:</strong></label>
            <input type="date" id="end_date" class="form-control">
        </div>
        <div class="col-md-3 align-self-end">
            <button id="filterDateBtn" class="btn btn-primary">
                Filter
            </button>
            <button id="resetDateBtn" class="btn btn-secondary">
                Reset
            </button>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        {{ trans('cruds.promoterTaskList.title_singular') }}
    </div>

    <div class="card-body">
        <table class="table table-bordered table-striped table-hover ajaxTable datatable datatable-PromoterTaskList">
            <thead>
                <tr>
                    <th width="10">

                    </th>
                    <th width="10">

                    </th>
                    <th>
                        {{ trans('cruds.promoterTaskList.fields.id') }}
                    </th>
                    <th>
                        {{ trans('cruds.promoterTaskList.fields.ptl_no') }}
                    </th>
                    {{-- <th>
                        {{ trans('cruds.promoterTaskList.fields.date') }}
                    </th> --}}
                    <th>
                        {{ trans('cruds.promoterTaskList.fields.date_from') }}
                    </th>
                    <th>
                        {{ trans('cruds.promoterTaskList.fields.date_to') }}
                    </th>
                    <th>
                        {{ trans('cruds.promoterTaskList.fields.promoters') }}
                    </th>
                    <th>
                        {{ trans('cruds.promoterTaskList.fields.available_store') }}
                    </th>
                    <th>
                        {{ trans('cruds.promoterTaskList.fields.state') }}
                    </th>
                    <th>
                        {{ trans('cruds.promoterTaskList.fields.city') }}
                    </th>
                    <th>
                        {{ trans('cruds.promoterTaskList.fields.status') }}
                    </th>
                    <th>
                        &nbsp;
                    </th>
                </tr>
                <tr class="filters">
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                        <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                    </td>
                    <td>
                        <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                    </td>
                    <td>
                        <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                    </td>
                    <td>
                        <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                    </td>
                    <td>
                        <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                    </td>
                    <td>
                        <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                    </td>
                    <td>
                        <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                    </td>
                    <td>
                        <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                    </td>
                    <td>
                        <input class="search" type="text" placeholder="{{ trans('global.search') }}">
                    </td>
                    <td>
                    </td>
                </tr>
            </thead>
        </table>
    </div>
</div>



@endsection
@section('scripts')
@parent
<script>
    $(function () {
        let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
        @can('promoter_task_list_delete')
            let deleteButtonTrans = '{{ trans('global.datatables.delete') }}';
            let deleteButton = {
                text: deleteButtonTrans,
                url: "{{ route('admin.promoter-task-lists.massDestroy') }}",
                className: 'btn-danger',
                action: function (e, dt, node, config) {
                    var ids = $.map(dt.rows({ selected: true }).data(), function (entry) {
                        return entry.id
                    });

                    if (ids.length === 0) {
                        alert('{{ trans('global.datatables.zero_selected') }}')

                        return
                    }

                    if (confirm('{{ trans('global.areYouSure') }}')) {
                        $.ajax({
                        headers: {'x-csrf-token': _token},
                        method: 'POST',
                        url: config.url,
                        data: { ids: ids, _method: 'DELETE' }})
                        .done(function () { location.reload() })
                    }
                }
            }
            dtButtons.push(deleteButton)
        @endcan

        let dtOverrideGlobals = {
            buttons: dtButtons,
            processing: true,
            serverSide: true,
            retrieve: true,
            responsive: true,
            aaSorting: [],
            // ajax: "{{ route('admin.promoter-task-lists.index') }}",
            ajax: {
                url: "{{ route('admin.promoter-task-lists.index') }}",
                data: function (d) {
                    // Pass date filter values to backend
                    d.start_date = $('#start_date').val();
                    d.end_date = $('#end_date').val();
                }
            },
            columns: [
                { data: 'placeholder', name: 'placeholder' },
                { data: 'placeholder', name: 'placeholder' },
                { data: 'id', name: 'id' },
                { data: 'ptl_no', name: 'ptl_no' },
                { data: 'date_from', name: 'date_from' },
                { data: 'date_to', name: 'date_to' },
                { data: 'promoters', name: 'promoters.name' },
                { data: 'availableStore', name: 'availableStore.store_name' },
                { data: 'state', name: 'state.province_name' },
                { data: 'city', name: 'city.city_name' },
                { data: 'status', name: 'status' },
                { data: 'actions', name: '{{ trans('global.actions') }}' }
            ],
            orderCellsTop: true,
            order: [[ 2, 'desc' ]],
            pageLength: 100,
        };
        let table = $('.datatable-PromoterTaskList').DataTable(dtOverrideGlobals);

        // Redraw table when Filter button clicked
        $('#filterDateBtn').on('click', function() {
            table.ajax.reload();
        });

        // Reset filters
        $('#resetDateBtn').on('click', function() {
            $('#start_date').val('');
            $('#end_date').val('');
            table.ajax.reload();
        });

        $('a[data-toggle="tab"]').on('shown.bs.tab click', function(e){
            $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust();
        });
  
        let visibleColumnsIndexes = null;
        $('.datatable thead').on('input', '.search', function () {
            let strict = $(this).attr('strict') || false
            let value = strict && this.value ? "^" + this.value + "$" : this.value

            let index = $(this).parent().index()
            if (visibleColumnsIndexes !== null) {
                index = visibleColumnsIndexes[index]
            }

            table
                .column(index)
                .search(value, strict)
                .draw()
        });

        table.on('column-visibility.dt', function(e, settings, column, state) {
            visibleColumnsIndexes = []
            table.columns(":visible").every(function(colIdx) {
                visibleColumnsIndexes.push(colIdx);
            });
        });

        table.on('responsive-resize', function ( e, datatable, columns ) {
            if (typeof window.hideSearchInputs === 'function') {
                window.hideSearchInputs(columns);
            }
        });
    });
</script>
@endsection