{% extends "base.html" %}
{% load static %}
{% block titulo %}
Transferencias Pagadas
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navTrans").attr('class','dropdown active');
  $("#navTransPagadas").attr('class','active');
</script>
<style type="text/css">
  .input-group-addon {
    padding: 0px 6px;
}
.fila-corto{
  margin-bottom: 5px;
}
</style>
<div class="row">
  <div class="col-md-12 col-sm-12" >
      <div class="panel panel-default">
        <div class="panel-heading panel-toolbar">
          <strong>TRANSFERENCIAS PAGADAS</strong>
          <div>
            <button type="button" class="btn btn-default btn-sm" id="RefrescarLista"> Actualizar</button>
            <button type="button" class="btn btn-default btn-sm" id="imprimir_trans_bu"><i class="fa fa-print" ></i> Imprimir</button>
          </div>
        </div>
        <div class="panel-body">

          <div class="row">
              <!--
              <div class="col-md-1">
                <button type="button" class="btn btn-success  btn-sm" id="mostrarTodo"> Mostrar Todo</button>
              </div>
              -->
              <!--
              <div class="col-md-4">
                  <input type="text" class="form-control" placeholder="Nombre o Apellidos (Beneficiado o Solicitante)" id="filtro">
                </div>
              <div class="col-md-2" >
                <button type="button" class="btn btn-danger btn-sm" id="buscar"> Buscar</button>
                <p></p>
              </div>
            -->
            <!--
              <div class="col-md-1 col-md-offset-6" >
                <button type="button" class="btn btn-info btn-sm" id="filtro_bancos" data-toggle="modal" data-target="#modalFiltroBanco">Filtro Bancos</button>
                <p></p>
              </div>
              <div class="col-md-2 " >
                <button type="button" class="btn btn-warning btn-sm" id="filtroX" data-toggle="modal" data-target="#modalFiltroAvanzado"><span class="glyphicon glyphicon-cog"></span> Filtro Avanzado</button>
                <p></p>
              </div>
            -->
              <!--
              <div class="col-md-2">
                <label for="comboFiltroF">Filtrar por:</label>
                <div class="fg-line">
                  <div class="select">
                    <select class="form-control" id="comboFiltroF">
                      <option value="f">Fecha</option>
                      <option value="ef">Entre Fechas</option>
                    </select>
                  </div>
                </div>
                <p></p>
              </div>
            -->
          </div>
          <div class="row myb-4">
              <div class="col-md-2">
                <div class="select">
                  <select class="form-control form-control-sm" id="comboFiltroF">
                    <option value="h">Hoy</option>
                    <option value="f">Fecha</option>
                    <option value="ef">Entre Fechas</option>
                  </select>
                </div>
              </div>
              <div class="col-md-2" id="div-f1">
                <input type='text' class=" form-control" id="txtfecha1" autocomplete="off">
              </div>
              <div class="col-md-2" id="div-f2">
                <input type='text' class="form-control" id="txtfecha2" autocomplete="off">
              </div>
              <div class="col-md-1" align="center">
                <button type="button" class=" btn btn-sm btn-danger" id="buscarF"> FILTRAR</button>
              </div>
          </div>
          <div class="row">
              <div class="col-md-5">
                <div class="fg-line">
                <input type="text" class="form-control" placeholder="Nombre o Apellidos (Beneficiado o Solicitante)" id="filtro">
                </div>
                <p></p>
              </div>
              <div class="col-md-1" >
                <button type="button" class="btn btn-primary btn-block btn-sm" id="buscar"><i class="fa fa-search"></i> Buscar</button>
                <p></p>
              </div>

          </div>
          <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                  <table class="table table-hover table-bordered" id="tablePT">
                      <thead>
                        <tr >
                          <th>Beneficiado</th>
                          <th>Monto</th>
                          <th>Remitente</th>
                          <th>Fecha de Pago</th>
                          <th>Pagador</th>
                          <th>P/T</th>
                          <th>Comision</th>
                          <th>Banco</th>
                          <th>Otros</th>
                          <th>Moneda</th>
                          <th>Detalle</th>
                          <th>Obs. de Pago</th>
                          <th>Estado</th>
                        </tr>
                      </thead>
                      <tbody id="listaTransf">
                      </tbody>
                  </table>
                </div>
            </div>

          </div>
        </div>
      </div>
  </div>
</div>
<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">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <label class="modal-title" id="myModalLabel">Transferencia pagada</label>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6" >
                <div class="panel panel-default">
                  <div class="panel-heading" align="center"> <strong>SOLICITANTE</strong></div>
                  <div class="panel-body">
                    
                    <div class="row myb-4">
                      <div class="col-md-8">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon" ><label>DNI/RUC:</label></div>
                            <input type="text" class="form-control" id="txtDNI">
                          </div>
                        </div>
                      </div>
                      
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon" ><label>Nombres</label></div>
                            <input type="text" class="form-control" id="txtNombres_Soli">
                          </div>
                        </div>
                      </div>
                    </div>
                    <br>
                    <div class="row">
                      <div class="panel panel-default">
                        <div class="panel-heading" align="center"> <strong>BENEFICIADO</strong></div>
                      </div>
                    </div>
                    <div class="row myb-4">
                      <div class="col-md-8">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon" ><label>DNI/RUC:</label></div>
                            <input type="text" class="form-control" id="txtN" disabled>
                          </div>
                        </div>
                      </div>
                      
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon" ><label>Nombres</label></div>
                            <input type="text" class="form-control" id="txtNombres_Bene" disabled="disabled">
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    
                  </div>
                </div>
                <div class="panel panel-default" id="divDetBanco">
                  <div class="panel-heading">DETALLE BANCO</div>
                  <div class="panel-body">
                    <div class="row fila-corto">
                      <div class="col-md-10 col-md-offset-1">
                        <div class="input-group">
                          <div class="input-group-addon"><label>BANCO</label></div>
                          <input type="text" class="form-control" id="txtdetb-banco" name="detb-banco" autocomplete="off" disabled>
                        </div>
                      </div>
                    </div>

                    <div class="row fila-corto">
                      <div class="col-md-10 col-md-offset-1">
                        <div class="input-group">
                          <div class="input-group-addon"><label>N° Cuenta / DNI:</label></div>
                          <input type="text" class="form-control" id="txtdetb-nrocta" name="detb-nrocta" autocomplete="off" disabled>
                        </div>
                      </div>
                    </div>
                    <div class="row fila-corto">
                      <div class="col-md-10 col-md-offset-1">
                        <div class="input-group">
                          <div class="input-group-addon"><label>Cel Referencia:</label></div>
                          <input type="text" class="form-control" id="txtdetb-celref" name="detb-celref" autocomplete="off" disabled>
                        </div>
                      </div>
                    </div>
                    <div class="row fila-corto">
                      <div class="col-md-10 col-md-offset-1">
                        <div class="input-group">
                          <div class="input-group-addon"><label>Nro Operacion:</label></div>
                          <input type="text" class="form-control" id="txtdetb-nroope" name="detb-nroope" autocomplete="off">
                        </div>
                      </div>
                    </div>
                    <div class="row fila-corto">
                      <div class="col-md-10 col-md-offset-1">
                        <div class="input-group">
                          <div class="input-group-addon"><label>Nro Giro:</label></div>
                          <input type="text" class="form-control" id="txtdetb-nrogiro" name="detb-nrogiro" autocomplete="off">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-10 col-md-offset-1">
                        <div class="input-group">
                          <div class="input-group-addon"><label>Clave de cobro:</label></div>
                          <input type="text" class="form-control" id="txtdetb-clave" name="detb-clave" autocomplete="off">
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
            </div>
            <div class="col-md-6" >
              <div class="panel panel-success">
                <div class="panel-heading panel-toolbar" align="center"> 
                  <strong>TRANSFERENCIA</strong>
                <button type="button" class="btn btn-success btn-sm" id="rimprimir">Re-imprimir</button>
                </div>
                <div class="panel-body">
                    <div class="row myb-4">
                        <div class="col-md-8">
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-addon" ><label>ID</label></div>
                              <input type="text" class="form-control" id="txtIDtrans" disabled="disabled">   
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="row myb-4">
                        <div class="col-md-8">
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-addon" ><label>Estado</label></div>
                              <input type="text" class="form-control" id="txtEstadoTrans" disabled="disabled">
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="row myb-4">
                        <div class="col-md-12">
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-addon" ><label>Fecha de Pago</label></div>
                              <input type="text" class="form-control" id="txtFecha" disabled="disabled">   
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="row myb-4">
                        <div class="col-md-12">
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-addon" ><label>Personal Emisor</label></div>
                              <input type="text" class="form-control" id="txtPersonalE" disabled="disabled">   
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="row myb-4">
                        <div class="col-md-12">
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-addon" ><label>Oficina Origen</label></div>
                              <input type="text" class="form-control" id="txtOficinaOri" disabled="disabled">   
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="row myb-4">
                        <div class="col-md-12">
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-addon" ><label>Cantidad</label></div>
                              <input type="text" class="form-control t-monto" id="txtMonto" disabled="disabled">   
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="row myb-4">
                        <div class="col-md-12">
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-addon" ><label>Comisión</label></div>
                             <input type="text" class="form-control t-monto" id="txtComicion" disabled="disabled">   
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="row myb-4">
                        <div class="col-md-12">
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-addon" ><label>Egreso Extra</label></div>
                             <input type="text" class="form-control t-monto" id="txtEgresoExtra" disabled="disabled">   
                            </div>
                          </div>
                        </div>
                    </div>
                    <!--  
                    <div class="row">
                        <div class="col-md-4 col-md-offset-1" align="right"> 
                          <label>Observaciones</label> 
                        </div>
                        <div class="col-md-6">
                          <textarea class="form-control" rows="2" id="txtObs" disabled="disabled" ></textarea >         
                        </div> 
                    </div>
                    <p></p>
                   -->
                   <div class="row">
                        <div class="col-md-12">
                          <label>Detalle Otros Conceptos</label> 
                        </div>
                        <div class="col-md-12">
                          <textarea class="form-control" rows="2" id="txtotros_con" disabled="disabled" ></textarea >
                        </div> 
                    </div>
                   <div class="row myb-4">
                        <div class="col-md-12">
                          <label>Observaciones de Pago</label> 
                        </div>
                        <div class="col-md-12">
                          <textarea class="form-control" rows="2" id="txtObspa" disabled="disabled" ></textarea >
                        </div> 
                    </div>
                    
                    
                </div>
              </div>
            </div>

          </div>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    <!--<input type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#myModal" value="Clientes">-->
 <div id="modal1" 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  id="platillaI" style="font-family:'arial', Monaco, monospace;font-size:18px;"> 
            <table>
              
               <tr style="border: 1px solid #000">
                <td width="31%"></td>
                <td><h4>PAGO DE ST</h4></td>
                <td nowrap width="32%"></td>
              </tr>
            </table>
            <table>   
              <tr>
                <td nowrap style="text-align: left;"><h4 id="nror"></h4> </td>
                <td nowrap style="padding-left: 50px"><h4 id="idST"></h4> </td>
                <td nowrap style="padding-right:10px"></td>
              </tr>
              <tr>
                <td nowrap>FECHA ENVÍO:  </td>
                <td nowrap style="padding-left: 20px"><span id="fechaCreacion"></span></td>
                <td nowrap></td>
              </tr>
            </table> 
            <p></p>
             <table>
              <tr>
                <td nowrap>FECHA PAGO: </td>
                <td style="padding-left: 20px"> <span id="fepa"><span></td>
                <td nowrap></td>
              </tr>
            </table>

             <table>
               <tr>
                <td nowrap><h3><b>MONTO:</b></h3></td>
                <td nowrap></td>
                <td nowrap><h3><b id="plM"></b></h3></td>
              </tr>
              <tr>
                <td nowrap>EGRESO EXTRA:</td>
                <td nowrap style="padding-left: 20px"></td>
                <td nowrap><h4 id="plM_e"></h4></td>
              </tr>
            </table>

            <table>
              <tr>
                <td nowrap>PROCEDENCIA:</td>
                <td style="padding-left: 20px"> <h4 id="plOri"><h4></td>
                <td nowrap></td>
              </tr>
            </table>

            <table>
               <tr>
                <td nowrap style="padding-bottom: 18px;">REMITENTE:</td>
                <td nowrap style="padding-left: 15px;white-space: pre;"><span id="plR"></span></td>
                <td nowrap></td>
              </tr>
               <tr>
                <td nowrap style="padding-bottom: 18px;">BENEFICIADO:</td>
                <td nowrap style="padding-left: 15px;white-space: pre;"><span id="plB"></span></td>
                <td nowrap></td>
              </tr>
            </table>

            <table>
              <tr>
                <td nowrap>OBSERVACIONES:</td>
                <td style="padding-left: 20px" id="plObs"></td>
                <td nowrap></td>
              </tr> 
            </table>
            <br></br>
             <table>
              
              <tr>
                <td nowrap>____________________</td>
                <td style="padding-left: 20px"></td>
                <td nowrap></td>
              </tr>
              <tr>
                 <td nowrap>OP. {{ nombre_usuario }}</td>
                <td style="padding-left: 20px"></td> 
                <td nowrap><div style="margin-top:-40px;width:75px;height:85px;border:1px solid #000;"> </div></td>
              </tr>
              <p></p>
              <p></p>
              <tr>
                <td nowrap>____________________</td>
                <td style="padding-left: 20px"></td>
                <td nowrap></td>
              </tr>
              <tr>
                 <td nowrap><b id="idn"></b></td>
                <td style="padding-left: 20px"></td>
                <td nowrap></td>
              </tr>
             
            </table>
            <br></br>
            <table>
              <tr>
                <td>Consultas y Reclamos:</td>
                <td  style="text-align: left;padding-left: 10px;">{{ ObsOficina }}</td>
                <!--<td>{{ ObsOficina }}</td>-->
              </tr>
            </table>
               
          </div>
        </div>

        <div class="modal-footer">
          <hr>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- modal de filtro avanzado -->
<div id="modalFiltroAvanzado" 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">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">FILTRO AVANZADO</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-2 col-md-offset-5">
              <div class="checkboxFA">
                  <label class="">
                    <input id="ts4FA" type="checkbox"> Todas las cajas
                  </label>
              </div> 
             </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <p class="bg-success">
                <B>FECHA DE PAGO</B>
              </p>
            </div>
            
          </div>
          <!--
          <div class="row">
            <div class="col-md-3 col-md-offset-1">
              <label for="comboFiltroF">Filtrar por:</label>
              <div class="fg-line">
                <div class="select">
                  <select class="form-control" id="comboFechasFA">
                    <option value="0">Cualquier Fecha</option>
                    <option value="h">hoy</option>
                    <option value="f">Fecha</option>
                    <option value="ef">Entre Fechas</option>
                  </select>
                </div>
              </div>
              <p></p>
            </div>
            <div class="col-md-2">
              <label for="txtfecha1">Del:</label>
              <input type="text" class="form-control" id="txtfechaFA1">
              <p></p>
            </div>
            <div class="col-md-2">
              <label for="txtfecha2">Hasta:</label>
              <input type="text" class="form-control" id="txtfechaFA2">
              <p></p>
            </div>
          </div>
          -->
          <div class="row">
            <div class="col-md-12">
              <p class="bg-success">
                <b>OFICINA ORIGEN</b>
              </p>
            </div>
            
          </div>
          <div class="row">
            <div class="col-md-1 col-md-offset-1"  align="right">
              <h4><b style="font-size: 15px;">Oficina:</b></h4> 
            </div>
            <div class="col-md-5" >
              <div class="select">
                  <select id="ComboOficinaFA" placeholder="Seleccione Oficina">   
                  </select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <p class="bg-success">
                <b>NOMBRES Y APELLIDOS (benefiaciado o solicitante)</b>
              </p>
            </div>
            
          </div>
          <div class="row">
            <div class="col-md-3 col-md-offset-1">
             <input type="text" class="form-control" id="txtnombreFA" placeholder="NOMBRE">
              <p></p>
            </div>
            <div class="col-md-3">
             <input type="text" class="form-control" id="txtapFA" placeholder="A. PATERNO">
              <p></p>
            </div>
            <div class="col-md-3">
             <input type="text" class="form-control" id="txtamFA" placeholder="A. MATERNO">
              <p></p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <p class="bg-success">
                <b>EXTRAS</b>
              </p>
            </div>
            
          </div>
          <div class="row">
            <div class="col-md-2 col-md-offset-1">
              <label>Nro por Pagina</label>
            </div>
            <div class="col-md-2">
             <input type="text" class="form-control" id="txtnropagFA" placeholder="20">
              <p></p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 col-md-offset-4" >
              <button type="button" class="btn btn-success btn-block btn-sm" id="ProcesarFA"> <span class="glyphicon glyphicon-hourglass"></span> FILTRAR</button>
              <p></p>
            </div>

          </div>
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- end modal filtro avanzado-->
<!-- filtro bancos 19/05/2020 -->
<div id="modalFiltroBanco" 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>
          <br>
        </div>
        <div class="modal-body">
            <div class="row">
              <div class="col-md-12">
                <p class="bg-success">
                  <B>FECHA DE PAGO</B>
                </p>
              </div>
              
            </div>
            <div class="row">
              <div class="col-md-4">
                <label for="comboFechasFB">Filtrar por:</label>
                <div class="fg-line">
                  <div class="select">
                    <select class="form-control" id="comboFechasFB">
                      <option value="0">Cualquier Fecha</option>
                      <option value="h">hoy</option>
                      <option value="f">Fecha</option>
                      <option value="ef">Entre Fechas</option>
                    </select>
                  </div>
                </div>
                <p></p>
              </div>
              <div class="col-md-4">
                <label for="txtfecha1B">Del:</label>
                <input type="text" class="form-control" id="txtfechaFA1B">
                <p></p>
              </div>
              <div class="col-md-4">
                <label for="txtfecha2B">Hasta:</label>
                <input type="text" class="form-control" id="txtfechaFA2B">
                <p></p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <p class="bg-info">
                  <B>BANCO</B>
                </p>
              </div>
              
            </div>
            <div class="row">
              <div class ="col-md-12">
                <div class="row">
                  <div class="col-md-12" align="center" style="background-color: #c5cae9;">
                    <label style="margin-bottom: 5px; margin-right: 10px;" align="center">
                        <input type="radio" name="banco" id="rbbn" value="bn" checked><br>
                        Banco Nacion 
                    </label>
                    <label style="margin-bottom: 5px;margin-right: 10px;" align="center">
                        <input type="radio" name="banco" id="rbcn" value="cn"><br>
                        Continental
                    </label>
                    <label style="margin-bottom: 5px;margin-right: 10px;" align="center">
                        <input type="radio" name="banco" id="rbbcp" value="bcp"><br>
                        BCP
                    </label>
                    <label style="margin-bottom: 5px;" align="center">
                        <input type="radio" name="banco" id="rbotro" value="otro"><br>
                        Otros
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <p></p>
            <div class="row">
              <div class="col-md-2 col-md-offset-1">
                <label>Nro por Pagina</label>
              </div>
              <div class="col-md-2">
               <input type="text" class="form-control" id="txtnropagFAB" placeholder="100">
                <p></p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4 col-md-offset-4" >
                <button type="button" class="btn btn-success btn-block btn-sm" id="ProcesarFAB"> <span class="glyphicon glyphicon-hourglass"></span> FILTRAR</button>
                <p></p>
              </div>

            </div>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /filtro bancos 19/05/2020 -->
<script type="text/JavaScript">
  var Aux="";
  var filaI =0;
  var pagina=1;
  $(document).ready(function(){
    /*$(document).on("click",".detalles",function(){
        var cod = $(this).attr('id');
        showDetalles(cod);
    });*/
    //----
    $('#txtfecha1').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    $('#txtfecha2').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    //
    $("#div-f1").hide();
    $("#div-f2").hide();
    //
    $("#comboFiltroF").change(function(){
      if($("#comboFiltroF").val()=="ef"){
        $("#div-f1").show();
        $("#txtfecha1").prop("value","");
        $("#div-f2").show();
        $("#txtfecha2").prop("value","");
      }
      if($("#comboFiltroF").val()=="f"){
        $("#txtfecha1").prop("value","");
        $("#div-f1").show();
        $("#txtfecha2").prop("value","");
        $("#div-f2").hide();
      }
      if($("#comboFiltroF").val()=="h"){
        $("#txtfecha1").prop("value","");
        $("#div-f1").hide();
        $("#txtfecha2").prop("value","");
        $("#div-f2").hide();
      }
    });
    //
    $("#buscarF").click(function(){
      ajax_Transferencias();
    })
    ajax_Transferencias();
    $("#RefrescarLista").click(function(){
      ajax_Transferencias();
    });
    $("#rimprimir").click(function(){
        $('#platillaI').printThis();
    });

    $("#fd").hide();

    $(document).on("click",".filaTrans",function(){

      $('#txtIDtrans').prop("value",null);
      limpiar_det_banco();
      var num = $(this).attr('id');
      filaI = num;
      var fila= $(this).attr('class');
      //$("."+fila).attr('class','filaTrans');
      //$("#"+num).attr('class','filaTrans info');
      //insertar datos en modal
      //$('#extornarT').prop('disabled',false);
      //$('#ForzarpagoT').prop('disabled',false);
      //$('#extornarT').show();
      //$('#ForzarpagoT').show();
      //--------------
      $('#txtEstadoTrans').prop("value",Aux[filaI].estado);
      $('#txtDNI').prop("value",Aux[filaI].dni_rmt);
      $('#txtNombres_Soli').prop("value",Aux[filaI].nombre_rmt+" "+Aux[filaI].paterno_rmt +" "+ Aux[filaI].materno_rmt);
      $('#txtNombres_Bene').prop("value",Aux[filaI].nombre_bnf +" "+ Aux[filaI].paterno_bnf +" "+ Aux[filaI].materno_bnf);
      $("#txtN").prop('value',Aux[filaI].dni_bnf);
      $('#txtIDtrans').prop("value",Aux[filaI].id_trans);
      $('#txtFecha').prop("value",Aux[filaI].fecha);
      $('#txtPersonalE').prop("value",Aux[filaI].enviador);
      $('#txtOficinaOri').prop("value",Aux[filaI].oficina_ori);
      $('#txtMonto').prop("value",Aux[filaI].monto);
      $('#txtComicion').prop("value",Aux[filaI].comicion);
      $('#txtEgresoExtra').prop("value",Aux[filaI].egreso_extra);
      $('#txtObs').prop("value",Aux[filaI].obs);
      $('#txtObspa').prop("value",Aux[filaI].obs_pa);
      $('#txtotros_con').prop("value",Aux[filaI].otros_conceptos);
      $('#txtEgresoExtra').prop("value",Aux[filaI].egreso_extra);
      /*if(Aux[filaI].estado !="activo"){
        //$('#extornarT').prop('disabled',true);
        //$('#ForzarpagoT').prop('disabled',true);
        $('#pagoT').hide();
      }*/
       $("#plB").text(Aux[filaI].nombre_bnf +"\n"+ Aux[filaI].paterno_bnf +" "+ Aux[filaI].materno_bnf);
      $("#plR").text(Aux[filaI].nombre_rmt+"\n"+Aux[filaI].paterno_rmt +" "+ Aux[filaI].materno_rmt);
      $("#plObs").text(Aux[filaI].obs);
      $("#idn").text("DNI:"+"\n"+Aux[filaI].dni_bnf);
      $("#nror").text("NRO: "+Aux[filaI].nroRecibo);
      $("#idST").text("ST: "+Aux[filaI].id_trans);
      $("#fepa").text(Aux[filaI].fecha);
      $("#fechaCreacion").text(Aux[filaI].fechaC);
      var mr="";
      if(Aux[filaI].moneda=="soles")
        {
          mr="S/. ";
        }
      else
        {
          mr="$/. ";
      }
      $("#plM").text(mr +String(Aux[filaI].monto));
      $("#plOri").text(Aux[filaI].oficina_ori);
      $("#plM_e").text(Aux[filaI].egreso_extra);
      $("#divDetBanco").hide();
      $("#txtdetb-banco").val(null);
      $("#txtdetb-nrocta").val(null);
      $("#txtdetb-celref").val(null);
      $("#txtdetb-nroope").val(null);
      $("#txtdetb-nrogiro").val(null);
      $("#txtdetb-clave").val(null);
      if(Aux[filaI].banco.length>2){
        $("#divDetBanco").show();
        $("#txtdetb-banco").val(Aux[filaI].banco);
        $("#txtdetb-nrocta").val(Aux[filaI].nroCta);
        $("#txtdetb-celref").val(Aux[filaI].cel_referencia);
        $("#txtdetb-nroope").val(Aux[filaI].nro_operacion);
        $("#txtdetb-nrogiro").val(Aux[filaI].nro_giro);
        $("#txtdetb-clave").val(Aux[filaI].clave);
        //consulta
        //ajax_detalle_banco();
      }
    });
    //otra funcion
    function ocultarmodal(){
      $('#myModal').modal('hide')
    };
    //
     function limpiar_det_banco(){
        $("#txtdetb-banco").val(null);
        $("#txtdetb-celref").val(null);
        $("#txtdetb-nrocta").val(null);
        $("#txtdetb-nroope").val(null);
        $("#txtdetb-nrogiro").val(null);
        $("#txtdetb-clave").val(null);
      }
      /*
      function ajax_detalle_banco(){
        $('#divDetBanco').waitMe({effect : 'win8_linear',text : '[Consorcio Imperial] Recuperando Datos',color:'#3f3479',fontSize:'18px'});
        $.ajax({
          data:{'id_st':$('#txtIDtrans').val()},
          url:'/detalle_banco_st/',
          //async:false,
          type:'GET',
          dataType:'json',
          success: function(data){
            $('#divDetBanco').waitMe('hide');
            if(data.exito=="exito"){
              $("#txtdetb-banco").val(data.banco);
              $("#txtdetb-celref").val(data.celref);
              $("#txtdetb-nrocta").val(data.cta_dni);
              $("#txtdetb-nroope").val(data.nro_ope);
              $("#txtdetb-nrogiro").val(data.nro_giro);
              $("#txtdetb-clave").val(data.clave);
            }
            else{
              $('#divDetBanco').hide();
            }
          }
        });
      };
      */
      //---
    //otra funcion
    function ajax_Transferencias(){
      $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        data:{'pg':pagina,'filtro':$("#comboFiltroF").val(),'F1':$("#txtfecha1").val(),'F2':$("#txtfecha2").val() },
        url:'/listaTransfereciasPagadas_ajax/',
        //async:false,
        type:'GET',
        dataType:'json',
        success: function(data){
          console.log(data);
          Aux = data;
          var html ="";
          for(var i=0;i<data.length;i++){
            var estado ="";
            if(data[i].estado =="extornado"){
              estado="danger";
            }
            if(data[i].estado=="pagado"){
              estado = "success";
            }
            html += '<tr data-toggle="modal" data-target="#myModal" class="filaTrans '+estado+'" id="'+i+'"><td>'+data[i].nombre_bnf+' '+data[i].paterno_bnf+' '+data[i].materno_bnf+'</td><td><b>'+data[i].monto+'</b></td><td>'+data[i].nombre_rmt+' '+data[i].paterno_rmt+' '+data[i].materno_rmt+'</td><td>'+data[i].fecha+'</td><td>'+data[i].pagador+'</td><td>'+data[i].nroRecibo+'</td><td><b>'+data[i].comicion+'</b></td><td>'+data[i].banco+'</td><td><b>'+data[i].monto_conceptos+'</b></td><td>'+data[i].moneda+'</td><td>'+data[i].otros_conceptos+'</td><td>'+data[i].obs_pa+'</td><td>'+data[i].estado+'</td></tr>';
          }
          $('#listaTransf').html(html);
          $('.table-responsive').waitMe('hide');
        }
      });
    };

      $("#buscar").click(function(){
        $('#listaTransf').html('');
        pagina=1;
        PonerInicioPag();
        ajax_TransferenciasTotal_filtro();
      });

    //
    function ajax_TransferenciasTotal_filtro(){
      $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        data:{'pg':pagina,'filtro':$("#filtro").val()},
        url:'/listaTransferenciasPagadasTotal_filtro_ajax/',
        //async:false,
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux = data;
          var html ="";
          for(var i=0;i<data.length;i++){
            var estado ="";
            if(data[i].estado =="extornado"){
              estado="danger";
            }
            if(data[i].estado=="pagado"){
              estado = "success";
            }
           html += '<tr data-toggle="modal" data-target="#myModal" class="filaTrans '+estado+'" id="'+i+'"><td>'+data[i].nombre_bnf+' '+data[i].paterno_bnf+' '+data[i].materno_bnf+'</td><td><b>'+data[i].monto+'</b></td><td>'+data[i].nombre_rmt+' '+data[i].paterno_rmt+' '+data[i].materno_rmt+'</td><td>'+data[i].fecha+'</td><td>'+data[i].pagador+'</td><td>'+data[i].nroRecibo+'</td><td><b>'+data[i].comicion+'</b></td><td>'+data[i].banco+'</td><td><b>'+data[i].monto_conceptos+'</b></td><td>'+data[i].moneda+'</td><td>'+data[i].otros_conceptos+'</td><td>'+data[i].obs_pa+'</td><td>'+data[i].estado+'</td></tr>';
          }
          $('#listaTransf').html(html);
          $('.table-responsive').waitMe('hide');
        }
      });
    };
    
    function PonerInicioPag(){
        $(".pag").attr('class','pag');
        $("#pag1").attr('class','active pag');
        $("#pg1").text(1);
    };
    
    $("#imprimir_trans_bu").click(function(){
       //var datos=$("#comboFiltro :selected").text().split("/");
        var d = new Date();
        var n = d.toLocaleString();

        var doc = new jsPDF('l', 'pt');
        var res = doc.autoTableHtmlToJson(document.getElementById("tablePT"));
        doc.setFontSize(14);
        doc.text("Reporte Tranferencias Pagadas", 20, 30);
        doc.setFontSize(12);
        doc.text('Oficina : '+'{{ SITE_URL }}', 20, 60);
        doc.text('Usuario : '+'{{ nombre_usuario }}', 20, 80);

        doc.autoTable(res.columns, res.data, {
            margin: {horizontal: 20},
            startY: doc.autoTableEndPosY() + 120,
            margin: {horizontal: 10},
            styles: {overflow: 'linebreak'},
            bodyStyles: {valign: 'top'},
            columnStyles: {email: {columnWidth: 'wrap'}},
            theme: 'grid',
        });

        doc.save('reportePT.pdf');

       //$('#imprimir_trans').printThis();
    });
    //--------- filtro avanzado
        $('#txtnropagFA').numeric(); 
        $('#txtfechaFA1').datetimepicker({
          locale: 'es',
          format: 'YYYY-MM-DD'
        });
        $('#txtfechaFA2').datetimepicker({
          locale: 'es',
          format: 'YYYY-MM-DD'
        });
        $("#txtfechaFA1").hide();
        $("#txtfechaFA2").hide();
        $("#comboFechasFA").change(function(){
          if($(this).val()=="0"||$(this).val()=="h"){
            $("#txtfechaFA1").hide();
            $("#txtfechaFA2").hide();
          }
          if($(this).val()=="f"){
            $("#txtfechaFA1").show();
            $("#txtfechaFA2").hide();
          }
          if($(this).val()=="ef"){
            $("#txtfechaFA1").show();
            $("#txtfechaFA2").show();
          }
        });
        ajax_oficinaOri();
         function ajax_oficinaOri(){
            $.ajax({
              {% ifequal OfCentral 'si' %}
              url:'/oficinas_version3_ajax/',
              {% else %}
               url:'/oficinas_version2_ajax/',
              {% endifequal %}
              type:'GET',
              dataType:'json',
              success: function(data){
              var html ='<option value="0">Todas las oficinas</option>';
                $("#ComboOficinaFA").html('');
                for(var i=0;i<data.length;i++){
                  if(data[i].bx == 'si'){
                    html += '<option value="'+data[i].pk+'" style="background-color: #FFA;color: #000;">'+data[i].nombre_oficina+'</option>';
                  }
                  else{
                    html += '<option value="'+data[i].pk+'">'+data[i].nombre_oficina+'</option>';
                  }
                }
                $('#ComboOficinaFA').html(html);
                $('#ComboOficinaFA').selectize();
              }
            });
          };
          //----
          $("#ProcesarFA").click(function(){
            var saFA=null;
            if($("#ts4FA").prop("checked")){
              saFA="tc";//todas las cajas
            }
            ajax_TransferenciasFA(saFA);
          })
          //-------

          //--------
          function ajax_TransferenciasFA(sa){
          $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
          $.ajax({
            data:{'pg':pagina,'filtroF':$("#comboFechasFA").val(),'fDesde':$("#txtfechaFA1").val(),'fHasta':$("#txtfechaFA2").val(),'tc':sa,'oficina':$("#ComboOficinaFA").val(),'fNombre':$("#txtnombreFA").val(),'fAp':$("#txtapFA").val(),'fAm':$("#txtamFA").val(),'nroXpag':$("#txtnropagFA").val()},
            url:'/listaTransfereciasPagadas_filtro_avanzado_ajax/',
            //async:false,
            type:'GET',
            dataType:'json',
            success: function(data){
              Aux = data;
              var html ="";
              for(var i=0;i<data.length;i++){
                var estado ="";
              if(data[i].estado =="extornado"){
                estado="danger";
              }
              if(data[i].estado=="pagado"){
                estado = "success";
              }
              html += '<tr data-toggle="modal" data-target="#myModal" class="filaTrans '+estado+'" id="'+i+'"><td>'+data[i].nombre_bnf+' '+data[i].paterno_bnf+' '+data[i].materno_bnf+'</td><td><b>'+data[i].monto+'</b></td><td>'+data[i].nombre_rmt+' '+data[i].paterno_rmt+' '+data[i].materno_rmt+'</td><td>'+data[i].fecha+'</td><td>'+data[i].pagador+'</td><td>'+data[i].nroRecibo+'</td><td><b>'+data[i].comicion+'</b></td><td><b>'+data[i].monto_conceptos+'</b></td><td>'+data[i].moneda+'</td><td>'+data[i].obs+'</td><td>'+data[i].otros_conceptos+'</td><td>'+data[i].obs_pa+'</td><td>'+data[i].estado+'</td></tr>';
              }
              $('#listaTransf').html(html);
               $("#modalFiltroAvanzado").modal("hide");
              $('.table-responsive').waitMe('hide');
            }
          });
        };
          //------
          ///-------- filtro de bancos
        $('#txtnropagFAB').numeric(); 
        $('#txtfechaFA1B').datetimepicker({
          locale: 'es',
          format: 'YYYY-MM-DD'
        });
        $('#txtfechaFA2B').datetimepicker({
          locale: 'es',
          format: 'YYYY-MM-DD'
        });
        $("#txtfechaFA1B").hide();
        $("#txtfechaFA2B").hide();
        $("#comboFechasFB").change(function(){
          if($(this).val()=="0"||$(this).val()=="h"){
            $("#txtfechaFA1B").hide();
            $("#txtfechaFA2B").hide();
          }
          if($(this).val()=="f"){
            $("#txtfechaFA1B").show();
            $("#txtfechaFA2B").hide();
          }
          if($(this).val()=="ef"){
            $("#txtfechaFA1B").show();
            $("#txtfechaFA2B").show();
          }
        });
        $("#ProcesarFAB").click(function(){
          let banco_aux="ninguno";
          //banco de la nacion
          if($("#rbbn").prop('checked')){
            banco_aux = "Banco de la Nacion";
          }
          // continental
          if($("#rbcn").prop('checked')){
            banco_aux="Continental"
          }
          //bcp
          if($("#rbbcp").prop('checked')){
            banco_aux = "BCP"
          }
          //
           if($("#rbotro").prop('checked')){
            banco_aux ="Otros Bancos"
          }
            ajax_TransferenciasFAB(banco_aux);
            
        })

          //--------
          function ajax_TransferenciasFAB(bco){
          $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
          $.ajax({
            data:{'pg':pagina,'filtroF':$("#comboFechasFB").val(),'fDesde':$("#txtfechaFA1B").val(),'fHasta':$("#txtfechaFA2B").val(),'nroXpag':$("#txtnropagFAB").val(),'banco':bco},
            url:'/listaTransfereciasPagadas_bancos_ajaxs/',
            //async:false,
            type:'GET',
            dataType:'json',
            success: function(data){
              Aux = data;
              var html ="";
              for(var i=0;i<data.length;i++){
                var estado ="";
              if(data[i].estado =="extornado"){
                estado="danger";
              }
              if(data[i].estado=="pagado"){
                estado = "success";
              }
              html += '<tr data-toggle="modal" data-target="#myModal" class="filaTrans '+estado+'" id="'+i+'"><td>'+data[i].nombre_bnf+' '+data[i].paterno_bnf+' '+data[i].materno_bnf+'</td><td><b>'+data[i].monto+'</b></td><td>'+data[i].nombre_rmt+' '+data[i].paterno_rmt+' '+data[i].materno_rmt+'</td><td>'+data[i].fecha+'</td><td>'+data[i].pagador+'</td><td>'+data[i].nroRecibo+'</td><td><b>'+data[i].comicion+'</b></td><td><b>'+data[i].monto_conceptos+'</b></td><td>'+data[i].moneda+'</td><td>'+data[i].obs+'</td><td>'+data[i].otros_conceptos+'</td><td>'+data[i].obs_pa+'</td><td>'+data[i].estado+'</td></tr>';
              }
              $('#listaTransf').html(html);
               $("#modalFiltroBanco").modal("hide");
              $('.table-responsive').waitMe('hide');
            }
          });
        };
          //---
  });
</script>
{% endblock content1 %}