{% extends "base.html" %}
{% block titulo %}
  Abrir Cuenta Corriente
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navCajaMaterial_dinero").attr('class','active');
  $("#navCrearCte").attr('class','active');
</script>
<style type="text/css">
  .input-group-addon {
    padding: 0px 6px;
}
</style>
<form action="/crear_cta_ahorro_cte/" method="POST" data-toggle="validator" role="form"> {% csrf_token %}
  <div class="row">
    <div class="col-md-8 col-md-offset-2" >
        <div class="panel panel-default">
          <div class="panel-heading panel-material"> <strong>ABRIR CUENTA DE AHORRO CORRIENTE</strong></div>
          <div class="panel-body">
            <div class="row" id="Result">
              {% ifnotequal resultado '' %}
              {% ifequal resultado 'exito' %}
              <div class="alert alert-success" role="alert" align="center">
                <h4>OPERACION EXITOSA!!</h4>
              </div>
              {% else %}
              <div class="alert alert-danger" role="alert" align="center">
                <h4>FALLO OPERACION :( {{resultado}}</h4>
              </div>
              {% endifequal %}
              {% endifnotequal %}
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="panel panel-default" id="panel_solicitante">
                  <div class="panel-heading" id="grupoS"> 
                    <b>Datos del Cliente <span id="cabecera_soli"></span></b> 
                  </div>
                  <div class="panel-body" id="CampoSol">
                    <input type="text" class="hidden" name="IdCliente" id="IdCliente">
                    <div class="row">
                      <div class="col-md-12">
                        <label style="margin-bottom: 0px;">
                            <input type="radio" name="TipoPersona" id="rbNatural" value="Natural" required checked>
                            Persona Natural 
                        </label>
                        <label style="margin-bottom: 0px;">
                            <input type="radio" name="TipoPersona" id="rbJuridica" value="Juridica" required>
                            Persona Jurídica
                        </label>
                      </div>                            
                    </div> 
                    <p></p>
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon"><label id="dniRUC">DNI: </label></div>
                            <input type="text" class="form-control" id="txtDNI" name="DniRucCln" data-minlength="8" data-maxlength="11" data-provide="typeahead" autocomplete="off">
                          </div>
                          <div class="form-control-feedback" style="text-align:left;" ></div>
                          <div class="help-block with-errors"></div>
                        </div>              
                         <p></p>
                      </div>
                      <div class="col-md-3">
                        <button class="btn btn-primary btn-block btn-xs" id="btn_limpiar_soli">Limpiar</button>
                      </div>
                      <div class="col-md-3">
                        <button class="btn btn-warning btn-block btn-xs" id="btn_consultar">Consultar</button>
                      </div>
                    </div>
                    <div class="row">
                       <div class="col-md-12">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon"><label id="nombreRazon">Nombres: </label></div>
                            <input type="text" class="form-control mayuscula" id="txtNombre" name="NombreCln" data-provide="typeahead" autocomplete="off" required>
                          </div>
                          <div class="form-control-feedback" style="text-align:left;" ></div>
                          <div class="help-block with-errors"></div>
                         </div>                             
                        <p></p>
                      </div>
                    </div>

                    <div class="row" id="campoAp">
                      <div class="col-md-12">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon"><label>A. Paterno:</label></div>
                            <input type="text" class="form-control mayuscula" id="txtAP" name="PaternoCln" data-provide="typeahead" autocomplete="off" required>
                          </div>
                          <div class="form-control-feedback" style="text-align:left;" ></div>
                          <div class="help-block with-errors"></div>
                        </div>
                        <p></p>
                      </div>
                    </div>

                    <div class="row" id="campoAm">
                        <div class="col-md-12">
                          <div class="form-group">
                            <div class="input-group">
                              <div class="input-group-addon"><label>A. Materno:</label></div>
                              <input type="text" class="form-control mayuscula" id="txtAM" name="MaternoCln" data-provide="typeahead" autocomplete="off">
                            </div>
                            <div class="form-control-feedback" style="text-align:left;" ></div>
                            <div class="help-block with-errors"></div>
                          </div>                             
                          <p></p>
                        </div>
                    </div>

                  </div>
                </div>  
              </div>
              <div class="col-md-6">
                <div class="panel panel-default" id="panel-cuenta">
                   <div class="panel-heading" id="">
                      <strong>Datos de Cuenta</strong>
                  </div>
                  <div class="panel-body">
                    <div class="row">
                      <div class="col-md-10">
                        <div class="col-sm-3">
                          <label class="control-label ">Moneda</label>
                        </div>
                        <div class="col-sm-6" style="padding-right: 0px;padding-left: 0px;">
                           <select class="form-control" name="moneda" id="Cmoneda">
                              <option value="soles">Soles</option>
                              <option value="dolares">Dolares</option>
                            </select>
                        </div>
                      </div>
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-10">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon"><label>Monto de Apertura:  </label></div>
                            <input type="text" class="form-control" id="montoapertura" placeholder="Monto Apertura" name="montoapertura" required>
                            <span class="input-group-addon" id="sp_m">S/</span>
                          </div>
                          <div class="form-control-feedback" style="text-align:left;" ></div>
                          <div class="help-block with-errors"></div>
                        </div>
                        <p></p>
                      </div>
                    </div>  
                    <div class="row">
                      <div class="col-md-3">
                        <label class="control-label ">Observación: </label>
                      </div>
                      <div class="col-md-9">
                        <div class="form-group">
                          <textarea type="text" class="form-control" rows="2" id="observacion"  name="observacion"></textarea>
                          <div class="form-control-feedback" style="text-align:left;" ></div>
                          <div class="help-block with-errors"></div>
                        </div>
                        <p></p>
                      </div>
                    </div>
                    <div class="col-md-1 col-xs-1 hidden">
                      <select class="form-control" name="transac">
                        <option value="{{transac}}"></option>
                      </select>
                    </div>
                    <div class="row">
                      <div class="col-md-4 col-md-offset-4">
                        <button class="btn btn-warning btn-block btn-sm" type="submit">Crear Cuenta</button>
                      </div>
                    </div>
                  </div>
                </div>  
              </div>

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

  </div>
</form> 
<div id="modalrecibo" 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:'Lucida Console', Monaco, monospace;font-size:11px;">
          <table>
            <tr>
              <td>DEPOSITO</td>
            </tr>
            <tr  align="center" nowrap >
              <td>=====================</td>
            </tr>
          </table>
          <h5>{{ SITE_URL }}</h5>
          <table>
            <tr>
              <td>{{ caja }}</td>
              <td><div style="width:50px;"> </div></td>
              <td >R/I N°<span id="nroRe"></span></td>
            </tr>
          </table>
          <table>
            <tr>
              <td>FECHA: </td>
              <td><div style="width:10px;"> </div></td>
              <td id="fechaRecibo" nowrap></td>
              <td>&nbsp;</td>
              <td id="horaRecibo" nowrap></td>
            </tr>
          </table>
          <table>
            <tr>
              <td><b>Cliente: </b></td>
              <td id="recibi"></td>
            </tr>
            <tr>
              <td><b>DNI: </b></td>
              <td id="dni"></td>
            </tr>
          </table>
          <table>
            <tr>
              <td>Concepto:</td>
              <td>
                <div style="width:10px;"> </div>
              </td>
              <td id="concepto"></td>
            </tr>
            <tr>
              <td>Importe:</td>
              <td>
                <div style="width:10px;"> </div>
              </td>
              <td id="importe"></td>
            </tr>

          </table>
          <br>
          <br> 
          <table>
            <tr>
              <td>______________</td>
            </tr>
            <tr>
              <td><h5 id ="recibi1"></h5></td>
            </tr>
            <tr>
              <td>______________</td>
            </tr>
            <tr>
              <td nowrap><h6>OP. {{ nombre_usuario }}</h6> </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 -->
<script type="text/javascript" src="https://consorcioimperial.com/socket-io/socket.io/socket.io.js"></script>
<script type="text/javascript">
  var  cliente={};
  var socket = io.connect('https://consorcioimperial.com',{path:'/socket-io/socket.io'});
  $(document).ready(function(){
    $('#montoapertura').numeric();
    $('#txtplazo').numeric();
    $('#txtinteres').numeric();
    $('#txtfecha').datetimepicker({
        locale: 'es',
        format: 'YYYY-MM-DD'
    });
    {% ifnotequal resultado '' %}
      {% ifequal resultado 'exito' %}
            var mr;
            var fechaRecibo= '{{fechaRecibo}}'
            var horaRecibo='{{horaRecibo}}'
            var nombreRecibo='{{nombreRecibo}}'
            var montoRecibo='{{montoRecibo}}'
            var monedaRecibo='{{monedaRecibo}}'
            var conceptoDetalleRecibo='{{conceptoDetalleRecibo}}'
            var usuario='{{user.username}}'
            //var dniRecibo='{{dniRecibo}}'
            var oficinaRecibo='{{oficinaRecibo}}'
            $("#nroRe").text('{{nroRecibo}}');
            $("#dni").text('{{dniRecibo}}');
            $("#recibi").text(nombreRecibo);
            if(monedaRecibo=="soles")
            {
              mr="S/. "
            }
            else
            {
              mr="$/. "
            }
            $("#horaRecibo").text(horaRecibo);
            $("#fechaRecibo").text(fechaRecibo);
            $("#importe").text(mr+montoRecibo);
            $("#concepto").text(conceptoDetalleRecibo);
            $("#recibi1").text("Sr(a): "+nombreRecibo.substring(0,15));
            $("#platillaI").printThis();
    {% endifequal %}
    {% endifnotequal %}

    $('input').on('keypress', function(e){
      if(e.keyCode == 13)
        {
          var inputs = $(this).parents("form").eq(0).find(":input.form-control");
          var idx = inputs.index($(this));
          if (idx == inputs.length - 1) {
              inputs[0].select()
          }
          else {
              inputs[idx + 1].focus(); //  handles submit buttons
              //inputs[idx + 1].select();
          }
          return false;
        }
    });
    $("#Cmoneda").change(function(){
      if($(this).val()=='dolares'){
        $("#sp_m").text('$');
        $("#panel-cuenta").prop('class','panel panel-success');
      }
      if($(this).val()=='soles'){
        $("#sp_m").text('S/');
        $("#panel-cuenta").prop('class','panel panel-default');
      }
    });
    //************************ autocompletado de clientes ****************
    //***************************** solicitante **************************
      function datos_solicitante(){
        return $("#txtDNI").val()+' '+$("#txtNombre").val()+' '+$("#txtAP").val()+' '+$("#txtAM").val()
      }
      function limpiar_solicitante(){
        $("#IdCliente").prop('value',null);
        $("#txtDNI").prop('value',null);
        $("#txtNombre").prop('value',null);
        $("#txtAP").prop('value',null);
        $("#txtAM").prop('value',null);
      }
      /*
      $("#txtDNI").change(function() {
        var current = $("#txtDNI").typeahead("getActive");
        if (current) {
          // Some item from your model is active!
          if (current.name == datos_solicitante() || current.name == $("#txtDNI").val()) {
            data_soli= current;
            $("#IdCliente").prop('value',data_soli.id);
            $("#txtDNI").prop('value',data_soli.dni);
            $("#txtNombre").prop('value',data_soli.nombre);
            $("#txtAP").prop('value',data_soli.ap);
            $("#txtAM").prop('value',data_soli.am);
            $("#panel_solicitante").prop("class","panel panel-success")
            $("#cabecera_soli").text("")
          } 
          else {
            $("#IdCliente").prop('value',null);
            $("#panel_solicitante").prop("class","panel panel-warning")
            $("#cabecera_soli").text("(Nuevo Cliente)")
          }
        } else {
           //swal("Alerta", "Se creara un nuevo cliente,complete los campos DNI/RUC y Direccion", "warning");
           $("#IdCliente").prop('value',null);
           $("#panel_solicitante").prop("class","panel panel-warning")
           $("#cabecera_soli").text("(Nuevo Cliente)")
        }
        //console.log(cliente);
        
      }); 

      var autoSolicitante_dni= $('#txtDNI').typeahead({
        source:  function (query, process) {
          return $.get('/listaCliente_autocompletado_dni_ajax/', { query: query }, function (data) {
                return process(data);
            },'json');
        }
      });
      */
      //*** nombre
      $("#txtNombre").change(function() {
        var current = $("#txtNombre").typeahead("getActive");
        if (current) {
          // Some item from your model is active!
          if (current.name == datos_solicitante() || current.name == $("#txtNombre").val()) {
            data_soli= current;
            $("#IdCliente").prop('value',data_soli.id);
            $("#txtDNI").prop('value',data_soli.dni);
            $("#txtNombre").prop('value',data_soli.nombre);
            $("#txtAP").prop('value',data_soli.ap);
            $("#txtAM").prop('value',data_soli.am);
            $("#panel_solicitante").prop("class","panel panel-success")
            $("#cabecera_soli").text("")
          } 
          else {
            $("#IdCliente").prop('value',null);
            $("#panel_solicitante").prop("class","panel panel-warning")
            $("#cabecera_soli").text("(Nuevo Cliente)")
          }
        } else {
           $("#IdCliente").prop('value',null);
           $("#panel_solicitante").prop("class","panel panel-warning")
           $("#cabecera_soli").text("(Nuevo Cliente)")
        }
        //console.log(cliente);
        
      }); 

      var autoSolicitante_nombre= $('#txtNombre').typeahead({
        source:  function (query, process) {
          return $.get('/listaCliente_autocompletado_nombre_ajax/', { query: query,'ap':$("#txtAP").val(),'am':$("#txtAM").val()}, function (data) {
                return process(data);
            },'json');
        }
      });
      // paterno
      $("#txtAP").change(function() {
        var current = $("#txtAP").typeahead("getActive");
        if (current) {
          // Some item from your model is active!
          if (current.name == datos_solicitante() || current.name == $("#txtAP").val()) {
            data_soli= current;
            $("#IdCliente").prop('value',data_soli.id);
            $("#txtDNI").prop('value',data_soli.dni);
            $("#txtNombre").prop('value',data_soli.nombre);
            $("#txtAP").prop('value',data_soli.ap);
            $("#txtAM").prop('value',data_soli.am);
             $("#panel_solicitante").prop("class","panel panel-success")
            $("#cabecera_soli").text("")
          } 
          else {
            $("#IdCliente").prop('value',null);
            $("#panel_solicitante").prop("class","panel panel-warning")
            $("#cabecera_soli").text("(Nuevo Cliente)")
          }
        } else {
           //swal("Alerta", "Se creara un nuevo cliente,complete los campos DNI/RUC y Direccion", "warning");
           $("#IdCliente").prop('value',null);
           $("#panel_solicitante").prop("class","panel panel-warning")
           $("#cabecera_soli").text("(Nuevo Cliente)")
        }
        //console.log(cliente);
        
      }); 

      var autoSolicitante_ap= $('#txtAP').typeahead({
        source:  function (query, process) {
          return $.get('/listaCliente_autocompletado_paterno_ajax/', { query: query,'no':$("#txtNombre").val(),'am':$("#txtAM").val()}, function (data) {
                return process(data);
            },'json');
        }
      });
      // materno
      $("#txtAM").change(function() {
        var current = $("#txtAM").typeahead("getActive");
        if (current) {
          // Some item from your model is active!
          if (current.name == datos_solicitante() || current.name == $("#txtAM").val()) {
            data_soli= current;
            $("#IdCliente").prop('value',data_soli.id);
            $("#txtDNI").prop('value',data_soli.dni);
            $("#txtNombre").prop('value',data_soli.nombre);
            $("#txtAP").prop('value',data_soli.ap);
            $("#txtAM").prop('value',data_soli.am);
            //swal("Solicitante", datos_solicitante(), "success");
            //$("#formulario").validator('validate');
            $("#panel_solicitante").prop("class","panel panel-success")
            $("#cabecera_soli").text("")
            //console.log($("#IdBeneficiado").val())
          } 
          else {
            $("#IdCliente").prop('value',null);
            $("#panel_solicitante").prop("class","panel panel-warning")
            $("#cabecera_soli").text("(Nuevo Cliente)")
          }
        } else {
           //swal("Alerta", "Se creara un nuevo cliente,complete los campos DNI/RUC y Direccion", "warning");
           $("#IdCliente").prop('value',null);
           $("#panel_solicitante").prop("class","panel panel-warning")
           $("#cabecera_soli").text("(Nuevo Cliente)")
        }
        //console.log(cliente);
        
      }); 

      var autoSolicitante_ami= $('#txtAM').typeahead({
        source:  function (query, process) {
          return $.get('/listaCliente_autocompletado_materno_ajax/', { query: query,'ap':$("#txtAP").val(),'no':$("#txtNombre").val()}, function (data) {
                return process(data);
            },'json');
        }
      });
      $("#btn_limpiar_soli").click(function(e){
        e.preventDefault();
        limpiar_solicitante();
      })
      //******************
      //******************
      $("#btn_consultar").click(function(e){
        //--

        //---
        e.preventDefault();
        let data ={}
        data.dni = $("#txtDNI").val();
        //data.tipo="so"
        console.log(data);
        socket.emit('validar_nd',data);
        $('#panel_solicitante').waitMe({effect : 'win8_linear',text : '[Consorcio Imperial] Consultando Datos',color:'#3f3479',fontSize:'18px'});

      })
      
      socket.on('validado',function(data){
        //console.log(data);
        if(data.status==1){
          let str = data.razon;
          let res = str.trim().split(",");
          let res1 = res[0].trim().split(" ");
          let st_ma= ""
          for(let i=1;i<res1.length;i++){
            st_ma+=res1[i]+" ";
          }

          $("#txtNombre").val(res[1]);
          $("#txtAP").val(res1[0]);
          $("#txtAM").val(st_ma.trim());
          
          
        }
        else{
          bootbox.alert({ 
            message: data.mensaje,
            className: 'bb-alternate-modal'
          }); 
        }

        $('#panel_solicitante').waitMe('hide');
      });
  });
  
</script>
{% endblock content1 %}