@extends('Admin.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;
    }

    .bill-tab {
        border-radius: 8px;
        padding: 10px 22px;
    }

    .held-bill-tab {
        background: #ffc400 !important;
        color: #111 !important;
        border-color: #ffc400 !important;
        box-shadow: 0 6px 14px rgba(255, 196, 0, 0.35);
    }
    .held-bills-modal {
    max-width: 1200px;
}

.held-bills-table {
    white-space: nowrap;
    font-size: 14px;
}

.held-bills-table th,
.held-bills-table td {
    vertical-align: middle;
    padding: 10px 12px;
}

.held-bills-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.held-bills-actions .btn {
    min-width: 76px;
    padding: 5px 10px;
}
</style>
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="row align-items-center mb-3">

    <!-- Left Side -->
    <div class="col-md-6">
        <h4>Billing</h4>

        <p class="mb-1">
            <strong>Staff Name :</strong>
            <span id="selectedStaffName">-</span>
        </p>

        <p class="mb-0">
            <strong>Staff ID :</strong>
            <span id="selectedStaffId">-</span>
        </p>
    </div>

    <!-- Right Side -->
    <div class="col-md-6">

        <div class="card shadow-sm p-3">

            <div class="row">

                <div class="col-md-8">
                    <label class="form-label">
                        Select Staff <span class="text-danger">*</span>
                    </label>

                    <select id="staff_id" class="form-select">
                        <option value="">Select Staff</option>

                        @foreach($staffs as $staff)
                        <option
                            value="{{ $staff->id }}"
                            data-name="{{ $staff->name }}"
                            data-staffid="{{ $staff->user_id }}">
                            {{ $staff->name }}
                        </option>
                        @endforeach

                    </select>
                </div>

                <div class="col-md-4 d-flex align-items-end">
                    <button class="btn btn-warning w-100" type="button" id="showHeldBillsBtn">
                        Held Bills
                    </button>
                </div>

            </div>

        </div>

    </div>

</div>
<div class="card p-3">
    <div class="card p-3">
        <div class="row">
           <div class="col-lg-12">
    <label>Select User</label>
    <input
        type="text"
        class="form-control"
        id="search_user"
        placeholder="Enter 10 digit phone number">
</div>
            <input type="hidden" id="user_id">
            <input type="hidden" name="staff_id" id="selected_staff">
            <div class="col-lg-2 mt-auto">
                <button
                    class="btn btn-primary"
                    id="searchBtn"
                    type="button">
                    Search
                </button>
            </div>
        </div>
    </div>
    <div id="customerCard" class="card p-3 mt-3" style="display:none;">
        <div class="d-flex align-items-center">
            <strong class="me-2">Customer Details :</strong>
            <span id="customerName" class="fw-bold me-3"></span>
            <i class="ti tabler-phone me-1"></i>
            <span id="customerPhone"></span>
        </div>
    </div>
</div>
<div class="mt-4">
    <div id="billTabs" class="d-inline-flex gap-2">
        <button type="button" class="btn btn-primary bill-tab active" data-bill-id="1">
            Bill 1
        </button>
    </div>

    <button type="button" class="btn btn-label-secondary" id="newBillBtn">
        + New Bill
    </button>
</div>
<div class="row ">
    <div class="col-lg-8">
        <div class="card mt-3 p-3">
            <div class="position-relative">
                <input
                    type="text"
                    id="product_search"
                    class="form-control"
                    placeholder="Search Item / Code">
                <div id="searchResult"
                    class="list-group"
                    style="
                display:none;
                position:absolute;
                width:100%;
                top:100%;
                left:0;
                z-index:9999;
                max-height:300px;
                overflow-y:auto;
                background:#fff;
                border:1px solid #ddd;
            ">
                </div>
            </div>
            <div class="table-responsive mt-3">
                <table class="table table-bordered" id="billTable">
                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Code</th>
                            <th>Product</th>
                            <th>MRP</th>
                            <th>Qty</th>
                            <th>GST</th>
                            <th>Price</th>
                            <th>Remark</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="billTableBody">
                        <tr id="emptyRow">
                            <td colspan="9" class="text-center py-5">
                                <i class="ti tabler-package"
                                    style="font-size:60px;color:#777;"></i>
                                <h5 class="mt-3 text-secondary">
                                    Add Items...
                                </h5>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="row gap-2 d-flex">
            <div class="col-auto">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDiscountview">Add
                    Discount</button>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addChargeview">Add
                    Charge</button>
            </div>
        </div>
        <div class="card p-3 mt-3">
            <h6>Bill Details</h6>
            <div class="d-flex justify-content-between">
                <span>Sub Total</span>
                <span>₹<span id="subtotal">0.00</span></span>
            </div>
            <div class="d-flex justify-content-between mt-2">
                <span>GST</span>
                <span>₹<span id="gst">0.00</span></span>
            </div>
            <div class="d-flex justify-content-between mt-2">
                <span>Discount</span>
                <span class="text-danger">- ₹<span id="discount">0.00</span></span>
            </div>
            <div class="d-flex justify-content-between mt-2">
                <span>Charge</span>
                <span>₹<span id="charge">0.00</span></span>
            </div>
            <hr>
            <div class="d-flex justify-content-between">
                <strong class="text-success">Total</strong>
                <strong class="text-success">
                    ₹<span id="grandTotal">0.00</span>
                </strong>
            </div>
        </div>
      <div class="card p-3 mt-3">
    <h6>Payment Mode</h6>

    <select id="payment_mode" class="form-select">
        <option value="">Select Payment Mode</option>
        <option value="Cash">Cash</option>
        <option value="UPI">UPI</option>
        <option value="Card">Card</option>
    </select>

    <hr class="m-0 mt-3" style="height: 3px; background-color: #e0e0e0; border: none;">

    <div class="d-flex justify-content-between mt-2">
        <div>
            <h6 class="text-success">Payable</h6>
        </div>
        <div>
            <h6 class="text-success">
                ₹<span id="payableAmount">0.00</span>
            </h6>
        </div>
    </div>
</div>
        <div class="row p-3">
            <button class="btn btn-primary holdCurrentBill" type="button">
                Hold Bill
            </button>
        </div>
        <div class="row gap-1 d-flex">
            <div class="col-auto">
                <button class="savePrintF6">Save & Print F6</button>
            </div>

            <div class="col-auto">
                <button class="savePrintA4">Save & Print A4</button>
            </div>
        </div>
    </div>
</div>
</div>
<div class="modal fade" id="delete" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Bill</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this bill?
                <input type="hidden" id="delete_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn btn-danger" id="confirmDelete">
                    Delete
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addDiscountView" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h6>Add Discount</h6>
            <div class="mb-3 text-start">
                <label class="form-label">Amount</label>
                <input type="number" class="form-control" id="discount_amount" placeholder="0.00">
            </div>
            <div class="mb-3 text-start">
                <label class="form-label">Reason</label>
                <input type="text" class="form-control" id="discount_reason" placeholder="Reason">
            </div>
            <div class="d-flex justify-content-center">
                <button class="btn btn-label-secondary me-2" type="button" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn btn-primary" id="applyDiscount">
                    Apply
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addChargeview" tabindex="-1" data-bs-keyboard="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <form action="#">
                <h6>Add Charge</h6>
                <div class="mb-3 text-start">
                    <label class="form-label">Amount</label>
                    <input type="number" class="form-control" id="charge_amount" placeholder="0.00">
                </div>
                <div class="mb-3 text-start">
                    <label class="form-label">Reason</label>
                    <input type="text" class="form-control mt-2" placeholder="Reason">
                </div>
                <div class="d-flex justify-content-center">
                    <button class="btn btn-label-secondary me-2" type="button" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-primary mt-3" id="applyCharge">
                        Apply
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="view">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <h5>Register New Number</h5>
                <input
                    type="text"
                    id="reg_phone"
                    class="form-control mb-3"
                    placeholder="Phone Number">
                <input
                    type="text"
                    id="reg_name"
                    class="form-control mb-3"
                    placeholder="Name">
                <input
                    type="email"
                    id="reg_email"
                    class="form-control mb-3"
                    placeholder="Email">
                <button
                    type="button"
                    class="btn btn-primary w-100"
                    id="registerBtn">
                    Register
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="holdBillView" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered held-bills-modal">
        <div class="modal-content rounded-4">
            <div class="modal-header">
                <h5 class="modal-title">Held Bills</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-3">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover text-center align-middle held-bills-table mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>S.No</th>
                                <th>Order ID</th>
                                <th>Date</th>
                                <th>Customer</th>
                                <th>Phone</th>
                                <th>Staff</th>
                                <th>Amount</th>
                                <th style="width: 180px;">Action</th>
                            </tr>
                        </thead>
                        <tbody id="heldBillsTableBody">
                            <tr>
                                <td colspan="8" class="text-muted py-4">Loading...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function() {

        function collectProducts() {
            let products = [];

            $("#billTableBody tr").each(function() {
                let code = $(this).data("code");
                if (!code) return;

                products.push({
                    code: code,
                    name: $(this).find("td:nth-child(3)").text().trim(),
                    mrp: parseFloat($(this).find(".mrp").text()) || 0,
                    price: parseFloat($(this).find(".price").text()) || 0,
                    qty: parseInt($(this).find(".qty").val()) || 0,
                    tax: parseFloat($(this).find(".tax").text()) || 0,
                });
            });

            return products;
        }

      function getPaymentMode() {
    return $("#payment_mode").val();
}

        function saveBill(status, callback) {
            let products = collectProducts();

            if (products.length === 0) {
                alert("No products added!");
                return;
            }

            if (!$("#user_id").val()) {
                alert("Please select customer.");
                return;
            }

            if (!$("#staff_id").val()) {
                alert("Please select staff.");
                return;
            }

            $.ajax({
                url: status === "held" ? "{{ route('hold-bill') }}" : "{{ route('save_order') }}",
                type: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                data: {
                    status: status,
                    user_id: $("#user_id").val(),
                    staff_id: $("#staff_id").val(),
                    customer_name: $("#customerName").text().trim(),
                    customer_phone: $("#customerPhone").text().trim(),
                    subtotal: $("#subtotal").text(),
                    gst: $("#gst").text(),
                    discount: $("#discount").text(),
                    charge: $("#charge").text(),
                    total: $("#grandTotal").text(),
                    payment_mode: getPaymentMode(),
                    products: products
                },
                success: function(res) {
                    if (res.status) {
                        callback(res);
                    } else {
                        alert(res.message || "Save Failed");
                    }
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                    alert("Server Error");
                }
            });
        }

        function clearBill() {
            $("#billTableBody").html(`
            <tr id="emptyRow">
                <td colspan="9" class="text-center py-5">
                    <i class="ti tabler-package" style="font-size:60px;color:#777;"></i>
                    <h5 class="mt-3 text-secondary">Add Items...</h5>
                </td>
            </tr>
        `);

            $("#subtotal").text("0.00");
            $("#gst").text("0.00");
            $("#discount").text("0.00");
            $("#charge").text("0.00");
            $("#grandTotal").text("0.00");
            $("#payableAmount").text("0.00");
            $("#discount_amount").val("");
            $("#charge_amount").val("");
        }

        function recalculateBill() {
            let subtotal = 0;
            let gst = 0;
            let discount = parseFloat($("#discount").text()) || 0;
            let charge = parseFloat($("#charge").text()) || 0;

            $("#billTableBody tr").each(function() {
                let code = $(this).data("code");
                if (!code) return;

                let qty = parseFloat($(this).find(".qty").val()) || 1;
                let price = parseFloat($(this).find(".price").text()) || 0;
                let tax = parseFloat($(this).find(".tax").text()) || 0;

                let rowTotal = qty * price;
                subtotal += rowTotal;
                gst += (rowTotal * tax) / 100;
            });

            let total = subtotal + gst + charge - discount;
            if (total < 0) total = 0;

            $("#subtotal").text(subtotal.toFixed(2));
            $("#gst").text(gst.toFixed(2));
            $("#grandTotal").text(total.toFixed(2));
            $("#payableAmount").text(total.toFixed(2));
        }

        function loadHeldBills() {
            $("#heldBillsTableBody").html(`
            <tr>
                <td colspan="7" class="text-muted">Loading...</td>
            </tr>
        `);

            $.ajax({
                url: "{{ route('held-bills') }}",
                type: "GET",
                success: function(bills) {
                    let html = "";

                    if (!bills || bills.length === 0) {
                        html = `
                        <tr>
                            <td colspan="7" class="text-muted">No held bills found.</td>
                        </tr>
                    `;
                    } else {
                        $.each(bills, function(index, bill) {
                            let billId = bill.id;
                            let orderNo = bill.order_id || bill.id;
                            let date = bill.updated_at ? new Date(bill.updated_at).toLocaleString() : "-";
                            let name = bill.customer_name || "-";
                            let phone = bill.customer_phone || "-";
                            let staffName = bill.staff ? bill.staff.name : "-";
                            let staffUserId = bill.staff ? bill.staff.user_id : "-";
                            let staffText = staffName + " (" + staffUserId + ")";
                            let amount = parseFloat(bill.total || 0).toFixed(2);

                            html += `
                            <tr>
                                <td>${index + 1}</td>
                                <td>${orderNo}</td>
                                <td>${date}</td>
                                <td>${name}</td>
                                <td>${phone}</td>
                                 <td>${staffText}</td>
                                <td>₹${amount}</td>
                               <td>
    <div class="held-bills-actions">
        <button type="button" class="btn btn-sm btn-info resumeHeldBill" data-id="${billId}">
            Resume
        </button>
        <button type="button" class="btn btn-sm btn-danger deleteHeldBill" data-id="${billId}">
            Delete
        </button>
    </div>
</td>
                            </tr>
                        `;
                        });
                    }

                    $("#heldBillsTableBody").html(html);
                },
                error: function() {
                    $("#heldBillsTableBody").html(`
                    <tr>
                        <td colspan="7" class="text-danger">Could not load held bills.</td>
                    </tr>
                `);
                }
            });
        }

        function loadBillToPage(bill) {
            $("#user_id").val(bill.user_id || "");
            $("#staff_id").val(bill.staff_id || "").trigger("change");

            $("#customerCard").show();
            $("#customerName").text(bill.customer_name || "");
            $("#customerPhone").text(bill.customer_phone || "");

            $("#billTableBody").empty();

            $.each(bill.products, function(index, item) {
                let row = `
                <tr data-code="${item.code}">
                    <td>${index + 1}</td>
                    <td>${item.code}</td>
                    <td>${item.name}</td>
                    <td class="mrp">${parseFloat(item.mrp || 0).toFixed(2)}</td>
                    <td>
                        <input type="number" class="form-control qty"
                            value="${item.qty}" min="1" style="width:70px;">
                    </td>
                    <td class="tax">${item.tax || 0}</td>
                    <td class="price">${parseFloat(item.price || 0).toFixed(2)}</td>
                    <td>
                        <input type="text" class="form-control" placeholder="Remark">
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm removeRow">X</button>
                    </td>
                </tr>
            `;

                $("#billTableBody").append(row);
            });

            $("#discount").text(parseFloat(bill.discount || 0).toFixed(2));
            $("#charge").text(parseFloat(bill.charge || 0).toFixed(2));

            recalculateBill();
        }

        $(document).on("click", ".savePrintF6", function() {
            saveBill("completed", function(res) {
                window.open("/admin/bill/print/f6/" + res.order_id, "_blank");
            });
        });

        $(document).on("click", ".savePrintA4", function() {
            saveBill("completed", function(res) {
                window.open("/admin/bill/print/a4/" + res.order_id, "_blank");
            });
        });

        $(document).on("click", ".holdCurrentBill", function() {
            saveBill("held", function() {
                alert("Bill held successfully");
                clearBill();
            });
        });

        $(document).on("click", "#showHeldBillsBtn", function() {
            loadHeldBills();
            new bootstrap.Modal(document.getElementById("holdBillView")).show();
        });

        $(document).on("click", ".resumeHeldBill", function() {
            let billId = $(this).data("id");

            $.ajax({
                url: "{{ url('admin/resume-bill') }}/" + billId,
                type: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                success: function(res) {
                    if (res.status && res.bill_data) {
                        openResumedHeldBillTab(res.bill_data);

                        let modal = bootstrap.Modal.getInstance(document.getElementById("holdBillView"));
                        if (modal) modal.hide();
                    } else {
                        alert(res.message || "Could not resume bill");
                    }
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                    alert("Could not resume bill");
                }
            });
        });

        $(document).on("click", ".deleteHeldBill", function() {
            let billId = $(this).data("id");

            if (!confirm("Are you sure you want to delete this held bill?")) {
                return;
            }

            $.ajax({
                url: "{{ url('admin/delete-held-bill') }}/" + billId,
                type: "DELETE",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                success: function(res) {
                    alert(res.message || "Held bill deleted");
                    loadHeldBills();
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                    alert("Could not delete held bill");
                }
            });
        });

        document.addEventListener("keydown", function(e) {
            if (e.key === "F6") {
                e.preventDefault();
                $(".savePrintF6").click();
            }

            if (e.key === "F7") {
                e.preventDefault();
                $(".holdCurrentBill").click();
            }

            if (e.key === "F8") {
                e.preventDefault();
                $("#showHeldBillsBtn").click();
            }
        });
    });
</script>
<!-- //searchregisteruser -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    let searchTimer = null;
    let lastSearchedNumber = "";

    function clearCustomer() {
        document.getElementById("customerCard").style.display = "none";
        document.getElementById("customerName").innerHTML = "";
        document.getElementById("customerPhone").innerHTML = "";
        document.getElementById("user_id").value = "";
    }

    function searchCustomerByPhone(phone) {
        if (phone.length !== 10) {
            clearCustomer();
            return;
        }

        if (lastSearchedNumber === phone) {
            return;
        }

        lastSearchedNumber = phone;

        fetch("{{ route('search_user') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                search: phone
            })
        })
        .then(async response => {
            const text = await response.text();
            return JSON.parse(text);
        })
        .then(res => {
            if (res.status) {
                document.getElementById("customerCard").style.display = "block";
                document.getElementById("customerName").innerHTML =
                    res.user.name ? res.user.name : "No Name";
                document.getElementById("customerPhone").innerHTML = res.user.phone;
                document.getElementById("user_id").value = res.user.id;
            } else {
                clearCustomer();

                document.getElementById("reg_phone").value = phone;
                let modal = new bootstrap.Modal(document.getElementById("view"));
                modal.show();
            }
        })
        .catch(error => {
            console.log(error);
            alert("Something went wrong");
        });
    }

    document.getElementById("search_user").addEventListener("input", function () {
        this.value = this.value.replace(/\D/g, "");

        if (this.value.length > 10) {
            this.value = this.value.slice(0, 10);
        }

        clearTimeout(searchTimer);

        searchTimer = setTimeout(() => {
            searchCustomerByPhone(this.value);
        }, 300);
    });
});
</script>
<script>
    document.getElementById('registerBtn').addEventListener('click', function() {
        let phone = document.getElementById('reg_phone').value.trim();
        let name = document.getElementById('reg_name').value.trim();
        let email = document.getElementById('reg_email').value.trim();
        if (phone == "") {
            alert("Phone Number is required");
            return;
        }
        fetch("{{ route('register_user') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({
                    phone: phone,
                    name: name,
                    email: email
                })
            })
            .then(async response => {
                const data = await response.json();
                return data;
            })
            .then(res => {
                if (res.status) {
                    // close modal
                    bootstrap.Modal.getInstance(document.getElementById('view')).hide();
                    // search box
                    document.getElementById('search_user').value = res.user.phone;
                    // customer card
                    document.getElementById('customerCard').style.display = "block";
                    document.getElementById('customerName').innerHTML =
                        res.user.name != "" ? res.user.name : "Customer";
                    document.getElementById('customerPhone').innerHTML =
                        res.user.phone;
                    // clear fields
                    document.getElementById('reg_phone').value = "";
                    document.getElementById('reg_name').value = "";
                    document.getElementById('reg_email').value = "";
                } else {
                    alert(res.message || res.error || "Registration Failed");
                    console.log(res);
                }
            })
            .catch(err => {
                console.log(err);
                alert("Registration Failed");
            });
    });
</script>
<script>
    document.getElementById('search_user').addEventListener('input', function() {
        // Numbers only
        this.value = this.value.replace(/\D/g, '');
        // Maximum 10 digits
        if (this.value.length > 10) {
            this.value = this.value.slice(0, 10);
        }
    });
</script>
<!-- product search -->
<script>
    let discount = 0;
    let charge = 0;

    $(document).ready(function() {

        // ================= PRODUCT SEARCH =================
        $("#product_search").keyup(function() {

            let search = $(this).val().trim();

            if (search == "") {
                $("#searchResult").hide();
                return;
            }

            $.ajax({
                url: "{{ route('search_products') }}",
                type: "GET",
                data: {
                    search: search
                },

                success: function(response) {

                    let html = "";

                    if (response.length == 0) {
                        html = '<div class="list-group-item text-danger">No Product Found</div>';
                    } else {

                        $.each(response, function(index, item) {

                            let disabled = item.out_of_stock ? "pointer-events:none;opacity:.6;" : "";
                            let stockText = item.out_of_stock ?
                                '<span class="badge bg-danger ms-2">Out of Stock</span>' :
                                "";

                            html += `
                        <a href="javascript:void(0)"
                            class="list-group-item list-group-item-action product-item"
                            style="${disabled}"
                            data-stock="${item.stock}"
                            data-name="${item.product_name}"
                            data-code="${item.product_id}"
                            data-parent="${item.product_variant_id ?? ''}"
                            data-mrp="${item.mrp}"
                            data-price="${item.price}"
                            data-tax="${item.tax}"
                            data-unit="${item.unit_value}"
                            data-unit-name="${item.unit}">

                            <b>${item.product_id}</b> - ${item.product_name}
                            <small class="text-muted">(${item.unit_value} ${item.unit})</small>
                            <span class="float-end">₹${item.price}</span>
                            ${stockText}

                        </a>`;
                        });
                    }

                    $("#searchResult").html(html).show();
                }
            });
        });

        // ================= ADD PRODUCT =================
        $(document).on("click", ".product-item", function() {

            let stock = parseInt($(this).data("stock"));
            let code = $(this).data("code");
            let name = $(this).data("name");
            let mrp = parseFloat($(this).data("mrp"));
            let price = parseFloat($(this).data("price"));
            let tax = parseFloat($(this).data("tax"));

            let existing = $('#billTable tbody tr[data-code="' + code + '"]');

            if (existing.length > 0) {

                let qtyInput = existing.find(".qty");
                let qty = parseInt(qtyInput.val()) || 1;

                if (qty < stock) {
                    qtyInput.val(qty + 1);
                } else {
                    alert("Only " + stock + " items available.");
                }

                calculateBill();
                $("#product_search").val("");
                $("#searchResult").hide();
                return;
            }

            $("#emptyRow").hide();

            let row = `
        <tr data-code="${code}">
            <td></td>
            <td>${code}</td>
            <td>${name}</td>
            <td class="mrp">${mrp.toFixed(2)}</td>
            <td>
                <input type="number" class="form-control qty"
                    value="1" min="1" max="${stock}" style="width:70px;">
            </td>
            <td class="tax">${tax}</td>
            <td class="price">${price.toFixed(2)}</td>
            <td>
                <input type="text" class="form-control" placeholder="Remark">
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-sm removeRow">X</button>
            </td>
        </tr>`;

            $("#billTableBody").prepend(row);

            updateSerial();
            calculateBill();

            $("#product_search").val("");
            $("#searchResult").hide();
        });

        // ================= DELETE PRODUCT =================
        $(document).on("click", ".removeRow", function() {
            $(this).closest("tr").remove();
            updateSerial();

            if ($("#billTable tbody tr").length == 0) {
                $("#emptyRow").show();
            }

            calculateBill();
        });

        // ================= QTY CHANGE =================
        $(document).on("input", ".qty", function() {

            let max = parseInt($(this).attr("max"));
            let val = parseInt($(this).val());

            if (val > max) $(this).val(max);
            if (val < 1 || isNaN(val)) $(this).val(1);

            calculateBill();
        });

        // ================= CLICK OUTSIDE FIX =================
        $(document).click(function(e) {

            if (!$(e.target).closest("#product_search,#searchResult").length) {
                $("#searchResult").hide();
            }
        });

        // ================= DISCOUNT =================
        $("#applyDiscount").click(function() {

            discount = parseFloat($("#discount_amount").val()) || 0;
            calculateBill();

            let modalEl = document.getElementById('addDiscountView');
            let modal = bootstrap.Modal.getInstance(modalEl);

            if (!modal) {
                modal = new bootstrap.Modal(modalEl);
            }

            modal.hide();
        });

        // ================= CHARGE =================
        $("#applyCharge").click(function() {

            charge = parseFloat($("#charge_amount").val()) || 0;
            calculateBill();

            $("#addChargeview").modal("hide");
        });

        // ================= SERIAL =================
        function updateSerial() {
            $("#billTableBody tr").each(function(index) {
                $(this).find("td:first").text(index + 1);
            });
        }

        // ================= BILL CALCULATION =================
        function calculateBill() {

            let subtotal = 0;
            let gst = 0;

            $("#billTableBody tr").each(function() {

                let qty = parseFloat($(this).find(".qty").val()) || 1;
                let price = parseFloat($(this).find(".price").text()) || 0;
                let tax = parseFloat($(this).find(".tax").text()) || 0;

                let rowTotal = qty * price;

                subtotal += rowTotal;
                gst += (rowTotal * tax) / 100;
            });

            let total = subtotal + gst + charge - discount;

            if (total < 0) total = 0;

            $("#subtotal").text(subtotal.toFixed(2));
            $("#gst").text(gst.toFixed(2));
            $("#discount").text(discount.toFixed(2));
            $("#charge").text(charge.toFixed(2));
            $("#grandTotal").text(total.toFixed(2));
            $("#payableAmount").text(total.toFixed(2));
        }

    });

    // ================= STAFF CHANGE =================
    $('#staff_id').on('change', function() {

        let option = $(this).find(':selected');

        let staffName = option.data('name');
        let userId = option.data('staffid');

        if ($(this).val() == '') {
            $('#selectedStaffName').text('-');
            $('#selectedStaffId').text('-');
            $('#holdBillBtn').prop('disabled', true);
            return;
        }

        $('#selectedStaffName').text(staffName);
        $('#selectedStaffId').text(userId);

        $('#holdBillBtn').prop('disabled', false);
    });
</script>

<script>
    let bills = {
        1: {
            label: "Bill 1",
            type: "normal",
            customer: {},
            staff_id: "",
            products: [],
            totals: {
                subtotal: "0.00",
                gst: "0.00",
                discount: "0.00",
                charge: "0.00",
                grandTotal: "0.00",
                payableAmount: "0.00"
            }
        }
    };

    let activeBillId = 1;
    let billCount = 1;

    function saveCurrentBillState() {
        let products = [];
        let oldBill = bills[activeBillId] || {};

        $("#billTableBody tr").each(function() {
            let code = $(this).data("code");
            if (!code) return;

            products.push({
                code: code,
                name: $(this).find("td:nth-child(3)").text().trim(),
                mrp: $(this).find(".mrp").text(),
                qty: $(this).find(".qty").val(),
                tax: $(this).find(".tax").text(),
                price: $(this).find(".price").text(),
                remark: $(this).find("td:nth-child(8) input").val() || ""
            });
        });

        bills[activeBillId] = {
            label: oldBill.label || ("Bill " + activeBillId),
            type: oldBill.type || "normal",
            customer: {
                user_id: $("#user_id").val(),
                name: $("#customerName").text(),
                phone: $("#customerPhone").text(),
                search: $("#search_user").val()
            },
            staff_id: $("#staff_id").val(),
            products: products,
            totals: {
                subtotal: $("#subtotal").text(),
                gst: $("#gst").text(),
                discount: $("#discount").text(),
                charge: $("#charge").text(),
                grandTotal: $("#grandTotal").text(),
                payableAmount: $("#payableAmount").text()
            }
        };
    }

    function setActiveTabColor(tabButton, billId) {
        $("#billTabs .bill-tab")
            .removeClass("btn-primary held-bill-tab active")
            .addClass("btn-label-secondary");

        let bill = bills[billId];

        $(tabButton)
            .removeClass("btn-label-secondary")
            .addClass("active");

        if (bill && bill.type === "held") {
            $(tabButton).addClass("held-bill-tab");
        } else {
            $(tabButton).addClass("btn-primary");
        }
    }

    function loadBillState(billId) {
        let bill = bills[billId];
        if (!bill) return;

        $("#user_id").val(bill.customer.user_id || "");
        $("#search_user").val(bill.customer.search || "");
        $("#customerName").text(bill.customer.name || "");
        $("#customerPhone").text(bill.customer.phone || "");

        if (bill.customer.name || bill.customer.phone) {
            $("#customerCard").show();
        } else {
            $("#customerCard").hide();
        }

        if (bill.staff_id) {
            $("#staff_id").val(bill.staff_id).trigger("change");
        }

        $("#billTableBody").empty();

        if (!bill.products || bill.products.length === 0) {
            $("#billTableBody").html(`
            <tr id="emptyRow">
                <td colspan="9" class="text-center py-5">
                    <i class="ti tabler-package" style="font-size:60px;color:#777;"></i>
                    <h5 class="mt-3 text-secondary">Add Items...</h5>
                </td>
            </tr>
        `);
        } else {
            bill.products.forEach(function(item, index) {
                $("#billTableBody").append(`
                <tr data-code="${item.code}">
                    <td>${index + 1}</td>
                    <td>${item.code}</td>
                    <td>${item.name}</td>
                    <td class="mrp">${parseFloat(item.mrp || 0).toFixed(2)}</td>
                    <td>
                        <input type="number" class="form-control qty"
                            value="${item.qty || 1}" min="1" style="width:70px;">
                    </td>
                    <td class="tax">${item.tax || 0}</td>
                    <td class="price">${parseFloat(item.price || 0).toFixed(2)}</td>
                    <td>
                        <input type="text" class="form-control" value="${item.remark || ""}" placeholder="Remark">
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm removeRow">X</button>
                    </td>
                </tr>
            `);
            });
        }

        $("#subtotal").text(bill.totals.subtotal || "0.00");
        $("#gst").text(bill.totals.gst || "0.00");
        $("#discount").text(bill.totals.discount || "0.00");
        $("#charge").text(bill.totals.charge || "0.00");
        $("#grandTotal").text(bill.totals.grandTotal || "0.00");
        $("#payableAmount").text(bill.totals.payableAmount || "0.00");
    }

    function openNormalBillTab() {
        saveCurrentBillState();

        billCount++;
        activeBillId = billCount;

        bills[activeBillId] = {
            label: "Bill " + activeBillId,
            type: "normal",
            customer: {},
            staff_id: $("#staff_id").val(),
            products: [],
            totals: {
                subtotal: "0.00",
                gst: "0.00",
                discount: "0.00",
                charge: "0.00",
                grandTotal: "0.00",
                payableAmount: "0.00"
            }
        };

        $("#billTabs .bill-tab")
            .removeClass("btn-primary held-bill-tab active")
            .addClass("btn-label-secondary");

        $("#billTabs").append(`
        <button type="button" class="btn btn-primary bill-tab active" data-bill-id="${activeBillId}">
            Bill ${activeBillId}
        </button>
    `);

        loadBillState(activeBillId);
    }

    function openResumedHeldBillTab(bill) {
        saveCurrentBillState();

        billCount++;
        activeBillId = billCount;

        let customerName = bill.customer_name || "Customer";
        let label = "Hold Bill (" + customerName + ")";

        bills[activeBillId] = {
            label: label,
            type: "held",
            customer: {
                user_id: bill.user_id || "",
                name: bill.customer_name || "",
                phone: bill.customer_phone || "",
                search: bill.customer_phone || ""
            },
            staff_id: bill.staff_id || $("#staff_id").val(),
            products: bill.products || [],
            totals: {
                subtotal: parseFloat(bill.subtotal || 0).toFixed(2),
                gst: parseFloat(bill.gst || 0).toFixed(2),
                discount: parseFloat(bill.discount || 0).toFixed(2),
                charge: parseFloat(bill.charge || 0).toFixed(2),
                grandTotal: parseFloat(bill.total || 0).toFixed(2),
                payableAmount: parseFloat(bill.total || 0).toFixed(2)
            }
        };

        $("#billTabs .bill-tab")
            .removeClass("btn-primary held-bill-tab active")
            .addClass("btn-label-secondary");

        $("#billTabs").append(`
        <button type="button" class="btn bill-tab held-bill-tab active" data-bill-id="${activeBillId}">
            ${label}
        </button>
    `);

        loadBillState(activeBillId);
    }

    $(document).on("click", "#newBillBtn", function() {
        openNormalBillTab();
    });

    $(document).on("click", ".bill-tab", function() {
        saveCurrentBillState();

        activeBillId = $(this).data("bill-id");

        setActiveTabColor(this, activeBillId);
        loadBillState(activeBillId);
    });
</script>
@endsection