@extends('Kitchen.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        #productSearchResults {
            top: 100%;
            left: 0;
            background: #fff;
            border: 1px solid #dee2e6;
            border-top: none;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
            z-index: 2000;
            border-radius: 0 0 6px 6px;
        }

        #productSearchResults .list-group-item {
            border-left: none;
            border-right: none;
            cursor: pointer;
        }

        #productSearchResults .list-group-item:first-child {
            border-top: none;
        }

        .col-md-4.position-relative {
            margin-bottom: 0.5rem;
        }

        .billing-search-sticky {
            position: sticky;
            bottom: 0;
            background: #fff;
            z-index: 10;
            padding-top: 0.5rem;
            border-top: 1px solid #eee;
        }
    </style>

    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Stock Billing</h5>
        </div>
    </div>

    <div class="card p-3 m-2">
        <div class="row mb-3 g-2">
            {{-- <div class="col-md-4 position-relative">
                <label class="form-label mb-1">Search Product (ID or Name)</label>
                <input type="text" id="productSearchInput" class="form-control" placeholder="Type product ID or name...">
                <div id="productSearchResults" class="list-group position-absolute w-100"
                    style="z-index:1000; max-height:250px; overflow-y:auto; display:none;"></div>
            </div> --}}
            <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
                <div class="col-auto">
                    <h5>Stock Billing</h5>
                </div>
                <div class="col-auto">
                    <a href="{{ route('kitchen.kitchen_stock_billing_history_page') }}"
                        class="btn btn-label-secondary">History</a>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table" id="billingTable">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Product ID</th>
                        <th>Product Name</th>
                        <th>Category</th>
                        <th>Stock</th>
                        <th style="min-width:140px;">Add Stock</th>

                        <th>Stock Limit</th>
                        <th>Stock Type</th>

                        <th>MRP</th>
                        <th>Price</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="billingTableBody">
                    <tr>
                        <td colspan="11" class="text-center text-muted">Loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row mb-3 g-2 mt-2">
            <div class="col-md-3">
                <label class="form-label mb-1">Send To Branch</label>
                <select id="branchSelect" class="form-select">
                    <option value="">Select Branch</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" @selected($loop->first)>{{ $branch->branch_name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4 position-relative">
                <label class="form-label mb-1">Search Product (ID or Name)</label>
                <input type="text" id="productSearchInput" class="form-control" placeholder="Type product ID or name...">
                <div id="productSearchResults" class="list-group position-absolute w-100"
                    style="z-index:2000; max-height:250px; overflow-y:auto; display:none;"></div>
            </div>
        </div>

        <div class="d-flex justify-content-end gap-2 mt-3">
            <button id="printBillingBtn" class="btn btn-label-secondary">Print</button>

            <button id="exportBillingBtn" class="btn btn-label-secondary">Export</button>
            <button id="submitBillingBtn" class="btn btn-primary">Submit</button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Confirm Submit Modal -->
    <div class="modal fade" id="confirmSubmitModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 p-3">
                <div class="modal-header border-0">
                    <h5 class="modal-title">Confirm Stock Update</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    Apply stock updates for <strong id="confirmSubmitCount">0</strong> product(s)?
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="confirmSubmitBtn" class="btn btn-primary">Yes, Update Stock</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function csrfToken() {
            return $('meta[name="csrf-token"]').attr('content');
        }
        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken() } });

        let billingTable;

        function rowAddStockCell(p) {
            const step = (p.stock_type === 'kg') ? '0.001' : '1';
            return `<input type="number" class="form-control form-control-sm addStockInput" data-id="${p.id}" min="${step}" step="${step}" placeholder="Qty">`;
        }

        $(document).ready(function () {
            billingTable = $('#billingTable').DataTable({
                processing: true,
                serverSide: false,           // ← changed
                paging: false,
                info: false,
                searching: false,
                ordering: false,
                autoWidth: false,
                ajax: {
                    url: "{{ route('kitchen.kitchen_stock_billing_low_stock') }}", type: "GET", dataSrc: 'data'          // ← Yajra's response still has a top-level "data" key
                },
                columnDefs: [
                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }
                ],
                columns: [
                    { data: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'product_id' },
                    { data: 'product_name' },
                    { data: 'category' },
                    { data: 'stock' },
                    { data: 'add_stock', orderable: false, searchable: false },
                    { data: 'stock_limit' },
                    { data: 'stock_type' },

                    { data: 'mrp' },
                    { data: 'price' },
                    { data: 'remove', orderable: false, searchable: false }
                ],
                rowId: 'id',
                createdRow: function (row, data) {
                    $(row).attr('data-product-id', data.id).data('product', data);
                }
            });

            let searchTimer;
            $('#productSearchInput').on('keyup', function () {
                const term = $(this).val().trim();
                clearTimeout(searchTimer);
                if (!term) { $('#productSearchResults').hide().empty(); return; }
                searchTimer = setTimeout(function () {
                    $.get("{{ route('kitchen.kitchen_stock_billing_search_product') }}", { term }, function (response) {
                        const box = $('#productSearchResults');
                        box.empty();
                        if (!response.rows.length) {
                            box.append('<div class="list-group-item text-muted">No matches</div>');
                        } else {
                            response.rows.forEach(p => {
                                box.append(`<a href="#" class="list-group-item list-group-item-action searchResultItem" data-payload='${JSON.stringify(p)}'>${p.product_id} — ${p.product_name}</a>`);
                            });
                        }
                        box.show();
                    });
                }, 350);
            });

            $(document).on('click', '.searchResultItem', function (e) {
                e.preventDefault();
                const p = $(this).data('payload');

                if ($(`#billingTable tr[data-product-id="${p.id}"]`).length) {
                    $(`#billingTable tr[data-product-id="${p.id}"] .addStockInput`).focus();
                } else {
                    billingTable.row.add({
                        DT_RowIndex: billingTable.rows().count() + 1,
                        product_id: p.product_id,
                        product_name: p.product_name,
                        category: p.category,
                        stock: p.stock,
                        stock_limit: p.stock_limit,
                        mrp: p.mrp,
                        stock_type: p.stock_type,
                        price: p.price,
                        add_stock: rowAddStockCell(p),
                        remove: `<button type="button" class="btn btn-sm btn-outline-danger removeRowBtn" data-id="${p.id}">&times;</button>`,
                        id: p.id
                    }).draw(false);
                }

                $('#productSearchInput').val('');
                $('#productSearchResults').hide().empty();
            });

            $(document).on('click', '.removeRowBtn', function () {
                billingTable.row($(this).closest('tr')).remove().draw(false);
            });

            $(document).on('click', function (e) {
                if (!$(e.target).closest('#productSearchInput, #productSearchResults').length) {
                    $('#productSearchResults').hide();
                }
            });

            function collectItems() {
                const items = [];
                $('#billingTable tbody tr').each(function () {
                    const productId = $(this).data('product-id') || $(this).attr('data-product-id');
                    const qty = parseFloat($(this).find('.addStockInput').val());
                    if (productId && qty > 0) items.push({ product_id: productId, added_stock: qty });
                });
                return items;
            }

            $('#exportBillingBtn').on('click', function () {
                const items = collectItems();
                if (!items.length) { showToast('Enter a stock quantity for at least one product before exporting.', 'error'); return; }

                $.post({ url: "{{ route('kitchen.kitchen_stock_billing_export') }}", data: { items, _token: csrfToken() } },
                    function (response) {
                        if (response.status) {
                            showToast('Exported successfully.', 'success');
                            window.location.href = response.download_url;
                        }
                    }
                ).fail(xhr => showToast(xhr.responseJSON?.message || 'Export failed.', 'error'));
            });

            $('#submitBillingBtn').on('click', function () {
                if (!$('#branchSelect').val()) { showToast('Please select a branch first.', 'error'); return; }
                const items = collectItems();
                if (!items.length) { showToast('Enter a stock quantity for at least one product before submitting.', 'error'); return; }
                $('#confirmSubmitCount').text(items.length);
                $('#confirmSubmitModal').modal('show');
            });

            $('#confirmSubmitBtn').on('click', function () {
                const items = collectItems();
                const branchId = $('#branchSelect').val();
                const btn = $(this);
                btn.prop('disabled', true).text('Submitting...');

                $.post({
                    url: "{{ route('kitchen.kitchen_stock_billing_submit') }}",
                    data: { branch_id: branchId, items, _token: csrfToken() }
                }, function (response) {
                    if (response.status) {
                        showToast(response.message, 'success');
                        $('#confirmSubmitModal').modal('hide');
                        billingTable.ajax.reload(null, false);
                    }
                }).fail(xhr => showToast(xhr.responseJSON?.message || 'Submit failed.', 'error'))
                    .always(() => btn.prop('disabled', false).text('Yes, Update Stock'));
            });

            $('#printBillingBtn').on('click', function () {
                const items = collectItems();
                if (!items.length) {
                    showToast('Enter a stock quantity for at least one product before printing.', 'error');
                    return;
                }

                const form = document.createElement('form');
                form.method = 'POST';
                form.action = "{{ route('kitchen.kitchen_stock_billing_print') }}";
                form.target = '_blank';

                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = csrfToken();
                form.appendChild(csrfInput);

                const itemsInput = document.createElement('input');
                itemsInput.type = 'hidden';
                itemsInput.name = 'items';
                itemsInput.value = JSON.stringify(items);
                form.appendChild(itemsInput);

                document.body.appendChild(form);
                form.submit();
                document.body.removeChild(form);
            });
        });
    </script>
@endsection