{% extends "baseAdmin.html" %}
{% block titulo %}
  .::Nueva Cta Cte
{% endblock titulo %}
{% block content1 %} 
       <script type="text/javascript"> 
        $("#navCuenta").attr('class','dropdown active');
        $("#navCtaCte").attr('class','active');
      </script>
       
      <form action="/Admin/CrearCtaCte/" method="POST" data-toggle="validator" role="form"> {% csrf_token %}
       
        <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 CORRIENTE</strong></div>
                <div class="card-body">
                  <div class="row" id="Result">
                    {% ifnotequal resultado '' %}
                      {% ifnotequal resultado None %}
                        {% ifequal resultado 'exito' %}
                        <div class="alert alert-success" role="alert" align="center">
                          <h4>OPERACIÓN EXITOSA!!</h4>
                        </div>
                        {% else %}
                        <div class="alert alert-danger" role="alert" align="center">
                          <h4>FALLO OPERACIÓN :( {{resultado}}</h4>
                        </div>
                        {% endifequal %}
                      {% endifnotequal %}
                    {% 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-3">
                              <h5> Tipo Persona</h5>
                            </div>
                            <div class="col-md-9">
                                <div class="form-group">
                                  <label class="radio-inline">
                                  <input type="radio" name="TipoPersona" id="rbNatural" value="Natural"required checked> Persona Natural
                                </label>
                                <label class="radio-inline">
                                  <input type="radio" name="TipoPersona" id="rbJuridica" value="Juridica" required> Persona Juridica
                                </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">
                                <input type="text" class="form-control" id="txtDniC" placeholder="DNI" name="DniCli" maxlength="11" data-minlength="8" required>
                                <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-2 ">
                              <h5 id = "nombreRazon">Nombres:</h5>
                            </div>
                            <div class="col-md-5">
                              <div class="form-group">
                                <input type="text" class="form-control" id="txtNombreC" placeholder="Nombres" name="NombreCli" required>
                                <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-2">
                              <h5>Apellido Paterno</h5>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                 <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 class="help-block with-errors"></div>
                              </div>                             
                              <p></p>
                            </div>
                            <div class="col-md-2">
                              <h5>Apellido Materno</h5>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                 <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 class="help-block with-errors"></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" required />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                                 
                            </div>

                            <!--<div class="col-md-4">
                              <input type='text' class="form-control" id='datetimepicker1' name="fechaNa" required/>
                              <div class="form-control-feedback" style="text-align:left;" ></div>
                              <p></p>
                            </div>-->
                            
                          </div>
                                    
                          <div class="row">
                            <div class="col-md-2">
                              <h5>Teléfono:</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                 <input type="text" class="form-control" id="txtTelefonoC" placeholder="Telefono" name="TelefonoCli">
                                 <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-2">
                              <h5>Dirección:</h5>
                            </div>
                            <div class="col-md-6 ">
                              <div class="form-group">
                                <input type="text" class="form-control" id="txtDir" placeholder="Direccion" name="DirCli">
                                <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-2">
                              <h5>Email:</h5>
                            </div>
                            <div class="col-md-5">
                              <div class="form-group">
                                <input class="form-control" id="txtEmail" placeholder="Email" name="EmailCli">
                                <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 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. GERENTE</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 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:'Lucida Console', Monaco, monospace;font-size:13px;">
                                       <h4><u>RECIBO DE INGRESO</u></h4>
                                      <h5 id="oficinaRecibo"></h5>
                                      <table>
                                        <tr>
                                          <td id="fechaRecibo" nowrap></td>
                                          <td>&nbsp;</td>
                                          <td id="horaRecibo" nowrap></td>
                                        </tr>
                                      </table>
                                      <br>
                                      <b>RECIBI DE:</b>
                                      <p id="recibi"></p>
                                      <b>IMPORTE:</b>
                                      <p id="importe"></p>
                                      <b>CONCEPTO:</b>
                                      <p id="concepto"></p>
                                      <br>
                                      <table>
                                        <tr>
                                          <td>___________</td>
                                          <td>&nbsp;</td>
                                          <td>___________</td>
                                        </tr>
                                        <tr>
                                          <td nowrap><h6>OP. <span id="usuario"></span></h6> </td>
                                          <td> &nbsp;</td>
                                          <td><h5>Cliente</h5></td>
                                        </tr>
                                        <tr>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td id ="dni"></td>
                                        </tr>
                                      </table>
                                    </div>
                                  </div>
                                  <div class="modal-footer">
                                    <hr>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
                                  </div>

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

                    <div class="col-md-6">
                      <div class="card">
                      <div class="card-head card-head-xs style-info" id="grupoCC"> <strong>CUENTA CORRIENTE</strong></div>
                        <div class="card-body">
                         
                          <div class="row" id= "campocuentacorriente">
                            <div class=" col-md-12">
                              <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">
                                    <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 class="help-block with-errors"></div>
                                  </div>                             
                                  <p></p>
                                </div>
                              </div>
                                <div class="row" id="op">
                                  <div class="col-md-4 col-md-offset-1">
                                    <h5>Tipo de Moneda</h5>
                                  </div>
                                  <div class="col-md-6">
                                  <div class="select"> 
                                      <select class="form-control" id="ComboMoneda" name="Combomoneda">
                                        <option value="soles">Soles</option>
                                        <option value="dolares">Dolares</option>
                                      </select>   
                                      <p></p>
                                  </div>    
                                  </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" placeholder="Comisión" 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 col-md-offset-1">
                                  <h5>Observación:</h5>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                    <textarea type="text" class="form-control" id="observacion"  name="observacion">
                                    </textarea>
                                     
                                  </div>                             
                                  <p></p>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-md-4 col-md-offset-1 ">
                                  <h5>Nro de Cta Cte:</h5>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                    <input type="text" class="form-control" id="nro"  name="nro" disabled>
                                  </div>                             
                                  <p></p>
                                </div>
                              </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 m-b-10">
                      <button id="guardar" 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" value="Cancelar" id="cancelarTrans">Cancelar</button>
                    </div>
                  </div>
                </div>
              </div>
          </div>

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

          $("#montoapertura").numeric();
          $("#comision").numeric();
          $("#txtNroDiasDeposito").numeric();
          $("#txtInteresDeposito").numeric();


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

          $('#divdatetimepicker1').datetimepicker({
                locale: 'es',
                format: 'YYYY-MM-DD'
            });
          /*$('#datetimepicker1').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 nroRecibo='{{nroRecibo}}'
                  var monedaRecibo='{{monedaRecibo}}'
                  var conceptoDetalleRecibo='{{conceptoDetalleRecibo}}'
                  var usuario='{{user.username}}'
                  var dniRecibo='{{dniRecibo}}'
                  var oficinaRecibo='{{oficinaRecibo}}'
                  $("#recibi").text("Sr(a): "+nombreRecibo);
                  if(monedaRecibo=="soles")
                  {
                    mr="S/. "
                  }
                  else
                  {
                    mr="$/. "
                  }
                  $("#oficinaRecibo").text("GERENCIA");
                  $("#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();
          $('#montoapertura').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#navCOS").prop('class',"deactive");
          $("#navOficina").attr('class','deactive');
          $("li#navCuentas").prop('class',"dropdown active");
          $("#navCtaCte").attr('class','active');
      });


      /*$("#txtDniC").focusout(function(){
          if($(this).val().length>=8){
              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"){
                run_waitMe($('#alertDiv'), 1, "pulse","Consultando DNI...");
                tecactusApi.Reniec.getDni($(this).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');  
                })
                .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'); 
                })
              }else{
                if($(this).val().length==8){
                  run_waitMe($('#alertDiv'), 1, "pulse","Consultando SUNAT...");
                  tecactusApi.Sunat.getByDni($(this).val())
                  .then(function (response) {
                    console.log("consulta correcta!")
                    console.log(response.data);
                    if(response.data.indexOf("válido")==-1){
                        bootbox.alert(response.data);
                    }
                    $("#txtNombreC").val(response.data.razon_social);
                    $("#txtDir").val(response.data.direccion);
                      
                      $('#alertDiv').waitMe('hide');  
                  })
                  .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'); 
                  })
                }else{
                   run_waitMe($('#alertDiv'), 1, "pulse","Consultando SUNAT...");
                  tecactusApi.Sunat.getByRuc($(this).val())
                  .then(function (response) {
                    console.log("consulta correcta!")
                    console.log(response.data)
                    if(response.data.indexOf("válido")==-1){
                        bootbox.alert(response.data);
                      }
                    $("#txtNombreC").val(response.data.razon_social);
                    $("#txtDir").val(response.data.direccion);
                    $('#alertDiv').waitMe('hide');  
                  })
                  .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');  
                  })
                }
              }
            } 
                
           });

      */

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

      

    </script>
{% endblock content1 %}