{% extends "baseAdmin.html" %}
{% block titulo %}
  .::Nuevo - Cliente (Administrador)
{% endblock titulo %}
{% block content1 %} 

      <script type="text/javascript">
        $("#navAdministracion").attr('class','dropdown active');
        $("#navCrearClien").attr('class','active');
      </script>
      <form action="/Admin/CrearCliente/" method="POST" data-toggle="validator" role="form"> {% csrf_token %}
        
        <div class="row">
          <div class="col-md-10 col-md-offset-1 col-sm-12" >
              <div class="panel panel-primary">
                <div class="panel-heading"> <strong>NUEVO CLIENTE</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-10 col-md-offset-1">
                      <div class="panel panel-default">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <h4 class="bg-success" align="center">
                                <!--&nbsp;-->
                                Datos del Cliente
                              </h4>
                            </div>
                            <br></br>
                            <p></p>
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <label>Tipo de Persona:</label>
                            </div>
                            <div class="col-md-7">
                             
                              <div class="radio col-md-12">
                                  <label>
                                      <input type="radio" name="TipoPersona" id="rbNatural" name="sample" value="Natural" checked>
                                      <i class="input-helper"></i>
                                      Persona Natural
                                  </label>
                              
                                  <label>
                                  
                                      <input type="radio" name="TipoPersona" id="rbJuridica" value="Juridica" required>
                                      <i class="input-helper"></i>
                                      Persona Jurídica
                                  </label>
                                  <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                            </div>                            
                          </div>  
                           
                            <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <label id = "dniRuc">DNI:</label>
                            </div>
                            <div class="col-md-5">
                              <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 col-md-offset-1">
                              <label id = "nombreRazon">Nombres:</label>
                            </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 col-md-offset-1">
                              <label>Apellido P.</label>
                            </div>
                            <div class="col-md-3">
                              <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">
                              <label>Apellido M.</label>
                            </div>
                            <div class="col-md-3">
                              <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 col-md-offset-1">
                              <label>Teléfono:</label>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                              <div class="fg-line">
                                 <input type="text" class="form-control" id="txtTelefonoC" placeholder="Telefono" name="TelefonoCli" data-minlength="6">
                                 <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>
                              <p></p>
                            </div>
                          </div>  
                          <script type="text/javascript">
                            $(document).ready(function(){
                              $('#txtDniC').numeric();
                              $('#txtTelefonoC').numeric();

                                  //$('#decimal').numeric(","); 
                            });
                          </script>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <label>Dirección:</label>
                            </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="DircCli">
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>                              
                              <p></p>
                            </div>                            
                          </div>  
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <label>Fecha de Nac.</label>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type='text' class="form-control" id='datetimepicker1' name="fechaNaCli" required>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>                              
                              <p></p>
                            </div>
                            <script type="text/javascript">

                              $(document).ready(function (){
                                $('#datetimepicker1').datetimepicker({
                                      locale: 'es',
                                      format: 'YYYY-MM-DD'
                                  });
                                $('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;
                                }
                              });
                                $("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();
                                    }
                                });

                              });
                            </script>
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <label>Email:</label>
                            </div>
                            <div class="col-md-5">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="email" 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 class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <label>DREM</label>
                            </div>
                            <div class="col-md-8">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtDrem" placeholder="DREM" name="DremCli" data-minlength="2">
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>                              
                              <p></p>
                            </div>
                            <div class="row">
                              <div class="col-md-3 col-md-offset-3 col-xs-4 col-xs-offset-2">
                                <button class="btn btn-block btn-primary btn-sm" type="submit"><i class="md md-check"></i> Guardar</button>
                              </div>
                              <div class="col-md-3 col-xs-4">
                                <button class="btn btn-block btn-danger btn-sm" type="button" id="cancelarTrans"><i class="md md-close"></i> Cancelar</button>
                              </div>
                            </div>                            
                          </div>
                        </div>
                      </div>  
                    </div>
                  </div>
                 
                </div>
              </div>
          </div>
        </div>
      </form> 
{% endblock content1 %}