{% extends "base.html" %}
{% block titulo %}
  Liquidar agntes y socios
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navIE").attr('class','dropdown active');
  $("#navNuevaLiqui").attr('class','active');
</script>
<div class="row min-row">
  {% ifnotequal resultado '' %}
      {% ifequal resultado 'exito' %}
        <div class="col-md-12">
          <div class="alert alert-success" role="alert" align="center">
            <h4>Liquidacion registrado!</h4>
          </div>
        </div>
      {% else %}
        <div class="col-md-12">
          <div class="alert alert-danger" role="alert" align="center">
            <h4>{{resultado}}</h4>
          </div>
        </div>
      {% endifequal %}
  {% endifnotequal %}
</div>

<div class="row myb-4">
  <div class="col-md-3">
     <label class="teal-text">Oficina</label>
    <select id="ComboOficina" class="form-control form-control-sm" name="oficina">
      
    </select>
   
  </div>

  <div class="col-md-5">
    <label class="teal-text">Caja</label>
    <select id="ComboCaja" class="form-control form-control-sm" name="caja">
      <option value="0"></option>
    </select>
    
  </div>
  <div class="col-md-2 col-md-offset-2">
    <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#ModalDetConficArq">Configurar porcentaje Bancos</button>
  </div>
</div>
<div class="row myb-4">
  <div class="col-md-2">
    <label class="teal-text">Liquidar base de:</label>
      <select class="form-control form-control-sm" id="selectFecha">
          <option value="h"> Hoy </option>
          <option value="f"> Fecha </option>
          <option value="ef"> Entre Fechas </option>
      </select>
      
  </div>
  <div class="col-md-2" id="fecha1">
    <label class="label-input-easy active" for="txt-fecha-1">Desde</label>
    <input id="txt-fecha-1" type="text" class="form-control" autocomplete="off" >  
  </div>
  <div class="col-md-2" id="fecha2">
    <label class="label-input-easy active" for="txt-fecha-2">Hasta</label>
    <input id="txt-fecha-2" type="text" class="form-control" autocomplete="off">
  </div>
  <div class="col-md-2 pt-4">
      <button class="btn btn-sm btn-info" id="btn-cosultar">Consultar</button>
  </div>
</div>

<div class="row myb-4">
  <div class="col-md-12">
    <h4>Detalle de Liquidacion</h4>
  </div>
</div>

<div class="row min-row">
  <div class="col-md-12">
    <div class="panel">
      <div class="panel-body z-depth-1">
        <div class="row min-row">
          <div class="col-md-12">         
            <h5 style="color:green;" >Soles</h5>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12" style="font-size: 13px;">
            <table class="table table-striped ">
              <thead>
                <tr>
                  <th colspan="11" class="center green lighten-4">
                    TRANSFERENCIAS CREADAS - SOLES
                  </th>
                </tr>
                <tr>
                  <th>Operacion</th>
                  <th>Concepto</th>
                  <th>Fecha</th>
                  <th>Capital</th>
                  <th>Com.<br>Bancos</th>
                  <th>Comision</th>
                  <th>Monto<br>Oficina</th>
                  <th>Monto<br>Central</th>
                  <th>Monto<br>Of. Compartida</th>
                  <th>Operador</th>
                </tr>
              </thead>
              <tbody id="lista-st-s"></tbody>
              <tfoot id="lista-t-st-s">
                <!--
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <th class="right">Subtotal </th>
                  <th id="td-st-s-t-capital">0.00</th>
                  <th id="td-st-s-t-comi-banco">0.00</th>
                  <th id="td-st-s-t-comi-giro">0.00</th>
                  <th id="td-st-s-t-comi">0.00</th>
                  <th id="td-st-s-t-m-oficina">0.00</th>
                  <th id="td-st-s-t-m-central">0.00</th>
                  <th id="td-st-s-t-m-compart">0.00</th>
                </tr>
               -->
              </tfoot>
            </table>
          </div>
        </div>

        <div class="row min-row">
          <div class="col-md-12" style="font-size: 13px;">
            <table class="table table-striped" id="table-pt-s">
              <thead> 
                <tr>
                  <th colspan="11" class="center amber lighten-4">
                    TRANSFERENCIAS PAGADAS - SOLES
                  </th>
                </tr>
                <tr>
                  <th>Operacion</th>
                  <th>Concepto</th>
                  <th>ST</th>
                  <th>Fecha</th>
                  <th>Capital</th>
                  <th>Egreso<br>Extra</th>
                  <th>Comision</th>
                  <th>Monto<br>Oficina</th>
                  <th>Monto<br>Central</th>
                  <th>Monto<br>Of. Compartida</th>
                  <th>Operador</th>
                </tr>
              </thead>
              <tbody id="lista-pt-s"></tbody>
              <tfoot id="lista-t-pt-s">
                <!--
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <th class="right">Subtotal </th>
                  <th id="td-pt-s-t-capital">0.00</th>
                  <th id="td-pt-s-t-egreso">0.00</th>
                  <th id="td-pt-s-t-comi">0.00</th>
                  <th id="td-pt-s-t-m-oficina">0.00</th>
                  <th id="td-pt-s-t-m-central">0.00</th>
                  <th id="td-pt-s-t-m-compart">0.00</th>
                </tr>
               -->
              </tfoot>
            </table>
          </div>
        </div>

        <!--  transferencias bancos  -->
        <div class="row">
          <div class="col-md-12" style="font-size: 13px;">
            <table class="table table-striped ">
              <thead>
                <tr>
                  <th colspan="11" class="center green lighten-4">
                    TRANSFERENCIAS BANCOS CREADAS
                  </th>
                </tr>
                <tr>
                  <th>Operacion</th>
                  <th>Concepto</th>
                  <th>Fecha</th>
                  <th>Capital</th>
                  <th>Com.<br>Bancos</th>
                  <th>Comision</th>
                  <th>Monto<br>Oficina</th>
                  <th>Monto<br>Central</th>
                  <th>Monto<br>Of. Compartida</th>
                  <th>Operador</th>
                </tr>
              </thead>
              <tbody id="lista-st-b-s"></tbody>
              <tfoot id="lista-t-st-b-s"></tfoot>

            </table>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<div class="row py-4">
  <div class="col-md-12">
    <div class="panel">
      <div class="panel-body z-depth-1">
        <div class="row min-row">
          <div class="col-md-12">
            <h5 style="color:blue;">Dolares</h5>
          </div>
        </div>
        
        <div class="row">
          <div class="col-md-12" style="font-size: 13px;">
            <table class="table table-striped ">
              <thead>
                <tr>
                  <th colspan="11" class="center light-blue lighten-4">
                    TRANSFERENCIAS CREADAS - DOLARES
                  </th>
                </tr>
                <tr>
                  <th>Operacion</th>
                  <th>Concepto</th>
                  <th>Fecha</th>
                  <th>Capital</th>
                  <th>Com.<br>Bancos</th>
                  <th>Comision</th>
                  <th>Monto<br>Oficina</th>
                  <th>Monto<br>Central</th>
                  <th>Monto<br>Of. Compartida</th>
                  <th>Operador</th>
                </tr>
              </thead>
              <tbody id="lista-st-d"></tbody>
              <tfoot id="lista-t-st-d">
                <!--
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <th class="right">Subtotal </th>
                  <th id="td-st-d-t-capital">0.00</th>
                  <th id="td-st-d-t-comi-banco">0.00</th>
                  <th id="td-st-d-t-comi-giro">0.00</th>
                  <th id="td-st-d-t-comi">0.00</th>
                  <th id="td-st-d-t-m-oficina">0.00</th>
                  <th id="td-st-d-t-m-central">0.00</th>
                  <th id="td-st-d-t-m-compart">0.00</th>
                </tr>
               -->
              </tfoot>
            </table>
          </div>
        </div>

        <div class="row min-row">
          <div class="col-md-12 " style="font-size: 13px;">
            <table class="table table-striped" id="table-pt-d">
              <thead>
                <tr>
                  <th colspan="11">
                    TRANSFERENCIAS PAGADAS - DOLARES
                  </th>
                </tr>
                <tr>
                  <th>Operacion</th>
                  <th>Concepto</th>
                  <th>ST</th>
                  <th>Fecha</th>
                  <th>Capital</th>
                  <th>Egreso<br>Extra</th>
                  <th>Comision</th>
                  <th>Monto<br>Oficina</th>
                  <th>Monto<br>Central</th>
                  <th>Monto<br>Of. Compartida</th>
                  <th>Operador</th>
                </tr>
              </thead>
              <tbody id="lista-pt-d"></tbody>
              <tfoot id="lista-t-pt-d">
                <!--
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <th class="right">Subtotal </th>
                  <th id="td-pt-d-t-capital">0.00</th>
                  <th id="td-pt-d-t-egreso">0.00</th>
                  <th id="td-pt-d-t-comi">0.00</th>
                  <th id="td-pt-d-t-m-oficina">0.00</th>
                  <th id="td-pt-d-t-m-central">0.00</th>
                  <th id="td-pt-d-t-m-compart">0.00</th>
                </tr>
              -->
              </tfoot>
            </table>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>


<div class="row">
  <div class="col-md-12">
    <div class="panel">
      <div class="panel-body z-depth-1">
        <div class="row min-row">
          <div class="col-md-4">
            <span class="indigo-text" id="sp-cierre-de"></span><br>
            <span class="blue-text" id="sp-cierre-ofi"></span><br>
            <span class="green-text" id="sp-cierre-base"></span>
          </div>
          <div class="col-md-8">
            <div class="row min-row">
              <div class="col-md-12">
                <label>
                  <input id="chb-aceptar" type="checkbox" disabled="disabled" />
                  <span class="orange-text" id="text-terminos">TODOS LOS MOVIMIENTOS SON CORRECTOS</span>
                </label>
              </div>
            </div>
            <div class="row myb-4" id="div-obs">
              <div class="input-field col-md-8">
                <label class="label-input-easy" for="obs">Observaciones</label>
                <textarea id="obs" name="obs" class="form-control" data-length="100"></textarea>
                
              </div>
            </div>
          </div>
        </div>
        <div class="row min-row">
          <div class="col-md-12">
            <div class="row myb-4" id="div-boton">
              <div class="col-md-4 col-md-offset-4" align="center">
                <button class="btn btn-block btn-sm btn-primary" id="btn-cerrar">Registrar liquidacion</button>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row min-row hidden">
  <div class="col s12">
    <form action="/LiquidacionBase/" method="POST" id="formulario">
        {% csrf_token %}
        <input type="text" value="" name="exito" id="txt-exito">
    </form>
  </div>
</div>
<!-- impresion -->
<div id="modal-detalle-trans" class="modal">
  <div class="modal-content">
    <div id="impresion">
      <style type="text/css">
        table.tablep{
          border-collapse: collapse;
          border-color: grey;
          width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
            background-color: transparent;
            display: table;
            border-top: 1px solid #ddd;
            font-size: 11px;
        }
        .tablep>thead>tr {
            color: #707070;
            font-weight: normal;
            background-color: #f8f8f8;
            background-image: -webkit-linear-gradient(top, #f8f8f8 0, #ececec 100%);
            background-image: linear-gradient(to bottom, #f8f8f8 0, #ececec 100%);
            background-repeat: repeat-x;
        }
        .tablep>tbody>tr>td, .tablep>tbody>tr>th, .tablep>tfoot>tr>td, .tablep>tfoot>tr>th, .tablep>thead>tr>td, .tablep>thead>tr>th {
              padding: 2px;
              padding-left: 5px;
              line-height: 1.42857143;
              vertical-align: top;
              border: 1px solid #ddd;
        }
        .titulos{
          font-size: 14px;
          margin-top:5px;
          margin-bottom:5px;
        }
      </style>
      <table style="width: 100%;">
        <tr>
          <td style="border-bottom: 1px solid #ddd;" align="center"><b>LIQUIDACION DE OFICINA</b></td>
        </tr>
      </table>
      
      <table  style="font-size: 13px;">
        <tr>
          <td><b>Oficina:</b></td>
          <td id="td-imprimir-ofi"></td>
        </tr>
        <tr>
          <td><b></b></td>
          <td id="td-imprimir-base"></td>
        </tr>
      </table>
      <br>
      <span class="titulos">DETALLE SOLES</span>
      <table class="tablep">
        <thead>
          <tr>
            <th colspan="9" class="center green lighten-4">
              TRANSFERENCIAS CREADAS - SOLES
            </th>
          </tr>
          <tr>
            <th>Operacion</th>
            <th>Concepto</th>
            <th>Fecha</th>
            <th>Capital</th>
            <th>Comision</th>
            <th>Monto<br>Oficina</th>
            <th>Monto<br>Central</th>
            <th>Monto<br>Of. Compartida</th>
            <th>Operador</th>
          </tr>
        </thead>
        <tbody id="imprimir-st-s"></tbody>
        <tfoot id="imprimir-t-st-s"></tfoot>
      </table>
      <br>
      <table class="tablep" id="imprimir-pt-s">
      </table>
      <br>
      <table class="tablep">
        <thead>
          <tr>
            <th colspan="9">
              TRANSFERENCIAS BANCOS CREADAS
            </th>
          </tr>
          <tr>
            <th>Operacion</th>
            <th>Concepto</th>
            <th>Fecha</th>
            <th>Capital</th>
            <th>Comision</th>
            <th>Monto<br>Oficina</th>
            <th>Monto<br>Central</th>
            <th>Monto<br>Of. Compartida</th>
            <th>Operador</th>
          </tr>
        </thead>
        <tbody id="imprimir-st-b-s"></tbody>
        <tfoot id="imprimir-t-st-b-s"></tfoot>
      </table>
      <br>
      <span class="titulos">DETALLE DOLARES</span>
      <table class="tablep">
        <thead>
          <tr>
            <th colspan="11" class="center light-blue lighten-4">
              TRANSFERENCIAS CREADAS - DOLAREAS
            </th>
          </tr>
          <tr>
            <th>Operacion</th>
            <th>Concepto</th>
            <th>Fecha</th>
            <th>Capital</th>
            <th>Com.<br>Bancos</th>
            <th>Com.<br>Giro</th>
            <th>Comision</th>
            <th>Monto<br>Oficina</th>
            <th>Monto<br>Central</th>
            <th>Monto<br>Of. Compartida</th>
            <th>Operador</th>
          </tr>
        </thead>
        <tbody id="imprimir-st-d"></tbody>
        <tfoot id="imprimir-t-st-d"></tfoot>
      </table>
      <br>
      <table class="tablep" id="imprimir-pt-d">
      </table>
    </div>
  </div>
</div>
<!-- /impresion -->
<div id="ModalDetConficArq" 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">Configuración de Porcentajes</h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-12">
                <div class="panel panel-default">
                  <div class="panel-body">
                    <div class="row">
                      <div class="col-md-3" align="right">
                        <h5>Tipo:</h5>
                      </div>
                      <div class="col-md-6">
                          <label class="radio-inline">
                                <input type="radio" name="tipocaja" id="rbPropia" value="p" checked><b> Propia</b>
                              </label>
                              <label class="radio-inline">
                                <input type="radio" name="tipocaja" id="rbCompartida" value="c"><b> Compartida</b>
                          </label>
                        <p></p>
                      </div>
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-5" align="right">
                        <h5>% Para oficina</h5>
                      </div>
                      <div class="col-md-4">
                          <input type="text" class="form-control" id="po" name="po">
                        <p></p>
                      </div>
                    </div>
                    <p></p>
                    <div class="row" id="campoofic">
                      <div class="col-md-4 col-md-offset-1" align="right">
                        <h5>% Para Oficina Central </h5>
                      </div>
                      <div class="col-md-4">
                          <input type="text" class="form-control" id="pc" name="pc">
                        <p></p>
                      </div>
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-4 col-md-offset-1" align="right" >
                        <h5>% Para otra oficina</h5>
                      </div>
                      <div class="col-md-4">
                          <input type="text" class="form-control" id="pe" name="pe"readonly>
                        <p></p>
                      </div>
                    </div>
                    <p></p>

                    <p></p>
                    <div class="row">
                      <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4">
                        <input class="btn btn-primary btn-block" id="btnActprj" value="Guardar Cambios" >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
               
            </div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div>
<script type="text/javascript">
  var saldo_i_s=0,
      saldo_i_d=0,
      ingreso_s=0,
      ingreso_d=0,
      egreso_s=0,
      egreso_d=0,
      saldo_t_s =0,
      saldo_t_d=0;
  var cfiltro, cf1,cf2, cpk;
  document.addEventListener('DOMContentLoaded', function() {
    //--- active menu sidebar
    function format_cu(num){
        let formatter = new Intl.NumberFormat('es-PE', { style: 'currency', currency: 'PEN' });
        return formatter.format(num);
    }
    function format_monto(num){
        let formatter = new Intl.NumberFormat('es-PE',{minimumFractionDigits:2});
        return formatter.format(num);
    }
    function format_cu_usd(num){
        let formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
        return formatter.format(num);
    }
    //console.log(format_monto(4545454));
    //console.log(format_cu(4545454));
    //console.log(format_cu_usd(4545454));
    $('#txt-fecha-1').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    $('#txt-fecha-2').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    $("#fecha1").hide();
    $("#fecha2").hide();
    //-
    document.getElementById("selectFecha").onchange= function(){
      let Fvalue = document.getElementById("selectFecha").value;
      if(Fvalue==='h'){
          document.getElementById("fecha1").style.display="none";
          document.getElementById("fecha2").style.display="none";
      }
      if(Fvalue==='f'){
          document.getElementById("fecha1").style.display="block";
          document.getElementById("fecha2").style.display="none";
      }
      if(Fvalue==='ef'){
          document.getElementById("fecha1").style.display="block";
          document.getElementById("fecha2").style.display="block";
      }
    }
    //--- sonsult
    function fetch_st(){
      $('.table').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
       $.ajax({
        url:'/consulta_tras_creadas_caja_liquid_fetch/',
        //async:false,
        data:{'filtro': cfiltro,
        'F1': cf1,
        'F2': cf2,
        'pkC': cpk},
        type:'GET',
        dataType:'json',
        success: function(data){
          $('.table').waitMe('hide');
          let html1 = '';
          let html2 = '';
          //--- impresio
          let html1i = '';
          let html2i = '';
          for(var i=0;i<data.length -1;i++){
            if(data[i].moneda =='soles'){
              html1 += '<tr><td>'+data[i].tipodoc+' - '+data[i].nroR+'</td><td>'+data[i].concepto+'</td><td>'+data[i].fecha+'</td><td>'+data[i].capi+'</td><td>'+data[i].comi_banco+'</td><td>'+data[i].comision+'</td><td>'+data[i].st_ca+'</td><td>'+data[i].st_ce+'</td><td>'+data[i].st_ot+'</td><td>'+data[i].ope+'</td></tr>';
              html1i += '<tr><td>'+data[i].tipodoc+' - '+data[i].nroR+'</td><td>'+data[i].concepto+'</td><td>'+data[i].fecha+'</td><td>'+data[i].capi+'</td><td>'+data[i].comision+'</td><td>'+data[i].st_ca+'</td><td>'+data[i].st_ce+'</td><td>'+data[i].st_ot+'</td><td>'+data[i].ope+'</td></tr>';
            }
            else{
              html2 += '<tr><td>'+data[i].tipodoc+' - '+data[i].nroR+'</td><td>'+data[i].concepto+'</td><td>'+data[i].fecha+'</td><td>'+data[i].capi+'</td><td>'+data[i].comi_banco+'</td><td>'+data[i].comision+'</td><td>'+data[i].st_ca+'</td><td>'+data[i].st_ce+'</td><td>'+data[i].st_ot+'</td><td>'+data[i].ope+'</td></tr>';
              html2i += '<tr><td>'+data[i].tipodoc+' - '+data[i].nroR+'</td><td>'+data[i].concepto+'</td><td>'+data[i].fecha+'</td><td>'+data[i].capi+'</td><td>'+data[i].comision+'</td><td>'+data[i].st_ca+'</td><td>'+data[i].st_ce+'</td><td>'+data[i].st_ot+'</td><td>'+data[i].ope+'</td></tr>';
            }
            
          }
          //---
          document.getElementById('lista-st-s').innerHTML = html1;
          document.getElementById('lista-st-d').innerHTML = html2;

          document.getElementById('lista-t-st-s').innerHTML ='<tr><td>&nbsp;</td><td>&nbsp;</td><th class="right">Subtotal </th><th>'+data[data.length-1].tcapis+'</th><th>'+data[data.length-1].tbancos+'</th><th>'+data[data.length-1].util_soles+'</th><th>'+data[data.length-1].tcof+'</th><th>'+data[data.length-1].tcce+'</th><th>'+data[data.length-1].tcot+'</th><td>&nbsp;</td></tr>';
          //-- impresion
          document.getElementById('imprimir-st-s').innerHTML = html1i;
          document.getElementById('imprimir-st-d').innerHTML = html2i;

          document.getElementById('imprimir-t-st-s').innerHTML ='<tr><td>&nbsp;</td><td>&nbsp;</td><th class="right">Subtotal </th><th>'+data[data.length-1].tcapis+'</th><th>'+data[data.length-1].util_soles+'</th><th>'+data[data.length-1].tcof+'</th><th>'+data[data.length-1].tcce+'</th><th>'+data[data.length-1].tcot+'</th><td>&nbsp;</td></tr>';
       

        }
      });
    
      
    }
    // transferencias creadas bancos
    function fetch_st_bancos(){
      $('.table').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
       $.ajax({
        url:'/consulta_tras_bancos_creadas_caja_liquid_fetch/',
        //async:false,
        data:{'filtro': cfiltro,
        'F1': cf1,
        'F2': cf2,
        'pkC': cpk},
        type:'GET',
        dataType:'json',
        success: function(data){
          $('.table').waitMe('hide');
          let html1 = '';

          //--- impresio
          let html1i = '';
          for(var i=0;i<data.length -1;i++){
            if(data[i].moneda =='soles'){
              html1 += '<tr><td>'+data[i].tipodoc+' - '+data[i].nroR+'</td><td>'+data[i].concepto+'</td><td>'+data[i].fecha+'</td><td>'+data[i].capi+'</td><td>'+data[i].comi_banco+'</td><td>'+data[i].comision+'</td><td>'+data[i].st_ca+'</td><td>'+data[i].st_ce+'</td><td>'+data[i].st_ot+'</td><td>'+data[i].ope+'</td></tr>';
              html1i += '<tr><td>'+data[i].tipodoc+' - '+data[i].nroR+'</td><td>'+data[i].concepto+'</td><td>'+data[i].fecha+'</td><td>'+data[i].capi+'</td><td>'+data[i].comision+'</td><td>'+data[i].st_ca+'</td><td>'+data[i].st_ce+'</td><td>'+data[i].st_ot+'</td><td>'+data[i].ope+'</td></tr>';
            }
          }
          //---
          document.getElementById('lista-st-b-s').innerHTML = html1;
          

          document.getElementById('lista-t-st-b-s').innerHTML ='<tr><td>&nbsp;</td><td>&nbsp;</td><th class="right">Subtotal </th><th>'+data[data.length-1].tcapis+'</th><th>'+data[data.length-1].tbancos+'</th><th>'+data[data.length-1].util_soles+'</th><th>'+data[data.length-1].tcof+'</th><th>'+data[data.length-1].tcce+'</th><th>'+data[data.length-1].tcot+'</th><td>&nbsp;</td></tr>';
          //-- impresion
          document.getElementById('imprimir-st-b-s').innerHTML = html1i;
    
          document.getElementById('imprimir-t-st-b-s').innerHTML ='<tr><td>&nbsp;</td><td>&nbsp;</td><th class="right">Subtotal </th><th>'+data[data.length-1].tcapis+'</th><th>'+data[data.length-1].util_soles+'</th><th>'+data[data.length-1].tcof+'</th><th>'+data[data.length-1].tcce+'</th><th>'+data[data.length-1].tcot+'</th><td>&nbsp;</td></tr>';
        }
      });
    
      
    }
    // transferencias pagadas
    function fetch_pt(){
      $('.table').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        url:'/consulta_tras_pagadas_caja_liquid_fetch/',
        //async:false,
        data:{'filtro': cfiltro,
        'F1': cf1,
        'F2': cf2,
        'pkC': cpk},
        type:'GET',
        dataType:'json',
        success: function(data){
          $('.table').waitMe('hide');
          let html1 = '';
          let html2 = '';
          for(var i=0;i<data.length -1;i++){
            if(data[i].moneda =='soles'){
              html1 += '<tr><td>'+data[i].tipodoc+' - '+data[i].nroR+'</td><td>'+data[i].concepto+'</td><td>'+data[i].st+'</td><td>'+data[i].fecha+'</td><td>'+data[i].capi+'</td><td>'+data[i].egreso+'</td><td>'+data[i].comision+'</td><td>'+data[i].st_ca+'</td><td>'+data[i].st_ce+'</td><td>'+data[i].st_ot+'</td><td>'+data[i].ope+'</td></tr>';
            }
            else{
              html2 += '<tr><td>'+data[i].tipodoc+' - '+data[i].nroR+'</td><td>'+data[i].concepto+'</td><td>'+data[i].st+'</td><td>'+data[i].fecha+'</td><td>'+data[i].capi+'</td><td>'+data[i].egreso+'</td><td>'+data[i].comision+'</td><td>'+data[i].st_ca+'</td><td>'+data[i].st_ce+'</td><td>'+data[i].st_ot+'</td><td>'+data[i].ope+'</td></tr>';
            }
          }                        
          
          document.getElementById('lista-pt-s').innerHTML = html1;
          document.getElementById('lista-pt-d').innerHTML = html2;

          //--;
          document.getElementById('lista-t-pt-s').innerHTML ='<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><th class="right">Subtotal </th><th>'+data[data.length-1].capis+'</th><th>'+data[data.length-1].egresos+'</th><th>'+data[data.length-1].util_soles+'</th><th>'+data[data.length-1].tcof+'</th><th>'+data[data.length-1].tcce+'</th><th>'+data[data.length-1].tcot+'</th><td>&nbsp;</td></tr>';
          //calcular();
          //--- imprimesion
          document.getElementById('imprimir-pt-s').innerHTML = document.getElementById('table-pt-s').innerHTML;
          document.getElementById('imprimir-pt-d').innerHTML = document.getElementById('table-pt-d').innerHTML;
        }
      });

    }
    document.getElementById("btn-cosultar").onclick=function(){
      cfiltro = document.getElementById('selectFecha').value;
      cf1 = document.getElementById('txt-fecha-1').value;
      cf2 = document.getElementById('txt-fecha-2').value;
      cpk = document.getElementById('ComboCaja').value;
      inicializar();
      fetch_st();
      fetch_pt();
      fetch_st_bancos();
      //--
      let select_oficina_d = document.getElementById("ComboOficina");
      document.getElementById("sp-cierre-ofi").innerHTML ='Oficina: '+select_oficina_d.options[select_oficina_d.selectedIndex].text;
      document.getElementById("td-imprimir-ofi").innerHTML ='Oficina: '+select_oficina_d.options[select_oficina_d.selectedIndex].text;
      let select_base = document.getElementById("ComboCaja");
      document.getElementById("sp-cierre-base").innerHTML =select_base.options[select_base.selectedIndex].text;
      document.getElementById("td-imprimir-base").innerHTML =select_base.options[select_base.selectedIndex].text;
      //--
      if(cfiltro =='h'){
        document.getElementById('sp-cierre-de').innerHTML="Liquidacion de HOY";
      }
      else{
        if(cfiltro =='f'){
          document.getElementById('sp-cierre-de').innerHTML='Liquidacion de '+ cf1;
        }
        else{
          document.getElementById('sp-cierre-de').innerHTML='Liquidacion de '+ cf1 +' '+cf2;
        }
        
      }
    }
    //---
    //--
    document.getElementById("chb-aceptar").disabled=true;
    function inicializar(){
      document.getElementById("div-boton").style.display='none';
      document.getElementById("div-obs").style.display='none';
      document.getElementById("chb-aceptar").disabled=false;
      document.getElementById("chb-aceptar").checked =false;
    }
    document.getElementById("div-boton").style.display='none';
    document.getElementById("div-obs").style.display='none';
    document.getElementById("chb-aceptar").onchange=function(){
      if(this.checked){
        document.getElementById("div-boton").style.display='block';
        document.getElementById("div-obs").style.display='block';
      }
      else{
        document.getElementById("div-boton").style.display='none';
        document.getElementById("div-obs").style.display='none';
      }
    }
    //--
    //---
    function fetch_guardar_liquidacion(){
      $('.table').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        url:'/GurdarLiquidCaja/',
        //async:false,
        data:{'pkC': cpk,
        'filtro': cfiltro,
        'fd': cf1,
        'fh': cf2,
        'obs': document.getElementById('obs').value},
        type:'GET',
        dataType:'json',
        success: function(data){
          $('.table').waitMe('hide');
          if(data.exito=='exito'){
            //M.toast({html: 'Se guardo la liquidacion con extio'});
            printElem("impresion");
            //location.reload();
            
          }
          else{
            //M.toast({html: data.exito});
            console.log(data.exito)
          }
        }
      });

      
    }
    document.getElementById("btn-cerrar").onclick=function(){
      //let toastHTML = '<span>Registrar liquidacion de caja?</span><button class="btn-flat toast-action toast-confirmar-ex">LIQUIDAR CAJA</button>';
      //M.toast({html: toastHTML});
      /*
      document.querySelector(".toast-confirmar-ex").onclick=function(){
        M.Toast.dismissAll();
        //-- cierre
        fetch_guardar_liquidacion();
        
      }*/

      fetch_guardar_liquidacion();
      //printElem("impresion");
    }
    //--------------------------------------------------
    function printElem(divId) {
        var content = document.getElementById(divId).innerHTML;
        var mywindow = window.open('about:blank', '_new', 'height=600,width=800');
        mywindow.document.write('<html><head><title>Print</title>');
        mywindow.document.write('</head><body>');
        mywindow.document.write('<style>body{font-family: "Lucida Console";}</style>');
        mywindow.document.write(content);
        mywindow.document.write('</body></html>');
        mywindow.document.close();
        mywindow.focus()
        setTimeout(function(){ mywindow.print(); mywindow.close(); document.getElementById('txt-exito').value='exito';
          document.getElementById('formulario').submit();}, 500);
        return true;
    }

    function open_data_uri_window(url) {
      let html = '<html><title>SISTEMA DE MATERIAL</title>' +
          '<style>html, body { padding: 0; margin: 0; } iframe { width: 100%; height: 100%; border: 0;}  </style>' +
          '<body>' +
          '<iframe src="' + url + '"></iframe>' +
          '</body></html>';
      var a = window.open();
      a.document.write(html);
    }
    
    function get_doc_in(){
      let doc = new jsPDF('l', 'pt');
      let inicia=80
      doc.setFontSize(11);
      doc.text("SISTEMA MATERIAL", 360, 40);
      doc.setFontSize(9);
      doc.text("REPORTE DE INGRESOS EN CAJA TRANSFERENCIAS", 20, 60);
      doc.text("CAJERO: "+"{{ nombre_usuario }}", 20, inicia);
      let resi=doc.autoTableHtmlToJson(document.getElementById("table-in")); 
      doc.autoTable(resi.columns, resi.data, {
          startY: inicia+10,
          margin: {horizontal: 10},
          headerStyles: {rowHeight: 12, fontSize: 8,valign: 'middle'},
          styles: {overflow: 'linebreak'},
          bodyStyles: {rowHeight: 12, fontSize: 8, valign: 'middle'}, 
          theme: 'grid',
          pageBreak: 'avoid',
      });
      return doc;
    
    }

    function get_doc_eg(){
      let doc = new jsPDF('l', 'pt');
      let inicia=80
      doc.setFontSize(11);
      doc.text("SISTEMA MATERIAL", 360, 40);
      doc.setFontSize(9);
      doc.text("REPORTE DE EGRESO EN CAJA TRANSFERENCIAS", 20, 60);
      doc.text("CAJERO: "+"{{ nombre_usuario }}", 20, inicia);
      let resi=doc.autoTableHtmlToJson(document.getElementById("table-eg")); 
      doc.autoTable(resi.columns, resi.data, {
          startY: inicia+10,
          margin: {horizontal: 10},
          headerStyles: {rowHeight: 12, fontSize: 8,valign: 'middle'},
          styles: {overflow: 'linebreak'},
          bodyStyles: {rowHeight: 12, fontSize: 8, valign: 'middle'}, 
          theme: 'grid',
          pageBreak: 'avoid',
      });
      return doc;
    }

    function imprimir_reporte_in(){
      let doc = get_doc_in();
      let uri = doc.output('datauristring');
      open_data_uri_window(uri);
    }

    function export_pdf_in(){
      let doc = get_doc_in();
      doc.save('ReporteIngresosCajaTrans.pdf');
    }

    function imprimir_reporte_eg(){
      let doc = get_doc_eg();
      let uri = doc.output('datauristring');
      open_data_uri_window(uri);
    }

    function export_pdf_eg(){
      let doc = get_doc_eg();
      doc.save('ReporteEgresosCajaTrans.pdf');
    }

    //---
    //---
    //---

    fetch_oficinas();
    function fetch_oficinas(){
      fetch('/oficinas_version3_config_aja/')
      .then(function(response){
        if(response.ok) {
          return response.json();
        }
        else{
          console.log('Respuesta de red OK.');
          return {exito:'error',data:[]}
        }
      })
      .then(function(data) {
        let html ="";
        document.getElementById("ComboOficina").innerHTML="";
        for(var i=0;i<data.length;i++){
          html += '<option value="'+data[i].pk+'">'+data[i].nombre_oficina+'</option>';
        }
        document.getElementById("ComboOficina").innerHTML = html;
        if(data.length>0){
          fetch_cajas();
        }
        
      })
      .catch(function(error) {
        console.log('Hubo un problema con la petición Fetch:' + error.message);
      });
    }
    function fetch_cajas(){
      $.ajax({
        url:'/CajasPersonal_ajax/',
        //async:false,
        data:{'idOfi':document.getElementById("ComboOficina").value},
        type:'GET',
        dataType:'json',
        success: function(data){
        var html ="";
          $("#ComboCaja").html('');
          for(var i=0;i<data.length;i++){
            html += '<option value="'+data[i].pk+'">'+data[i].nombre+' ('+data[i].op+')'+'</option>';
          }
          $('#ComboCaja').html(html);
        }
      });
    };

   document.getElementById("ComboOficina").onchange=function(){
      fetch_cajas();
    }
    //********************************
    $(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 calcularPrjCom(){
          var po,pc,pe;
          if($("#po").val()==null || $("#po").val().toString().trim()==''){
            po=0;
          }
          else{
            po=parseFloat($("#po").val())
          }
          if($("#pc").val()==null || $("#pc").val().toString().trim()==''){
            pc=0;
          }
          else{
            pc=parseFloat($("#pc").val())
          }
          //------
          if ($("#rbPropia").prop("checked")){
            if(po>=100){
              swal("Error!", "La suma  no debe de superar el 100%", "error");
              $(this).prop('value',0);
            }
            else{
              pe=100-po
              $("#pe").prop('value',pe);
            }
          }
          if ($("#rbCompartida").prop("checked")){
            if(po+pc >=100){
              swal("Error!", "La suma  no debe de superar el 100%", "error");
              $(this).prop('value',0);
            }
            else{
              pe=100-(po+pc)
              $("#pe").prop('value',pe);
            }
          }
          
        }
        $("#po").keyup(calcularPrjCom);
        $("#pc").keyup(calcularPrjCom);
        //----
        var tipo_o ='p';
        ajax_consulta_prj();
        function ajax_consulta_prj(){
          $.ajax({
            url:'/consulta_porcentajes_fetch/',
            type:'GET',
            dataType:'json',
            success: function(data){
              tipo_o = data.tc;
              if(data.tc=='p'){
                $("#rbPropia").prop("checked", true);
                $("#campoofic").hide();
              }
              else{
                $("#rbCompartida").prop("checked", true);
                $("#campoofic").show();
              }
              $("#po").prop('value',data.po);
              $("#pc").prop('value',data.pc);
              $("#pe").prop('value',data.pe);
            },
            error: function(xhr, textStatus, errorThrown) {
                    console.log(xhr.responseText);
                },
          });
        };
        $("input[name=tipocaja]").click(function(){
          tipo_o = $(this).val();
          if($(this).val()=="p"){
              $("#campoofic").hide();
              $("#pc").prop('value',0);

          }
          else{
              $("#campoofic").show();
          }
          calcularPrjCom();
        });
        
        function ajax_guardar_prj(){
          $.ajax({
            url:'/GurdarPorcentajeLiquidacion/',
            data:{'tc':tipo_o,'po':$("#po").val(),'pc':$("#pc").val(),'pe':$("#pe").val()},
            type:'GET',
            dataType:'json',
            success: function(data){
              if(data.exito=='exito'){
                $("#ModalDetConficArq").modal('hide');
              }
              else{
                console.log(data.exito)
              }
            },
            error: function(xhr, textStatus, errorThrown) {
                    console.log(xhr.responseText);
                },
          });
        };
        //----
        $("#btnActprj").click(function(){
          ajax_guardar_prj();
        });
    //******************************
  });
  
</script>
{% endblock content1 %}