{% extends 'base.html' %}
{% load i18n static l10n %}

{% block title %}{% trans "POS" %} | {{ settings.business_name }}{% endblock %}

{% block head %}
<style>
    .product-card {
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        border: none;
        border-radius: 12px;
        overflow: hidden;
    }
    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important;
    }
    .cart-container {
        position: sticky;
        top: 80px;
        height: calc(100vh - 120px);
        display: flex;
        flex-direction: column;
    }
    .cart-items {
        flex-grow: 1;
        overflow-y: auto;
    }
    .category-badge {
        cursor: pointer;
        padding: 6px 12px;
        border-radius: 20px;
        margin-right: 4px;
        margin-bottom: 4px;
        display: inline-block;
        background: #f1f3f5;
        color: #495057;
        font-size: 0.85rem;
        transition: all 0.2s;
        border: 1px solid transparent;
    }
    .category-badge.active {
        background: var(--bs-primary);
        color: white;
        border-color: var(--bs-primary);
    }
    .product-name {
        font-size: 0.75rem;
        line-height: 1.2;
        height: auto;
        overflow: hidden;
    }

    .payment-method-btn.active {
        background-color: var(--bs-primary);
        color: white;
        border-color: var(--bs-primary);
    }

    /* Loyalty Styles */
    .loyalty-badge {
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 10px;
        font-weight: bold;
    }

    /* Invoice Print Styles */
    @media print {
        body * {
            visibility: hidden;
        }
        #invoice-print, #invoice-print * {
            visibility: visible !important;
        }
        #invoice-print {
            display: block !important;
            position: fixed;
            left: 0;
            top: 0;
            width: 80mm;
            padding: 5mm;
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
            font-size: 11px;
            color: black;
            background: white;
            z-index: 9999;
        }
        .no-print {
            display: none !important;
        }
        #sidebar, .top-navbar, .btn, .modal {
            display: none !important;
        }
        main {
            padding: 0 !important;
            margin: 0 !important;
        }
    }

    #invoice-print {
        display: none;
        width: 80mm;
        margin: auto;
        border: 1px solid #eee;
        padding: 5mm;
        background: white;
    }
    .invoice-header { text-align: center; margin-bottom: 10px; border-bottom: 1px dashed #000; padding-bottom: 10px; }
    .invoice-title { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
    .invoice-details { margin-bottom: 10px; font-size: 10px; }
    .invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
    .invoice-table th { border-bottom: 1px solid #000; text-align: left; padding: 2px 0; font-size: 10px; }
    .invoice-table td { padding: 4px 0; font-size: 10px; vertical-align: top; }
    .invoice-total { border-top: 1px dashed #000; padding-top: 5px; }
    .bilingual { display: flex; justify-content: space-between; font-size: 9px; color: #555; }
    .rtl { direction: rtl; text-align: right; }
    .ltr { direction: ltr; text-align: left; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-2 px-md-4 no-print">
    <div class="row g-3 g-lg-4">
        <!-- Products Section -->
        <div class="col-lg-8">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 gap-3">
                <h4 class="fw-bold mb-0">{% trans "Point of Sale" %}</h4>
                <button class="btn btn-sm btn-outline-secondary ms-3" onclick="openCustomerDisplay()" title="{% trans 'Open Customer Screen' %}">
                    <i class="bi bi-display"></i> <span class="d-none d-md-inline">{% trans "Customer Screen" %}</span>
                </button>
                <div class="input-group w-100 w-md-50">
                    <span class="input-group-text bg-white border-end-0"><i class="bi bi-search"></i></span>
                    <input type="text" id="productSearch" class="form-control border-start-0 shadow-none" placeholder="{% trans 'Search products...' %}">
                </div>
            </div>

            <div class="mb-4 overflow-auto text-nowrap pb-2">
                <div class="category-badge active" data-category="all">{% trans "All" %}</div>
                {% for category in categories %}
                <div class="category-badge" data-category="{{ category.id }}">
                    {{ category.name_ar }} / {{ category.name_en }}
                </div>
                {% endfor %}
            </div>

            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-2" id="productGrid">
                {% for product in products %}
                <div class="col product-item" data-category="{{ product.category.id }}" data-name-en="{{ product.name_en|lower }}" data-name-ar="{{ product.name_ar }}">
                    <div class="card h-100 shadow-sm product-card p-1" onclick="addToCart({{ product.id|unlocalize }}, '{{ product.name_en|escapejs }}', '{{ product.name_ar|escapejs }}', {{ product.price|unlocalize }}, {{ product.vat|default:site_settings.tax_rate|default:0|unlocalize }})">
                        {% if product.image %}
                        <img src="{{ product.image.url }}" class="card-img-top rounded-3" alt="{{ product.name_en }}" style="height: 80px; object-fit: cover;">
                        {% else %}
                        <div class="bg-light rounded-3 d-flex align-items-center justify-content-center" style="height: 80px;">
                            <i class="bi bi-image text-muted opacity-25" style="font-size: 1.5rem;"></i>
                        </div>
                        {% endif %}
                        <div class="card-body p-1 text-center">
                            <div class="product-name fw-bold mb-1">
                                <div dir="rtl">{{ product.name_ar }}</div>
                                <div class="small text-muted fw-normal" style="font-size: 0.65rem;">{{ product.name_en }}</div>
                            </div>
                            <p class="text-primary fw-bold mb-0" style="font-size: 0.8rem;">{{ site_settings.currency_symbol }}{{ product.price|floatformat:decimal_places }}</p>
                            <small class="text-muted d-block" style="font-size: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{% trans "Stock" %}: {{ product.stock_quantity }}</small>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Cart Section -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 cart-container" id="posCart">
                <div class="card-header bg-white border-0 pt-4 px-4 d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <button class="btn btn-link d-lg-none text-dark p-0 me-3" onclick="toggleMobileCart()">
                            <i class="bi bi-chevron-left fs-4"></i>
                        </button>
                        <h5 class="fw-bold mb-0">{% trans "Current Order" %}</h5>
                    </div>
                    <div class="d-flex gap-2 align-items-center">
                        <button class="btn btn-sm btn-outline-warning shadow-none position-relative" onclick="loadHeldSales()" data-bs-toggle="modal" data-bs-target="#heldSalesModal">
                            <i class="bi bi-clock-history"></i>
                            <span id="heldCountBadge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none">0</span>
                        </button>
                        <button class="btn btn-sm btn-link text-danger text-decoration-none p-0" onclick="clearCart()">
                            <i class="bi bi-trash"></i> {% trans "Clear" %}
                        </button>
                    </div>
                </div>
                
                <div class="px-4 mt-2">
                    <div class="d-flex gap-2 mb-2">
                        <div class="position-relative w-100"><input type="hidden" id="customerSelect" value="" onchange="onCustomerChange()"><div class="input-group input-group-sm"><span class="input-group-text bg-white border-end-0"><i class="bi bi-search"></i></span><input type="text" id="customerSearchInput" class="form-control border-start-0 shadow-none" placeholder="{% trans 'Search Name / Phone...' %}" autocomplete="off"><button class="btn btn-outline-secondary border-start-0" type="button" onclick="clearCustomerSelection()" id="clearCustomerBtn" style="display:none;"><i class="bi bi-x"></i></button></div><div id="customerSearchResults" class="list-group position-absolute w-100 shadow-sm d-none" style="z-index: 1050; max-height: 250px; overflow-y: auto; top: 100%;"></div></div>
                        <button class="btn btn-sm btn-outline-primary shadow-none" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                            <i class="bi bi-person-plus"></i>
                        </button>
                    </div>
                    
                    <!-- Loyalty Info Display -->
                    <div id="loyaltyInfo" class="d-none bg-light p-2 rounded-3 mb-2 animate__animated animate__fadeIn">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="small fw-bold text-muted"><i class="bi bi-star-fill text-warning me-1"></i> {% trans "Loyalty" %}</span>
                            <span id="loyaltyTierBadge" class="loyalty-badge text-white"></span>
                        </div>
                        <div class="d-flex justify-content-between mt-1">
                            <span class="small text-muted">{% trans "Available Points" %}</span>
                            <span id="loyaltyPointsDisplay" class="small fw-bold">0.00</span>
                        </div>
                    </div>
                </div>
                
                <div class="card-body px-4 py-3 cart-items">
                    <div id="cartItemsList">
                        <!-- Cart items will be injected here -->
                    </div>
                    <div class="text-center py-5 text-muted opacity-50" id="emptyCartMsg">
                        <i class="bi bi-cart3 display-1 d-block mb-3"></i>
                        {% trans "Your cart is empty" %}
                    </div>
                </div>

                <div class="card-footer bg-light border-0 p-4 rounded-bottom-4 mt-auto">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="small">{% trans "Subtotal" %}</span>
                        <span id="subtotalAmount" class="small">{{ site_settings.currency_symbol }}0.000</span>
                    </div>
                     <div class="d-flex justify-content-between mb-2">
                        <span class="small">{% trans "VAT" %}</span>
                        <span id="taxAmount" class="small">{{ site_settings.currency_symbol }}0.000</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="small">{% trans "Discount" %}</span>
                        <div class="input-group input-group-sm w-50">
                            <input type="number" id="discountInput" class="form-control text-end shadow-none" value="0" min="0" step="0.001" onchange="updateTotals()">
                            <span class="input-group-text bg-white border-start-0 small">{{ site_settings.currency_symbol }}</span>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mb-3 pt-2 border-top">
                        <span class="fw-bold fs-5">{% trans "Total" %}</span>
                        <span class="fw-bold fs-5 text-primary" id="totalAmount">{{ site_settings.currency_symbol }}0.000</span>
                    </div>
                    
                    <div class="row g-2">
                        <div class="col-9">
                            <button id="payNowBtn" class="btn btn-primary w-100 py-3 fw-bold rounded-3 shadow-none" onclick="checkout()" disabled>
                                {% trans "PAY NOW" %}
                            </button>
                        </div>
                        <div class="col-3">
                            <button id="holdBtn" class="btn btn-warning w-100 py-3 fw-bold rounded-3 shadow-none" onclick="holdSale()" disabled title="{% trans 'Hold Order' %}">
                                <i class="bi bi-pause-fill fs-4"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Mobile View Cart FAB -->
    <button class="btn btn-primary mobile-cart-toggle shadow-lg" onclick="toggleMobileCart()">
        <i class="bi bi-cart-fill me-2"></i>
        <span>{% trans "View Cart" %}</span>
        <span class="badge bg-white text-primary ms-2 rounded-pill" id="mobileCartCountBadge">0</span>
    </button>
</div>

<!-- Add Customer Modal -->
<div class="modal fade no-print" id="addCustomerModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 pb-0 px-4 pt-4">
                <h5 class="fw-bold">{% trans "Add New Customer" %}</h5>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body px-4">
                <form id="addCustomerForm">
                    <div class="mb-3">
                        <label class="form-label small fw-bold">{% trans "Full Name" %} *</label>
                        <input type="text" name="name" class="form-control shadow-none" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">{% trans "Phone Number" %}</label>
                        <input type="text" name="phone" class="form-control shadow-none">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">{% trans "Email" %}</label>
                        <input type="email" name="email" class="form-control shadow-none">
                    </div>
                </form>
            </div>
            <div class="modal-footer border-0 px-4 pb-4">
                <button type="button" class="btn btn-light rounded-3 px-4" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <button type="button" class="btn btn-primary rounded-3 px-4" onclick="submitQuickCustomer()">{% trans "Save Customer" %}</button>
            </div>
        </div>
    </div>
</div>

<!-- Held Sales Modal -->
<div class="modal fade no-print" id="heldSalesModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 pb-0 px-4 pt-4">
                <h5 class="fw-bold">{% trans "Held Sales" %}</h5>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>{% trans "Time" %}</th>
                                <th>{% trans "Customer" %}</th>
                                <th>{% trans "Items" %}</th>
                                <th>{% trans "Total" %}</th>
                                <th class="text-end">{% trans "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody id="heldSalesList">
                            <!-- Held sales injected here -->
                        </tbody>
                    </table>
                </div>
                <div id="noHeldSalesMsg" class="text-center py-5 text-muted d-none">
                    <i class="bi bi-inbox display-1 d-block mb-3 opacity-25"></i>
                    {% trans "No held sales found" %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Payment Modal -->
<div class="modal fade no-print" id="paymentModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-header border-0 pb-0 px-4 pt-4">
                <h5 class="fw-bold">{% trans "Complete Payment" %}</h5>
                <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <div class="row g-4">
                    <!-- Left: Payment Types -->
                    <div class="col-md-3 border-md-end">
                        <div class="mb-4"><label class="small fw-bold text-muted mb-2 d-block">{% trans "Payment Type" %}</label><div class="d-grid gap-2"><button id="typeCashBtn" class="btn btn-sm btn-primary active rounded-3" onclick="selectPaymentType('cash')">{% trans "Cash" %}</button><button id="typeCreditBtn" class="btn btn-sm btn-outline-primary rounded-3" onclick="selectPaymentType('credit')">{% trans "Credit" %}</button></div></div><label class="small fw-bold text-muted mb-2 d-block" id="paymentMethodLabel">{% trans "Payment Method" %}</label>
                        <div class="row g-2 row-cols-3 row-cols-md-1" id="paymentMethodButtons">
                            {% for method in payment_methods %}
                            <div class="col">
                                <button class="btn btn-outline-primary payment-method-btn w-100 py-2 py-md-3 {% if forloop.first %}active{% endif %}" 
                                        data-id="{{ method.id }}" data-name-en="{{ method.name_en|lower }}" 
                                        onclick="selectPaymentMethod(this, '{{ method.id|unlocalize }}')">
                                    <span class="d-md-block">{{ method.name_ar }}</span>
                                    <small class="fw-normal d-none d-md-block">{{ method.name_en }}</small>
                                </button>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Middle: Details -->
                    <div class="col-md-5">
                        <div class="bg-light p-3 rounded-4 mb-3 text-center">
                            <label class="small text-muted d-block">{% trans "Total Payable" %}</label>
                            <h2 class="fw-bold mb-0 text-primary" id="modalTotalAmount">{{ site_settings.currency_symbol }}0.000</h2>
                        </div>
                        
                        <!-- Loyalty Redemption Section -->
                        <div id="modalLoyaltySection" class="d-none mb-3 p-3 border rounded-4 bg-warning-soft">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="small fw-bold text-muted">{% trans "Redeem Points" %}</label>
                                <span class="small">{% trans "Max" %}: <span id="modalMaxPoints" class="fw-bold">0</span></span>
                            </div>
                            <div class="input-group">
                                <input type="number" id="loyaltyRedeemInput" class="form-control shadow-none" placeholder="0" oninput="calculateLoyaltyDiscount()">
                                <span class="input-group-text bg-white border-start-0 small text-success fw-bold" id="loyaltyValueDisplay">- {{ site_settings.currency_symbol }}0.000</span>
                            </div>
                            <small class="text-muted" style="font-size: 0.65rem;">{% trans "Points to spend for a discount" %}</small>
                        </div>

                        <div class="mb-3">
                            <label class="small fw-bold text-muted mb-1">{% trans "Cash Received" %}</label>
                            <input type="number" id="cashReceivedInput" class="form-control form-control-lg fw-bold text-center shadow-none" 
                                   placeholder="0.000" step="0.001" oninput="calculateBalance()">
                        </div>

                        <div class="bg-light p-3 rounded-4 text-center">
                            <label class="small text-muted d-block">{% trans "Balance / Change" %}</label>
                            <h2 class="fw-bold mb-0 text-success" id="balanceAmount">{{ site_settings.currency_symbol }}0.000</h2>
                        </div>
                    </div>

                    <!-- Right: Quick Cash Buttons -->
                    <div class="col-md-4">
                        <label class="small fw-bold text-muted mb-2 d-block">{% trans "Quick Cash" %}</label>
                        <div class="row g-2 mb-3">
                            <div class="col-4 col-md-6"><button class="btn btn-light w-100 py-3 fw-bold border" onclick="addCash(1)">1</button></div>
                            <div class="col-4 col-md-6"><button class="btn btn-light w-100 py-3 fw-bold border" onclick="addCash(5)">5</button></div>
                            <div class="col-4 col-md-6"><button class="btn btn-light w-100 py-3 fw-bold border" onclick="addCash(10)">10</button></div>
                            <div class="col-4 col-md-6"><button class="btn btn-light w-100 py-3 fw-bold border" onclick="addCash(20)">20</button></div>
                            <div class="col-8 col-md-12"><button class="btn btn-light w-100 py-3 fw-bold border" onclick="addCash(50)">50</button></div>
                        </div>
                        <button class="btn btn-secondary w-100 mb-2 py-2" onclick="setExactAmount()">{% trans "Exact Amount" %}</button>
                        <button class="btn btn-danger w-100 py-2" onclick="clearCash()">{% trans "Clear Cash" %}</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 px-4 pb-4">
                <button type="button" class="btn btn-light rounded-3 px-4" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <button type="button" id="confirmPaymentBtn" class="btn btn-primary rounded-3 px-5 py-2 fw-bold" onclick="processPayment()">
                    {% trans "CONFIRM & PRINT" %}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Invoice Template (Hidden) -->
<div id="invoice-print">
    <div class="invoice-header">
        <div id="inv-logo-container" class="mb-2">
            <img id="inv-logo" src="" alt="Logo" style="max-height: 50px; display: none;">
        </div>
        <div class="invoice-title" id="inv-business-name"></div>
        <div class="bilingual"><span class="ltr">TAX INVOICE</span><span class="rtl">فاتورة ضريبية</span></div>
        <div id="inv-business-address" style="font-size: 10px;"></div>
        <div id="inv-business-phone" style="font-size: 10px;"></div>
        <div id="inv-business-email" style="font-size: 10px;"></div>
        <div class="mt-1" style="border-top: 1px solid #eee; padding-top: 2px;">
            <div class="bilingual">
                <span>VAT No / الرقم الضريبي:</span>
                <span id="inv-vat-no"></span>
            </div>
            <div class="bilingual">
                <span>CR No / السجل التجاري:</span>
                <span id="inv-cr-no"></span>
            </div>
        </div>
    </div>
    <div class="invoice-details">
        <div class="d-flex justify-content-between">
            <span>Inv #: <span id="inv-id"></span></span>
            <span class="rtl">رقم الفاتورة: <span id="inv-id-ar"></span></span>
        </div>
        <div class="d-flex justify-content-between">
            <span>Date: <span id="inv-date"></span></span>
            <span class="rtl">التاريخ: <span id="inv-date-ar"></span></span>
        </div>
        <div class="d-flex justify-content-between">
            <span>Customer: <span id="inv-customer"></span></span>
        </div>
    </div>
    <table class="invoice-table">
        <thead>
            <tr>
                <th>Item / الصنف</th>
                <th style="text-align: center;">Qty</th>
                <th style="text-align: right;">Total</th>
            </tr>
        </thead>
        <tbody id="inv-items">
            <!-- Items injected here -->
        </tbody>
    </table>
    <div class="invoice-total">
         <div class="d-flex justify-content-between">
            <span>Subtotal / المجموع الفرعي</span>
            <span id="inv-subtotal"></span>
        </div>
        <div class="d-flex justify-content-between">
            <span>VAT / الضريبة</span>
            <span id="inv-vat"></span>
        </div>
         <div class="d-flex justify-content-between">
            <span>Discount / الخصم</span>
            <span id="inv-discount"></span>
        </div>
        <div class="d-flex justify-content-between fw-bold" style="border-top: 1px solid #000; margin-top: 2px; padding-top: 2px;">
            <span>TOTAL / المجموع النهائي</span>
            <span id="inv-total"></span>
        </div>
    </div>
    <div class="text-center mt-3" style="font-size: 10px; border-top: 1px dashed #000; padding-top: 5px;">
        THANK YOU / شكراً لزيارتكم
    </div>
</div>

<!-- Receipt Modal -->
<div class="modal fade no-print" id="receiptModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <div class="modal-body text-center p-4">
                <i class="bi bi-check-circle-fill text-success display-1 mb-3"></i>
                <h4 class="fw-bold">{% trans "Success!" %}</h4>
                <p class="text-muted">{% trans "Transaction completed." %}</p>
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-primary rounded-3" onclick="printInvoice()">
                        <i class="bi bi-printer me-2"></i> {% trans "Print Invoice" %}
                    </button>
                    {% if settings.wablas_enabled or site_settings.wablas_enabled %}
                    <button type="button" class="btn btn-outline-success rounded-3" onclick="goToWhatsApp()">
                        <i class="bi bi-whatsapp me-2"></i> {% trans "Send via WhatsApp" %}
                    </button>
                    {% endif %}
                    <button type="button" class="btn btn-outline-secondary rounded-3" data-bs-dismiss="modal">{% trans "Close" %}</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{% localize off %}
<script>
    let cart = [];
    const posChannel = new BroadcastChannel('pos_channel');

    // Listen for requests from the customer display (BroadcastChannel)
    posChannel.onmessage = (event) => {
        if (event.data.type === 'request_state') {
            broadcastCart();
        }
    };

    // Listen for direct messages from the popup (fallback for iframe restrictions)
    window.addEventListener('message', (event) => {
        if (event.data && event.data.type === 'request_state') {
            // Reply directly to the source window
            broadcastCart(event.source);
        }
    });

    // Force sync when returning to this tab
    window.addEventListener('focus', () => {
        broadcastCart();
    });

    function openCustomerDisplay() {
        const win = window.open('{% url "customer_display" %}', 'CustomerDisplay', 'width=1000,height=800,menubar=no,toolbar=no,location=no,status=no');
        // Give it a moment to load and then force push data
        setTimeout(() => broadcastCart(), 1000);
        setTimeout(() => broadcastCart(), 3000);
    }

    function broadcastCart(targetWindow = null) {
        const subtotal = cart.reduce((acc, item) => acc + item.line_total, 0);
        const totalVat = cart.reduce((acc, item) => acc + (item.line_total * (item.vat_rate / 100)), 0);
        const discount = parseFloat(document.getElementById('discountInput').value) || 0;
        
        const total = Math.max(0, subtotal + totalVat - discount);
        
        const payload = {
            type: 'update',
            items: cart,
            subtotal: subtotal,
            vat: totalVat,
            discount: discount,
            total: total,
            timestamp: Date.now()
        };

        // 1. Broadcast Channel (Primary, Real-time)
        posChannel.postMessage(payload);

        // 2. Local Storage (Backup/Sync)
        localStorage.setItem('pos_cart_state', JSON.stringify(payload));
        
        // 3. Direct PostMessage (Fallback if target window requested it)
        if (targetWindow) {
            targetWindow.postMessage(payload, '*');
        }
    }
    
    // Heartbeat: Ensure customer display stays in sync even if events are missed
    setInterval(() => {
        if (cart.length > 0) {
            broadcastCart();
        }
    }, 3000);

    let lastSaleData = null;
    let selectedPaymentMethodId = null;
    let customerLoyalty = null;
    const lang = '{{ LANGUAGE_CODE|escapejs }}';
    const currency = '{{ site_settings.currency_symbol|escapejs }}';
    const decimalPlaces = {{ site_settings.decimal_places|default:3 }};
    const loyaltyEnabled = {{ settings.loyalty_enabled|yesno:"true,false" }};

    function formatAmount(amount) {
        return parseFloat(amount).toFixed(decimalPlaces);
    }

    function toggleMobileCart() {
        const cart = document.getElementById('posCart');
        cart.classList.toggle('show');
        document.body.classList.toggle('cart-open');
    }

    function addToCart(id, nameEn, nameAr, price, vatRate) {
        const existing = cart.find(item => item.id === id);
        if (existing) {
            existing.quantity += 1;
            existing.line_total = existing.quantity * price;
        } else {
            cart.push({
                id,
                name_en: nameEn || '',
                name_ar: nameAr || nameEn || '',
                price,
                vat_rate: vatRate,
                quantity: 1,
                line_total: price
            });
        }
        renderCart();
    }

    function updateQuantity(id, delta) {
        const item = cart.find(item => item.id === id);
        if (item) {
            item.quantity += delta;
            if (item.quantity <= 0) {
                cart = cart.filter(i => i.id !== id);
            } else {
                item.line_total = item.quantity * item.price;
            }
        }
        renderCart();
    }

    function clearCart(confirmRequired = true) {
        if (cart.length === 0) return;
        if (!confirmRequired || confirm('{% trans "Are you sure you want to clear the current order?" %}')) {
            cart = [];
            document.getElementById('discountInput').value = 0;
            renderCart();
        }
    }

    function updateTotals() {
        const subtotal = cart.reduce((acc, item) => acc + item.line_total, 0);
        const totalVat = cart.reduce((acc, item) => acc + (item.line_total * (item.vat_rate / 100)), 0);
        const discount = parseFloat(document.getElementById('discountInput').value) || 0;
        const total = Math.max(0, subtotal + totalVat - discount);

        document.getElementById('subtotalAmount').innerText = `${currency} ${formatAmount(subtotal)}`;
        document.getElementById('taxAmount').innerText = `${currency} ${formatAmount(totalVat)}`;
        document.getElementById('totalAmount').innerText = `${currency} ${formatAmount(total)}`;
        broadcastCart();
    }

    function renderCart() {
        const listContainer = document.getElementById('cartItemsList');
        const emptyMsg = document.getElementById('emptyCartMsg');
        const payBtn = document.getElementById('payNowBtn');
        const holdBtn = document.getElementById('holdBtn');
        const mobileBadge = document.getElementById('mobileCartCountBadge');
        
        const totalItems = cart.reduce((acc, item) => acc + item.quantity, 0);
        mobileBadge.innerText = totalItems;

        if (cart.length === 0) {
            emptyMsg.classList.remove('d-none');
            listContainer.innerHTML = '';
            updateTotals();
            payBtn.disabled = true;
            holdBtn.disabled = true;
            
            // Clear customer display as well
            posChannel.postMessage({ type: 'clear' });
            localStorage.removeItem('pos_cart_state');
            return;
        }

        emptyMsg.classList.add('d-none');
        payBtn.disabled = false;
        holdBtn.disabled = false;
        let html = '';

        cart.forEach(item => {
            html += `
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div style="flex: 1;">
                        <div class="fw-bold small" dir="rtl">${item.name_ar}</div>
                        <div class="text-muted" style="font-size: 0.7rem;">${item.name_en}</div>
                        <div class="text-muted small">${currency} ${formatAmount(item.price)} x ${parseFloat(item.quantity).toFixed(2)}</div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <button class="btn btn-sm btn-outline-secondary rounded-circle" style="width:24px; height:24px; padding:0; display:flex; align-items:center; justify-content:center;" onclick="updateQuantity(${item.id}, -1)">-</button>
                        <span class="fw-bold small">${parseFloat(item.quantity).toFixed(2)}</span>
                        <button class="btn btn-sm btn-outline-secondary rounded-circle" style="width:24px; height:24px; padding:0; display:flex; align-items:center; justify-content:center;" onclick="updateQuantity(${item.id}, 1)">+</button>
                    </div>
                </div>
            `;
        });

        listContainer.innerHTML = html;
        updateTotals();
    }

    function checkout() {
        if (cart.length === 0) return;
        
        const subtotal = cart.reduce((acc, item) => acc + item.line_total, 0);
        const totalVat = cart.reduce((acc, item) => acc + (item.line_total * (item.vat_rate / 100)), 0);
        const discount = parseFloat(document.getElementById('discountInput').value) || 0;
        const totalAmount = Math.max(0, subtotal + totalVat - discount);

        document.getElementById('modalTotalAmount').innerText = `${currency} ${formatAmount(totalAmount)}`;
        document.getElementById('cashReceivedInput').value = '';
        document.getElementById('balanceAmount').innerText = `${currency} ${formatAmount(0)}`;
        
        // Reset loyalty redemption
        document.getElementById('loyaltyRedeemInput').value = '';
        document.getElementById('loyaltyValueDisplay').innerText = `- ${currency} ${formatAmount(0)}`;
        
        // Show loyalty section if customer has points
        const loyaltySection = document.getElementById('modalLoyaltySection');
        if (customerLoyalty && customerLoyalty.points >= customerLoyalty.min_points_to_redeem) {
            loyaltySection.classList.remove('d-none');
            document.getElementById('modalMaxPoints').innerText = customerLoyalty.points;
        } else {
            loyaltySection.classList.add('d-none');
        }

        // Default to first payment method
        const firstBtn = document.querySelector('.payment-method-btn');
        if (firstBtn) {
            selectPaymentMethod(firstBtn, firstBtn.dataset.id);
        }

        selectPaymentType('cash'); const paymentModal = new bootstrap.Modal(document.getElementById('paymentModal'));
        paymentModal.show();
    }

    function onCustomerChange() {
        const customerId = document.getElementById('customerSelect').value;
        const loyaltyInfo = document.getElementById('loyaltyInfo');
        
        if (!customerId || !loyaltyEnabled) {
            loyaltyInfo.classList.add('d-none');
            customerLoyalty = null;
            return;
        }

        fetch(`/api/customer-loyalty/${customerId}/`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                customerLoyalty = data;
                loyaltyInfo.classList.remove('d-none');
                document.getElementById('loyaltyPointsDisplay').innerText = data.points.toFixed(2);
                
                const badge = document.getElementById('loyaltyTierBadge');
                if (data.tier) {
                    badge.innerText = lang === 'ar' ? data.tier.name_ar : data.tier.name_en;
                    badge.style.backgroundColor = data.tier.color;
                    badge.classList.remove('d-none');
                } else {
                    badge.classList.add('d-none');
                }
            }
        });
    }

    function calculateLoyaltyDiscount() {
        if (!customerLoyalty) return;
        
        let points = parseFloat(document.getElementById('loyaltyRedeemInput').value) || 0;
        if (points > customerLoyalty.points) {
            points = customerLoyalty.points;
            document.getElementById('loyaltyRedeemInput').value = points;
        }
        
        const value = points * customerLoyalty.currency_per_point;
        document.getElementById('loyaltyValueDisplay').innerText = `- ${currency} ${formatAmount(value)}`;
        
        // Update Total Payable
        const subtotal = cart.reduce((acc, item) => acc + item.line_total, 0);
        const totalVat = cart.reduce((acc, item) => acc + (item.line_total * (item.vat_rate / 100)), 0);
        const discount = parseFloat(document.getElementById('discountInput').value) || 0;
        const totalAmount = Math.max(0, subtotal + totalVat - discount - value);
        
        document.getElementById('modalTotalAmount').innerText = `${currency} ${formatAmount(totalAmount)}`;
        calculateBalance();
    }

    let currentPaymentType = 'cash'; function selectPaymentType(type) { const customerId = document.getElementById('customerSelect').value; if (type === 'credit' && !customerId) { alert('{% trans "Credit sales are not allowed for Walking Customers. Please select a customer." %}'); return; } currentPaymentType = type; document.getElementById('typeCashBtn').classList.toggle('active', type === 'cash'); document.getElementById('typeCashBtn').classList.toggle('btn-primary', type === 'cash'); document.getElementById('typeCashBtn').classList.toggle('btn-outline-primary', type !== 'cash'); document.getElementById('typeCreditBtn').classList.toggle('active', type === 'credit'); document.getElementById('typeCreditBtn').classList.toggle('btn-primary', type === 'credit'); document.getElementById('typeCreditBtn').classList.toggle('btn-outline-primary', type !== 'credit'); const isCredit = type === 'credit'; document.getElementById('cashReceivedInput').disabled = isCredit; document.getElementById('paymentMethodButtons').querySelectorAll('button').forEach(btn => btn.disabled = isCredit); if (isCredit) { document.getElementById('cashReceivedInput').value = 0; calculateBalance(); } else { setExactAmount(); } } function selectPaymentMethod(btn, id) {
        document.querySelectorAll('.payment-method-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        selectedPaymentMethodId = id;

        // Auto-fill exact amount for Card and Bank Transfer
        const nameEn = btn.dataset.nameEn ? btn.dataset.nameEn.toLowerCase() : '';
        if (nameEn.includes('card') || nameEn.includes('transfer') || nameEn.includes('bank')) {
            setExactAmount();
        }
    }

    function addCash(amount) {
        const input = document.getElementById('cashReceivedInput');
        const current = parseFloat(input.value) || 0;
        input.value = (current + amount).toFixed(decimalPlaces);
        calculateBalance();
    }

    function setExactAmount() {
        const subtotal = cart.reduce((acc, item) => acc + item.line_total, 0);
        const totalVat = cart.reduce((acc, item) => acc + (item.line_total * (item.vat_rate / 100)), 0);
        const discount = parseFloat(document.getElementById('discountInput').value) || 0;
        const loyaltyRedeem = parseFloat(document.getElementById('loyaltyRedeemInput').value) || 0;
        const loyaltyDiscount = customerLoyalty ? loyaltyRedeem * customerLoyalty.currency_per_point : 0;
        
        const totalAmount = Math.max(0, subtotal + totalVat - discount - loyaltyDiscount);
        
        document.getElementById('cashReceivedInput').value = totalAmount.toFixed(decimalPlaces);
        calculateBalance();
    }

    function clearCash() {
        document.getElementById('cashReceivedInput').value = '';
        calculateBalance();
    }

    function calculateBalance() {
        const subtotal = cart.reduce((acc, item) => acc + item.line_total, 0);
        const totalVat = cart.reduce((acc, item) => acc + (item.line_total * (item.vat_rate / 100)), 0);
        const discount = parseFloat(document.getElementById('discountInput').value) || 0;
        const loyaltyRedeem = parseFloat(document.getElementById('loyaltyRedeemInput').value) || 0;
        const loyaltyDiscount = customerLoyalty ? loyaltyRedeem * customerLoyalty.currency_per_point : 0;
        
        const totalAmount = Math.max(0, subtotal + totalVat - discount - loyaltyDiscount);
        
        const received = parseFloat(document.getElementById('cashReceivedInput').value) || 0;
        const balance = Math.max(0, received - totalAmount);
        
        document.getElementById('balanceAmount').innerText = `${currency} ${formatAmount(balance)}`;
    }

    function processPayment() {
        if (document.getElementById("confirmPaymentBtn").disabled && document.getElementById("confirmPaymentBtn").innerText === "{% trans "Processing..." %}") return;
        const confirmBtn = document.getElementById('confirmPaymentBtn');
        const originalText = confirmBtn.innerText;
        confirmBtn.disabled = true;
        confirmBtn.innerText = '{% trans "Processing..." %}';

        const subtotal = cart.reduce((acc, item) => acc + item.line_total, 0);
        const totalVat = cart.reduce((acc, item) => acc + (item.line_total * (item.vat_rate / 100)), 0);
        const discount = parseFloat(document.getElementById('discountInput').value) || 0;
        const loyaltyRedeem = parseFloat(document.getElementById('loyaltyRedeemInput').value) || 0;
        const loyaltyDiscount = customerLoyalty ? loyaltyRedeem * customerLoyalty.currency_per_point : 0;
        
        const totalAmount = Math.max(0, subtotal + totalVat - discount - loyaltyDiscount);

        const data = {
            customer_id: document.getElementById('customerSelect').value,
            payment_method_id: currentPaymentType === 'cash' ? selectedPaymentMethodId : null,
            items: cart,
            subtotal: subtotal,
            vat_amount: totalVat,
            total_amount: totalAmount,
            paid_amount: currentPaymentType === 'cash' ? totalAmount : 0,
            discount: discount,
            loyalty_points_redeemed: loyaltyRedeem,
            payment_type: currentPaymentType
        };

        fetch('{% url "create_sale_api" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify(data)
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(err => { throw err; });
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                lastSaleData = data;
                prepareInvoice(data);
                
                // Hide payment modal
                const pModalElement = document.getElementById('paymentModal');
                const pModalInstance = bootstrap.Modal.getInstance(pModalElement);
                if (pModalInstance) pModalInstance.hide();

                cart = [];
                document.getElementById('discountInput').value = 0;
                customerLoyalty = null;
                document.getElementById('loyaltyInfo').classList.add('d-none');
                renderCart();
                
                // Show receipt modal
                const receiptModal = new bootstrap.Modal(document.getElementById('receiptModal'));
                receiptModal.show();
                updateHeldCount();
            } else {
                alert('Error: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Checkout error:', error);
            alert('Checkout failed: ' + (error.error || error.message || 'Unknown error'));
        })
        .finally(() => {
            confirmBtn.disabled = false;
            confirmBtn.innerText = originalText;
        });
    }

    function prepareInvoice(data) {
        const logo = document.getElementById('inv-logo');
        if (data.business.logo_url) {
            logo.src = data.business.logo_url;
            logo.style.display = 'inline-block';
        } else {
            logo.style.display = 'none';
        }

        document.getElementById('inv-business-name').innerText = data.business.name || 'Business Name';
        document.getElementById('inv-business-address').innerText = data.business.address || '';
        document.getElementById('inv-business-phone').innerText = data.business.phone ? 'Tel: ' + data.business.phone : '';
        document.getElementById('inv-business-email').innerText = data.business.email ? 'Email: ' + data.business.email : '';
        document.getElementById('inv-vat-no').innerText = data.business.vat_number || '---';
        document.getElementById('inv-cr-no').innerText = data.business.registration_number || '---';
        
        document.getElementById('inv-id').innerText = data.sale.id;
        document.getElementById('inv-id-ar').innerText = data.sale.id;
        document.getElementById('inv-date').innerText = data.sale.created_at;
        document.getElementById('inv-date-ar').innerText = data.sale.created_at;
        document.getElementById('inv-customer').innerText = data.sale.customer_name || 'Guest';

        let itemsHtml = '';
        data.sale.items.forEach(item => {
            itemsHtml += `
                <tr>
                    <td>
                        <div class="rtl">${item.name_ar}</div>
                        <div class="text-muted" style="font-size: 9px;">${item.name_en}</div>
                    </td>
                    <td style="text-align: center;">${parseFloat(item.qty).toFixed(2)}</td>
                    <td style="text-align: right;">${data.business.currency} ${formatAmount(item.total)}</td>
                </tr>
            `;
        });
        document.getElementById('inv-items').innerHTML = itemsHtml;
        
        document.getElementById('inv-subtotal').innerText = data.business.currency + ' ' + formatAmount(data.sale.subtotal);
        document.getElementById('inv-vat').innerText = data.business.currency + ' ' + formatAmount(data.sale.vat_amount);
        document.getElementById('inv-discount').innerText = data.business.currency + ' ' + formatAmount(data.sale.discount);
        document.getElementById('inv-total').innerText = data.business.currency + ' ' + formatAmount(data.sale.total);
    }

    function goToWhatsApp() {
        if (lastSaleData && lastSaleData.sale_id) {
            window.location.href = "/invoices/" + lastSaleData.sale_id + "/?created=true";
        }
    }

    function printInvoice() {
        window.print();
    }

    function submitQuickCustomer() {
        const form = document.getElementById('addCustomerForm');
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        if (!data.name) {
            alert('{% trans "Customer name is required" %}');
            return;
        }

        fetch('{% url "add_customer_ajax" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const select = document.getElementById('customerSelect');
                const option = new Option(data.name, data.id, true, true);
                select.add(option);
                onCustomerChange();
                
                // Close modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('addCustomerModal'));
                modal.hide();
                form.reset();
            } else {
                alert(data.error || 'Error adding customer');
            }
        })
        .catch(error => console.error('Error:', error));
    }

    // Held Sales Logic
    function holdSale() {
        if (cart.length === 0) return;
        
        const subtotal = cart.reduce((acc, item) => acc + item.line_total, 0);
        const totalVat = cart.reduce((acc, item) => acc + (item.line_total * (item.vat_rate / 100)), 0);
        const discount = parseFloat(document.getElementById('discountInput').value) || 0;
        const totalAmount = Math.max(0, subtotal + totalVat - discount);

        const data = {
            customer_id: document.getElementById('customerSelect').value,
            items: cart,
            total_amount: totalAmount,
            notes: ""
        };

        fetch('{% url "hold_sale_api" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                clearCart(false);
                updateHeldCount();
                if (document.getElementById('posCart').classList.contains('show')) {
                    toggleMobileCart();
                }
            } else {
                alert('Error holding sale: ' + data.error);
            }
        })
        .catch(error => console.error('Error:', error));
    }

    function updateHeldCount() {
        fetch('{% url "get_held_sales_api" %}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const badge = document.getElementById('heldCountBadge');
                if (data.held_sales.length > 0) {
                    badge.innerText = data.held_sales.length;
                    badge.classList.remove('d-none');
                } else {
                    badge.classList.add('d-none');
                }
            }
        });
    }

    function loadHeldSales() {
        const listContainer = document.getElementById('heldSalesList');
        const emptyMsg = document.getElementById('noHeldSalesMsg');
        listContainer.innerHTML = '<tr><td colspan="5" class="text-center">{% trans "Loading..." %}</td></tr>';

        fetch('{% url "get_held_sales_api" %}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                if (data.held_sales.length === 0) {
                    listContainer.innerHTML = '';
                    emptyMsg.classList.remove('d-none');
                    return;
                }
                emptyMsg.classList.add('d-none');
                let html = '';
                data.held_sales.forEach(sale => {
                    html += `
                        <tr>
                            <td class="small">${sale.created_at}</td>
                            <td class="fw-bold">${sale.customer_name}</td>
                            <td><span class="badge bg-secondary rounded-pill">${sale.items_count}</span></td>
                            <td class="fw-bold text-primary">${currency} ${formatAmount(sale.total_amount)}</td>
                            <td class="text-end">
                                <button class="btn btn-sm btn-primary rounded-3 px-3 me-1" onclick="recallHeldSale(${sale.id})">
                                    <i class="bi bi-arrow-repeat me-1"></i> {% trans "Recall" %}
                                </button>
                                <button class="btn btn-sm btn-outline-danger rounded-3" onclick="deleteHeldSale(${sale.id})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </td>
                        </tr>
                    `;
                });
                listContainer.innerHTML = html;
            }
        })
        .catch(error => console.error('Error:', error));
    }

    function recallHeldSale(id) {
        if (cart.length > 0) {
            if (!confirm('{% trans "The current cart is not empty. Recalling a held sale will clear current items. Continue?" %}')) {
                return;
            }
        }

        fetch(`/api/recall-held-sale/${id}/`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                cart = data.items;
                document.getElementById('customerSelect').value = data.customer_id || "";
                document.getElementById('customerSearchInput').value = data.customer_name || "";
                document.getElementById('clearCustomerBtn').style.display = data.customer_id ? 'block' : 'none';
                renderCart();
                onCustomerChange();
                updateHeldCount();
                
                // Close modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('heldSalesModal'));
                modal.hide();
                
                // On mobile, show the cart automatically when recalled
                if (!document.getElementById('posCart').classList.contains('show') && window.innerWidth < 992) {
                    toggleMobileCart();
                }
            } else {
                alert('Error recalling sale: ' + data.error);
            }
        })
        .catch(error => console.error('Error:', error));
    }

    function deleteHeldSale(id) {
        if (!confirm('{% trans "Are you sure you want to delete this held sale?" %}')) return;

        fetch(`/api/delete-held-sale/${id}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                loadHeldSales();
                updateHeldCount();
            }
        });
    }

    // Initial load
    updateHeldCount();

    // Search and Category Filtering
    document.getElementById('productSearch').addEventListener('input', filterProducts);
    document.querySelectorAll('.category-badge').forEach(badge => {
        badge.addEventListener('click', function() {
            document.querySelectorAll('.category-badge').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            filterProducts();
        });
    });

    function filterProducts() {
        const searchTerm = document.getElementById('productSearch').value.toLowerCase();
        const activeCategory = document.querySelector('.category-badge.active').dataset.category;
        
        document.querySelectorAll('.product-item').forEach(item => {
            const nameEn = item.dataset.nameEn;
            const nameAr = item.dataset.nameAr;
            const category = item.dataset.category;
            
            const matchesSearch = nameEn.includes(searchTerm) || nameAr.includes(searchTerm);
            const matchesCategory = activeCategory === 'all' || category === activeCategory;
            
            if (matchesSearch && matchesCategory) {
                item.classList.remove('d-none');
            } else {
                item.classList.add('d-none');
            }
        });
    }
// Customer Search Logic
let searchTimeout;

document.getElementById('customerSearchInput').addEventListener('input', function(e) {
    const query = e.target.value.trim();
    const resultsContainer = document.getElementById('customerSearchResults');
    const clearBtn = document.getElementById('clearCustomerBtn');
    
    if (query.length > 0) {
        clearBtn.style.display = 'block';
    } else {
        clearBtn.style.display = 'none';
        resultsContainer.classList.add('d-none');
        return;
    }

    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        fetch(`{% url 'search_customers_api' %}?q=${encodeURIComponent(query)}`)
            .then(res => res.json())
            .then(data => {
                resultsContainer.innerHTML = '';
                if (data.results.length > 0) {
                    data.results.forEach(c => {
                        const item = document.createElement('button');
                        item.className = 'list-group-item list-group-item-action py-2 text-start';
                        item.innerHTML = `
                            <div>
                                <div class="fw-bold small">${c.name}</div>
                                <div class="text-muted" style="font-size: 0.7rem;">${c.phone || ''}</div>
                            </div>
                        `;
                        item.onclick = () => selectCustomer(c.id, c.name);
                        resultsContainer.appendChild(item);
                    });
                    resultsContainer.classList.remove('d-none');
                } else {
                    resultsContainer.innerHTML = '<div class="list-group-item text-muted small">{% trans "No results found" %}</div>';
                    resultsContainer.classList.remove('d-none');
                }
            });
    }, 300);
});

function selectCustomer(id, name) {
    document.getElementById('customerSelect').value = id;
    document.getElementById('customerSearchInput').value = name;
    document.getElementById('customerSearchResults').classList.add('d-none');
    document.getElementById('clearCustomerBtn').style.display = 'block';
    onCustomerChange();
}

function clearCustomerSelection() {
    document.getElementById('customerSelect').value = '';
    document.getElementById('customerSearchInput').value = '';
    document.getElementById('customerSearchResults').classList.add('d-none');
    document.getElementById('clearCustomerBtn').style.display = 'none';
    onCustomerChange();
}

document.addEventListener('click', function(e) {
    const container = document.getElementById('customerSearchResults');
    const input = document.getElementById('customerSearchInput');
    const clearBtn = document.getElementById('clearCustomerBtn');
    if (container && !container.contains(e.target) && e.target !== input && e.target !== clearBtn) {
        container.classList.add('d-none');
    }
});
</script>
{% endlocalize %}
{% endblock %}