183 lines
6.0 KiB
HTML
183 lines
6.0 KiB
HTML
{% load i18n custom_filters num2words_tags %}
|
|
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>عرض سعر / Quotation</title>
|
|
<style>
|
|
body {
|
|
font-family: Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
background-color: #f8f9fa;
|
|
color: #333;
|
|
margin: 0;
|
|
padding: 20px;
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
background-color: #fff;
|
|
padding: 30px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
color: #2c3e50;
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
p, label {
|
|
font-size: 14px;
|
|
margin-bottom: 5px;
|
|
}
|
|
input[type="text"] {
|
|
border: none;
|
|
border-bottom: 1px solid #333;
|
|
text-align: start;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
direction: rtl;
|
|
background: transparent;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
th, td {
|
|
padding: 10px;
|
|
text-align: center;
|
|
border: 1px solid #ddd;
|
|
font-size: 14px;
|
|
}
|
|
th {
|
|
background-color: #2c3e50;
|
|
color: #fff;
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #777;
|
|
border-top: 1px solid #ddd;
|
|
padding-top: 20px;
|
|
}
|
|
.signature-section {
|
|
margin-top: 30px;
|
|
padding: 15px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
.signature-section p {
|
|
margin: 5px 0;
|
|
font-size: 14px;
|
|
}
|
|
.highlight {
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h1>عرض سعر السيارة - Tenhal</h1>
|
|
|
|
<p>المكرمين/</p>
|
|
<input type="text">
|
|
|
|
<p>السلام عليكم ورحمة الله وبركاته،</p>
|
|
|
|
<p>بناءً على طلبكم، نورد لكم عرض سعر للسيارة وهو يعد إيجابًا منا بالبيع:</p>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>نوع السيارة</th>
|
|
<th>اللون الخارجي</th>
|
|
<th>اللون الداخلي</th>
|
|
<th>السعر</th>
|
|
<th>ملاحظات</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for car in cars %}
|
|
<tr>
|
|
<td>{{ car.year }} - {{ car.id_car_make.name }} - {{ car.id_car_model.name }} - {{ car.id_car_trim.name }}</td>
|
|
<td>{{ car.colors.first.exterior.name }}</td>
|
|
<td>{{ car.colors.first.interior.name }}</td>
|
|
<td>{{ car.finances.selling_price }}</td>
|
|
<td>{{ car.get_specifications }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>حمولة المركبة )<input type="text">) سنة الصنع (<input type="text">) (جديد / مستعملة) كلم/ميل</p>
|
|
|
|
<p>مستوى اقتصاد الوقود )<input type="text">) رقم الهيكل (في حال كانت السيارة مستعملة فقط) (<input type="text">)</p>
|
|
|
|
<p>مواصفات أخرى:</p>
|
|
<input type="text">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>سعر السيارة الأساسي</th>
|
|
<th>مبلغ ضريبة القيمة المضافة (15% VAT)</th>
|
|
<th>إجمالي سعر السيارة مع الضريبة</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="3">{{ cars }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{{ estimate.get_cost_estimate }}</td>
|
|
<td></td>
|
|
<td>{{ estimate.get_invoiced_amount.invoice_amount_paid__sum }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>الإجمالي مع الضريبة كتابةً: <span class="highlight">{{ estimate.get_invoiced_amount.invoice_amount_paid__sum|num_to_words }} {{ CURRENCY }} فقط لا غير</span></p>
|
|
|
|
<p>مدة الضمان: <input type="text"> شهراً، أو <input type="text"> كيلومتراً / ميلاً (أيهما يأتي أولاً)</p>
|
|
|
|
<p>ملاحظات:</p>
|
|
<input type="text">
|
|
|
|
<p>اسم الشركة / الوكالة:</p>
|
|
<input type="text">
|
|
|
|
<p>العنوان: المدينة - شارع:</p>
|
|
<input type="text">
|
|
|
|
<p>ص.ب / رمز بريدي / الهاتف:</p>
|
|
<input type="text">
|
|
|
|
<div class="signature-section">
|
|
<p>الموظف المسؤول:</p>
|
|
<input type="text" style="width: 60%; display: inline-block; border-bottom: 1px solid #333;">
|
|
<p>التوقيع:</p>
|
|
<input type="text" style="width: 60%; display: inline-block; border-bottom: 1px solid #333;">
|
|
<p>التاريخ: <input type="text" style="width: 50px;"> / <input type="text" style="width: 50px;"> / <input type="text" style="width: 50px;"></p>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>Powered by <a href="https://tenhal.sa">Tenhal | تنحل</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |