@extends('layouts.app')
@section('title')
    Purchase Order
@endsection
@section('button')
    <a href="{{ route('purchaseOrder.export') }}" class="btn btn-danger" id="exportBtn">
        <i class="bi bi-download"></i> Export
    </a>
    <a type="button" class="btn btn-info" href="{{ route('purchase_order.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 table-bordered m-0 datatable">
                    <thead>
                        <tr>
                            <th>Sr.</th>
                            <th>PO No</th>
                            <th>Ref No</th>
                            <th>Supplier</th>
                            <th>Date</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <thead>
                        <tr>
                            <th></th>
                            <th><input type="text" id="serach-po_no" class="all_column" placeholder="Search PO No"></th>
                            <th><input type="text" id="serach-ref_no" class="all_column" placeholder="Search Ref No">
                            </th>
                            <th><input type="text" id="serach-supplier" class="all_column" placeholder="Search Supplier">
                            </th>
                            <th><input type="text" id="serach-date" class="all_column" placeholder="Search Date"></th>
                            <th><input type="text" id="serach-status" class="all_column" placeholder="Search Status">
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        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);
                        }
                    });
                }

                if (allData.search && allData.search.sSearch) {
                    $('#dt-search-0').val(allData.search.sSearch);
                }
                bool = false;
            }
            
            table = $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                displayStart: allData.start || 0,
                pageLength: allData.length || 10,
                order: allData.order || [],
                search: allData.search || {},
                language: {
                    processing: 'Processing'
                },
                ajax: {
                    url: "{{ route('purchase_order.index') }}",
                    type: 'GET',
                    data: function(d) {
                        d.po_no = $('#search-po_no').val();
                        d.ref_no = $('#search-ref_no').val();
                        d.supplier = $('#search-supplier').val();
                        d.date = $('#search-date').val();
                        d.status = $('#search-status').val();
                        d.bool = bool;
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'ref_no',
                        name: 'ref_no'
                    },
                    {
                        data: 'quotation_ref_no',
                        name: 'quotation_ref_no'
                    },
                    {
                        data: 'supplier.name',
                        name: 'supplier.name',
                        defaultContent: ''
                    },
                    {
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        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();
                }, 1000);
            });

            let isFirstLoad = true;

            $('.datatable').on('search.dt page.dt order.dt length.dt', function() {
                if (isFirstLoad) {
                    isFirstLoad = false;
                    return;
                }
                bool = false;
                storeInLocalStorage();
            });

            $('.datatable thead tr:eq(1) th').each(function(i) {
                $('input', this).on('keyup change', function() {
                    let value = this.value;
                    if (table.column(i).search() !== value) {
                        clearTimeout(searchTimeout);
                        searchTimeout = setTimeout(() => {
                            table.column(i).search(value).draw();
                            bool = false;
                            storeInLocalStorage();
                        }, 500);
                    }
                });
            });

            function storeInLocalStorage() {
                const tableKey = 'DataTables_DataTables_Table_0_' + window.location.pathname;
                const settings = table.settings()[0];
                const state = {
                    time: +new Date(),
                    start: settings._iDisplayStart,
                    length: settings._iDisplayLength,
                    order: settings.aaSorting,
                    search: settings.oPreviousSearch,
                    columns: settings.aoPreSearchCols.map(col => ({
                        search: col.sSearch
                    }))
                };
                localStorage.setItem(tableKey, JSON.stringify(state));
            }



        });

        function confirmComplete(form, successMessage = "The Purchase Order has been completed.") {
            Swal.fire({
                title: "Please confirm if you’re ready to complete the Purchase Order.",
                text: "Once completed, the PO will be closed and this action cannot be undone!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "✔ Complete",
                cancelButtonText: "✖ Cancel",
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        }

        document.getElementById('exportForm').addEventListener('submit', function() {
            var exportBtn = document.getElementById('exportBtn');
            exportBtn.disabled = true;
            exportBtn.innerHTML = 'Exporting...';
        });
    </script>
@endsection