{% extends "base.html" %}
{% load static %}
{% block titulo %}
Egresos
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navC").attr('class','dropdown active');
  $("#navListadoEgreso").attr('class','active');
</script>
<div class="row">
  <div class="col-md-12" >
      <div class="panel panel-default" >
        <div class="panel-heading panel-toolbar"> 
          <strong>LISTADO DE EGRESOS</strong>
          <button type="button" class="btn btn-default btn-sm" id="btnRefrescar">Refrescar</button>
        </div>
        <div class="panel-body">
          <div class="row" id="Result">
            {% ifnotequal resultado '' %}
            {% ifequal resultado 'exito' %}
            <div class="alert alert-success" role="alert" align="center">
              <h4>OPERACION EXITOSA!!</h4>
            </div>
            {% else %}
            <div class="alert alert-danger" role="alert" align="center">
              <h4>FALLO OPERACION: {{resultado}}</h4>
            </div>
            {% endifequal %}
            {% endifnotequal %}
          </div>
          <div class="row">
            <div class="col-md-1">
              <h5>Filtrar Por</h5>
            </div>
            <div class="col-md-2">
              <div class="select">
                <select class="form-control" id="comboFiltroF">
                  <option value="h">Hoy</option>
                  <option value="f">Fecha</option>
                  <option value="ef">Entre Fechas</option>
                </select>
              </div>
              <p></p>
            </div>
            <div class="col-md-2">
              <input type='text' class=" form-control" id="txtfecha1">
              <p></p>
            </div>
            <div class="col-md-2">
              <input type='text' class="form-control" id="txtfecha2">
            </div>
            <div class="col-md-2">
              <button type="button" class=" btn btn-block btn-primary" id="buscarF"><i class="fa fa-search"></i> Buscar</button>
              <p></p>
            </div>
          </div>
          <div class="row">
            <p></p>
            <div class="col-md-12">
                <div class="table-responsive">
                  <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>A favor</th>
                          <th>Fecha</th>
                          <th>N° Recibo</th>
                          <th>Concepto</th>
                          <th>Monto</th>
                          <th>Observaciones</th>
                          <th>Estado</th>
                        </tr>
                      </thead>
                      <tbody id="listaE">
                          
                      </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="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li class="active"><a href="#">1</a></li>
                  <li>
                    <a href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

<!-- modificar Aportes -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Detalles</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-success">
                <div class="panel-heading" align="center"> <strong>Detalle de Egreso</strong></div>
                  <div class="panel-body">
                    <div class="row">
                      <div class="col-md-3"> 
                          <h5 id="">a Favor de</h5> 
                        </div>
                        <div class="col-md-6">
                          <input type="text" class="form-control" id="txtafavor">  
                        </div> 
                    </div>
                    <div class="row">
                        <div class="col-md-3"> 
                          <h5 id="">Fecha</h5> 
                        </div>
                        <div class="col-md-6">
                          <input type="text" class="form-control" id="txtfecha">  
                        </div> 
                    </div>
                    <p></p>
                   <div class="row">
                        <div class="col-md-3"> 
                          <h5 id="">Monto</h5> 
                        </div>
                        <div class="col-md-6">
                          <input type="text" class="form-control" id="txtmonto">  
                        </div> 
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-3" > 
                          <h5>R/E </h5> 
                        </div>
                        <div class="col-md-5">
                          <input type="text" class="form-control" id="txtnroRecibo">  
                        </div> 
                    </div>
                   <p></p>
                    <div class="row">
                      <div class="col-md-3" > 
                          <h5>Concepto </h5> 
                        </div>
                        <div class="col-md-7">
                          <textarea class="form-control" rows="3"  id="txtconcepto" ></textarea >
                        </div> 
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-3" > 
                          <h5>Observaciones </h5> 
                        </div>
                        <div class="col-md-7">
                          <textarea class="form-control" rows="3"  id="txtobs" ></textarea > 
                        </div> 
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-6 col-md-offset-3">
                        <input class="btn btn-success btn-block" type="button" id="reimprimir" value="Reimprimir Ingreso">
                      </div>

                    </div>
                    <p></p>
                  </div>
              </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
<script type="text/javascript">
  var Aux="";
  var filaI =0;
  $(document).ready(function () {
    $('#txtfecha1').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    $('#txtfecha2').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    //
    $("#txtfecha1").hide();
    $("#txtfecha2").hide();
    //
    $("#comboFiltroF").change(function(){
      if($("#comboFiltroF").val()=="ef"){
        $("#txtfecha1").show();
        $("#txtfecha1").prop("value","");
        $("#txtfecha2").show();
        $("#txtfecha2").prop("value","");
      }
      if($("#comboFiltroF").val()=="f"){
        $("#txtfecha1").prop("value","");
        $("#txtfecha1").show();
        $("#txtfecha2").hide();
      }
      if($("#comboFiltroF").val()=="h"){
        $("#txtfecha1").prop("value","");
        $("#txtfecha1").hide();
        $("#txtfecha2").prop("value","");
        $("#txtfecha2").hide();
      }
    });
    $("#buscarF").click(function(){
      ajax_Egresos_filtro();
    })
    function ajax_Egresos_filtro(){
      $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
         data:{'filtro':$('#comboFiltroF').val(),'F1':$('#txtfecha1').val(),'F2':$('#txtfecha2').val()},
        url:'/listaEgresos_activos_filtro_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux = data;
          var html ="";
          for(var i=0;i<data.length;i++){
               html += '<tr data-toggle="modal" data-target="#myModal" class="filaE" id="'+i+'"><td>'+data[i].afavor+'</td><td>'+data[i].fecha+'</td><td>'+data[i].nroRecibo+'</td><td>'+data[i].concepto+'</td><td>'+data[i].monto+'</td><td>'+data[i].obs+'</td><td>'+data[i].estado+'</td></tr>';
          }                        
          $('#listaE').html(html);
          $('.table-responsive').waitMe('hide')
        }
      });
    }
    $('#txtDniC').numeric();
    $('input').on('keypress', function(e){
      if(e.keyCode == 13)
      {
        var inputs = $(this).parents("form").eq(0).find(":input.form-control");
        var idx = inputs.index($(this));
        if (idx == inputs.length - 1) {
          inputs[0].select()
        } 
        else {
          inputs[idx + 1].focus(); //  handles submit buttons
          inputs[idx + 1].select();
        }
        return false;
      }
    });

    ajax_Egresos();
    $(document).on("click",".filaE",function(){
      var num = $(this).attr('id');
      filaI = num;
      var fila= $(this).attr('class');
      
      $("#txtafavor").prop('value',Aux[filaI].afavor);
      $("#txtfecha").prop('value',Aux[filaI].fecha);
      $("#txtnroRecibo").prop('value',Aux[filaI].nroRecibo);
      $("#txtmonto").prop('value',Aux[filaI].monto);
      $("#txtconcepto").prop('value',Aux[filaI].concepto);
      $("#txtobs").prop('value',Aux[filaI].obs);
      
    });
    $("#reimprimir").click(function(){
     
    })
    $("#btnRefrescar").click(function(){
      ajax_Egresos();
    });
  
   
    function ajax_Egresos(){
       $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        url:'/listaEgresos_activos_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux = data;
          var html ="";
          for(var i=0;i<data.length;i++){
              html += '<tr data-toggle="modal" data-target="#myModal" class="filaE" id="'+i+'"><td>'+data[i].afavor+'</td><td>'+data[i].fecha+'</td><td>'+data[i].nroRecibo+'</td><td>'+data[i].concepto+'</td><td>'+data[i].monto+'</td><td>'+data[i].obs+'</td><td>'+data[i].estado+'</td></tr>';
          }                        
          $('#listaE').html(html);
          $('.table-responsive').waitMe('hide')
        }
      });
    }
     $(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>
{% endblock content1 %}