{% extends "base.html" %}
{% load static %}
{% block titulo %}
  .::Listado Autorizaciones por tardanza
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navIE").attr('class','dropdown active');
  $("#navADXT").attr('class','active');
</script>
<div class="row">
  <div class="col-md-12 col-sm-12" >
      <div class="panel panel-default">
        <div class="panel-heading"> <strong>AUTORIZACIONES DE DESBLOQUEO POR TARDANZAS</strong></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-primary btn-sm" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
            </div>
          </div>
          <p></p>
          <div class="row">
              <div class="col-md-12">
                  <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                          <tr>
                            <th>Fecha</th> 
                            <th>Codigo</th>
                            <th>Usuario Solicitante</th>
                            <th>Fecha Autorización</th> 
                            <th>Observaciones</th>
                            <th>Estado</th>
                            <th>Autorizado por</th>
                          </tr>
                        </thead>
                        <tbody id="listaO">
                           
                        </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 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">
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="panel panel-info">
                <div class="panel-heading" align="center"> <h4>Detalle Autorización</h4></div>
                <div class="panel-body">
                  <div class="row">
                    <div class="col-md-12">
                      <h4 class="bg-success" align="center">
                        Autorización Desbloqueo por Tardanza
                      </h4>
                    </div>
                  </div>
                  <p></p>
                  <div class="row" align="center">
                    <label id="est"></label>
                  </div>
                  <p></p>
                  <div class="row">
                      <div class="col-md-3 col-md-offset-1"> 
                        <h5>Fecha Soli.</h5> 
                      </div>
                      <div class="col-md-5">
                        <input type="text" class="form-control" id="txtfs" readonly="readonly">  
                      </div> 
                       <div class="col-md-2">
                        <input type="text" class="form-control" id="txtpk" readonly="readonly">  
                      </div> 
                  </div>
                  
                  <div class="row">
                      <div class="col-md-3 col-md-offset-1" >
                        <h5>Código</h5> 
                      </div>
                      <div class="col-md-6">
                        <h3 id="txtCod"></h3>         
                      </div> 
                  </div>
                  <p></p>
                  <div class="row">
                    <div class="col-md-3 col-md-offset-1" > 
                      <h5>Personal Solicitante</h5> 
                    </div>
                    <div class="col-md-6">
                      <label id="txtPer"></label>
                    </div> 
                  </div>
                  <p></p>
                  <div class="row">
                    <div class="col-md-3 col-md-offset-1" > 
                      <h5>Fecha de Autorización</h5> 
                    </div>
                    <div class="col-md-6">
                      <label id="txtfa"></label>
                    </div> 
                  </div>
                  <p></p>
                  <div class="row">
                    <div class="col-md-3 col-md-offset-1" > 
                      <h5>Autorizado por:</h5>
                    </div>
                    <div class="col-md-6">
                      <label><span style="color:#3c763d;" id="txt_cargo_aut"></span>  <span  id="txt_user_aut"></span></label>
                    </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="3" id="txtobs" ></textarea >
                    </div>
                  </div>
                  <p></p>
                  <div class="row">
                    <div class="col-md-4 col-md-offset-4">
                      <button type="button" data-dismiss="modal" class="btn btn-success btn-block" id="autori">Autorizar</button>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </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> 

<script type="text/javascript">
  var Aux="";
  var filaI =0;
  $(document).ready(function () {
    ajax_aut();
    $(document).on("click",".filaO",function(){
      var num = $(this).attr('id');
      filaI = num;
      var fila= $(this).attr('class');
      $("."+fila).attr('class','filaO');
      $("#"+num).attr('class','filaO info');
      if(Aux[filaI].estado=="pendiente"){
        $("#autori").show();
      }
      else{
        $("#autori").hide();
      }
      $("#txtfs").prop('value',Aux[filaI].fecha);
      $("#txtpk").prop('value',Aux[filaI].pk);
      $("#txtCod").text(Aux[filaI].cod);
      $("#txtPer").text(Aux[filaI].soli);
      $("#txtfa").text(Aux[filaI].fecha_aut); 
      $("#txtobs").prop("value",Aux[filaI].obs);
      $("#txt_user_aut").text(Aux[filaI].user_aut);
      $("#txt_cargo_aut").text(Aux[filaI].cargo_aut);
      $("#est").text(Aux[filaI].estado)
    });
    $("#btnRefrescar").click(function(){
      ajax_aut();
    });
    $("#autori").click(function(){
      ajax_autorizar();
    })
    function ajax_aut(){
      $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        url:'/autorizaciones_x_tardanza_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux = data;

          var html ="";
          var esta='';
          for(var i=0;i<data.length;i++){
               html += '<tr data-toggle="modal" data-target="#myModal" class="filaO" id="'+i+'"><td>'+data[i].fecha+'</td><td>'+data[i].cod+'</td><td>'+data[i].soli+'</td><td>'+data[i].fecha_aut+'</td><td>'+data[i].obs+'</td><td>'+data[i].estado+'</td><td>'+data[i].cargo_aut+'</td></tr>';
          }
          $('#listaO').html(html);
          $('.table-responsive').waitMe('hide');
        }
      });
    }
    //-------------
    function ajax_autorizar(){
      $.ajax({
        url:'/Autorizar_desbloqueo_tardanza_personal_ajax/',
        type:'GET',
        data:{'pk':$("#txtpk").val(),'obs':$("#txtobs").val()},
        dataType:'text',
        success: function(data){
          if(data=='exito'){
            $("#ExitoCambiar").prop('class','bg-info');
            $("#ExitoCambiar").text("Se Autorizo");
            //$("#ExitoCambiar").show();
            ajax_aut();
           }
           else{
            $("#ExitoCambiar").prop('class','bg-danger');
            $("#ExitoCambiar").text(data);
            //$("#ExitoCambiar").show();
           }
        }
      });
    }
  });
</script>
{% endblock content1 %}