{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .:: Estado de Cajas
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  //$("#navCajaPrincipal").attr('class','dropdown active');
  //$("#navEstadoCajas").attr('class','active');
</script>
<div class="row">
  <div class="col-md-12 col-sm-12" >
      <div class="panel panel-success">
        <div class="panel-heading"> <strong>ADMINISTRACION DE CAJAS AVANZADO</strong></div>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-12">
              <div class="alert alert-success alert-dismissible" role="alert" align="left">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close" style=" font-size:30px;"><span aria-hidden="true">&times;</span></button>
                <strong>Atención</strong><br>
                El sistema revisa las cajas de forma automática todos los <strong>DOMINGOS</strong> a las 3:30 AM
              </div>
            </div>
            
          </div>
          <div class="row">
            <div class="col-md-2">
              <button type="button" class="btn btn-block btn-info btn-sm" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
            </div>
          </div>
          <p></p>
          <div class="row">
              <div class="col-md-12">
                  <div class="table-responsive">
                    <table class="table table-bordered table-hover" style="text-align: left;">
                        <thead>
                          <tr>
                            <th>Base</th>
                            <th>Operador</th>
                            <th>Fecha de Revision</th>
                            <th>Estado</th>
                            <th>Descripcion</th>
                          </tr>
                        </thead>
                        <tbody id="listaE">
                            
                        </tbody>
                    </table>
                  </div>
              </div>
          </div>
          <br>
        </div>
      </div>
  </div>
</div>
<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: 0.8;
  }

  .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;
  }
</style>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header" id="cabecera">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">DETALLE DE ESTADO DE CAJAS</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                  <div class="col-md-12 col-sm-12" >
                      <div class="panel panel-info">
                        <div class="panel-body">
                            <div class="row">
                              <div class="col-md-12">
                                <p class="bg-success" align="center">
                                  <!--&nbsp;-->
                                  BASE
                                  <span id="baseR"></span>
                                </p>
                              </div>
                            </div>
                            <p></p>
                            <div class="row">
                              <div class="col-md-2">
                                    <b>Reviciones:</b>
                              </div>
                              <div class="col-md-5">
                                    <select class="form-control" id="ComboR">
                                    </select>
                              </div>
                              <div class="col-md-2">
                                    <button type="button" class="btn btn-primary" id="filtrarRevicion">
                                          Filtrar
                                          <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                    </button>
                              </div>
                            </div>
                            <p></p>
                            <div class="row">
                              <div class="col-md-12">
                                <p class="bg-info" align="center">
                                  <span id="intervalo"></span>
                                </p>
                              </div>
                            </div>
                            <p></p>
                            <div class="progress" id="cargar">
                                <div class="progress-bar progress-bar-striped progress-bar-warning active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                  <span class="sr-only">..% Complete</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="table-responsive scrollable-table" id="tablaDet">
                                      <table class="table table-header-rotated">
                                          <tbody>
                                              <tr style="border-top: 1px solid #fff; " id="filaHeader">
                                                <th></th>
                                                <!--
                                                <th class="rotate-45"><div class="alert-success"><span>01-08-2017</span></div> </th>
                                                <th class="rotate-45"><div class="alert-danger"><span>01-08-2017</span></div></th>
                                                <th class="rotate-45"><div class="alert-warning"><span>01-08-2017</span></div></th>
                                                <th class="rotate-45"><div class="alert-success"><span>01-08-2017</span></div></th>
                                                <th class="rotate-45"><div class="alert-danger"><span>01-08-2017</span></div></th>
                                                <th class="rotate-45"><div class="alert-warning"><span>01-08-2017</span></div></th>
                                                -->
                                                
                                              </tr>
                                              <tr id="filaSoles">
                                                <th class="row-header">soles</th>
                                                <!--
                                                <td class="success">&nbsp;</td>
                                                <td class="danger">&nbsp;</td>
                                                <td class="warning">&nbsp;</td>
                                                <td class="success">&nbsp;</td>
                                                <td class="danger">&nbsp;</td>
                                                <td class="warning">&nbsp;</td>
                                                -->
                                              </tr>
                                              <tr id="filaDolares">
                                                <th class="row-header">dolares</th>
                                                <!--
                                                <td class="success">&nbsp;</td>
                                                <td class="danger">&nbsp;</td>
                                                <td class="warning">&nbsp;</td>
                                                <td class="success">&nbsp;</td>
                                                <td class="danger">&nbsp;</td>
                                                <td class="warning">&nbsp;</td>
                                                -->
                                              </tr>
                                              <tr id="filaVer">
                                                <th class="row-header">VER</th>
                                                <!--
                                                <td class="success"><button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#modalDetalle">
                                                      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                                </button></td>
                                                <td class="danger"><button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#modalDetalle">
                                                      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                                </button></td>
                                                <td class="warning"><button type="button" class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></td>
                                                <td class="success"><button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></td>
                                                <td class="danger"><button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></td>
                                                <td class="warning"><button type="button" class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></td>
                                                -->
                                              </tr>
                                          </tbody>
                                      </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                      </div>
                  </div>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>

        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<div id="modalDetalle" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Detalles</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                  <div class="col-md-12 col-sm-12" >
                        <p id="mensaje"></p>
                  </div>
            </div>
            <div class="row">
              <div class="col-md-5">
                <h5>Saldo Inicial Soles:</h5>
              </div>
              <div class="col-md-5">
                <h5 id="txtSis"></h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-5">
                <h5>Saldo Inicial Dolares:</h5>
              </div>
              <div class="col-md-5">
                <h5 id="txtSid"></h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-5">
                <h5>Saldo Soles:</h5>
              </div>
              <div class="col-md-5">
                <h5 id="txtSs"></h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-5">
                <h5>Saldo Dolares:</h5>
              </div>
              <div class="col-md-5">
                <h5 id="txtSd"></h5>
              </div>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script type="text/javascript">
  var AuxDeta=[];
  var Aux=[];
  var filaI =0;
  $(document).ready(function () {
      //-------------------- lista do estados de cajas --------------------------
      ajax_Estado();
      $("#btnRefrescar").click(function(){
            ajax_Estado();
      });
      function ajax_Estado(){
            $.ajax({
              url:'/lista_estados_cajas_ajax/',
              type:'GET',
              dataType:'json',
              success: function(data){
                Aux = data;
                var estado=''
                var html ="";
                for(var i=0;i<data.length;i++){
                    if(data[i].es =='incorrecto'){
                      estado='danger';
                    }
                    if (data[i].es =='cierrenoverificado'){
                      estado='warning';
                    }
                    if (data[i].es =='correcto'){
                      estado='success';
                    }
                    html += '<tr data-toggle="modal" data-target="#myModal" class="filaE '+estado+'" id="'+i+'"><td>'+data[i].b+'</td><td>'+data[i].op+'</td><td>'+data[i].f+'</td><td>'+data[i].es +'</td><td>'+data[i].dsc+'</td></tr>';
                }
                //html+='</tbody></table>';
                $('#listaE').html(html);
              }
            });
      }
      //
      function ajax_fechasRevicion(pk){
            console.log(pk);
            $.ajax({
              url:'/lista_reviciones_por_caja_ajax/',
              data:{'pkCaja':pk},
              type:'GET',
              dataType:'json',
              success: function(data){
                var htmlc='';
                for(var i=0;i<data.length;i++){
                  htmlc += '<option value="'+data[i].pk+'">'+data[i].fechaDesde+' - '+data[i].fechaHasta+'</option>';
                }
                $("#ComboR").html(htmlc);
              }
            });
      }
      $(document).on("click",".filaE",function(){
            var num = $(this).attr('id');
            filaI = num;
            //-------
            $("#baseR").text(Aux[filaI].b+" / "+Aux[filaI].op);
            $("#intervalo").text(Aux[filaI].fdv +" - "+Aux[filaI].fhv);
            ajax_fechasRevicion(Aux[filaI].pkC);
            ajax_revicion_detallada(Aux[filaI].pkv);
            if(Aux[filaI].es =='incorrecto'){
                $("#cabecera").css("background-color","#c9302c");
            }
            if (Aux[filaI].es =='cierrenoverificado'){
                $("#cabecera").css("background-color","#f0ad4e");
            }
            if (Aux[filaI].es =='correcto'){
                $("#cabecera").css("background-color","#5cb85c");
            }
      });
      $("#filtrarRevicion").click(function(){
        $("#intervalo").text($("#ComboR option[value='"+$("#ComboR").val()+"']").text());
        ajax_revicion_detallada($("#ComboR").val());

      });
    //-------------------------------------------------------------------------
      $(document).on('show.bs.modal', '.modal', function () {
            var zIndex = 1040 + (10 * $('.modal:visible').length);
            $(this).css('z-index', zIndex);
            setTimeout(function() {
                $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
            }, 0);
      });
      $(document).on('hidden.bs.modal', '.modal', function () {
            $('.modal:visible').length && $(document.body).addClass('modal-open');
      });
    //--------------------------------------------------------------------------
      function ajax_revicion_detallada(pkR){
            $("#tablaDet").hide();
            $("#cargar").show();
            $.ajax({
              url:'/lista_reviciones_detallada_por_caja_ajax/',
              data:{'pkR':pkR},
              type:'GET',
              dataType:'json',
              success: function(data){
                $("#cargar").hide();
                $("#tablaDet").show();
                AuxDeta= data;
                var htmlf1 ="<th></th>";
                var htmlf2='<th class="row-header">soles</th>';
                var htmlf3='<th class="row-header">dolares</th>';
                var htmlf4 ='<th class="row-header">VER</th>' ;
                for(var i=0;i<data.length;i++){
                    htmlf1 += '<th class="rotate-45"><div class="alert-'+data[i].exito+'"><span>'+data[i].fe+'</span></div> </th>';
                    htmlf2 += '<td class="'+data[i].exito+'">&nbsp;</td>';
                    htmlf3 += '<td class="'+data[i].exito+'">&nbsp;</td>';
                    htmlf4 += '<td class="'+data[i].exito+'"><button type="button" class="btn btn-'+data[i].exito+' btn-xs botonVer" data-toggle="modal" data-target="#modalDetalle" id="'+i+'"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></td>';
                }
                $('#filaHeader').html(htmlf1);
                $('#filaSoles').html(htmlf2);
                $('#filaDolares').html(htmlf3);
                $('#filaVer').html(htmlf4);
              }
            });
      }
      //
      $(document).on("click",".botonVer",function(){
            var numD = $(this).attr('id');
            $("#mensaje").text="";
            $("#mensaje").text(AuxDeta[numD].m);
            $("#txtSis").text("");
            $("#txtSis").text(AuxDeta[numD].sis);
            $("#txtSs").text("");
            $("#txtSs").text(AuxDeta[numD].ss);
            $("#txtSid").text("");
            $("#txtSid").text(AuxDeta[numD].sid);
            $("#txtSd").text("");
            $("#txtSd").text(AuxDeta[numD].sd);
      });
    //---------------------------------------------------------------------------
  });
</script>
{% endblock content1 %}