{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .::Nuevo - GERENTE
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navPersonal").attr('class','dropdown active');
        $("#navSubGer").attr('class','active');
      </script>
       
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="panel panel-danger">
                <div class="panel-body">
                  <div class="row" id="Result">
                    {% ifnotequal resultado '' %}
                    {% ifequal resultado 'exito' %}
                    <p class="bg-success" align="center">
                      Registro Exitoso!!
                    </p>
                    {% else %}
                    <p class="bg-danger" align="center">
                      Fallo registro {{resultado}}
                    </p>
                    {% endifequal %}
                    {% endifnotequal %}
                  </div>
                  <div class="row" id="areaCrearSub">
                    <div class="col-md-2">
                      <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Crear Subgerente</button>
                    </div>
                  </div>
                  <p></p>
                  <div class="row">
                    <div class="col-md-4">
                      <div class="row" align="center">
                        <img src="{% static 'img/usuario.png' %}"width="100%">
                      </div>
                    </div>
                    <div class="col-md-8">
                      <div class="row">
                        <div class="col-md-12">
                          <div class="panel panel-default">
                            <div class="panel-body">
                              <div class="row">
                                <div class="col-md-12">
                                  <p class="bg-success" align="center">
                                    <!--&nbsp;-->
                                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Crear Subgerente</button>
                                    Perfil del usuario
                                  </p>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-md-3" align="right">
                                  <h5> DNI</h5>
                                </div>
                                <div class="col-md-3">
                                     <input type="text" class="form-control" id="txtDNI"readonly="readonly" >
                                  
                                </div>
                              </div>
                              <p></p>
                              <div class="row">
                                <div class="col-md-3" align="right"> 
                                  <h5>Nombres</h5> 
                                </div>
                                <div class="col-md-4">
                                     <input type="text" class="form-control" id="txtNombre"  readonly="readonly" >  

                                  
                                </div> 
                              </div>
                              <p></p>
                              <div class="row">
                                <div class="col-md-3" align="right"> 
                                  <h5>A. Paterno</h5> 
                                </div>
                                <div class="col-md-4">

                                     <input type="text" class="form-control" id="txtAP" readonly="readonly" >

                                </div> 
                                
                              </div>
                              <p></p>
                              <div class="row">
                                <div class="col-md-3" align="right"> 
                                  <h5>A. Materno</h5> 
                                </div>
                                <div class="col-md-4">

                                     <input type="text" class="form-control" id="txtAM" readonly="readonly" >

                                </div> 
                              </div>
                              <p></p>
                              <div class="row">
                                <div class="col-md-3" align="right"> 
                                  <h5>Telefono</h5> 
                                </div>
                                <div class="col-md-3">
                                     <input type="text" class="form-control" id="txtTel" readonly="readonly" >

                                </div> 
                              </div>
                              <p></p>
                              <div class="row">
                                <div class="col-md-3" align="right"> 
                                  <h5>Direccion</h5> 
                                </div>
                                <div class="col-md-8">
                                     <input type="text" class="form-control" id="txtDir"  readonly="readonly"> 

                                           
                                </div> 
                              </div>
                              <p></p>
                              <div class="row">
                                <div class="col-md-3" align="right"> 
                                  <h5>Cumpleaños</h5> 
                                </div>
                                <div class="col-md-4">
                                     <input type='text' class="form-control" id='datetimepicker1' readonly="readonly">
 
                                  <p></p>
                                </div>

                                                          
                              </div>
                              <p></p>
                              <div class="row">
                                <div class="col-md-3" align="right"> 
                                  <h5>Email</h5> 
                                </div>
                                <div class="col-md-5">
                                     <input type="email" class="form-control" id="txtEmail" placeholder="Email" readonly="readonly" >

                                </div> 
                              </div>
                              <p></p>
                              <div class="row">
                                <div class="col-md-3" align="right"> 
                                  <h5>Usuario</h5> 
                                </div>
                                <div class="col-md-5">

                                     <input type="email" class="form-control" id="txtusu" placeholder="usuario" readonly="readonly" >

                                </div> 
                              </div>
                              <p></p>
                              <div class="row">
                                <div class="col-md-3" align="right"> 
                                  <h5>Password</h5> 
                                </div>
                                <div class="col-md-5">
                                     <input type="email" class="form-control" id="txtpassw" placeholder="contraseña" readonly="readonly">
                                </div> 
                              </div>
                              <div class="row">
                                <div class="col-md-4 col-md-offset-8">
                                  <div class="checkbox" id="campoChk">
                                    <label>
                                      <input type="checkbox" id="actualizar"> Actualizar datos
                                    </label>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>  
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      
    </div>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <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">
            <form action="/Admin/Manteni_SubGerente/" method="POST" data-toggle="validator" role="form"> {% csrf_token %}
              <div class="row">
                <div class="col-md-12">
                  <div class="panel panel-success">
                    <div class="panel-heading" align="center"> <h5>NUEVO SUBGERENTE</h5></div>
                    <div class="panel-body">
                      <div class="row">
                        <div class="col-md-12">
                          <div class="panel panel-default">
                            <div class="panel-body">
                              <div class="row">
                                <div class="col-md-12">
                                  <p class="bg-success" align="center">
                                    <!--&nbsp;-->
                                    Datos Personales
                                  </p>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-md-2 col-md-offset-1">
                                  <h5>Nombre(s)</h5>
                                </div>
                                <div class="col-md-3">
                                  <div class="form-group">
                                    <input type="text" class="form-control" id="txtNomPersonalC" placeholder="Nombre del personal" name="Nombre" 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 col-md-offset-1">
                                  <h5>Apellido P.</h5>
                                </div>
                                <div class="col-md-3">
                                  <div class="form-group">
                                     <input type="text" class="form-control" id="txtApPersonal" placeholder="Apellido Paterno" name="APaterno" 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 M.</h5>
                                </div>
                                <div class="col-md-3">
                                  <div class="form-group">
                                    <input type="text" class="form-control" id="txtAmPersonal" placeholder="Apellido Materno" name="AMaterno" 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 col-md-offset-1">
                                  <h5>Email</h5>
                                </div>
                                <div class="col-md-5">
                                  <div class="form-group">
                                    <input type="email" class="form-control" id="txtEmail" placeholder="Email" name="Email">
                                    <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>
                      <div class="row">
                        <div class="col-md-12">
                          <div class="panel panel-default">
                            <div class="panel-body">
                              <div class="row">
                                <div class="col-md-12">
                                  <p class="bg-success" align="center">
                                    <!--&nbsp;-->
                                    Datos de Usuario
                                  </p>
                                </div>
                              </div>
                              <div class="row">
                                <div class="col-md-2 col-md-offset-1">
                                  <h5>Observaciones</h5>
                                </div>
                                <div class="col-md-8">
                                  <div class="form-group">
                                    <textarea class="form-control" rows="3" placeholder="Observaciones" name="obs"></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="row">
                                <div class="col-md-2 col-md-offset-1">
                                  <h5>Usuario:</h5>
                                </div>
                                <div class="col-md-4">
                                  <div class="form-group">
                                    <input type="text" class="form-control" id="txtUserPer" placeholder="usuario" name="User" 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 col-md-offset-1">
                                  <h5>Password:</h5>
                                </div>
                                <div class="col-md-4">
                                  <div class="form-group">
                                    <input type="text" class="form-control" id="txtPass" placeholder="Contraseña" name="Password" required>
                                    <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>
                      <div class="row">
                        <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-2">
                          <input class="btn btn-primary btn-block" type="submit" value="Guardar">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div>
    <script type="text/javascript">
      $(document).ready(function (){
        $("#areaCrearSub").hide();
        ajax_datos();
         $('#datetimepicker1').datetimepicker({
            locale: 'es',
            format: 'YYYY-MM-DD'
          });
        $('#txtDNI').numeric();
        $("#campoChk").click(function(){
          if($("#actualizar").prop('checked')){
              habilitar();
            }
        });
        function habilitar(){
          $("#txtDNI").prop('readonly',false);
          $("#txtNombre").prop('readonly',false);
          $("#txtAP").prop('readonly',false);
          $("#txtAM").prop('readonly',false);
          $("#txtDir").prop('readonly',false);
          $("#txtTel").prop('readonly',false);
          $("#datetimepicker1").prop('readonly',false);
          $("#txtEmail").prop('readonly',false);
          $("#txtpassw").prop("readonly",false);
        };
        function ajax_datos(){
          $.ajax({
            url:'/datosSubGerente/',
            type:'GET',
            dataType:'json',
            success: function(data){
              if(data.length > 0){
                $("#txtDNI").prop('value',data[0].dni);
                $("#txtNombre").prop('value',data[0].nom);
                $("#txtAP").prop('value',data[0].ap);
                $("#txtAM").prop('value',data[0].am);
                $("#txtDir").prop('value',data[0].dire);
                $("#txtTel").prop('value',data[0].tel);
                $("#datetimepicker1").prop('value',data[0].fn);
                $("#txtEmail").prop('value',data[0].email);
                $("#txtusu").prop('value',data[0].usu);
                $("#txtpassw").prop('value',data[0].pw);
              }
              else{
                $("#areaCrearSub").show();
              }
            
            }
          });
        }
        $('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;
        }
      });
        $("#txtUserPer").keyup(function(){
          var valor= $(this).val().toUpperCase();
          $(this).prop('value',valor);
        });
        $('#txtDNI').numeric();
        $('#txtTel').numeric();
        $('#datetimepicker1').datetimepicker({
              locale: 'es',
              format: 'YYYY-MM-DD'
          });
      });
    </script>
{% endblock content1 %}