@extends('layouts.app')
@section('title')
    Product Reordering
@endsection
@section('button')
    <form action="{{ route('productReordering.export') }}" method="POST" style="display: inline;" id="exportForm">
        @csrf
        <button type="submit" class="btn btn-danger" id="exportBtn">
            <i class="bi bi-download"></i> Export
        </button>
    </form>
    <a type="button" class="btn btn-info" href="{{ route('product_reordering.create') }}">
        <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 datatable table-bordered m-0">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Part No</th>
                            <th>Part Name</th>
                            <th>Unit</th>
                            <th>Type of Product</th>
                            <th>Model</th>
                            <th>Variance</th>
                            <th>Critical Min</th>
                            <th>Minimum Qty</th>
                            <th>Maximum Qty</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                <input type="text" id="search-part_no" class="all_column" placeholder="Search Part No">
                            </th>
                            <th>
                                <input type="text" id="search-part_name" class="all_column"
                                    placeholder="Search Part Name">
                            </th>
                            <th>
                                <input type="text" id="search-uom" class="all_column" placeholder="Search Unit">
                            </th>
                            <th>
                                <input type="text" id="search-type" class="all_column"
                                    placeholder="Search Type of Product">
                            </th>
                            <th>
                                <input type="text" id="search-model" class="all_column" placeholder="Search Model">
                            </th>
                            <th>
                                <input type="text" id="search-variance" class="all_column" placeholder="Search Variance">
                            </th>
                            <th>
                                <input type="text" id="search-critical_min" class="all_column"
                                    placeholder="Search Critical Min">
                            </th>
                            <th>
                                <input type="text" id="search-min" class="all_column" placeholder="Search Minimum Qty">
                            </th>
                            <th>
                                <input type="text" id="search-max" class="all_column" placeholder="Search Maximum Qty">
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        var searchTimeout;
        var table;

        $(document).ready(function() {
            let bool = true;
            const tableKey = 'DataTables_DataTables_Table_0_' + window.location.pathname;
            const savedState = localStorage.getItem(tableKey);

            if (savedState) {
                bool = false;
            }
            table = $('.datatable').DataTable({
                perPageSelect: [5, 10, 15, ["All", -1]],
                processing: true,
                stateSave: true,
                serverSide: true,
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('product_reordering.index') }}",
                    type: 'GET',
                    data: function(d) {
                        d.part_no = $('#search-part_no').val();
                        d.part_name = $('#search-part_name').val();
                        d.uom = $('#search-uom').val();
                        d.type = $('#search-type').val();
                        d.model = $('#search-model').val();
                        d.variance = $('#search-variance').val();
                        d.critical_min = $('#search-critical_min').val();
                        d.min_qty = $('#search-min').val();
                        d.max_qty = $('#search-max').val();
                        d.bool = bool;
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'products.part_no',
                        name: 'products.part_no',
                    },
                    {
                        data: 'products.part_name',
                        name: 'products.part_name',
                    },
                    {
                        data: 'products.units.name',
                        name: 'products.units.name',
                        defaultContent: ''
                    },
                    {
                        data: 'products.type_of_products.type',
                        name: 'products.type_of_products.type',
                        defaultContent: ''
                    },
                    {
                        data: 'products.model',
                        name: 'products.model',
                    },
                    {
                        data: 'products.variance',
                        name: 'products.variance',
                    },
                    {
                        data: 'critical_min',
                        name: 'critical_min',
                    },
                    {
                        data: 'min_qty',
                        name: 'min_qty',
                    },
                    {
                        data: 'max_qty',
                        name: 'max_qty',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                paging: true,
                pagingType: 'input',
            });
            bool = false;

            $(document).on('keyup', '#dt-search-0', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    table.search($('#dt-search-0').val()).draw(false);
                }, 1000);
            });

            $('.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(false);
                    }
                });
            });

            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);
                    }
                });
            }
        });

        document.getElementById('exportForm').addEventListener('submit', function() {
            var exportBtn = document.getElementById('exportBtn');
            exportBtn.disabled = true;
            exportBtn.innerHTML = 'Exporting...';

            setTimeout(function() {
                exportBtn.disabled = false;
                exportBtn.innerHTML = '<i class="bi bi-download"></i> Export';
            }, 3000);
        });
    </script>
@endsection