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

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

{% block head %}
<style>
    /* Full Screen POS Layout Overrides */
    :root {
        --pos-cart-width: 420px;
        --pos-bg: #f1f5f9;
        --pos-card-bg: #ffffff;
        --pos-accent: var(--bs-primary);
    }

    /* Hide default main padding to allow full-screen layout */
    main {
        padding: 0 !important;
        height: calc(100vh - 76px); /* Approx navbar height */
        overflow: hidden;
    }
    
    /* In case sidebar is present, ensure we handle it */
    #content {
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* POS Container */
    .pos-layout {
        display: flex;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    /* Left Side: Products */
    .pos-products-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: var(--pos-bg);
        overflow: hidden;
        position: relative;
    }

    .pos-products-header {
        padding: 1rem 1.5rem;
        background: white;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        display: flex;
        gap: 1rem;
        align-items: center;
        flex-shrink: 0;
    }

    .pos-categories-bar {
        padding: 0.5rem 1.5rem;
        background: white;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        overflow-x: auto;
        white-space: nowrap;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
        flex-shrink: 0;
    }
    .pos-categories-bar::-webkit-scrollbar {
        display: none;
    }

    .pos-products-grid-container {
        flex: 1;
        padding: 1.5rem;
        overflow-y: auto;
    }

    /* Product Card Styling */
    .product-card {
        background: var(--pos-card-bg);
        border: 1px solid transparent;
        border-radius: 16px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative;
        height: 100%;
    }
    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
        border-color: rgba(var(--bs-primary-rgb), 0.2);
    }
    .product-card:active {
        transform: scale(0.98);
    }
    .product-image-container {
        height: 120px;
        width: 100%;
        overflow: hidden;
        background: #f8f9fa;
        position: relative;
    }
    .product-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;
    }
    .product-card:hover .product-image-container img {
        transform: scale(1.05);
    }
    .product-price-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(255, 255, 255, 0.95);
        padding: 4px 10px;
        border-radius: 20px;
        font-weight: 800;
        color: var(--pos-accent);
        font-size: 0.85rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* Right Side: Cart */
    .pos-cart-section {
        width: var(--pos-cart-width);
        background: white;
        border-left: 1px solid rgba(0,0,0,0.08);
        display: flex;
        flex-direction: column;
        height: 100%;
        box-shadow: -5px 0 25px rgba(0,0,0,0.03);
        z-index: 100;
        flex-shrink: 0;
    }
    
    .pos-cart-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        background: white;
        flex-shrink: 0;
    }

    .pos-cart-items-area {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
    }

    .cart-item-row {
        background: #fff;
        border-radius: 12px;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #f0f0f0;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .cart-item-row:hover {
        border-color: var(--bs-primary);
        background: #f8f9fa;
    }

    .pos-cart-footer {
        background: #fff;
        padding: 1.5rem;
        border-top: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 -5px 20px rgba(0,0,0,0.02);
        flex-shrink: 0;
    }

    /* Category Badges (Pill Style) */
    .nav-pills .nav-link {
        color: #6c757d;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 50px;
        padding: 0.5rem 1.25rem;
        font-size: 0.9rem;
        margin-right: 0.5rem;
        font-weight: 600;
        transition: all 0.2s;
    }
    .nav-pills .nav-link.active {
        background-color: var(--pos-accent);
        color: white;
        border-color: var(--pos-accent);
        box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
    }
    .nav-pills .nav-link:hover:not(.active) {
        background-color: #f8f9fa;
        color: #212529;
    }

    /* Input Styling */
    .search-input {
        border: 2px solid transparent;
        background: #fff;
        border-radius: 50px;
        padding-left: 1.25rem;
        transition: all 0.2s;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .search-input:focus {
        border-color: var(--pos-accent);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.1);
    }

    /* Mobile Responsive */
    @media (max-width: 991px) {
        .pos-cart-section {
            position: fixed;
            top: 0;
            right: -100%;
            width: 100%;
            height: 100%;
            transition: right 0.3s ease;
            z-index: 1050;
        }
        .pos-cart-section.show {
            right: 0;
        }
        [dir="rtl"] .pos-cart-section {
            right: auto;
            left: -100%;
            transition: left 0.3s ease;
        }
        [dir="rtl"] .pos-cart-section.show {
            left: 0;
        }
        main {
            height: calc(100vh - 60px); /* Smaller navbar on mobile */
        }
    }

    /* Quantity Control Buttons */
    .qty-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid #dee2e6;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        color: #495057;
        transition: all 0.1s;
    }
    .qty-btn:hover {
        background: var(--pos-accent);
        color: white;
        border-color: var(--pos-accent);
    }
    .qty-btn:active {
        transform: scale(0.9);
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    /* 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;
        }
    }

    #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="pos-layout no-print">
    <!-- LEFT PANEL: Products & Search -->
    <div class="pos-products-section">
        <!-- Top Bar: Title & Actions -->
        <div class="pos-products-header justify-content-between">
            <div>
                <h4 class="fw-bold mb-0">{% trans "Point of Sale" %}</h4>
                <small class="text-muted">{% now "l, j F Y" %}</small>
            </div>
            <div class="d-flex gap-2">
                {% if active_session %}
                <a href="{% url 'close_session' %}" class="btn btn-danger border shadow-sm rounded-pill px-3" title="{% trans 'Close Session' %}">
                    <i class="bi bi-door-closed"></i> <span class="d-none d-md-inline ms-1 small fw-bold">{% trans "Close" %}</span>
                </a>
                {% endif %}
                <button class="btn btn-light border shadow-sm rounded-pill px-3" onclick="openCustomerDisplay()" title="{% trans 'Open Customer Screen' %}">
                    <i class="bi bi-display text-primary"></i> <span class="d-none d-md-inline ms-1 small fw-bold">{% trans "Screen" %}</span>
                </button>
                <button class="btn btn-light border shadow-sm rounded-pill px-3" onclick="broadcastCartUpdate()" title="{% trans 'Force Sync' %}">
                    <i class="bi bi-arrow-repeat text-warning"></i> <span class="d-none d-md-inline ms-1 small fw-bold">{% trans "Sync" %}</span>
                </button>
            </div>
        </div>

        <!-- Search & Filter Bar -->
        <div class="pos-products-header pt-0 border-bottom-0 pb-2">
            <div class="position-relative w-100">
                <i class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
                <input type="text" id="productSearch" class="form-control form-control-lg search-input ps-5 shadow-sm" placeholder="{% trans 'Search products by name or barcode...' %}">
            </div>
        </div>

        <!-- Categories Strip -->
        <div class="pos-categories-bar">
            <div class="nav nav-pills flex-nowrap" id="categoryTabs" role="tablist">
                <button class="nav-link active category-badge" data-category="all">{% trans "All Items" %}</button>
                {% for category in categories %}
                <button class="nav-link category-badge" data-category="{{ category.id }}">
                    {{ category.name_ar }} / {{ category.name_en }}
                </button>
                {% endfor %}
            </div>
        </div>

        <!-- Scrollable Product Grid -->
        <div class="pos-products-grid-container custom-scrollbar">
            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3" 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="product-card shadow-sm" 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 }})">
                        <div class="product-image-container">
                             {% if product.image %}
                            <img src="{{ product.image.url }}" alt="{{ product.name_en }}">
                            {% else %}
                            <div class="d-flex align-items-center justify-content-center h-100 bg-light text-muted">
                                <i class="bi bi-image fs-1 opacity-25"></i>
                            </div>
                            {% endif %}
                        </div>
                        <div class="product-price-badge">
                            {{ site_settings.currency_symbol }}{{ product.price|floatformat:decimal_places }}
                        </div>
                        <div class="p-3 text-center">
                            <h6 class="fw-bold mb-1 text-truncate" dir="rtl">{{ product.name_ar }}</h6>
                            <small class="text-muted d-block text-truncate mb-2">{{ product.name_en }}</small>
                            <span class="badge bg-light text-secondary border rounded-pill fw-normal">{% trans "Stock" %}: {{ product.stock_quantity }}</span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- RIGHT PANEL: Cart -->
    <div class="pos-cart-section" id="posCart">
        <!-- Cart Header -->
        <div class="pos-cart-header 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>
                 <button class="btn btn-sm btn-light text-danger border-0 rounded-pill px-3" onclick="clearCart()">
                    <i class="bi bi-trash me-1"></i> {% trans "Clear" %}
                </button>
            </div>
        </div>

        <!-- Customer Selector (Fixed at top of cart) -->
        <div class="px-4 py-3 border-bottom bg-light">
             <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">
                        <span class="input-group-text bg-white border-end-0 rounded-start-pill ps-3"><i class="bi bi-person text-muted"></i></span>
                        <input type="text" id="customerSearchInput" class="form-control border-start-0 rounded-end-pill shadow-none" placeholder="{% trans 'Customer...' %}" autocomplete="off">
                        <button class="btn btn-link position-absolute end-0 top-50 translate-middle-y text-muted text-decoration-none z-3 pe-3" type="button" onclick="clearCustomerSelection()" id="clearCustomerBtn" style="display:none;"><i class="bi bi-x-circle-fill"></i></button>
                    </div>
                    <div id="customerSearchResults" class="list-group position-absolute w-100 shadow-lg mt-1 rounded-3 overflow-hidden d-none" style="z-index: 1050; max-height: 250px; overflow-y: auto;"></div>
                </div>
                <button class="btn btn-primary shadow-sm rounded-circle d-flex align-items-center justify-content-center" style="width: 38px; height: 38px;" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                    <i class="bi bi-plus-lg"></i>
                </button>
            </div>
            
            <!-- Loyalty Info -->
            <div id="loyaltyInfo" class="d-none mt-2 p-2 bg-white rounded-3 border border-warning-subtle d-flex justify-content-between align-items-center">
                 <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-star-fill text-warning"></i>
                    <span id="loyaltyTierBadge" class="badge bg-warning text-dark rounded-pill"></span>
                 </div>
                 <div class="small fw-bold">
                    <span id="loyaltyPointsDisplay">0</span> {% trans "Pts" %}
                 </div>
            </div>
            
             <div class="d-flex justify-content-between align-items-center mt-2">
                <button class="btn btn-sm btn-outline-secondary border-0 small py-0" onclick="loadHeldSales()" data-bs-toggle="modal" data-bs-target="#heldSalesModal">
                    <i class="bi bi-clock-history me-1"></i> {% trans "Held Orders" %}
                    <span id="heldCountBadge" class="badge bg-danger rounded-pill ms-1 d-none">0</span>
                </button>
                <div id="syncIndicator" class="sync-indicator badge bg-success-subtle text-success border border-success-subtle rounded-pill">
                    <i class="bi bi-check2-circle me-1"></i> {% trans "Syncing" %}
                </div>
            </div>
        </div>

        <!-- Cart Items (Scrollable) -->
        <div class="pos-cart-items-area custom-scrollbar" id="cartItemsList">
            <!-- Items injected via JS -->
        </div>
        
        <!-- Empty State -->
        <div id="emptyCartMsg" class="d-flex flex-column align-items-center justify-content-center h-50 text-muted opacity-50">
            <i class="bi bi-basket3 display-1 mb-3"></i>
            <p>{% trans "Cart is empty" %}</p>
        </div>

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

<!-- Modals (Add Customer, Held Sales, Payment, Receipt) -->
<!-- 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 = [];
    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" }};
    const syncIndicator = document.getElementById('syncIndicator');

    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,
                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();
            broadcastClear();
        }
    }

    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)}`;
        broadcastCartUpdate();
    }

    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');
            emptyMsg.classList.add('d-flex');
            listContainer.innerHTML = '';
            updateTotals();
            payBtn.disabled = true;
            holdBtn.disabled = true;
            return;
        }

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

        cart.forEach(item => {
            html += `
                <div class="cart-item-row slide-in-bottom">
                    <div class="flex-grow-1 overflow-hidden me-2">
                        <div class="fw-bold text-dark text-truncate" dir="rtl">${item.name_ar}</div>
                        <div class="text-muted small text-truncate" style="font-size: 0.75rem;">${item.name_en}</div>
                        <div class="text-primary fw-bold" style="font-size: 0.85rem;">${currency} ${formatAmount(item.line_total)}</div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <button class="qty-btn" onclick="updateQuantity(${item.id}, -1)"><i class="bi bi-dash"></i></button>
                        <span class="fw-bold" style="min-width: 25px; text-align: center;">${parseFloat(item.quantity).toFixed(0)}</span>
                        <button class="qty-btn" onclick="updateQuantity(${item.id}, 1)"><i class="bi bi-plus"></i></button>
                    </div>
                </div>
            `;
        });

        listContainer.innerHTML = html;
        updateTotals();
        
        // Auto scroll to bottom
        listContainer.scrollTop = listContainer.scrollHeight;
    }

    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();
            broadcastClear();
                
                // 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();
            broadcastClear();
                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);
    
    // Updated Logic for new Pill buttons
    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');
    }
});

    // Customer Display Logic
    let customerDisplayWindow = null;
    const displayChannel = new BroadcastChannel('pos_channel');
    
    // EXPOSE DATA GLOBALLY for window.opener access
    window.lastCartData = null;
    window.getPosCartData = function() {
        return window.lastCartData;
    };

    function openCustomerDisplay() {
        if (customerDisplayWindow && !customerDisplayWindow.closed) {
            customerDisplayWindow.focus();
        } else {
            customerDisplayWindow = window.open('{% url "customer_display" %}', 'CustomerDisplay', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');
            setTimeout(broadcastCartUpdate, 1000);
        }
    }
    
    // NEW: Listen for new clients requesting state
    displayChannel.onmessage = (event) => {
        if (event.data && event.data.type === 'new_client') {
            console.log('[POS] New Client Handshake Received');
            broadcastCartUpdate();
        }
    };

    function broadcastCartUpdate() {
        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);
        
        // Indicate Sync
        syncIndicator.classList.remove('bg-success-subtle', 'text-success');
        syncIndicator.classList.add('bg-success', 'text-white');
        syncIndicator.innerHTML = '<i class="bi bi-arrow-repeat me-1 spin"></i> Syncing';
        
        setTimeout(() => {
            syncIndicator.classList.remove('bg-success', 'text-white');
            syncIndicator.classList.add('bg-success-subtle', 'text-success');
             syncIndicator.innerHTML = '<i class="bi bi-check2-circle me-1"></i> Synced';
        }, 800);
        
        const msg = {
            type: 'update_cart',
            timestamp: Date.now(),
            cart: cart,
            totals: {
                subtotal: subtotal,
                tax: totalVat,
                discount: discount,
                total: total
            }
        };

        // Update Global Data for Direct Link
        window.lastCartData = msg;

        const jsonMsg = JSON.stringify(msg);

        // 1. BroadcastChannel
        try { displayChannel.postMessage(msg); } catch(e) { console.error('BC Error:', e); }
        
        // 2. Direct Window
        if (customerDisplayWindow && !customerDisplayWindow.closed) {
            try {
                customerDisplayWindow.postMessage(msg, '*');
            } catch(e) {}
        }
        
        // 3. LocalStorage
        localStorage.setItem('pos_cart_update', jsonMsg);
        
        // 4. Cookie Fallback (Robust cross-context/iframe sharing)
        try {
            // Encode and set cookie (expires in 1 day)
            // We use 'path=/' to ensure it's visible to the whole app
            document.cookie = "pos_active_cart=" + encodeURIComponent(jsonMsg) + "; path=/; SameSite=Lax";
        } catch(e) {
            console.error('Cookie Set Error:', e);
        }

        // 5. SERVER SYNC (The Fix for Isolated Windows)
        fetch('/api/pos/sync/update/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: jsonMsg
        }).then(r => console.log('[POS] Server Sync:', r.status))
          .catch(e => console.error('[POS] Server Sync Failed:', e));

        console.log('[POS] Cart Broadcast Sent (BC, Win, LS, Cookie, Direct, SERVER)');
    }

    function broadcastClear() {
        const msg = { type: 'clear' };
        
        window.lastCartData = msg;
        
        displayChannel.postMessage(msg);
        if (customerDisplayWindow && !customerDisplayWindow.closed) {
            customerDisplayWindow.postMessage(msg, '*');
        }
        localStorage.setItem('pos_cart_update', JSON.stringify(msg));
        // Clear cookie
        document.cookie = "pos_active_cart=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax";
        
        // Server Clear
        fetch('/api/pos/sync/update/', {
            method: 'POST',
            body: JSON.stringify(msg)
        }).catch(e => console.error('Server Clear Failed', e));
    }

</script>
{% endlocalize %}
{% endblock %}