{% extends "baseAdmin.html" %}
{% block titulo %}
  .::Nueva Cuenta Ahorros
{% endblock titulo %}
{% block content1 %} 
       <script type="text/javascript">
        $("#navCuentas").attr('class','dropdown active');
        $("#navCtaAhorros").attr('class','active');
      </script>
      <form action="/Admin/CrearCtaAhorros/" method="POST" data-toggle="validator" role="form"> {% csrf_token %}
        <!--<div class="row"><br><br><br><br></div>-->
        <div class="row">
          <div class="col-md-12 col-sm-12" >

              <div class="card">
                <div class="card-head card-head-xs style-default"> <strong>NUEVA CUENTA DE AHORROS</strong></div>
                <div class="card-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="card">
                        <div class="card-head card-head-xs style-info" id="grupoP">
                            <strong>DATOS PERSONALES</strong>
                        </div>
                        <div class="card-body">
                          <div class="row">
                            
                            <div class="col-md-12">
                                <div class="form-group">
                                  <label class="radio-inline">
                                  <input type="radio" name="TipoPersona" id="rbNatural" value="Natural" checked> Persona Natural
                                </label>
                                <label class="radio-inline">
                                  <input type="radio" name="TipoPersona" id="rbJuridica" value="Juridica" required> Persona Jurídica
                                </label>
                                  <div class="form-control-feedback" ></div>
                                  <div class="help-block with-errors"></div>
                                </div>
                                <p></p>
                            </div>
                          </div>
                          
                          <div class="row">
                            <div class="col-md-2">
                              <h5 id="dniRUC"> DNI:</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtDniC" placeholder="DNI" name="DniCli" maxlength="11" data-minlength="8">
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-2 ">
                              <h5 id = "nombreRazon">Nombres:</h5>
                            </div>
                            <div class="col-md-5">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtNombreC" placeholder="Nombres" name="NombreCli" required>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>
                              <p></p>
                            </div>
                          </div>
                          <div class="row" id="campoAp">
                            <div class="col-md-2">
                              <h5>Apellido Paterno</h5>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                              <div class="fg-line">
                                 <input type="text" class="form-control" id="txtApCli" placeholder="Apellido Paterno" name="PaternoCli" required>
                                 <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>                             
                              <p></p>
                            </div>
                            <div class="col-md-2">
                              <h5>Apellido Materno</h5>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                              <div class="fg-line">
                                 <input type="text" class="form-control" id="txtAmCli" placeholder="Apellido Materno" name="MaternoCli" required>
                                 <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>                             
                              <p></p>
                            </div>
                          </div>

                          <div class="row">
                            <div class="col-md-2">
                              <h5>Fecha Nac.</h5>
                            </div>
                             <div class='col-md-4 input-group date' id='divdatetimepicker1' style="padding-left: 15px;">
                                <input type='text' class="form-control" id="datetimepicker1" name="fechaNa" required />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                            <p></p>
                            
                            
                          </div> 
                         
                                    
                          <div class="row">
                            <div class="col-md-2">
                              <h5>Teléfono:</h5>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                              <div class="fg-line">
                                 <input type="text" class="form-control" id="txtTelefonoC" placeholder="Telefono" name="TelefonoCli">
                                 <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>
                              <p></p>
                            </div>
                          </div>  
                          <div class="row">
                            <div class="col-md-2">
                              <h5>Dirección:</h5>
                            </div>
                            <div class="col-md-6 ">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtDir" placeholder="Direccion" name="DirCli">
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>                              
                              <p></p>
                            </div>                            
                          </div>  
                           
                          <div class="row">
                            <div class="col-md-2">
                              <h5>Email:</h5>
                            </div>
                            <div class="col-md-5">
                              <div class="form-group">
                              <div class="fg-line">
                                <input class="form-control" id="txtEmail" placeholder="Email" name="EmailCli">
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>                              
                              <p></p>
                            </div>                            
                          </div>  
                        </div>
                      </div>  
                    </div>


                    <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:13px;">
                                      
                                      <h5 align="center"><b>RECIBO DE INGRESO</b></h5>
                                      <table>
                                        <tr nowrap>=======================================</tr>
                                      </table>
                                      <table>
                                        <tr>
                                          <td nowrap> <h5 id="fechaRecibo"></h5></td>
                                          <td style="padding-top:10px;"><div style="width:30px;height:20px;"> </div></td>
                                          <td nowrap><h5 id="horaRecibo"></h5></td>
                                        </tr>
                                      </table>
                                      <table>
                                        <tr>
                                          <td id="oficinaRecibo" style="width:100px;"></td>
                                          <td style="padding-top:-10px;"><div style="width:40px;"> </div></td>
                                          <td style="width:60px; text-align:right;">Nº<span id="nror"></span></td>
                                        </tr>
                                      </table>
                                     
                                      <table> 
                                        <tr >
                                          <td  valign="top" style="padding-top:10px;"><b>Recibí de:</b></td>
                                          <td style="padding-top:10px;"><div style="width:20px;"> </div></td>
                                          <td id="recibi" style="padding-top:10px;"></td>
                                        </tr>
                                      </table>
                                      <br>
                                      <!--<p id="pldet"></p>-->
                                      
                                      <b>IMPORTE:</b>
                                      <table>
                                        <tr>
                                          <td>Monto:</td>
                                          <td ><div style="width:40px;"> </div></td>
                                          <td id="importe" style="text-align:right;"></td>
                                        </tr>
                                        <tr>
                                          <td>Comisión</td>
                                          <td ><div style="width:40px;"> </div></td>
                                          <td id="comision" style="text-align:right;"></td>
                                        </tr>
                                      </table> 
                                      <br>
                                      <b>IMPORTE TOTAL:</b>
                                      <h4 id="importetotal"></h4>
                                      <table>
                                        <tr>
                                          <td><b>Concepto:</b></td>
                                        </tr>
                                        <tr>
                                          <td id="concepto"></td>
                                        </tr>
                                      </table>
                                      <table>
                                        <tr>
                                          <td><div style="height:30px;"> </div></td>
                                        </tr>
                                       <tr>
                                          <td><div style="margin-right:8px;">________________</div></td>
                                          <td><div style="margin-left:8px;">_________________</div></td>
                                        </tr>
                                         <tr>
                                          <td nowrap><h5><b>OP. {{ nombre_usuario }}</b></h5></td>
                                           <td><b style="margin-left:8px;">DNI <span id="dni"></span></b></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 -->
                  



                    <div class="col-md-6">
                      <div class="card">
                         <div class="card-head card-head-xs style-info" id="grupoCA">
                            <strong>CUENTA DE AHORROS</strong>
                        </div>
                        <div class="card-body">
                          <div class="row" id= "campoOperador">
                            <div class=" col-md-12">
                            <p></p>
                              <div class="row">
                                <div class="col-md-4 col-md-offset-1">
                                  <h5>Monto de Apertura:</h5>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                  <div class="fg-line">
                                    <input type="text" class="form-control" id="montoapertura" placeholder="Monto Apertura" name="montoapertura" required>
                                    <div class="form-control-feedback" style="text-align:left;" ></div>
                                  </div>
                                  </div>                             
                                  <p></p>
                                </div>
                              </div>
                                <div class="row" id="tipomoneda">
                                  <div class="col-md-4 col-md-offset-1">
                                    <h5>Tipo de Moneda</h5>
                                  </div>
                                  <div class="col-md-6">
                                  <div class="select">
                                  <div class="fg-line">
                                      <select class="form-control" id="ComboMoneda" name="Combomoneda">
                                        <option value="soles">Soles</option>
                                        <option value="dolares">Dolares</option>
                                      </select>  
                                  </div>
                                  </div> 
                                      <p></p>    
                                  </div>
                                </div>

                                  <div class="row">
                                <div class="col-md-4 col-md-offset-1">
                                  <h5>Comisión:</h5>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                  <div class="fg-line">
                                    <input type="text" class="form-control" id="comision" name="comision">
                                    <div class="form-control-feedback" style="text-align:left;" ></div>
                                   </div>
                                  </div>                             
                                  <p></p>
                                </div>
                              </div>

                               <div class="row">
                                  <div class="col-md-4" align="right">
                                    <h5>Plazo de Ahorro</h5>
                                  </div>
                                  <div class="col-md-3 col-md-offset-1">
                                      <select class="form-control" id="ComboFrecuenciaNroDias" name="ComboFrecuenciaNroDias">
                                        <option value="d">Diario</option>
                                        <option value="s">Semanal</option>
                                        <option value="m">Mensual</option>
                                      </select>   
                                      <p></p>    
                                  </div>
                                  <div class="col-md-3">
                                      <input type="text" class="form-control" id="nroDias" name="nroDias" required>
                                    <!--<button type="button" class="btn btn-sm btn-primary" id="btnModificarTipo">Modificar</button>-->
                                  </div>
                                </div>
                              

                               <div class="row">
                                  <div class="col-md-4" align="right">
                                    <h5>Frecuencia Interes</h5>
                                  </div>
                                  <div class="col-md-3 col-md-offset-1">
                                      <select class="form-control" id="ComboFrecuenciaInteres" name="ComboFrecuenciaInteres">
                                        <option value="d">Diario</option>
                                        <option value="s">Semanal</option>
                                        <option value="m">Mensual</option>
                                      </select>   
                                      <p></p>    
                                  </div>
                                  <div class="col-md-3">
                                       <input type="text" class="form-control" id="interes" name="interes" required>
                                    
                                  </div>
                                </div> 

                              <div class="row">
                                <div class="col-md-4 col-md-offset-1">
                                  <h5>Observación:</h5>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                  <div class="fg-line">
                                    <textarea type="text" class="form-control" id="observacion"  name="observacion">
                                    </textarea>
                                  </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>
                            
                          </div>
                        </div>
                      </div>  
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-3 col-md-offset-3 col-xs-4 col-xs-offset-2">
                      <button class="btn btn-primary btn-block" type="submit">Guardar</button>
                    </div>
                    <div class="col-md-3 col-xs-4">
                      <button class="btn btn-danger btn-block" type="button" id="cancelarTrans">Cancelar</button>
                    </div>
                  </div>
                </div>
              </div>
          </div>

        </div>
      </form> 
    <script type="text/javascript">
        $(document).ready(function(){

          $('#montoapertura').numeric();
          $('#comision').numeric();
          $('#nroDias').numeric();
          $('#interes').numeric();

          $("#datetimepicker1").mask("9999-99-99",{placeholder:"yyyy-mm-dd"});

          $('#divdatetimepicker1').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 montoTotal='{{montoTotalRecibo}}'
                  var comisionRecibo='{{comisionRecibo}}'
                  var monedaRecibo='{{monedaRecibo}}'
                  var conceptoDetalleRecibo='{{conceptoDetalleRecibo}}'
                  var usuario='{{user.username}}'
                  var dniRecibo='{{dniRecibo}}'
                  var nroRecibo='{{nroRecibo}}'
                  var oficinaRecibo='{{SITE_URL}}'
                  $("#recibi").text("Sr(a): "+nombreRecibo);
                  if(monedaRecibo=="soles")
                  {
                    mr="S/. "
                  }
                  else
                  {
                    mr="US$. "
                  }
                  $("#oficinaRecibo").text("Oficina: "+oficinaRecibo);
                  $("#horaRecibo").text("Hora: "+horaRecibo);
                  $("#fechaRecibo").text("Fecha: "+fechaRecibo);
                  $("#importe").text(mr+montoRecibo);
                  $("#comision").text(mr+comisionRecibo);
                  $("#concepto").text(conceptoDetalleRecibo);
                  $("#usuario").text(usuario);
                  $("#dni").text(dniRecibo);
                  $("#nror").text(nroRecibo);
                  $("#importetotal").text(mr+(montoTotal));
                  $("#platillaI").printThis();
                     
          {% else %}
                    
          {% 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;
              }
          });
          $('#txtDniC').numeric();
          $('#txtTelefonoC').numeric();
          $("input[name=TipoPersona]").click(function(){
          if($(this).val()=="Natural"){
              $("#dniRUC").text("DNI");
              $("#nombreRazon").text("Nombres");
              $("#campoAp").show();
          }
          else{
              $("#dniRUC").text("RUC");
              $("#nombreRazon").text("Razon Social");
              $("#campoAp").hide();
          }
        });
        
          $("li#navCuentas").prop('class',"dropdown active");
          $("#navCtaAhorros").attr('class','active');
      });

      
      
  
      $("#txtDniC").focusout(function(){
              if($(this).val().length>=8){
                //run_waitMe($('#alertDiv'), 1, "pulse","Consultando DNI...");
                $.ajax({
                  data:{'dni':$(this).val()},
                  url:'/clientes_autocompletado_user_dni_ajax/',
                  //async:false,
                  type:'GET',
                  dataType:'json',
                  success: function(data){
                      if(data=="fail"){
                        console.log("fail");
                          //consulta();
                      }else{
                        $('#alertDiv').waitMe('hide');
                        $("#txtNombreC").val(data.nombre);
                        $("#txtApCli").val(data.ap);
                        $("#txtAmCli").val(data.am);
                        /*$("#txtDNIB").prop("readonly",true);
                        $("#txtNombreB").prop("readonly",true);
                        $("#txtAPB").prop("readonly",true);
                        $("#txtAMB").prop("readonly",true);*/
                      }
                    console.log(data);
                  },
                  error: function(xhr, textStatus, errorThrown) {
                          console.log(xhr.responseText);
                  },
                }); 
              }
                
           });


function consulta(){
            var tecactusApi = new TecactusApi("eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImMzZDhiZDI3MTI2NDIyNTkzODc4ZGEwOWZkZTQ1OGFlMDE4MzcxNDRkYjZlNzJlODU1ZTcwZWM5ODAyM2Q2MGQ5ZTcyODZjOTA1ODlkMzlmIn0.eyJhdWQiOiIxIiwianRpIjoiYzNkOGJkMjcxMjY0MjI1OTM4NzhkYTA5ZmRlNDU4YWUwMTgzNzE0NGRiNmU3MmU4NTVlNzBlYzk4MDIzZDYwZDllNzI4NmM5MDU4OWQzOWYiLCJpYXQiOjE0OTQyMTg0NjksIm5iZiI6MTQ5NDIxODQ2OSwiZXhwIjoxODA5NzUxMjY5LCJzdWIiOiIyNTYiLCJzY29wZXMiOlsidXNlLXJlbmllYyIsInVzZS1zdW5hdCJdfQ.iBb4lCGx-WKSYGvvNji7_Ys7umBux8KXjVFSPn7D05JB9-zNi1pXLNCASbKABs9zBKVEhddzN1RFW4UIjCtWne4r0ltrJUz_rSe5kmdt8vLzRReKvZiUFxFc9JcERTg4pp7Yi7Qx06CASPCKd4NgMqz35ucUuJOh9h5C8dup7XJttI0jX5BAbiuXMKwG7QH8zGxdx-7CEkxMhigsv-Wm7S1jOl-JLJT2iDLPOQ-VslrV0HoL-gt_k_rNPtaNPWU0tIjrG9Wr_2_-jgtV8OYJJqxvtvzi2uKyovpFRZjFJh_gxwKx-mnc6ioMmxS4MHtNKF1GhcHvLHwVSw2Lm2V7Q46v3hb5_ePGRSJ5FocJJ4RqPihULeGGFgrnPp1GLQXOoxYRVj_IjcXbFywQMR8p6xf8xkeGA8v0rCIJBaUXXD4prSHT-qfK5CI3uU1f294s5uz497975QZqVTegDl7sUcJKrEvLrOEm1dEaNIi-j90ZLaqHOYhgY3aciJU_JTwtQ7f5t_Zv-BomazKNwGxe180kmHyLrsCpz9phyZeh_PgPaEPNa0M3hWMDj8Mszo8uQ3ktvU1Zqnzwn_sgyfvqUFIeM4kfoX8_-IrkEjcD9Q7jal4UwLQV5idGxPoSxt8jFpnvwAdN6wbWe7XzRixAm-djmQqdVIn8HZUSBOTIx6k");

                  if( $('input[name=TipoPersona]:checked').val()=="Natural"){ 
                    tecactusApi.Reniec.getDni($("#txtDniC").val())
                    .then(function (response) {
                      console.log("consulta correcta!")
                        $("#txtNombreC").val(response.data.nombres);
                        $("#txtApCli").val(response.data.apellido_paterno);
                        $("#txtAmCli").val(response.data.apellido_materno);
                        
                        $('#alertDiv').waitMe('hide');
                        /*$("#txtDNIB").prop("readonly",true);
                        $("#txtNombreB").prop("readonly",true);
                        $("#txtAPB").prop("readonly",true); 
                        $("#txtAMB").prop("readonly",true); */ 
                    })
                    .catch(function (response) {
                      console.log("algo ocurrió")
                      console.log("código de error: " + response.code)
                      console.log("mensaje de respuesta: " + response.status)
                      bootbox.alert(response.data);
                      $('#alertDiv').waitMe('hide');
                      /*$("#txtDNIB").prop("readonly",false);
                      $("#txtNombreB").prop("readonly",false);
                      $("#txtAPB").prop("readonly",false); 
                      $("#txtAMB").prop("readonly",false);
                      $('#CampoBen').waitMe('hide'); */
                    })
                  }else{
                    if($("#txtDniC").val().length==8){ 
                      tecactusApi.Sunat.getByDni($("#txtDniC").val())
                      .then(function (response) {
                        console.log("consulta correcta!")
                        console.log(response.data);
                        if(response.data.indexOf("válido")==-1){
                          bootbox.alert(response.data);
                        }
                        $('#alertDiv').waitMe('hide');
                        $("#txtNombreC").val(response.data.razon_social);
                        /*$("#txtDNIB").prop("readonly",true);
                        $("#txtNombreB").prop("readonly",true);*/
                           
                      })
                      .catch(function (response) {
                        console.log("algo ocurrió")
                        console.log("código de error: " + response.code)
                        console.log("mensaje de respuesta: " + response.status)
                        
                        bootbox.alert(response.data);
                        /*$("#txtDNIB").prop("readonly",false);
                        $("#txtNombreB").prop("readonly",false);
                        $("#txtAPB").prop("readonly",false); 
                        $("#txtAMB").prop("readonly",false);*/
                        $('#alertDiv').waitMe('hide'); 
                      })
                    }else{
                      tecactusApi.Sunat.getByRuc($("#txtDniC").val())
                      .then(function (response) {
                        $('#alertDiv').waitMe('hide'); 
                         $("#txtNombreC").val(response.data.razon_social);
                        console.log("consulta correcta ruc!")
                        console.log(response.data)
                        if(response.data.indexOf("válido")==-1){
                          bootbox.alert(response.data);
                        }
                        
                        /*$("#txtDNI").prop("readonly",true);
                        $("#txtNombreB").prop("readonly",true); */
                          
                      })
                      .catch(function (response) {
                        console.log("algo ocurrió")
                        console.log("código de error: " + response.code)
                        console.log("mensaje de respuesta: " + response.status)
                        bootbox.alert(response.data);
                        /*$("#txtDNIB").prop("readonly",false);
                        $("#txtNombreB").prop("readonly",false);
                        $("#txtAPB").prop("readonly",false); 
                        $("#txtAMB").prop("readonly",false);*/
                        $('#alertDiv').waitMe('hide');  
                      })
                    }
                  }
          }

       $('select[name="Combomoneda"]').change(function(){
            if( $(this).val()=='soles'){
              $("#grupoCA").removeClass();
              $("#grupoP").removeClass();
              $("#grupoCA").attr('class',"card-head card-head-xs style-info" );
              $("#grupoP").attr('class',"card-head card-head-xs style-info" );
            }
            else{
              $("#grupoCA").removeClass();
              $("#grupoP").removeClass();
              $("#grupoCA").attr( 'class',"card-head card-head-xs style-success" );
              $("#grupoP").attr( 'class',"card-head card-head-xs style-success" );
            }
          });

    </script>
{% endblock content1 %}