{% extends "base.html" %}
{% block titulo %}
  .::Abrir Cuenta Plazo Fijo
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navCajaMaterial_dinero").attr('class','active');
  $("#navCrearAhorro").attr('class','active');
</script>
<style type="text/css">
  .input-group-addon {
    padding: 0px 6px;
}
</style>
<form action="/crear_cta_plazo_fijo/" 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 PLAZO FIJO</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-7">
                        <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-4">
                        <button class="btn btn-primary btn-block btn-xs" id="btn_limpiar_soli">Limpiar</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">
                  <div class="panel-heading" id="">
                      <strong>Datos de Cuenta Ahorro</strong>
                  </div>
                  <div class="panel-body">
                    <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_p">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-8">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon"><label>Interes:</label></div>
                            <input type="text" class="form-control" id="txtinteres" placeholder="0.00" name="interes" aria-describedby="sp_p" required>
                            <span class="input-group-addon" id="sp_p">%</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-2" align="right">
                          <label class="control-label ">Plazo: </label>
                        </div>
                        <div class="col-md-4">
                            <select class="form-control" id="txttipoplazo" name="tipo_plazo">
                              <option value="m">Mensual</option>
                              <option value="d">Diario</option>
                            </select>
                            <p></p>
                        </div>
                        <div class="col-md-5" style="padding-right: 0px;padding-left: 0px;">
                          <div class="form-group">
                            <div class="input-group">
                              <input type="text" class="form-control" id="txtplazo" name="plazo" aria-describedby="basic-addon2" placeholder="0" required>
                              <span class="input-group-addon" id="basic-addon2">Mes(es)</span>
                            </div>
                            <div class="form-control-feedback" style="text-align:left;" ></div>
                            <div class="help-block with-errors"></div>
                          </div>
                        </div>
                    </div>
                    <div class="row">
                      <div class="col-md-5"  align="right">
                        <label class="control-label ">Interes que gana: </label>
                      </div>
                      <div class="col-md-7">
                        <div class="form-group">
                          <input type="text" class="form-control" id="txtinteres_g" disabled>
                        </div>
                        <p></p>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-3"  align="right">
                        <label class="control-label ">Observación: </label>
                      </div>
                      <div class="col-md-9">
                        <div class="form-group">
                          <textarea type="text" class="form-control" 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-6 col-md-offset-3">
                        <button class="btn btn-warning btn-block btn-sm" type="submit">Crear Cuenta Ahorro</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  align="center" nowrap >==================</tr>
                </table>
                <h5>{{ SITE_URL }}</h5>
                <table>
                  <tr>
                    <td>{{ caja }}</td>
                    <td><div style="width:50px;"> </div></td>
                    <td >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:40px;"> </div>
                    </td>
                    <td id="concepto"></td>
                  </tr>
                  <tr>
                    <td>Importe:</td>
                    <td>
                      <div style="width:40px;"> </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><div style="height: 25px;"></div></td>
                  </tr>
                  <tr>
                    <td nowrap><h6>OP. {{ dg_operador }}</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">
  var  cliente={};
  $(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="$/. "
            }
            $("#oficinaRecibo").text(oficinaRecibo);
           
            $("#horaRecibo").text(horaRecibo);
            
            $("#fechaRecibo").text(fechaRecibo);
            
            $("#importe").text(mr+montoRecibo);
            
            $("#concepto").text(conceptoDetalleRecibo);
            
            $("#usuario").text(usuario);
            $("#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;
        }
    });
    //
    $("#txttipoplazo").change(function(){
      if($(this).val()=="d"){
        $("#basic-addon2").text("Dia(s)");
      }
      if($(this).val()=="m"){
        $("#basic-addon2").text("Mes(es)");
      }
      $("#txtinteres_g").prop('value',calcular());
    });
    //
    function calcular(){
      inte_g= 0
      if($("#txtinteres").val() != null && $("#txtinteres").val() != '' && $("#txtplazo").val() != null && $("#txtplazo").val() != ''&&$("#montoapertura").val() != null && $("#montoapertura").val() != ''){
        var inte=parseFloat($("#txtinteres").val());
        var plaz=parseFloat($("#txtplazo").val());
        var ma= parseFloat($("#montoapertura").val());
        if($("#txttipoplazo").val()=="d"){
          inte_g=ma*inte/100/365*plaz;
        }
        if($("#txttipoplazo").val()=="m"){
          inte_g=ma*inte/100/365*(plaz*26);
        }
      }
      return inte_g;
    }
    $("#txtplazo").keyup(function(){
      $("#txtinteres_g").prop('value',calcular());
    })
    $("#montoapertura").keyup(function(){
      $("#txtinteres_g").prop('value',calcular());
    })
    $("#txtinteres").keyup(function(){
      $("#txtinteres_g").prop('value',calcular());
    })
    //***************************** 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();
      })
      //******************

  });
  
</script>
{% endblock content1 %}