257 lines
14 KiB
HTML
257 lines
14 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Purchase Detail" %} #{{ purchase.id }} | {{ site_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">
|
|
<a href="{% url 'purchases' %}" class="btn btn-light rounded-3">
|
|
<i class="bi bi-arrow-left me-2"></i>{% trans "Back to List" %} / العودة للقائمة
|
|
</a>
|
|
<div class="d-flex gap-2">
|
|
<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="purchase-card" class="card border-0 shadow-sm rounded-4 overflow-hidden mx-auto" style="max-width: 800px;">
|
|
<div class="card-body p-0">
|
|
<!-- Header Section -->
|
|
<div class="p-5 bg-white">
|
|
<div class="row mb-5">
|
|
<div class="col-sm-6">
|
|
{% if settings.logo %}
|
|
<img src="{{ settings.logo.url }}" alt="Logo" style="max-height: 80px;" class="mb-4">
|
|
{% else %}
|
|
<h3 class="fw-bold text-primary mb-4">{{ settings.business_name }}</h3>
|
|
{% endif %}
|
|
<div class="text-muted 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">
|
|
<h1 class="fw-bold text-uppercase text-muted opacity-50 mb-4">{% trans "Purchase Invoice" %} / فاتورة مشتريات</h1>
|
|
<div class="mb-4">
|
|
<div class="fw-bold text-dark text-uppercase small">{% trans "Invoice Number" %} / رقم الفاتورة</div>
|
|
<div class="h5">{{ purchase.invoice_number|default:purchase.id }}</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-4">
|
|
<div class="small text-muted fw-bold text-uppercase">{% trans "Issue Date" %} / تاريخ الإصدار</div>
|
|
<div>{{ purchase.created_at|date:"Y-m-d" }}</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="small text-muted fw-bold text-uppercase">{% trans "Issued By" %} / صادرة عن</div>
|
|
<div>{{ purchase.created_by.username|default:"System" }}</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="small text-muted fw-bold text-uppercase">{% trans "Due Date" %} / تاريخ الاستحقاق</div>
|
|
<div>{{ purchase.due_date|date:"Y-m-d"|default:"-" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-5">
|
|
<div class="col-sm-6">
|
|
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Supplier Information" %} / معلومات المورد</div>
|
|
<div class="h5 fw-bold mb-1">{{ purchase.supplier.name }}</div>
|
|
{% if purchase.supplier.phone %}
|
|
<div class="text-muted small"><i class="bi bi-telephone me-2"></i>{{ purchase.supplier.phone }}</div>
|
|
{% endif %}
|
|
{% if purchase.supplier.contact_person %}
|
|
<div class="text-muted small"><i class="bi bi-person me-2"></i>{{ purchase.supplier.contact_person }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-sm-6 text-sm-end">
|
|
<div class="small text-muted fw-bold mb-3 text-uppercase tracking-wider">{% trans "Payment Status" %} / حالة الدفع</div>
|
|
<div>
|
|
{% if purchase.status == 'paid' %}
|
|
<span class="h5 badge bg-success text-white rounded-pill px-4">{% trans "Fully Paid" %} / مدفوع بالكامل</span>
|
|
{% elif purchase.status == 'partial' %}
|
|
<span class="h5 badge bg-warning text-dark rounded-pill px-4">{% trans "Partially Paid" %} / مدفوع جزئياً</span>
|
|
{% else %}
|
|
<span class="h5 badge bg-danger text-white rounded-pill px-4">{% trans "Unpaid" %} / غير مدفوع</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table Section -->
|
|
<div class="table-responsive mb-5">
|
|
<table class="table table-hover align-middle">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th class="py-3 ps-4 border-0">
|
|
<div class="small text-muted">{% trans "Item Description" %}</div>
|
|
<div class="small">وصف العنصر</div>
|
|
</th>
|
|
<th class="py-3 text-center border-0">
|
|
<div class="small text-muted">{% trans "Cost Price" %}</div>
|
|
<div class="small">سعر التكلفة</div>
|
|
</th>
|
|
<th class="py-3 text-center border-0">
|
|
<div class="small text-muted">{% trans "Quantity" %}</div>
|
|
<div class="small">الكمية</div>
|
|
</th>
|
|
<th class="py-3 text-end pe-4 border-0">
|
|
<div class="small text-muted">{% trans "Total" %}</div>
|
|
<div class="small">المجموع</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in purchase.items.all %}
|
|
<tr>
|
|
<td class="py-3 ps-4">
|
|
<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">{{ settings.currency_symbol }}{{ item.cost_price|floatformat:3 }}</td>
|
|
<td class="py-3 text-center">{{ item.quantity }}</td>
|
|
<td class="py-3 text-end pe-4 fw-bold text-primary">{{ 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">
|
|
<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 border-top">{{ settings.currency_symbol }}{{ purchase.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">
|
|
<div>{% trans "Total Paid" %}</div>
|
|
<div class="small fw-normal">إجمالي المدفوع</div>
|
|
</td>
|
|
<td class="text-end pe-4 py-2 fw-bold">{{ settings.currency_symbol }}{{ purchase.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">
|
|
<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">{{ settings.currency_symbol }}{{ purchase.balance_due|floatformat:3 }}</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Payment History -->
|
|
{% if purchase.payments.exists %}
|
|
<div class="mb-5 px-5">
|
|
<h5 class="fw-bold mb-3"><i class="bi bi-credit-card me-2"></i>{% trans "Payment History" %} / سجل الدفعات</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-bordered">
|
|
<thead class="bg-light small">
|
|
<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 purchase.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 purchase.notes %}
|
|
<div class="bg-light p-4 rounded-3 mb-5 mx-5">
|
|
<h6 class="fw-bold small text-uppercase mb-2 text-muted">{% trans "Notes" %} / ملاحظات</h6>
|
|
<p class="mb-0 small">{{ purchase.notes }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="text-center text-muted small mt-5 border-top pt-4 pb-5">
|
|
<p class="mb-0">{% trans "Thank you for your business!" %} / شكراً لتعاملكم معنا!</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('purchase-card');
|
|
const opt = {
|
|
margin: 0,
|
|
filename: 'Purchase_{{ purchase.invoice_number|default:purchase.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();
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@media print {
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 0;
|
|
}
|
|
body {
|
|
background-color: white !important;
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
.container {
|
|
width: 210mm !important;
|
|
max-width: 210mm !important;
|
|
margin: 0 auto !important;
|
|
padding: 0 !important;
|
|
}
|
|
#purchase-card {
|
|
width: 210mm !important;
|
|
min-height: 297mm !important;
|
|
margin: 0 !important;
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
.d-print-none { display: none !important; }
|
|
.p-5 { padding: 15mm !important; }
|
|
.table-responsive { overflow: visible !important; }
|
|
}
|
|
</style>
|
|
{% endblock %} |