@extends('layout.master')
@section('content')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
    <div class="container-fluid pt-2">
        <style>
            .color-swatch {
                display: inline-block;
                width: 16px;
                height: 16px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
        </style>
        @php
            $preference = get_preference();
        @endphp

        <!-- Product List start -->
        <div class="row">
            <div class="col-12 px-0">
                <div class="card">
                    <div class="card-body p-0">
                        <div class="container-fluid px-0">
                            <!-- Customer Selection Modal -->
                            <div class="modal fade" id="customerModal" tabindex="-1" aria-labelledby="customerModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog modal-xl">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="customerModalLabel">Select Customer</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="customerResultsTable">
                                                    <thead>
                                                        <tr>
                                                            <th>Name</th>
                                                            <th>Email</th>
                                                            <th>Phone</th>
                                                            <th>Store Name</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <!-- Results will append here -->
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- COMPLETE ORDER MODEL --}}
                            <div class="modal fade" id="completedOrdersModal" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-xl">
                                    <div class="modal-content">
                                        <div class="modal-header bg-success text-white">
                                            <h5 class="modal-title">Completed Orders</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>

                                        <div class="modal-body" style="max-height:70vh; overflow-y:auto;">
                                            <!-- Orders Table -->
                                            <div class="form-group mb-2">
                                                <input type="text" id="orderSearch" class="form-control"
                                                    placeholder="Search Order...">
                                            </div>
                                            <div class="table-responsive mb-3">
                                                <table class="table table-bordered align-middle" id="completedOrdersTable">
                                                    <thead>
                                                        <tr>
                                                            <th>Order No</th>
                                                            <th>Customer</th>
                                                            <th>Subtotal</th>
                                                            <th>Discount</th>
                                                            <th>VAT</th>
                                                            <th>Total</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody><!-- filled by JS --></tbody>
                                                </table>
                                            </div>

                                            <!-- Readonly Details -->
                                            <div id="completedOrderDetails" class="d-none">
                                                <div class="row g-3 align-items-stretch">
                                                    <div class="col-md-6">
                                                        <h3>Order Details</h3>
                                                    </div>
                                                    <div class="col-md-6 text-end">
                                                        <button id="toggleCompletedOrderDetails"
                                                            class="btn btn-danger px-1 py-1">
                                                            x
                                                        </button>
                                                    </div>
                                                    <!-- Customer Info -->
                                                    <div class="col-md-4 d-flex">
                                                        <div class="card p-3 shadow-sm flex-fill">
                                                            <p>Order No: <span id="det_order_no"></span></p>
                                                            <p>Date: <span id="det_order_date"></span></p>
                                                            <p>Company: <span id="det_customer_company"></span></p>
                                                            <p>Name: <span id="det_customer_name"></span></p>
                                                            <p>Email: <span id="det_customer_email"></span></p>
                                                        </div>
                                                    </div>

                                                    <!-- Address Info -->
                                                    <div class="col-md-4 d-flex">
                                                        <div class="card p-3 shadow-sm flex-fill">
                                                            <p>Phone: <span id="det_customer_phone"></span></p>
                                                            <p>Phone 2: <span id="det_customer_phone_two"></span></p>
                                                            <p>Address: <span id="det_customer_address"></span></p>
                                                            <p>City: <span id="det_customer_city"></span></p>
                                                            <p>Postcode: <span id="det_customer_postcode"></span></p>
                                                        </div>
                                                    </div>
                                                    <!-- Order Info -->
                                                    <div class="col-md-4 d-flex">
                                                        <div class="card p-3 shadow-sm flex-fill">
                                                            <p>Status: <span id="det_status"></span></p>
                                                            <p>Subtotal: <span id="det_subtotal"></span></p>
                                                            <p>Discount: <span id="det_discount"></span></p>
                                                            <p>VAT: <span id="det_vat"></span></p>
                                                            <p>Total: <span id="det_total"></span></p>
                                                        </div>
                                                    </div>
                                                </div>


                                                <!-- Products Table -->
                                                <div class="table-responsive mt-3">
                                                    <table class="table table-sm table-bordered"
                                                        id="completedOrderProducts">
                                                        <thead>
                                                            <tr>
                                                                <th>Barcode</th>
                                                                <th>Code</th>
                                                                <th>Image</th>
                                                                <th>Name</th>
                                                                @if($preference && $preference->columns_display == 1)
                                                                    <th>Colors</th>
                                                                    <th>Row</th>
                                                                    <th>Shelf</th>
                                                                @endif
                                                                <th>Price</th>
                                                                <th>Qty</th>
                                                                <th>Total</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody><!-- filled by JS --></tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="container-fluid py-2">
                                <div class="row customer-info-section">
                                    <div class="col-12">
                                        {{-- <h6>Customer Details</h6> --}}
                                        <div class="row g-2 align-items-center">
                                            <div class="col-6 col-md-2">
                                                <select class="form-select  form-select-sm" name="company_id">
                                                    @if (count($companies))
                                                        @foreach ($companies as $item)
                                                            <option value="{{$item->id}}">{{$item->name ?? ''}}</option>
                                                        @endforeach
                                                    @else
                                                        <option value="">Not Available</option>
                                                    @endif
                                                </select>
                                            </div>
                                            <div class="col-6 col-md-2">
                                                <select class="form-select form-select-sm" name="customer_type">
                                                    <option value="walkin">Walkin</option>
                                                    <option value="regular">Regular</option>
                                                </select>
                                            </div>
                                            <div class="col-6 col-md-1">
                                                <input type="text" class="form-control form-control-sm" name="order_no"
                                                    id="order_no" readonly placeholder="Order no"
                                                    value="{{ 'ORD-' . date('Ymd-His') }}">
                                            </div>
                                            <div class="col-6 col-md-1">
                                                <input type="text" class="form-control form-control-sm" name="date"
                                                    value="{{ today()->format('d-m-Y') }}">
                                            </div>
                                            {{-- <div class="col-6 col-md-1">
                                                <select class="form-select form-select-sm" name="status">
                                                    <option value="">Status</option>
                                                    <option value="drafts">Draft</option>
                                                    <!-- Other status options -->
                                                </select>
                                            </div> --}}
                                            <div class="col-6 col-md-2">
                                                <input type="text" name="company_store_name"
                                                    class="form-control form-control-sm" placeholder="Company / Store Name">
                                            </div>
                                            <!-- Row 1 -->
                                            <div class="col-6 col-md-2">
                                                <input type="text" name="code" class="form-control form-control-sm"
                                                    placeholder="Code">
                                            </div>
                                            <div class="col-6 col-md-2">
                                                <input type="text" name="phone_two" class="form-control form-control-sm"
                                                    placeholder="Phone 2">
                                            </div>
                                            <div class="col-6 col-md-2">
                                                <input type="text" name="name" class="form-control form-control-sm"
                                                    placeholder="Name">
                                            </div>
                                            <div class="col-6 col-md-2">
                                                <input type="text" name="phone" class="form-control form-control-sm"
                                                    placeholder="Phone">
                                            </div>
                                            <div class="col-6 col-md-2">
                                                <input type="text" name="email" class="form-control form-control-sm"
                                                    placeholder="Email">
                                            </div>
                                            <div class="col-6 col-md-2">
                                                <input type="text" name="postcode" class="form-control form-control-sm"
                                                    placeholder="Postcode">
                                            </div>

                                            <!-- Row 2 -->
                                            <div class="col-6 col-md-2">
                                                <input type="text" name="address" class="form-control form-control-sm"
                                                    placeholder="Address">
                                            </div>
                                            <div class="col-6 col-md-2">
                                                <input type="text" name="city" class="form-control form-control-sm"
                                                    placeholder="City">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Order Details Table -->
                                <div class="mb-3">
                                    <div class="table-responsive" style="max-height:400px; overflow-y:auto;">
                                        <table
                                            class="table table-sm table-bordered table-striped text-center align-middle mb-0 mt-2"
                                            id="productTable">
                                            <thead class="bg-primary">
                                                <tr>
                                                    <th colspan="12" class="text-center">Order Details</th>
                                                </tr>
                                                <tr>
                                                    <th width="70px">Bar Code</th>
                                                    <th width="50px">Code</th>
                                                    <th width="50px">Image</th>
                                                    <th>Product Name</th>
                                                    @if($preference && $preference->columns_display == 1)
                                                        <th width="50px">Color</th>
                                                        <th width="50px">Stock</th>
                                                        <th width="50px">Row</th>
                                                        <th width="50px">Shelf</th>
                                                    @endif
                                                    <th width="70px">Price</th>
                                                    <th width="50px">QTY</th>
                                                    <th width="50px">Total</th>
                                                    <th width="50px">Delete</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <!-- Rows will be added dynamically -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!-- Summary Section -->
                                <div class="row">
                                    <div class="col-12 col-lg-6 mb-4">
                                        <div class="form-group mb-3">
                                            {{-- <label for="barcodeInput" class="form-label">Scan Barcode:</label> --}}
                                            <input type="text" id="barcodeInput" class="form-control form-control-sm"
                                                placeholder="Scan or enter barcode and press Enter">
                                        </div>
                                        <div class="gap-2 mt-2  action-buttons d-none">
                                            <!-- Example: Loop for each company -->
                                            <div class="container-fluid">
                                                <div class="row mb-2">
                                                    @foreach($companies as $company)
                                                        <div class="company col-12 col-sm-6 col-md-4 mb-2 d-flex"
                                                            style="justify-content: space-between; align-items: center;"
                                                            data-company-id="{{ $company->id }}">
                                                            <span>{{ $company->name }}</span>
                                                            <button class="btn btn-primary btn-sm print_invoice"
                                                                data-company-id="{{ $company->id }}">Print</button>
                                                        </div>
                                                    @endforeach
                                                </div>

                                                <div class="d-flex flex-wrap gap-2 mb-2">
                                                    <button class="btn btn-primary btn-sm">PDF With Image</button>
                                                    <button class="btn btn-primary btn-sm">PDF Without Image</button>
                                                    <button class="btn btn-primary btn-sm payment-btn"
                                                        data-bs-toggle="modal" data-bs-target="#paymentModal">Payment
                                                        Details</button>
                                                </div>
                                            </div>

                                            <!-- Payment Modal -->
                                            <div class="modal fade" id="paymentModal" tabindex="-1" aria-hidden="true">
                                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                                    <div class="modal-content">

                                                        <!-- Header -->
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Payment for Order: <span
                                                                    id="modalOrderNo"></span></h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal"></button>
                                                        </div>

                                                        <!-- Body -->
                                                        <div class="modal-body">
                                                            <div class="mb-3">
                                                                <strong>Order Total:</strong> £<span
                                                                    id="modalOrderTotal">0.00</span> &nbsp;&nbsp;
                                                                <strong>Total Paid:</strong> £<span
                                                                    id="totalPaid">0.00</span> &nbsp;&nbsp;
                                                                <strong>Remaining:</strong> £<span
                                                                    id="remainingBalance">0.00</span>
                                                            </div>

                                                            <!-- Existing Payments Table -->
                                                            <div class="mb-3">
                                                                <h6>Previous Payments</h6>
                                                                <table class="table table-bordered" id="paymentsTable">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>Date</th>
                                                                            <th>Payment Type</th>
                                                                            <th>Amount</th>
                                                                            <th>Notes</th>
                                                                            <th>Total Paid</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <!-- Filled dynamically -->
                                                                    </tbody>
                                                                </table>
                                                            </div>

                                                            <!-- Add Payment Row -->
                                                            <table class="table table-bordered" id="paymentTable">
                                                                <thead>
                                                                    <tr>
                                                                        <th>Payment Type</th>
                                                                        <th>Amount</th>
                                                                        <th>Notes</th>
                                                                        <th>Action</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <!-- First row added by JS -->
                                                                </tbody>
                                                            </table>
                                                            <button type="button" class="btn btn-success"
                                                                id="addPaymentRow">+ Add Payment</button>
                                                        </div>

                                                        <!-- Footer -->
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">Close</button>
                                                            <button type="button" class="btn btn-primary"
                                                                id="savePayment">Save Payment</button>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-3 offset-md-3">
                                        <div class="table-responsive">
                                            <table class="table table-sm table-bordered text-start mb-0" id="InvoiceTotal">
                                                <tbody>
                                                    <tr>
                                                        <th>Subtotal</th>
                                                        <th id="subtotal">0£</th>
                                                    </tr>
                                                    <tr>
                                                        <th>Tax/VAT (20%)</th>
                                                        <th id="tax">0£</th>
                                                    </tr>
                                                    <tr>
                                                        <th>Total (With / Without VAT)</th>
                                                        <th>
                                                            <span id="totalWithVat">0£</span> /
                                                            <span id="totalWithoutVat">0£</span>
                                                        </th>
                                                    </tr>
                                                    <tr>
                                                        <th>Discount</th>
                                                        <th>
                                                            <div class="d-flex justify-content-start align-items-center">
                                                                <input type="number" id="discount" value="0"
                                                                    class="form-control form-control-sm me-2"
                                                                    style="width: 70px; font-size: 10px;">
                                                                <span>£</span>
                                                            </div>
                                                        </th>
                                                    </tr>
                                                    <tr class="fw-bold">
                                                        <th>Net Total (With / Without VAT)</th>
                                                        <th>
                                                            <span id="netWithVat">0£</span> /
                                                            <span id="netWithoutVat">0£</span>
                                                        </th>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Orders Modal -->
                        <div class="modal fade" id="ordersModal" tabindex="-1" aria-labelledby="ordersModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="ordersModalLabel">Orders List</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 id="orders_tables" class="table table-bordered table-sm">
                                                <thead>
                                                    <tr>
                                                        <th>Order No</th>
                                                        <th>Customer</th>
                                                        <th>Subtotal</th>
                                                        <th>Discount</th>
                                                        <th>VAT</th>
                                                        <th>Net Total</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- Orders will be appended here -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Product List end -->
    </div>
    <!-- Sticky Sidebar Buttons -->
    <div id="stickySidebar">
        <div class="top-buttons">
            <button class="sidebar-btn" id="saveOrderBtn" data-tooltip="Save">💾</button>
            <button class="sidebar-btn" id="saveNewBtn" data-tooltip="New Order">➕</button>
            <button class="sidebar-btn" id="show_orders_btn" data-tooltip="Drafts Orders">📦</button>
            <button class="sidebar-btn" id="show_completed_orders_btn" data-tooltip="Completed">✅</button>
            <button class="sidebar-btn" id="refreshProducts" data-tooltip="Sync Products">🔁</button>
            {{--
        </div> --}}
        {{-- <div class="bottom-buttons"> --}}
            <form method="POST" action="{{ route('logout') }}" style="display:inline;">
                @csrf
                <button type="submit" class="sidebar-btn" data-tooltip="Logout" aria-label="Logout" title="Logout">
                    🛑
                </button>
            </form>
        </div>
    </div>

@endsection
<!-- latest jquery-->
<script src="{{asset('assets/js/jquery-3.6.3.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    toastr.options = {
        "closeButton": true,
        "newestOnTop": true,
        "positionClass": "toast-top-right",
        "progressBar": true,
    };

    function scrollToBottom() {
        let container = $(".table-responsive");
        container.scrollTop(container[0].scrollHeight);
    }
    // Update row total
    function updateRowTotal(row) {
        // const columnsDisplay = {{ $preference && $preference->columns_display == 1 ? 'true' : 'false' }}; // ✅ boolean
        // const priceText = row.find(`td:eq(${columnsDisplay ? 8 : 4})`).text().replace(/[^0-9.]/g, '');
        const columnsDisplay = {{ $preference && $preference->columns_display == 1 ? 'true' : 'false' }};
        const priceInput = row.find(`td:eq(${columnsDisplay ? 8 : 4})`).find('input.price-input');
        const priceValue = parseFloat(priceInput.val()) || 0; // ✅ get value from input
        const price = parseFloat(priceValue);
        const qty = parseInt(row.find('.qty-input').val());
        const total = price * qty;
        row.find('.row-total').text(total.toFixed(2) + '£');
        updateGrandTotal();
    }
    // Function to update grand total & summary
    function updateGrandTotal() {
        let subtotal = 0;
        $('.row-total').each(function () {
            subtotal += parseFloat($(this).text().replace(/[^0-9.]/g, '')) || 0;
        });
        $('#grandTotal').text(subtotal.toFixed(2) + '£');
        const vatRate = 0.20; // 20% VAT
        const discount = parseFloat($('#discount').val()) || 0;

        const totalWithoutVat = subtotal;
        const tax = subtotal * vatRate;
        const totalWithVat = subtotal + tax;

        // Apply discount
        const netWithoutVat = Math.max(totalWithoutVat - discount, 0);
        const netWithVat = Math.max(totalWithVat - discount, 0);

        // Update UI
        $('#subtotal').text(subtotal.toFixed(2) + '£');
        $('#tax').text(tax.toFixed(2) + '£');
        $('#totalWithoutVat').text(totalWithoutVat.toFixed(2) + '£');
        $('#totalWithVat').text(totalWithVat.toFixed(2) + '£');
        $('#netWithoutVat').text(netWithoutVat.toFixed(2) + '£');
        $('#netWithVat').text(netWithVat.toFixed(2) + '£');
    }
</script>
<script>
    $(document).ready(function () {
        localforage.setItem('test', 'Hello World').then(() => {
            console.log("Data saved in localforage");
        });
    });
</script>
<script>
    $(document).ready(function () {
        // ================= CONFIG =================
        const PRODUCT_CACHE_KEY = "all_products";
        const PRODUCT_DATE_KEY = "product_cache_date";

        // ================= FUNCTIONS =================

        // 🔹 Preload all products into local cache
        function preloadProducts() {
            $.get('/api/bulk-products', function (response) {
                if (response.success) {
                    saveProductsToCache(response.products);
                    console.log("✅ Products cached locally");
                }
            });
        }

        // 🔹 Save products with sync + date check
        function saveProductsToCache(products) {
            const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD

            localforage.setItem(PRODUCT_CACHE_KEY, products).then(() => {
                localforage.setItem(PRODUCT_DATE_KEY, today);
            });
        }

        // 🔹 Fetch product from cache
        function getProductFromCache(barcode, callback) {
            localforage.getItem(PRODUCT_CACHE_KEY).then(products => {
                if (!products) return callback(null);
                const product = products.find(p => p.barcode == barcode);
                callback(product || null);
            });
        }

        // 🔹 Check date, if changed → sync from API
        function checkAndSync(localProducts) {
            const today = new Date().toISOString().split("T")[0];

            localforage.getItem(PRODUCT_DATE_KEY).then(savedDate => {
                if (savedDate !== today) {
                    console.log("🔄 Date changed → syncing all products...");
                    preloadProducts(); // full sync
                } else {
                    saveProductsToCache(localProducts); // just update local
                }
            });
        }

        // ================= BUTTON =================

        // 🔸 Refresh Products Button
        $("#refreshProducts").on("click", function () {
            // 1. Remove old cache & date
            localforage.removeItem(PRODUCT_CACHE_KEY).then(() => {
                localforage.removeItem(PRODUCT_DATE_KEY).then(() => {
                    console.log("🗑️ Old product cache removed");

                    // 2. Fetch fresh products from API
                    preloadProducts();
                    toastr.success("Products refreshed from database", "", {
                        timeOut: 2000,
                        progressBar: true
                    });
                });
            });
        });


        // 🔹 On barcode enter
        $('#barcodeInput').keypress(function (e) {
            if (e.which === 13) {
                this.value = this.value.toUpperCase();
                const barcode = $(this).val().trim();
                if (barcode) {
                    getProductFromCache(barcode, function (product) {
                        if (product) {
                            // console.log(product);
                            addProductToTable(product);
                            scrollToBottom();
                        } else {
                            toastr.error("Product not found!", "", {
                                timeOut: 2500,
                                progressBar: true
                            });
                        }
                    });
                    $(this).val('');
                }
            }
        });

        const columnsDisplay = {{ $preference && $preference->columns_display == 1 ? 'true' : 'false' }};

        function addProductToTable(product) {
            const existingRow = $(`#productTable tbody tr[data-barcode="${product.barcode}"]`);

            if (existingRow.length > 0) {
                const qtyInput = existingRow.find('.qty-input');
                const newQty = parseInt(qtyInput.val()) + (product.qty || 1);
                qtyInput.val(newQty);
                updateRowTotal(existingRow);
            } else {
                let colorsInputs = '';
                if (product.colors && product.colors.length > 0) {
                    product.colors.forEach(color => {
                        colorsInputs += `
                            <div class="d-flex align-items-center mb-1">
                                <div class="me-2" style="width:20px; height:20px; border:1px solid #ccc; background:${color.color};"></div>
                                <input type="number" 
                                    class="form-control form-control-sm color-qty-input"
                                    data-color-id="${color.id}" 
                                    value="0" min="0" style="width:80px;">
                            </div>
                        `;
                    });
                } else {
                    colorsInputs += `
                        <div class="d-flex align-items-center mb-1">
                            <input type="number" 
                                class="form-control form-control-sm color-qty-input"
                                data-color-id="" 
                                value="0" min="0" style="width:80px;">
                        </div>
                    `;
                }

                // ✅ Default qty from colors sum (start with 0)
                const qtyValue = 0;
                const rowTotal = (product.price * qtyValue).toFixed(2);

                // ✅ Extra columns (Colors, Stock, Row, Shelf) only if enabled in preferences
                let optionalColumns = "";
                if (columnsDisplay) {
                    optionalColumns = `
                        <td>${colorsInputs}</td>
                        <td>${product.stock}</td>
                        <td>${product.row}</td>
                        <td>${product.shelf}</td>
                    `;
                }

                const newRow = `
                    <tr data-barcode="${product.barcode}">
                        <td>${product.code}</td>
                        <td>${product.barcode}</td>
                        <td>
                            <div class="d-flex align-items-center justify-content-center">
                                <div class="h-30 w-30 d-flex-center overflow-hidden text-bg-primary me-2 simple-table-avatar p-0">
                                    <img src="${product.image}" alt="" class="img-fluid">
                                </div>
                            </div>
                        </td>
                        <td>${product.name}</td>
                        ${optionalColumns}
                        <td class="product-price">
                            <input type="number" min="0" step="0.01" class="form-control form-control-sm price-input" value="${product.price}">
                        </td>
                        <td>
                            <input type="number" min="1" 
                                class="form-control form-control-sm qty-input" @if($preference && $preference->columns_display == 1) readonly @endif value="${qtyValue}">
                        </td>
                        <td class="row-total">${rowTotal}£</td>
                        <td>
                            <button type="button" class="btn btn-danger btn-sm px-1 delete-btn remove-row">
                                <i class="ti ti-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;

                $('#productTable tbody').prepend(newRow);
            }

            updateGrandTotal();
        }

        // ✅ Event Listener for Color Qty Change
        $(document).on("input keyup keydown focus", ".color-qty-input", function () {
            const row = $(this).closest("tr");

            // Sum all color qtys
            let totalColorQty = 0;
            row.find(".color-qty-input").each(function () {
                totalColorQty += parseInt($(this).val()) || 0;
            });

            // Update main qty
            row.find(".qty-input").val(totalColorQty);

            // Update row total
            updateRowTotal(row);

            // Update grand total
            updateGrandTotal();
        });

        // 🔹 Shortcut keys
        $(document).keydown(function (e) {
            switch (e.which) {
                case 113: $('input[name="order_no"]').focus(); break; // F2
                case 114: showDraftBills(); break; // F3
                case 115: $('#barcodeInput').focus(); break; // F4
                case 116: preloadProducts(); break; // F5
            }
        });

        preloadProducts(); // Auto preload
    });
</script>

<script>
    $(document).ready(function () {
        let customerList = []; // Global variable for multiple customers

        $('#barcodeInput').focus();

        // Fetch product details from API
        function fetchProductDetails(barcode) {
            $.ajax({
                url: '/api/get-product',
                method: 'GET',
                data: { barcode: barcode },
                success: function (response) {
                    if (response.success) {
                        console.log(response.product);
                        addProductToTable(response.product);
                    } else {
                        toastr.error("Product not found!", "", {
                            timeOut: 2500,
                            progressBar: true
                        });
                    }
                },
                error: function () {
                    toastr.error("Error fetching product details", "", {
                        timeOut: 3000,
                        progressBar: true
                    });
                }
            });
        }

        // Add product to table
        function addProductToTable(product) {
            const existingRow = $(`#productTable tbody tr[data-barcode="${product.barcode}"]`);

            if (existingRow.length > 0) {
                const qtyInput = existingRow.find('.qty-input');
                const currentQty = parseInt(qtyInput.val());
                const maxQty = parseInt(qtyInput.attr('max'));

                if (currentQty < maxQty) {
                    qtyInput.val(currentQty + 1);
                    updateRowTotal(existingRow);
                } else {
                    toastr.error("Cannot add more than available stock", "", {
                        timeOut: 3000,
                        progressBar: true
                    });
                }
            } else {
                const newRow = $('<tr>').attr('data-barcode', product.barcode);
                newRow.append($('<td>').text(product.barcode));
                newRow.append($('<td>').append($('<img>').attr('src', product.image).attr('width', '50').attr('height', '50').css('object-fit', 'contain')));
                newRow.append($('<td>').text(product.name));
                newRow.append($('<td>').text(product.stock));
                newRow.append($('<td>').text(product.row));
                newRow.append($('<td>').text(product.shelf));
                newRow.append($('<td>').text(product.price + '£'));

                const qtyInput = $('<input>').attr({
                    type: 'number',
                    value: '1',
                    min: '0',
                    max: product.stock,
                    class: 'form-control qty-input'
                });

                newRow.append($('<td>').append(qtyInput));
                newRow.append($('<td>').addClass('row-total').text(product.price + '£'));
                newRow.append($('<td>').append(
                    $('<button>').addClass('btn btn-danger btn-sm remove-row').text('×')
                ));

                $('#productTable tbody').append(newRow);
            }

            updateGrandTotal();
        }

        // Row actions
        $(document).on('change', '.qty-input', function () {
            const row = $(this).closest('tr');
            const maxQty = parseInt($(this).attr('max'));
            let newQty = parseInt($(this).val());
            if (newQty > maxQty) {
                toastr.error("Quantity cannot exceed available stock", "", {
                    timeOut: 3000,
                    progressBar: true
                });
                newQty = maxQty;
                $(this).val(maxQty);
            }
            updateRowTotal(row);
        });

        $(document).on('click', '.remove-row', function () {
            $(this).closest('tr').remove();
            updateGrandTotal();
        });

        $(document).on('input', '#discount', function () {
            updateGrandTotal();
        });

        // ===================== CUSTOMER SEARCH =====================
        let typingTimer;
        const doneTypingInterval = 500;
        const searchFields = [
            'input[name="code"]',
            'input[name="company_store_name"]',
            'input[name="name"]',
            'input[name="phone"]',
            'input[name="address"]',
            'input[name="city"]',
            'input[name="postcode"]',
            'input[name="email"]'
        ].join(',');

        $(searchFields).on('keyup', function () {
            const customerType = $('select[name="customer_type"]').val();
            if (customerType === 'walkin') {
                clearTimeout(typingTimer);
                typingTimer = setTimeout(fetchCustomerData, doneTypingInterval);
            }
        }).on('keydown', function () {
            clearTimeout(typingTimer);
        });

        $('select[name="customer_type"]').on('change', function () {
            if ($(this).val() == 'regular') {
                clearCustomerData();
            }
        });

        function fetchCustomerData() {
            const searchData = {
                code: $('input[name="code"]').val(),
                company_store_name: $('input[name="company_store_name"]').val(),
                name: $('input[name="name"]').val(),
                phone: $('input[name="phone"]').val(),
                address: $('input[name="address"]').val(),
                city: $('input[name="city"]').val(),
                postcode: $('input[name="postcode"]').val(),
                email: $('input[name="email"]').val()
            };

            Object.keys(searchData).forEach(key => {
                if (!searchData[key]) delete searchData[key];
            });

            if (Object.keys(searchData).length > 0) {
                $.ajax({
                    url: '{{ route("customers.search") }}',
                    type: 'GET',
                    data: searchData,
                    success: function (response) {
                        if (response.customers.length === 1) {
                            fillFormFields(response.customers[0]);
                        } else if (response.customers.length > 1) {
                            customerList = response.customers;
                            let modalBody = "";
                            response.customers.forEach((cust) => {
                                modalBody += `
                                    <tr data-id="${cust.id}" class="select-customer" style="cursor:pointer;">
                                        <td>${cust.name}</td>
                                        <td>${cust.email}</td>
                                        <td>${cust.phone}</td>
                                        <td>${cust.company}</td>
                                    </tr>`;
                            });
                            $("#customerResultsTable tbody").html(modalBody);
                            $("#customerModal").modal("show");
                        }
                    },
                    error: function (xhr) {
                        console.log(xhr.responseText);
                    }
                });
            }
        }

        function fillFormFields(customer) {
            $('input[name="code"]').val(customer.code || '');
            $('input[name="company_store_name"]').val(customer.company || '');
            $('input[name="name"]').val(customer.name || '');
            $('input[name="phone"]').val(customer.phone || '');
            $('input[name="phone_two"]').val(customer.phone2 || '');
            $('input[name="address"]').val(customer.address || '');
            $('input[name="city"]').val(customer.city || '');
            $('input[name="postcode"]').val(customer.postcode || '');
            $('input[name="email"]').val(customer.email || '');
            // console.log("Customer type:", customer.type);
            // $('select[name="customer_type"]').val(customer.type || '').trigger('change');
        }

        function clearCustomerData() {
            $('input[name="code"], input[name="company_store_name"], input[name="name"], input[name="phone"], input[name="address"], input[name="city"], input[name="postcode"], input[name="email"]').val('');
        }

        // Customer select handler from modal
        $(document).on("click", ".select-customer", function () {
            const id = $(this).data("id");
            const customer = customerList.find(cust => cust.id == id);
            if (customer) {
                fillFormFields(customer);
            }
            $("#customerModal").modal("hide");
        });
    });
</script>

<script>
    $(document).ready(function () {
        // Save Order button click
        $('#saveOrderBtn, #saveNewBtn').click(function () {
            const orderData = collectOrderData();

            // ✅ Validation before submit
            // clear previous errors first
            $('.error-text').remove();

            if (!orderData.name) {
                $('input[name="name"]').after('<span class="error-text text-danger" style="font-size:10px;">Name is required.</span>');
                $('input[name="name"]').focus();
                toastr.error("Name is required.", "", { timeOut: 1500, progressBar: true });
                return;
            }

            if (!orderData.email) {
                $('input[name="email"]').after('<span class="error-text text-danger" style="font-size:10px;">Email is required.</span>');
                $('input[name="email"]').focus();
                toastr.error("Email is required.", "", { timeOut: 1500, progressBar: true });
                return;
            }

            if (!orderData.products.length) {
                toastr.error("Please add at least one product before saving.", "", { timeOut: 1500, progressBar: true });
                return;
            }

            $.ajax({
                url: '/api/orders',
                method: 'POST',
                data: JSON.stringify(orderData),
                contentType: 'application/json',
                success: function (response) {
                    if (response.success) {
                        toastr.success("Order drafts successfully!", "", { timeOut: 1500, progressBar: true });
                        //setTimeout(() => location.reload(), 1500);
                    } else {
                        toastr.error("Failed to save drafts.", "", { timeOut: 2000, progressBar: true });
                    }
                },
                error: function (xhr) {
                    console.error(xhr.responseText);
                    toastr.error("🚨 Error while saving drafts.", "", { timeOut: 2000, progressBar: true });
                }
            });
        });

        function collectOrderData() {
            const products = [];
            $('#productTable tbody tr').each(function () {
                const row = $(this);

                // ✅ Collect per-color quantities as array of objects
                const colors = {};
                row.find('.color-qty-input').each(function () {
                    const input = $(this);
                    const colorId = input.data('color-id');
                    const qty = parseInt(input.val()) || 0;
                    colors[colorId] = qty;  // ✅ directly key:value
                });

                // ✅ Blade se boolean inject
                const columnsDisplay = {{ $preference && $preference->columns_display == 1 ? 'true' : 'false' }};

                // ✅ loop ke andar
                // const priceText = row.find(`td:eq(${columnsDisplay ? 8 : 4})`).text().replace(/[^0-9.]/g, '');
                // ✅ loop ke andar
                const priceInput = row.find(`td:eq(${columnsDisplay ? 8 : 4})`).find('input.price-input');
                const priceValue = parseFloat(priceInput.val()) || 0;

                products.push({
                    barcode: row.data('barcode'),
                    name: row.find('td:eq(2)').text(),
                    qty: parseInt(row.find('.qty-input').val()),
                    price: parseFloat(priceValue),
                    total: parseFloat(row.find('.row-total').text().replace(/[^0-9.]/g, '')),
                    colors: colors   // ✅ ab ye {"1":2,"2":0,"3":5} milega
                });
            });

            return {
                company: $('select[name="company_id"]').val(),
                customer_type: $('select[name="customer_type"]').val(),
                order_no: $('input[name="order_no"]').val(),
                date: $('input[name="date"]').val(),
                code: $('input[name="code"]').val(),
                company_store_name: $('input[name="company_store_name"]').val(),
                name: $('input[name="name"]').val(),
                phone: $('input[name="phone"]').val(),
                phone2: $('input[name="phone2"]').val(),
                address: $('input[name="address"]').val(),
                city: $('input[name="city"]').val(),
                postcode: $('input[name="postcode"]').val(),
                email: $('input[name="email"]').val(),
                status: $('select[name="status"]').val(),
                discount: parseFloat($('#discount').val()) || 0,
                subtotal: parseFloat($('#subtotal').text().replace(/[^0-9.]/g, '')) || 0,
                tax: parseFloat($('#tax').text().replace(/[^0-9.]/g, '')) || 0,
                total_with_vat: parseFloat($('#totalWithVat').text().replace(/[^0-9.]/g, '')) || 0,
                total_without_vat: parseFloat($('#totalWithoutVat').text().replace(/[^0-9.]/g, '')) || 0,
                net_with_vat: parseFloat($('#netWithVat').text().replace(/[^0-9.]/g, '')) || 0,
                net_without_vat: parseFloat($('#netWithoutVat').text().replace(/[^0-9.]/g, '')) || 0,
                products: products
            };
        }
    });
</script>


<script>
    // Show orders modal and fetch orders via AJAX
    $(document).on('click', '#show_orders_btn', async function () {
        $('#orders_tables tbody').html('<tr><td colspan="7">Loading...</td></tr>');

        try {
            const res = await $.getJSON('/api/order/fetch');
            const $tbody = $('#orders_tables tbody');
            $tbody.empty();

            if (res.data && res.data.length > 0) {
                res.data.forEach(order => {
                    const orderData = JSON.stringify(order).replace(/"/g, '&quot;');
                    $tbody.append(`
                        <tr data-order='${orderData}' class="select-order" style="cursor:pointer;">
                            <td>${order.order_no}</td>
                            <td>${order.customer_name || ''}</td>
                            <td>${parseFloat(order.order_sub_total || 0).toFixed(2)}</td>
                            <td>${parseFloat(order.discount || 0).toFixed(2)}</td>
                            <td>${parseFloat(order.order_vat || 0).toFixed(2)}</td>
                            <td>${parseFloat(order.order_total || 0).toFixed(2)}</td>
                        </tr>
                    `);
                });
            } else {
                $tbody.html('<tr><td colspan="7">No orders found.</td></tr>');
            }

            const ordersModal = new bootstrap.Modal(document.getElementById('ordersModal'));
            ordersModal.show();
        } catch (err) {
            console.error("Fetch error:", err);
            toastr.error('Failed to fetch orders: ' + (err.responseText || err.statusText || err.message || 'Unknown error'), "", {
                timeOut: 3000,
                progressBar: true
            });
            $('#orders_tables tbody').html('<tr><td colspan="7">Error loading orders.</td></tr>');
        }

        function fillFormWithOrderDatas(order) {
            console.log(order);

            if (!order || typeof order !== 'object') {
                console.error('Invalid order data:', order);
                toastr.error("❌ Error: Invalid order data received", "", {
                    timeOut: 2500,
                    progressBar: true
                });
                return false;
            }

            try {
                const {
                    order_id = null,
                    company_id = 1,
                    customer_id = null,
                    order_no = '',
                    customer_code = '',
                    customer_store = '',
                    customer_name = '',
                    customer_company = '',
                    customer_phone = '',
                    customer_phone_two = '',
                    customer_address = '',
                    customer_city = '',
                    customer_postcode = '',
                    customer_email = '',
                    order_type = 'inStore',
                    subTotal = '0.00',
                    discount = '0.00',
                    vat = '0.00',
                    netTotal = '0.00',
                    status = 'draft',
                    products = []
                } = order;

                $('select[name="company_id"]').val(company_id);
                $('select[name="customer_type"]').val(order_type === 'walkin' ? 'walkin' : 'regular');
                $('input[name="order_no"]').val(order_no);
                $('input[name="name"]').val(customer_name);
                $('input[name="code"]').val(customer_code);
                $('input[name="company_store_name"]').val(customer_company);
                $('input[name="phone"]').val(customer_phone);
                $('input[name="phone_two"]').val(customer_phone_two);
                $('input[name="address"]').val(customer_address);
                $('input[name="city"]').val(customer_city);
                $('input[name="postcode"]').val(customer_postcode);
                $('input[name="email"]').val(customer_email);
                $('#discount').val(discount);

                $('#productTable tbody').empty();

                if (Array.isArray(products)) {
                    products.forEach(item => {
                        const {
                            id = '',
                            product_image = '',
                            product_name = '',
                            product_id = '',
                            product_code = '',
                            product_barcode = '',
                            product_quantity = '',
                            product_row = '',
                            product_shelf = '',
                            price = '0.00',
                            quantity = 0,
                            colors = [] // ✅ array from backend
                        } = item;

                        // let colorText = '-';
                        // if (Array.isArray(colors) && colors.length > 0) {
                        //     colorText = colors.map(c => {
                        //         return `
                        //     <div class="d-flex align-items-center mb-1">
                        //         <label class="me-2">${c.name}:</label>
                        //         <input type="number" 
                        //             class="form-control form-control-sm color-qty-input" 
                        //             data-color-id="${c.id}" 
                        //             value="${c.qty}" 
                        //             min="0" style="width:70px;">
                        //     </div>
                        // `;
                        //     }).join('');
                        // }
                        let colorText = '-';
                        if (Array.isArray(colors) && colors.length > 0) {
                            colorText = colors.map(c => {
                                return `
                                    <div class="d-flex align-items-center justify-content-center mb-1">
                                        <!-- ✅ color box -->
                                        ${c.color
                                        ? `<div class="me-2" 
                                                    style="width:18px; height:18px; border:1px solid #ccc; border-radius:4px; background:${c.color};">
                                            </div>`
                                        : ''
                                    }
                                        <input type="number" 
                                            class="form-control form-control-sm color-qty-input" 
                                            data-color-id="${c.id}" 
                                            value="${c.qty}" 
                                            min="0" style="width:70px;">
                                    </div>
                                `;
                            }).join('');
                        }

                        const existingRow = $(`#productTable tbody tr[data-barcode="${product_code}"]`);

                        if (existingRow.length > 0) {
                            const qtyInput = existingRow.find('.qty-input');
                            const newQty = parseInt(qtyInput.val()) + quantity;
                            qtyInput.val(newQty);
                            updateRowTotal(existingRow);
                        } else {
                            const columnsDisplay = {{ $preference && $preference->columns_display == 1 ? 'true' : 'false' }};
                            const productImage = product_image ? `/uploads/uploads/products/${product_image}` : '/uploads/uploads/products/default.png';
                            const newRow = `
                                <tr data-barcode="${product_code}">
                                    <td>${product_barcode}</td>
                                    <td>${product_code}</td>
                                    <td>
                                        <div class="d-flex align-items-center justify-content-center">
                                            <div class="h-30 w-30 d-flex-center overflow-hidden text-bg-primary me-2 simple-table-avatar p-0">
                                                <img src="${productImage}" alt="" class="img-fluid">
                                            </div>
                                        </div>
                                    </td>
                                    <td>${product_name}</td>
                                    ${columnsDisplay ? `
                                        <td>${colorText}</td> 
                                        <td>${product_quantity}</td>
                                        <td>${product_row}</td>
                                        <td>${product_shelf}</td>
                                    ` : ''}
                                    <td>
                                        <input type="number" value="${price}" class="form-control price-input" />
                                    </td>
                                    <td>
                                        <!-- ✅ Readonly main qty -->
                                        <input type="number" value="${quantity || 0}" 
                                            min="1" 
                                            class="form-control qty-input" @if($preference && $preference->columns_display == 1) readonly @endif>
                                    </td>
                                    <td class="row-total">${(price * quantity).toFixed(2)}£</td>
                                    <td>
                                        <button type="button" class="btn btn-danger btn-sm px-1 delete-btn remove-row">
                                            <i class="ti ti-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            `;
                            $('#productTable tbody').append(newRow);
                        }
                    });
                }

                updateGrandTotal();
                return true;

            } catch (error) {
                console.error('Error processing order data:', error);
                toastr.error("⚠️ Error loading order details. Please try again.", "", {
                    timeOut: 3000,
                    progressBar: true
                });
                return false;
            }
        }

        // $(document).on("click", ".select-order", function () {
        //     try {
        //         // Directly attribute se lo
        //         const orderJson = $(this).attr("data-order");
        //         const orderData = JSON.parse(orderJson);

        //         const orderNo = orderData.order_no;
        //         const orderTotal = orderData.order_total;

        //         // buttons dikhana
        //         let btns = $(".action-buttons");
        //         btns.removeClass("d-none").css("display", "flex");

        //         btns.find("button")
        //             .attr("data-order-no", orderNo)
        //             .attr("data-order-total", orderTotal);

        //         if (!fillFormWithOrderDatas(orderData)) {
        //             toastr.error("Failed to load order data", "", {
        //                 timeOut: 3000,
        //                 progressBar: true
        //             });
        //             return;
        //         }

        //         $("#ordersModal").modal("hide");

        //     } catch (error) {
        //         console.error("Error:", error);
        //         toastr.error("Error loading order. Please try again.", "", {
        //             timeOut: 3000,
        //             progressBar: true
        //         });
        //     }
        // });
        // 
        $(document).off("click", ".select-order").on("click", ".select-order", function () {
            try {
                const orderJson = $(this).attr("data-order");
                const orderData = JSON.parse(orderJson);

                const orderNos = orderData.order_no;
                console.clear();
                console.log(orderNos); // ab ek hi dafa chalega
                const orderTotal = orderData.order_total;

                let btns = $(".action-buttons");
                btns.removeClass("d-none").css("display", "flex");

                btns.find("button")
                    .attr("data-order-no", orderNos)
                    .attr("data-order-total", orderTotal);

                if (!fillFormWithOrderDatas(orderData)) {
                    toastr.error("Failed to load order data", "", {
                        timeOut: 3000,
                        progressBar: true
                    });
                    return;
                }

                $("#ordersModal").modal("hide");
            } catch (error) {
                console.error("Error:", error);
                toastr.error("Error loading order. Please try again.", "", {
                    timeOut: 3000,
                    progressBar: true
                });
            }
        });


        $(document).on("click", ".action-buttons .btn-primary", function () {
            const orderNo = $(this).attr("data-order-no"); // <-- use data-order-no
            const btnText = $(this).text().trim();

            if (btnText === "PDF With Image") {
                generatePDF(orderNo, true);
            } else if (btnText === "PDF Without Image") {
                generatePDF(orderNo, false);
            }
        });

        // Function to call Laravel backend
        function generatePDF(orderNo, withImage) {
            $.ajax({
                url: "/api/generate-pdf",
                type: "POST",
                data: {
                    order_no: orderNo,
                    with_image: withImage ? 1 : 0
                },
                xhrFields: {
                    responseType: "blob" // binary response
                },
                success: function (response) {
                    // console.log(response);
                    let blob = new Blob([response], { type: "application/pdf" });
                    let link = document.createElement("a");
                    link.href = window.URL.createObjectURL(blob);
                    link.download = `Order-${orderNo}.pdf`;
                    link.click();
                },
                error: function (xhr) {
                    toastr.error("Error generating PDF", "", {
                        timeOut: 3000,
                        progressBar: true
                    });

                    console.error(xhr.responseText);
                }
            });
        }
    });
</script>
{{-- Stat PAYMENT WORK --}}
<script>
    $(document).ready(function () {
        // When modal opens
        $('#paymentModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var orderNo = button.data('order-no');
            var orderTotal = parseFloat(button.data('order-total'));

            // Set modal header info
            $("#modalOrderNo").text(orderNo);
            $("#modalOrderTotal").text(orderTotal.toFixed(2));
            $("#totalPaid").text("0.00");
            $("#remainingBalance").text(orderTotal.toFixed(2));

            // Clear payment rows and add first row
            $("#paymentTable tbody").empty();

            // Store order total in modal
            $("#paymentModal").data("order-total", orderTotal);
            $("#paymentModal").data("remaining", orderTotal); // 🔥 track remaining

            addPaymentRow(); // first row with orderTotal

            // Fetch previous payments
            loadPaymentDetails(orderNo);
        });

        // Add new payment row
        $("#addPaymentRow").click(function () {
            addPaymentRow();
        });

        function addPaymentRow() {
            let orderTotal = parseFloat($("#paymentModal").data("order-total")) || 0;
            let remaining = parseFloat($("#paymentModal").data("remaining")) || 0;

            // 🔥 first row case: agar rows = 0 → value = orderTotal
            // warna value = remaining
            let amountValue = $("#paymentTable tbody tr").length === 0
                ? orderTotal.toFixed(2)
                : remaining.toFixed(2);

            let row = `
                <tr class="payment-row">
                    <td>
                        <select class="form-select payment-type">
                            <option value="Cash">Cash</option>
                            <option value="Card">By Card</option>
                            <option value="Bank">Bank Transfer</option>
                            <option value="Credit">Credit</option>
                        </select>
                    </td>
                    <td>
                        <div class="input-group">
                            <input type="number" min="0" step="0.01" class="form-control payment-amount" value="${amountValue}">
                        </div>
                    </td>
                    <td>
                        <input type="text" class="form-control payment-notes" placeholder="Notes">
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm btn-danger btn-remove">
                            <i class="ti ti-trash"></i>
                        </button>
                    </td>
                </tr>`;
            $("#paymentTable tbody").append(row);
            updateTotalPaid(); // refresh total after adding
        }

        // Remove row
        $(document).on("click", ".btn-remove", function () {
            if ($("#paymentTable tbody tr").length > 1) {
                $(this).closest("tr").remove();
                updateTotalPaid();
            } else {
                toastr.error("⚠️ You need at least one payment method.", "", {
                    timeOut: 3000,
                    progressBar: true
                });
            }
        });

        // Update total dynamically
        $(document).on("input", ".payment-amount", function () {
            updateTotalPaid();
        });

        function updateTotalPaid() {
            let totalPaid = 0;
            $("#paymentTable tbody tr").each(function () {
                let val = parseFloat($(this).find(".payment-amount").val()) || 0;
                totalPaid += val;
            });

            let orderTotal = parseFloat($("#paymentModal").data("order-total"));

            if (totalPaid > orderTotal) {
                let excess = totalPaid - orderTotal;
                let lastInput = $("#paymentTable tbody tr:last").find(".payment-amount");
                let newVal = Math.max(0, parseFloat(lastInput.val()) - excess);
                lastInput.val(newVal.toFixed(2));
                totalPaid = orderTotal;
            }

            $("#totalPaid").text(totalPaid.toFixed(2));
            let remaining = (orderTotal - totalPaid).toFixed(2);
            $("#remainingBalance").text(remaining);

            // 🔥 update remaining in modal
            $("#paymentModal").data("remaining", parseFloat(remaining));

            if (remaining == 0) {
                $("#remainingBalance").addClass("text-success fw-bold");
            } else {
                $("#remainingBalance").removeClass("text-success fw-bold");
            }
        }

        $("#savePayment").click(function () {
            let payments = [];
            let totalPaid = 0;
            let valid = true;
            let orderTotal = parseFloat($("#paymentModal").data("order-total"));
            let orderNo = $("#modalOrderNo").text();

            $("#paymentTable tbody tr").each(function () {
                let type = $(this).find(".payment-type").val();
                let amount = parseFloat($(this).find(".payment-amount").val()) || 0;
                let notes = $(this).find(".payment-notes").val() || ""; // ✅ added notes field

                if (amount <= 0) {
                    $(this).find(".payment-amount").addClass("is-invalid");
                    valid = false;
                } else {
                    $(this).find(".payment-amount").removeClass("is-invalid");
                    // ✅ now pushing notes along with amount & type
                    payments.push({ amount, payment_type: type, notes });
                    totalPaid += amount;
                }
            });

            if (!valid) {
                toastr.error("All payment rows must have a value greater than 0.", "", {
                    timeOut: 3000,
                    progressBar: true
                });
                return;
            }

            if (totalPaid > orderTotal) {
                toastr.error("Total payment cannot exceed Order Total!", "", {
                    timeOut: 3000,
                    progressBar: true
                });
                return;
            }

            // CSRF token
            let csrfToken = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                url: '/api/payments/store',
                type: 'POST',
                data: {
                    _token: csrfToken,
                    order_no: orderNo,
                    payments: payments
                },
                success: function (response) {
                    toastr.success("Payment saved successfully!", "", {
                        timeOut: 2000,
                        progressBar: true
                    });
                    $("#paymentModal").modal("hide");
                    // ✅ reload payment details after save
                    loadPaymentDetails(orderNo);
                },
                error: function (xhr) {
                    toastr.error("Error saving payment: " + (xhr.responseText || "Unknown error"), "", {
                        timeOut: 3000,
                        progressBar: true
                    });
                }
            });
        });

        // Fetch previous payments
        function loadPaymentDetails(orderNo) {
            $.ajax({
                url: '/api/payments/' + orderNo,
                type: 'GET',
                success: function (res) {
                    let tableBody = '';
                    if (res.payments.length > 0) {
                        $("#paymentTable").hide();
                        $("#addPaymentRow").hide();
                        $("#savePayment").hide();
                        res.payments.forEach(function (payment) {
                            // format date
                            let createdAt = new Date(payment.created_at);

                            let day = String(createdAt.getDate()).padStart(2, "0");
                            let month = String(createdAt.getMonth() + 1).padStart(2, "0");
                            let year = createdAt.getFullYear();

                            let hours = String(createdAt.getHours()).padStart(2, "0");
                            let minutes = String(createdAt.getMinutes()).padStart(2, "0");

                            let formattedDate = `${day}-${month}-${year}, ${hours}:${minutes}`;
                            payment.details.forEach(function (detail) {
                                tableBody += `
                                <tr>
                                    <td>${formattedDate}</td>
                                    <td>${detail.payment_type}</td>
                                    <td>£${parseFloat(detail.amount).toFixed(2)}</td>
                                    <td>${detail.notes}</td>
                                    <td>£${parseFloat(payment.total_paid).toFixed(2)}</td>
                                </tr>
                            `;
                            });
                        });
                    } else {
                        tableBody = `<tr><td colspan="4" class="text-center">No payments found</td></tr>`;
                    }
                    $('#paymentsTable tbody').html(tableBody);

                },
                error: function (xhr) {
                    console.log(xhr.responseText);
                }
            });
        }

    });

</script>
{{-- END PAYMENT WORK --}}
{{-- FETCH COMPLETED CODE --}}
<script>
    // ✅ Open Completed Orders & load list
    $(document).on('click', '#show_completed_orders_btn', async function () {
        const $tbody = $('#completedOrdersTable tbody');
        $tbody.html('<tr><td colspan="6">Loading...</td></tr>');

        try {
            const res = await $.getJSON('/api/order/fetch/completed'); // your completed route

            $tbody.empty();
            if (res?.data?.length) {
                res.data.forEach(order => {
                    // Safely embed JSON into data attribute
                    const orderData = JSON.stringify(order).replace(/"/g, '&quot;');
                    $tbody.append(`
                        <tr class="completed-order-row" data-order="${orderData}" style="cursor:pointer;">
                            <td>${order.order_no || ''}</td>
                            <td>${order.customer_name || ''}</td>
                            <td>${parseFloat(order.order_sub_total || 0).toFixed(2)}</td>
                            <td>${parseFloat(order.discount || 0).toFixed(2)}</td>
                            <td>${parseFloat(order.order_vat || 0).toFixed(2)}</td>
                            <td>${parseFloat(order.order_total || 0).toFixed(2)}</td>
                        </tr>
                    `);
                });
            } else {
                $tbody.html('<tr><td colspan="6">No completed orders found.</td></tr>');
            }

            new bootstrap.Modal(document.getElementById('completedOrdersModal')).show();
        } catch (err) {
            console.error('Completed fetch error:', err);
            toastr.error('Failed to fetch completed orders', '', { timeOut: 3000, progressBar: true });
            $tbody.html('<tr><td colspan="6">Error loading completed orders.</td></tr>');
        }
    });
</script>

<script>
    /* ========== Helpers ========== */
    function escapeHtml(v) {
        return String(v ?? '').replace(/[&<>"']/g, s =>
            ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }[s]));
    }
    function money(n) {
        const num = parseFloat(n || 0);
        return isNaN(num) ? '0.00' : num.toFixed(2);
    }
    function safeColor(val) {
        const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
        return hex.test(String(val)) ? val : '#ffffff';
    }

    /* ========== Render details into the new DIV ========== */
    $(document).on('click', '.completed-order-row', function () {
        const $row = $(this);
        const orderJson = $row.attr('data-order');
        let order;

        try {
            order = JSON.parse(orderJson);
        } catch (e) {
            console.error('Parse error:', e);
            toastr.error('Error loading order details.', '', { timeOut: 3000, progressBar: true });
            return;
        }

        // Agar already details row hai to remove kardo (toggle)
        if ($row.next().hasClass('order-details-row')) {
            $row.next().remove();
            return;
        }

        // Sirf ek detail ek waqt me rakhni ho to purani hatao
        $('.order-details-row').remove();

        // ✅ Heading with close button
        let headerHtml = `
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0 text-success">Order Details</h5>
                <button type="button" class="btn btn-danger btn-sm close-order-details p-1">x</button>
            </div>
        `;
        function formatDateTime(dateString) {
            let date = new Date(dateString);

            let day = String(date.getDate()).padStart(2, '0');
            let month = String(date.getMonth() + 1).padStart(2, '0');
            let year = date.getFullYear();

            let hours = String(date.getHours()).padStart(2, '0');
            let minutes = String(date.getMinutes()).padStart(2, '0');
            let seconds = String(date.getSeconds()).padStart(2, '0');

            return `${day}-${month}-${year} ${hours}:${minutes}:${seconds}`;
        }
        // ✅ Customer + Order Info
        let orderInfoHtml = `
            <div class="row g-3">
                <div class="col-md-4">
                    <div class="card p-2">
                        <p><b>Order No:</b> ${order.order_no}</p>
                        <p><b>Date:</b> ${formatDateTime(order.order_date)}</p>
                        <p><b>Status:</b> ${order.status || 'Completed'}</p>
                        <p><b>Company:</b> ${order.customer_company || '-'}</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card p-2">
                        <p><b>Customer:</b> ${order.customer_name}</p>
                        <p><b>Email:</b> ${order.customer_email}</p>
                        <p><b>Phone:</b> ${order.customer_phone}</p>
                        <p><b>Address:</b> ${order.customer_address}, ${order.customer_city} (${order.customer_postcode || '-'})</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card p-2">
                        <p><b>Subtotal:</b> ${order.order_sub_total}£</p>
                        <p><b>Discount:</b> ${order.discount || 0}£</p>
                        <p><b>VAT:</b> ${order.order_vat}£</p>
                        <p><b>Total:</b> ${order.order_total}£</p>
                    </div>
                </div>
            </div>
        `;

        // ✅ Products Table
        let productsHtml = `
        <table class="table table-sm table-bordered mt-3">
            <thead>
                <tr>
                    <th>Barcode</th>
                    <th>Code</th>
                    <th>Image</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Qty</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>`;

        (order.products || []).forEach(item => {
            const imgSrc = item.product_image
                ? `/uploads/uploads/products/${item.product_image}`
                : `/uploads/uploads/products/default.png`;

            const qty = parseInt(item.quantity, 10) || 0;
            const price = parseFloat(item.price) || 0;
            const total = (qty * price).toFixed(2);

            productsHtml += `
            <tr>
                <td>${item.product_barcode || '-'}</td>
                <td>${item.product_code || '-'}</td>
                <td><img src="${imgSrc}" width="40" height="40"></td>
                <td>${item.product_name}</td>
                <td>${price}£</td>
                <td>${qty}</td>
                <td>${total}£</td>
            </tr>`;
        });

        productsHtml += `</tbody></table>`;
        // ✅ Payments Table
        let paymentsHtml = '';
        if (order.payments && order.payments.length > 0) {
            paymentsHtml = `
            <h6 class="mt-3">Payments</h6>
            <table class="table table-sm table-bordered">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Details</th>
                    </tr>
                </thead>
                <tbody>
            `;

            order.payments.forEach(p => {
                const details = p.details && p.details.length > 0
                ? p.details.map(d => {
                    let line = `${d.type}: ${d.amount}£`;
                    if (d.notes) line += ` (${d.notes})`; // add notes if present
                    return line;
                }).join('<br>')
                : '-';
                paymentsHtml += `
                    <tr>
                        <td>${formatDateTime(p.payment_date)}</td>
                        <td>${p.amount}£</td>
                        <td>${details}</td>
                    </tr>
                `;
            });

            paymentsHtml += `</tbody></table>`;
        }

        // ✅ Insert after clicked row
        $row.after(`
            <tr class="order-details-row">
                <td colspan="6">
                    ${headerHtml}
                    ${orderInfoHtml}
                    ${productsHtml}
                    ${paymentsHtml}
                </td>
            </tr>
        `);
    });

    // Close button click event
    $(document).on('click', '.close-order-details', function () {
        $(this).closest('tr.order-details-row').remove();
    });
</script>

<script>
    $(document).on("click", "#toggleCompletedOrderDetails", function () {
        $("#completedOrderDetails").toggleClass("d-none");
    });
    $(document).on('click', '.print_invoice', function () {
        $(".print_invoice").prop("disabled", true);
        var companyIds = $(this).data('company-id');

        var orderNos = $('#order_no').val();
        $.ajax({
            url: '/api/fetch-order-data-for-print', // Laravel API route
            type: 'GET',
            data: { companyIds: companyIds, orderNos: orderNos },
            success: function (response) {
                if (response.success) {
                    // Open a new window and write the invoice HTML
                    var printWindow = window.open('', '', 'height=600,width=800');
                    printWindow.document.write(response.html);
                    printWindow.document.close();
                    printWindow.print();
                    $(".print_invoice").prop("disabled", false);
                } else {
                    alert('Failed to fetch order data.');
                }
            },
            error: function () {
                alert('Something went wrong.');
            }
        });
    });
    $(document).on('keyup', '#orderSearch', function () {
        let value = $(this).val().toLowerCase(); // input value lower case
        $("#completedOrdersTable tbody tr").each(function () {
            // check har row ka text
            let rowText = $(this).text().toLowerCase();
            if (rowText.indexOf(value) > -1) {
                $(this).show(); // match hua → show
            } else {
                $(this).hide(); // match nahi hua → hide
            }
        });
    });
</script>