@extends('Kitchen.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_type') }}" class="btn btn-primary">Add Product Type</a>
            <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>
            <button id="printBtn" class="btn btn-label-secondary ms-2">Print</button>
            <button id="exportBtn" class="btn btn-label-secondary ms-2">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-2">
                <label class="form-label">Show</label>
                <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-2">
                <label class="form-label">Product ID</label>
                <input type="text" id="productIdSearch" class="form-control" placeholder="Product ID" autocomplete="off">
            </div>

            <div class="col-md-2">
                <label class="form-label">Product Name</label>
                <input type="text" id="productNameSearch" class="form-control" placeholder="Product Name"
                    autocomplete="off">
            </div>

            <div class="col-md-2">
                <label class="form-label">WM-ID</label>
                <input type="text" id="weightMachineIdSearch" class="form-control" placeholder="WM-ID" autocomplete="off">
            </div>

            <div class="col-md-2">
                <label class="form-label">From Date</label>
                <input type="date" id="fromDate" class="form-control">
            </div>

            <div class="col-md-2">
                <label class="form-label">To Date</label>
                <input type="date" id="toDate" class="form-control" value="{{ now()->format('Y-m-d') }}">
            </div>



            <div class="col-md-2">
                <label class="form-label">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-1">
                <label class="form-label">&nbsp;</label>
                <button id="resetBtn" class="btn btn-outline-secondary w-100">Reset</button>
            </div>

            <div class="col-md-3 ms-auto">
                <label class="form-label">&nbsp;</label>
                <input type="text" id="toDate_search" class="form-control" placeholder="Search">
            </div>
        </div>
        <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> Date</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="0.001" step="0.001">
                    </div>
                    <div class=" mb-3">
                        <label class="form-label fw-semibold">Stock Type <span class="text-danger">*</span></label>
                        <select name="stock_unit" id="stock_unit" class="form-select" required></select>
                    </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> --}}

    <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">

                    {{-- Hidden product stock type --}}
                    <input type="hidden" id="stock_product_type">

                    <h5 class="mb-3 text-center fw-bold">
                        Update Stock Quantity
                    </h5>

                    {{-- Stock Quantity --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Stock Quantity
                            <span class="text-danger">*</span>
                        </label>

                        <input type="number" name="stock" id="stock_quantity" class="form-control"
                            placeholder="Enter Quantity" required min="0.001" step="0.001">

                        <small class="text-muted" id="stockHelp">
                        </small>
                    </div>

                    {{-- Stock Unit --}}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Stock Unit
                            <span class="text-danger">*</span>
                        </label>

                        <select name="stock_unit" id="stock_unit" class="form-select" required>

                            <option value="">
                                Select Stock Unit
                            </option>

                        </select>
                    </div>

                    {{-- Packed Date --}}
                    <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>

                    {{-- Expiry Date --}}
                    <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>

                    {{-- Buttons --}}
                    <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('kitchen.kitchen_productData') }}",
                    type: "GET",
                    data: function (d) {
                        d.from_date = $('#fromDate').val();
                        d.to_date = $('#toDate').val();
                        d.product_id = $('#productIdSearch').val();
                        d.product_name = $('#productNameSearch').val();
                        d.weight_machine_id = $('#weightMachineIdSearch').val();
                        d.category = $('#categoryFilter').val();
                    }
                },
                columnDefs: [
                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }
                ],
                columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'category'
                },

                {
                    data: 'product_id',
                    name: 'product_id'
                },
                {
                    data: 'created_date',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'product_name',
                    name: 'product_name'
                },
                {
                    data: 'weight_machine_id',
                    name: '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;

            function runProductSearch() {
                clearTimeout(searchTimer);

                searchTimer = setTimeout(function () {
                    table.column(2).search(
                        $('#productIdSearch').val().trim()
                    );

                    table.column(3).search(
                        $('#productNameSearch').val().trim()
                    );

                    table.column(4).search(
                        $('#weightMachineIdSearch').val().trim()
                    );

                    table.draw();
                }, 300);
            }

            $('#productIdSearch, #productNameSearch, #weightMachineIdSearch')
                .on('input', runProductSearch);

            $('#resetSearchBtn').on('click', function () {
                window.location.reload();
            });

            $('#pageLength').on('change', function () {
                table.page.len($(this).val()).draw();
            });
            // Date filters — reload table on change
            $('#fromDate, #toDate').on('change', function () {
                table.ajax.reload();
            });
            $('#categoryFilter').on('change', function () {
                table.ajax.reload();
            });

            $('#resetBtn').on('click', function () {
                $('#fromDate, #toDate, #toDate_search').val('');
                $('#toDate').val("{{ now()->format('Y-m-d') }}");
                $('#productIdSearch, #productNameSearch, #weightMachineIdSearch').val('');
                $('#categoryFilter').val('');
                table.search('').draw();
                table.ajax.reload();
            });

            // Export
            $('#exportBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#fromDate').val(),
                    to_date: $('#toDate').val(),
                    product_id: $('#productIdSearch').val(),
                    product_name: $('#productNameSearch').val(),
                    weight_machine_id: $('#weightMachineIdSearch').val(),
                    category: $('#categoryFilter').val(),
                    search: $('#toDate_search').val()
                });
                window.location.href = "{{ route('kitchen.kitchen_productExport') }}?" + params.toString();
            });

            // Print
            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#fromDate').val(),
                    to_date: $('#toDate').val(),
                    product_id: $('#productIdSearch').val(),
                    product_name: $('#productNameSearch').val(),
                    weight_machine_id: $('#weightMachineIdSearch').val(),
                    category: $('#categoryFilter').val(),
                    search: $('#toDate_search').val()
                });
                window.open("{{ route('kitchen.kitchen_productPrint') }}?" + 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 = 2;

                    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: 40mm 40mm; grid-auto-rows: 20mm; width: 80mm; gap: 8mm; }
                                                                                        .label { width: 40mm; height: 20mm; box-sizing: border-box; padding: 0.5mm; border: 1px dotted #ddd; overflow: hidden; display: flex; flex-direction: column; }
                                                                                        .company-header { text-align: center; font-size: 6.5pt; font-weight: bold; text-transform: uppercase; margin-bottom: -1px; line-height: 0.9; }
                                                                                        .title-header { text-align: center; font-size: 6pt; font-weight: bold; text-transform: uppercase; margin-bottom: 0px; max-height: 12px; overflow: hidden; line-height: 0.9; }
                                                                                        .grid-body { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1mm; }
                                                                                        .left-side { width: 45%; text-align: center; display: flex; flex-direction: column; align-items: center; }
                                                                                        .left-side img { width: 9mm !important; height: 9mm !important; } /* Force QR fit */
                                                                                        .item-code { font-size: 5.5pt; font-weight: bold; margin-top: 0px; line-height: 1; }
                                                                                        .right-side { width: 53%; text-align: right; font-size: 5.5pt; font-weight: bold; line-height: 1.1; }
                                                                                        .price-section { margin-bottom: 0.5px; }
                                                                                        .price-label { font-size: 4.5pt; color: #555; display: block; }
                                                                                        .price-val { font-size: 8pt; font-weight: bold; }
                                                                                        .date-text { color: #333; white-space: nowrap; font-size: 5pt; }
                                                                                    </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', [40, 20]);

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

                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 + 10, 3, {
                        align: 'center'
                    });
                    pdf.setFontSize(6);
                    pdf.text(title.toUpperCase().slice(0, 22), xOffset + 10, 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 + 18, 9, {
                        align: 'right'
                    });
                    pdf.setFontSize(8);
                    pdf.text(`Rs. ${Math.round(Number(sellPrice))}`, xOffset + 18, 12, {
                        align: 'right'
                    });

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

                drawLabel(0);
                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');
            //         }
            //     });
            // });


            $('#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: id,
                        _token: csrf
                    },

                    success: function (res) {

                        btn.prop('disabled', false).html('Delete');

                        if (res.status) {

                            $('#delete').modal('hide');

                            showToast(res.message, 'success');

                            table.ajax.reload(null, false);

                        } else {

                            showToast(res.message, 'error');

                        }
                    },

                    error: function (xhr) {

                        btn.prop('disabled', false).html('Delete');

                        showToast("Something went wrong!", "bg-danger");
                    }
                });

            });
            $('#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, 'success');
                            table.ajax.reload(null, false);
                        } else {
                            showToast(res.message, 'error');
                        }
                    },
                    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>

    <script>
        const unitGroups = {
            kg: ['kg', 'g'],
            g: ['kg', 'g'],
            ltr: ['ltr', 'ml'],
            ml: ['ltr', 'ml'],
            pcs: ['pcs'],
        };

        $(document).on('click', '.addStockBtn', function () {
            console.clear();
            $('#addStockForm')[0].reset();

            let productId = $(this).data('id');
            let baseUnit = ($(this).data('unit') || 'pcs').toLowerCase();

            $('#stock_product_id').val(productId);

            const options = unitGroups[baseUnit] || [baseUnit];
            const $select = $('#stock_unit');
            $select.empty();

            options.forEach(function (u) {
                const selected = (u === baseUnit) ? 'selected' : '';
                $select.append(`<option value="${u}" ${selected}>${u}</option>`);
            });
        });
    </script>


    <script>
        $(document).on('click', '.addStockBtn', function () {

            const productId = $(this).data('id');
            const stockType = String($(this).data('stock-type')).toLowerCase();

            console.log('Add Stock clicked:', {
                product_id: productId,
                stock_type: stockType
            });

            $('#stock_product_id').val(productId);
            $('#stock_product_type').val(stockType);

            const unitSelect = $('#stock_unit');
            const quantityInput = $('#stock_quantity');

            // Clear old values
            unitSelect.empty();
            quantityInput.val('');

            unitSelect.append(
                '<option value="">Select Stock Unit</option>'
            );

            /*
            |--------------------------------------------------------------------------
            | KG / Weight Product
            |--------------------------------------------------------------------------
            */
            if (stockType === 'kg' || stockType === 'weight') {

                unitSelect.append(
                    '<option value="kg">KG</option>'
                );

                quantityInput
                    .attr('min', '0.001')
                    .attr('step', '0.001');

                $('#stockHelp').text(
                    'Enter quantity in KG. Example: 0.5, 1.5, 2.75'
                );
            }

            /*
            |--------------------------------------------------------------------------
            | PCS Product
            |--------------------------------------------------------------------------
            */
            else if (stockType === 'pcs') {

                unitSelect.append(
                    '<option value="pcs">PCS</option>'
                );

                quantityInput
                    .attr('min', '1')
                    .attr('step', '1');

                $('#stockHelp').text(
                    'Enter whole number of pieces. Example: 10, 50, 100'
                );
            }

            else {

                console.warn('Unknown stock type:', stockType);

                $('#stockHelp').text(
                    'Invalid stock type for this product.'
                );
            }

        });

    </script>
@endsection