218 lines
6.0 KiB
HTML
218 lines
6.0 KiB
HTML
|
<html>
|
||
|
|
<style>
|
||
|
|
@page {
|
||
|
|
margin: 1cm;
|
||
|
|
margin-bottom: 0cm;
|
||
|
|
margin-top: 3cm;
|
||
|
|
size: a4 portrait;
|
||
|
|
background-image: url('img/letter_head.png');
|
||
|
|
@frame footer {
|
||
|
|
-pdf-frame-content: footerContent;
|
||
|
|
bottom: 0cm;
|
||
|
|
margin-left: 1cm;
|
||
|
|
margin-right: 1cm;
|
||
|
|
height: 2cm;
|
||
|
|
}
|
||
|
|
@frame simple {
|
||
|
|
-pdf-frame-content: simple;
|
||
|
|
bottom: 2.0cm;
|
||
|
|
height: 2.5cm;
|
||
|
|
margin-left: 1cm;
|
||
|
|
margin-right: 1cm;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div#buyer-details{
|
||
|
|
font-size: 120%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#specification{
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#specification td{
|
||
|
|
vertical-align: middle;
|
||
|
|
padding-top: 5px;
|
||
|
|
padding-bottom: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
table td {
|
||
|
|
vertical-align: top;
|
||
|
|
padding: 2px 0;
|
||
|
|
height: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
table td.amount{
|
||
|
|
text-align: right;
|
||
|
|
padding-right: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
table td.total{
|
||
|
|
padding-top: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
table th {
|
||
|
|
text-align: left;
|
||
|
|
border-bottom: 1px solid #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr.uneven {
|
||
|
|
background-color: #efefef;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#footerContent {
|
||
|
|
color: #777777;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#footerContent a {
|
||
|
|
color: #790000;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
font-size: 90%;
|
||
|
|
color: #777;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#totals {
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#simple td {
|
||
|
|
margin-left: 10px;
|
||
|
|
background-color: #efefef;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#simple tr {
|
||
|
|
border-right: 1px solid #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#simple table{
|
||
|
|
text-align: center;
|
||
|
|
border-left: 1px solid #999;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>{{ bill_type }}</h1>
|
||
|
|
<div id="buyer-details">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td width="60%">
|
||
|
|
<strong>{{ buyer.name }}</strong><br>
|
||
|
|
{{ buyer.address }}<br>
|
||
|
|
{{ buyer.zipcode }} {{ buyer.city }}<br>
|
||
|
|
{{ buyer.country }}<br>
|
||
|
|
{{ buyer.vat_number }}<br>
|
||
|
|
</td>
|
||
|
|
<td width="20%">
|
||
|
|
<strong>Invoice number</strong><br />
|
||
|
|
<strong>Date</strong><br />
|
||
|
|
<strong>Due date</strong>
|
||
|
|
</td>
|
||
|
|
<td width="20%">
|
||
|
|
: {{ bill.ident }}<br />
|
||
|
|
: {{ bill.date|date:"d F, Y" }}<br />
|
||
|
|
: {{ bill.due_on|date:"d F, Y" }}<br />
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div id="specification">
|
||
|
|
<table width="100%">
|
||
|
|
<tr>
|
||
|
|
<th width="5%">ID</th>
|
||
|
<th width="65%">{% trans Description %}</th>
|
||
|
|
<th width="20%">Amount</th>
|
||
|
|
<th width="10%">Price</th>
|
||
|
|
</tr>
|
||
|
|
{% for line in lines %}
|
||
|
|
<tr class="{% cycle 'even' 'uneven' %}"{% if forloop.last %} style="border-bottom: 1px solid #000;"{% endif %}>
|
||
|
|
<td class="ID">{{ line.order_id }}</td>
|
||
|
|
<td style="padding-left: 2px;">{{ line.description }}
|
||
|
|
<span class="date">({{ line.initial_date|date:"d-m-Y" }}{% if line.initial_date != line.final_date %} - {{ line.final_date|date:"d-m-Y" }}{% endif %})</span></td>
|
||
|
|
<td class="quantity">{{ line.amount }}</td>
|
||
|
|
<td class="amount total">&{{ currency }}; {{ line.price }}</td>
|
||
|
|
</tr>
|
||
|
|
{% endfor %}
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div id="totals">
|
||
|
|
<table width="100%">
|
||
|
|
<tr>
|
||
|
|
{% for tax, base in bases.items %}
|
||
|
|
<td width="60%"> </td>
|
||
|
|
<td width="20%">Subtotal{% if bases.items|length > 1 %} (for {{ tax }}% taxes){% endif %}</td>
|
||
|
|
<td width="20%" class="amount">&{{ currency }}; {{ base }}</td>
|
||
|
|
{% endfor %}
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
{% for tax, value in taxes.items %}
|
||
|
|
<td width="60%"> </td>
|
||
|
|
<td width="20%">Total {{ tax }}%</td>
|
||
|
|
<td width="20%" class="amount" style="border-bottom: 1px solid #333;">&{{ currency }}; {{ value }}</td>
|
||
|
|
{% endfor %}
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td width="60%"> </td>
|
||
|
|
<td width="20%" class="total"><strong>Total</strong></td>
|
||
|
|
<td width="20%" class="amount total">&{{ currency }}; {{ total }}</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div id="simple">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td width="33%" style="padding-top: 5px;">IBAN</th>
|
||
|
|
<td width="34%" style="padding-top: 5px;">Invoice ID</th>
|
||
|
|
<td width="33%" style="padding-top: 5px;">Amount {{ currency.upper }}</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>NL28INGB0004954664</strong></td>
|
||
|
|
<td><strong>{{ bill.ident }}</strong></td>
|
||
|
|
<td><strong>{{ total }}</strong></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<p style="text-align:center;">The invoice is to be paid before <strong>{{ invoice.exp_date|date:"F jS, Y" }}</strong> with the mention of the invoice id.</p>
|
||
|
|
</div>
|
||
|
|
<div id="footerContent">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td width="33%">
|
||
|
|
{{ seller.name }}<br />
|
||
|
|
{{ seller.address }}<br />
|
||
|
|
{{ seller.city }}<br />
|
||
|
|
{{ seller.country }}<br />
|
||
|
|
</td>
|
||
|
|
<td width="5%">
|
||
|
|
Tel<br />
|
||
|
|
Web<br />
|
||
|
|
Email<br />
|
||
|
|
</td>
|
||
|
|
<td width="29%">
|
||
|
|
{{ seller_info.phone }}<br />
|
||
|
|
<a href="http://{{ seller_info.website }}">{{ seller_info.website }}</a><br />
|
||
|
|
{{ seller_info.email }}
|
||
|
|
</td>
|
||
|
|
<td width="8%">
|
||
|
|
Bank ING<br />
|
||
|
|
IBAN<br />
|
||
|
|
BTW<br />
|
||
|
|
KvK<br />
|
||
|
|
</td>
|
||
|
|
<td width="25%">
|
||
|
|
4954664<br />
|
||
|
|
NL28INGB0004954664<br />
|
||
|
|
NL 8207.29.449.B01<br />
|
||
|
|
27343027
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
Payment info
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|