1570 lines
68 KiB
HTML
1570 lines
68 KiB
HTML
{% 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');
|
|
|
|
// Safety check
|
|
if (!data.business) {
|
|
console.warn("Invoice Error: data.business is missing", data);
|
|
data.business = {}; // Prevent crashes
|
|
}
|
|
|
|
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 %} |