{% extends "base.html" %}
{% block titulo %}
  .::Perfil
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
        $("#navUser").attr('class','dropdown active');
        $("#navPerfil").attr('class','active');
      </script>
      <form action="/perfil/" 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>PERFIL</strong></div>
                <div class="card-body">
                  <div class="row" id="Result">
                    {% ifnotequal resultado '' %}
                    {% ifequal resultado 'exito' %}
                    <h4 class="bg-success" align="center">
                       la operacion fue exitosa!
                    </h4>
                    {% else %}
                    <h4 class="bg-danger" align="center">
                      :( la operacion Fallo {{resultado}}
                    </h4>
                    {% 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;-->
                                Perfil del usuario
                              </h4>
                            </div>
                          </div>
                          <p></p>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <h5 > DNI</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                              <div class="fg-line">
                                 <input type="text" class="form-control" id="txtDNI"readonly="readonly" required>
                                 <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-2"> 
                              <h5>Nombres</h5> 
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                 <input type="text" class="form-control" id="txtNombre" name="nombre" readonly="readonly" required>  
                                 <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-2 col-md-offset-1" > 
                              <h5>Ap. Paterno</h5> 
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                 <input type="text" class="form-control" id="txtAP" name="ap" readonly="readonly" required>
                                 <div class="form-control-feedback" style="text-align:left;" ></div>
                                 <div class="help-block with-errors"></div>
                              </div> 
                                
                            </div> 
                            <div class="col-md-2" > 
                              <h5>Ap. Materno</h5> 
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                                 <input type="text" class="form-control" id="txtAM" name="am" readonly="readonly" required>
                                 <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-2 col-md-offset-1" > 
                              <h5>Teléfono</h5> 
                            </div>
                            <div class="col-md-3">
                                
                              <div class="form-group">
                                 <input type="text" class="form-control" id="txtTel" name="tel" readonly="readonly" required>
                                 <div class="form-control-feedback" style="text-align:left;" ></div>
                                 <div class="help-block with-errors"></div>
                              </div> 
                            </div> 
                          </div>
                          <p></p>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1" > 
                              <h5>Dirección</h5> 
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                 <input type="text" class="form-control" id="txtDir" name="dir" readonly="readonly" required> 
                                 <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-2 col-md-offset-1" > 
                              <h5>Cumpleaños</h5> 
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                 <input type='text' class="form-control" id='datetimepicker1' name="fn" readonly="readonly" required/>
                                 <div class="form-control-feedback" style="text-align:left;" ></div>
                                 <div class="help-block with-errors"></div>
                              </div> 
                              
                              <p></p>
                            </div>
                            <script type="text/javascript">
                              $(document).ready(function (){
                                ajax_datos();
                                $('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;
                                }
                              });
                                 $('#datetimepicker1').datetimepicker({
                                    locale: 'es',
                                    format: 'YYYY-MM-DD'
                                  });
                                $('#txtDNI').numeric();
                                $("#campoChk").click(function(){
                                  if($("#ts4").prop('checked')){
                                      habilitar();
                                    }else {
                                      deshabilitar();
                                    }
                                });
                                function habilitar(){
                                  $("#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);
                                };

                                function deshabilitar(){
                                  $("#txtNombre").prop('readonly',true);
                                  $("#txtAP").prop('readonly',true);
                                  $("#txtAM").prop('readonly',true);
                                  $("#txtDir").prop('readonly',true);
                                  $("#txtTel").prop('readonly',true);
                                  $("#datetimepicker1").prop('readonly',true);
                                  $("#txtEmail").prop('readonly',true);
                                };

                                function ajax_datos(){
                                  $.ajax({
                                    url:'/datosPersonal/',
                                    type:'GET',
                                    dataType:'json',
                                    success: function(data){
                                    $("#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);
                                    }
                                  });
                                }
                              });
                            </script>
                                                      
                          </div> 
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1" > 
                              <h5>Email</h5> 
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                 <input type="email" class="form-control" id="txtEmail" name="email" placeholder="Email" readonly="readonly" required>
                                 <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-12 col-md-offset-1">
                                <div id="campoChk"  class="checkbox">
                            <!--<input id="ts4" type="checkbox" hidden="hidden">
                            <label for="ts4" class="ts-helper"></label>
                             <label for="ts4" class="ts-label"><strong>Solo activos</strong></label>-->
                            <label>
                              <input id="ts4" type="checkbox" value="success-inverse1"> Actualizar Datos
                            </label>
                        </div> 
                             </div> 
                          </div>
                          <p></p>
                             <div class="row">
                              <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4">
                                <button class="btn btn-primary btn-block" type="submit">Guardar</button>
                              </div>
                            </div>
                          <!--<div class="row">
                            <div class="col-md-3 col-md-offset-9">
                              <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>
      </form>
{% endblock content1 %}