@include('admin.jobs.datatable.tables.search-bar')
<table class="m-datatable__table table table-bordered table-hover" id="completed_jobs_table" width="100%">
    <thead class="m-datatable__head">
        <tr>
            <th width="200px">Job Reference</th>
            <th width="20%">Production Date</th>
            <th width="20%">Material (M)</th>
            <th width="20%">M. Status</th>
            <th width="20%">QA</th>
            <th width="20%">Status</th>
            <th width="20%">C. Notes</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
</table>
<!--end: Datatable -->
@push('datatable_scripts')
<script type="text/javascript">
    jQuery(function(){
        window.completed_jobs_table = jQuery('#completed_jobs_table').DataTable({
            "dom": 'frtip',
            "searching": false,
            "info": true,
            "ordering": true,
            "destroy":true,
            processing: true,
            serverSide: true,
            colReorder: true,
            "pageLength": 50,
            oLanguage: {
                sProcessing: "<i class='fa fa-fw fa-spin fa-spinner' style='font-size:25px;'></i>"
            },
            ajax: {
                url : '{{url("/admin/jobs/data")}}',
                type:'get',
                beforeSend: function(){
                    // blockMainContent();
                },
                complete: function(){
                    // unBlockMainContent();
                },
                data: function(d) {
                    d.filter_keyword=jQuery("#completejobs .keyword-search").val(),
                    d.date_range=jQuery("#completejobs #dateRange").val(),
                    d.filter_by_status=true,
                    d.status_value='7',
                    d.name_filter=jQuery("#completejobs #searchfilter").val()
                },
                "dataSrc": function (json) {
                    return json.data;
                },
            },
            columns: [
            { data: 'job_reference', name: 'job_reference'},
            { data: 'real_production_dates', name: 'real_production_dates'},
            { data: 'material', name: 'material'},
            { data: 'material_status', name: 'material_status'},
            { data: 'qas', name: 'qas', class: 'ce'},
            { data: 'status', name: 'status', class: 'ce'},
            { data: 'customer_notes_icon', name: 'customer_notes', class: 'ce'},
            { data: 'actions', name: 'actions', searchable: false, orderable: false},
            ]
        });
    });


    $(document).on("keyup", "#completejobs .filter_inputs", function() { 
        window.completed_jobs_table.ajax.reload();
    });

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