@include('admin.jobs.datatable.tables.search-bar')
<!--begin: Datatable -->
<table class="table table-hover dataTable table-striped w-full jobs-table" id="ready_to_schedule_table" width="100%">
    <thead class="m-datatable__head">
        <tr>
            <th width="50px">Job Reference</th>
            <th width="10%">Required Date</th>
            @if(Auth::user()->hasRole('Admin'))
            <th width="10%">White</th>
            <th width="10%">Colour</th>
            <th>Freight</th>
            <th>Hardware</th>
            <th width="10%">Material</th>
            <th width="10%" class="text-center">Production Date</th>
            <th width="10%">Point Person</th>
            @endif
            <th title="Field #6">Status</th>

            {{--<th title="Field #7">@lang('global.jobs.fields.order-pdf')</th>--}}
            <th width="200px">&nbsp;</th>

        </tr>
    </thead>
    @if(Auth::user()->hasRole('Admin'))
    <tfoot>
        <tr>
            <th class="text-right">Total</th>
            <th></th>
            <th class="grand-total"></th>
            <th class="grand-total"></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 colspan=2 class="grand-total-all"></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
    @endif
</table>
<!--end: Datatable -->
@push('datatable_scripts')
<script type="text/javascript">
    var editor;
    
    scheduledStatuses = statuses.filter(function(status) {
        return status.value == 2;
    })

    editor = new $.fn.dataTable.Editor({
        ajax: '{{url("admin/jobs/editor/update")}}',
        table: "#ready_to_schedule_table",
        fields: [{
            label: "Job Reference:",
            name: "job_reference",
            type: 'text',
            attr: {
                maxlength: 50,
                placeholder: 'Full name',
                value: ''
            }
        }, {
            label: "Required Date:",
            name: "date_required",
            type: "date",
            format: 'd-m-Y'
        }, {
            label: "Id:",
            name: "id",
        }, {
            label: "White Sheets:",
            name: "white_satin"
        }, {
            label: "Job Reference:",
            name: "name"
        }, {
            label: "Thickness:",
            name: "thickness"
        }, {
            label: "Supplier:",
            name: "supplier",
        }, {
            label: "Colour:",
            name: "colour"
        }, {
            label: "Customer:",
            name: "user_id",
            type: "select",
            options: customers
        }, {
            label: "Sheet 24:",
            name: "white_sheet_24",
        }, {
            label: "Sheet 36:",
            name: "white_sheet_36",
        }, {
            label: "Freight:",
            name: "freight_option_id",
            type: "select",
            options: freights
        }, {
            label: "Hardware:",
            name: "hardware",
            type: "select",
            options: hardwares,
            multiple: true,
        }, {
            label: "Material Status:",
            name: "material_status",
            type: "select",
            options: material_status,
        }, {
            label: "Point Person:",
            name: "account_manager_id",
            type: "select",
            options: pointPerson,
        }, {
            label: "Status:",
            name: "status",
            type: "select",
            options: scheduledStatuses
        }, {
            label: "Colour Offset:",
            name: "colour_offcut",
            type: "checkbox",
            separator: "|",
            ipOpts: [{
                label: '',
                value: 1
            }]
        }, {
            label: "Satin 24:",
            name: "white_satin_24"
        }, {
            label: "Satin 36:",
            name: "white_satin_36"
        }, {
            label: "Colour Sheets:",
            name: "sheets_colour"
        }]
    });

    editor.on('initEdit', function(e, action, rowData) {
        editor.show(['sheets_colour', 'white_satin_24', 'white_satin_36', 'supplier', 'thickness', 'colour']);

        var name = this.s.includeFields[0]
        if (name == 'colour_offcut') {
            if (rowData.painted == 'Yes') {
                editor.hide('sheets_colour');
            } else {
                editor.hide('white_satin_24');
                editor.hide('white_satin_36');
            }
        } else if (name == "name") {
            if (rowData.job_type == 'Carcase' || (rowData.job_type != 'Carcase' && rowData.painted == 'Yes')) {
                editor.hide('supplier');
                editor.hide('thickness');
                editor.hide('colour');
            }
        }
    });

    // Activate an inline edit on click of a table cell
    // $('#ready_to_schedule_table').on('click', 'td.inlinesearch', function(e) {
    //     var rowData = window.ready_to_schedule_table.row(this.parentNode).data();
    //     editor.inline( this, {
    //     buttons: { label: '&gt;', fn: function () { this.submit(); } }
    // } );
    // });
    $('#ready_to_schedule_table').on('click', 'td.bubblesearch', function(e) {
    var rowData = window.ready_to_schedule_table.row(this.parentNode).data();
    if ($(this).hasClass('white_satin')) {
        if (rowData.job_type == 'Carcase' && rowData.status_data.id <= 4) {
            editor.bubble(this);
        }
    } else if ($(this).hasClass('sheets_colour')) {
        if (rowData.job_type != 'Carcase' && rowData.status_data.id <= 4) {
            editor.bubble(this);
        }
    } else {
        editor.bubble(this);
    }

    });

    jQuery(function() {
        window.ready_to_schedule_table = jQuery('#ready_to_schedule_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(".schedule-pane .keyword-search").val(),
                        d.date_range = jQuery(".schedule-pane #dateRange").val(),
                        d.filter_by_status = true,
                        d.status_value = 3,
                        d.statuslist = 2,
                        d.readytoschedule = true
                },
                "dataSrc": function(json) {
                    return json.data;
                },
            },
            columns: [{
                    data: 'job_reference',
                    name: 'job_reference',
                    class: 'bubblesearch',
                    editField: ['name', 'thickness', 'supplier', 'colour', 'user_id']
                },
                {
                    data: 'formatted_date_required',
                    name: 'date_required',
                    class: 'bubblesearch',
                    editField: ['date_required']
                },
                @if(Auth::user()->hasRole('Admin')) {
                    data: 'white_satin',
                    name: 'white_satin',
                    class: 'ce white_satin bubblesearch',
                    searchable: false,
                    editField: ['white_sheet_24', 'white_sheet_36', 'white_offcut']
                },
                {
                    data: 'sheets_colour',
                    name: 'sheets_colour',
                    class: 'ce sheets_colour bubblesearch',
                    searchable: false,
                    editField: ['white_satin_24', 'white_satin_36', 'colour_offcut', 'sheets_colour']
                },
                {
                    data: 'freight',
                    name: 'freight',
                    class: 'ce freight bubblesearch',
                    editField: ['freight_option_id']
                },
                {
                    data: 'hardware',
                    name: 'hardware',
                    class: 'ce bubblesearch',
                    editField: ['hardware']
                },
                {
                    data: 'material_status',
                    name: 'material_status',
                    class: 'ce bubblesearch'
                },
                {
                    data: 'cutting_today',
                    name: 'production_date'
                },
                {
                    data: 'point_person',
                    name: 'point_person',
                    class: 'ce bubblesearch',
                    editField: ['account_manager_id']
                },

                @endif {
                    data: 'status',
                    name: 'statusData.status',
                    class: 'ce bubblesearch',
                    editField: ['status']
                },
                {
                    data: 'actions',
                    name: 'actions',
                    searchable: false,
                    orderable: false
                },
            ],
            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 {}

                    });
                });
            },
            @if(Auth::user()->hasRole('Admin'))

            "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 total_colours = 0;
                api.column(2).data().map((el) => {
                    if ($(el).find('.count').html()) {
                        total_colours += parseFloat($(el).find('.count').html())
                    }
                });


                let pageTotal = 0;
                api.column(1).data().map((el) => {
                    if ($(el).find('.count').html()) {
                        pageTotal += parseFloat($(el).find('.count').html())
                    }
                });

                // Update footer
                $(api.column(1).footer()).html(
                    pageTotal
                );
                $(api.column(2).footer()).html(
                    total_colours
                );

                // Update footer
                console.log(api.row(1).columns().footer())
                $(api.column(2).footer()).html(

                );
                $('.grand-total-all').html(pageTotal + total_colours);
            }
            @endif
        });
    });

    $(document).on("keyup", ".schedule-pane .filter_inputs", function() {
        window.ready_to_schedule_table.ajax.reload();
    });

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