{% extends "base.html" %}
{% load static %}
{% block titulo %}
Listado Recepcion de Dinero (Material)
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navCajaMaterial_dinero").attr('class','dropdown active');
  //$("#navRecepcionDineroM").attr('class','dropdown dropdown-submenu active');
  $("#navListadoRecepcionDineroM").attr('class','active');
</script>
<div class="row">
  <div class="col-md-12 col-sm-12" >
      <div class="panel panel-default">
        <div class="panel-heading panel-material"> <strong>LISTADO DE RECEPCIONES DE DINERO (CAJA MATERIAL)</strong></div>
        <div class="panel-body">
           <div class="row" >
            <h4 class="bg-success" align="center" id="ExitoMensaje">
            </h4>
          </div>
          <div class="row">
              <div class="col-md-2">
                <button type="button" class="btn btn-primary btn-sm" id="btnRefrescar"><span class="fa fa-refresh"></span><b>Actualizar</b></button>
              </div>
              <div class="col-md-2 col-md-offset-5">
                  <label for="txtfecha1">Desde:</label>
                  <input type="text" class="form-control" id="txtfecha1">
                  <p></p>
                </div>
                <div class="col-md-2">
                  <label for="txtfecha2">Hasta:</label>
                  <input type="text" class="form-control" id="txtfecha2">
                  <p></p>
                </div>
              <div class="col-md-1">
                <label for="btnfiltrar">&nbsp; </label>
                <button type="button" class="btn btn-danger btn-block btn-sm" id="btnfiltrar"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
              </div>
          </div>
          <div class="row">
              <div class="col-md-12">
                  <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"> <strong>Detalle de Saldo Recibido</strong></div>
                                    <div class="panel-body">
                                      <div class="row">
                                          <div class="col-md-3 col-md-offset-1" > 
                                            <label>Fecha</label> 
                                          </div>
                                          <div class="col-md-4">
                                            <input type="text" class="form-control" id="txtFecha" disabled="disabled">         
                                          </div> 
                                          <div class="col-md-3 col-md-offset-1">
                                            <input type="text" class="form-control" id="txtpk" disabled="disabled"> 
                                          </div>
                                      </div>
                                      <p></p>
                                      <div class="row">
                                          <div class="col-md-3 col-md-offset-1" > 
                                            <label>concepto</label> 
                                          </div>
                                          <div class="col-md-8">
                                            <input type="text" class="form-control" id="txtcon" disabled="disabled">         
                                          </div> 
                                      </div>
                                      <p></p>
                                      <div class="row">
                                          <div class="col-md-3 col-md-offset-1"> 
                                            <label>Monto</label> 
                                          </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-3 col-md-offset-1"> 
                                            <label>moneda</label> 
                                          </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-3 col-md-offset-1" > 
                                            <label>Observaciones</label> 
                                          </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-3 col-md-offset-1" > 
                                            <label>Observaciones de Recepcion</label> 
                                          </div>
                                          <div class="col-md-8">
                                            <input type="text" class="form-control" id="txtObsRe" readonly>         
                                          </div> 
                                      </div>
                                      <br>
                                      <div class="row">
                                        <div class="col-md-4 col-md-offset-4">
                                          <button type="button" class="btn btn-success btn-block btn-sm"id="reimprimir"><b>Reimprimir?</b></button>
                                        </div>
                                        <!--
                                        <div class="col-md-4">
                                          <button type="button" class="btn btn-warning btn-block"  data-toggle="modal" data-target="#myModalDetalles" id="detalles">Detalles</button>
                                        </div>-->
                                      </div>
                                    </div>
                                  </div>
                              </div>
                            </p>
                          </div>
                          <div class="modal-footer">
                            <hr>
                            <button type="button" class="btn btn-danger" 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;">
                                        <div>
                                          <h5 align="center"><b> RECEPCIÓN DE HABILITACIÓN</b></h5>
                                        </div>
                                        <table>
                                <tr nowrap>=====================================</tr>
                              </table>
                                        <br>
                                        <div>
                                          <table>
                                              <tr>
                                                <th>{{ SITE_URL }}</th>
                                              </tr>
                                              <tr>
                                                <th>Fecha:&nbsp;</th>
                                                <td id="f" colspan=3 nowrap></td>
                                              </tr>
                                              <tr >
                                                <th>Concepto:</th>
                                                <td  colspan=3 >Recepcion de habilitacion</td>
                                              </tr>
                                              <th><b>De:&nbsp;</b></th>
                                                <td id="Rori" colspan=3></td>
                                              <tr style=" border-bottom: 1px solid #000;border-bottom-style: dashed;">
                                                <th >Monto:&nbsp;</th>
                                                <td colspan=3 nowrap> <b><h4 id="mon"></h4></b></td>
                                              </tr>
                                              <tr>
                                                <th colspan=2>Observaciones de envio:&nbsp; </th>
                                                <td id="ob" colspan=2></td>
                                              </tr>
                                              <tr>
                                                <th >Observaciones: &nbsp;</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-danger" data-dismiss="modal">Cerrar</button>
                          </div>

                        </div><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                  </div>
                  
                  <div class="table-responsive">
                    <table class="table table-bordered" id="tablaHa">
                        <thead>
                          <tr>
                            <th>Nro</th>
                            <th>Fecha</th>
                            <!--<th>Concepto</th>-->
                            <th>Origen</th>
                            <th>Monto</th>
                            <th>Egreso</th>
                            <th>Moneda</th>
                            <th>Observaciones</th>
                            <th>Observaciones de recepcion</th>
                            <th>Fecha de recepcion</th>
                          </tr>
                        </thead>
                        <tbody id="listaC">
                            
                        </tbody>
                    </table>
                  </div>
              </div>
          </div>
            <div class="row">
              <div class="col-md-6 col-md-offset-3" 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" ><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 class="col-md-2">
                  <button type="button" class="btn btn-warning btn-block btn-sm" id="imprimir_envios"><i class="fa fa-print" ></i><b>Imprimir</b></button>
                </div>
            </div>
        </div>
      </div>
  </div>
</div>
<script type="text/JavaScript">
  var Aux="";
  var filaI =0;
  var pagina=1;
  $(document).ready(function(){
    $(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');
    });
    $('#txtfecha1').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    $('#txtfecha2').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    $(document).on("click",".filaC",function(){
      var num = $(this).attr('id');
      filaI = num;
      //--------------
      $('#txtFecha').prop("value",Aux[filaI].fecha);
      $('#txtpk').prop("value",Aux[filaI].pk);
      $('#txtcon').prop("value",Aux[filaI].concepto);
      $('#txtmonto').prop("value",Aux[filaI].monto);
      $('#txtmoneda').prop("value",Aux[filaI].moneda);
      {% ifequal OfCentral 'si' %}
      $('#txtObs').prop("value",Aux[filaI].obs);
      {% endifequal %}
      $('#txtObsRe').prop("value",Aux[filaI].obsRe);
      $("#f").text(Aux[filaI].fechar);
      $("#Rori").html(Aux[filaI].ori);
      //$("#con").text(Aux[filaI].concepto);
      //$("#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();
    });
    //
    function ajax_SaldoRecibido(){
      $.ajax({
        data:{'pg':pagina},
        url:'/listaSaldoRecibidas_m_total_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux= data;
          var html ="";
          {% ifequal OfCentral 'si' %}
          for(var i=0;i<data.length-1;i++){
              html += '<tr class="filaC" data-toggle="modal" data-target="#myModal"' +' id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].fecha+'</td><td>'+data[i].ori +'</td><td>'+data[i].monto +'</td><td>'+data[i].comi +'</td><td>'+data[i].moneda+'</td><td>'+data[i].obs+'</td><td>'+data[i].obsRe+'</td><td>'+data[i].fechar+'</td></tr>';
          }
          {% else %}    
           for(var i=0;i<data.length-1;i++){
              html += '<tr class="filaC" data-toggle="modal" data-target="#myModal"' +' id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].fecha+'</td><td>'+data[i].ori +'</td><td>'+data[i].monto +'</td><td>'+data[i].comi +'</td><td>'+data[i].moneda+'</td><td>'+data[i].obsRe+'</td><td>'+data[i].fechar+'</td></tr>';
          }
          {% endifequal %}          
          $('#listaC').html(html);
          $("#txtfecha1").prop('value',data[data.length-1].d);
          $("#txtfecha2").prop('value',data[data.length-1].h);
        }
      });
    }
    //

    //otra funcion
    function ocultarmodal(){
      $('#myModal').modal('hide')
    };
    
    $("#reimprimir").click(function(){
      $('#plantilla').printThis();
    })
    //
    $("#detalles").click(function(){
      ajax_DetEnvio();
    })
   //-------------------
   function ajax_SaldoRecibidofechas(){
      $("#progreso_ajax").show();
        $.ajax({
          data:{'f':'f','F1':$("#txtfecha1").val(),'F2':$("#txtfecha2").val()},
          url:'/listaSaldoRecibidas_m_total_ajax/',
          type:'GET',
          dataType:'json',
          success: function(data){
            Aux= data;
            var html ="";
            {% ifequal OfCentral 'si' %}
            for(var i=0;i<data.length-1;i++){
                html += '<tr class="filaC" data-toggle="modal" data-target="#myModal"' +' id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].fecha+'</td><td>'+data[i].ori +'</td><td>'+data[i].monto +'</td><td>'+data[i].comi +'</td><td>'+data[i].moneda+'</td><td>'+data[i].obs+'</td><td>'+data[i].obsRe+'</td><td>'+data[i].fechar+'</td></tr>';
            }
            {% else %}
            for(var i=0;i<data.length-1;i++){
                html += '<tr class="filaC" data-toggle="modal" data-target="#myModal"' +' id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].fecha+'</td><td>'+data[i].ori +'</td><td>'+data[i].monto +'</td><td>'+data[i].comi +'</td><td>'+data[i].moneda+'</td><td>'+data[i].obsRe+'</td><td>'+data[i].fechar+'</td></tr>';
            }
            {% endifequal %}
            $('#listaC').html(html);
            $("#txtfecha1").prop('value',data[data.length-1].d);
            $("#txtfecha2").prop('value',data[data.length-1].h);
          }
        });
      }
      $("#btnfiltrar").click(function(){
        ajax_SaldoRecibidofechas();
        PonerInicioPag();
        pagina=1;
      })
     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);
      };
        //---- impresion ----
        $("#imprimir_envios").click(function(){
           //var datos=$("#comboFiltro :selected").text().split("/");
            var d = new Date();
            var n = d.toLocaleString();

            var doc = new jsPDF('l', 'pt');
            var res = doc.autoTableHtmlToJson(document.getElementById("tablaHa"));
            doc.setFontSize(14);
            doc.text("Reporte de Recepcion de Dinero", 20, 30);
            doc.setFontSize(12);
            doc.text('Oficina : '+'{{ SITE_URL }}', 20, 60);
            doc.text('Usuario : '+'{{ nombre_usuario }}', 20, 80);
            doc.text('Desde : '+ $("#txtfecha1").val() , 20, 100);
            doc.text('Hasta : '+ $("#txtfecha2").val(), 140, 100);
            doc.autoTable(res.columns, res.data, {
                margin: {horizontal: 20},
                startY: doc.autoTableEndPosY() + 120,
                margin: {horizontal: 10},
                styles: {overflow: 'linebreak'},
                bodyStyles: {valign: 'top'},
                columnStyles: {email: {columnWidth: 'wrap'}},
                theme: 'grid',
            });

            doc.save('reporteRecepciones.pdf');

           //$('#imprimir_trans').printThis();
        });
        //
      $(".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 %}