{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/store_sidebar.html' %}
{% include 'includes/navbar.html' %}
{% include 'includes/datatable_css.html' %}
<style>
    /* Fixed Width Offcanvas for 2-column comfort */
    @media (min-width: 992px) {
        #offcanvasApproval {
            width: 400px !important;
        }
    }

    #offcanvasApproval {
        background-color: #f7f7f9;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    }

    /* Card Grid - Left Aligned */
    .approval-grid-row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -10px;
        margin-left: -10px;
        justify-content: flex-start !important;
        /* Always align left for predictability */
    }

    .approval-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid #e6e6e8 !important;
        background-color: #ffffff;
    }

    .approval-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    }

    /* Hierarchy & Spacing */
    .detail-item {
        padding: 5px 0;
    }

    .detail-label {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.8px;
        color: #8897ad;
    }

    .detail-value {
        font-size: 0.95rem;
        font-weight: 600;
    }

    .header-action-btn {
        height: 32px;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        line-height: 1;
    }
</style>
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row g-2 align-items-center mb-4">
        <div class="col-12 col-md-auto">
            <div class="d-flex align-items-center gap-2">
                <h4 class="mb-0 me-1">Transfer Inward</h4>
                <!-- <a href="/transfer-inward/add"
                    class="btn btn-success btn-sm d-inline-flex align-items-center header-action-btn">Add</a> -->
            </div>
        </div>

        <div class="col-12 col-md-auto">
            <button
                class="btn btn-outline-primary btn-sm d-inline-flex align-items-center header-action-btn waves-effect"
                type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasApproval"
                aria-controls="offcanvasApproval" onclick="loadApprovalCards()">
                <i class="ti tabler-bell-ringing me-2"></i>Outward Requests <span
                    class="badge bg-danger rounded-pill ms-1" id="approval_count" style="display:none">0</span>
            </button>
        </div>

        <div class="col-12 col-md-auto ms-md-auto">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="/store/dashboard" class="d-flex align-items-center text-decoration-none">
                            <i class="ti tabler-home me-1"></i>
                        </a>
                    </li>
                    <li class="breadcrumb-item active">Material Inward</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- View Modal for Approvals -->
    <div class="modal fade" id="approval_view_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Outward Request Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm" id="approval_details_table">
                            <thead>
                                <tr class="table-light">
                                    <th>Subcategory</th>
                                    <th>Brand</th>
                                    <th>Model</th>
                                    <th>Variant</th>
                                    <th>Color</th>
                                    <th>IMEI</th>
                                    <th class="text-end">Rate</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header border-bottom">
            <div class="row mt-2">

                <div class="col-2">
                    <label class="form-label">Date Filter</label>
                    <input type="checkbox" id="is_date" checked>
                    <input type="text" id="date_filter" class="form-control" style="cursor: pointer;" />
                    <input type="hidden" id="from_date" name="from_date">
                    <input type="hidden" id="to_date" name="to_date">
                </div>
                <div class="col-2 mb-5">
                    <label for="name" class="form-label">Supply Branch</label>
                    <select class="select2 form-control" id="filter_supplier_id" name="supplier_id">
                        <option value="">Select</option>
                        {% for k in branch %}
                        <option value="{{k.id}}">{{k.name}}</option>
                        {% endfor %}
                    </select>
                </div>



                <div class="col-2 mt-6">
                    <button type="button" class="btn btn-primary" onclick="refresh_data()"><i
                            class="fas fa-search"></i>&nbsp; Search</button>
                </div>
            </div>
            <!-- </div> -->
        </div>
        <div class="card-body">
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-basic table table-bordered" id="datatable">
                    <thead>
                        {% csrf_token %}
                        <tr>
                            <th>Id</th>
                            <th>Action</th>
                            <th>Outward No</th>
                            <th>Outward Date</th>
                            <th>Transfer Inward NO</th>
                            <th>Transfer Inward Date</th>
                            <th>Supply Branch </th>
                            <th>Total Quantity</th>
                            <th>Total Amount</th>
                            <!-- <th>Cash</th> -->
                            <!-- <th>bank</th> -->
                            <!-- <th>Balance</th> -->
                            <th>Remarks</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <th colspan="7" class="text-end fw-bold">Total :</th>
                        <th id="footer_qty" class="text-end fw-bold"></th>
                        <th id="footer_amount" class="text-end fw-bold"></th>
                        <!-- <th id="footer_cash" class="text-end fw-bold"></th> -->
                        <!-- <th id="footer_bank" class="text-end fw-bold"></th> -->
                        <!-- <th id="footer_balance" class="text-end fw-bold"></th> -->
                        <th id="footer_remarks" class="text-end fw-bold"></th>
                        <th id="footer_status" class="text-end fw-bold"></th>


                    </tfoot>
                </table>
            </div>
        </div>





    </div>
</div>

<div class="modal fade" id="open_modal" tabindex="-1" aria-labelledby="openModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <form id="openForm" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="openMfodalLabel">Transfer Inward Items</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="datatables-ajax table table-bordered" id="open_table">
                            {% csrf_token %}
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Subcategory</th>
                                    <th>Brand</th>
                                    <th>Model</th>
                                    <th>Variant</th>
                                    <th>Color</th>
                                    <th>IMEI</th>
                                    <th class="text-end">Rate</th>
                                    <th class="text-end">Qty</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="tm_po_id" name="tm_po_id">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasApproval" aria-labelledby="offcanvasApprovalLabel">
    <div class="offcanvas-header">
        <h5 id="offcanvasApprovalLabel" class="offcanvas-title">Outward Requests</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body p-4" id="approval_card_container_parent">
        <div class="row g-4 approval-grid-row" id="approval_card_container">
            <!-- Cards will be injected here -->
            <div class="text-center text-muted mt-5">
                <div class="spinner-border text-primary mb-2" role="status"></div>
                <br>Fetching requests...
            </div>
        </div>
    </div>
</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
<script>
    var table;

    $(document).ready(function () {
        loadApprovalCards();

        const key = "service_nav_item_type";
        const savedType = localStorage.getItem(key);

        if (savedType) {
            $("#filter_inv_type").val(savedType).trigger("change");
            console.log("Restored inward type:", savedType);
            localStorage.removeItem(key);
        }

        refresh_data();
        setupDateRangeWithLocalStorage("profit_loss_nav_date", "{{ decode_date|default:'' }}", true);


        if (sessionStorage.getItem('addSuccessMessage')) {
            showToast('success', "Purchase Inward Saved successfully")
            sessionStorage.removeItem('addSuccessMessage');
        }

        if (sessionStorage.getItem('editSuccessMessage')) {
            showToast('success', "Purchase Order Updated successfully")
            sessionStorage.removeItem('editSuccessMessage');
        }

        if (sessionStorage.getItem('refreshMainTable') === 'true') {
            refresh_data();
            sessionStorage.removeItem('refreshMainTable');
        }
    });

    // --- Inward Approval Logic (Offcanvas) ---

    function loadApprovalCards() {
        $.ajax({
            url: '/ajax_pending_inward_approvals/',
            type: 'GET',
            success: function (res) {
                let html = '';
                let data = res.data || [];
                let pendingCount = 0;

                if (data.length === 0) {
                    html = '<div class="text-center text-muted mt-5"><i class="ti tabler-clipboard-check fs-1 mb-2"></i><br>No pending approvals.</div>';
                    $('#approval_count').hide();
                } else {
                    data.forEach(item => {
                        pendingCount++;

                        html += `
                            <div class="col-12 mb-2">
                                <div class="card border-0 shadow-sm rounded-3 approval-card" id="card_${item.id}">
                                    <!-- Header -->
                                    <div class="card-header border-bottom p-4 d-flex justify-content-between align-items-center bg-light bg-opacity-50">
                                        <div>
                                            <h6 class="mb-0 text-primary fw-bolder text-uppercase" style="letter-spacing: 0.5px;">${item.branch_name}</h6>
                                            <small class="text-muted fw-bold text-uppercase" style="font-size: 0.65rem; opacity: 0.8;">Material Outward Request</small>
                                        </div>
                                        <div class="text-end text-muted">
                                            <i class="ti tabler-calendar fs-5 me-1 align-middle"></i><small class="fw-bold">${item.outward_date}</small>
                                        </div>
                                    </div>
                                    
                                    <!-- Body -->
                                    <div class="card-body p-4 flex-grow-1">
                                        <div class="row g-3 mb-4 pb-3 border-bottom border-light">
                                            <div class="col-6">
                                                <small class="text-muted d-block text-uppercase detail-label mb-1">Outward No</small>
                                                <span class="text-dark detail-value">#${item.outward_no}</span>
                                            </div>
                                            <div class="col-6 text-end">
                                                <small class="text-muted d-block text-uppercase detail-label mb-1">Status</small>
                                                <span class="badge ${item.status && item.status.toLowerCase() === 'rejected' ? 'bg-label-danger' : 'bg-label-warning'} py-1 px-3 fw-bold rounded-pill" id="status_badge_${item.id}" style="font-size: 0.7rem;">${item.status}</span>
                                            </div>
                                        </div>
                                        <div class="row g-3">
                                            <div class="col-6">
                                                <small class="text-muted d-block text-uppercase detail-label mb-1">Total Quantity</small>
                                                <span class="fw-bolder fs-5 text-dark">${item.total_qty}</span>
                                            </div>
                                            <div class="col-6 text-end">
                                                <small class="text-muted d-block text-uppercase detail-label mb-1">Total Amount</small>
                                                <span class="fw-bolder fs-5 text-primary">₹${item.total_amount}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Footer -->
                                    <div class="card-footer border-top p-3 bg-white rounded-bottom-3 d-flex justify-content-end gap-3" id="actions_${item.id}">
                                        <button class="btn btn-sm btn-label-secondary px-4 fw-bold" onclick="viewOutwardDetails(${item.id}, '${item.branch_name}', '${item.outward_no}')">
                                            <i class="ti tabler-eye me-1"></i> View
                                        </button>
                                        ${item.status && item.status.toLowerCase() !== 'rejected' ? `
                                        <button class="btn btn-sm btn-success px-4 fw-bold" onclick="approveOutward(${item.id})">
                                            <i class="ti tabler-check me-1"></i> Approve
                                        </button>
                                        <button class="btn btn-sm btn-danger px-4 fw-bold" onclick="rejectOutward(${item.id})">
                                            <i class="ti tabler-x me-1"></i> Reject
                                        </button>
                                        ` : ''}
                                    </div>
                                </div>
                            </div>
                        `;
                    });

                    $('#approval_count').text(pendingCount).toggle(pendingCount > 0);
                }
                $('#approval_card_container').html(html);
            },
            error: function () {
                $('#approval_card_container').html('<div class="text-center text-danger mt-5">Failed to load data.</div>');
            }
        });
    }

    function viewOutwardDetails(poId, branchName, outwardNo) {
        if (branchName && outwardNo) {
            $('#approval_view_modal .modal-title').html(`Outward Request Details <span class="text-primary mx-2">|</span> ${branchName} <span class="badge bg-label-info ms-2">${outwardNo}</span>`);
        } else {
            $('#approval_view_modal .modal-title').text('Outward Request Details');
        }
        $.ajax({
            url: '/get_outward_transfer_items/',
            type: 'POST',
            data: {
                po_id: poId,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function (res) {
                let rows = '';
                if (res.data && res.data.length > 0) {
                    res.data.forEach(item => {
                        rows += `
                            <tr>
                                <td>${item.subcategory}</td>
                                <td>${item.brand}</td>
                                <td>${item.model}</td>
                                <td>${item.variant}</td>
                                <td>${item.color}</td>
                                <td><span class="fw-bold">${item.imei}</span></td>
                                <td class="text-end">${parseFloat(item.rate).toFixed(2)}</td>
                                <td class="text-end">${item.quantity}</td>
                                <td class="text-end">${parseFloat(item.amount).toFixed(2)}</td>
                            </tr>
                        `;
                    });
                } else {
                    rows = '<tr><td colspan="9" class="text-center">No items found details.</td></tr>';
                }
                $('#approval_details_table tbody').html(rows);
                $('#approval_view_modal').modal('show');
            }
        });
    }

    function approveOutward(id) {
        Swal.fire({
            title: 'Approve Inward?',
            text: "This will automatically create inward entries for all items.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Approve',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/approve_outward_transfer/',
                    type: 'POST',
                    data: {
                        id: id,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function (res) {
                        if (res.status === 'success') {
                            showToast('success', res.message);

                            // Remove card from UI
                            $(`#card_${id}`).fadeOut(300, function () {
                                $(this).remove();
                                // Update count badge
                                let currentCount = parseInt($('#approval_count').text()) || 0;
                                if (currentCount > 1) {
                                    $('#approval_count').text(currentCount - 1);
                                } else {
                                    $('#approval_count').hide();
                                    $('#approval_card_container').html('<div class="text-center text-muted mt-5"><i class="ti tabler-clipboard-check fs-1 mb-2"></i><br>No pending approvals.</div>');
                                }
                            });

                            refresh_data(); // Refresh main table
                        } else {
                            showToast('error', res.message);
                        }
                    },
                    error: function () {
                        showToast('error', 'Failed to approve request.');
                    }
                });
            }
        });
    }

    function rejectOutward(id) {
        const approvalCanvasEl = document.getElementById('offcanvasApproval');
        if (approvalCanvasEl) {
            const approvalCanvas = bootstrap.Offcanvas.getOrCreateInstance(approvalCanvasEl);
            approvalCanvas.hide();
        }

        Swal.fire({
            title: 'Reject Request?',
            text: "Please provide a reason for rejection.",
            input: 'textarea',
            inputPlaceholder: 'Reason for rejection...',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Yes, Reject',
            preConfirm: (remarks) => {
                if (!remarks) {
                    Swal.showValidationMessage('Please enter a reason for rejection');
                }
                return remarks;
            }
        }).then((result) => {
            if (approvalCanvasEl && !result.isConfirmed) {
                const approvalCanvas = bootstrap.Offcanvas.getOrCreateInstance(approvalCanvasEl);
                approvalCanvas.show();
            }
            if (result.isConfirmed) {
                $.ajax({
                    url: '/reject_outward_transfer/',
                    type: 'POST',
                    data: {
                        id: id,
                        remarks: result.value,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function (res) {
                        if (res.status === 'success') {
                            showToast('success', res.message);

                            // Remove card from UI and update count
                            $(`#card_${id}`).fadeOut(300, function () {
                                $(this).remove();
                                // Update count badge
                                let currentCount = parseInt($('#approval_count').text()) || 0;
                                if (currentCount > 1) {
                                    $('#approval_count').text(currentCount - 1);
                                } else {
                                    $('#approval_count').hide();
                                    $('#approval_card_container').html('<div class="text-center text-muted mt-5"><i class="ti tabler-clipboard-check fs-1 mb-2"></i><br>No pending approvals.</div>');
                                }
                            });
                        } else {
                            showToast('error', res.message);
                        }
                    },
                    error: function () {
                        showToast('error', 'Failed to reject request.');
                    }
                });
            }
        });
    }

    // End of Approval Logic

    function initializeDataTable() {
        table = $('#datatable').DataTable({
            "processing": true,
            "pageLength": 50,
            "destroy": true,
            "order": [],
            "searching": true,
            "dom": getDataTableDom(),
            "buttons": getExportButtons(),
            "columns": [
                { "data": "id", "title": " ID #" },
                { "data": "action", "title": "Action" },
                { "data": "outward_no", "title": "Outward NO" },
                { "data": "outward_date", "title": "Outward Date" },
                { "data": "po_no", "title": "Transfer Inward NO" },
                { "data": "po_date", "title": "Transfer Inward Date" },
                { "data": "supply_branch", "title": "Supply Branch Name" },
                { "data": "quantity", "title": "Total Quantity", "className": "text-end" },
                { "data": "amount", "title": "Total Amount", "className": "text-end" },
                // { "data": "cash", "title": "Cash", "className": "text-end" },
                // { "data": "bank", "title": "Bank", "className": "text-end" },
                // { "data": "balance", "title": "Balance", "className": "text-end" },
                { "data": "remarks", "title": "Remarks" },
                { "data": "status", "title": "Status" }
            ],
            "ajax": {
                "url": '/ajax_material_inward_view/',
                "type": "POST",

                "data": function (data) {
                    data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
                    const supplier = $('#filter_supplier_id').val();
                    const supply_branch = $('#filter_branch_id').val();
                    const keyword = $('#keyword_search').val();
                    const InvType = $('#filter_inv_type').val();
                    const isDateChecked = $('#is_date').is(":checked");
                    const fromDate = $('#from_date').val();
                    const toDate = $('#to_date').val();

                    if (supplier) data.supplier = supplier;
                    if (supply_branch) data.branch = supply_branch;
                    if (keyword) data.keyword_search = keyword;
                    if (InvType) data.inv_type = InvType;

                    if (isDateChecked && fromDate && toDate) {
                        data.from_date = fromDate;
                        data.to_date = toDate;
                    }
                },
                dataSrc: function (response) {
                    if (response.message === 'permission') {
                        showSweetAlert('warning', response.error_message || 'You do not have permission to view the user role.');
                        table.clear().draw();
                        return [];
                    }

                    return response.data || [];
                }
            },
            footerCallback: function (row, data, start, end, display) {
                const api = this.api();

                const intVal = function (i) {
                    return typeof i === 'string'
                        ? parseFloat(i.replace(/[^0-9.-]+/g, '')) || 0
                        : typeof i === 'number'
                            ? i
                            : 0;
                };

                const Quantity = data.reduce((sum, row) => sum + intVal(row.quantity), 0);
                const Amount = data.reduce((sum, row) => sum + intVal(row.amount), 0);
                const Cash = data.reduce((sum, row) => sum + intVal(row.cash), 0);
                const Bank = data.reduce((sum, row) => sum + intVal(row.bank), 0);
                const Balance = data.reduce((sum, row) => sum + intVal(row.balance), 0);


                // Upate footer cells
                $('#footer_qty').html(Quantity.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_amount').html(Amount.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                // $('#footer_cash').html(Cash.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                // $('#footer_bank').html(Bank.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                // $('#footer_balance').html(Balance.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_remarks').html('-');
                $('#footer_status').html('-');
            },
        });
    }


    function refresh_data() {
        if (!table) {
            initializeDataTable();
        } else {
            table.ajax.reload();
        }
    }


    function edit_data(id) {
        var encodedId = btoa(id);
        window.location.href = '/transfer-inward/edit/?id=' + encodedId;
    }


    function delete_data(id) {
        deleteEntity('/delete_tm_material_inward/', id, '{{ csrf_token }}', 'Transfer Inward');
    }


    function view_data(id, branchName, outwardNo, outwardDate) {
        const safeBranch = branchName || '-';
        const safeOutwardNo = outwardNo || '-';
        const safeOutwardDate = outwardDate || '-';
        $('#openModalLabel').text(`Transfer Inward Items | ${safeBranch} | ${safeOutwardNo} | ${safeOutwardDate}`);
        $('#tm_po_id').val(id);
        loadOpenTable();
        $('#open_modal').modal('show');
    }

    function loadOpenTable() {
        var table = $('#open_table').DataTable({
            "processing": true,
            "pageLength": 50,
            "destroy": true,
            "order": [],
            "dom": 't',
            "columns": [
                { "data": "id", "title": "Id" },
                { "data": "subcategory_name", "title": "Subcategory" },
                { "data": "brand_name", "title": "Brand" },
                { "data": "model_name", "title": "Model" },
                { "data": "variant_name", "title": "Variant" },
                { "data": "color_name", "title": "Color" },
                { "data": "imei_no", "title": "IMEI" },
                { "data": "rate", "title": "Rate", "className": "text-end" },
                { "data": "qty", "title": "Qty", "className": "text-end" },
                { "data": "amount", "title": "Amount", "className": "text-end" }
            ],
            "ajax": {
                "url": '/ajax_tx_material_inward_view/',
                "type": "POST",
                "data": function (data) {
                    data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
                    data.po_id = $('#tm_po_id').val();

                },
                dataSrc: function (response) {
                    if (response.message === 'permission') {
                        showSweetAlert('warning', response.error_message || 'You do not have permission to view the user role.');
                        return [];
                    }
                    return response.items || [];
                }
            }
        });
    }

    function barcode_data(id, name) {
        var tkn = document.getElementsByName("csrfmiddlewaretoken")[0].value;
        $.post('/purchase_barcode_view/', { id: id, csrfmiddlewaretoken: tkn }, function (res) {
            $('#barcode_id').val(res.id);
            $('#barcode_type').val('purchase');
            $('#barcode_modal').modal('show');
        });
    }


    $('#barcodeForm').submit(function (e) {
        e.preventDefault();
        $('#count-error').text('');
        var formData = new FormData(this);

        $.ajax({
            url: '/generate_barcodes/',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                if (response.status === 'error') {
                    $('#count-error').text(response.message);
                    return;
                }

                // Reset form
                $('#count').val('');
                $('#barcode_type').val('');
                $('#barcode_id').val('');
                $('#barcode_modal').modal('hide');

                // Open print window
                var newWindow = window.open("", "_blank");
                newWindow.document.write(response);
                newWindow.document.close();


            },
            error: function (err) {
                $('#count-error').text('Unexpected error occurred while generating barcode.');
            }
        });
    });

    $('#barcode_modal').on('hidden.bs.modal', function () {
        $('#count-error').text('');
        $('#count').val('');
        $('#barcode_id').val('');
        $('#barcode_type').val('');
    });


    function print_all_barcodes(id) {
        var tkn = document.getElementsByName("csrfmiddlewaretoken")[0].value;

        var formData = new FormData();
        formData.append("id", id);
        formData.append("csrfmiddlewaretoken", tkn);
        formData.append("barcode_type", "all_barcodes"); // 👈 special flag

        $.ajax({
            url: "/generate_barcodes/",
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                if (response.status === "error") {
                    alert(response.message);
                    return;
                }

                var newWindow = window.open("", "_blank");
                newWindow.document.write(response);
                newWindow.document.close();
            },
            error: function (err) {
                alert("Unexpected error occurred while printing all barcodes.");
            }
        });
    }


</script>