@extends('Billing.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<style>
    .dt-search {
        display: none;
    }

    .is-invalid {
        border: 2px solid red !important;
    }
</style>
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                Products
            </h5>
        </div>
        <!-- <div class="col-auto">
                                                                                <a href="{{ route('kitchen.add_product') }}" class="btn btn-primary">Add Product</a>
                                                                                <a href="{{ route('kitchen.export.scale') }}"
                                                                           class="btn btn-success ms-2">
                                                                            <i class="ti tabler-download me-1"></i>
                                                                            Export to Scale
                                                                        </a>
                                                                        <a href="#" class="btn btn-info ms-2" data-bs-toggle="modal" data-bs-target="#importProductsModal">
                                                                            <i class="ti tabler-upload me-1"></i>
                                                                            Import Products
                                                                        </a>
                                                                            </div> -->

    </div>

    <div class="row mb-3 px-3">
        <div class="col-md-12 d-flex justify-content-end gap-2">
            <button type="button" id="printBtn" class="btn btn-label-secondary">
                <i class="ti tabler-printer me-1"></i>
                Print
            </button>

            <button type="button" id="exportBtn" class="btn btn-label-secondary">
                <i class="ti tabler-download me-1"></i>
                Export
            </button>
        </div>
    </div>
    <div class="card p-0 m-2">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-md-3">
                <label for="productIdSearch" class="form-label mb-1">Product ID</label>
                <input type="text" id="productIdSearch" class="form-control" placeholder="Search Product ID"
                    autocomplete="off">
            </div>

            <div class="col-md-3">
                <label for="productNameSearch" class="form-label mb-1">Product Name</label>
                <input type="text" id="productNameSearch" class="form-control" placeholder="Search Product Name"
                    autocomplete="off">
            </div>

            <div class="col-md-3">
                <label for="weightMachineIdSearch" class="form-label mb-1">Weight Machine ID</label>
                <input type="text" id="weightMachineIdSearch" class="form-control" placeholder="Search Weight Machine ID"
                    autocomplete="off">
            </div>
            <div class="col-md-3">
                <label for="categoryFilter" class="form-label mb-1">Category</label>
                <select id="categoryFilter" class="form-control">
                    <option value="">All Categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->category }}</option>
                    @endforeach
                </select>
            </div>



            <div class="col-md-auto d-flex align-items-end">
                <button type="button" id="resetSearchBtn" class="btn btn-secondary">
                    <i class="ti tabler-refresh me-1"></i>
                    Reset
                </button>
            </div>

        </div>
        <input type="hidden" id="branchFilter" value="">


        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table class="table" id="usersTable">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>Category</th>
                                    <th>Product Id</th>
                                    <th>Product&nbsp;name</th>
                                    <th>WM-Id</th>

                                    <th>Price</th>
                                    <th>stock</th>
                                    <th>Barcode</th>
                                    <!-- <th>Add&nbsp;Stock</th> -->
                                    <!-- <th>tax%</th> -->
                                    <!-- <th>variant</th> -->
                                    <!-- <th>image</th> -->
                                    <!-- <th>status</th> -->
                                    <!-- <th>Action</th> -->
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="delete_id">
    <div class="modal fade" id="statusModal" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <form id="statusForm">
                    @csrf
                    <input type="hidden" name="id" id="productId">
                    <input type="hidden" name="status" id="newStatus">
                    <h5 class="fw-bold mb-2">Change Status</h5>
                    <p class="text-muted" id="statusMessage">
                        Are you sure you want to change status?
                    </p>
                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-success">
                            Yes, Change
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- ─── DELETE CONFIRMATION MODAL ─────────────────────────────────────── --}}
    <div class="modal fade" id="delete" tabindex="-1">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Delete Product</h5>
                <p class="text-muted">
                    Are you sure you want to delete this product? This action cannot be undone.
                </p>
                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">
                        Delete
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- ─── MODAL 1: ADD STOCK ONLY ─────────────────────────────────────── --}}
    <div class="modal fade" id="addStockView" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content rounded-4 p-4">
                <form id="addStockForm">
                    @csrf
                    <input type="hidden" name="product_id" id="stock_product_id">
                    <h5 class="mb-3 text-center fw-bold">Update Stock Quantity</h5>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Stock Quantity <span class="text-danger">*</span></label>
                        <input type="number" name="stock" class="form-control" placeholder="Enter Quantity" required
                            min="1">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Packed Date <span class="text-muted">(optional)</span></label>
                        <input type="date" name="packed_date" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Expiry Date <span class="text-muted">(optional)</span></label>
                        <input type="date" name="expiry_date" class="form-control">
                    </div>
                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id="stockSubmitBtn" class="btn btn-primary">Save Stock</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- ─── MODAL: EXPIRY DATE MODAL ────────────────── --}}
    <div class="modal fade" id="expiryConfigModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content rounded-4 p-4">
                <form id="expiryConfigForm">
                    @csrf
                    <input type="hidden" name="product_id" id="expiry_row_id">
                    <h5 class="mb-3 text-center fw-bold">Set Product Expiry Period</h5>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Product Name</label>
                        <input type="text" id="expiry_product_name" class="form-control-plaintext fw-bold text-warning p-0"
                            readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Choose Expiry Duration</label>
                        <select class="form-select" name="expiry" id="expiry_dropdown" required>
                            <option value="">None (No Expiry)</option>
                            <option value="3">3 Months</option>
                            <option value="6">6 Months</option>
                            <option value="12">1 Year</option>
                        </select>
                    </div>
                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id="expirySubmitBtn" class="btn btn-success">Update Expiry</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- ─── BARCODE / QR CODE MODAL ───────────────────────────────────────────────── --}}
    <div class="modal fade" id="barcodeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">QR Code Label</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body d-flex justify-content-center">

                    {{-- Label Content Styled like image_c4a3f7.jpg --}}
                    <div id="barcode-content-to-print" class="p-3 border bg-white text-dark"
                        style="width: 320px; font-family: Arial, sans-serif; line-height: 1.2;">

                        <!-- Header Title (e.g., SRI RAJALAKSHMI) -->
                        <div class="text-center fw-bold text-uppercase mb-1" id="modalRole" style="font-size: 16px;">
                            SRI RAJALAKSHMI
                        </div>

                        <!-- Sub-Title (e.g., BOMBAY MIXTURE) -->
                        <div class="text-center fw-bold text-uppercase mb-2" id="modalTitle" style="font-size: 15px;">
                            BOMBAY MIXTURE
                        </div>

                        <div class="row align-items-center g-0">
                            <!-- Left Side: QR Code and Item Code Below It -->
                            <div class="col-5 text-center">
                                <div class="d-flex justify-content-center mb-1">
                                    <!-- Changed to canvas/svg for QR Code generation -->
                                    <div id="barcodeModalSvg"></div>
                                </div>
                                <div class="fw-bold" id="modalItemCode" style="font-size: 13px; letter-spacing: 0.5px;">
                                    AS127
                                </div>
                            </div>

                            <!-- Right Side: Price & Dates -->
                            <div class="col-7 ps-2 text-end" style="font-size: 14px;">
                                <div class="mb-1">
                                    <span class="d-block text-secondary small" style="font-size: 11px;">Price</span>
                                    <span class="fw-bold" style="font-size: 18px;">₹<span
                                            id="modalSellPrice">80.00</span></span>
                                </div>
                                <div class="fw-bold text-secondary text-nowrap" style="font-size: 13px;">
                                    Pkd: <span id="modalPkdDate" class="text-dark">22.02.26</span>
                                </div>
                                <div class="fw-bold text-secondary text-nowrap" style="font-size: 13px;">
                                    Exp: <span id="modalExpDate" class="text-dark">14.03.26</span>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="modal-footer">
                    <button id="downloadBarcodeBtnModal" class="btn btn-sm btn-primary">Download as PDF</button>
                    <button id="printBarcodeBtnModal" class="btn btn-sm btn-success">Print Label</button>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="importProductsModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="importProductsForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Import Products from Excel</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted small">
                            Columns expected: Category, Product Name, Code, Price, MRP, Tax %, Tax Mode, Unit, Unit Value,
                            Stock
                        </p>
                        <input type="file" name="import_file" class="form-control" accept=".xlsx,.xls,.csv" required>
                        <div class="text-danger small mt-2" id="importError"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="importSubmitBtn">Import</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- ─── SCRIPTS ─────────────────────────────────────────────────────── --}}
    <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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>
        const companyName = "PICK MY SNACKS";
        $(document).ready(function () {
            const csrf = $('meta[name="csrf-token"]').attr('content');
            // DataTable Configuration
            const table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                lengthChange: true,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                ajax: {
                    url: "{{ route('billing.billing_productData') }}",
                    type: "GET",
                    data: function (d) {
                        d.category = $('#categoryFilter').val();
                        d.branch_id = $('#branchFilter').val();
                        d.product_id = $('#productIdSearch').val();
                        d.product_name = $('#productNameSearch').val();
                        d.weight_machine_id = $('#weightMachineIdSearch').val();
                    }
                },
                columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'category'
                },

                {
                    data: 'product_id'
                },

                {
                    data: 'product_name'
                },
                {
                    data: 'weight_machine_id'
                },
                {
                    data: 'price',
                    render: function (data, type, row) {
                        return '₹ ' + parseFloat(data).toFixed(2);
                    }
                },
                {
                    data: 'stock'
                },
                {
                    data: 'barcode',
                    orderable: false,
                    searchable: false
                },
                    // {
                    //     data: 'add_stock',
                    //     orderable: false,
                    //     searchable: false
                    // },
                    // {
                    //     data: 'tax',
                    //     render: function(data) {
                    //         return Number(data) + '%';
                    //     }
                    // },
                    // {
                    //     data: 'variant_view'
                    // },
                    // {
                    //     data: 'image',
                    //     orderable: false,
                    //     searchable: false
                    // },
                    // {
                    //     data: 'status',
                    //     orderable: false,
                    //     searchable: false
                    // },
                    // {
                    //     data: 'action',
                    //     orderable: false,
                    //     searchable: false
                    // }
                ]
            });

            let searchTimer;
            $('#productIdSearch, #productNameSearch, #weightMachineIdSearch').on('keyup', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(() => table.ajax.reload(), 400);
            });

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

            $('#resetSearchBtn').on('click', function () {
                $('#productIdSearch, #productNameSearch, #weightMachineIdSearch').val('');
                $('#categoryFilter, #branchFilter').val('');
                table.ajax.reload();
            });
            $('#categoryFilter, #branchFilter').on('change', function () {
                table.ajax.reload();
            })

            // Export
            $('#exportBtn').on('click', function () {

                const productId = $('#productIdSearch').val();
                const productName = $('#productNameSearch').val();
                const weightMachineId = $('#weightMachineIdSearch').val();

                const params = new URLSearchParams({
                    product_id: productId,
                    product_name: productName,
                    weight_machine_id: weightMachineId,
                    category: $('#categoryFilter').val(),
                    branch_id: $('#branchFilter').val()
                });

                window.location.href =
                    "{{ route('product_export') }}?" + params.toString();
            });

            // Print
            $('#printBtn').on('click', function () {

                const productId = $('#productIdSearch').val();
                const productName = $('#productNameSearch').val();
                const weightMachineId = $('#weightMachineIdSearch').val();

                const params = new URLSearchParams({
                    product_id: productId,
                    product_name: productName,
                    weight_machine_id: weightMachineId,
                    category: $('#categoryFilter').val(),
                    branch_id: $('#branchFilter').val()
                });

                window.open(
                    "{{ route('product_print') }}?" + params.toString(),
                    '_blank'
                );
            });

            // ─── Render QR Code Content without Conflict (Updated for image_c4a3f7.jpg Style) ───
            $(document).on("click", ".viewBarcodeBtn", function () {
                let itemCode = $(this).data("id");
                let title = $(this).data("title");
                let sellPrice = $(this).data("sellprice");

                // Get expiry date from data attribute if exists, else default format
                let createdAt = $(this).data("created");
                let expiryMonths = parseInt($(this).data("expiry")) || 0;

                // PKD Date
                let pkd = new Date(createdAt);

                // Expiry Date
                let exp = new Date(createdAt);
                exp.setMonth(exp.getMonth() + expiryMonths);

                // Format DD.MM.YY
                function formatDate(date) {
                    let day = String(date.getDate()).padStart(2, '0');
                    let month = String(date.getMonth() + 1).padStart(2, '0');
                    let year = String(date.getFullYear()).slice(-2);

                    return `${day}.${month}.${year}`;
                }

                let packedDate = formatDate(pkd);
                let expiryDate = formatDate(exp);

                $("#modalItemCode").text(itemCode);
                $("#modalTitle").text(title);
                $("#modalSellPrice").text(sellPrice);
                $("#modalRole").text(companyName);


                $("#modalPkdDate").text(packedDate);
                $("#modalExpDate").text(expiryDate);

                // Clear previous QR code
                $("#barcodeModalSvg").html("");

                // Generate QR Code dynamically inside the container
                new QRCode(document.getElementById("barcodeModalSvg"), {
                    text: itemCode.toString(),
                    width: 90,
                    height: 90,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
            });
            $('#importProductsForm').on('submit', function (e) {
                e.preventDefault();
                let formData = new FormData(this);
                let $btn = $('#importSubmitBtn');
                $btn.prop('disabled', true).text('Importing...');
                $('#importError').text('');

                $.ajax({
                    url: "{{ route('kitchen.import_products') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        $btn.prop('disabled', false).text('Import');
                        if (res.status) {
                            showToast(res.message, 'bg-success');
                            $('#importProductsModal').modal('hide');
                            table.ajax.reload(null, false);
                        } else {
                            $('#importError').text(res.message);
                        }
                    },
                    error: function (xhr) {
                        $btn.prop('disabled', false).text('Import');
                        $('#importError').text(xhr.responseJSON?.message || 'Import failed');
                    }
                });
            });
            // ─── Print Function Updated For Grid Layout ───────────────────
            const printBtn = document.getElementById('printBarcodeBtnModal');
            if (printBtn) {
                printBtn.addEventListener('click', function () {
                    const itemCode = document.getElementById('modalItemCode').innerText;
                    const title = document.getElementById('modalTitle').innerText;
                    const sellPrice = document.getElementById('modalSellPrice').innerText;
                    const qrCodeHtml = document.getElementById('barcodeModalSvg').innerHTML; // Captures generated QR
                    const company = document.getElementById('modalRole').innerText;
                    const packedDate = document.getElementById('modalPkdDate').innerText;
                    const expiryDate = document.getElementById('modalExpDate').innerText;

                    const numberOfLabelsToPrint = 3;

                    const labelHTML = `
                                                                        <!doctype html>
                                                                        <html>
                                                                        <head>
                                                                        <meta charset="utf-8">
                                                                        <title>Print Label</title>
                                                                        <style>
                                                                            @page { size: auto; margin: 0; }
                                                                            body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
                                                                            .label-container { display: grid; grid-template-columns: 35mm 35mm 35mm; grid-auto-rows: 25mm; width: 105mm; }
                                                                            .label { width: 35mm; height: 25mm; box-sizing: border-box; padding: 1.5mm; border: 1px dotted #ddd; overflow: hidden; display: flex; flex-direction: column; }
                                                                            .company-header { text-align: center; font-size: 7.5pt; font-weight: bold; text-transform: uppercase; margin-bottom: 1px; }
                                                                            .title-header { text-align: center; font-size: 7pt; font-weight: bold; text-transform: uppercase; margin-bottom: 3px; max-height: 16px; overflow: hidden; }
                                                                            .grid-body { display: flex; width: 100%; align-items: center; justify-content: space-between; }
                                                                            .left-side { width: 45%; text-align: center; display: flex; flex-direction: column; align-items: center; }
                                                                            .left-side img { width: 11mm !important; height: 11mm !important; } /* Force QR fit */
                                                                            .item-code { font-size: 6.5pt; font-weight: bold; margin-top: 1px; }
                                                                            .right-side { width: 53%; text-align: right; font-size: 6.5pt; font-weight: bold; line-height: 1.3; }
                                                                            .price-section { margin-bottom: 2px; }
                                                                            .price-label { font-size: 5.5pt; color: #555; display: block; }
                                                                            .price-val { font-size: 9.5pt; font-weight: bold; }
                                                                            .date-text { color: #333; white-space: nowrap; }
                                                                        </style>
                                                                        </head>
                                                                        <body>
                                                                            <div class="label-container">
                                                                                ${[...Array(numberOfLabelsToPrint)].map(() => `
                                                                                    <div class="label">
                                                                                        <div class="company-header">${company.slice(0, 20)}</div>
                                                                                        <div class="title-header">${title.slice(0, 25)}</div>
                                                                                        <div class="grid-body">
                                                                                            <div class="left-side">
                                                                                                ${qrCodeHtml}
                                                                                                <div class="item-code">${itemCode}</div>
                                                                                            </div>
                                                                                            <div class="right-side">
                                                                                                <div class="price-section">
                                                                                                    <span class="price-label">Price</span>
                                                                                                    <span class="price-val">₹${Math.round(Number(sellPrice))}</span>
                                                                                                </div>
                                                                                                <div class="date-text">Pkd: ${packedDate}</div>
                                                                                                <div class="date-text">Exp: ${expiryDate}</div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                `).join('')}
                                                                            </div>
                                                                        </body>
                                                                        </html>
                                                                        `;
                    const printWindow = window.open('', '_blank', 'width=900,height=1200');
                    printWindow.document.write(labelHTML);
                    printWindow.document.close();
                    printWindow.onload = function () {
                        printWindow.print();
                        setTimeout(() => printWindow.close(), 500);
                    };
                });
            }

            // ─── Download PDF Function Updated For QR Code Layout ────────────────────
            document.getElementById('downloadBarcodeBtnModal').addEventListener('click', function () {
                const { jsPDF } = window.jspdf;
                const pdf = new jsPDF('l', 'mm', [110, 25]);

                const company = document.getElementById('modalRole').innerText;
                const itemCode = document.getElementById('modalItemCode').innerText;
                const title = document.getElementById('modalTitle').innerText;
                const sellPrice = document.getElementById('modalSellPrice').innerText;
                const packedDate = document.getElementById('modalPkdDate').innerText;
                const expiryDate = document.getElementById('modalExpDate').innerText;

                // Find internal generated QR canvas image source
                const qrCanvas = document.querySelector('#barcodeModalSvg canvas');
                if (!qrCanvas) {
                    showToast("QR code image source missing!", "bg-danger");
                    return;
                }
                const imgData = qrCanvas.toDataURL("image/png");
                const labelW = 110 / 3;

                function drawLabel(xOffset) {
                    pdf.setFont("Helvetica", "bold");

                    // Company & Title centered over whole label space 
                    pdf.setFontSize(6.5);
                    pdf.text(company.toUpperCase().slice(0, 20), xOffset + (labelW / 2), 3, { align: 'center' });
                    pdf.setFontSize(6);
                    pdf.text(title.toUpperCase().slice(0, 22), xOffset + (labelW / 2), 6, { align: 'center' });

                    // Left Layout Side: QR Code & Code details
                    pdf.addImage(imgData, 'PNG', xOffset + 2, 7, 11, 11);
                    pdf.setFontSize(5.5);
                    pdf.text(itemCode, xOffset + 7.5, 20, { align: 'center' });

                    // Right Layout Side: Price and Packaging Dates
                    pdf.setFontSize(5);
                    pdf.text("Price", xOffset + labelW - 2, 9, { align: 'right' });
                    pdf.setFontSize(8);
                    pdf.text(`Rs. ${Math.round(Number(sellPrice))}`, xOffset + labelW - 2, 12, { align: 'right' });

                    pdf.setFontSize(5.5);
                    pdf.text(`Pkd: ${packedDate}`, xOffset + labelW - 2, 16, { align: 'right' });
                    pdf.text(`Exp: ${expiryDate}`, xOffset + labelW - 2, 19, { align: 'right' });
                }

                drawLabel(0);
                drawLabel(labelW);
                drawLabel(labelW * 2);
                pdf.save(`QR_Label_${itemCode}.pdf`);
            });

            // ─── Status Handler ───────────────────────────────────────────
            $(document).on('click', '.statusBtn', function () {
                const id = $(this).data('id');
                const newStatus = $(this).data('status') == 1 ? 0 : 1;
                $('#productId').val(id);
                $('#newStatus').val(newStatus);
                $('#statusMessage').text(
                    newStatus == 1 ?
                        'Are you sure you want to activate this product?' :
                        'Are you sure you want to deactivate this product?'
                );
                $('#statusModal').modal('show');
            });
            $('#statusForm').on('submit', function (e) {
                e.preventDefault();
                const $btn = $(this).find('button[type="submit"]');
                const originalText = $btn.html();
                $btn.prop('disabled', true).html('Processing...');
                $.ajax({
                    url: "{{ route('kitchen.kitchen_changeStatus') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    success: function (res) {
                        if (res.status) {
                            $('#statusModal').modal('hide');
                            table.ajax.reload(null, false);
                        }
                        $btn.prop('disabled', false).html(originalText);
                    },
                    error: function () {
                        $btn.prop('disabled', false).html(originalText);
                    }
                });
            });
            // ─── Delete Actions ───────────────────────────────────────────
            $(document).on('click', '.delete-btn', function () {
                $('#delete_id').val($(this).data('id'));
            });
            $('#confirmDelete').on('click', function () {
                const btn = $(this);
                const id = $('#delete_id').val();
                if (!id) return;
                btn.prop('disabled', true).html('Deleting...');
                $.ajax({
                    url: "{{ route('kitchen.kitchen_deleteProduct') }}",
                    type: "POST",
                    data: {
                        id,
                        _token: csrf
                    },
                    success: function (res) {
                        if (res.status) {
                            $('#delete').modal('hide');
                            table.ajax.reload(null, false);
                        }
                        btn.prop('disabled', false).html('Delete');
                    },
                    error: function () {
                        btn.prop('disabled', false).html('Delete');
                    }
                });
            });
            $('#delete, #statusModal').on('hidden.bs.modal', function () {
                $('body').removeClass('modal-open').css('padding-right', '');
                $('.modal-backdrop').remove();
            });
            // ================= STOCK MODAL =================
            $(document).on('click', '.addStockBtn', function () {
                console.clear();
                $('#addStockForm')[0].reset();
                let productId = $(this).data('id');
                $('#stock_product_id').val(productId);
            });
            $('#addStockForm').on('submit', function (e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('kitchen.kitchen_addStock') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    beforeSend: function () {
                        $('#stockSubmitBtn').prop('disabled', true).text('Saving...');
                    },
                    success: function (res) {
                        $('#stockSubmitBtn').prop('disabled', false).text('Save Stock');
                        if (res.status) {
                            let modal = bootstrap.Modal.getInstance(document.getElementById('addStockView'));
                            if (modal) { modal.hide(); }
                            showToast(res.message, 'bg-success');
                            table.ajax.reload(null, false);
                        } else {
                            showToast(res.message, 'bg-danger');
                        }
                    },
                    error: function (xhr) {
                        $('#stockSubmitBtn').prop('disabled', false).text('Save Stock');
                        showToast("Something went wrong!", "bg-danger");
                    }
                });
            });

            // ================= EXPIRY MODAL =================
            $(document).on('click', '.expiry-btn', function () {
                console.clear();
                let id = $(this).data('id');
                let name = $(this).data('name');
                let expiry = $(this).data('expiry_val');
                $('#expiry_row_id').val(id);
                $('#expiry_product_name').val(name);
                $('#expiry_dropdown').val(expiry);
            });
            $('#expiryConfigForm').on('submit', function (e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('kitchen.kitchen_updateExpiry') }}",
                    type: "POST",
                    data: $(this).serialize(),
                    beforeSend: function () {
                        $('#expirySubmitBtn').prop('disabled', true).text('Updating...');
                    },
                    success: function (res) {
                        $('#expirySubmitBtn').prop('disabled', false).text('Update Expiry');
                        if (res.status) {
                            let modal = bootstrap.Modal.getInstance(document.getElementById('expiryConfigModal'));
                            if (modal) { modal.hide(); }
                            showToast(res.message, 'bg-success');
                            table.ajax.reload(null, false);
                        } else {
                            showToast(res.message, 'bg-danger');
                        }
                    },
                    error: function (xhr) {
                        $('#expirySubmitBtn').prop('disabled', false).text('Update Expiry');
                        showToast("Something went wrong!", "bg-danger");
                    }
                });
            });

            // ================= REMOVE BLACK BACKDROP =================
            $('#addStockView,#expiryConfigModal,#statusModal,#delete,#barcodeModal').on('hidden.bs.modal', function () {
                $('body').removeClass('modal-open').css({ overflow: '', paddingRight: '' });
                $('.modal-backdrop').remove();
            });
        });
    </script>
    <script>
        function showToast(message, bg = "bg-success") {

            let toast = $(`
                                                                                <div class="toast align-items-center text-white ${bg} border-0 position-fixed"
                                                                                     style="top:20px;right:20px;z-index:99999;">
                                                                                    <div class="d-flex">
                                                                                        <div class="toast-body">${message}</div>
                                                                                        <button type="button"
                                                                                                class="btn-close btn-close-white me-2 m-auto"
                                                                                                data-bs-dismiss="toast"></button>
                                                                                    </div>
                                                                                </div>
                                                                            `);

            $("body").append(toast);

            let bsToast = new bootstrap.Toast(toast[0], {
                delay: 3000
            });

            bsToast.show();

            toast.on("hidden.bs.toast", function () {
                toast.remove();
            });

        }
    </script>
@endsection