<!-- CSS Code -->
{% load humanize %}
{% block style_css %}
<style type="text/css">
.row {
    margin-right: -15px;
    margin-left: -15px;
}

div {
    display: block;
    unicode-bidi: isolate;
}

.col-md-3 {
    width: 25%;
}
.col-md-4 {
    width: 33.33333333%;
}
.col-md-6 {
    width: 50%;
}
  body{
    font-family: sans-serif;
    font-size: 14px;
  }
  label{
        width: 100%;
        font-weight: bold;
        color: #000000;
  }
  p{
    margin: 0;
  }
  h4{
    margin: 0;
    font-weight: 100;
  }
  .hidden{
    width: 50%;
  }

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

table {
    background-color: transparent;
    display: table;
    border-spacing: 0;
    border-collapse: collapse;
}
tr {
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
}


thead {
    display: table-header-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
    margin: 50%;
}
</style>
{% endblock %}
{% block modulestyle_css %}

{% endblock %}
<!-- JavaScript Code -->
{% block js_code %}

<script type="text/javascript">

</script>
{% endblock %} 

{% block content %}
<div class="container">
<div style="display: flex;">

  <table class="table">
  <thead>
    <tr>
      <th style="width:25%"><img src="{{STATIC_URL}}{{imagen1}}" width="150" height="150"></th>
      <th style="width:50%">    
        <h1>GUALAN MANUFACTURING</h1>
        <h3><strong>DIRECCION:  </strong> KM 7.8 CORREDOR COMERCIAL #788  </h3>
        <h3><strong>TEL: </strong> (625) 121-7455</h3>
   </th>
      <th style="width:25%"><img src="{{STATIC_URL}}{{imagen2}}" width="150" height="150"></th>
    </tr>
  </thead>
</table>
</div>
<br>
<br>
<div style="display: flex;">

  <table class="table" >
  <thead>
    <tr>
      <th style="width:100%">
       <h4 style="text-align: left; "><strong>CLIENTE&emsp;</strong> </h4> 
      </th>   
    </tr>
    <tr>
      <th style="width:60%">
       <h4 style="text-align: left; "><strong></strong>{{venta.cliente}} </h4> 
       <h4 style="text-align: left; "><strong></strong>{{direccion_cli.calle_nombre}} </h4> 
       <h4 style="text-align: left; "><strong></strong>{{direccion_cli.ciudad}} , {{direccion_cli.codigo_postal}}</h4> 
       <h4 style="text-align: left; "><strong>RFC: </strong>{{direccion_cli.rfc_curp}}</h4> 
      </th>

      <th style="width:5%"></th>
      <th style="width:35%">
        
        <h4 style="text-align: left; "><strong>FOLIO:&emsp;</strong>{{venta.folio}} </h4>
        <h4 style="text-align: left; "><strong>FECHA:&emsp;</strong>{{venta.fecha|date:"d/M/Y" }} </h4>
      </th>
    </tr>
  </thead>
</table>
</div>
<br>
<br>
<div class="row">
  <table  style="">
  <thead  >
    <tr>
      <th  style=" width:20%; text-align: left; ">Articulo</th>
      <th  style=" width:50%; text-align: left;">Nombre</th>
      <th  style=" width:10%; text-align: right;">Unidades</th>
      <th  style=" width:10%; text-align: right;">Precio</th>
      <th  style=" width:10%; text-align: right;">Importe</th>
    </tr>
  </thead>
  <tbody>
  
      {%for det in detalles%}
            <tr>
              <td style="width:20%; text-align: left;" >{{det.articulo_clave}}</th>
              <td style="width:50%; text-align: left;" >{{det.articulo}}</td>
              <td style="width:10%; text-align: right;">{{det.unidades|floatformat:2|intcomma}}</td>
              <td style="width:10%; text-align: right;">{{det.precio_unitario|floatformat:2|intcomma}}</td>
              <td style="width:10%; text-align: right;">{{det.precio_unitario|floatformat:2|intcomma}}</td>
            </tr>
            {%if det.notas%}
            <tr>
              <th ></th>
              <td style="width:50%; text-align: left;">
                  {{det.notas|linebreaksbr}}
                </td>
              <td></td>
              <td></td>
              <td></td>
            </tr>            
            {%endif%}
      {%endfor%}
  </tbody>
</table>
</div>
</div>
<br>
<br>
<footer>
  <table class="table">
  <thead>
    <tr>
      <th style="width:20%"></th>
      <th style="width:50%">    
        <h4  style="text-align: left; ">{%if venta.descripcion%} {{venta.descripcion}} {%endif%}</h4>
   </th>
      <th style="width:10%">
        <h4 style="text-align: left; "><strong>SUBTOTAL</strong></h4>
        <h4 style="text-align: left; "><strong>IVA {{impuestos.0.3|floatformat:0}}% </strong></h4> 
        <br>
        <h4 style="text-align: left; "><strong>TOTAL</strong></h4>

      </th>
      <th style="width:10%"></th>
      <th style="width:10%">
        <h4 style="text-align: right; "><strong></strong>${{impuestos.0.0|floatformat:2|intcomma}} </h4>
        <h4 style="text-align: right; "><strong></strong>${{impuestos.0.2|floatformat:2|intcomma}} </h4>      
                <br>
        <h4 style="text-align: right; "><strong></strong>${{total|floatformat:2|intcomma}}</h4>
      </th>
    </tr>
  </thead>
</table>
</footer>
{% endblock %}