{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .::Historial de cierres
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
        $("#navCajaPrincipal").attr('class','dropdown active');
        $("#navlistaCierres").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>LISTADO DE CIERRES</strong></div>
                <div class="panel-body">
                  <div class="row" >
                    <h4 class="bg-success" align="center" id="Exito">
                    </h4>
                  </div>
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                      <button type="button" class="btn btn-block btn-primary btn-sm" id="btnRefrescar"><span class="fa fa-refresh"></span> Actualizar</button>
                    </div>
                    <div class="col-md-1">
                      <label>Oficina:</label>
                    </div>
                    <div class="col-md-2">
                      <div class="fg-line">
                      <div class="select"> 
                      <select class="form-control" id="ComboOficina" name="oficina">
                      </select>
                      </div>
                      </div>
                    </div> 
                    <div class="col-md-2">
                      <button type="button" class="btn btn-block btn-success btn-sm" id="btnfiltrar">Filtrar</button> 
                    </div>
                    <div class="col-md-2 col-md-offset-1">
                      <label for="txtfecha1">FECHA</label>
                      <input type="text" class="form-control" id="txtfecha1">
                      <button type="button" class="btn btn-block btn-danger btn-xs" id="btnBuscarF">Buscar</button> 
                      <p></p>
                    </div>
                  </div>
                  <div class="row">

                      <div class="col-md-12">
                          <script type="text/javascript">
                            var dialog="";
                            var Aux="";
                            var filaI =0;
                            var pagina=1;
                            $(document).ready(function () {
                              $('#txtfecha1').datetimepicker({
                                locale: 'es',
                                format: 'YYYY-MM-DD'
                              });
                              ajax_oficina();
                              ajax_Cierres();
                              $(document).on("click",".filaC",function(){
                                var num = $(this).attr('id');
                                filaI = num;
                                
                                $("#txtid").prop('value',Aux[filaI].pk);
                                $("#txtidm").prop('value',Aux[filaI].pkm);
                                $("#txtfecha").prop('value',Aux[filaI].f);
                                $("#txtoficina").prop('value',Aux[filaI].ofi);
                                $("#txtcaja").prop('value',Aux[filaI].caja);
                                $("#txtoperador").prop('value',Aux[filaI].o);
                                $("#txtiso").prop('value',Aux[filaI].iso);
                                $("#txtido").prop('value',Aux[filaI].ido);
                                $("#txteso").prop('value',Aux[filaI].es);
                                $("#txtedo").prop('value',Aux[filaI].ed);
                                //$("#txtem").prop('value',Aux[filaI].em);
                                //$("#txtim").prop('value',Aux[filaI].im);
                                $("#txtsso").prop('value',Aux[filaI].ss);
                                $("#txtsdo").prop('value',Aux[filaI].sd);
                                //$("#txtsm").prop('value',Aux[filaI].sm);
                                $("#txtsiso").prop('value',Aux[filaI].sis);
                                $("#txtsido").prop('value',Aux[filaI].sid);
                                //$("#txtsim").prop('value',Aux[filaI].sim);
                                $("#txtfd").prop('value',Aux[filaI].fd);
                                $("#txtfh").prop('value',Aux[filaI].fh);
                                $("#txtobs").prop('value',Aux[filaI].obs);
                                $("#txtest").prop('value',Aux[filaI].est);
                                $("#txtpkC").prop('value',Aux[filaI].pkc);
                                $("#txtpkO").prop('value',Aux[filaI].pko);
                                 if(Aux[filaI].est=="cerrado"){
                                    $("#cancelarC").removeClass("hidden"); 
                                  }

                                  if(Aux[filaI].est=="cancelado"){ 
                                    $("#cancelarC").addClass("hidden");
                                  }

                              });
                              $("#btnRefrescar").click(function(){
                                ajax_Cierres();
                              });
                            
                              $("#modificar").click(function(){
                                  cancelarCierre();
                              });

                              function cancelarCierre(){
                                $.ajax({
                                  data: {'idC':$("#txtid").val(),'idCM':$("#txtidm").val()},
                                  url:'/CancelarCierre_ajax/',
                                  type:'GET',
                                  dataType:'text',
                                  success: function(data){
                                     if(data=='exito'){
                                      $("#Exito").prop('class','bg-info');
                                      $("#Exito").text("Operacion Exitosa :)");
                                      bootbox.alert({ 
                                        message: "El cierre ha sido anulado",
                                        className: 'bb-alternate-modal'
                                      });
                                      dialog.modal('hide');
                                      ajax_Cierres();
                                     }
                                     else{
                                      $("#Exito").prop('class','bg-danger');
                                      $("#Exito").text("Fallo Operacion :( " + data);

                                      bootbox.alert({ 
                                        message: "Error. Fallo Operación " + data,
                                        className: 'bb-alternate-modal'
                                      });

                                      dialog.modal('hide');

                                     }
                                  },
                                  error: function(xhr, textStatus, errorThrown) {
                                          console.log(xhr.responseText);
                                  },
                                });
                               }
  
                               
                              function ajax_Cierres(){
                                $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
                                $.ajax({
                                  data:{'pg':pagina},
                                  url:'/ConsultaCierresAdmin/',
                                  type:'GET',
                                  dataType:'json',
                                  success: function(data){
                                    Aux = data;
                                    var html ="";

                                    console.log(Aux);

                                    for(var i=0;i<data.length;i++){
                                      var estado ="";
                                        if(data[i].est=="cerrado"){ 
                                          estado = "success";
                                        }
                                        if(data[i].est=="cancelado"){
                                          estado= "danger"; 
                                        }
 
                                        html += '<tr data-toggle="modal" data-target="#myModal" class="filaC '+ estado+'" id="'+i+'"><td scope="row">'+(i+1)+'</td><td><b>'+data[i].fd+'</b></td><td><b>'+data[i].ofi+'</b></td><td>'+data[i].caja+'</td><td>'+data[i].o +'</td><td>'+data[i].iso+'</td><td>'+data[i].ido+'</td><td>'+data[i].es+'</td><td>'+data[i].ed+'</td><td><b>'+data[i].ss+'</b></td><td>'+data[i].sd+'</td><td>'+data[i].sis+'</td><td>'+data[i].sid+'</td><td>'+data[i].f+'</td><td>'+data[i].obs+'</td><td>'+data[i].est+'</td></tr>';
                                    }                        
                                    //html+='</tbody></table>';
                                    $('#listaC').html(html);
                                    $('.table-responsive').waitMe('hide');
                                  },
                                    error: function(xhr, textStatus, errorThrown) { 
                                          console.log(xhr.responseText);
                                  },
                                });
                              };
                              //
                              $("#btnfiltrar").click(function(){
                                ajax_Cierres_oficina();
                              })
                              function ajax_Cierres_oficina(){
                                $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
                                $.ajax({
                                  data:{'pg':pagina,'ofi':$("#ComboOficina").val()},
                                  url:'/ConsultaGerenteCierre_oficina_ajax/',
                                  type:'GET',
                                  dataType:'json',
                                  success: function(data){
                                    Aux = data;
                                    var html ="";
                                    console.log(Aux);
                                    for(var i=0;i<data.length;i++){
                                      var estado ="";
                                        if(data[i].est=="cerrado"){
                                          estado = "success";
                                        }
                                        if(data[i].est=="cancelado"){
                                          estado= "danger";
                                        }
                                        html += '<tr data-toggle="modal" data-target="#myModal" class="filaC '+ estado+'" id="'+i+'"><td scope="row">'+(i+1)+'</td><td><b>'+data[i].fd+'</b></td><td><b>'+data[i].ofi+'</b></td><td>'+data[i].caja+'</td><td>'+data[i].o +'</td><td>'+data[i].iso+'</td><td>'+data[i].ido+'</td><td>'+data[i].es+'</td><td>'+data[i].ed+'</td><td><b>'+data[i].ss+'</b></td><td>'+data[i].sd+'</td><td>'+data[i].sis+'</td><td>'+data[i].sid+'</td><td>'+data[i].f+'</td><td>'+data[i].obs+'</td><td>'+data[i].est+'</td></tr>';
                                    }                        
                                    //html+='</tbody></table>';
                                    $('#listaC').html(html);
                                    $('.table-responsive').waitMe('hide');
                                  },
                                    error: function(xhr, textStatus, errorThrown) { 
                                          console.log(xhr.responseText);
                                  },
                                });
                              };
                              //
                               document.querySelector('#cancelarC').onclick = function(){

                                  bootbox.confirm({
                                      message: "¿Esta seguro que desea anular el cierre?",
                                      className: 'bb-alternate-modal',
                                      buttons: {
                                          confirm: {
                                              label: '<i class="fa fa-check"></i> Aceptar',
                                              className: 'btn-success'
                                          },
                                          cancel: {
                                              label: '<i class="fa fa-times"></i> Cancelar',
                                              className: 'btn-danger'
                                          }
                                      },
                                      callback: function (result) {
                                           if(result) {
                                              dialog=bootbox.dialog({
                                                  message: '<p><i class="fa fa-spin fa-spinner"></i> Realizando Operación...</p>'
                                              });
                                              cancelarCierre();
                                              $("#myModal").modal('hide');
                                          }
                                           
                                      }
                                  });
                                };
                                //
                                function ajax_oficina(){
                                  $.ajax({
                                    url:'/Admin/oficinas_ajax/',
                                    type:'GET',
                                    dataType:'json',
                                    success: function(data){
                                    var html ="";
                                      $("#ComboOficina").html('');
                                      for(var i=0;i<data.length;i++){
                                        html += '<option value="'+data[i].pk+'">'+data[i].nombre_oficina+'</option>';
                                      }
                                      $('#ComboOficina').html(html);
                                    }
                                  });
                                };
                                //-------------------paginacion----------------
                               $(".pag").click(function(){
                                  $(".pag").attr('class','pag');
                                  $(this).attr('class','active pag');
                                  pagina = $(this).text();
                                  ajax_Cierres();
                                })
                                $("#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>
                          <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>
                                      <strong class="modal-title" id="myModalLabel">Detalle de Cierre</strong>
                                    </div>
                                    <div class="modal-body">
                                      <div class="row">
                                        <div class="col-md-12 col-sm-12" >
                                            <div class="panel panel-default">
                                              <div class="panel-heading panel-inverse" align="center"> <strong>Cierre de Caja</strong></div>
                                              <form action="/ver_cierre_caja/" method="POST">{% csrf_token %}
                                                <div class="panel-body">
                                                  <div class="row">
                                                    <div class="col-md-12">
                                                      <div class="alert alert-danger alert-dismissible" role="alert" align="left">
                                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close" style=" font-size:30px;"><span aria-hidden="true">&times;</span></button>
                                                        <p><b>Alerta</b> Al anular un Cierre se anulara tambien su respectivo Cierre Dolares y Cierre Material. cualquier duda comunicarse con el administrador del sistema</p>
                                                      </div>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-2 col-md-offset-1" >
                                                      <label> Id Cierre </label>
                                                    </div>
                                                    <div class="col-md-3">
                                                      <input type="text" class="form-control" id="txtid" readonly="readonly">
                                                      <input type="text" class="hidden" id="txtidm" readonly="readonly">
                                                      <p></p>
                                                    </div>
                                                    <div class="col-md-1 col-md-offset-4">
                                                      <input type="text" class="form-control" name="pkC" id="txtpkC" readonly="readonly">
                                                      <p></p>
                                                    </div>
                                                    <div class="col-md-1">
                                                      <input type="text" class="form-control" id="txtpkO" name="pkO" readonly="readonly">
                                                      <p></p>
                                                    </div>
                                                  </div>
                                                  <div class="row">
                                                      <div class="col-md-2 col-md-offset-1"> 
                                                        <label >Momento del Cierre</label> 
                                                      </div>
                                                      <div class="col-md-3">
                                                        <input type="text" class="form-control" id="txtfecha"name="fc" readonly="readonly">  
                                                      </div> 
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-2 col-md-offset-1">
                                                      <label>Oficina: </label>
                                                    </div>
                                                    <div class="col-md-3">
                                                      <input type="text" class="form-control" name="oficina" id="txtoficina" readonly="readonly">  
                                                    </div>
                                                     <div class="col-md-2">
                                                      <label>Caja: </label>
                                                    </div>
                                                    <div class="col-md-3">
                                                      <input type="text" class="form-control" name="caja" id="txtcaja" readonly="readonly">  
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-2 col-md-offset-1">
                                                      <label>Operador: </label>
                                                    </div>
                                                    <div class="col-md-4">
                                                      <input type="text" class="form-control" name="op" id="txtoperador" readonly="readonly">  
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                      <div class="col-md-2 col-md-offset-1" > 
                                                        <label>Ingreso Soles</label> 
                                                      </div>
                                                      <div class="col-md-3">
                                                        <input type="text" class="form-control" id="txtiso" readonly="readonly">  
                                                      </div> 
                                                      <div class="col-md-2" > 
                                                        <label>Ingreso dolares</label> 
                                                      </div>
                                                      <div class="col-md-3">
                                                        <input type="text" class="form-control" id="txtido" readonly="readonly">  
                                                      </div> 
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                      <div class="col-md-2 col-md-offset-1" > 
                                                        <label>Egreso Soles</label> 
                                                      </div>
                                                      <div class="col-md-3">
                                                        <input type="text" class="form-control" id="txteso" readonly="readonly">  
                                                      </div> 
                                                      <div class="col-md-2" > 
                                                        <label>Egreso dolares</label> 
                                                      </div>
                                                      <div class="col-md-3">
                                                        <input type="text" class="form-control" id="txtedo" readonly="readonly">  
                                                      </div> 
                                                  </div>
                                                  <p></p>
                                                  <!--
                                                   <div class="row">
                                                      <div class="col-md-2 col-md-offset-1" > 
                                                        <label>Ingreso Material</label> 
                                                      </div>
                                                      <div class="col-md-3">
                                                        <input type="text" class="form-control" id="txtim" readonly="readonly">  
                                                      </div> 
                                                      <div class="col-md-2" > 
                                                        <label>Egreso Material</label> 
                                                      </div>
                                                      <div class="col-md-3">
                                                        <input type="text" class="form-control" id="txtem" readonly="readonly">  
                                                      </div> 
                                                  </div>
                                                  -->
                                                  <p></p>
                                                  <div class="row">
                                                      <div class="col-md-2" > 
                                                        <label>Saldo Soles</label> 
                                                      </div>
                                                      <div class="col-md-2">
                                                        <input type="text" class="form-control" name="ss" id="txtsso" readonly="readonly">  
                                                      </div> 
                                                      <div class="col-md-2" >
                                                        <label>Saldo Dolares</label>
                                                      </div>
                                                      <div class="col-md-2">
                                                        <input type="text" class="form-control" name="sd" id="txtsdo" readonly="readonly">  
                                                      </div> 
                                                      <!--
                                                       <div class="col-md-2" >
                                                        <label>Saldo Material</label>
                                                      </div>
                                                      <div class="col-md-2">
                                                        <input type="text" class="form-control" name="sm" id="txtsm" readonly="readonly">  
                                                      </div> 
                                                      -->
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                      <div class="col-md-2" > 
                                                        <label>Saldo Inicial Soles</label> 
                                                      </div>
                                                      <div class="col-md-2">
                                                        <input type="text" class="form-control" name="sis" id="txtsiso" readonly="readonly">  
                                                      </div> 
                                                      <div class="col-md-2" > 
                                                        <label>Saldo Inicial dolares</label> 
                                                      </div>
                                                      <div class="col-md-2">
                                                        <input type="text" class="form-control" name="sid" id="txtsido" readonly="readonly">  
                                                      </div>
                                                      <!--
                                                       <div class="col-md-2" > 
                                                        <label>Saldo Inicial Material</label> 
                                                      </div>
                                                      <div class="col-md-2">
                                                        <input type="text" class="form-control" name="sim" id="txtsim" readonly="readonly">  
                                                      </div> 
                                                      -->
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                      <div class="col-md-10 col-md-offset-1" > 
                                                        <label>Fechas que se consideran para el cierre:</label> 
                                                      </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                      <div class="col-md-2 col-md-offset-1" > 
                                                        <label>Desde</label> 
                                                      </div>
                                                      <div class="col-md-3">
                                                        <input type="text" class="form-control" name="fd" id="txtfd" readonly="readonly">  
                                                      </div> 
                                                      <div class="col-md-2" > 
                                                        <label>Hasta</label> 
                                                      </div>
                                                      <div class="col-md-3">
                                                        <input type="text" class="form-control" id="txtfh" name="fh" readonly="readonly">  
                                                      </div> 
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                      <div class="col-md-2 col-md-offset-1" > 
                                                        <label>Observaciones</label> 
                                                      </div>
                                                      <div class="col-md-6">
                                                        <textarea class="form-control" rows="3" id="txtobs" readonly="readonly"></textarea > 
                                                      </div> 
                                                  </div>
                                                  <p></p>
                                                   <div class="row">
                                                      <div class="col-md-2 col-md-offset-1" > 
                                                        <label>Estado</label> 
                                                      </div>
                                                      <div class="col-md-4">
                                                        <input type="text" class="form-control" id="txtest" readonly="readonly">         
                                                      </div> 
                                                      <div class="col-md-2">
                                                        <button class="btn btn-danger btn-block btn-xs" type="button" id="cancelarC" value="Anular Cierre">Anular Cierre</button>
                                                      </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                      <div class="col-md-2 col-md-offset-5">
                                                        <button class="btn btn-primary btn-block btn-sm" type="submit" id="verdet" value="DETALLE DE CIERE">Detalle de Cierre</button>
                                                      </div>
                                                  </div>
                                                </div>
                                              </form>
                                            </div>
                                        </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>
                          <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                  <tr>
                                    <th>Nro</th>
                                    <th>Fecha de cierre</th>
                                    <th>Oficina</th>
                                    <th>Caja</th>
                                    <th>Operador</th>
                                    <th>Ingreso Soles</th>
                                    <th>Ingreso Dolares</th>
                                    <th>Egreso Soles</th>
                                    <th>Egreso Dolares</th>
                                    <!--
                                    <th>Ingreso Material</th>
                                    <th>Egreso Material</th>
                                    -->
                                    <th>Saldo Soles</th>
                                    <th>Saldo Dolares</th>
                                    <!--<th>Saldo Material</th>-->
                                    <th>Saldo Inicial Soles</th>
                                    <th>Saldo Inicial Dolares</th>
                                    <!--<th>Saldo Inicial Material</th>-->
                                    <th>Momento del Cierre</th>
                                    <th>Observaciones</th>
                                    <th>Estado</th>
                                  </tr>
                                </thead>
                                <tbody id="listaC">
                                    
                                </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="#" 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>
                </div>
              </div>
          </div>
        </div>
{% endblock content1 %}