{% extends "baseAdmin.html" %}
{% block titulo %}
  .::Nuevo - PERSONAL
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navPersonal").attr('class','dropdown active');
        $("#navCrearPersonal").attr('class','active');
      </script>
      <form action="/Admin/Mant_CrearPersonal/" 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-header bgm-bluegray text-center" align="center"> <h2>NUEVO OPERADOR</h2></div>
                <div class="card-body">
                  <div class="row" id="Result">
                  <div class="col-md-12">
                    {% 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>
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                      <div class="panel bs-item z-depth-2 panel-default">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <h4 class="bg-success" align="center">
                                <!--&nbsp;-->
                                Datos Personales
                              </h4>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-1 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="txtDNIPersonal" placeholder="DNI del personal" name="DNIPersonal" data-minlength="8" maxlength="8" required> 
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>
                              
                              <p></p>
                            </div>
                            <div class="col-md-2 col-md-offset-1">
                              <h5>Nombre(s)</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtNomPersonalC" placeholder="Nombre del personal" name="NomPersonal" 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">
                              <h5>Apellido P.</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                              <div class="fg-line">
                                 <input type="text" class="form-control" id="txtApPersonal" placeholder="Apellido Paterno" name="PaternoPersonal" required>
                                 <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>
                             
                              <p></p>
                            </div>
                            <div class="col-md-2">
                              <h5>Apellido M.</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtAmPersonal" placeholder="Apellido Materno" name="MaternoPersonal" 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">
                              <h5>Teléfono:</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtTelefonoPersonal" placeholder="Telefono" name="TelefonoPersonal">
                                <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">
                              <h5>Dirección:</h5>
                            </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="DirPersonal" required>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>
                              
                              <p></p>
                            </div>           
                          </div>  
                          <div class="row">
                            <div class="col-md-3 col-md-offset-1">
                              <h5>Fecha de nacimiento</h5>
                            </div>
                            <div class="col-md-4">
                              <input type='text' class="form-control" id='datetimepicker1' name="fechaNaPersonal" />
                              <div class="form-control-feedback" style="text-align:left;" ></div>
                              <p></p>
                            </div>
                            <script type="text/javascript">

                              $(document).ready(function (){
                                $('#datetimepicker1').datetimepicker({
                                      locale: 'es',
                                      format: 'YYYY-MM-DD'
                                  });
                              });
                            </script>
                          </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">
                              <div class="fg-line">
                                <input type="email" class="form-control" id="txtEmail" placeholder="Email" name="EmailPersonal">
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>                              
                              <p></p>
                            </div>                            
                          </div>  
                        </div>
                      </div>  
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                      <div class="panel bs-item z-depth-2 panel-default">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <h4 class="bg-success" align="center">
                                <!--&nbsp;-->
                                Datos de Contratación
                              </h4>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <h5>Cargo:</h5>
                            </div>
                            <div class="col-md-3">
                              <select class="form-control" id="txtCargoPer" name="CargoPersonal">
                                <option value="operador">operador</option>
                              </select>
                              <p></p>
                            </div>
                            <div class="col-md-2">
                              <h5>Sueldo</h5>
                            </div>
                            <div class="col-md-3">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtSueldooPer" placeholder="0.00" name="SueldoPersonal" required>
                                <div class="form-control-feedback" style="text-align:left;" ></div>
                              </div>
                              </div>
                              <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-3 col-md-offset-1">
                              <h5>Fecha de contratación</h5>
                            </div>
                            <div class="col-md-4">
                              <input type='text' class="form-control" id='datetimepicker2' name="fechaContratPers" />
                              <div class="form-control-feedback" style="text-align:left;" ></div>
                              <p></p>
                            </div>
                             <script type="text/javascript">
                              $(document).ready(function (){
                                $('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);
                                });
                                $('#datetimepicker2').datetimepicker({
                                      locale: 'es',
                                      format: 'YYYY-MM-DD'
                                  });

                                //tados numericos
                                $('#txtDNIPersonal').numeric();
                                $('#txtTelefonoPersonal').numeric();
                                $('#txtSueldooPer').numeric('.');
                              });
                            </script>
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-1">
                              <h5>Estado</h5>
                            </div>
                            <div class="col-md-3">
                              <select class="form-control"name="EstadoPersonal">
                                <option value="activo">Activo</option>
                                <option value="desactivo">Desactivo</option>
                              </select>       
                              <p></p>
                            </div> 
                            <p></p>
                          </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">
                              <div class="fg-line">
                                <textarea class="form-control" rows="3" placeholder="Observaciones" name="obs"></textarea >
                                <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">
                              <h5>Usuario:</h5>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                              <div class="fg-line">
                                <input type="text" class="form-control" id="txtUserPer" placeholder="usuario" name="User" 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">
                              <h5>Password:</h5>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                              <div class="fg-line">
                                <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>
                              </div>
                               
                               <p></p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-5 col-xs-4 col-xs-offset-2">
                               <button class="btn btn-block btn-primary waves-effect" type="submit"><i class="md md-check"></i> Guardar</button>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>
                  
                </div>
              </div>
          </div>
        </div>
      </form>
    </div>
{% endblock content1 %}