{% extends "base.html" %}
{% load static %}
{% block titulo %}
  .::Listado Habilitacion a Caja alterna
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
        $("#navC").attr('class','dropdown active');
        $("#navlistaHabilitarC").attr('class','active');
      </script>
      <form action="">
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="card">
                <div class="card-header bgm-bluegray text-center"> <h2>LISTADO DE HABILITACIONES A CAJA ALTERNA</h2></div>
                <div class="card-body">
                   <div class="row" >
                    <h4 class="bg-success" align="center" id="ExitoMensaje">
                    </h4>
                  </div>
                  <div class="row">
                      <div class="col-md-2 col-md-offset-1 col-xs-4">
                        <button type="button" class="btn btn-info btn-block" id="btnRefrescar">Actualizar</button>
                      </div>
                  </div>
                  <div class="row">
                    <br>
                    <p class="bg-success">
                      &nbsp;
                      <div class="col-md-10 col-md-offset-1">
                          <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 Habilitacion</h5></div>
                                            <div class="panel-body">
                                              <div class="row">
                                                <div class="col-md-12">
                                                  <p class="bg-success" align="center">
                                                    &nbsp;
                                                  </p>
                                                </div>
                                              </div>
                                              <p></p>
                              
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" > 
                                                    <h5>Fecha</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtFecha" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" > 
                                                    <h5>comcepto</h5> 
                                                  </div>
                                                  <div class="col-md-7">
                                                    <input type="text" class="form-control" id="txtcon" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1"> 
                                                    <h5>Monto</h5> 
                                                  </div>
                                                  <div class="col-md-6">
                                                    <input type="text" class="form-control" id="txtmonto" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1"> 
                                                    <h5>moneda</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtmoneda" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" > 
                                                    <h5>Observaciones</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtObs" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                <div class="col-md-4 col-md-offset-4">
                                                  <button type="button" class="btn btn-default btn-block"id="reimprimir">Reimprimir?</button>
                                                </div>
                                              </div>
                                            </div>
                                          </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><!-- /.modal -->
                          <div id="myModal1" 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-body">
                                              <div id ="plantilla">
                                                 <h5 align="center"><u><b>RECIBO DE EGRESO</b></u></h5>
                                                <table>
                                                  <tr nowrap>=====================================</tr>
                                                </table>
                                                (reimpresion)
                                                <table>
                                                      <tr>
                                                        <th>Fecha&nbsp;</th>
                                                        <td id="f" colspan=3 nowrap></td>
                                                      </tr>
                                                </table>
                                                <br>
                                                <b>MONTO:</b>
                                                <p id="mon"></p>
                                                <b>CONCEPTO:</b>
                                                <p>Hablilitacion de Dinero a Caja Alterna: <span id="ca"></span></p>
                                                <br>
                                                <br>
                                                  <h5>____________________</h5>
                                                  <b>Op: {{ nombre_usuario }}</b>
                                                 
                                              </div>
                      
                                            </div>
                                          </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 class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                  <tr>
                                    <th>Nro</th>
                                    <th>Caja Aterna</th>
                                    <th>Fecha</th>
                                    <th>Monto</th>
                                    <th>Moneda</th>
                                    <th>Observaciones</th>
                                    <th>Estado</th>
                                  </tr>
                                </thead>
                                <tbody id="listaC">
                                </tbody>
                            </table>
                          </div>
                      </div>
                    </p>
                  </div>
                  <br>
                  <br>
                </div>
              </div>
          </div>
        </div>
      </form> 
<script type="text/JavaScript">
    var Aux="";
    var filaI =0;
    $(document).ready(function(){
      $(document).on("click",".filaC",function(){
        var num = $(this).attr('id');
        filaI = num;
        //--------------
        $('#txtFecha').prop("value",Aux[filaI].fecha);
        $('#txtcon').prop("value",Aux[filaI].concepto);
        $('#txtmonto').prop("value",Aux[filaI].monto);
        $('#txtmoneda').prop("value",Aux[filaI].moneda);
        $('#txtObs').prop("value",Aux[filaI].obs);
        $("#f").text(Aux[filaI].fecha);
        $("#ca").text(Aux[filaI].CA);
        //$("#mon").text(Aux[filaI].monto);
        //$("#mone").text(Aux[filaI].moneda);
        $("#ob").text(Aux[filaI].obs);
        var mr='';
        if(Aux[filaI].moneda=="soles")
          {
            mr="S/. "
          }
        else
          {
            mr="$/. "
          }
        $("#mon").text(mr+Aux[filaI].monto);
      });
      ajax_SaldoEnviado();
      $("#btnRefrescar").click(function(){
        ajax_SaldoEnviado();
      });
      //
      $("#reimprimir").click(function(){
        $('#plantilla').printThis();
      })
      //
      function ajax_SaldoEnviado(){
        $.ajax({
          url:'/listaHabilitacion_aCajaAlt_ajax/',
          type:'GET',
          dataType:'json',
          success: function(data){
            Aux= data;
            var html ="";
            for(var i=0;i<data.length;i++){
                var estado ="";
                if(data[i].est=="recibido"){
                  estado = "success";
                }
                if(data[i].est=="anulado"){
                  estado = "danger";
                }
                html += '<tr class="filaC '+estado+'" data-toggle="modal" data-target="#myModal"' +' id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].CA+'</td><td>'+data[i].fecha+'</td><td>'+data[i].monto +'</td><td>'+data[i].moneda+'</td><td>'+data[i].obs+'</td><td>'+data[i].est+'</td></tr>';
            }                        
            $('#listaC').html(html);
          }
        });
      }
      //otra funcion
      //otra funcion
      
     
     //-------------------
    });
</script>
{% endblock content1 %}