<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>.:: RECIBO DE PAGO ::.</title>
<style>
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

a {
  color: #5D6975;
  text-decoration: underline;
}

body {
  position: relative;
/*  width: 15cm;
  height: 29.7cm;*/
  margin: 0 auto;
  color: #001028;
  background: #FFFFFF;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-family: Arial;
}

header {
  padding: 5px 0;
  margin-bottom: 1px;
}

#logo {
  text-align: center;
  margin-bottom: 10px;
}

#logo img {
  width: 90px;
}

h4 {
  border-top: 1px solid  #5D6975;
  border-bottom: 1px solid  #5D6975;
  color: #5D6975;
  font-size: 1.8em;
  line-height: 1.4em;
  font-weight: bold;
  text-align: center;
/*  margin: 0 0 20px 0;
  background: url(dimension.png);    */
}

.hrec {
  border-top: 1px solid  #5D6975;
  border-bottom: 1px solid  #5D6975;
  color: #5D6975;
  font-size: 1.8em;
  line-height: 1.4em;
  font-weight: bold;
  text-align: center;
/*  margin: 0 0 20px 0;
  background: url(dimension.png);    */
}

#project {
  float: left;
}

#project span {
  color: #5D6975;
  text-align: right;
  width: 52px;
/*  margin-right: 10px;       */
  display: inline-block;
  font-size: 0.8em;
}

#company {
  float: right;
  text-align: right;
}

#project div,
#company div {
  white-space: nowrap;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 3px;
}

table tr:nth-child(2n-1) td {
  background: #F5F5F5;
}

table th,
table td {
  text-align: center;
}

table th {
  padding: 2px 3px;
  color: #5D6975;
  border-bottom: 1px solid #C1CED9;
  white-space: nowrap;
  font-weight: normal;
}

.tth {
  padding: 3px 5px;
  color: #5D6975;
  border: 1px solid #C1CED9;
  white-space: nowrap;
  font-weight: normal;
}

table .service,
table .desc {
  text-align: left;
}

table td {
  padding: 5px;
  text-align: right;
}

table td.service,
table td.desc {
  vertical-align: top;
}

table td.unit,
table td.qty,
table td.total {
  font-size: 1.2em;
}

table td.grand {
  border-top: 1px solid #5D6975;;
}

#notices .notice {
  color: #5D6975;
  font-size: 1.2em;
}

footer {
  color: #5D6975;
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 0;
  border-top: 1px solid #C1CED9;
  padding: 8px 0;
  text-align: center;
}

.h44 {
  border-top: 1px solid  #5D6975;
  border-bottom: 1px solid  #5D6975;
   background-color: #BBBBBB;
  color: #000000;
  font-size: 1.55em;
  line-height: 1.4em;
  font-weight: bold;
  text-align: center;
/*  margin: 0 0 20px 0;
  background: url(dimension.png);    */
}

.sbt {
  background-color: #DDDDDD;
  color: #000000;
  font-size: 1.25em;
/*  line-height: 1.4em;    */
  font-weight: bold;
  text-align: right;
  margin: 3px;
}

.page-break {
    page-break-after: always;
}
</style>
  </head>
<body>

<header>

<h2>SIRCO CONDOMINIO</h2>

<div>
<table>
    <tr>
      <th style='text-align: center; width: 34%; '>PROPIETARIO:<br>{{ pro.apellido }}&nbsp;{{ pro.nombre }}</th>
      <th style='text-align: center; width: 33%; '>INMUEBLE:<br>{{ pro.inmueble }}</th>
      <th style='text-align: center; width: 33%; '>ALICUOTA:<br>{{ pro.alicuota }}</th>
    </tr>
    <tr>
      <th style='text-align: center; width: 34%; '>EDIFICIO:<br>{{ edificios.nombre }}</th>
      <th style='text-align: center; width: 33%; '>CORREO:<br>{{ pro.correo }}</th>
      <th style='text-align: center; width: 33%; '>TELEFONO:<br>{{ pro.celular }}</th>
    </tr>
    <tr>
      <th style='text-align: center; width: 34%; '>FECHA:&nbsp;{{ "now"|date("d/m/Y") }}</th>
    </tr>
</table>
</div>

<div class='hrec'>
RECIBO DE PAGO No.:&nbsp;{{ imp_recibo00.id }}
</div>
</header>

<table>
    <tr>
      <th>HEMOS RECIBIDO EL PAGO DE CONDOMINIO POR CONCEPTO DE:</th>
    </tr>
</table>


<table>
  <thead>
    <tr>
      <th style='text-align: center; width: 30%; '>No. Recibo</th>
      <th style='text-align: center; width: 30%; '>Periodo</th>
      <th style='text-align: center; width: 40%; '>Monto</th>
    </tr>
  </thead>
  <tbody>
{% set submonto=0 %}
{% set ttmonto=0 %}
{% set fmonto=0 %}
{% for recibo_det in imp_recibo01 %}
<tr>
      <td style='text-align: center;'>{{ recibo_det.id_recibo }}</td>
      <td style='text-align: center;'>{{ recibo_det.mes }}/{{ recibo_det.anho }}</td>
      <td style='text-align: right;'>{{ recibo_det.monto|number_format(2, ',', '.')  }}</td>
</tr>
{% set submonto=submonto+recibo_det.monto %}
{% endfor %}
</tbody>
</table>
<div class="sbt">SUBTOTAL:&nbsp;{{ submonto|number_format(2, ',', '.') }}</div>
<table>
    <tr>
      <th style='text-align: center; width: 30%; '>&nbsp;</th>
      <th style='text-align: center; width: 30%; '>NOTA DE CREDITO APLICADA</th>
      <th style='text-align: center; width: 30%; '>&nbsp;</th>
      <th style='text-align: center; width: 40%; '>{{ imp_recibo00.nota_credito_p|number_format(2, ',', '.') }}</th>
    </tr>
    <tr>
      <th style='text-align: center; width: 30%; '>&nbsp;</th>
      <th style='text-align: center; width: 30%; '>NOTA DE CREDITO GENERADA</th>
      <th style='text-align: center; width: 30%; '>&nbsp;</th>
      <th style='text-align: center; width: 40%; '>{{ imp_recibo00.nota_credito_n|number_format(2, ',', '.') }}</th>
    </tr>
</table>
{% set nt_p=0 %}
{% set nt_n=0 %}
{% set nt_p=imp_recibo00.nota_credito_p %}
{% set nt_n=imp_recibo00.nota_credito_n %}
{% set ttmonto=submonto+nt_p+nt_n %}

<div  class="h44"><strong>TOTAL RECIBO:&nbsp;{{ ttmonto|number_format(2, ',', '.') }}</strong></div>

<table>
    <tr>
      <th style='text-align: center; width: 30%; '>FECHA DE PAGO</th>
      <th style='text-align: center; width: 30%; '>FORMA DE PAGO</th>
      <th style='text-align: center; width: 30%; '>No. DOCUMENTO</th>
      <th style='text-align: center; width: 40%; '>MONTO PAGADO</th>
    </tr>
    <tr>
      <th style='text-align: center; width: 30%; '>{{ imp_recibo00.fecha|date('d/m/Y') }}</th>
      <th style='text-align: center; width: 30%; '>{{ imp_recibo00.forma }}</th>
      <th style='text-align: center; width: 30%; '>{{ imp_recibo00.documento }}</th>
      <th style='text-align: center; width: 40%; '>{{ imp_recibo00.monto|number_format(2, ',', '.') }}</th>
    </tr>
</table>

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

</body>
</html>