<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>facturation</title>
	<style>
		/* invoice */
		@page {
				 size: A4; /* Change from the default size of A4 */
				 margin: 0mm; /* Set margin on each page */
    }
		 .clearfix:after {
				 content: "";
				 display: table;
				 clear: both;
		}
		 #invoice a {
				 text-decoration: none;
				 color: #001028;
		}
		 #invoice {
				 /* position: absolute; */
				 width: 18cm;
				 /* height: auto; */
				 margin: 0 auto;
				 padding-left: 1cm;
				 padding-right: 1cm;
				 color: #001028;
				 background: #FFFFFF;
				 font-family: "Helvetica Neue", Helvetica, sans-serif;
				 font-size: 12px;
				 border: none;
		}

		 #invoice header {
				 width: 100%;
				 padding: 10px 0;
				 margin-bottom: 10px;
		}
		 #invoice #project {
				 height: 3cm;
				 font-size: 1.2em;
				 font-weight: bold;
				 font-style: italic;
				 float: left;
				 text-align: left;
				 line-height: 1.2em;
				 margin-top: 0.5cm;
		}
		 #invoice #slogan {
				 height: 3cm;
				 font-size: 1.3em;
				 font-weight: bold;
				 float: right;
				 text-align: left;
				 line-height: 1.2em;
				 margin-top: 0.5cm;
				 margin-right: 2.5cm;
		}
		 #invoice #contact{
				 width: 70%;
				 height: 2cm;
				 font-size: 1.2em;
				 font-weight: 300;
				 font-style: italic;
				 float: left;
				 text-align: left;
				 line-height: 1.2em;
		}
		 #invoice #company {
				 font-size: 1.2em;
				 font-weight: 400;
				 height: 2cm;
		}
		 #invoice #facture {
				 width: 70%;
				 height: 1cm;
				 font-size: 1.2em;
				 font-weight: bold;
				 float: left;
				 text-align: left;
				 line-height: 1.2em;
		}
		 #invoice #date {
				 height: 1cm;
				 font-size: 1.2em;
				 line-height: 1.2em;
		}
		 #invoice .arts {
				 min-height: 5cm;
		}
		 #invoice #order {
				 border-collapse: collapse;
				 border: 1px solid;
				 width: 100%;
				 font-size: 10px;
				 padding-left: 0.5cm;
		}
		 #invoice #order th {
				 text-align: center;
				 border: 1px solid;
		}
		 #invoice #order td {
				 border: 1px solid black;
				 border-top: none;
				 border-bottom: none;
				 padding-right: 5px;
		}
		 #invoice #order tr {
				 height: 0.5cm;
		}
		 #invoice #order:nth-child(2) {
				 margin-top: 2.5cm;
		}
		 #invoice #order td.unit, #invoice #order td.qty, #invoice #order td.total, #invoice #order td.tva {
				 font-size: 1em;
				 text-align: right;
		}
		 #invoice #order td.desc {
				 text-align: left;
				 width: 60%;
				 padding-left: 5px;
		}
		 #invoice #order td.unit {
				 width: 9%;
		}
		 #invoice #order td.qty {
				 width: 7%;
		}
		 #invoice #order td.total {
				 width: 10%;
				 font-weight: bold;
		}
		 #invoice #order td.tva {
				 width: 7%;
		}
		 #invoice .Snd {
				 margin-top: 2cm;
		}
		 #invoice #tva {
				 height:3cm;
				 margin-top: 0.3cm;
				 width: 50%;
				 float: left;
				 text-align: left;
		}
		 #invoice #tva span {
				 font-weight: bold;
				 color: #999;
				 font-size :14px;
		}
		 #invoice #tva table {
				 padding: 10px 0;
				 margin-bottom: 30px;
				 border-collapse: collapse 1px solid;
		}
		 #invoice #tva table td ,#tva table th {
				 padding: 2px 5px 5px 30px;
				 margin-bottom: 30px;
				 border-collapse: collapse 1px solid;
				 background : #f2f2f2;
				 font-weight: bold;
		}
		 #invoice #tva table th {
				 text-align:center;
		}
		 #invoice #tva table td {
				 text-align:right;
		}
		 #invoice #montant {
				 height:3cm;
				 margin-top: 0.9cm;
		}
		 #invoice #montant span {
				 float :right;
				 margin-top :0.4cm;
		}
		 #invoice #montant table {
				 width:45%;
		}
		 #invoice #montant table td.first {
				 width :65%;
				 font-weight: bold;
				 padding: 2px 0;
		}
		 #invoice #montant table td.last {
				 width :35%;
				 font-weight: bold;
				 text-align :right;
				 padding: 2px 0;
		}
		 #notices {
				 width: 540px;
				 font-size: 1em;
				 text-align: center;
				 position: absolute;
				 left: 0;
				 right: 0;
				 bottom: 15px;
				 margin-left: auto;
				 margin-right: auto;
		}
	</style>
</head>
<body>
<div id="invoice">
	<header class="clearfix">
		<div id="project">
			PMARKET SAS
			<br>37 Rue Joseph Marion
			<br>01200 Valserhone
			<br>06 05 78 77 12
		</div>
		<div id="slogan" class="clearfix">
			Osez l'originalité
		</div>
		<div class="clearfix"> </div>
		<div id="contact">
		</div>
		<div id="company">
			{{ order.clientName }}
			<br>{{ order.street }}
			<br>{{ order.postalCode }} {{ order.city }}
		</div>
		<div class="clearfix"></div>
		<div id="facture">
			Facture nº {{ order.date | format_date('%Y') }}-{{ order.orderId }}
		</div>
		<div id="date">
			Date: {{ order.date | format_date('%Y-%m-%d') }}
		</div>
	</header>
	<main>
		<table id="order">
			<thead>
				<tr>
					<th class="desc">Désignation</th>
					<th class="unit">Prix unit.</th>
					<th class="qty">Qté</th>
					<th class="total">Montant</th>
					<th class="tva">TVA</th>
				</tr>
			</thead>
			<tbody>
				{% for article in articles[:37] %}
				<tr>
					<td class="desc">{{ article.designation }}</td>
					<td class="unit">{{ article.price | round(2) }}</td>
					<td class="qty">{{ article.quantity }}</td>
					<td class="total">{{ (article.quantity * article.price) | round(2) }}</td>
					<td class="tva">{{ article.tva }}%</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
		{% if articles|length > 37 %}
    		<div style="page-break-before: always;"></div>
		<table id="order" class="Snd">
		        <thead>
				<tr>
					<th class="desc">Désignation</th>
					<th class="unit">Prix unit.</th>
					<th class="qty">Qté</th>
					<th class="total">Montant</th>
					<th class="tva">TVA</th>
				</tr>
			</thead>
			<tbody>
				{% for article in articles[37:] %}
				<tr>
					<td class="desc">{{ article.designation }}</td>
					<td class="unit">{{ article.price | round(2) }}</td>
					<td class="qty">{{ article.quantity }}</td>
					<td class="total">{{ (article.quantity * article.price) | round(2) }}</td>
					<td class="tva">{{ article.tva }}%</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
		{% endif %}

		<div class="clearfix"></div>
		<div id="tva">
			<span>Détail TVA:</span>
			<table>
				<thead>
					<tr>
						<th>Base</th>
						<th>Taux</th>
						<th>TVA</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>{{ base7 | round(2) }}</td>
						<td>20%</td>
						<td>{{ tva7 | round(2) }}</td>
					</tr>
					<tr>
						<td>{{ base2 | round(2) }}</td>
						<td>5.5%</td>
						<td>{{ tva2 | round(2) }}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div id="montant">
      			<table>
        			<tbody>
          				<tr>
						<td class="first">Total net</td>
						<td class="last ng-binding">{{ totalHT | round(2) }}</td>
					</tr>
					<tr>
						<td class="first">TVA</td>
						<td class="last ng-binding">{{ totalTVA | round(2) }}</td>
					</tr>
					<tr>
						<td class="first">Montant total TTC</td>
						<td class="last ng-binding">{{ totalTTC | round(2) }}</td>
					</tr>
				</tbody>
			</table>
			<span class="ng-binding"></span>
		</div>
		<div class="clearfix"></div>
		<div id="notices">
			Siret : 89355363600018 - APE : 4690Z - N° TVA intracom : FR57893553636 - Capital : 100,00 €<br>RIB : FR8220041010072187459W03806<br>Avec nos remerciements pour votre commande.
		</div>
	</main>
</div>
</body>
</html>
