@extends('layouts.app')
@section('title')
    Material Issue & Receive
@endsection
@section('button')
    <a type="button" class="btn btn-info" href="{{ route('material-issue-receive.issue') }}">
        <i class="bi bi-plus-square"></i> Create
    </a>
@endsection
@section('content')
    <style>
        .all_column {
            background: transparent;
            color: white;

        }
    </style>
    <div class="card">
        <div class="card-body tr_1">
            <div class="table-responsive tr_2">
                <table class="table table-bordered m-0 datatable">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Ref No.</th>
                            <th>MRF No.</th>
                            <th>Production Planning Ref No.</th>
                            <th>Request From</th>
                            <th>Request To</th>
                            <th>Request Date</th>
                            <th>Plan Date</th>
                            <th>Machine</th>
                            <th>Shift</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                <input type="text" class="all_column " placeholder="Search Ref No">
                            </th>
                            <th>
                                <input type="text" class="all_column " placeholder="Search MRF No">
                            </th>
                            <th>
                                <input type="text" class="all_column " placeholder="Search Production Planning">
                            </th>
                            <th>
                                <input type="text" class="all_column " placeholder="Search Request From">
                            </th>
                            <th>
                                <input type="text" class="all_column " placeholder="Search Request To">
                            </th>
                            <th>
                                <input type="text" class="all_column " placeholder="Search Request Date">
                            </th>
                            <th>
                                <input type="text" class="all_column " placeholder="Search Plan Date">
                            </th>
                            <th>
                                <input type="text" class="all_column " placeholder="Search Machine">
                            </th>
                            <th>
                                <input type="text" class="all_column " placeholder="Search Shift">
                            </th>
                            <th>
                                <input type="text" class="all_column " placeholder="Search Status">
                            </th>
                            <th></th>

                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        var searchTimeout;
        var data = "{{ route('material-issue-receive.data') }}";
        var searchTimeout;
        var table;
        let allData = {};
        $(document).ready(function() {
            let bool = true;
            const tableKey = 'DataTables_DataTables_Table_0_' + window.location.pathname;
            const savedState = localStorage.getItem(tableKey);

            if (savedState) {
                allData = JSON.parse(savedState);
                if (allData.columns) {
                    allData.columns.forEach((col, i) => {
                        if (col.search) {
                            $('thead tr:eq(1) th').eq(i).find('input').val(col.search.search);
                        }
                    });
                }

                if (allData.search && allData.search.sSearch) {
                    $('#dt-search-0').val(allData.search.sSearch);
                }
                bool = false;
            }
            
            var table = $('.datatable').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                stateSave: true,
                serverSide: true,
                language: {
                    processing: 'Processing' // Custom processing text
                },
                ajax: {
                    url: data, // URL for your server-side data endpoint
                    type: 'GET',
                    data: function(d) {
                        d.ref_no = $('#search-ref_no').val();
                        d.mir_ref_no = $('#search-mir_ref_no').val();
                        d.pro_order_no = $('#search-pro_order_no').val();
                        d.department_from = $('#search-department_from').val();
                        d.department_to = $('#search-department_to').val();
                        d.request_date = $('#search-request_date').val();
                        d.plan_date = $('#search-plan_date').val();
                        d.machine = $('#search-machine').val();


                        d.shift = $('#search-shift').val();

                        d.status = $('#search-status').val();
                        d.bool = bool;
                    }
                }, // URL to fetch data
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'ref_no',
                        name: 'ref_no',
                        defaultContent: '',
                    },
                    {
                        data: 'material_requisitions.ref_no',
                        name: 'material_requisitions.ref_no',
                        defaultContent: '',
                    },
                    {
                        data: 'material_requisitions.pro_order_no',
                        name: 'material_requisitions.pro_order_no',
                        defaultContent: '',
                    },
                    {
                        data: 'material_requisitions.department_from.name',
                        name: 'material_requisitions.department_from.name',
                        defaultContent: '',
                    },
                    {
                        data: 'material_requisitions.department_to.name',
                        name: 'material_requisitions.department_to.name',
                        defaultContent: '',
                    },
                    {
                        data: 'material_requisitions.request_date',
                        name: 'material_requisitions.request_date',
                        defaultContent: '',
                    },
                    {
                        data: 'material_requisitions.plan_date',
                        name: 'material_requisitions.plan_date',
                        defaultContent: '',
                    },
                    {
                        data: 'material_requisitions.machines.name',
                        name: 'material_requisitions.machines.name',
                        defaultContent: '',
                    },
                    {
                        data: 'material_requisitions.shift',
                        name: 'material_requisitions.shift',
                        defaultContent: '',
                    },
                    {
                        data: 'status',
                        name: 'status',
                        defaultContent: '',
                        render: function(data, type, row) {
                            if (data === 'issued') {
                                return '<span class="badge border border-warning text-warning">Issued</span>';
                            } else if (data === 'requested') {
                                return '<span class="badge border border-success text-warning">Requested</span>';
                            } else
                            if (data === 'Received') {
                                return '<span class="badge border border-success text-success">Received</span>';
                            } else {
                                return '<span class="badge badge-secondary">' + data +
                                    '</span>'; // Default case
                            }
                        }
                    },


                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                paging: true,
                pagingType: 'input',
                // Other DataTables options go here
            });
            bool = false;

            

            $('.datatable thead tr:eq(1) th').each(function(i) {
                $('input', this).on('keyup change', function() {
                    if (table.column(i).search() !== this.value) {
                        table
                            .column(i)
                            .search(this.value)
                            .draw();
                    }
                });
            });

            let state = table.state.loaded();
            if (state) {
                table.columns().eq(0).each(function(colIdx) {
                    var colSearch = state.columns[colIdx].search.search;
                    if (colSearch) {
                        $('input', $('.datatable thead tr:eq(1) th').eq(colIdx)).val(colSearch);
                    }
                });
            }

        });
    </script>
@endsection