277 lines
9.9 KiB
HTML
277 lines
9.9 KiB
HTML
{% load i18n static%}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>invoice</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- 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 {
|
|
background-color: #f8f9fa;
|
|
font-family: 'Roboto', sans-serif;
|
|
margin: 0; /* Reset body margin */
|
|
padding: 0; /* Reset body padding */
|
|
}
|
|
.invoice-row {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
|
padding: 3rem;
|
|
margin: 3rem auto;
|
|
max-width: 1000px;
|
|
}
|
|
.invoice-header {
|
|
border-bottom: 2px solid #dee2e6;
|
|
padding-bottom: 1.5rem;
|
|
margin-bottom: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
.invoice-header h1 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #333;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.invoice-header p {
|
|
font-size: 1.1rem;
|
|
color: #666;
|
|
font-weight: 400;
|
|
}
|
|
.invoice-details {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
.invoice-details-en {
|
|
text-align: left;
|
|
}
|
|
.invoice-details-ar {
|
|
text-align: right;
|
|
|
|
}
|
|
.invoice-details p {
|
|
margin: 0.75rem 0;
|
|
color: #555;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
}
|
|
.invoice-table {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
.invoice-table th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
.invoice-table td {
|
|
color: #555;
|
|
font-weight: 400;
|
|
}
|
|
.additional-charges {
|
|
margin-top: 2rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.additional-charges p {
|
|
margin: 0.5rem 0;
|
|
color: #555;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
}
|
|
.invoice-total {
|
|
text-align: right;
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-top: 1rem;
|
|
}
|
|
.footer-note {
|
|
text-align: center;
|
|
color: #777;
|
|
margin-top: 3rem;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
}
|
|
.logo {
|
|
max-width: 150px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.highlight {
|
|
color: #007bff;
|
|
font-weight: 500;
|
|
}
|
|
.btn-primary {
|
|
background-color: #007bff;
|
|
border-color: #007bff;
|
|
font-weight: 500;
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 1rem;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #0056b3;
|
|
border-color: #0056b3;
|
|
}
|
|
.button-row {
|
|
text-align: right;
|
|
margin-top: 2rem;
|
|
margin-right:10rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="button-row">
|
|
<button id="download-pdf" class="btn btn-primary">Download Invoice</button>
|
|
</div>
|
|
<div class="invoice-row" id="invoice-content">
|
|
<!-- Header -->
|
|
<div class="invoice-header">
|
|
|
|
<h3 style="margin-top: 10px;">Invoice / فاتورة</h3>
|
|
<p></p>
|
|
</div>
|
|
|
|
<!-- Details -->
|
|
<div class="details-row">
|
|
<div class="col-12">
|
|
<table class="table table-responsive">
|
|
<tr>
|
|
<td class="col-3 text-start p-2">
|
|
<strong>Invoice Number</strong>
|
|
</td>
|
|
<td class="col-6 text-center p-2">
|
|
<span class="highlight">{{invoice.invoice_number}}</span>
|
|
</td>
|
|
<td class="col-3 text-end p-2">
|
|
<strong>رقم الفاتورة</strong>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="col-3 text-start p-2">
|
|
<strong>Date</strong>
|
|
</td>
|
|
<td class="col-6 text-center p-2">
|
|
<span class="highlight">{{invoice.date_in_review}}</span>
|
|
</td>
|
|
<td class="col-3 text-end p-2">
|
|
<strong>التاريخ</strong>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="col-3 text-start p-2">
|
|
<strong>Customer</strong>
|
|
</td>
|
|
<td class="col-6 text-center p-2">
|
|
<span class="highlight">{{invoice.customer.customer_name}}</span>
|
|
</td>
|
|
<td class="col-3 text-end p-2">
|
|
<strong>العميل</strong>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="col-3 text-start p-2">
|
|
<strong>Email</strong>
|
|
</td>
|
|
<td class="col-6 text-center p-2">
|
|
<span class="highlight">{{invoice.customer.email}}</span>
|
|
</td>
|
|
<td class="col-3 text-end p-2">
|
|
<strong>البريد الالكتروني</strong>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="col-3 text-start p-2">
|
|
<strong>Terms</strong>
|
|
</td>
|
|
<td class="col-6 text-center p-2">
|
|
<span class="highlight">{{invoice.get_terms_display}}</span>
|
|
</td>
|
|
<td class="col-3 text-end p-2">
|
|
<strong>طريقة الدفع</strong>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- Items Table -->
|
|
<div class="invoice-table mt-3">
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th><small class="fs-10">Item</small><br><small class="fs-10">الصنف</small></th>
|
|
<th><small class="fs-10">Quantity</small><br><small class="fs-10">العدد</small></th>
|
|
<th><small class="fs-10">Unit Price</small><br><small class="fs-10">سعر الوحدة</small></th>
|
|
<th><small class="fs-10">Total</small><br><small class="fs-10">الإجمالي</small></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in data.cars %}
|
|
<tr>
|
|
<td class="">{{item.make}}</td>
|
|
<td class="align-middle">{{item.quantity}}</td>
|
|
<td class="align-middle ps-5">{{item.selling_price}}</td>
|
|
<td class="align-middle text-body-tertiary fw-semibold">{{item.total}}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Additional Charges (VAT and Services) -->
|
|
<div class="additional-charges">
|
|
<p><strong>VAT/ضريبة القيمة المضافة ({{vat}}%):</strong> <span class="highlight">{{data.vat}} {{ _("SAR") }}</span></p>
|
|
<p><strong>Additional Services/ الخدمات الإضافية</strong>
|
|
<br>
|
|
{% for service in data.additional_services %}
|
|
<span class="highlight">{{service.name}} - {{service.price}} {{ _("SAR") }}</span><br>
|
|
{% endfor %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Total -->
|
|
<div class="invoice-total">
|
|
<p><strong>Total/الإجمالي</strong> <span class="highlight">{{data.grand_total}} {{ _("SAR") }}</span></p>
|
|
</div>
|
|
|
|
<!-- Footer Note -->
|
|
<div class="footer-note">
|
|
<p><small class="text-end">تواصل معنا <a href="mailto:haikal@tenhal.sa">haikal@tenhal.sa</a>.</small>
|
|
<small class="text-start">Contact US <a href="mailto:haikal@tenhal.sa">haikal@tenhal.sa</a>.</small></p>
|
|
<p>Made by TENHAL.SA</p>
|
|
</div>
|
|
<!-- Button row -->
|
|
</div>
|
|
|
|
|
|
<!-- Bootstrap JS (Optional) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- jsPDF Library -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
|
<script>
|
|
document.getElementById('download-pdf').addEventListener('click', function () {
|
|
const element = document.getElementById('invoice-content');
|
|
|
|
// Options for html2pdf.js
|
|
const options = {
|
|
margin: 0, // No margin
|
|
filename: '{{invoice.invoice_number}}.pdf', // Name of the downloaded file
|
|
image: { type: 'jpeg', quality: 0.98 }, // Image quality
|
|
html2canvas: {
|
|
scale: 2, // Increase scale for better quality
|
|
scrollX: 0, // Ensure no horizontal scroll offset
|
|
scrollY: 0, // Ensure no vertical scroll offset
|
|
useCORS: true, // Enable CORS for external resources
|
|
},
|
|
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } // PDF settings
|
|
};
|
|
|
|
// Generate and download the PDF
|
|
html2pdf().from(element).set(options).save();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |