{% extends "base.html" %}
{% load static %}
{% block titulo %}
  .::Listado de envios de dinero a Martpsystem
{% endblock titulo %}
{% block content1 %}
      <script type="text/javascript">
        $("#navIE").attr('class','dropdown active');
        $("#nav_lista_envioimp").attr('class','active');
      </script>
    <div class="container">
      <form action="">
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="panel panel-danger">
                <div class="panel-body">
                  <div class="row" >
                    <div class="" role="alert" align="center" id="ExitoCambiar">
                      <h4 id="resul_text"></h4>
                    </div>
                  </div>
                  <div class="row">
                    <div class="alert alert-warning" role="alert" align="center">
                      <h4>Listado de Envios de dinero a Martpsystem</h4>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                      <a class="btn btn-block btn-primary" href="/envio_dinero_martp_tem/" role="button">Nuevo</a>
                      <p></p>
                    </div>
                    <div class="col-md-2">
                      <button type="button" class="btn btn-block btn-warning" id="refrescar">Refrescar</button>
                    </div>
                  </div>
                  <div class="row">
                    <br>
                    <p class="bg-success">
                      &nbsp;
                      <div class="col-md-12">
                          <div class="table-responsive">
                            <table class="table table-hover table-bordered">
                                <thead>
                                  <tr>
                                    <th>Nro</th>
                                    <th>Usuario Martpsystem</th>
                                    <th>Fecha</th>
                                    <th>Monto</th>
                                    <th>Moneda</th>
                                    <th>Observacines</th>
                                    <th>Estado</th>
                                  </tr>
                                </thead>
                                <tbody id="listaE">
                                </tbody>
                            </table>
                          </div>
                      </div>
                    </p>
                  </div>
                  <br>
                  <div class="row">
                    <div class="col-md-12" align="center">
                      <nav>
                        <ul class="pagination">
                          <li class="waves-effect">
                            <a href="#" id="ant" aria-label="Previous">
                              <span aria-hidden="true">&laquo;</span>
                            </a>
                          </li>
                          <li class="waves-effect pag active"><a id="pg1" href="#">1</a></li>
                          <li class="waves-effect pag"><a id="pg2" href="#">2</a></li>
                          <li class="waves-effect pag"><a id="pg3" href="#">3</a></li>
                          <li class="waves-effect pag"><a id="pg4" href="#">4</a></li>
                          <li class="waves-effect pag"><a id="pg5" href="#">5</a></li>
                          <li class="waves-effect">
                            <a href="#" id="pos" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </form>
    </div>
    <script type="text/javascript">
                            var pagina=1;
                            var Aux="";
                            var filaI =0;
                            $(document).ready(function () {
                              ajax_Envios();
                              $(document).on("click",".filaE",function(){
                                var num = $(this).attr('id');
                                filaI = num;
                                var fila= $(this).attr('class');
                                $("."+fila).attr('class','filaCli');
                                $("#"+num).attr('class','filaCli info');
                              });
                              $("#refrescar").click(function(){
                                ajax_Envios();
                              });
                              function ajax_Envios(){
                                $.ajax({
                                  data:{'pg':pagina},
                                  url:'/listado_envios_martp_ajax/',
                                  type:'GET',
                                  dataType:'json',
                                  success: function(data){
                                    Aux = data;
                                    var html ="";
                                    for(var i=0;i<data.length;i++){
                                        html += '<tr class="filaE" id="'+i+'"><th scope="row">'+(i+1)+'</td><td>'+data[i].ui+'</td><td>'+data[i].f+'</td><td>'+data[i].m+'</td><td>'+data[i].md +'</td><td>'+data[i].obs+'</td><td>'+data[i].est+'</td></tr>';
                                    }                        
                                    $('#listaE').html(html);
                                  }
                                });
                              }
                              //
                              $(".pag").click(function(){
                                $(".pag").attr('class','waves-effect pag');
                                $(this).attr('class','waves-effect pag active');
                                pagina = $(this).text();
                                ajax_Envios();
                              })
                              $("#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 %}