{% extends "base.html" %}
{% load static %}
{% block titulo %}
Ingresos
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navC").attr('class','dropdown active');
  $("#navListadoIngreso").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 INGRESOS</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-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="listaI">
                          
                      </tbody>
                  </table>
                </div>
            </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>
        <label class="modal-title" id="myModalLabel">Detalle de ingreso</label>
      </div>
      <div class="modal-body">
        <div class="row myb-4">
          <div class="col-md-12">
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon"><label>Recibí de</label></div>
                <input type="text" class="form-control" id="txtafavor">
              </div>
            </div>   
          </div>
        </div>
        <div class="row myb-4">
          <div class="col-md-12">
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon"><label>Fecha</label></div>
                <input type="text" class="form-control" id="txtfecha">  
              </div>
            </div>   
          </div>
        </div>
        <div class="row myb-4">
          <div class="col-md-6">
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon"><label>Monto</label></div>
                <input type="text" class="form-control t-monto" id="txtmonto"> 
              </div>
            </div>   
          </div>
        </div>
        <div class="row myb-4">
          <div class="col-md-6">
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon"><label>R/I</label></div>
                <input type="text" class="form-control" id="txtnroRecibo"> 
              </div>
            </div>   
          </div>
        </div>
        <div class="row myb-4">
          <div class="col-md-12">
            <label>Concepto</label> 
          </div>
          <div class="col-md-12">
            <textarea class="form-control" rows="3"  id="txtconcepto" ></textarea >
          </div>
        </div>
        <div class="row myb-4">
          <div class="col-md-12">
            <label>Observaciones</label> 
          </div>
          <div class="col-md-12">
           <textarea class="form-control" rows="3"  id="txtobs" ></textarea > 
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            <input class="btn btn-success btn-block btn-sm" type="button" id="reimprimir" value="Reimprimir Ingreso">
          </div>

        </div>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
<script type="text/javascript">
  var Aux="";
  var filaI =0;
  $(document).ready(function () {
    $('#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_Ingresos();
    $(document).on("click",".filaI",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_Ingresos();
    });
  
    function ajax_Ingresos(){
      $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        url:'/listaIngresos_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="filaI" 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>';
          }                        
          
          $('#listaI').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 %}