{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .::Gerentes
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navPersonal").attr('class','dropdown active');
        $("#navGerente").attr('class','active');
      </script>
      <div class="row">
        <div class="col-md-12col-sm-12" >
            <div class="panel panel-primary">
              <div class="panel-heading"> <b>GERENTES</b></div>
              <div class="panel-body">
                <div class="row" >
                  <p class="bg-success" align="center" id="ExitoCambiar">
                  </p>
                </div>
                <div class="row">
                  <div class="col-md-1 col-md-offset-1">
                    <a class="btn btn-block btn-primary btn-sm" href="/Admin/CrearGerente/" role="button">Nuevo</a>
                  </div>
                  <div class="col-md-2">
                    <button type="button" class="btn btn-block btn-info btn-sm" id="btnRefrescar">Actualizar</button>
                  </div>
                </div>
                <div class="row">
                  <br>
                  <p class="bg-success">
                    &nbsp;
                  </p>
                  <div class="col-md-12">
                      
                      <div>
                        <div id="myModal" 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">
                                  <p>
                                    <div class="col-md-12 col-sm-12" >
                                        <div class="panel panel-info">
                                          <div class="panel-heading" align="center"> <h5>Detalle de Gerente</h5></div>
                                          <form>
                                            <div class="panel-body">
                                              <div class="row">
                                                <div class="col-md-12">
                                                  <p class="bg-success" align="center">
                                                    <!--&nbsp;-->
                                                    Datos del Gerente
                                                  </p>
                                                </div>
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                <div class="col-md-2 col-md-offset-1" >
                                                  <h5>Id</h5>
                                                </div>
                                                <div class="col-md-3">
                                                  <input type="text" class="form-control" id="pk" disabled="disabled">
                                                  <p></p>
                                                </div>
                                                <div class="col-md-2">
                                                  <h5 > DNI</h5>
                                                </div>
                                                <div class="col-md-3">
                                                   <input type="text" class="form-control" id="txtDNI" disabled="disabled">
                                                </div>

                                              </div>
                                              <br>
                                              <div class="row">
                                                  <div class="col-md-2 col-md-offset-1"> 
                                                    <h5>Nombres</h5> 
                                                  </div>
                                                  <div class="col-md-3">
                                                    <input type="text" class="form-control" id="txtNombre">  
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                <div class="col-md-12 col-md-offset-1">
                                                  <h5>Apellidos</h5>
                                                </div>
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-2 col-md-offset-1" > 
                                                    <h5>Paterno</h5> 
                                                  </div>
                                                  <div class="col-md-3">
                                                    <input type="text" class="form-control" id="txtAP">  
                                                  </div> 
                                                  <div class="col-md-2" > 
                                                    <h5>Materno</h5> 
                                                  </div>
                                                  <div class="col-md-3">
                                                    <input type="text" class="form-control" id="txtAM">  
                                                  </div> 
                                              </div>
                                              <p></p>
                                                <div class="row">
                                                  <div class="col-md-2 col-md-offset-1" > 
                                                    <h5>Telefono</h5> 
                                                  </div>
                                                  <div class="col-md-3">
                                                    <input type="text" class="form-control" id="txtTel">  
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-2 col-md-offset-1" > 
                                                    <h5>Direccion</h5> 
                                                  </div>
                                                  <div class="col-md-6">
                                                    <input type="text" class="form-control" id="txtDir">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" > 
                                                    <h5>Cumpleaños</h5> 
                                                  </div>
                                                   <div class="col-md-4">
                                                      <input type='text' class="form-control" id='datetimepicker1'/>
                                                      <p></p>
                                                    </div>
                                                    <script type="text/javascript">

                                                      $(document).ready(function (){
                                                        $('#datetimepicker1').datetimepicker({
                                                          locale: 'es',
                                                          format: 'YYYY-MM-DD'
                                                        });
                                                      });
                                                    </script>
                                                  
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-2 col-md-offset-1" > 
                                                    <h5>Email</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                     <input type="email" class="form-control" id="txtEmail" placeholder="Email">  
                                                  </div> 
                                              </div>
                                              <p></p>
                                               <div class="row">
                                                  <div class="col-md-3 col-md-offset-1" > 
                                                    <h5>Observaciones</h5> 
                                                  </div>
                                                  <div class="col-md-6">
                                                    <textarea class="form-control" rows="2" placeholder="Observacion" id="obs"></textarea >        
                                                  </div> 
                                                 
                                              </div>
                                              <p></p>
                                              <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" id="est">
                                                        <option value="activo">Activo</option>
                                                        <option value="desactivo">Desactivo</option>
                                                    </select>       
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                <div class="col-md-4 col-md-offset-2 col-xs-4 col-xs-offset-2">
                                                  <input class="btn btn-primary btn-block" type="button"id="modificar" value="Guardar" data-dismiss="modal">
                                                </div>
                                                <div class="col-md-4 col-xs-4"> 
                                                  <input class="btn btn-primary btn-block" type="button"id="CancelarMod" value="Cancelar" data-dismiss="modal">
                                                </div>

                                              </div>
                                              <p></p>
                                            </div>
                                          </form>
                                        </div>
                                    </div>
                                  </p>
                                </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>
                      </div>
                      <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                              <tr>
                                <th>Nro</th>
                                <th>DNI</th>
                                <th>Nombres</th>
                                <th>Apellido Paterno</th>
                                <th>Apellido Materno</th>
                                <th>Telefono</th>
                                <th>Direccion</th>
                                <th>Cumpleaños</th>
                                <th>Email</th>
                                <th>Fecha de Creacion</th>
                                <th>Observaciones</th>
                                <th>Estado</th>
                                <th>Usuario</th>
                                <th>Password</th>
                              </tr>
                            </thead>
                            <tbody id="listaPer">
                                
                            </tbody>
                        </table>
                      </div>
                  </div>
                  
                </div>
                <br>
                <div class="row">
                  <div class="col-md-10 col-md-offset-1" align="center">
                    <nav>
                      <ul class="pagination">
                        <li>
                          <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                          <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>
                      </ul>
                    </nav>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      var Aux="";
      var filaI =0;
      $(document).ready(function () {
        ajax_Gerentes();
        $(document).on("click",".filaPer",function(){
          var num = $(this).attr('id');
          filaI = num;
          var fila= $(this).attr('class');
          $("."+fila).attr('class','filaPer');
          $("#"+num).attr('class','filaPer info');
          $("#pk").prop('value',Aux[filaI].pk);
          $("#txtDNI").prop('value',Aux[filaI].dni);
          $("#txtNombre").prop('value',Aux[filaI].nombre);
          $("#txtAP").prop('value',Aux[filaI].ap);
          $("#txtAM").prop('value',Aux[filaI].am);
          $("#txtTel").prop('value',Aux[filaI].tlf);
          $("#txtDir").prop('value',Aux[filaI].dir);
          $("#datetimepicker1").prop('value',Aux[filaI].fn);
          $("#txtEmail").prop('value',Aux[filaI].email);
          $("#obs").prop('value',Aux[filaI].obs);
          var esta='';
          if (Aux[filaI].estado){
            esta='activo';
          }
          else{
            esta='desactivo';
          }
          $("#est").prop('value',esta);
        });
        $("#btnRefrescar").click(function(){
          ajax_Gerentes();
        });
      
        $("#modificar").click(function(){
          EnviarModificacion();
        });
        
        function EnviarModificacion(){
          $.ajax({
            data: {'pk':$("#pk").val(),'dni':$("#txtDNI").val(),'nom':$("#txtNombre").val(),'ap':$("#txtAP").val(),'am':$("#txtAM").val(),'tel':$("#txtTel").val(),'dir':$("#txtDir").val(),'fn':$("#datetimepicker1").val(),'email':$("#txtEmail").val(),'obs':$("#obs").val(),'estado':$("#est").val()},
            url:'/Admin/modificarGerente_ajax/',                                  
            type:'GET',
            dataType:'text',
            success: function(data){
               if(data=='exito'){
                $("#ExitoCambiar").prop('class','bg-info');
                $("#ExitoCambiar").text("Modificacion Exitosa");
                ajax_Gerentes();
                //$("#ExitoCambiar").show();
               }
               else{
                $("#ExitoCambiar").prop('class','bg-danger');
                $("#ExitoCambiar").text("Fallo Modificacion :(" + data);
                //$("#ExitoCambiar").show();
               }
            }
          });
         }

        function ajax_Gerentes(){
          $.ajax({
            url:'/GerentesTotal_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              Aux = data;
              var html ="";
              var esta='';
              for(var i=0;i<data.length;i++){
                if (data[i].estado){
                  esta='activo';
                }
                else{
                  esta='desactivo';
                }
                  html += '<tr data-toggle="modal" data-target="#myModal" class="filaPer" id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].dni+'</td><td>'+data[i].nombre+'</td><td>'+data[i].ap+'</td><td>'+data[i].am +'</td><td>'+data[i].tlf+'</td><td>'+data[i].dir+'</td><td>'+data[i].fn+'</td><td>'+data[i].email+'</td><td>'+data[i].fc+'</td><td>'+data[i].obs+'</td><td>'+esta+'</td><td>'+data[i].user+'</td><td>'+data[i].pass+'</td></tr>';
              }                        
              //html+='</tbody></table>';
              $('#listaPer').html(html);
            }
          });
        }
      });
    </script>
{% endblock content1 %}