{% load i18n l10n %}
{% load humanize %}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>{% trans 'Payment' %}</title>
</head>
<style type="text/css">
html,
body,
ul,
li,
ol,
p {
  margin: 0;
  padding: 0; }

/* Colors */
/* Brand, color, style */
/* Text */
/* Structures */
.dev-border {
  border: 1px solid red; }

/* fix class, ty God for this. */
.clear-fix {
  clear: both; }

/* Positional */
.left {
  float: left; }

.right {
  float: right; }

.center-block {
  text-align: center; }

.column-1 {
  width: 100%; }

.column-2 {
  width: 49%; }

.column-3 {
  width: 31.33333%; }

.column-4 {
  width: 22%; }

/* Brand, color, style */
.brand-link {
  color: #dcecf2; }

.brand-link:hover {
  color: #ff6900;
  cursor: pointer; }

.separator-bottom {
  line-height: 40px;
  border-bottom: 0.01em solid #000; }

/* Font */
.text-small {
  font-size: 4.5pt; }

.text-medium {
  font-size: 7.5pt; }

.text-large {
  font-size: 12pt; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.text-left {
  text-align: left; }

.text-error {
  color: #ff3333;
  font-weight: bold; }

.text-bold {
  font-weight: bold; }

/*  Structures */
.frame-with-title {
  background-color: #ffffff; }
.frame-with-title p > span {
font-style: italic;
font-weight: bold;
margin: 0 0 0 0.3em; }
.frame-with-title p:first-child:before {
display: inline-block;
content: " ";
width: 0.3em; }
.frame-with-title p:first-child {
color: white;
background-color: #000000;
font-size: 7.5pt;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-clip: padding-box;
/* stops bg color from leaking outside the border: */ }
.frame-with-title p:not(:first-child) {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
line-height: 2em; }
.frame-with-title p:last-child {
border-bottom: 1px solid #000000; }
    
.page-break {
    display: block;
    page-break-before: always; }

html {
  background-color: #ffffff;
  width: 90%;
  float: right; }

body {
  font-size: 7.5pt;
  font-family: Tahoma, sans-serif;
  color: #000000; }

ul > li {
  list-style: none;
  line-height: 1.2em; }

a {
  text-decoration: none; }

table {
  border-collapse: collapse; }

.header {
  margin: 0 0 4% 0; }

.invoice-description {
   padding-left: 6%;}

#invoice-summary > p,
#invoice-details > p,
#wire-instructions {
  padding-left: 10%; }

.client-description {
  margin: 0 0 0 1%; }

.invoice-header-info {
  background-color: #BFFFFF;
  margin: 0 0 1% 0;
  padding: 1% 0;
  min-height: 180px; }

.invoice-description ul:first-child li:first-child {
  /*margin: 5% 0 12% 0; */
  line-height: 60pt;}

.client-description {
  margin-left: 15%;}

.client-description ul:first-child li:first-child {
  /*margin: 13% 0 26% 0; */
  line-height: 60pt;}

.issuer-logo-article,
.issuer-info {
  height: 60px; }

.issuer-logo-img {
  height: 100%;
  vertical-align: top; }

.issuer-info ul {
  height: 100%;
  margin: 3% 0 0 0; }

.issuer-info ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  line-height: 1.2em; }

#invoice-summary {
	min-height: 600px; }

#invoice-summary {
  margin: 0 0 3% 0;
  padding: 3% 0; }

#invoice-details {
  margin: 0 0 1% 0;
  padding: 3% 0; }

#invoice-summary > p,
#invoice-details > p {
  font-size: 14pt;
  margin: 0 0 1% 0; }

#invoice-summary,
#summary-table,
#invoice-details,
#details-table {
  background-color: #E6FFFF; }

#details-table table tr:first-child {
  font-weight: bold;
  text-align: left;
  margin: 5% 0 0 0;}

#summary-table > table,
#details-table > table {
  width: 80%;
  margin: auto; }

#summary-table > table > tbody > tr:first-child > td,
#details-table > table > tbody > tr:first-child > td {
  padding: 3% 0; }

#summary-table > table > tbody > tr:nth-last-child(3) > td {
  padding: 3% 0 0 0; }

#summary-table > table > tbody > tr:nth-last-child(2) > td,
#summary-table > table > tbody > tr:last-child > td {
  padding: 2% 0 0 0; }

#details-table {
  padding-bottom: 5%;}
  
#details-table > table > tbody > tr:nth-last-child(2) {
  /*line-height: 40px;*/
  /*margin-bottom: 5%;*/
  border-bottom: 0.01em solid #000; }

#details-table > table > tbody > tr > td {
  text-align: right; }

#details-table > table > tbody > tr > td:first-child {
  text-align: left; }

#details-table > table > tbody > tr:last-child > td {
  text-align: right;
  font-weight: bold;
  line-height: 40px; }

#wire-instructions > article > ul > li:first-child {
  margin: 0 0 1% 0; }

</style>
<body>
	<section class="header">
		<article class="issuer-logo-article column-2 left">
			<!-- <img class="issuer-logo-img" src="../img/logos/sultan_diamond_header.png" alt="Sultan Telecom"> -->
			<img class="issuer-logo-img" src="{{data_bill.url_img}}" alt="{{data_bill.issuing_company_name}}">
		</article>

		<article class="issuer-info column-2 right">
			<ul class="column-2 left">
				<li class="text-bold">{{data_bill.issuing_company_name}}</li>
				<li>{{data_bill.issuing_company_address}}</li>
				<li>{{data_bill.issuing_company_address_2}}</li>
				<li>{{data_bill.issuing_company_zipcode}} - {{data_bill.issuing_company_city}}</li>
			</ul>
			<ul class="column-2 right">
				<li>Phone: {{data_bill.issuing_company_phone}}</li>
				<li>{{data_bill.issuing_company_email}}</li>
				<li>CIF: {{data_bill.issuing_company_CIF}}</li>
			</ul>
		</article>

		<p class="clear-fix"></p>
	</section>

	<section class="invoice-header-info">
		<article class="invoice-description left">
			<ul>
				<li class="text-large">Invoice</li>
				<li class="text-bold">Issue Date: {{data_bill.issue_date|date:"Y-m-d" }}</li>
			</ul>
			<ul>
				<li>
					<span class="text-bold">Period Date:</span> {{data_bill.from_date|date:"Y-m-d" }} to {{data_bill.to_date|date:"Y-m-d" }}
				</li>		
				<li>
					<span class="text-bold">Due date:</span> {{data_bill.due_date|date:"Y-m-d" }}
				</li>
				<li>
					<span class="text-bold">Timezone:</span> {{data_bill.paier_timezone}}
				</li>
				<li>
					<span class="text-bold">Currency:</span> {{data_bill.currency}}
				</li>
			</ul>			
		</article><!-- / -->
		<article class="client-description left">
			<ul>
				<li class="text-large">Client Info</li>
				<li class="text-bold">{{data_bill.paier_name}}</li>
				<li>{{data_bill.paier_address}} {{data_bill.paier_address_2}}</li>
				<li>{{data_bill.paier_zipcode}} - {{data_bill.paier_city}}</li>
				{% if data_bill.paier_vatregionaltype == 'National'%}
					<li>CIF: {{data_bill.paier_CIF}}</li>
				{% else %}
					<li>VAT: {{data_bill.paier_CIF}}</li>
				{% endif %}	
				<!-- <li>Phone: {{data_bill.paier_phone}}</li> -->
				<li>{{data_bill.paier_email}}</li>
			</ul>
		</article><!-- / -->	

		<p class="clear-fix"></p>			
	</section>

	<section id="invoice-summary" class="column-1">
		<p>Summary</p>
		<article id="summary-table" class="text-center">
			<table class="text-medium">
				<tbody>
					<tr class="text-bold">
						<td class="text-left">PERIOD</td>
						<td class="text-right">CALLS</td>
						<td class="text-right">MINUTES</td>
						<td class="text-right">AMOUNT</td>
					</tr>	
					<tr class="">
						<td class="text-left">{{data_bill.from_date|date:"d-M-Y" }} to {{data_bill.to_date|date:"d-M-Y" }}</td>
						<td class="text-right">{{data_bill.calls|floatformat:0}}</td>
						<td class="text-right">{{data_bill.minutes|floatformat:2}}</td>
						{% if data_bill.currency == 'EUR'%}
							<td class="text-right">{{data_bill.total_euro}} </td>
						{% else %}
							<td class="text-right">{{data_bill.total_dollar}}</td>
						{% endif %}	
					</tr>	
					<tr class="text-bold">
						<td colspan="2" class="text-right separator-bottom">{{data_bill.calls|floatformat:0}}</td>
						<td class="text-right separator-bottom">{{data_bill.minutes|floatformat:2}}</td>
						{% if data_bill.currency == 'EUR'%}
							<td class="text-right separator-bottom">{{data_bill.subtotal_euro}}</td>
						{% else %}
							<td class="text-right separator-bottom">{{data_bill.subtotal_dollar}}</td>
						{% endif %}					
					</tr>
					<tr class="text-bold">
						{% if data_bill.paier_vatregionaltype == 'National'%}
							<td colspan="2"></td>
							<td class="text-right separator-bottom">IVA {{data_bill.VAT}}%</td>
							{% if data_bill.currency == 'EUR'%}
								<td class="text-right separator-bottom">{{data_bill.vat_total_euro}}</td>
							{% else %}
								<td class="text-right separator-bottom">{{data_bill.vat_total_dollar}}</td>
							{% endif %}
						{% endif %}						
					</tr>					
					<tr class="text-bold">
						<td colspan="3" class="text-right">TOTAL</td>
						{% if data_bill.currency == 'EUR'%}
							<td class="text-right">{{data_bill.total_euro}} {{data_bill.type_money}}</td>
						{% else %}
							<td class="text-right">{{data_bill.type_money}} {{data_bill.total_dollar}}</td>
						{% endif %}				
					</tr>	
				</tbody>
			</table>
		</article>
	</section>

	<section id="wire-instructions">
		<article>
			<ul>
				<li class="text-large">Wire instructions</li>
				<li>Benef. Account Name: {{data_bill.issuing_company_name}}</li>
				<li>Bank: {{data_bill.bank_name}}</li>
				<li>Swift Code: {{data_bill.SWIFT}}</li>
				<li>IBAN: {{data_bill.IBAN}}</li>
				<!-- <li>IBAN USD: ES59 0049 1812 8727 1125 0878</li> -->
			</ul>
		</article>
	</section>

	<div class="page-break"></div>

	<section class="header">
		<article class="issuer-logo-article column-2 left">
			<!-- <img class="issuer-logo-img" src="../img/logos/sultan_diamond_header.png" alt="Sultan Telecom"> -->
			<img class="issuer-logo-img" src="{{data_bill.url_img}}" alt="{{data_bill.issuing_company_name}}">
		</article>

		<article class="issuer-info column-2 right">
			<ul class="column-2 left">
				<li class="text-bold">{{data_bill.issuing_company_name}}</li>
				<li>{{data_bill.issuing_company_address}}</li>
				<li>{{data_bill.issuing_company_address_2}}</li>
				<li>{{data_bill.issuing_company_zipcode}} - {{data_bill.issuing_company_city}}</li>
			</ul>
			<ul class="column-2 right">
				<li>Phone: {{data_bill.issuing_company_phone}}</li>
				<li>{{data_bill.issuing_company_email}}</li>
				<li>CIF: {{data_bill.issuing_company_CIF}}</li>
			</ul>
		</article>

		<p class="clear-fix"></p>
	</section>


	<section class="invoice-header-info">
		<article class="invoice-description left">
			<ul>
				<li class="text-large">Invoice</li>
				<li class="text-bold">Issue Date: {{data_bill.issue_date|date:"Y-m-d" }}</li>
			</ul>
			<ul>
				<li>
					<span class="text-bold">Period Date:</span> {{data_bill.from_date|date:"Y-m-d" }} to {{data_bill.to_date|date:"Y-m-d" }}
				</li>		
				<li>
					<span class="text-bold">Due date:</span> {{data_bill.due_date|date:"Y-m-d" }}
				</li>
				<li>
					<span class="text-bold">Timezone:</span> {{data_bill.paier_timezone}}
				</li>
				<li>
					<span class="text-bold">Currency:</span> {{data_bill.currency}}
				</li>
			</ul>			
		</article><!-- / -->
		<article class="client-description left">
			<ul>
				<li class="text-large">Client Info</li>
				<li class="text-bold">{{data_bill.paier_name}}</li>
				<li>{{data_bill.paier_address}} {{data_bill.paier_address_2}}</li>
				<li>{{data_bill.paier_zipcode}} - {{data_bill.paier_city}}</li>
				{% if data_bill.paier_vatregionaltype == 'National'%}
					<li>CIF: {{data_bill.paier_CIF}}</li>
				{% else %}
					<li>VAT: {{data_bill.paier_CIF}}</li>
				{% endif %}	
				<!-- <li>Phone: {{data_bill.paier_phone}}</li> -->
				<li>{{data_bill.paier_email}}</li>
			</ul>
		</article><!-- / -->	

		<p class="clear-fix"></p>			
	</section>

	<section id="invoice-details">
		<p>Details</p>
		<article id="details-table" class="text-center">
			{% if data_bill.raw_cdrts_by_person%}
				{% for client,data_client in data_bill.raw_cdrts_by_person.items%} 
					<table class="text-medium">
						<tbody>
							<tr>
								<td colspan="5">{{client}}</td>
							</tr>
							<tr class="text-bold">
								<td>DESTINATION</td>
								<td>RATE</td>
								<td>CALLS</td>
								<td>MINUTES</td>
								<td>TOTAL</td>
							</tr>		

							{% for data in data_client.rows%}
								<tr>
									<td>{{data.destination__destination}}</td>
									{% if data_bill.currency == 'EUR'%}
										<td>{{data.rate_euro}}&euro;</td>
									{% else %}
										<td>${{data.rate_dollar}}</td>
									{% endif %}						
									<td>{{data.calls}}</td>
									<td>{{data.minutes|floatformat:4}}</td>
									{% if data_bill.currency == 'EUR'%}
										<td>{{data.total_euro|floatformat:4}}</td>
									{% else %}
										<td>{{data.total_dollar|floatformat:4}}</td>
									{% endif %}
								</tr>
							{% endfor %}	
							<tr>
								<td colspan="3" class="text-right">{{data_client.calls|floatformat:0}}</td>
								<td class="text-right">{{data_client.minutes|floatformat:2}}</td>
								{% if data_bill.currency == 'EUR'%}
									<td colspan="2" class="text-right">{{data_client.subtotal_euro}}&euro;</td>
								{% else %}
									<td colspan="2" class="text-right">${{data_client.subtotal_dollar}}</td>
								{% endif %}					
							</tr>
						</tbody>
					</table>
				{% endfor %}	
				<!--
				<table>
					<tr>
						<td colspan="" rowspan="" headers="">Overall</td>
						<td colspan="" rowspan="" headers="">CALLS</td>
						<td colspan="" rowspan="" headers="">MINUTES</td>
						<td colspan="" rowspan="" headers="">TOTAL</td>
					</tr>
					<tr>
						<td colspan="2" class="text-right">{{data_bill.calls|floatformat:0}}</td>
						<td class="text-right">{{data_bill.minute|floatformat:2}}</td>
						{% if data_bill.currency == 'EUR'%}
							<td colspan="2" class="text-right">{{data_bill.subtotal_euro}}{{data_bill.type_money}}</td>
						{% else %}
							<td colspan="2" class="text-right">{{data_bill.type_money}}{{data_bill.subtotal_dollar}}</td>
						{% endif %}					
					</tr>
				</table>
				-->
			{% else %}
				<table class="text-medium">
					<tbody>
						<tr class="text-bold">
							<td>DESTINATION</td>
							<td>RATE</td>
							<td>CALLS</td>
							<td>MINUTES</td>
							<td>TOTAL</td>
						</tr>	
						{% for data in data_bill.raw_cdrts%}	
							<tr>
								<td>{{data.destination__destination}}</td>
								{% if data_bill.currency == 'EUR'%}
									<td>{{data.rate_euro}}&euro;</td>
								{% else %}
									<td>${{data.rate_dollar}}</td>
								{% endif %}						
								<td>{{data.calls}}</td>
								<td>{{data.minutes|floatformat:4}}</td>
								{% if data_bill.currency == 'EUR'%}
									<td>{{data.total_euro|floatformat:4}}</td>
								{% else %}
									<td>{{data.total_dollar|floatformat:4}}</td>
								{% endif %}
							</tr>
						{% endfor %}
						<tr>
							<td colspan="3" class="text-right">{{data_bill.calls|floatformat:0}}</td>
							<td class="text-right">{{data_bill.minutes|floatformat:2}}</td>
							{% if data_bill.currency == 'EUR'%}
								<td colspan="2" class="text-right">{{data_bill.subtotal_euro}}&euro;</td>
							{% else %}
								<td colspan="2" class="text-right">${{data_bill.subtotal_dollar}}</td>
							{% endif %}					
						</tr>
					</tbody>
				</table>
			{% endif %}
		</article>		
	</section>

	<div class="page-break">
	</div>	

</body>
</html>