{% extends "base.html" %}
{% load static %}
{% block titulo %}
Retiros Bancos Creados
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navTransBanco").attr('class','dropdown active');
  $("#navRetiroTransBancoCreadas").attr('class','active');
</script>
<style type="text/css">
  .input-group-addon {
    padding: 0px 6px;
}
.fila-corto{
  margin-bottom: 5px;
}
</style>

{% if retiro_st == 'si' %}
<div class="row">
  <div class="col-md-12 col-sm-12" >
      <div class="panel panel-default">
        <div class="panel-heading panel-toolbar"> 
          <strong>RETIROS DE BANCOS CREADOS</strong>
          <div class="toolbar">
            <button type="button" class="btn btn-default btn-sm" id="RefrescarLista"><span class="fa fa-refresh"></span> Actualizar</button>
            <button type="button" class="btn btn-default btn-sm item-toolbar" 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-12">
              <h4 class="bg-success" align="center" id="ExitoMensaje">
              </h4>
            </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-12">

                  <div class="table-responsive" >
                    <table class="table table-hover table-striped" id="tableST">
                        <thead>
                          <tr>
                            <th>Fecha</th>
                            <th>DNI/RUC</th>
                            <th>Cliente</th>
                            <th>Banco</th>
                            <th>T/D</th>
                            <th>Nro Recibo</th>
                            <th>Monto</th>
                            <th>Comision</th>
                            <th>Observaciones</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody id="listaTransf">
                        </tbody>
                    </table>
                  </div>
              </div>
          </div>
          <br>
        </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">SOLICITUD DE TRANSFERENCIA</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-4 col-md-offset-1" align="right"> 
                          <label>DNI/RUC</label> 
                        </div>
                        <div class="col-md-6">
                          <input type="text" class="form-control" id="txtDNI">
                        </div> 
                      -->
                      <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">
                        <div class="col-md-12"> 
                            <span>Nombres</span>
                         <label class="pull-left1" id="lbNB"></label> 
                        
                         <label class="pull-left1" id="lbAPB"></label> 
                         <label class="pull-left1" id="lbAMB"></label> 
                        </div>
                        <div class="col-md-offset-4">
                          <div class="btn-group" role="group">
                             <strong><a class="text-info" href="#" data-toggle="modal" data-target="#myModalB" id="btnMB">Cambiar Nombre</a></strong>
                           </div>
                         </div>
                          <div class="row">
                          <div class="col-md-12">
                            <div class="alert alert-danger hidden" id="alertMessage" role="alert" style="color: #313534;">
                              <strong id="txtMessage"></strong>
                            </div>
                          </div>
                        </div>
                        <!--<div class="col-md-6">
                          <input type="text" class="form-control" id="txtNombres_Bene" disabled="disabled">         
                        </div>--> 
                    </div>

                    <div class="row">
                      <div class="col-md-8">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon" ><label>DNI</label></div>
                            <input type="text" class="form-control" id="txtN">
                          </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>OPERACIÓN</label></div>
                          <input type="text" class="form-control" id="txtdetb-operacion" name="detb-operacion" 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">
                        </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">
                        </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 class="row">
                      <div class="col-md-12" align="center">
                        <div class="btn-group" role="group">
                           <strong><a class="text-info" href="#" id="btn_actualizar_bancos">Actualizar Datos de Bancos</a></strong>
                         </div>
                      </div>
                    </div>
                    <!--
                    <p></p>
                    <div class="row">
                      <div class="col-md-12" align="center">
                         <button type="button" class="btn btn-warning btn-xs" id="btn_actualizar_bancos">Actualizar Datos de Bancos</button>
                      </div>
                    </div>
                    -->
                  </div>
                </div>
            </div>
            <div class="col-md-6">
              <div class="panel panel-success">
                <div class="panel-heading panel-toolbar"> 
                  <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 class="col-md-2">
                        <button type="button" class="btn btn-danger btn-sm"id="extornarT">Extornar</button>
                      </div>
                  </div>
                    <div class="row">
                      <div class="col-md-12"> 
                        <h4 >Nro Recibo: <b id="txtnr"></b></h4> 
                      </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>Fecha</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>Emisor</label></div>
                            <input type="text" class="form-control" id="txtPersonalE" disabled="disabled">   
                          </div>
                        </div>
                      </div>
                    </div>
                    <!--
                     <div class="row">
                        <div class="col-md-4 col-md-offset-1" align="right"> 
                          <label>Usuario Global</label> 
                        </div>
                        <div class="col-md-7">
                          <input type="text" class="form-control" id="txtPerDig" disabled="disabled">         
                        </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>Destino</label></div>
                            <input type="text" class="form-control" id="txtOficinaDest" disabled="disabled">   
                          </div>
                        </div>
                      </div>
                    </div>
                  -->
                    <!--
                    <div class="row">
                        
                        <div class="col-md-3">
                          <button type="button" class="btn btn-block btn-warning btn-xs" data-toggle="modal" data-target="#modalCambiar" id="btnModalCmbioOD">
                            Cambiar</button>
                        </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>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-8">
                        <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-8">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon" ><label>Comision banco</label></div>
                            <input type="text" class="form-control t-monto" id="txtComicionBanco" disabled="disabled">   
                          </div>
                        </div>
                      </div>
                    </div>
           
                    <div class="row">
                        <div class="col-md-12">
                          <label>Observaciones / Detalle</label> 
                        </div>
                        <div class="col-md-12">
                          <!--
                          <input type="text" class="form-control" id="txtObs" disabled="disabled">-->
                          <textarea class="form-control" rows="3" id="txtotros_con" disabled="disabled" ></textarea >         
                        </div> 
                    </div>
              
                    
                    <!--
                    <div class="row" id="areap">
                        <div class="col-md-4 col-md-offset-1" align="right"> 
                          <label>Observaciones de pago</label> 
                        </div>
                        <div class="col-md-6">
                          <textarea class="form-control" rows="3"  id="txtObspe"></textarea >         
                        </div> 
                    </div>
                    -->
                </div>
              </div>
            </div>
          </div>
            
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/JavaScript">
  var x_st_total='{{ x_st_to }}';
  var pagina=1;
  var soli_nom="";
  var soli_ap="";
  var soli_am="";
  var Aux="";
  var Aux2="";
  var Aux3="";
  var Aux5="";
  var Aux6="";
  var Aux7="";
  var filaI =0;
  var estad="";  
  var i1=0;
  var i2=0;        
  var p1=0;        
  var p2=0;
  var e1=0;
  var e2=0; 
  //extorno---
  var st_ex="no";
  //---------
  var nombreBAux="";
  var apBAux="";
  var amBAux="";
  var estadoAux="";
  $("#myModal").on("shown.bs.modal", function () { 
    if(checkedTuto==true){
      if($("#txtEstadoTrans").val()=="activo"){
           WebTour.create({
          0: [{
        element: "#btnMB",
         description: "Para Modificar el nombre del 'BENEFICIADO' haga click sobre el enlace 'Cambiar Nombre'",
        position: "t",
        next: false,
        closeSign: false
      }]
      });
     
    //WebTour.init();
      }
     
    }
  });
  

    $(document).ready(function(){
      //----
      $('#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();
      })
      
      $(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');
      });
      
      
      ajax_Transferencias();
      $("#RefrescarLista").click(function(){
        ajax_Transferencias();
      });

    
     
      //---

      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:'/listaRetirostransferencia_fetch/',
          type:'GET',
          dataType:'json',
          success: function(data){
            Aux = data;
            var html ="";
            for(var i=0;i<data.length;i++){
              var estado ="";
              
              html += '<tr  class="filaTrans '+estado+'" id="'+i+'"><td>'+data[i].fecha+'</td><td>'+data[i].cliente_dni+'</td><td>'+data[i].cliente+'</td><td>'+data[i].banco+'</td><td>'+data[i].tipo_doc+'</td><td>'+data[i].nro_re+'</td><td>'+data[i].monto+'</td><td>'+data[i].comision+'</td><td>'+data[i].obs+'</td><td></td></tr>';
            }
            $('#listaTransf').html(html);
            $('.table-responsive').waitMe('hide');
          }
        });
      };
      
      $("#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("tableST"));
          doc.setFontSize(14);
          doc.text("RETIROS DE BANCOS CREADOS", 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('reporteST.pdf');
          var uri = doc.output('datauri');
          open_data_uri_window(uri);
         //$('#imprimir_trans').printThis();
      });
      function open_data_uri_window(url) {
        var html = '<html> <title>Golden Rays</title>' +
          '<style>html, body { padding: 0; margin: 0; } iframe { width: 100%; height: 100%; border: 0;}  </style>' +
          '<body>' +
          '<iframe src="' + url + '"></iframe>' +
          '</body></html>';
        a = window.open()
        a.document.write(html)
      }
      //---
  });
</script>
{% endif %}

{% endblock content1 %}