{% load static %}
<!DOCTYPE html>
<html lang="es">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
  <title> MOVIMIENTOS </title>
  <link href="{% static 'boostbox/css/js/modules/boostbox/libs/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">
  <link href="{% static 'boostbox/css/theme-5/bootstrap.min.css' %}" rel="stylesheet">
  <script src="{% static 'boostbox/css/js/modules/boostbox/libs/jquery/jquery.min.js' %}"></script>
  <script src="{% static 'boostbox/css/js/modules/boostbox/libs/bootstrap/bootstrap.min.js' %}"></script>
  <script src="{% static 'boostbox/css/js/modules/boostbox/libs/moment/Moment.js' %}"></script>
  <script src="{% static 'boostbox/css/js/modules/boostbox/libs/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
  <script src="{% static 'js/jquery.printarea.js' %}"></script>
  <script src="{% static 'js/jspdf.min.js' %}"></script>
  <script src="{% static 'js/jspdf.plugin.autotable.js' %}"></script>
  
  <style type="text/css">
     td.row{
        padding: 2px;
        border-right-width: 1px;
        border-right-color: #4C4B4B;
        border-right-style: solid;
        margin-top: 0px;
        border-bottom-width: 1px;
        border-bottom-style:dashed;
        border-bottom-color: #7A7979;
    }
    
    body{
      font-size: 10px;
    }
  </style>
   
</head>
<body>
  <div class="row" >
    <div class="" role="alert" align="center" id="ExitoMensaje">
      <h4 id="texto"></h4>
    </div>
  </div>
  <div class="row">
    <div class="col-md-1 col-md-offset-1">
      <a class="btn btn-danger"  href="/Movimientos_admin_tem/" role="button">ATRAS</a>
    </div>
    <div class="col-md-1">
      <button type="button" class="btn btn-primary" id="refresh">Actualizar</button>
    </div>
    <!--
    <div class="col-md-1" >
      <a class="btn btn-primary "  href="javascript:void(0)" id="imprime" role="button">Imprimir</a>
    </div>-->
  </div>
  <div class="row">
    <div class="col-md-4 col-md-offset-1">
      <div class="checkbox" id="campoChk">
        <label>
          <input type="checkbox" id="cierrefecha" value="1">Ver movimiento de otra fechas?
        </label>
      </div>
    </div>
  </div>
<div class="row"  id="campoCierre">
  <div class="col-md-1 col-md-offset-1" align="right">
    <h5>De: </h5>
  </div>
  <div class="col-md-2" id="combob">
    <select class="form-control" id="comboFiltroF">
      <option value="h">Hoy</option>
      <option value="f" selected>Fecha</option>
      <option value="ef">Entre Fechas</option>
    </select>
    <p></p>
  </div>
  <div class="col-md-2">
    <input type="text" class="form-control" id="txtfecha1">
    <p></p>
  </div>
  <div class="col-md-2">
    <input type="text" class="form-control" id="txtfecha2">
    <p></p>
  </div>
  <script type="text/javascript">
    $(document).ready(function (){
      $('#txtfecha1').datetimepicker({
        locale: 'es',
        format: 'YYYY-MM-DD'
      });
      $('#txtfecha2').datetimepicker({
        locale: 'es',
        format: 'YYYY-MM-DD'
      });
    });
  </script>
  <div class="col-md-1" >
    <button type="button" class="btn btn-primary " id="buscarF">Filtrar</button>
    <p></p>
  </div>
 
</div>
<br>
<div class="main" id="campoI">
  <div class="imp">
      <div>
        <img src="{% static 'img/btt.png' %}" width="1%" height="1%" style="margin-left:40px;margin-right:40px"> <label> CONSORCIO IMPERIAL</label>  <label style="margin-left:40px"> FECHA: <strong id="fechaOperacion"> </strong> </label>
      </div>
      <br>
      <div style="margin-left:40px">
        TRANSFERENCIAS Y DEPOSITOS
      </div>
      <br>
      <div style="margin-left:40px">
        BASE: <strong> {{ oficina }}</strong>
      </div>
      <br>
      <div style="margin-left:40px">
        OPERADOR: <strong >{{ operador }}</strong>
      </div>
      <br>
      <div style="margin-left:40px">
        DESDE: <strong id="fechad">{{ fd }}</strong><br>
        HASTA: <strong id="fechah">{{ fh }}</strong>
      </div>
  </div>
  <br>
  <div class="imp" style="text-align:center">
    <strong> MOVIMIENTOS VENTANILLA - CUADRE CAJA</strong>
  </div>
  <br>
  <div class="imp">
    <div >
      <table style="margin: 0 auto">
        <tr>
          <td width="70%">
            <strong>======================== DESCRIPCION DE LOS MOVIMIENTOS ==============================</strong>
          </td>
           
          <td width="25%">
            <strong> ======= DOLARES ======= </strong>
          </td>
        </tr>   
      </table>
    </div>
    <br>
    <div >
      <table width="100%">
      <thead>
         
        <tr>
          <td></td>
        </tr> 
        <tr>
          <td width="10%" style="text-align:center">
            <label> OPERACION</label>
          </td>
          <td width="40%" style="text-align:center">
            <label>CONCEPTO DETALLE</label>
          </td>
          <td width="10%">
            <label>FECHA</label>
          </td>
          <td width="10%" >
            <label> &nbsp;</label>
          </td>
           <td width="10%">
            <label> INGRESO</label>
          </td>
          <td width="10%">
            <label> EGRESO</label>
          </td>
        </tr>
        <tr>
          <td width="15%"align="center" >-------------------------------</td>
          <td width="40%" align="center">-----------------------------------------------------------------------------------</td>
          <td width="10%">---------------------------------</td>
          <td width="10%">---------------------------------</td>
          <td width="10%">---------------------------------</td>
          <td width="10%">---------------------------------</td>
        </tr>
        <tr>
          <td width="15%"></td>
          <td width="20%"> <LABEL> SALDO ANTERIOR</LABEL> </td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td id="sid"></td>
          <td>&nbsp;</td>
        </tr>
         
      </thead>
      <tbody id="listaIED">
          <tr>
          <td width="15%" class="row">
            <label> OPERACION <img src="{% static 'img/btt.png' %}" width="10%" height="7%" style="margin-left:40px;margin-right:40px"></label>
          </td>
          <td width="40%" class="row">
            <label> CONCEPTO DETALLE</label>
          </td>
          <td width="10%" class="row">
            <label> FECHA</label>
          </td>
          <td width="10%" class="row">
            <label> &nbsp;</label>
          </td>
           <td width="10%" class="row">
            <label> INGRESO</label>
          </td>
          <td width="10%" class="row">
            <label> EGRESO</label>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
            <td width="15%">
               
            </td>
            <td width="40%">
              <label> </label>
            </td>
            <td width="10%">
              <label>======================</label>
            </td>
            <td width="10%">
              <label>======================</label>
            </td>
             <td width="10%">
              <label>======================</label>
            </td>
            <td width="10%">
              <label>======================</label>
            </td>
        </tr>

        <tr>
            <td width="15%">
               
            </td>
            <td width="40%" style="text-align:right" class="row">
              <label> SUB-TOTAL------------------></label>
            </td>
            <td width="10%" class="row">
              <label> &nbsp;L</label>
            </td>
            <td width="10%" class="row">
              <label> &nbsp;</label>
            </td>
             <td width="10%" class="row">
              <label id="ID">S</label>
            </td>
            <td width="10%" class="row">
              <label id="ED"></label>
            </td>
        </tr>
        <tr>
            <td width="15%">
               
            </td>
            <td width="40%">
             
            </td>
            <td width="10%">
             
            </td>
            <td width="10%">
              <label>======================</label>
            </td>
             <td width="10%">
              <label>======================</label>
            </td>
            <td width="10%">
              <label>======================</label>
            </td>
        </tr>
        <tr>
            <td width="15%">
               
            </td>
            <td width="40%" style="text-align:right">
               
            </td>
            <td width="10%" style="text-align:right">
              <label> SALDO TOTAL</label> 
            </td>
            <td width="10%" class="row" style="text-align:right">
              <label> --------------------------></label>
            </td>
             <td width="10%" class="row">
              <label> &nbsp;</label>
            </td>
            <td width="10%" class="row">
              <label id="SD"></label>
            </td>
        </tr>
      </tfoot>  
      </table>
    </div>
  </div>
  <br>
  <br>
  <br>
  <div class="imp">
    <div >
      <table style="margin: 0 auto">
        <tr>
          <td width="70%">
            <strong>============================== DESCRIPCION DE LOS MOVIMIENTOS ================================</strong>
          </td>
          <td width="25%">
            <strong>========== SOLES =========== </strong>
          </td>
        </tr>   
      </table>
    </div>
    <br>
    <div >
      <table width="100%">
      <thead>
        <tr>
          <td width="15%" style="text-align:center">
            <label> OPERACION</label>
          </td>
          <td width="45%" style="text-align:center">
            <label> CONCEPTO DETALLE</label>
          </td>
          <td width="10%">
            <label> FECHA</label>
          </td>
          <td width="10%" >
            <label> &nbsp;</label>
          </td>
           <td width="10%">
            <label> INGRESO</label>
          </td>
          <td width="10%">
            <label> EGRESO</label>
          </td>
        </tr>
        <tr>
          <td width="15%" align="center">-------------------------</td>
          <td width="45%" align="center">-----------------------------------------------------------------------------------</td>
          <td width="10%">----------------------------------</td>
          <td width="10%">----------------------------------</td>
          <td width="10%">----------------------------------</td>
          <td width="10%">----------------------------------</td>
        </tr>
        <tr>
          <td width="15%"></td>
          <td width="45%"> <LABEL> SALDO ANTERIOR</LABEL> </td>
          <td width="10%"> &nbsp;</td>
          <td width="10%">&nbsp;</td>
          <td id="sis" width="10%"></td>
          <td width="10%">&nbsp;</td>
        </tr>
         
      </thead>
      <tbody id="listaIES">
          <tr>
            <td width="15%" class="row">
              <label> OPERACION <img src="{% static 'img/btt.png' %}" width="10%" height="7%" style="margin-left:40px;margin-right:40px"></label>
            </td>
            <td width="40%" class="row">
              <label> DATOS ESPECIFICOS</label>
            </td>
            <td width="10%" class="row">
              <label> CAPITAL</label>
            </td>
            <td width="10%" class="row">
              <label> OTROS</label>
            </td>
             <td width="10%" class="row">
              <label> INGRESOS</label>
            </td>
            <td width="10%" class="row">
              <label> EGRESOS</label>
            </td>
          </tr>
      </tbody>
      <tfoot>
        <tr>
            <td width="15%">
               
            </td>
            <td width="40%">
              <label> </label>
            </td>
            <td width="10%">
              <label>======================</label>
            </td>
            <td width="10%">
              <label>======================</label>
            </td>
             <td width="10%">
              <label>======================</label>
            </td>
            <td width="10%">
              <label>======================</label>
            </td>
        </tr>

        <tr>
            <td width="15%">
               
            </td>
            <td width="40%" style="text-align:right" class="row">
              <label> SUB-TOTAL------------------></label>
            </td>
            <td width="10%" class="row">
              <label >&nbsp;</label>
            </td>
            <td width="10%" class="row">
              <label> &nbsp;</label>
            </td>
             <td width="10%" class="row">
              <label id="IS"></label>
            </td>
            <td width="10%" class="row">
              <label id="ES"></label>
            </td>
        </tr>
        <tr>
            <td width="15%">
               &nbsp;
            </td>
            <td width="40%">
             &nbsp;
            </td>
            <td width="10%">
             &nbsp;
            </td>
            <td width="10%">
              <label>======================</label>
            </td>
             <td width="10%">
              <label>======================</label>
            </td>
            <td width="10%">
              <label>======================</label>
            </td>
        </tr>
        <tr>
            <td width="15%">
               
            </td>
            <td width="40%" style="text-align:right">
               
            </td>
            <td width="10%" style="text-align:right">
              <label> SALDO TOTAL</label> 
            </td>
            <td width="10%" class="row" style="text-align:right">
              <label> --------------------------></label>
            </td>
             <td width="10%" class="row">
              <label>&nbsp;</label>
            </td>
            <td width="10%" class="row">
              <label id="SS"></label>
            </td>
        </tr>
      </tfoot>  
      </table>
    </div>
  </div>
  <br>
  <div >
      <div align="center">
          <button type="button" class="btn btn-primary bc" id="CerrarC">Imprimir</button>
      </div>
      <br>
  </div>
</div>
<br>
</body>
<script type="text/javascript">
  var bi=false,be=false;
  var pkCa ={{ pkc }}
  var listaSI="",listaSE="";
  var listaDI="",listaDE="";
  var urlbtt="{% static 'img/btt.png' %}";
  $(document).ready(function(){
    var fecha = new Date();
    var mes = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
    var textofecha= fecha.getDate() + " de " + mes[fecha.getMonth()] + " del " + fecha.getFullYear();
    var hora = new Date();
    var textohora = hora.getHours() + ":" + hora.getMinutes();
    $("#fechaOperacion").text(textofecha+" "+textohora);
    var aux='';
    ajax_validar();
    $("#txtfecha1").hide();
    $("#txtfecha2").hide();
    $("#comboFiltroF").change(function(){
      if($("#comboFiltroF").val()=="ef"){
        $("#txtfecha1").show();
        $("#txtfecha1").prop("value","");
        $("#txtfecha2").show();
        $("#txtfecha2").prop("value","");
        }
      if($("#comboFiltroF").val()=="f"){
        $("#txtfecha1").prop("value","");
        $("#txtfecha1").show();
        $("#txtfecha2").hide();
        }
      if($("#comboFiltroF").val()=="h"){
        $("#txtfecha1").prop("value","");
        $("#txtfecha1").hide();
        $("#txtfecha2").prop("value","");
        $("#txtfecha2").hide();
        }
    });
    

    function imprimir(){
      var stilo="<style>body{font-size: 10px;}</style>"
      var ori = $("body").html();
      var areai= $("#campoI").html();
      $("body").html(stilo+areai);
      window.print();
      $("body").html(ori);
    }
    $("#cierrefecha").click(function(){
      if($("#cierrefecha").prop('checked')){
        $("#campoCierre").show();
        //$("#imprime").hide();
      }
      else{
        $("#campoCierre").hide();
      }
    });
    $("#campoCierre").hide();
    //
    $("#buscarF").click(function(){
      $("#listaIES").html(" ");
      $("#listaIED").html(" ");
      if ($("#comboFiltroF").val()=='h'){
         Date.prototype.yyyymmdd = function() {
            var yyyy = this.getFullYear().toString();
            var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
            var dd  = this.getDate().toString();
            return yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]); // padding
          };

          d = new Date();
        $("#fechad").text(d.yyyymmdd());
      }
      else{
        //var t=$('#txtfecha1').val() +"  al  "+$('#txtfecha2').val();
        $("#fechad").text($('#txtfecha1').val());
        $("#fechah").text($('#txtfecha2').val());
      }
      ajax_validar();
    });
    $("#refresh").click(function(){
      $("#listaIES").html(" ");
      $("#listaIED").html(" ");
      ajax_validar();
    })
    //
    function ajax_Ingreso(){
          $.ajax({
            data:{'filtro':$('#comboFiltroF').val() ,'F1':$('#fechad').text(),'F2':$('#fechah').text(),'pkC':pkCa},
            url:'/consultaIngreso_oficina_report_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              var html1 ="";
              var html2 ="";
              bi=false;
              for(var i=0;i<data.length-1;i++){
                if (data[i].moneda =="soles"){
                  html1 += '<tr><td width="15%" class="row"><label> '+data[i].tipodoc+' - '+data[i].nroR+'<img src="'+urlbtt+'" width="10%" height="7%" style="margin-left:8px;margin-right:1px"></label></td><td width="45%" class="row"><label>'+data[i].concepto+'</label></td><td width="10%" class="row"><label>'+data[i].fecha+'</label></td><td width="10%" class="row"><label> &nbsp;</label></td><td width="10%" class="row"><label>'+data[i].monto+'</label></td><td width="10%" class="row"><label>&nbsp;</label></td></tr>';
                }
                else{
                  html2 += '<tr><td width="15%" class="row"><label> '+data[i].tipodoc+' - '+data[i].nroR+'<img src="'+urlbtt+'" width="10%" height="7%" style="margin-left:8px;margin-right:1px"></label></td><td width="45%" class="row"><label>'+data[i].concepto+'</label></td><td width="10%" class="row"><label>'+data[i].fecha+'</label></td><td width="10%" class="row"><label> &nbsp;</label></td><td width="10%" class="row"><label>'+data[i].monto+'</label></td><td width="10%" class="row"><label>&nbsp;</label></td></tr>';
                }
              }
              listaSI = html1;
              listaDI = html2;
              //console.log(html1);
              //console.log(html2);
              //$('#listaI').html(html);
              $("#IS").text(data[data.length-1].total_soles);
              $("#ID").text(data[data.length-1].total_dolares);
              //$("#CS").text(data[data.length-1].util_soles);
              //$("#CD").text(data[data.length-1].util_dolares);
              bi=true;
              ajax_Egreso(html1,html2);
              /*
              if(bi&&be){
                $("#listaIES").html(listaSI+listaSE);
                $("#listaIED").html(listaDI+listaDE);
                ajax_saldo_inicial();
                calcular_Saldo();
              }*/
            }
          });
        };
        ///
         
        //
        function ajax_Egreso(listaIs,listaId){
          $.ajax({
            data:{'filtro':$('#comboFiltroF').val(),'F1':$('#fechad').text(),'F2':$('#fechah').text(),'pkC':pkCa},
            url:'/consultaEgreso_oficina_report_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              var html1 ="";
              var html2 ="";
              be=false;
              for(var i=0;i<data.length-1;i++){
                  if (data[i].moneda =="soles"){
                  html1 += '<tr><td width="15%" class="row"><label> '+data[i].tipodoc+' - '+data[i].nroR+' <img src="'+urlbtt+'" width="10%" height="7%" style="margin-left:8px;margin-right:1px"></label></td><td width="45%" class="row"><label>'+data[i].concepto+'</label></td><td width="10%" class="row"><label>'+data[i].fecha+'</label></td><td width="10%" class="row"><label> &nbsp;</label></td><td width="10%" class="row"><label>&nbsp;</label></td><td width="10%" class="row"><label>'+data[i].monto+'</label></td></tr>';
                }
                else{
                  html2 += '<tr><td width="15%" class="row"><label> '+data[i].tipodoc+' - '+data[i].nroR+' <img src="'+urlbtt+'" width="10%" height="7%" style="margin-left:8px;margin-right:1px"></label></td><td width="40%" class="row"><label>'+data[i].concepto+'</label></td><td width="10%" class="row"><label>'+data[i].fecha+'</label></td><td width="10%" class="row"><label> &nbsp;</label></td><td width="10%" class="row"><label>&nbsp;</label></td><td width="10%" class="row"><label>'+data[i].monto+'</label></td></tr>';
                }
              }
              listaSE=html1;
              listaDE=html2;
              //$('#listaE').html(html);
              $("#ES").text(data[data.length-1].total_soles);
              $("#ED").text(data[data.length-1].total_dolares);
              be=true;
              var aux1=listaIs+html1
              var aux2=listaId+html2
              $("#listaIES").html(aux1);
              $("#listaIED").html(aux2);
                //ajax_saldo_inicial();
              calcular_Saldo();
            }
          });
        };
    //
    
    //
    function ajax_saldo(){
          $.ajax({

            url:'/SaldoCaja_ajax/',
            //async:false,
            type:'GET',
            dataType:'json',
            success: function(data){
              var enc= data[0].p_nombre +' '+ data[0].p_ap+' '+data[0].p_am;
              $("#txtOperador").text(enc);
              //$("#dni").text(data[0].p_dni);
              //$("#caj").text(data[0].caja);
              //$("#SS").text(data[0].saldo_soles);
              //$("#SD").text(data[0].saldo_dolares);
            }
          });
        };
        /*
       function ajax_datosp(){
          $.ajax({
            url:'/SaldoCaja_ajax/',
            //async:false,
            type:'GET',
            dataType:'json',
            success: function(data){
              var enc= data[0].p_nombre +' '+ data[0].p_ap+' '+data[0].p_am;
              $("#nombre").text(enc);
              $("#dni").text(data[0].p_dni);
              $("#caj").text(data[0].caja);
            }
          });
        };*/

    //
    function ajax_saldo_inicial(){
          $.ajax({
            url:'/SaldoInicialCaja_ajax/',
            //async:false,
            type:'GET',
            dataType:'json',
            success: function(data){
             $('#sis').text(data[0].sis);
             $("#sid").text(data[0].sid);
             calcular_Saldo();
            }
          });
        };
    //
    /*
    function ajax_fecha(){
          $.ajax({
            url:'/fecha_ajax/',
            //async:false,
            type:'GET',
            dataType:'text',
            success: function(data){
             $("#fechaCi").text(data)
            }
          });
        };*/
    //
    //
    $("#CerrarC").click(function(){
      imprimir();
    });
     function ajax_validar(){//falta
      $("#ExitoMensaje").prop('class','');
      $("#texto").text("");
      bi=false;
      be=false;
      $("#listaIES").html("");
      $("#listaIED").html("");
      ajax_Ingreso();
      //ajax_Egreso();
      ajax_saldo();//jalando datos personal
      ajax_saldo_inicial();

    };
    //
    //
    function calcular_Saldo()
    {
      //alert($("#IS").html());
      var saldosoles= parseFloat($("#IS").text())-parseFloat($("#ES").text());
      var saldodolares= parseFloat($("#ID").text())-parseFloat($("#ED").text());
      $("#SS").text(saldosoles.toString());
      $("#SD").text(saldodolares.toString());
    }
    //
  });
</script>
<script src="{% static 'Bootstrap/js/Moment.js' %}"></script>
<script src="{% static 'Bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'Bootstrap/js/bootstrap-datetimepicker.js' %}"></script>
<script src="{% static 'est/jquery.printarea.js' %}"></script>
</html>
 
