194 lines
9.5 KiB
HTML
194 lines
9.5 KiB
HTML
{% load i18n static custom_filters num2words_tags%}
|
|
<!DOCTYPE html>
|
|
<html lang="ar">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Invoice</title>
|
|
<!-- CSS -->
|
|
<link href="{% static 'css/theme.min.css' %}" type="text/css" rel="stylesheet" id="style-default">
|
|
<link href="{% static 'css/user.min.css' %}" type="text/css" rel="stylesheet" id="user-style-default">
|
|
<!-- Google Fonts - Roboto -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<!-- Custom CSS -->
|
|
<style>
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f8f9fa;
|
|
}
|
|
.invoice-container {
|
|
width: 210mm;
|
|
min-height: 297mm;
|
|
padding: 10mm;
|
|
margin: auto;
|
|
background: white;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.invoice-header {
|
|
text-align: center;
|
|
border-bottom: 2px solid #dee2e6;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.qr-code {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
.qr-code img {
|
|
width: 3cm;
|
|
height: 3cm;
|
|
}
|
|
.invoice-details, .invoice-table {
|
|
font-size: 12px;
|
|
}
|
|
.invoice-table th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 600;
|
|
}
|
|
.invoice-total {
|
|
text-align: right;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-top: 10px;
|
|
}
|
|
.footer-note {
|
|
position: absolute;
|
|
bottom: 35mm;
|
|
font-size: 10px;
|
|
margin-top: auto;
|
|
margin-right: auto;
|
|
width: 28%;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="invoice-container" id="invoice-content">
|
|
<div class="invoice-header">
|
|
<h5>Tax Invoice / فاتورة ضريبية</h5>
|
|
</div>
|
|
<div class="qr-code">
|
|
<img src="{% static 'qr_code/Marwan_qr.png' %}" alt="QR Code">
|
|
</div>
|
|
<div class="invoice-details">
|
|
<table class="table table-sm table-responsive ">
|
|
<tr><td></td><td class="text-end"></td><td class="text-end"><img class="rounded-soft" src="{{ dealer.logo.url }}" alt="" style="height: 2cm; width: 2cm; border-radius: 0.3333333333rem;"/></td></tr>
|
|
<tr><td><strong>{{ dealer.name }}</strong></td><td></td><td class="text-end"><strong>{{ dealer.arabic_name }}</strong></td></tr>
|
|
<tr><td><strong>Address</strong></td><td>{{ dealer.address }}</td><td class="text-end"><strong>العنوان</strong></td></tr>
|
|
<tr><td><strong>Phone</strong></td><td>{{ dealer.phone_number }}</td><td class="text-end"><strong>جوال</strong></td></tr>
|
|
<tr><td><strong>VAT Number</strong></td><td>{{ dealer.vrn }}</td><td class="text-end"><strong>الرقم الضريبي</strong></td></tr>
|
|
</table>
|
|
</div>
|
|
<div class="invoice-details">
|
|
<table class="table table-sm table-bordered">
|
|
<tr><td class="ps-1"><strong>Invoice Number</strong></td><td class="text-center">{{ invoice.invoice_number }}</td><td class="text-end p-1"><strong>رقم الفاتورة</strong></td></tr>
|
|
<tr><td class="ps-1"><strong>Date</strong></td><td class="text-center">{{ invoice.date_in_review }}</td><td class="text-end p-1"><strong>التاريخ</strong></td></tr>
|
|
<tr><td class="ps-1"><strong>Customer</strong></td><td class="text-center">{{ invoice.customer.customer_name }}</td><td class="text-end p-1"><strong>العميل</strong></td></tr>
|
|
<tr><td class="ps-1"><strong>VAT Number</strong></td><td class="text-center"></td><td class="text-end p-1"><strong>الرقم الضريبي</strong></td></tr>
|
|
<tr><td class="ps-1"><strong>Email</strong></td><td class="text-center">{{ invoice.customer.email }}</td><td class="text-end p-1"><strong>البريد الالكتروني</strong></td></tr>
|
|
<tr><td class="ps-1"><strong>Terms</strong></td><td class="text-center">{{ invoice.get_terms_display }}</td><td class="text-end p-1"><strong>طريقة الدفع</strong></td></tr>
|
|
</table>
|
|
</div>
|
|
<div class="invoice-table">
|
|
<table class="table table-sm table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-wrap text-center">Make / الصانع</th>
|
|
<th class="text-wrap text-center">Model / الموديل</th>
|
|
<th class="text-wrap text-center">Year / السنة</th>
|
|
<th class="text-wrap text-center">VIN / الهيكل</th>
|
|
<th class="text-wrap text-center">Quantity / الكمية</th>
|
|
<th class="text-wrap text-center">Unit Price / سعر الوحدة</th>
|
|
<th class="text-wrap text-center">VAT / الضريبة</th>
|
|
<th class="text-wrap text-center">Total / الإجمالي</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in data.cars %}
|
|
<tr>
|
|
<td class="ps-1">{{ item.make }}</td>
|
|
<td class="ps-1">{{ item.model }}</td>
|
|
<td class="text-center">{{ item.year }}</td>
|
|
<td class="ps-1">{{ item.vin }}</td>
|
|
<td class="text-center">{{ item.quantity|floatformat:-1 }}</td>
|
|
<td class="text-center">{{ item.selling_price }}</td>
|
|
<td class="text-center">{{ item.vat_amount }}</td>
|
|
<td class="text-center">{{ item.total }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="invoice-note">Additional Services \ الخدمات الإضافية</div>
|
|
<div class="invoice-table">
|
|
<table class="table table-sm table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-wrap text-center">Type / النوع</th>
|
|
<th class="text-wrap text-center">Quantity / الكمية</th>
|
|
<th class="text-wrap text-center">Unit Price / سعر الوحدة</th>
|
|
<th class="text-wrap text-center">VAT / الضريبة</th>
|
|
<th class="text-wrap text-center">Total / الإجمالي</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in data.cars %}
|
|
<tr>
|
|
<td class="ps-1">{{ item }}</td>
|
|
<td class="text-center">{{ item.quantity|floatformat:-1 }}</td>
|
|
<td class="text-center">{{ item.selling_price }}</td>
|
|
<td class="text-center">{{ item.vat_amount }}</td>
|
|
<td class="text-center">{{ item.total }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-responsive ">
|
|
<tr>
|
|
<td class="text-start ps-1"><strong class="fs-9">VAT</strong></td>
|
|
<td class="text-center"><span class="fs-9">{{ data.total_vat_amount }} {{ CURRENCY }}</span></td>
|
|
<td class="text-end"><strong class="fs-9">ضريبة القيمة المضافة</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-start ps-1"><strong class="fs-9">Total</strong></td>
|
|
<td class="text-center"><span class="fs-9">{{ data.grand_total }} {{ CURRENCY }}</span></td>
|
|
<td class="text-end"><strong class="fs-9">الإجمالي</strong></td>
|
|
</tr>
|
|
<tr>
|
|
|
|
<td class="text-end" colspan="3"><span class="fs-9 fw-bold">كتابةً: </span><span class="fs-9">{{ data.grand_total|num_to_words }} {{ CURRENCY }}</span></td>
|
|
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-note d-flex justify-content-between align-items-end">
|
|
<div class="logo-img text-center">
|
|
<img src="{% static 'images/logos/logo-d-pdf.png' %}" style="width: 10mm; height: 10mm;"/>
|
|
<p class="fs-11 fw-bold">Haikal | هيكل</p>
|
|
</div>
|
|
<p class="fs-11">Powered by <a class="text-decoration-none" href="https://tenhal.sa" style="color: #112e40;">TENHAL | تنحل</a></p>
|
|
</div>
|
|
|
|
</div>
|
|
<script src="{% static 'vendors/bootstrap/bootstrap.min.js' %}"></script>
|
|
<script src="{% static 'js/html2pdf.bundle.min.js' %}"></script>
|
|
<script>
|
|
document.getElementById('download-pdf').addEventListener('click', function () {
|
|
html2pdf().from(document.getElementById('invoice-content')).set({
|
|
margin: 0,
|
|
filename: "{{ invoice.invoice_number_invoice.customer.name_invoice.date_in_review }}.pdf",
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: { scale: 2 },
|
|
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
|
|
}).save();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|