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

<style>
    #production_table tr td:first-child,
    #schedules-job-table tr td:first-child,
    #tomorrow-job-table tr td:first-child {
        cursor: all-scroll !important;
    }
</style>
<div class="nav-tabs-horizontal nav-tabs-animate" data-plugin="tabs">
    <ul class="nav nav-tabs nav-tabs-line" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="active nav-link" data-toggle="tab" href="#today_jobs" aria-controls="today_jobs" role="tab">
                Today
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" data-toggle="tab" href="#tomorrow_jobs" aria-controls="tomorrow_jobs" role="tab">
                Tomorrow
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" data-toggle="tab" href="#scheduled_Jobs" aria-controls="scheduled_Jobs" role="tab">
                Scheduled Jobs
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active animation-fade table-responsive" id="today_jobs">
            <div class="panel-body">
                <!--begin: Datatable -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-3">
                                <h3 class="no-padding">
                                    {{ \Carbon\Carbon::now()->format('D d-m-y') }}
                                    <!-- <a href="javascript:void(0);" class="btn btn-primary active ml-4 btn-sm" onclick="printTodayJobs();">Print</a> -->
                                </h3>
                            </div>
                            <div class="col-md-4">
                                <h3 class="no-padding">
                                    <span class="today-cnc-stats"></span>
                                </h3>
                            </div>
                        </div>
                    </div>
                    <table class="table dataTable table-striped w-full jobs-table" id="production_table" width="100%">
                        <thead class="m-datatable__head">
                            <tr>
                                <th></th>
                                <th width="200px">Job Reference</th>
                                <th width="200px">Production Notes</th>
                                <th width="">Required Date</th>
                                <th width="10%">Sheets</th>
                                <th>Freight</th>
                                <!-- <th>Hardware</th> -->
                                <th width="10%">Material</th>
                                <th width="10%">QA</th>
                                <th width="10%">Hold</th>
                                <th width="10%">Scheduled Date</th>
                                <th width="10%">Point Person</th>
                                <th width="20%">Status</th>
                                <th width="20%">Task Status</th>
                                <th width="20%">Pallet</th>
                                @if (Auth::user()->hasRole('Admin'))
                                <th width="">Comments</th>
                                @endif
                                @if (Auth::user()->hasRole('Super'))
                                <th width="20%"></th>
                                @endif
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th class="text-right">Total</th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th class="grand-total"></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <!-- <th></th> -->
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                            <tr>
                                <th class="text-right"></th>
                                <th></th>
                                <th></th>
                                <th colspan=2 class="grand-production-all"></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <div class=" panel-body">
                    <h4>Today Hardware jobs</h4>
                    <!--begin: Datatable -->
                    <table class="table table-hover dataTable table-striped w-full jobs-table" id="hardware_table" width="100%">
                        <thead>
                            <tr>
                                <th width="200px">Job Reference</th>
                                <th width="10%">Sheets</th>
                                <th>Freight</th>
                                <th width="10%">Material</th>
                                <th width="10%">QA</th>
                                <th width="10%">Hold</th>
                                <th width="10%">Scheduled Date</th>
                                <th width="10%">Point Person</th>
                                <th width="20%">Status</th>
                                <th width="20%">Task Status</th>
                                
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="backlog panel-body">
                    <h4>Backlog</h4>
                    <!--begin: Datatable -->
                    <table class="table table-hover dataTable table-striped w-full jobs-table" id="backlog_table" width="100%">
                        <thead>
                            <tr>
                                <th></th>
                                <th width="200px">Job Reference</th>
                                <th width="10%">Sheets</th>
                                <th>Freight</th>
                                <!-- <th>Hardware</th> -->
                                <th width="10%">Material</th>
                                <th width="10%">QA</th>
                                <th width="10%">Hold</th>
                                <th width="10%">Point Person</th>
                                <th width="20%">Status</th>
                                <th width="20%">Task Status</th>
                                <th width="20%">Pallet</th>
                                @if (Auth::user()->hasRole('Admin'))
                                <th width="">Comments</th>
                                @endif
                                @if (Auth::user()->hasRole('Super'))
                                <th width="20%"></th>
                                @endif
                            </tr>
                        </thead>
                    </table>
                </div>
                
            </div>
        </div>
        <div class="tab-pane animation-fade table-responsive" id="tomorrow_jobs">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-3">
                                <h3 class="no-padding">
                                    Tomorrow Jobs
                                    <!-- <a href="javascript:void(0);" class="btn btn-primary active ml-4 btn-sm" onclick="printTomorrowJobs();">Print</a> -->
                                </h3>
                            </div>
                            <div class="col-md-4">
                                <h3 class="no-padding">
                                    <span class="tomorrow-cnc-stats"></span>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table table-hover dataTable table-striped w-full" id="tomorrow-job-table" width="100%">
                    <thead class="m-datatable__head">
                        <tr>
                            <th width=""></th>
                            <th width="200px">Job Reference</th>
                            <th width="200px">Production Notes</th>
                            <th width="">Required Date</th>
                            <th width="10%">Sheets</th>
                            <th>Freight</th>
                            <!-- <th>Hardware</th> -->
                            <th width="10%">Material</th>
                            <th width="10%">Scheduled Date</th>
                            <th width="10%">Point Person</th>
                            <th width="20%">Status</th>
                            <th width="20%">Task Status</th>
                            <th width="20%">Pallet</th>
                            @if (Auth::user()->hasRole('Admin'))
                            <th width="">Comments</th>
                            @endif
                            @if (Auth::user()->hasRole('Super'))
                            <th width="20%"></th>
                            @endif
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th class="text-right">Total</th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th class="grand-total"></th>
                            <th></th>
                            <!-- <th></th> -->
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        <tr>
                            <th class="text-right"></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th colspan=2 class="grand-tomorrow-all"></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class=" panel-body">
                <h4>Tomorrow Hardware jobs</h4>
                <!--begin: Datatable -->
                <table class="table table-hover dataTable table-striped w-full jobs-table" id="tomorrow_hardware_table" width="100%">
                    <thead>
                        <tr>
                            <th width="200px">Job Reference</th>
                            <th width="10%">Sheets</th>
                            <th>Freight</th>
                            <th width="10%">Material</th>
                            <th width="10%">QA</th>
                            <th width="10%">Hold</th>
                            <th width="10%">Scheduled Date</th>
                            <th width="10%">Point Person</th>
                            <th width="20%">Status</th>
                            <th width="20%">Task Status</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="tab-pane animation-fade " id="scheduled_Jobs">
            <div class="panel-body table-responsive">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-3">
                                <h3 class="no-padding">
                                    Scheduled Jobs
                                    <!-- <a href="javascript:void(0);" class="btn btn-primary active ml-4 btn-sm" onclick="printScheduledJobs();">Print</a> -->
                                </h3>
                            </div>
                            <div class="col-md-4">
                                <h3 class="no-padding">
                                    <span class="scheduled-cnc-stats"></span>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table table-hover dataTable table-striped w-full" id="schedules-job-table" width="100%">
                    <thead class="m-datatable__head">
                        <tr>
                            <th width=""></th>
                            <th width="200px">Job Reference</th>
                            <th width="200px">Production Notes</th>
                            <th width="">Required Date</th>
                            <th width="10%">Sheets</th>
                            <th>Freight</th>
                            <!-- <th>Hardware</th> -->
                            <th width="10%">Material</th>
                            <th width="10%">Scheduled Date</th>
                            <th width="10%">Point Person</th>
                            <th width="20%">Status</th>
                            <th width="20%">Task Status</th>
                            <th width="20%">Pallet</th>
                            @if (Auth::user()->hasRole('Admin'))
                            <th width="">Comments</th>
                            @endif
                            @if (Auth::user()->hasRole('Super'))
                            <th width="20%"></th>
                            @endif
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th class="text-right">Total</th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th class="grand-total"></th>
                            <th></th>
                            <th></th>
                            <!-- <th></th> -->
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        <tr>
                            <th class="text-right"></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th colspan=2 class="grand-scheduled-all"></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class=" panel-body">
                <h4>Scheduled Hardware jobs</h4>
                <!--begin: Datatable -->
                <table class="table table-hover dataTable table-striped w-full jobs-table" id="scheduled_hardware_table" width="100%">
                    <thead>
                        <tr>
                            <th width="200px">Job Reference</th>
                            <th width="10%">Sheets</th>
                            <th>Freight</th>
                            <th width="10%">Material</th>
                            <th width="10%">QA</th>
                            <th width="10%">Hold</th>
                            <th width="10%">Scheduled Date</th>
                            <th width="10%">Point Person</th>
                            <th width="20%">Status</th>
                            <th width="20%">Task Status</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    
</div>
<!--end: Datatable -->
@push('datatable_scripts')
<script type="text/javascript">
    
    $(function(){
        getCncOrder('today') 
        getCncOrder('tomorrow') 
        getCncOrder('scheduled') 
    });
    function printTodayJobs() {
        $("#printable-today-jobs_wrapper").find(".buttons-print").trigger('click');
    }
    
    function printTomorrowJobs() {
        $("#printable-tomorrow-jobs_wrapper").find(".buttons-print").trigger('click');
    }
    
    
    function printScheduledJobs() {
        $("#printable-scheduled-jobs_wrapper").find(".buttons-print").trigger('click');
    }
    
    jQuery(function() {
        window.production_table = jQuery('#production_table').DataTable({
            "dom": 'frtip',
            "searching": false,
            "info": false,
            "ordering": true,
            "destroy": true,
            "paging": false,
            processing: true,
            serverSide: true,
            rowReorder: {
                update: false,
                dataSrc: 'order'
            },
            "order": [],
            oLanguage: {
                sProcessing: "<i class='fa fa-fw fa-spin fa-spinner' style='font-size:25px;'></i>"
            },
            ajax: {
                url: '{{url("/admin/jobs/production")}}',
                type: 'get',
                data: function(d) {
                    d.filter_keyword = jQuery(".production-pane .keyword-search").val(),
                    d.date_range = jQuery(".production-pane #dateRange").val(),
                    d.filter_by_status = false,
                    d.status_value = '4,5,6,7'
                },
                "dataSrc": function(json) {
                    return json.data;
                },
            },
            columns: [
            { data: 'cnc', name: 'cnc'},
            {
                data: 'job_reference',
                name: 'job_reference'
            },
            {
                data: 'special_packing',
                name: 'special_packing'
            },
            {
                data: 'formatted_date_required',
                name: 'date_required'
            },
            {
                data: 'sheet_number',
                name: 'sheet_number',
                class: 'ce'
            },
            {
                data: 'freight',
                name: 'freight',
                class: 'ce'
            },
            // {
                //     data: 'hardware',
                //     name: 'hardware',
                //     class: 'ce'
                // },
                {
                    data: 'material_status',
                    name: 'material_status'
                },
                {
                    data: 'qas',
                    name: 'qas',
                    class: 'ce'
                },
                {
                    data: 'hold',
                    name: 'hold',
                    class: 'ce'
                },
                {
                    data: 'cutting_today',
                    name: 'cutting_today',
                    class: 'ce'
                },
                {
                    data: 'point_person',
                    name: 'point_person',
                    class: 'ce'
                },
                {
                    data: 'status',
                    name: 'status',
                    class: 'ce'
                },
                {
                    data: 'task_status',
                    name: 'task_status',
                    class: 'ce'
                },
                {
                    data: 'pallet_column',
                    name: 'pallet_column',
                    class: 'ce'
                },
                @if(Auth::user()->hasRole('Admin')) {
                    data: 'comments',
                    name: 'comments',
                    'searchable': false,
                    'orderable': false
                },
                @endif
                @if(Auth::user()->hasRole('Super')) {
                    data: 'actions',
                    name: 'actions',
                    'searchable': false,
                    'orderable': false
                },
                @endif
                
                ],
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                    data;
                    
                    // Remove the formatting to get integer data for summation
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                        i : 0;
                    };
                    
                    let sheetsCount = 0;
                    api.column(4).data().map((el) => {
                        let html = $(el).find('.count');
                        if ($(html).html() == "") {
                            sheetsCount += 0;
                        } else {
                            sheetsCount += $(html).html() != undefined  ? parseFloat($(html).html()) : 0;
                        }
                    });
                    
                    // Update footer
                    $(api.column(4).footer()).html(
                    sheetsCount
                    );
                }
            });
            
            window.tomorrow_jobs = jQuery('#tomorrow-job-table').DataTable({
                "dom": 'frtip',
                "searching": false,
                "info": false,
                "ordering": true,
                "destroy": true,
                processing: true,
                serverSide: true,
                "pageLength": 25,
                "paging": false,
                rowReorder: {
                    update: false,
                    dataSrc: 'order'
                },
                "order": [],
                oLanguage: {
                    sProcessing: "<i class='fa fa-fw fa-spin fa-spinner' style='font-size:25px;'></i>"
                },
                ajax: {
                    url: '{{url("/admin/jobs/tomorrow")}}',
                    type: 'get',
                    data: function(d) {
                        d.filter_keyword = jQuery(".production-pane .keyword-search").val(),
                        d.date_range = jQuery(".production-pane #dateRange").val(),
                        d.filter_by_status = true,
                        d.status_value = '4'
                    },
                    "dataSrc": function(json) {
                        return json.data;
                    },
                },
                columns: [
                { data: 'cnc', name: 'cnc'},
                {
                    data: 'job_reference',
                    name: 'job_reference'
                },
                {
                    data: 'special_packing',
                    name: 'special_packing'
                },
                {
                    data: 'formatted_date_required',
                    name: 'date_required'
                },
                {
                    data: 'sheet_number',
                    name: 'sheet_number',
                    class: 'ce'
                },
                {
                    data: 'freight',
                    name: 'freight',
                    class: 'ce'
                },
                // {
                    //     data: 'hardware',
                    //     name: 'hardware',
                    //     class: 'ce'
                    // },
                    {
                        data: 'material_status',
                        name: 'material_status',
                        class: 'ce'
                    },
                    {
                        data: 'cutting_today',
                        name: 'cutting_today'
                    },
                    {
                        data: 'point_person',
                        name: 'point_person'
                    },
                    {
                        data: 'status',
                        name: 'status',
                        class: 'ce'
                    },
                    {
                        data: 'task_status',
                        name: 'task_status',
                        class: 'ce'
                    },
                    {
                        data: 'pallet_column',
                        name: 'pallet_column',
                        class: 'ce'
                    },
                    @if(Auth::user()->hasRole('Admin')) {
                        data: 'comments',
                        name: 'comments',
                        'searchable': false,
                        'orderable': false
                    },
                    @endif
                    @if(Auth::user()->hasRole('Super')) {
                        data: 'actions',
                        name: 'actions',
                        'searchable': false,
                        'orderable': false
                    },
                    @endif
                    ],
                    "footerCallback": function(row, data, start, end, display) {
                        var api = this.api(),
                        data;
                        
                        // Remove the formatting to get integer data for summation
                        var intVal = function(i) {
                            return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                        };
                        
                        
                        let sheetsCount = 0;
                        api.column(4).data().map((el) => {
                            let html = $(el).find('.count');
                            if ($(html).html() == "") {
                                sheetsCount += 0;
                            } else {
                                sheetsCount += $(html).html() != undefined  ? parseFloat($(html).html()) : 0;
                            }
                        });
                        
                        // Update footer
                        $(api.column(4).footer()).html(
                        sheetsCount
                        );
                    }
                });
                
                window.schedules_jobs = jQuery('#schedules-job-table').DataTable({
                    "dom": 'frtip',
                    "searching": false,
                    "info": false,
                    "ordering": true,
                    "destroy": true,
                    processing: true,
                    serverSide: true,
                    "paging": false,
                    "pageLength": 50,
                    rowReorder: {
                        update: false,
                        dataSrc: 'order'
                    },
                    "order": [],
                    oLanguage: {
                        sProcessing: "<i class='fa fa-fw fa-spin fa-spinner' style='font-size:25px;'></i>"
                    },
                    ajax: {
                        url: '{{url("/admin/jobs/scheduledJobs")}}',
                        type: 'get',
                        data: function(d) {
                            d.filter_keyword = jQuery(".production-pane .keyword-search").val(),
                            d.date_range = jQuery(".production-pane #dateRange").val(),
                            d.filter_by_status = true,
                            d.status_value = '4'
                        },
                        "dataSrc": function(json) {
                            return json.data;
                        },
                    },
                    columns: [
                    { data: 'cnc', name: 'cnc'},
                    {
                        data: 'job_reference',
                        name: 'job_reference'
                    },
                    {
                        data: 'special_packing',
                        name: 'special_packing'
                    },
                    {
                        data: 'formatted_date_required',
                        name: 'date_required'
                    },
                    {
                        data: 'sheet_number',
                        name: 'sheet_number',
                        class: 'ce'
                    },
                    {
                        data: 'freight',
                        name: 'freight',
                        class: 'ce'
                    },
                    // {
                        //     data: 'hardware',
                        //     name: 'hardware',
                        //     class: 'ce'
                        // },
                        {
                            data: 'material_status',
                            name: 'material_status',
                            class: 'ce'
                        },
                        {
                            data: 'cutting_today',
                            name: 'cutting_today'
                        },
                        {
                            data: 'point_person',
                            name: 'point_person'
                        },
                        {
                            data: 'status',
                            name: 'status',
                            class: 'ce'
                        },
                        {
                            data: 'task_status',
                            name: 'task_status',
                            class: 'ce'
                        },
                        {
                            data: 'pallet_column',
                            name: 'pallet_column',
                            class: 'ce'
                        },
                        @if(Auth::user()->hasRole('Admin')) {
                            data: 'comments',
                            name: 'comments',
                            'searchable': false,
                            'orderable': false
                        },
                        @endif
                        @if(Auth::user()->hasRole('Super')) {
                            data: 'actions',
                            name: 'actions',
                            'searchable': false,
                            'orderable': false
                        },
                        @endif
                        ],
                        "footerCallback": function(row, data, start, end, display) {
                            var api = this.api(),
                            data;
                            
                            // Remove the formatting to get integer data for summation
                            var intVal = function(i) {
                                return typeof i === 'string' ?
                                i.replace(/[\$,]/g, '') * 1 :
                                typeof i === 'number' ?
                                i : 0;
                            };
                            
                            let sheetsCount = 0;
                            api.column(4).data().map((el) => {
                                let html = $(el).find('.count');
                                if ($(html).html() == "" && $(html).html() == undefined) {
                                    sheetsCount += 0;
                                } else {
                                    sheetsCount += $(html).html() != undefined  ? parseFloat($(html).html()) : 0;
                                }
                            });
                            
                            // Update footer
                            $(api.column(4).footer()).html(
                            sheetsCount
                            );
                        }
                    });
                    
                    window.production_table.on('row-reorder', function(e, diff, edit) {
                        $.ajax({
                            url: "/admin/jobs/reorder",
                            type: 'POST',
                            data: JSON.stringify(diff),
                            headers: {
                                'X-CSRF-TOKEN': '{{csrf_token()}}',
                                'content-type': 'application/json'
                            },
                            success: function(data) {
                                refreshDatatables();
                            },
                            error: function(data) {
                                alert('Error !');
                            }
                        });
                    });
                    window.tomorrow_jobs.on('row-reorder', function(e, diff, edit) {
                        $.ajax({
                            url: "/admin/jobs/reorder",
                            type: 'POST',
                            data: JSON.stringify(diff),
                            headers: {
                                'X-CSRF-TOKEN': '{{csrf_token()}}',
                                'content-type': 'application/json'
                            },
                            success: function(data) {
                                refreshDatatables();
                            },
                            error: function(data) {
                                alert('Error !');
                            }
                        });
                    });
                    window.schedules_jobs.on('row-reorder', function(e, diff, edit) {
                        $.ajax({
                            url: "/admin/jobs/reorder",
                            type: 'POST',
                            data: JSON.stringify(diff),
                            headers: {
                                'X-CSRF-TOKEN': '{{csrf_token()}}',
                                'content-type': 'application/json'
                            },
                            success: function(data) {
                                refreshDatatables();
                            },
                            error: function(data) {
                                alert('Error !');
                            }
                        });
                    });
                    
                    // window.production_table.on( 'order.dt search.dt', function () {
                        //     window.production_table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                            //         cell.innerHTML = i+1;
                            //     } );
                            // } ).draw();
                            
                            
                            
                            
                            window.backlog_table = jQuery('#backlog_table').DataTable({
                                "dom": 'frtip',
                                "searching": false,
                                "info": false,
                                "ordering": true,
                                "destroy": true,
                                processing: true,
                                serverSide: true,
                                "paging": false,
                                colReorder: true,
                                oLanguage: {
                                    sProcessing: "<i class='fa fa-fw fa-spin fa-spinner' style='font-size:25px;'></i>"
                                },
                                ajax: {
                                    url: '{{url("/admin/jobs/backlog")}}',
                                    type: 'get',
                                    data: function(d) {
                                        d.filter_keyword = jQuery(".production-pane .keyword-search").val(),
                                        d.date_range = jQuery(".production-pane #dateRange").val(),
                                        d.filter_by_status = false,
                                        d.status_value = '5'
                                    },
                                    "dataSrc": function(json) {
                                        return json.data;
                                    },
                                },
                                columns: [{
                                    data: 'cnc',
                                    name: 'cnc'
                                },{
                                    data: 'job_reference',
                                    name: 'job_reference'
                                },
                                {
                                    data: 'sheet_number',
                                    name: 'sheet_number',
                                    class: 'ce'
                                },
                                {
                                    data: 'freight',
                                    name: 'freight',
                                    class: 'ce'
                                },
                                // {
                                    //     data: 'hardware',
                                    //     name: 'hardware',
                                    //     class: 'ce'
                                    // },
                                    {
                                        data: 'material_status',
                                        name: 'material_status',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'qas',
                                        name: 'qas',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'hold',
                                        name: 'hold',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'point_person',
                                        name: 'point_person'
                                    },
                                    {
                                        data: 'status',
                                        name: 'status',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'task_status',
                                        name: 'task_status',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'pallet_column',
                                        name: 'pallet_column',
                                        class: 'ce'
                                    },
                                    @if(Auth::user()->hasRole('Admin')) {
                                        data: 'comments',
                                        name: 'comments',
                                        'searchable': false,
                                        'orderable': false
                                    },
                                    @endif
                                    @if(Auth::user()->hasRole('Super')) {
                                        data: 'actions',
                                        name: 'actions',
                                        'searchable': false,
                                        'orderable': false
                                    },
                                    @endif
                                    ],
                                    "footerCallback": function(row, data, start, end, display) {
                                        var api = this.api(),
                                        data;
                                        
                                        // Remove the formatting to get integer data for summation
                                        var intVal = function(i) {
                                            return typeof i === 'string' ?
                                            i.replace(/[\$,]/g, '') * 1 :
                                            typeof i === 'number' ?
                                            i : 0;
                                        };
                                        
                                        
                                        
                                    }
                                });
                                
                                
                                //hardware table
                                window.today_hardware_table = jQuery('#hardware_table').DataTable({
                                    "dom": 'frtip',
                                    "searching": false,
                                    "info": false,
                                    "ordering": true,
                                    "destroy": true,
                                    processing: true,
                                    serverSide: true,
                                    "paging": false,
                                    colReorder: true,
                                    oLanguage: {
                                        sProcessing: "<i class='fa fa-fw fa-spin fa-spinner' style='font-size:25px;'></i>"
                                    },
                                    ajax: {
                                        url: '{{url("/admin/jobs/hardware/todayhd")}}',
                                        type: 'get',
                                        data: function(d) {
                                            
                                        },
                                        "dataSrc": function(json) {
                                            return json.data;
                                        },
                                    },
                                    columns: [{
                                        data: 'job_reference',
                                        name: 'job_reference'
                                    },
                                    {
                                        data: 'sheet_number',
                                        name: 'sheet_number',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'freight',
                                        name: 'freight',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'material_status',
                                        name: 'material_status',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'qas',
                                        name: 'qas',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'hold',
                                        name: 'hold',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'cutting_today',
                                        name: 'cutting_today',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'point_person',
                                        name: 'point_person'
                                    },
                                    {
                                        data: 'status',
                                        name: 'status',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'task_status',
                                        name: 'task_status',
                                        class: 'ce'
                                    }
                                    
                                    
                                    ],
                                    "footerCallback": function(row, data, start, end, display) {
                                        
                                    }
                                });
                                //hardware table
                                window.tomorrow_hardware_table = jQuery('#tomorrow_hardware_table').DataTable({
                                    "dom": 'frtip',
                                    "searching": false,
                                    "info": false,
                                    "ordering": true,
                                    "destroy": true,
                                    processing: true,
                                    "paging": false,
                                    serverSide: true,
                                    colReorder: true,
                                    oLanguage: {
                                        sProcessing: "<i class='fa fa-fw fa-spin fa-spinner' style='font-size:25px;'></i>"
                                    },
                                    ajax: {
                                        url: '{{url("/admin/jobs/hardware/tomorrowhd")}}',
                                        type: 'get',
                                        data: function(d) {
                                            
                                        },
                                        "dataSrc": function(json) {
                                            return json.data;
                                        },
                                    },
                                    columns: [{
                                        data: 'job_reference',
                                        name: 'job_reference'
                                    },
                                    {
                                        data: 'sheet_number',
                                        name: 'sheet_number',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'freight',
                                        name: 'freight',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'material_status',
                                        name: 'material_status',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'qas',
                                        name: 'qas',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'hold',
                                        name: 'hold',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'cutting_today',
                                        name: 'cutting_today',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'point_person',
                                        name: 'point_person'
                                    },
                                    {
                                        data: 'status',
                                        name: 'status',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'task_status',
                                        name: 'task_status',
                                        class: 'ce'
                                    }
                                    
                                    
                                    ],
                                    "footerCallback": function(row, data, start, end, display) {
                                        
                                    }
                                });
                                //scheduled hardware table
                                window.scheduled_hardware_table = jQuery('#scheduled_hardware_table').DataTable({
                                    "dom": 'frtip',
                                    "searching": false,
                                    "info": false,
                                    "ordering": true,
                                    "destroy": true,
                                    processing: true,
                                    serverSide: true,
                                    "paging": false,
                                    colReorder: true,
                                    oLanguage: {
                                        sProcessing: "<i class='fa fa-fw fa-spin fa-spinner' style='font-size:25px;'></i>"
                                    },
                                    ajax: {
                                        url: '{{url("/admin/jobs/hardware/scheduledhd")}}',
                                        type: 'get',
                                        data: function(d) {
                                            
                                        },
                                        "dataSrc": function(json) {
                                            return json.data;
                                        },
                                    },
                                    columns: [{
                                        data: 'job_reference',
                                        name: 'job_reference'
                                    },
                                    {
                                        data: 'sheet_number',
                                        name: 'sheet_number',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'freight',
                                        name: 'freight',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'material_status',
                                        name: 'material_status',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'qas',
                                        name: 'qas',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'hold',
                                        name: 'hold',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'cutting_today',
                                        name: 'cutting_today',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'point_person',
                                        name: 'point_person'
                                    },
                                    {
                                        data: 'status',
                                        name: 'status',
                                        class: 'ce'
                                    },
                                    {
                                        data: 'task_status',
                                        name: 'task_status',
                                        class: 'ce'
                                    }
                                    
                                    
                                    ],
                                    "footerCallback": function(row, data, start, end, display) {
                                        
                                    }
                                });
                            });
                            
                            
                            
                            
                            $(document).on("keyup", ".production-pane .filter_inputs", function() {
                                window.production_table.ajax.reload();
                                window.backlog_table.ajax.reload();
                                window.tomorrow_jobs.ajax.reload();
                                window.today_hardware_table.ajax.reload();
                                window.tomorrow_hardware_table.ajax.reload();
                                window.scheduled_hardware_table.ajax.reload();
                            });
                            
                            $(document).ready(function() {
                                $('.production-pane #dateRange').on('apply.daterangepicker', function(ev, picker) {
                                    window.production_table.ajax.reload();
                                    window.backlog_table.ajax.reload();
                                    window.tomorrow_jobs.ajax.reload();
                                    window.today_hardware_table.ajax.reload();
                                    window.tomorrow_hardware_table.ajax.reload();
                                    window.scheduled_hardware_table.ajax.reload();
                                });
                                $('.production-pane #dateRange').on('cancel.daterangepicker', function(ev, picker) {
                                    $('.production-pane #dateRange').val('');
                                    window.production_table.ajax.reload();
                                    window.backlog_table.ajax.reload();
                                    window.tomorrow_jobs.ajax.reload();
                                    window.today_hardware_table.ajax.reload();
                                    window.tomorrow_hardware_table.ajax.reload();
                                    window.scheduled_hardware_table.ajax.reload();
                                });
                            });
                            
                            
                            setInterval(function() {
                                window.production_table.ajax.reload();
                                window.backlog_table.ajax.reload();
                                
                            }, 60000 * 3);
                        </script>
                        @endpush