{% extends "base.html" %}
{% load static %}
{% block titulo %}
  .::Listado Autorizaciones Anulacion de Dolar
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navIE").attr('class','dropdown active');
  $("#navaut_anulardolar").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 ANULACION DE DOLAR</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>Operacion</th>
                            <th>ID</th>
                            <th>Codigo</th>
                            <th>Usuario Solicitante</th>
                            <th>Caja Solicitante</th>
                            <th>Fecha Autorización</th>
                            <th>Fecha Anulacion</th>
                            <th>Observaciones</th>
                            <th>Estado</th>
                            <th>Autorizado por</th>
                          </tr>
                        </thead>
                        <tbody id="listaO">
                           
                        </tbody>
                    </table>
                  </div>
              </div>
          </div>
          <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 Anulacion de Dolar
                          </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>
                      <p></p>
                      <div class="row">
                          <div class="col-md-3 col-md-offset-1" >
                            <h5>Operacion</h5> 
                          </div>
                          <div class="col-md-3">
                            <label id="txt_op_do"></label> 
                          </div> 
                          <div class="col-md-1" >
                            <h5>ID</h5> 
                          </div>
                          <div class="col-md-2">
                            <label id="txt_pk_do"></label> 
                          </div> 
                      </div>
                      <p></p>
                      <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>Fecha de Anulacion</h5>
                        </div>
                        <div class="col-md-6">
                          <label id="txtfn"></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">
                          <label id="txtobs"></label>
                        </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">
            <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);
          $("#txt_pk_do").text(Aux[filaI].pkDo);
          if(Aux[filaI].operacion=="CompraDolar"){
            $("#txt_op_do").text("Compra de Dolar");
          }
          if(Aux[filaI].operacion=="VentaDolar"){
            $("#txt_op_do").text("Venta de Dolar");
          }
          $("#txtfa").text(Aux[filaI].fecha_aut);
          $("#txtfn").text(Aux[filaI].fecha_anu);
          $("#txtobs").text(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_anu_dolar_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              Aux = data;
              var html ="";
              var esta='';
              var ope='';
              for(var i=0;i<data.length;i++){
                if (data[i].operacion =="VentaDolar"){
                  ope="Venta de Dolar";
                }
                if (data[i].operacion =="CompraDolar"){
                  ope="Compra de Dolar";
                }
                esta='';
                if(data[i].desblo=="si"){
                  esta='success'
                }
                   html += '<tr data-toggle="modal" data-target="#myModal" class="filaO '+esta+'" id="'+i+'"><td>'+data[i].fecha+'</td><td>'+ope+'</td><td>'+data[i].pkDo+'</td><td>'+data[i].cod+'</td><td>'+data[i].soli+'</td><td>'+data[i].Csoli+'</td><td>'+data[i].fecha_aut+'</td><td>'+data[i].fecha_anu+'</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_anu_dolar_personal_ajax/',
            type:'GET',
            data:{'pk':$("#txtpk").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 %}