{% 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>
		<!-- Date: 2010-12-15 -->
		<!-- <link rel="stylesheet" type="text/css" media="screen" href="{{ STATIC_URL }}css/layout.css" /> -->

		<script type="text/javascript">

			// function getAbsolutePath() {
			// 	var loc = window.location;
			// 	var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
			// 	return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
			// }

			// window.onload = function(){
			// 	img_url = getAbsolutePath().replace(window.location.pathname,'')+'/media/{{payment.company.company_image}}';
			// 	console.log(window.location.href.replace(window.location.pathname,''));
			// 	console.log(window.location.href);
			// 	document.getElementById('payment_img').innerHTML = '<img src="'+img_url+'" alt="">';
			// }


		</script>

		<style type="text/css">
	

/*			#payment_info p:first-child{
				font-weight: bold;
				font-size: 24pt;
				line-height: 0px;
				text-align: center;
			}

			#payment_info p:last-child span{
				font-weight: bold;
			}*/

			#date_info{
				margin-top: 10px;
				font-size: 10pt;
				float: left;
				background-color: #FFE8E8;
				
			}

			.estimated_provider{
				/*border: 3px black solid;*/
				font-size: 12pt;
				margin-top: 12px;
				margin-left: 200px;
				background-color: red;
				float:left;
				text-align:center;
				padding: 4px;
				border: 1px black solid;
			}


			#period_info{
				/*border: 3px black solid;*/
				font-size: 10pt;
				margin-top: 10px;
				background-color: #FFE8E8;
				float:left;
				text-align:center;
			}

			#dates_info{

				margin-top:20px;
				padding: 5px;
				text-align:center;

			}


			#provider_info{
				float:right;
			}



			#payment_data,
			.payment_data_person{
				margin-top: 15px;
			}



			#payment_data table,
			.payment_data_person table{
				width: 100%;
				border-width: 1px;
				border-style: outset;
				border-color: black;
				border-collapse: collapse;
			}

			#payment_data table thead tr td,
			#payment_data table tbody tr td,
			#payment_data table tfoot tr td,
			.payment_data_person table thead tr td,
			.payment_data_person table tbody tr td,
			.payment_data_person table tfoot tr td
			{
				/*width: 20%;*/
				text-align: right;
			}

			#payment_data table thead tr td,
			.payment_data_person table thead tr td,
			{
				font-weight: bold;
				background-color: #D7D6D2;
			}
			

			#payment_data table tfoot tr td,
			.payment_data_person table tfoot tr td{
				font-weight: bold;
				background-color: #F7F7F7;
			}

			caption{
				font-weight: bold;
				font-style: italic;
			}

			#payment_data table thead,
			#payment_data table tbody tr,
			.payment_data_person table thead,
			.payment_data_person table tbody tr{
				/*border-bottom: 1px black solid;*/
			}
			
			#provider_payment_total_tr,
			.payment_total_person_tr{
				/*border-top: 1px solid black;*/
			}



			.strong_font{
				font-weight: bold;
			}

			.clear-fix{
				clear: both;
			}


			/*******************************   HEADER   *********************/
			#header_bill{
				/*border:1px solid green;*/
				display: inline-block;
				width:100%;
			}

			#title_bill{
				/*border:1px solid red;*/
				width :40%;
				float:left;
			}

			#payment_img{
				width: 20%;
				float:left;
				/*border: 1px green solid;*/
			}
			#payment_img img{
				width: 100%;
				max-height: 117px;
			}


			#payment_info{
				width: 40%;
				float: right;
				margin-top: 60px;
				background-color: #FFB3B3;
				/*margin: 0 0 0 6px;*/

			}

			/********************************* ISSUER    PAIER*********************/
			#issuer{
				width: 40%;
				border: 1px solid black;
				margin: 0 0 0 3px;
				display: inline-block;
				float:right;
			}

			#paier{
				width: 40%;
				/*border: 2px solid black;*/
				margin: 0 0 0 3px;
				display: inline-block;
			}

			/*************************   DATA BANK PAYMENT **/
			#provider_payment_bank_info{
				/*background-color: #FFE8E8;*/
			}

			.provider_payment_bank_info_list{
				list-style: none;
				/*border:	1px green solid;*/
				float: left;
				width: 50%;
			}
			.page-break{
     		   	page-break-before: always;
    		}
		</style>

	</head>
	<body>
		<header id="header_bill" class="">
			{% if data_bill.type == 'provider' %}
				<section class="estimated_provider" >
					<center> <span class='strong_font'>	PRO FORMA INVOICE </span> </center>
				</section><!-- / -->
			{% else %}	
				<section id="payment_info" class="">
					<span class='strong_font'>{%trans 'Invoice number'%}:</span> {{data_bill.invoice_number}}
				</section><!-- / -->

			
				<section id='title_bill'>
			
				</section>

				<section id="payment_img" class="">
					<img src='{{data_bill.url_img}}'/>
				</section>

			{% endif %}	


		</header><!-- /header -->

		<article id='info_payment'>

		{% if data_bill.type != 'provider' %}

			<div id="paier" class="">

				Payer: <b> {{data_bill.paier_name}}</b><br />
				Address:<b>{{data_bill.paier_address}}</b><br />
				<b>{{data_bill.paier_zipcode}} ({{data_bill.paier_city}})</b><br />
				CIF: <b>{{data_bill.paier_CIF}}</b><br />
				Phone: <b>{{data_bill.paier_phone}}</b><br />
				Email:<b> {{data_bill.paier_email}}</b><br />
			</div><!-- / -->


			<div id="issuer" class="">
				Issuer:<b>{{data_bill.issuing_company_name}}</b> <br />
				Address: <b>{{data_bill.issuing_company_address}}</b><br />
				<b>{{data_bill.issuing_company_zipcode}} ({{data_bill.issuing_company_city}})</b><br />
				CIF: <b>{{data_bill.issuing_company_CIF}}</b><br />
				Phone: <b>{{data_bill.issuing_company_phone}}</b><br />
				Email: <b>{{data_bill.issuing_company_email}}</b><br />	
			</div><!-- / -->

		{% else %}	


			<div id="paier" class="">
				Issuer:<b>{{data_bill.issuing_company_name}}</b> <br />
				Address: <b>{{data_bill.issuing_company_address}}</b><br />
				<b>{{data_bill.issuing_company_zipcode}} ({{data_bill.issuing_company_city}})</b><br />
				CIF: <b>{{data_bill.issuing_company_CIF}}</b><br />
				Phone: <b>{{data_bill.issuing_company_phone}}</b><br />
				Email: <b>{{data_bill.issuing_company_email}}</b><br />	
			</div><!-- / -->

		{% endif %}
		<br />

		</article>

		<br />
		<article id="payment_data" class="">
			<br />
			<table>
				<thead>
					<tr>
						<td style ='text-align:left'>{% trans 'Destination' %}</td>
						<td>{% trans 'Calls' %} </td>
						<td>{% trans 'Minutes' %}</td>
						<td>{{data_bill.type_money}}/Min</td>
						<td>{% trans 'Total' %} ({{data_bill.type_money}})</td>
					</tr>
				</thead>
				<tbody>
					{% for data in data_bill.raw_cdrts%}
						<tr>
							<td style ='text-align:left'>{{data.destination__destination}}</td>
							<td style='width:100px'>{{data.calls}}</td>
							<td style='width:120px'>{{data.minute|floatformat:0}}:{{data.second|floatformat:0}}s</td>
							{% if data_bill.currency == 'EUR'%}
								<td style='width:100px'>{{data.rate_euro}}</td>
								<td style='width:120px'>{{data.total_euro|floatformat:4}}</td>
							{% else %}
								<td style='width:100px'>{{data.rate_dollar}}</td>
								<td style='width:120px'>{{data.total_dollar|floatformat:4}}</td>
							{% endif %}
						</tr>
					{% endfor %}
				</tbody>

				<tfoot>
					<tr>
						
						<td ></td>
						<td >{{data_bill.calls|floatformat:0}}</td>
						<td > {{data_bill.minute|floatformat:0}}:{{data_bill.second|floatformat:0}}s</td>
						<td> </td>
						{% if data_bill.currency == 'EUR'%}
							<td>{{data_bill.subtotal_euro}}  {{data_bill.type_money}}</td>
						{% else %}
							<td>{{data_bill.type_money}}  {{data_bill.subtotal_dollar}}</td>
						{% endif %}
					</tr>
					<tr>
						<td colspan="4">{% trans 'VAT'%}</td>
						<td>{{data_bill.VAT}}%</td>
					</tr>
					<tr id="provider_payment_total_tr">
						<td colspan="4">{% trans 'Total'%}</td>
						{% if data_bill.currency == 'EUR'%}
							<td>{{data_bill.total_euro}} {{data_bill.type_money}}</td>
						{% else %}
							<td>{{data_bill.type_money}}  {{data_bill.total_dollar}}</td>
						{% endif %}
					</tr>
				</tfoot>
			</table>
		</article><!-- / -->
			

		<article id="dates_info">
			<section id="date_info">
				<span class='strong_font'>{% trans 'Issue Date' %}:</span> {{data_bill.issue_date|date:"Y-m-d H:i:s O" }}  &nbsp &nbsp &nbsp  <span class='strong_font'>{% trans 'Due Date' %}:</span> {{data_bill.due_date|date:"Y-m-d H:i:s O" }}
			</section>


			<section id="period_info" >
				<span class="strong_font">{% trans 'From' %}:</span> {{data_bill.from_date|date:"Y-m-d H:i:s O" }}&nbsp &nbsp <span class="strong_font">{% trans 'To' %}:</span> {{data_bill.to_date|date:"Y-m-d H:i:s O" }}
			</section><!-- / -->
			<p class="clear-fix"></p>

		</article>


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

		<article id="provider_payment_bank_info">
			
			<section>

				<ul id="" class="provider_payment_bank_info_list">
					<span class='strong_font'> Wire Instructions </span>
					<li><span class='strong_font'>{%trans 'Bank name'%}:</span> {{data_bill.bank_name}}</li>
					<li><span class='strong_font'>{%trans 'Account'%}:</span> {{data_bill.account}}</li>
					<li><span class='strong_font'>{%trans 'IBAN'%}:</span> {{data_bill.IBAN}}</li>
					<li><span class='strong_font'>{%trans 'SWIFT'%}:</span> {{data_bill.SWIFT}}</li>

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


			<br /><br />

			{% if data_bill.type != 'provider' %}
				<section id="Company_description" >
					{{data_bill.issuing_company_description}}
				</section><!-- / -->

			{% endif %}

		{% if data_bill.type == 'provider' %}
			<section class="estimated_provider" >
				<center> <span class='strong_font'>	PRO FORMA INVOICE </span> </center>
			</section><!-- / -->
		{% endif %}
 
		</article>

		{% for person,data_person in data_bill.raw_cdrts_by_person.items %}
			<p class="clear-fix"></p>
			<div class='page-break'></div>
			<br /><br />
			<h2>{{person}}</h2>
			<article class="payment_data_person">
				<br />
				<table>
					<thead>
						<tr>
							<td style ='text-align:left'>{% trans 'Destination' %}</td>
							<td>{% trans 'Calls' %} </td>
							<td>{% trans 'Minutes' %}</td>
							<td>{{data_bill.type_money}}/Min</td>
							<td>{% trans 'Total' %} ({{data_bill.type_money}})</td>
						</tr>
					</thead>
					<tbody>
						{% for data in data_person.rows%}
							<tr>
								<td style ='text-align:left'>{{data.destination__destination}}</td>
								<td style='width:100px'>{{data.calls}}</td>
								<td style='width:120px'>{{data.minute|floatformat:0}}:{{data.second|floatformat:0}}s</td>
								{% if data_bill.currency == 'EUR'%}
									<td style='width:100px'>{{data.rate_euro}}</td>
									<td style='width:120px'>{{data.total_euro|floatformat:4}}</td>
								{% else %}
									<td style='width:100px'>{{data.rate_dollar}}</td>
									<td style='width:120px'>{{data.total_dollar|floatformat:4}}</td>
								{% endif %}
							</tr>
						{% endfor %}
					</tbody>

					<tfoot>
						<tr>
							
							<td ></td>
							<td >{{data_person.calls|floatformat:0}}</td>
							<td > {{data_person.minute|floatformat:0}}:{{data_person.second|floatformat:0}}s</td>
							<td> </td>
							{% if data_bill.currency == 'EUR'%}
								<td>{{data_person.subtotal_euro}}  {{data_bill.type_money}}</td>
							{% else %}
								<td>{{data_bill.type_money}}  {{data_person.subtotal_dollar}}</td>
							{% endif %}
						</tr>
						<tr>
							<td colspan="4">{% trans 'VAT'%}</td>
							<td>{{data_bill.VAT}}%</td>
						</tr>
						<tr class="payment_total_person_tr">
							<td colspan="4">{% trans 'Total'%}</td>
							{% if data_bill.currency == 'EUR'%}
								<td>{{data_person.total_euro}} {{data_bill.type_money}}</td>
							{% else %}
								<td>{{data_bill.type_money}}  {{data_person.total_dollar}}</td>
							{% endif %}
						</tr>
					</tfoot>
				</table>
			</article><!-- / -->

		{% endfor %}



		<footer></footer>
	</body>
</html>
