284 lines
11 KiB
HTML
284 lines
11 KiB
HTML
{% load static i18n %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sale Order</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;
|
|
padding: 0;
|
|
}
|
|
.estimate-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;
|
|
}
|
|
.estimate-header {
|
|
border-bottom: 2px solid #dee2e6;
|
|
padding-bottom: 1.5rem;
|
|
margin-bottom: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
.estimate-header h1 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #333;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.estimate-header p {
|
|
font-size: 1.1rem;
|
|
color: #666;
|
|
font-weight: 400;
|
|
}
|
|
.estimate-details {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
.estimate-details p {
|
|
margin: 0.75rem 0;
|
|
color: #555;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
}
|
|
.estimate-table {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
.estimate-table th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
.estimate-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;
|
|
}
|
|
.estimate-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 {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin-top: 2rem;
|
|
}
|
|
</style>
|
|
{% if LANGUAGE_CODE == 'en' %}
|
|
<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">
|
|
{% else %}
|
|
<link href="{% static 'css/theme-rtl.min.css' %}"
|
|
type="text/css"
|
|
rel="stylesheet"
|
|
id="style-rtl">
|
|
<link href="{% static 'css/user-rtl.min.css' %}"
|
|
type="text/css"
|
|
rel="stylesheet"
|
|
id="user-style-rtl">
|
|
{% endif %}
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
{% if estimate.is_completed %}
|
|
<main class="main" id="top">
|
|
<div class="px-3">
|
|
<div class="row min-vh-100 flex-center p-5">
|
|
<div class="col-12 col-xl-10 col-xxl-8">
|
|
<div class="row justify-content-center align-items-center g-5">
|
|
<h2 class="text-body-secondary fw-bolder mb-3">Page Missing!</h2>
|
|
<p class="text-body mb-5">ERROR FETCHING DATA</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% else %}
|
|
<div class="row p-2">
|
|
<div class="col-2">
|
|
<button class="btn btn-sm btn-phoenix-danger w-100"
|
|
onclick="window.history.back()">الرجوع / Back</button>
|
|
</div>
|
|
<div class="col-2">
|
|
<button class="btn btn-sm btn-phoenix-primary w-100" id="download-pdf">تحميل / Download</button>
|
|
</div>
|
|
<div class="col-8"></div>
|
|
</div>
|
|
<div class="estimate-row" id="estimate-content">
|
|
<!-- Header -->
|
|
<div class="estimate-header">
|
|
<svg width="101"
|
|
height="24"
|
|
viewBox="0 0 101 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<!-- SVG Paths -->
|
|
</svg>
|
|
<h1 style="margin-top: 10px;">
|
|
<b>{% trans "Sale Order" %}</b>
|
|
</h1>
|
|
<p>{% trans "Thank you for choosing us. We appreciate your business" %}</p>
|
|
</div>
|
|
<!-- Details -->
|
|
<div class="estimate-details">
|
|
<p>
|
|
<strong>{{ _("Estimate Number") }} :</strong> <span class="highlight">#{{ estimate.estimate_number }}</span>
|
|
</p>
|
|
<p>
|
|
<strong>{{ _("Date") }} :</strong> {{ estimate.date_in_review }}
|
|
</p>
|
|
<p>
|
|
<strong>{{ _("Customer") }} :</strong> {{ estimate.customer.customer_name }}
|
|
</p>
|
|
<p>
|
|
<strong>{{ _("Email") }} :</strong> {{ estimate.customer.email }}
|
|
</p>
|
|
<p>
|
|
<strong>{{ _("Terms") }} :</strong> {{ estimate.terms|title }}
|
|
</p>
|
|
</div>
|
|
<!-- Items Table -->
|
|
<div class="estimate-table">
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ _("VIN") }}</th>
|
|
<th>{{ _("Make") }}</th>
|
|
<th>{{ _("Model") }}</th>
|
|
<th>{{ _("Year") }}</th>
|
|
<th class="text-center">{{ _("Quantity") }}</th>
|
|
<th class="text-center">{{ _("Unit Price") }}</th>
|
|
<th class="text-center">{{ _("Total") }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>{{ data.car.vin }}</td>
|
|
<td>{{ data.car.make }}</td>
|
|
<td>{{ data.car.model }}</td>
|
|
<td>{{ data.car.year }}</td>
|
|
<td class="text-center">{{ data.car.quantity }}</td>
|
|
<td class="text-center">{{ data.car.unit_price }}</td>
|
|
<td class="highlight fw-semibold text-center">{{ data.car.total }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Additional Charges (VAT and Services) -->
|
|
<div class="additional-charges">
|
|
<p>
|
|
<strong>{{ _("VAT") }} ({{ vat }}%):</strong> <span class="highlight">{{ data.vat }} <span class="icon-saudi_riyal"></span></span>
|
|
</p>
|
|
<p>
|
|
<strong>{{ _("Additional Services") }} :</strong>
|
|
<br>
|
|
{% for service in data.additional_services %}
|
|
<span class="highlight">{{ service.name }} - {{ service.price }} <span class="icon-saudi_riyal"></span></span>
|
|
<br>
|
|
{% endfor %}
|
|
</p>
|
|
</div>
|
|
<!-- Total -->
|
|
<div class="estimate-total">
|
|
<p>
|
|
<strong>{{ _("Total Amount") }} :</strong> <span class="highlight">{{ data.grand_total }} <span class="icon-saudi_riyal"></span></span>
|
|
</p>
|
|
</div>
|
|
<!-- Footer Note -->
|
|
<div class="footer-note">
|
|
<p>
|
|
{% trans "If you have any questions, feel free to contact us at" %} <a href="mailto:support@example.com">support@example.com</a>.
|
|
</p>
|
|
<p>{% trans "Thank you for your business" %}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<!-- 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('estimate-content');
|
|
|
|
// Options for html2pdf.js
|
|
const options = {
|
|
margin: 0, // No margin
|
|
filename: 'estimate.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>
|