@include('admin.jobs.datatable.tables.search-bar')

<table class="table table-hover dataTable table-striped w-full jobs-table" id="search_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'))
            <td width="10%">White</th>
            <th width="10%">Colour</th>
            <th width="10%">Freight</th>
            <th width="10%">Hardware</th>
            <th width="10%">Material</th>
            <th width="10%">Point Person</th>
            {{--<th title="Field #7">Cutting Today</th>--}}
            @endif
            @if(Auth::user()->hasRole('Customer'))
            <th width="20%">Production Date</th>
            @endif
            <th width="10%">QA</th>
            <th width="20%">Status</th>
            @if (Auth::user()->hasRole('Super'))
            <th width="20%"></th>
            @endif
            @if (Auth::user()->hasRole('Admin'))
            <th width="">Comments</th>
            @endif
            {{--<th title="Field #7">@lang('global.jobs.fields.order-pdf')</th>--}}
        </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
            @if(Auth::user()->hasRole('Customer'))
            <td></td>
            @endif
            <td></td>
            <td></td>
            @if (Auth::user()->hasRole('Super'))
            <td></td>
            @endif
            @if (Auth::user()->hasRole('Admin'))
            <td></td>
            @endif

        </tr>
    </tfoot>
</table>
<!--end: Datatable -->
@push('datatable_scripts')
<script type="text/javascript">
    jQuery(function() {
        window.search_table = jQuery('#search_table').DataTable({
            "dom": 'frtip',
            "order": [],
            "searching": true,
            "info": true,
            "ordering": true,
            "destroy": true,
            processing: true,
            serverSide: true,
            colReorder: true,
            "pageLength": 50,
            oLanguage: {
                sProcessing: '<div class="alert text-center"><i class="fa fa-spin fa-refresh"></i>Loading...</div>'
            },
            ajax: {
                url: '{{url("/admin/jobs/data")}}',
                type: 'get',
                data: function(d) {
                    d.searchtab = true,
                        d.filter_keyword = jQuery(".search-pane .keyword-search").val(),
                        d.date_range = jQuery(".search-pane #dateRange").val(),
                        @if(@$status == 'Progress' || @$status == 'Closed')
                    d.filter_by_status = true,


                        @if(@$status == 'Progress')
                    d.status_value = '1,2,3,4,5,6',
                        @endif

                    @if(@$status == 'Closed')
                    d.status_value = '7',
                        @endif

                    @endif
                    d.dummy = ''
                },
                "dataSrc": function(json) {
                    return json.data;
                },
            },

            columns: [{
                    data: 'job_reference',
                    name: 'job_reference'
                },
                {
                    data: 'real_production_dates',
                    name: 'real_production_dates'
                },
                {
                    data: 'cutting_today',
                    name: 'production_date'
                },
                @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
                @if(Auth::user()->hasRole('Customer')) {
                    data: 'real_production_date',
                    name: 'real_production_date'
                },
                @endif {
                    data: 'qas',
                    name: 'qas',
                    class: 'ce'
                },
                {
                    data: 'status',
                    name: 'statusData.status',
                    class: 'ce'
                },
                @if(Auth::user()->hasRole('Super') || Auth::user()->hasRole('Admin')) {
                    data: 'actions',
                    name: 'actions',
                    'searchable': false,
                    'orderable': false
                },
                @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", ".search-pane .filter_inputs", function() {
        window.search_table.ajax.reload();
    });

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