402 lines
21 KiB
HTML
402 lines
21 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Sales Invoice" %} #{{ sale.invoice_number|default:sale.id }} | {{ settings.business_name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container py-4">
|
|
<!-- Action Bar -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4 d-print-none flex-wrap gap-3">
|
|
<a href="{% url 'invoices' %}" class="btn btn-light rounded-3">
|
|
<i class="bi bi-arrow-left me-2"></i>{% trans "Back to Invoices" %} / العودة إلى الفواتير
|
|
</a>
|
|
<div class="d-flex gap-2 align-items-center">
|
|
{% if settings.wablas_enabled or site_settings.wablas_enabled %}
|
|
<div class="d-flex align-items-center bg-white border rounded-3 p-1 shadow-sm">
|
|
<i class="bi bi-whatsapp text-success mx-2"></i>
|
|
<input type="text" id="whatsappPhoneDirect" class="form-control form-control-sm border-0" style="width: 140px;" value="{{ sale.customer.phone|default:'' }}" placeholder="{% trans "Phone Number" %}">
|
|
<button id="btnSendWhatsAppDirect" onclick="sendWhatsAppDirect()" class="btn btn-success btn-sm rounded-2 px-3 ms-1">
|
|
<span id="whatsappSpinnerDirect" class="spinner-border spinner-border-sm d-none"></span>
|
|
{% trans "Send" %} / إرسال
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
<button onclick="downloadPDF()" class="btn btn-outline-primary rounded-3 px-4">
|
|
<i class="bi bi-file-earmark-pdf me-2"></i>{% trans "Download PDF" %} / تحميل PDF
|
|
</button>
|
|
<button onclick="window.print()" class="btn btn-primary rounded-3 px-4 shadow-sm">
|
|
<i class="bi bi-printer me-2"></i>{% trans "Print Invoice" %} / طباعة الفاتورة
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Invoice Content -->
|
|
<div id="invoice-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto print-container" style="max-width: 800px;">
|
|
<div class="card-body p-0">
|
|
<!-- Header Section -->
|
|
<div class="p-5 bg-white print-section">
|
|
<div class="row mb-5 print-mb-2">
|
|
<div class="col-sm-6">
|
|
{% if settings.logo %}
|
|
<img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4 print-mb-2 print-logo">
|
|
{% else %}
|
|
<h3 class="fw-bold text-primary mb-4 print-mb-2 print-h3">{{ settings.business_name }}</h3>
|
|
{% endif %}
|
|
<div class="text-muted small print-small">
|
|
<p class="mb-1"><i class="bi bi-geo-alt me-2"></i>{{ settings.address }}</p>
|
|
<p class="mb-1"><i class="bi bi-telephone me-2"></i>{{ settings.phone }}</p>
|
|
<p class="mb-1"><i class="bi bi-envelope me-2"></i>{{ settings.email }}</p>
|
|
{% if settings.vat_number %}
|
|
<p class="mb-0"><i class="bi bi-receipt me-2"></i>{% trans "VAT" %} / الضريبة: {{ settings.vat_number }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 text-sm-end" dir="rtl">
|
|
<h1 class="fw-bold text-uppercase text-muted opacity-50 mb-4 print-mb-2 print-h1" dir="ltr">{% trans "Tax Invoice" %} / فاتورة ضريبية</h1>
|
|
<div class="mb-4 print-mb-2 text-sm-end" dir="ltr">
|
|
<div class="fw-bold text-dark text-uppercase small">{% trans "Invoice Number" %} / رقم الفاتورة</div>
|
|
<div class="h5 print-h5">{{ sale.invoice_number|default:sale.id }}</div>
|
|
</div>
|
|
<div class="row g-3 text-sm-end" dir="ltr">
|
|
<div class="col-6">
|
|
<div class="small text-muted fw-bold text-uppercase">{% trans "Issue Date" %} / تاريخ الإصدار</div>
|
|
<div>{{ sale.created_at|date:"Y-m-d" }}</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted fw-bold text-uppercase">{% trans "Issued By" %} / صادرة عن</div>
|
|
<div>{{ sale.created_by.username|default:"System" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-5 print-mb-2">
|
|
<div class="col-sm-6">
|
|
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Customer Information" %} / معلومات العميل</div>
|
|
<div class="h5 fw-bold mb-1 print-h5">{{ sale.customer.name|default:_("Guest Customer") }}</div>
|
|
{% if sale.customer.phone %}
|
|
<div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ sale.customer.phone }}</div>
|
|
{% endif %}
|
|
{% if sale.customer.address %}
|
|
<div class="text-muted small"><i class="bi bi-geo-alt me-2"></i>{{ sale.customer.address }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-sm-6 text-sm-end">
|
|
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider print-mb-1">{% trans "Payment Status" %} / حالة الدفع</div>
|
|
<div>
|
|
{% if sale.status == 'paid' %}
|
|
<span class="h5 badge bg-success text-white rounded-pill px-4 print-badge">{% trans "Fully Paid" %} / مدفوع بالكامل</span>
|
|
{% elif sale.status == 'partial' %}
|
|
<span class="h5 badge bg-warning text-dark rounded-pill px-4 print-badge">{% trans "Partially Paid" %} / مدفوع جزئياً</span>
|
|
{% else %}
|
|
<span class="h5 badge bg-danger text-white rounded-pill px-4 print-badge">{% trans "Unpaid" %} / غير مدفوع</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table Section -->
|
|
<div class="table-responsive mb-5 print-mb-2">
|
|
<table class="table table-hover align-middle table-sm-print">
|
|
<thead class="bg-light print-bg-none">
|
|
<tr>
|
|
<th class="py-3 ps-4 border-0 print-py-1">
|
|
<div class="small text-muted">{% trans "Item Description" %}</div>
|
|
<div class="small">وصف العنصر</div>
|
|
</th>
|
|
<th class="py-3 text-center border-0 print-py-1">
|
|
<div class="small text-muted">{% trans "Unit Price" %}</div>
|
|
<div class="small">سعر الوحدة</div>
|
|
</th>
|
|
<th class="py-3 text-center border-0 print-py-1">
|
|
<div class="small text-muted">{% trans "Quantity" %}</div>
|
|
<div class="small">الكمية</div>
|
|
</th>
|
|
<th class="py-3 text-end pe-4 border-0 print-py-1">
|
|
<div class="small text-muted">{% trans "Total" %}</div>
|
|
<div class="small">المجموع</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in sale.items.all %}
|
|
<tr>
|
|
<td class="py-3 ps-4 print-py-1">
|
|
<div class="fw-bold" dir="rtl">{{ item.product.name_ar }}</div>
|
|
<div class="text-muted small">{{ item.product.name_en }}</div>
|
|
</td>
|
|
<td class="py-3 text-center print-py-1">{{ settings.currency_symbol }}{{ item.unit_price|floatformat:3 }}</td>
|
|
<td class="py-3 text-center print-py-1">{{ item.quantity|floatformat:2 }}</td>
|
|
<td class="py-3 text-end pe-4 fw-bold text-primary print-py-1">{{ settings.currency_symbol }}{{ item.line_total|floatformat:3 }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="2" class="border-0"></td>
|
|
<td class="text-center py-3 fw-bold border-top print-py-1">
|
|
<div>{% trans "Subtotal" %}</div>
|
|
<div class="small fw-normal">المجموع الفرعي</div>
|
|
</td>
|
|
<td class="text-end pe-4 py-3 fw-bold border-top print-py-1">{{ settings.currency_symbol }}{{ sale.subtotal|floatformat:3 }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" class="border-0"></td>
|
|
<td class="text-center py-2 fw-bold text-muted print-py-1">
|
|
<div>{% trans "VAT" %}</div>
|
|
<div class="small fw-normal">الضريبة</div>
|
|
</td>
|
|
<td class="text-end pe-4 py-2 fw-bold text-muted print-py-1">{{ settings.currency_symbol }}{{ sale.vat_amount|floatformat:3 }}</td>
|
|
</tr>
|
|
{% if sale.discount > 0 %}
|
|
<tr class="text-muted">
|
|
<td colspan="2" class="border-0"></td>
|
|
<td class="text-center py-2 fw-bold print-py-1">
|
|
<div>{% trans "Discount" %}</div>
|
|
<div class="small fw-normal">الخصم</div>
|
|
</td>
|
|
<td class="text-end pe-4 py-2 fw-bold print-py-1">-{{ settings.currency_symbol }}{{ sale.discount|floatformat:3 }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<td colspan="2" class="border-0"></td>
|
|
<td class="text-center py-3 fw-bold print-py-1">
|
|
<div>{% trans "Grand Total" %}</div>
|
|
<div class="small fw-normal">المجموع الكلي</div>
|
|
</td>
|
|
<td class="text-end pe-4 py-3 h5 fw-bold text-primary print-py-1 print-h5">{{ settings.currency_symbol }}{{ sale.total_amount|floatformat:3 }}</td>
|
|
</tr>
|
|
<tr class="text-success">
|
|
<td colspan="2" class="border-0"></td>
|
|
<td class="text-center py-2 fw-bold print-py-1">
|
|
<div>{% trans "Total Paid" %}</div>
|
|
<div class="small fw-normal">إجمالي المدفوع</div>
|
|
</td>
|
|
<td class="text-end pe-4 py-2 fw-bold print-py-1">{{ settings.currency_symbol }}{{ sale.paid_amount|floatformat:3 }}</td>
|
|
</tr>
|
|
<tr class="text-danger">
|
|
<td colspan="2" class="border-0"></td>
|
|
<td class="text-center py-2 fw-bold border-top print-py-1">
|
|
<div>{% trans "Balance Due" %}</div>
|
|
<div class="small fw-normal">الرصيد المستحق</div>
|
|
</td>
|
|
<td class="text-end pe-4 py-2 h5 fw-bold border-top print-py-1 print-h5">{{ settings.currency_symbol }}{{ sale.balance_due|floatformat:3 }}</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Amount in Words -->
|
|
<div class="mb-5 px-5 print-mb-2 print-px-0">
|
|
<div class="p-3 bg-light rounded-3 print-bg-none print-p-0">
|
|
<div class="small text-muted fw-bold text-uppercase mb-1">{% trans "Amount in Words" %} / المبلغ بالحروف</div>
|
|
<div class="fw-bold text-dark">{{ amount_in_words }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment History -->
|
|
{% if sale.payments.exists %}
|
|
<div class="mb-5 px-5 print-mb-2 print-px-0">
|
|
<h5 class="fw-bold mb-3 print-h5"><i class="bi bi-credit-card me-2"></i>{% trans "Payment Records" %} / سجلات الدفع</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-bordered table-sm-print">
|
|
<thead class="bg-light small print-bg-none">
|
|
<tr>
|
|
<th>{% trans "Date" %} / التاريخ</th>
|
|
<th>{% trans "Method" %} / الطريقة</th>
|
|
<th>{% trans "Amount" %} / المبلغ</th>
|
|
<th>{% trans "User" %} / المستخدم</th>
|
|
<th>{% trans "Notes" %} / ملاحظات</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="small">
|
|
{% for payment in sale.payments.all %}
|
|
<tr>
|
|
<td>{{ payment.payment_date|date:"Y-m-d" }}</td>
|
|
<td>
|
|
{% if payment.payment_method %}
|
|
{{ payment.payment_method.name_ar }} / {{ payment.payment_method.name_en }}
|
|
{% else %}
|
|
{{ payment.payment_method_name }}
|
|
{% endif %}
|
|
</td>
|
|
<td class="fw-bold">{{ settings.currency_symbol }}{{ payment.amount|floatformat:3 }}</td>
|
|
<td>{{ payment.created_by.username|default:"System" }}</td>
|
|
<td class="text-muted">{{ payment.notes }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Notes -->
|
|
{% if sale.notes %}
|
|
<div class="bg-light p-4 rounded-3 mb-5 mx-5 print-bg-none print-mb-2 print-mx-0 print-p-0">
|
|
<h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Internal Notes" %} / ملاحظات داخلية</h6>
|
|
<p class="mb-0 small">{{ sale.notes }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="text-center text-muted small mt-5 border-top pt-4 pb-5 print-mt-2 print-pt-2 print-pb-0">
|
|
<p class="mb-1">{% trans "Thank you for your business!" %} / شكراً لتعاملكم معنا!</p>
|
|
<p class="mb-0">{% trans "Software by Meezan" %} / برمجة ميزان</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
|
<script>
|
|
function downloadPDF() {
|
|
const element = document.getElementById('invoice-card');
|
|
const opt = {
|
|
margin: 0,
|
|
filename: 'Invoice_{{ sale.invoice_number|default:sale.id }}.pdf',
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: { scale: 2, useCORS: true, letterRendering: true },
|
|
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
|
|
};
|
|
html2pdf().set(opt).from(element).save();
|
|
}
|
|
|
|
async function sendWhatsAppDirect() {
|
|
const phone = document.getElementById('whatsappPhoneDirect').value;
|
|
const spinner = document.getElementById('whatsappSpinnerDirect');
|
|
const btn = document.getElementById('btnSendWhatsAppDirect');
|
|
|
|
if (!phone) {
|
|
alert("{% trans 'Please enter a WhatsApp number.' %}");
|
|
return;
|
|
}
|
|
|
|
spinner.classList.remove('d-none');
|
|
btn.disabled = true;
|
|
|
|
try {
|
|
const element = document.getElementById('invoice-card');
|
|
const opt = {
|
|
margin: 0,
|
|
filename: 'Invoice_{{ sale.invoice_number|default:sale.id }}.pdf',
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: { scale: 2, useCORS: true, letterRendering: true },
|
|
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
|
|
};
|
|
|
|
// Generate PDF as base64
|
|
const pdfBlob = await html2pdf().set(opt).from(element).outputPdf('datauristring');
|
|
|
|
const response = await fetch("{% url 'send_invoice_whatsapp' %}", {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': '{{ csrf_token }}'
|
|
},
|
|
body: JSON.stringify({
|
|
sale_id: {{ sale.id }},
|
|
phone: phone,
|
|
pdf_data: pdfBlob
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
alert(data.message || "{% trans 'Invoice sent successfully!' %}");
|
|
} else {
|
|
alert(data.error || data.message || "{% trans 'Failed to send invoice.' %}");
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert("{% trans 'An error occurred while sending the invoice.' %}");
|
|
} finally {
|
|
spinner.classList.add('d-none');
|
|
btn.disabled = false;
|
|
}
|
|
}
|
|
|
|
// Auto-trigger if 'created=true' is in URL
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.get("created") === "true") {
|
|
const phone = document.getElementById('whatsappPhoneDirect').value;
|
|
if (phone) {
|
|
sendWhatsAppDirect();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
@media print {
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 10mm;
|
|
}
|
|
body {
|
|
background-color: white !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
font-size: 12px;
|
|
}
|
|
.container {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
.d-print-none { display: none !important; }
|
|
|
|
/* Layout Overrides */
|
|
#invoice-card {
|
|
width: 100% !important;
|
|
max-width: none !important;
|
|
margin: 0 !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.print-section {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Spacing Reductions */
|
|
.print-mb-2 { margin-bottom: 0.5rem !important; }
|
|
.print-mb-1 { margin-bottom: 0.25rem !important; }
|
|
.print-mt-2 { margin-top: 1rem !important; }
|
|
.print-pt-2 { padding-top: 0.5rem !important; }
|
|
.print-pb-0 { padding-bottom: 0 !important; }
|
|
.print-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
|
|
.print-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
|
|
.print-p-0 { padding: 0 !important; }
|
|
|
|
/* Font Size Reductions */
|
|
.print-h1 { font-size: 18px !important; margin-bottom: 0.5rem !important; }
|
|
.print-h3 { font-size: 16px !important; }
|
|
.print-h5 { font-size: 14px !important; }
|
|
.print-small { font-size: 10px !important; }
|
|
|
|
/* Table Compactness */
|
|
.table th, .table td {
|
|
padding: 4px 8px !important;
|
|
font-size: 11px !important;
|
|
}
|
|
.print-py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
|
|
|
|
/* Hide Backgrounds */
|
|
.print-bg-none { background-color: transparent !important; }
|
|
.badge {
|
|
border: 1px solid #000;
|
|
color: #000 !important;
|
|
background: transparent !important;
|
|
padding: 2px 8px !important;
|
|
}
|
|
|
|
/* Logo sizing */
|
|
.print-logo { max-height: 50px !important; }
|
|
}
|
|
</style>
|
|
{% endblock %} |