@include('admin.jobs.datatable.tables.search-bar')
<!--begin: Datatable -->
<table class="table table-hover dataTable table-striped w-full jobs-table" id="ready_to_pickup_table" width="100%">
    <thead class="m-datatable__head">
        <tr>
            <th width="200px">Job Reference</th>
            <th width="">Required Date</th>
            <th width="20%">Production Date</th>
            @if(Auth::user()->hasRole('Admin'))
            <th width="10%">White</th>
            <th width="10%">Colour</th>
            <th>Freight</th>
            <th>Hardware</th>
            <th>Material</th>
            <th>Point Person</th>
            @endif
            <th width="10%">QA</th>
            <th width="20%">Status</th>
            @if (Auth::user()->hasRole('Admin'))
            <th width="">Comments</th>
            @endif
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            @if(Auth::user()->hasRole('Admin'))
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            @endif
            <td></td>
            <td></td>
            @if (Auth::user()->hasRole('Admin'))
            <td></td>
            @endif
        </tr>
    </tfoot>
</table>
<!--end: Datatable -->
@push('datatable_scripts')
<script type="text/javascript">
    jQuery(function() {
        window.ready_to_pickup_table = jQuery('#ready_to_pickup_table').DataTable({
            "dom": 'frtip',
            "searching": true,
            "info": true,
            "ordering": true,
            "destroy": true,
            processing: true,
            serverSide: true,
            colReorder: true,
            "pageLength": 50,
            "order": [],
            oLanguage: {
                sProcessing: "<i class='fa fa-fw fa-spin fa-spinner' style='font-size:25px;'></i>"
            },
            ajax: {
                url: '{{url("/admin/jobs/data")}}',
                type: 'get',
                data: function(d) {
                    d.filter_keyword = jQuery(".ready-to-pickup-pane .keyword-search").val(),
                        d.date_range = jQuery(".ready-to-pickup-pane #dateRange").val(),
                        d.filter_by_status = true,
                        d.status_value = 6,
                        d.statuslist = 7,
                        d.readypickup = true
                },
                "dataSrc": function(json) {
                    return json.data;
                },
            },
            columns: [{
                    data: 'job_reference',
                    name: 'job_reference'
                },
                {
                    data: 'formatted_date_required',
                    name: 'date_required'
                },

                {
                    data: 'real_production_dates',
                    name: 'real_production_dates'
                },
                @if(Auth::user()->hasRole('Admin')) {
                    data: 'white_satin',
                    name: 'white_satin',
                    class: 'ce'
                },
                {
                    data: 'sheets_colour',
                    name: 'sheets_colour',
                    class: 'ce'
                },
                {
                    data: 'freight',
                    name: 'freight',
                    class: 'ce'
                },
                {
                    data: 'hardware',
                    name: 'hardware',
                    class: 'ce'
                },
                {
                    data: 'material_status',
                    name: 'material_status'
                },
                {
                    data: 'point_person',
                    name: 'point_person'
                },
                @endif {
                    data: 'qas',
                    name: 'qas',
                    class: 'ce'
                },
                {
                    data: 'status',
                    name: 'statusData.status',
                    class: 'ce'
                },
                @if(Auth::user()->hasRole('Admin')) {
                    data: 'comments',
                    name: 'comments'
                },
                @endif
            ],
            initComplete: function() {
                this.api().columns().every(function() {
                    var column = this;

                    var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()))
                        .on('change', function() {
                            column.search($(this).val()).draw();
                        });

                    column.data().unique().sort().each(function(d, j) {

                        var searchable = $(d).find(".searchable").html()
                        if (searchable != undefined) {
                            searchable = searchable.trim()
                            select.append('<option value="' + searchable + '">' + searchable + '</option>')
                        } else {
                        }

                    });
                });
            },
        });
    });


    $(document).on("keyup", ".ready-to-pickup-pane .filter_inputs", function() {
        window.ready_to_pickup_table.ajax.reload();
    });

    $(document).ready(function() {
        $('.ready-to-pickup-pane #dateRange').on('apply.daterangepicker', function(ev, picker) {
            window.ready_to_pickup_table.ajax.reload();
        });
        $('.ready-to-pickup-pane #dateRange').on('cancel.daterangepicker', function(ev, picker) {
            $('.ready-to-pickup-pane #dateRange').val('');
            window.ready_to_pickup_table.ajax.reload();
        });
    });
</script>
@endpush