1087 lines
50 KiB
HTML
1087 lines
50 KiB
HTML
{% 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>
|
|
<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 }})">
|
|
{% 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">
|
|
<select id="customerSelect" class="form-select form-select-sm shadow-none" onchange="onCustomerChange()">
|
|
<option value="">{% trans "Walking Customer" %}</option>
|
|
{% for customer in customers %}
|
|
<option value="{{ customer.id }}">{{ customer.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<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 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>
|
|
<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 fw-bold">
|
|
<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" }};
|
|
|
|
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) {
|
|
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,
|
|
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 discount = parseFloat(document.getElementById('discountInput').value) || 0;
|
|
const total = Math.max(0, subtotal - discount);
|
|
|
|
document.getElementById('subtotalAmount').innerText = `${currency} ${formatAmount(subtotal)}`;
|
|
document.getElementById('totalAmount').innerText = `${currency} ${formatAmount(total)}`;
|
|
}
|
|
|
|
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;
|
|
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 discount = parseFloat(document.getElementById('discountInput').value) || 0;
|
|
const totalAmount = Math.max(0, subtotal - 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 discount = parseFloat(document.getElementById('discountInput').value) || 0;
|
|
const totalAmount = Math.max(0, subtotal - 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 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 - 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 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 - 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 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 - discount - loyaltyDiscount);
|
|
|
|
const data = {
|
|
customer_id: document.getElementById('customerSelect').value,
|
|
payment_method_id: currentPaymentType === 'cash' ? selectedPaymentMethodId : null,
|
|
items: cart,
|
|
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;
|
|
|
|
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-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 discount = parseFloat(document.getElementById('discountInput').value) || 0;
|
|
const totalAmount = Math.max(0, subtotal - 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 || "";
|
|
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');
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
{% endlocalize %}
|
|
{% endblock %} |