{% extends "base.html" %}
{% block titulo %}
Saldo de Oficinas
{% endblock titulo %}
{% block content1 %}
<script type="text/javascript">
  $("#navIE").attr('class','dropdown active');
  $("#navDeuda").attr('class','active');
</script>
<style type="text/css">
  .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: 1px solid #fff;
    border-bottom:1px solid #ddd;
  }
  /*
  .table-header-rotated th.row-header{
    width: auto ;
  }
  */
  /*
  .table-header-rotated{
    width: auto ;
  }*/
  .table-header-rotated td{
    width: 40px;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    vertical-align: middle;
    text-align: center;
  }

  .table-header-rotated th.rotate-45{
    height: 80px;
    position: relative;
    vertical-align: bottom;
    padding: 0;
    /*font-size: 12px;*/
    line-height: 1;
  }

  .table-header-rotated th.rotate-45 > div{
    position: relative;
    top: 0px;
    left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
    height: 100%;
    transform:skew(-45deg,0deg);
    overflow: hidden;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
  }

  .table-header-rotated th.rotate-45 span {
    transform:skew(45deg,0deg) rotate(315deg);
    position: absolute;
    bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
    /*left: -25px; *//*Because it looked good, but there is probably a mathematical link here as well*/
    display: inline-block;
    width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
    text-align: left;
  }
  td, th {
    min-width: 34px;
  }
  .table>thead>tr {
    background-image: -webkit-linear-gradient(top, #fff 0, #fff 100%);
    background-image: linear-gradient(to bottom, #fff 0, #fff 100%);
    background-repeat: repeat-x;
  }
</style>
<div class="row">
  <div class="col-md-12" >
      <div class="panel panel-default">
        <div class="panel-heading panel-toolbar"> 
          <strong>SALDOS DE OFICINAS</strong>
          <button type="button" class="btn btn-default btn-sm" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
        </div>
        <div class="panel-body">
          <div class="row">
              <div class="col-md-12">
                  
                  <div class="table-responsive scrollable-table">
                    <table class="table table-header-rotated">
                        <thead>
                          <tr>
                            <td style="border: 0px;"></td>
                            <td style="border: 0px;">&nbsp;</td>
                            <td style="border: 0px;">&nbsp;</td>
                            <td style="border: 0px;">&nbsp;</td>
                            <td  style="border: 0px;" align="center" colspan="4"> <b>SOLES</b></td>
                            <!--<td  class="info" align="center"> <b>SOLES</b></td>
                            <td  class="info" align="center"> <b>SOLES</b></td>
                            <td  class="info" align="center"> <b>SOLES</b></td>
                            <td  class="info" align="center"> <b>SOLES</b></td>
                            <td  class="info" align="center"> <b>SOLES</b></td>-->
                            <!--<td class="success" align="center"><b>DOLARES</b></td>-->
                            <td style="border: 0px;" align="center" colspan="2"><b>DOLARES</b></td>
                            <td  align="center" style="border: 0px;"><b>SOLES</b></td>
                          </tr>
                          <tr style="border-top: 1px solid #fff; ">
                            <th style="vertical-align: bottom;text-align: center;font-size: 18px;"><b>Oficina</b></th>
                            <th style="vertical-align: bottom;text-align: center;font-size: 18px;"><b>Caja</b></th>
                            <th style="vertical-align: bottom;text-align: center;font-size: 18px;"><b>Operador</b></th>
                            <th class="rotate-45 "><div class="alert-info"><span><b>Saldo</b></span></div></th>
                            <th class="rotate-45 "><div class="alert-info"><span><b>PT por pagar</b></span></div></th>
                            <th class="rotate-45 "><div class="alert-info"><span><b>Intercambio por pagar</b></span></div></th>
                            <th class="rotate-45 "><div class="alert-info"><span><b>Saldo por Recepcionar</b></span></div></th>
                            <!--
                            <th class="rotate-45 "><div class="alert-info"><span><b>Saldo ctas</b></span></div></th>
                            <th class="rotate-45 "><div class="alert-info"><span><b>ST leidas</b></span></div></th>
                            -->
                            <th class="rotate-45 "><div><span><b>saldo</b></span></div></th>
                            <th class="rotate-45 "><div><span><b>Saldo por Recepcionar</b></span></div></th>
                            <th class="rotate-45 "><div class="alert-info"><span><b>MONTO TOPE</b></span></div></th>
                          </tr>
                        </thead>
                        <tbody id="listaO">
                            
                        </tbody>
                    </table>
                  </div>
              </div> 
          </div>
        </div>
      </div>
  </div>
</div>
<script type="text/JavaScript">
  var Aux="";
  var filaI =0;
  $(document).ready(function(){
    ajax_Deuda();
    $("#btnRefrescar").click(function(){
      ajax_Deuda();
    });
    function ajax_Deuda(){
      $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        url:'/Deuda_oficinas_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux= data;
          var html ="";
          var tcolor="#000";
          for(var i=0;i<data.length;i++){
            if(data[i].est=="danger"){
              tcolor="red";
            }
            if(data[i].est=="warning"){
              tcolor="orange";
            }
            if(data[i].est=="success"){
              tcolor="green";
            }
            if(data[i].ver_saldo=='si'){
              html += '<tr' +' id="'+i+'"><td><b>'+data[i].oficina+'</b></td><td>'+data[i].caja+'</td><td>'+data[i].op+'</td><td class="info"><b>'+data[i].totals+'</b></td><td class="info"><b>'+data[i].mt+'</b></td><td class="info"><b>'+data[i].mi+'</b></td><td class="info"><b>'+data[i].mrs+'</b></td><td class="success"><b>'+data[i].totald+'</b></td ><td class="success"><b>'+data[i].mrd+'</b></td ><td style="color:'+tcolor+';"><b>'+data[i].moto+'</b></td ></tr>';
            }
          }
          $('#listaO').html(html);
          $('.table-responsive').waitMe('hide');
        },  error: function(xhr, textStatus, errorThrown) {
                console.log(xhr.responseText);
        }
      });
    }
    //
   //-------------------
  });
</script>

{% endblock content1 %}