127 lines
5.0 KiB
HTML
127 lines
5.0 KiB
HTML
{% load i18n custom_filters %}
|
|
{% block customCSS %}
|
|
<style>
|
|
.invoice {
|
|
width: 100%;
|
|
height: 400px; /* Fixed height */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between; /* Aligns content to top and bottom */
|
|
background-color: #fff;
|
|
padding: 1rem;
|
|
}
|
|
.invoice-items {
|
|
width: 100%;
|
|
}
|
|
.invoice-items td {
|
|
padding: 0.75rem;
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
.invoice-items .total td {
|
|
font-weight: bold;
|
|
border-top: 2px solid #000;
|
|
}
|
|
.footer {
|
|
margin-top: 2rem;
|
|
text-align: center;
|
|
color: #6c757d;
|
|
}
|
|
.b-top {
|
|
border-top: 2px solid #000;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
<div>
|
|
<div class="row justify-content-center px-12">
|
|
<button class="btn btn-phoenix-primary"
|
|
type="button"
|
|
onclick="printDiv('printableArea')">
|
|
<i class="fa-solid fa-print"></i> {{ _("Print") }}
|
|
</button>
|
|
</div>
|
|
<div class="container" id="printableArea">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-10">
|
|
<div class="card mt-2">
|
|
<div class="card-body text-center">
|
|
<h2 class="card-title">{{ _("Purchase Order") }}</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="invoice p-4">
|
|
<div class="mb-4">
|
|
<strong>{{ estimate.customer.customer_name }}</strong>
|
|
<br />
|
|
{% blocktrans%}Order ID #{{ estimate.sale_orders.first.formatted_order_id }}{%endblocktrans%}
|
|
<br />
|
|
{{ estimate.sale_orders.first.created|date }}
|
|
</div>
|
|
<table class="invoice-items table">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Item" %}</th>
|
|
<th class="text-end">{% trans "Price" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="b-top"></tr>
|
|
{% for item in data.cars %}
|
|
<tr>
|
|
<td>{{ item.make }}</td>
|
|
<td class="text-end">{{ item.unit_price|floatformat }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
<tr class="b-top">
|
|
<td>{% trans "Additionals :" %}</td>
|
|
</tr>
|
|
{% for service in data.additionals %}
|
|
<tr>
|
|
<td>{{ service.name }}</td>
|
|
<td class="text-end">{{ service.price_|floatformat }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<table class="invoice-items table">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th class="text-end">{%trans "Total" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="total">
|
|
<td class="text-end" width="80%"></td>
|
|
<td class="text-end">
|
|
{{ data.grand_total|floatformat }}<span class="icon-saudi_riyal"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="card-body text-center"></div>
|
|
</div>
|
|
<div class="mt-5">
|
|
<p>{{ _("Signature") }}:</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% block customJS %}
|
|
<script>
|
|
function printDiv(divName) {
|
|
var printContents = document.getElementById(divName).innerHTML
|
|
var originalContents = document.body.innerHTML
|
|
|
|
document.body.innerHTML = printContents
|
|
|
|
window.print()
|
|
|
|
document.body.innerHTML = originalContents
|
|
}
|
|
</script>
|
|
{% endblock %}
|