{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  SubGerentes
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navAdministracion").attr('class','dropdown active');
        $("#navSubGerente").attr('class','active');
      </script>
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="panel panel-primary">
                <div class="panel-heading"><b> SUBGERENTES</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-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;
                      <div class="col-md-12">
                          <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>
                    </p>
                  </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);
      $("#txtUsersg").prop('value',Aux[filaI].user);
      $("#txtPasssg").prop('value',Aux[filaI].pass);
      
      /*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();
           }
        }
      });
     }
     //****************************************************
      $("#asingar ").click(function(){
        AsignarCajaSub();
      });
      function AsignarCajaSub(){
      $.ajax({
        data: {'pkSG':$("#pk").val()},
        url:'/Admin/AsignarCajaSubgerente_ajax/',                                  
        type:'GET',
        dataType:'text',
        success: function(data){
           if(data=='exito'){
            $("#ExitoCambiar").prop('class','bg-info');
            $("#ExitoCambiar").text("Se asigno una caja al subgerente");
            ajax_Gerentes();
            //$("#ExitoCambiar").show();
           }
           else{
            $("#ExitoCambiar").prop('class','bg-danger');
            $("#ExitoCambiar").text("Fallo Asignacion " + data);
            //$("#ExitoCambiar").show();
           }
        }
      });
     }
     //***************************************************
    function ajax_Gerentes(){
      $.ajax({
        url:'/SubGerentesTotal_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>
<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">
            <div class="row">
              <div class="col-md-12">
                <p class="bg-success" align="center">
                  <!--&nbsp;-->
                  <b>SUBGERENTE</b>
                </p>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="col-md-6" >
                  <div class="panel panel-success">
                      <div class="panel-body">
                        <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">
                          </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-3" align="right"> 
                              <h5>Nombres</h5> 
                            </div>
                            <div class="col-md-6">
                              <input type="text" class="form-control" id="txtNombre">  
                            </div> 
                        </div>
                        <p></p>
                        <div class="row">
                            <div class="col-md-3" align="right"> 
                              <h5>A. Paterno</h5> 
                            </div>
                            <div class="col-md-6">
                              <input type="text" class="form-control" id="txtAP">  
                            </div> 
                        </div>
                        <p></p>
                        <div class="row">
                            <div class="col-md-3" align="right"> 
                              <h5>A. Materno</h5> 
                            </div>
                            <div class="col-md-6">
                              <input type="text" class="form-control" id="txtAM">  
                            </div> 
                        </div>
                        <p></p>
                          <div class="row">
                            <div class="col-md-3" align="right"> 
                              <h5>Telefono</h5> 
                            </div>
                            <div class="col-md-5">
                              <input type="text" class="form-control" id="txtTel">  
                            </div> 
                        </div>
                        <p></p>
                        <div class="row">
                            <div class="col-md-3"align="right" > 
                              <h5>Direccion</h5> 
                            </div>
                            <div class="col-md-6">
                              <input type="text" class="form-control" id="txtDir">         
                            </div> 
                        </div>
                      </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="panel panel-success">
                    <div class="panel-body">
                      <div class="row">
                        <div class="col-md-3" align="right"> 
                          <h5>Cumple</h5> 
                        </div>
                         <div class="col-md-6">
                            <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-3" align="right"> 
                              <h5>Email</h5> 
                            </div>
                            <div class="col-md-6">
                               <input type="email" class="form-control" id="txtEmail" placeholder="Email">  
                            </div> 
                        </div>
                        <p></p>
                        <div class="row">
                            <div class="col-md-3" align="right"> 
                              <h5>Obs</h5> 
                            </div>
                            <div class="col-md-8">
                              <textarea class="form-control" rows="2" placeholder="Observacion" id="obs"></textarea >        
                            </div> 
                           
                        </div>
                        <p></p>
                        <div class="row">
                          <div class="col-md-3" align="right">
                            <h5>Usuario:</h5>
                          </div>
                          <div class="col-md-6">
                              <input type="text" class="form-control" id="txtUsersg" placeholder="usuario" name="usr"readonly>
                          </div>
                        </div>
                        <p></p>
                        <div class="row">
                          <div class="col-md-3" align="right">
                            <h5>Contraseña:</h5>
                          </div>
                          <div class="col-md-6">
                              <input type="text" class="form-control" id="txtPasssg" placeholder="Contraseña" name="pass" readonly>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
              
            </div>
            <p></p>
            <div class="row">
              <div class="col-md-4 col-xs-4">
                <input class="btn btn-warning btn-block" type="button"id="modificar" value="Guardar" data-dismiss="modal">
              </div>
              <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4">
                <input class="btn btn-primary btn-block" type="button"id="asingar" value="Asignar Caja" data-dismiss="modal">
              </div>
            </div>
          </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>
</div>
{% endblock content1 %}