{% extends "base.html" %}
{% load static %}
{% block titulo %}
  .::LISTADO DE DINERO RECIBIDO DE CAJA ALTERNA
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navIE").attr('class','dropdown active');
        $("#navListaSaldoReAlternaAlter").attr('class','active');
      </script>
      <form action="">
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="box box-bordered style-primary">
                <div class="box-head text-center"> <strong>LISTADO DE DINERO RECIBIDO DE CAJAS ALTERNAS</strong></div>
                <div class="box-body style-white">
                   <div class="row" >
                    <p class="bg-success" align="center" id="ExitoMensaje">
                    </p>
                  </div>
                  <div class="row">
                      <div class="col-md-2 col-md-offset-1 col-xs-4">
                        <button type="button" class="btn btn-default 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 Saldo Recibido</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-6">
                                                    <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-1" > 
                                                    <h5>Observaciones de Recepcion</h5> 
                                                  </div>
                                                  <div class="col-md-6">
                                                    <input type="text" class="form-control" id="txtObsRe">         
                                                  </div>
                                              </div>
                                              <br>
                                              <div class="row">
                                                <div class="col-md-4 col-md-offset-4">
                                                  <button type="button" class="btn btn-success 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" style="font-family:'Lucida Console', Monaco, monospace;font-size:13px;">
                                                  <h5 align="center"><b> RECEPCION DE HABILITACION</b></h5>
                                                  <h6 align="center">reimpresion</h6>
                                                  <table>
                                        <tr nowrap>=====================================</tr>
                                      </table>
                                                <br>
                                                <div>
                                                  <table>
                                                      <tr>
                                                        <th>Fecha&nbsp;</th>
                                                        <td id="f" colspan=3 nowrap></td>
                                                      </tr>
                                                      <tr>
                                                        <th>Concepto</th>
                                                        <td id="con" colspan=3 ></td>
                                                      </tr>
                                                      <tr>
                                                        <th >Monto&nbsp;</th>
                                                        <td colspan=3 nowrap> <b><h3 id="mon">&nbsp;</h3></b></td>
                                                      </tr>
                                                      <!--<tr>
                                                        <th colspan=2>Observaciones de envio: </th>
                                                        <td id="ob" colspan=2></td>
                                                      </tr>-->
                                                      <tr>
                                                        <th >Observaciones: </th>
                                                        <td id="obsr"></td>
                                                      </tr>
                                                </table>
                                                </div>
                                                <br>
                                                <div>
                                                  <h5>____________________</h5>
                                                  <b>Recibi conforme: {{ nombre_usuario }}</b>
                                                </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>
                              <!--<input type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#myModal" value="Clientes">-->
                         
                          <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>
                                  </tr>
                                </thead>
                                <tbody id="listaC">
                                    
                                </tbody>
                            </table>
                          </div>
                      </div>
                    </p>
                  </div>
                  <div class="row">
                    <div class="col-md-10 col-md-offset-1" align="center">
                      <nav>
                        <ul class="pagination">
                          <li>
                            <a href="#" id="ant" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
                          <li class="active pag" id="pag1"><a id="pg1" href="#">1</a></li>
                          <li class="pag" ><a id="pg2" href="#" >2</a></li>
                          <li class="pag" ><a id="pg3" href="#">3</a></li>
                          <li class="pag" ><a id="pg4" href="#">4</a></li>
                          <li class="pag" ><a id="pg5" href="#">5</a></li>
                          <li >
                            <a href="#" id="pos" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                  <br>
                  <br>
                </div>
              </div>
          </div>
        </div>
      </form>
    </div>
                  
                           <script type="text/JavaScript">
                              var Aux="";
                              var filaI =0;
                              var pagina=1;
                              $(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);
                                  var concep="Recepcion de dinero de: "+Aux[filaI].CA;
                                  $("#con").text(concep);
                                  //$("#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_SaldoRecibido();
                                $("#btnRefrescar").click(function(){
                                  ajax_SaldoRecibido();
                                });
                                $("#reimprimir").click(function(){
                                  $('#plantilla').printThis();
                                });
                                //
                                function ajax_SaldoRecibido(){
                                  $.ajax({
                                    data:{'pg':pagina},
                                    url:'/listaSaldoReci_conf_de_CajaAlterAlte_ajax/',
                                    type:'GET',
                                    dataType:'json',
                                    success: function(data){
                                      Aux= data;
                                      var html ="";
                                      for(var i=0;i<data.length;i++){
                                          html += '<tr class="filaC" 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></tr>';
                                      }                          
                                      $('#listaC').html(html);
                                    }
                                  });
                                }
                                //otra funcion
                               //-------------------
                               $(document).on('show.bs.modal', '.modal', function () {
                                      var zIndex = 1040 + (10 * $('.modal:visible').length);
                                      $(this).css('z-index', zIndex);
                                      setTimeout(function() {
                                          $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
                                      }, 0);
                                  });
                                $(document).on('hidden.bs.modal', '.modal', function () {
                                    $('.modal:visible').length && $(document.body).addClass('modal-open');
                                });
                               //--------------------
                               function PonerInicioPag(){
                                    $(".pag").attr('class','pag');
                                    $("#pag1").attr('class','active pag');
                                    $("#pg1").text(1);
                                    $("#pg2").text(2);
                                    $("#pg3").text(3);
                                    $("#pg4").text(4);
                                    $("#pg5").text(5);
                                };
                                
                               
                               //-------------------
                               $(".pag").click(function(){
                                  $(".pag").attr('class','pag');
                                  $(this).attr('class','active pag');
                                  pagina = $(this).text();
                                  ajax_SaldoRecibido();
                                })
                                $("#ant").click(function(){
                                  var pag = $("#pg1").text();
                                  pag= parseInt(pag);
                                  if(pag>1){
                                    $("#pg1").text(pag-1);
                                    pag= $("#pg2").text();
                                    pag= parseInt(pag);
                                    $("#pg2").text(pag-1);
                                     pag= $("#pg3").text();
                                    pag= parseInt(pag);
                                    $("#pg3").text(pag-1);
                                     pag= $("#pg4").text();
                                    pag= parseInt(pag);
                                    $("#pg4").text(pag-1);
                                     pag= $("#pg5").text();
                                    pag= parseInt(pag);
                                    $("#pg5").text(pag-1);
                                  }
                                });
                                $("#pos").click(function(){
                                  var pag = $("#pg1").text();
                                  pag= parseInt(pag);
                                  $("#pg1").text(pag+1);
                                  pag = $("#pg2").text();
                                  pag= parseInt(pag);
                                  $("#pg2").text(pag+1);
                                  pag = $("#pg3").text();
                                  pag= parseInt(pag);
                                  $("#pg3").text(pag+1);
                                  pag = $("#pg4").text();
                                  pag= parseInt(pag);
                                  $("#pg4").text(pag+1);
                                  pag = $("#pg5").text();
                                  pag= parseInt(pag);
                                  $("#pg5").text(pag+1);
                                });
                              });
                          </script>
{% endblock content1 %}