{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .::Liquidacion Cajas
{% endblock titulo %}
{% block content1 %}
<link href="{% static 'Bootstrap/css/sweet-alert.css' %}" rel="stylesheet">
    <div class="container">
      <script type="text/javascript">
        //$("#navMovimientos").attr('class','dropdown active');
        $("#navLiquidacion").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>LIQUIDACION DE BASES</strong></div>
                <div class="panel-body">
                  <div class="row">
                    <div class="col-md-2">
                      <button type="button" class="btn btn-default btn-block btn-sm" id="btnRefrescarLi">Actualizar</button>
                    </div>
                    <div class="col-md-2">
                      <button type="button" class="btn btn-success btn-block btn-sm" id="btnNuevo"  data-toggle="modal" data-target="#myModalOfi">NUEVO</button>
                    </div>
                    <div class="col-md-3 col-md-offset-4">
                        <select class="form-control" id="ComboOficina" placeholder="Oficina">
                            <option value="nulo"></option>     
                        </select> 
                    </div>
                    <div class="col-md-1">
                      <button type="button" class="btn btn-warning btn-block" id="btnFiltrarLi">Filtrar</button>
                    </div>
                    </div>
                    <!--
                     <div class="col-md-2">
                      <button type="button" class="btn btn-danger btn-block" id="ponerpro">Poner Propia</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>N°</th>
                                  <th>fecha Liquidacion</th>
                                  <th>Base</th>
                                  <th>Operador</th>
                                  <th>Desde Fecha</th>
                                  <th>Hasta Fecha</th>
                                  <th>Observacion</th>
                                </tr>
                              </thead>
                              <tbody id="listaL">
                                  
                              </tbody>
                          </table>
                        </div>
                    </div>
                    
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>
    <div id="myModalOfi" 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>
              <h4 class="modal-title" id="myModalLabel">Consulta Oficinas</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-12">
                  <div class="panel panel-warning">
                  <div class="panel-heading" align="center"> <strong>Oficinas</strong></div>
                  <div class="panel-body">
                    <div class="row">
                      <div class="col-md-2 col-md-offset-1">
                        <button type="button" class="btn btn-default btn-block" id="btnRefrescar">Actualizar</button>
                      </div>
                    </div>
                    <p></p>
                    <div class="row">
                      <p class="bg-success">
                        &nbsp;
                      </p>
                      <div class="col-md-10 col-md-offset-1">
                          <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                  <tr>
                                    <th>Nro</th>
                                    <th>Oficina</th>
                                  </tr>
                                </thead>
                                <tbody id="listaR">
                                    
                                </tbody>
                            </table>
                          </div>
                      </div>
                      
                    </div>
                  </div>
              </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 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>
              <h4 class="modal-title" id="myModalLabel">Detalles</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-12">
                  <div class="panel panel-default">
                        <div class="panel-body">
                          <div class="row">
                            <div class="col-md-12">
                              <p class="bg-success" align="center">
                                <!--&nbsp;-->
                                Detalle Oficinas
                              </p>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-12">
                              <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                      <tr>
                                        <th>Nombre</th>
                                        <th>Operador</th>
                                        <th>Estado</th>
                                      </tr>
                                    </thead>
                                    <tbody id="listaCa">
                                    </tbody>
                                </table>
                              </div>
                            </div>
                          </div>

                        </div><!--fin panel body-->
                      </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 id="Modalmovi" 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">
                  <div class="panel panel-default">
                        <div class="panel-body">
                          <form action="/LiquidacionCaja_admin_tem/" method="POST" id="arqueoCaja">{% csrf_token %}
                            <div class="row">
                              <div class="col-md-12">
                                <p class="bg-success" align="center">
                                  <!--&nbsp;-->
                                  Detalles
                                </p>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-2" align="right">
                                <h5>Caja: </h5>
                              </div>
                              <div class="col-md-5">
                                <input type="text" class="form-control" id="txtnombreCa" disabled="disabled">
                                <p></p>
                              </div>
                              <div class="col-md-2" align="right">
                                <h5>Id: </h5>
                              </div>
                              <div class="col-md-3">
                                <input type="text" class="form-control" name="pkC1" id="txtidCa2" readonly="readonly">
                                <p></p>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-2" align="right">
                                <h5>Encargado: </h5>
                              </div>
                              <div class="col-md-10">
                                <input type="text" class="form-control" id="txtencargadoCa" disabled="disabled">
                                <p></p>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-4 col-md-offset-4">
                                <button type="button" class="btn btn-success btn-block" id="arqueoCa">Liquidacion de Caja</button>
                              </div>
                            </div>
                          </form>
                        </div><!--fin panel body-->
                      </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 id="myModalLiquid" 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 de Liquidacion</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-12">
                  <div class="panel panel-default">
                        <div class="panel-body">
                          <form action="/VerLiquidacionCaja_admin_tem/" method="POST" id="VerLiquidacion">{% csrf_token %}
                            <div class="row">
                              <div class="col-md-12">
                                <p class="bg-success" align="center">
                                  <!--&nbsp;-->
                                  Detalles de Liquidacion
                                </p>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-2 col-md-offset-8" align="right">
                                <h5>Id: </h5>
                              </div>
                              <div class="col-md-1">
                                <input type="text" class="form-control" name="pkLi" id="txtPkLi" readonly="readonly">
                                <p></p>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-2" align="right">
                                <h5>Base: </h5>
                              </div>
                              <div class="col-md-5"id="txtBase">
                               
                                <p></p>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-2" align="right">
                                <h5>Operador: </h5>
                              </div>
                              <div class="col-md-10">
                                <input type="text" class="form-control" id="txtOpe" disabled="disabled">
                                <p></p>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-2" align="right">
                                <h5>Observacion: </h5>
                              </div>
                              <div class="col-md-7">
                                <textarea class="form-control" rows="4" id="txtobsLI" ></textarea >
                                <p></p>
                              </div>
                              <div class="col-md-3">
                                <button type="button" class="btn btn-info" id="actObs">Actualizar</button>
                              </div>
                            </div>
                            <div class="row" id="campoLi">
                              <div class="col-md-4">
                                <button type="button" class="btn btn-success btn-block" id="VerLIquid">Ver Liquidacion</button>
                              </div>
                              <div class="col-md-4 col-md-offset-4">
                                <button type="button" class="btn btn-danger btn-block" id="AnularLiquid">Anular Liquidacion</button>
                              </div>
                            </div>
                          </form>
                        </div><!--fin panel body-->
                      </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>
     <script type="text/javascript">
      Aux=[];
      Aux3=[];
      Aux5=[];
      $(document).ready(function (){
        $('#txtfecha').datetimepicker({
          locale: 'es',
          format: 'YYYY-MM-DD'
        });
        $("#listaR").on("click",".filaOf",function(){
          var num = $(this).prop('id');
          filaI2 = num;
          var fila= $(this).prop('class');
          $("."+fila).prop('class','filaOf');
          $(this).prop('class','filaOf info');
          ajax_caja(Aux[filaI2].pk);
          //insertando datos en el modal
          $("#txtidOfi").prop('value',Aux[filaI2].pk);
          $("#tituloO").text(Aux[filaI2].of);
        });
        $("#listaCa").on("click",".filaCa",function(){
          $("#grupo_f").hide();
          var num = $(this).prop('id');
          filaI3 = num;
          var fila= $(this).prop('class');
          $("."+fila).prop('class','filaCa');
          $(this).prop('class','filaCa info');
          //insertando datos al modal
          $("#txtidCa2").prop('value',Aux3[filaI3].c_id);
          $("#txtnombreCa").prop('value',Aux3[filaI3].c_nombre);
          $("#txtencargadoCa").prop('value',Aux3[filaI3].p_nombre+' '+Aux3[filaI3].p_ap+' '+Aux3[filaI3].p_am);
        });
        $("#listaL").on("click",".filaCa",function(){
          $("#grupo_f").hide();
          var num = $(this).prop('id');
          filaI3 = num;
          var fila= $(this).prop('class');
          $("."+fila).prop('class','filaCa');
          $(this).prop('class','filaCa info');
          //insertando datos al modal
          $("#txtidCa2").prop('value',Aux3[filaI3].c_id);
          $("#txtnombreCa").prop('value',Aux3[filaI3].c_nombre);
          $("#txtencargadoCa").prop('value',Aux3[filaI3].p_nombre+' '+Aux3[filaI3].p_ap+' '+Aux3[filaI3].p_am);
        });
        $("#arqueoCa").click(function(){
          $("#arqueoCaja").submit();
        })
        $("#VerLIquid").click(function(){
          $("#VerLiquidacion").submit();
        })
        $("#ponerpro").click(function(){
          ponerp();
        })
        function ponerp(){
          $.ajax({
            url:'/PonerPropiaCajasAdmin_ajax/',
            type:'GET',
            dataType:'text',
            success: function(data){
              alert(data);
            }
          });
        };
        $("#AnularLiquid").click(function(){
          anular_liquidacion();
        });
        function anular_liquidacion(){
          $.ajax({
            data:{'pkL':$("#txtPkLi").val()},
            url:'/AnularLiquidCaja_admin/',
            type:'GET',
            dataType:'text',
            success: function(data){
              if(data=='exito'){
                swal("Exito!", "La liquidacion se anulo ", "success");
                $("#myModalLiquid").modal('hide');
                ajax_listaLiquid();
              }
              else{
                swal("Error",data, "error");
              }
            }
          });
        };
        $("#actObs").click(function(){
          observaciones_liquidacion();
        });
        function observaciones_liquidacion(){
          $.ajax({
            data:{'pkL':$("#txtPkLi").val(),'obs':$("#txtobsLI").val()},
            url:'/ActObservacionesLiquidCaja_admin/',
            type:'GET',
            dataType:'text',
            success: function(data){
              if(data=='exito'){
                swal("Exito!", "Se Actualizo la observacion ", "success");
                $("#myModalLiquid").modal('hide');
                ajax_listaLiquid();
              }
              else{
                swal("Error",data, "error");
              }
            }
          });
        };
        function ajax_caja(idOf){
          $.ajax({
            url:'/Admin/caja_personal_saldo_ajax/',
            data:{'idOfi':idOf},
            type:'GET',
            dataType:'json',
            success: function(data){
              Aux3 = data;
              var html ="";
              var esta='';
              var sty ='';
              for(var i=0;i<data.length;i++){
                if (data[i].c_estado){
                  esta='activo';
                  sty='';
                }
                else{
                  esta='desactivo';
                  sty='style="color: #CB060A;"'
                }
                if(data[i].p_est){
                  html += '<tr data-toggle="modal" data-target="#Modalmovi" class="filaCa" '+sty+' id="'+i+'"><td>'+data[i].c_nombre+'</td><td>'+data[i].p_nombre+' '+data[i].p_ap+' '+data[i].p_am+'</td><td>'+esta+'</td></tr>';
                 
                }
                else{
                   html += '<tr data-toggle="modal" data-target="#Modalmovi" class="filaCa" '+sty+' id="'+i+'"><td>'+data[i].c_nombre+'</td><td><s><b>'+data[i].p_nombre+' '+data[i].p_ap+' '+data[i].p_am+'</b></s></td><td>'+esta+'</td></tr>';
                }
                  
              }                        
              $('#listaCa').html(html);
            }
          });
        };//end funcion ajax
        ajax_saldo_oficinas();
        $("#btnRefrescar").click(function(){
          ajax_saldo_oficinas();
        });
        function ajax_saldo_oficinas(){
          $.ajax({
            url:'/ver_saldo_oficinas_admin_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              Aux = data;
              var html ="" ,html1="",id_oficinaCentral="";
              for(var i=0;i<data.length;i++){
                  html += '<tr data-toggle="modal" data-target="#myModal" class="filaOf" id="'+i+'" ><th scope="row">'+(i+1)+'</th><td>'+data[i].of+'</td></tr>';

              }                        
              $('#listaR').html(html);
            }
          });
        };
        //
        ajax_listaLiquid();
        $("#btnRefrescarLi").click(function(){
          ajax_listaLiquid();
        })
        function ajax_listaLiquid(){
          $.ajax({
            url:'/lista_liquidacion_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              Aux5 = data;
              var estado='';
              var htmll ="";
              for(var i=0;i<data.length;i++){
                  estado='';
                  if(data[i].est != 'liquidado'){
                    estado='danger';
                  }
                  htmll += '<tr data-toggle="modal" data-target="#myModalLiquid" class="filaLi '+estado+'" id="'+i+'" ><th scope="row">'+(i+1)+'</th><td>'+data[i].f+'</td><td>'+data[i].base+'</td><td>'+data[i].op+'</td><td>'+data[i].fd+'</td><td>'+data[i].fh+'</td><td>'+data[i].obs+'</td></tr>';

              }                        
              $('#listaL').html(htmll);
            }
          });
        };
        //
        $("#listaL").on("click",".filaLi",function(){
          var num = $(this).prop('id');
          filaI5 = num;
          var fila= $(this).prop('class');
          $("."+fila).prop('class','filaLi');
          $(this).prop('class','filaLi info');
          //insertando datos al modal
          $("#txtPkLi").prop('value',Aux5[filaI5].pk);
          $("#txtBase").html(Aux5[filaI5].base);
          $("#txtOpe").prop('value',Aux5[filaI5].op);
          $("#txtobsLI").prop('value',Aux5[filaI5].obs);
          if(Aux5[filaI5].est!='liquidado'){
            $("#campoLi").hide();
          }
          else{
            $("#campoLi").show();
          }
        });
        //
        ajax_oficinas_combo();

        function ajax_oficinas_combo(){
          $.ajax({
            url:'/ver_saldo_oficinas_admin_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              var htmlc ="";
              $("#ComboOficina").html('');
              for(var i=0;i<data.length;i++){
                  htmlc += '<option value="'+data[i].pk+'">'+data[i].of+'</option>';
              }
              $('#ComboOficina').html(htmlc);
              $('#ComboOficina').selectize();
            }
          });
        };
        //
        $("#btnFiltrarLi").click(function(){
          ajax_listaLiqui_oficinad();
        })
        //
        function ajax_listaLiqui_oficinad(){
          $.ajax({
            data:{'idO':$('#ComboOficina').val()},
            url:'/lista_liquidacion_oficina_ajax/',
            type:'GET',
            dataType:'json',
            success: function(data){
              Aux5 = data;
              var estado='';
              var htmll ="";
              for(var i=0;i<data.length;i++){
                  estado='';
                  if(data[i].est != 'liquidado'){
                    estado='danger';
                  }
                  htmll += '<tr data-toggle="modal" data-target="#myModalLiquid" class="filaLi '+estado+'" id="'+i+'" ><th scope="row">'+(i+1)+'</th><td>'+data[i].f+'</td><td>'+data[i].base+'</td><td>'+data[i].op+'</td><td>'+data[i].fd+'</td><td>'+data[i].fh+'</td><td>'+data[i].obs+'</td></tr>';

              }                        
              $('#listaL').html(htmll);
            }
          });
        };
        //
        //
        //
        $(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');
        });
      });
      
    </script>
    <script src="{% static 'Bootstrap/js/sweet-alert.js' %}"></script>
{% endblock content1 %}