@extends('Kitchen.layout')
@section('content')

    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('kitchen.kitchen_stock_history') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Stock Import Details — {{ ucfirst($import->type) }} ({{ $import->created_at->format('d-m-Y h:i A') }})
            </h5>
        </div>
    </div>

    <div class="card p-3 m-2">

        <div class="card-body border-bottom">
            <div class="col-lg-12 d-flex gap-2 justify-content-end">
                <button id="printBtn" class="btn btn-label-secondary">Print</button>
                <button id="exportBtn" class="btn btn-label-secondary">Export</button>
            </div>
        </div>

        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-md-1 mt-auto mb-2">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="-1">All</option>
                </select>
            </div>
            <div class="col-md-3 ms-auto mt-auto mb-2">
                <input type="text" id="customSearch" class="form-control" placeholder="Search product name...">
            </div>
        </div>

        <div class="table-responsive pb-3">
            <table class="table align-middle mb-0" id="importDetailsTable" style="width:100%">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Product ID</th>
                        <th>Product Name</th>
                        <th>Old Stock</th>
                        <th>Added</th>
                        <th>New Stock</th>
                        <th>Unit</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {

            var table = $('#importDetailsTable').DataTable({
                processing: true,
                serverSide: true,
                ordering: true,
                lengthChange: false,
                searching: false,
                autoWidth: false,

                ajax: {
                    url: "{{ route('kitchen.kitchen_stock_import_details_data') }}",
                    type: "GET",
                    data: function (d) {
                        d.import_id = {{ $import->id }};
                        d.search_value = $('#customSearch').val();
                    }
                },

                columns: [
                    {
                        data: null, orderable: false, searchable: false,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    { data: 'product_id', name: 'product_id' },
                    { data: 'product_name', name: 'product_name' },
                    { data: 'old_stock', name: 'old_stock' },
                    { data: 'added_stock', name: 'added_stock' },
                    { data: 'new_stock', name: 'new_stock' },
                    { data: 'stock_unit', name: 'stock_unit' }
                ]
            });

            var searchTimer;
            $('#customSearch').on('keyup', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(function () {
                    table.ajax.reload();
                }, 400);
            });

            $('#pageLength').on('change', function () {
                table.page.len($(this).val()).draw();
            });

            $('#exportBtn').on('click', function () {
                var params = new URLSearchParams({
                    import_id: {{ $import->id }},
                    search_value: $('#customSearch').val() || ''
                });
                window.location.href = "{{ route('kitchen.kitchen_stock_import_details_export') }}?" + params.toString();
            });

            $('#printBtn').on('click', function () {
                var params = new URLSearchParams({
                    import_id: {{ $import->id }},
                    search_value: $('#customSearch').val() || ''
                });
                window.open("{{ route('kitchen.kitchen_stock_import_details_print') }}?" + params.toString(), '_blank');
            });
        });
    </script>
@endsection