{% extends "base.html" %}
{% load static %}
{% block titulo %}
  .::Transferencias - Pagadas
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navTrans").attr('class','dropdown active');
  $("#navTransPagadas").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>TRANSFERENCIAS PAGADAS</strong></div>
        <div class="panel-body">
          <div class="row" >
           <div class="col-md-12">
            <h4 class="bg-success" align="center" id="ExitoMensaje">
            </h4>
            </div>
          </div>
          <div class="row">
          <div class="col-md-12">
               <div class="col-md-2 ">
                <a class="btn btn-success btn-block btn-sm" href="/CrearTransferencia_base_externo/" role="button" >Crear Transferencia</a>
              </div>
              <div class="col-md-1 ">
                <button type="button" class="btn btn-primary btn-sm" id="RefrescarLista"><span class="fa fa-refresh"></span> Actualizar</button>
              </div>
               
          </div>
          </div>
          <p></p>
          <div class="row">
            <div class="col-md-4">
              <input type="text" class="form-control" placeholder="Nombre o Apellidos (Beneficiado o Solicitante)" id="filtro">

            </div>
            <div class="col-md-1" >
              <button type="button" class="btn btn-danger btn-sm" id="buscar"><i class="fa fa-search" ></i> Buscar</button>
              <p></p>
            </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 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">Detalle de Transferencia</h4>
                          </div>
                          <div class="modal-body">
                            <div class="row">
                              <div class="col-md-6" >
                                  <div class="panel panel-info">
                                    <div class="panel-heading" align="center"> <strong>Datos Generales</strong></div>
                                    <div class="panel-body">
                                      <div class="row">
                                        <div class="col-md-5 " align="right">
                                          <label> Estado de Transferencia </label>
                                        </div>
                                        <div class="col-md-5">
                                          <input type="text" class="form-control" id="txtEstadoTrans" disabled="disabled">
                                          <p></p>
                                        </div>
                                      </div>
                                      <br>
                                      <div class="row">
                                        <div class="col-md-12">
                                          <p class="bg-success" align="center">
                                            <!--&nbsp;-->
                                            <b>SOLICITANTE</b>
                                          </p>
                                        </div>
                                      </div>
                                      <p></p>
                                      <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>DNI/RUC</label> 
                                          </div>
                                          <div class="col-md-5">
                                            <input type="text" class="form-control" id="txtDNI" disabled="disabled">         
                                          </div> 
                                      </div>
                                      <p></p>
                                      <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>Nombres y Apellidos</label> 
                                          </div>
                                          <div class="col-md-7">
                                            <input type="text" class="form-control" id="txtNombres_Soli" disabled="disabled">         
                                          </div> 
                                      </div>
                                      <p></p>
                                      <br>
                                      <div class="row">
                                        <div class="col-md-12">
                                          <p class="bg-success" align="center">
                                            <!--&nbsp;-->
                                            <b>BENEFICIADO</b>
                                          </p>
                                        </div>
                                      </div>
                                      <p></p>
                                      <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>Nombres y Apellidos</label> 
                                          </div>
                                          <div class="col-md-7">
                                            <input type="text" class="form-control" id="txtNombres_Bene" disabled="disabled">         
                                          </div> 
                                      </div>
                                      <p></p>
                                      <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>DNI</label> 
                                          </div>
                                          <div class="col-md-6">
                                            <input type="text" class="form-control" id="txtN" disabled>         
                                          </div> 
                                      </div>

                                    </div>
                                  </div>
                              </div>
                              <div class="col-md-6">
                                <div class="panel panel-success">
                                  <div class="panel-heading"><strong>Datos de Transferencia</strong></div>
                                  <div class="panel-body">
                                      <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>ID Transferencia</label> 
                                          </div>
                                          <div class="col-md-4">
                                            <input type="text" class="form-control" id="txtIDtrans" disabled="disabled">         
                                          </div> 
                                      </div>
                                      <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>Fecha de Pago</label> 
                                          </div>
                                          <div class="col-md-6">
                                            <input type="text" class="form-control" id="txtFecha" disabled="disabled">         
                                          </div> 
                                      </div>
                                      <p></p>
                                      <div class="row">
                                          <div class="col-md-5" align="right"> 
                                            <label>Personal Emisor</label> 
                                          </div>
                                          <div class="col-md-7">
                                            <input type="text" class="form-control" id="txtPersonalE" disabled="disabled">         
                                          </div> 
                                      </div>
                                       <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>Usuario Global</label> 
                                          </div>
                                          <div class="col-md-7">
                                            <input type="text" class="form-control" id="txtPerDig" disabled="disabled">         
                                          </div> 
                                      </div>
                                      <div class="row">
                                          <div class="col-md-5" align="right"> 
                                            <label>Oficina Origen</label> 
                                          </div>
                                          <div class="col-md-4">
                                            <input type="text" class="form-control" id="txtOficinaOri" disabled="disabled">         
                                          </div> 
                                      </div>
                                      <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>Cantidad</label> 
                                          </div>
                                          <div class="col-md-4">
                                            <input type="text" class="form-control" id="txtMonto" disabled="disabled">         
                                          </div> 
                                      </div>
                                      <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>Comisión</label> 
                                          </div>
                                          <div class="col-md-3">
                                            <input type="text" class="form-control" id="txtComicion" disabled="disabled">         
                                          </div> 
                                      </div>
                                      <p></p>
                                       <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>Egreso Extra</label> 
                                          </div>
                                          <div class="col-md-3">
                                            <input type="text" class="form-control" id="txtEgresoExtra" disabled="disabled">         
                                          </div> 
                                      </div>
                                      <p></p>
                                      <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>Observaciones</label> 
                                          </div>
                                          <div class="col-md-7">
                                            <!--
                                            <input type="text" class="form-control" id="txtObs" disabled="disabled">-->
                                            <textarea class="form-control" rows="2" id="txtObs" disabled="disabled" ></textarea >         
                                          </div> 
                                      </div>
                                      <p></p>
                                      <div class="row">
                                          <div class="col-md-4 col-md-offset-1" align="right"> 
                                            <label>Detalle Otros Conceptos</label> 
                                          </div>
                                          <div class="col-md-7">
                                            <!--
                                            <input type="text" class="form-control" id="txtObs" disabled="disabled">-->
                                            <textarea class="form-control" rows="2" id="txtotros_con" disabled="disabled" ></textarea >         
                                          </div> 
                                      </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                            <div class="modal-footer">
                              <div class="row">
                                <div class="col-md-2">
                                   <button type="button" class="btn btn-success btn-block btn-sm" data-dismiss="modal" id="rimprimir">Re-imprimir</button>
                                </div>
                                <div class="col-md-2 col-md-offset-8">
                                   <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Cerrar</button>
                                </div>
                              </div>
                            </div>

                        </div><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                  </div><!-- /.modal -->
                      <!--<input type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#myModal" value="Clientes">-->
                   <div id="modal1" 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  id="platillaI" style="font-family:'arial', Monaco, monospace;font-size:18px;"> 
                              <table>
                                
                                 <tr style="border: 1px solid #000">
                                  <td width="31%"></td>
                                  <td><h4>PAGO DE ST</h4></td>
                                  <td nowrap width="32%"></td>
                                </tr>
                              </table>
                              <table>  
                                <tr>
                                  <td nowrap style="text-align: left;"><h4 id="nror"></h4> </td>
                                  <td nowrap style="padding-left: 50px"><h4 id="idST"></h4> </td>
                                  <td nowrap style="padding-right:10px"></td>
                                </tr>
                                 <tr>
                                  <td nowrap>FECHA ENVÍO:  </td>
                                  <td nowrap style="padding-left: 20px"><span id="fechaCreacion"></span></td>
                                  <td nowrap></td>
                                </tr>
                              </table>
                              <p></p>
                               <table>
                                <tr>
                                  <td nowrap>FECHA PAGO: </td>
                                  <td style="padding-left: 20px"> <span id="fepa"><span></td>
                                  <td nowrap></td>
                                </tr>
                              </table>

                               <table>
                                 <tr>
                                  <td nowrap><h3><b>MONTO:</b></h3></td>
                                  <td nowrap></td>
                                  <td nowrap><h3><b id="plM"></b></h3></td>
                                </tr>
                                <tr>
                                  <td nowrap>EGRESO EXTRA:</td>
                                  <td nowrap style="padding-left: 20px"></td>
                                  <td nowrap><h4 id="plM_e"></h4></td>
                                </tr>
                              </table>

                              <table>
                                <tr>
                                  <td nowrap>PROCEDENCIA:</td>
                                  <td style="padding-left: 20px"> <h4 id="plOri"><h4></td>
                                  <td nowrap></td>
                                </tr>
                              </table>

                              <table>
                                 <tr>
                                  <td nowrap style="padding-bottom: 18px;">REMITENTE:</td>
                                  <td nowrap style="padding-left: 15px;white-space: pre;"><span id="plR"></span></td>
                                  <td nowrap></td>
                                </tr>
                                 <tr>
                                  <td nowrap style="padding-bottom: 18px;">BENEFICIADO:</td>
                                  <td nowrap style="padding-left: 15px;white-space: pre;"><span id="plB"></span></td>
                                  <td nowrap></td>
                                </tr>
                              </table>

                              <table>
                                <tr>
                                  <td nowrap>OBSERVACIONES:</td>
                                  <td style="padding-left: 20px" id="plObs"></td>
                                  <td nowrap></td>
                                </tr> 
                              </table>
                              <br></br>
                               <table>
                                
                                <tr>
                                  <td nowrap>____________________</td>
                                  <td style="padding-left: 20px"></td>
                                  <td nowrap></td>
                                </tr>
                                <tr>
                                   <td nowrap>OP. {{ nombre_usuario }}</td>
                                  <td style="padding-left: 20px"></td> 
                                  <td nowrap><div style="margin-top:-40px;width:75px;height:85px;border:1px solid #000;"> </div></td>
                                </tr>
                                <p></p>
                                <p></p>
                                <tr>
                                  <td nowrap>____________________</td>
                                  <td style="padding-left: 20px"></td>
                                  <td nowrap></td>
                                </tr>
                                <tr>
                                   <td nowrap><b id="idn"></b></td>
                                  <td style="padding-left: 20px"></td>
                                  <td nowrap></td>
                                </tr>
                               
                              </table>
                                 
                            </div>
                          </div>

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

                        </div><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                  </div><!-- /.modal -->
                  <script type="text/JavaScript">
                      var Aux="";
                      var filaI =0;
                      var pagina=1;

                      $(document).ready(function(){
                        /*$(document).on("click",".detalles",function(){
                            var cod = $(this).attr('id');
                            showDetalles(cod);
                        });*/
                        ajax_Transferencias();
                        $("#RefrescarLista").click(function(){
                          ajax_Transferencias();
                        });

                        $("#rimprimir").click(function(){
                            $('#platillaI').printThis();
                        });
                        
                        $(document).on("click",".filaTrans",function(){
                          var num = $(this).attr('id');
                          filaI = num;
                          var fila= $(this).attr('class');
                          //$("."+fila).attr('class','filaTrans');
                          //$("#"+num).attr('class','filaTrans info');
                          //insertar datos en modal
                          //$('#extornarT').prop('disabled',false);
                          //$('#ForzarpagoT').prop('disabled',false);
                          //$('#extornarT').show();
                          //$('#ForzarpagoT').show();
                          //--------------
                          $('#txtEstadoTrans').prop("value",Aux[filaI].estado);
                          $('#txtDNI').prop("value",Aux[filaI].dni_rmt);
                          $('#txtNombres_Soli').prop("value",Aux[filaI].nombre_rmt+" "+Aux[filaI].paterno_rmt +" "+ Aux[filaI].materno_rmt);
                          $('#txtNombres_Bene').prop("value",Aux[filaI].nombre_bnf +" "+ Aux[filaI].paterno_bnf +" "+ Aux[filaI].materno_bnf);
                          $("#txtN").prop('value',Aux[filaI].dni_bnf);
                          $('#txtIDtrans').prop("value",Aux[filaI].id_trans);
                          $('#txtFecha').prop("value",Aux[filaI].fecha);
                          $('#txtPersonalE').prop("value",Aux[filaI].enviador);
                          $('#txtOficinaOri').prop("value",Aux[filaI].oficina_ori);
                          $('#txtMonto').prop("value",Aux[filaI].monto);
                          $('#txtComicion').prop("value",Aux[filaI].comicion);
                          $('#txtEgresoExtra').prop("value",Aux[filaI].egreso_extra);
                          $('#txtObs').prop("value",Aux[filaI].obs);
                          $('#txtotros_con').prop("value",Aux[filaI].otros_conceptos);
                          $('#txtEgresoExtra').prop("value",Aux[filaI].egreso_extra);
                          /*if(Aux[filaI].estado !="activo"){
                            //$('#extornarT').prop('disabled',true);
                            //$('#ForzarpagoT').prop('disabled',true);
                            $('#pagoT').hide();
                          }*/
                          $("#plB").text(Aux[filaI].nombre_bnf +"\n"+ Aux[filaI].paterno_bnf +" "+ Aux[filaI].materno_bnf);
                          $("#plR").text(Aux[filaI].nombre_rmt+"\n"+Aux[filaI].paterno_rmt +" "+ Aux[filaI].materno_rmt);
                          $("#plObs").text(Aux[filaI].obs);
                          $("#idn").text("DNI:"+"\n"+Aux[filaI].dni_bnf);
                          $("#nror").text("NRO: "+Aux[filaI].nroRecibo);
                          $("#idST").text("ST: "+Aux[filaI].id_trans);
                          $("#fepa").text(Aux[filaI].fecha);
                          $("#fechaCreacion").text(Aux[filaI].fechaC);
                          var mr="";
                          if(Aux[filaI].moneda=="soles")
                            {
                              mr="S/. ";
                            }
                          else
                            {
                              mr="$/. ";
                          }
                          $("#plM").text(mr +String(Aux[filaI].monto));
                          $("#plOri").text(Aux[filaI].oficina_ori);
                          $("#plM_e").text(Aux[filaI].egreso_extra);
                        });
                        //otra funcion
                        function ocultarmodal(){
                          $('#myModal').modal('hide')
                        };
                        //otra funcion
                        function ajax_Transferencias(){
                          $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
                          $.ajax({
                            data:{'pg':pagina},
                            url:'/listaTransfereciasPagadas_ajax/',
                            //async:false,
                            type:'GET',
                            dataType:'json',
                            success: function(data){
                              Aux = data;
                              var html ="";
                              for(var i=0;i<data.length;i++){
                                var estado ="";
                                if(data[i].estado =="extornado"){
                                  estado="danger";
                                }
                                if(data[i].estado=="pagado"){
                                  estado = "success";
                                }
                                html += '<tr data-toggle="modal" data-target="#myModal" class="filaTrans '+estado+'" id="'+i+'"><td>'+data[i].nombre_bnf+' '+data[i].paterno_bnf+' '+data[i].materno_bnf+'</td><td><b>'+data[i].monto+'</b></td><td>'+data[i].nombre_rmt+' '+data[i].paterno_rmt+' '+data[i].materno_rmt+'</td><td>'+data[i].fecha+'</td><td style="color:#2e6da4;font-size:16px;font-weight:bold;">'+data[i].oficina_ori+'</td><td style="color:#d43f3a;font-size:16px;font-weight:bold;">'+data[i].oficina_des+'</td><td>'+data[i].pagador+'</td><td>'+data[i].nroRecibo+'</td><td><b>'+data[i].comicion+'</b></td><td><b>'+data[i].monto_conceptos+'</b></td><td>'+data[i].moneda+'</td><td>'+data[i].obs+'</td><td>'+data[i].otros_conceptos+'</td><td>'+data[i].estado+'</td></tr>';
                              }
                              $('#listaTransf').html(html);
                              $('.table-responsive').waitMe('hide');
                            }
                          });
                        };

                          $("#buscar").click(function(){
                          $('#listaTransf').html('');
                          pagina=1;
                          PonerInicioPag();
                          ajax_TransferenciasTotal_filtro();
                        });

                        //
                        function ajax_TransferenciasTotal_filtro(){
                          $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
                          $.ajax({
                            data:{'pg':pagina,'filtro':$("#filtro").val()},
                            url:'/listaTransferenciasPagadasTotal_filtro_ajax/',
                            //async:false,
                            type:'GET',
                            dataType:'json',
                            success: function(data){
                              Aux = data;
                              var html ="";
                              for(var i=0;i<data.length;i++){
                                var estado ="";
                                if(data[i].estado =="extornado"){
                                  estado="danger";
                                }
                                if(data[i].estado=="pagado"){
                                  estado = "success";
                                }
                                html += '<tr data-toggle="modal" data-target="#myModal" class="filaTrans '+estado+'" id="'+i+'"><td>'+data[i].nombre_bnf+' '+data[i].paterno_bnf+' '+data[i].materno_bnf+'</td><td><b>'+data[i].monto+'</b></td><td>'+data[i].nombre_rmt+' '+data[i].paterno_rmt+' '+data[i].materno_rmt+'</td><td>'+data[i].fecha+'</td><td style="color:#2e6da4;font-size:16px;font-weight:bold;">'+data[i].oficina_ori+'</td><td style="color:#d43f3a;font-size:16px;font-weight:bold;">'+data[i].oficina_des+'</td><td>'+data[i].pagador+'</td><td style="color:#2e6da4;font-size:16px;font-weight:bold;">'+data[i].oficina_ori+'</td><td>'+data[i].nroRecibo+'</td><td><b>'+data[i].comicion+'</b></td><td><b>'+data[i].monto_conceptos+'</b></td><td>'+data[i].moneda+'</td><td>'+data[i].obs+'</td><td>'+data[i].otros_conceptos+'</td><td>'+data[i].estado+'</td></tr>';
                              }
                              $('#listaTransf').html(html);
                              $('.table-responsive').waitMe('hide');
                            }
                          });
                        };
                        
                       
                        function PonerInicioPag(){
                            $(".pag").attr('class','pag');
                            $("#pag1").attr('class','active pag');
                            $("#pg1").text(1);
                        };
                        //
                        $(".pag").click(function(){
                          $(".pag").attr('class','pag');
                          $(this).attr('class','active pag');
                          pagina = $(this).text();
                          ajax_Transferencias();
                        })
                        $("#ant").click(function(){
                          var pag = $("#pg1").text();
                          pag= parseInt(pag);
                          if(pag>1){
                            $("#pg1").text(pag-1);
                            pagina = pag-1;
                            ajax_Transferencias();
                          }
                        });
                        $("#pos").click(function(){
                          var pag = $("#pg1").text();
                          pag= parseInt(pag);
                          $("#pg1").text(pag+1);
                          pagina = pag+1;
                          ajax_Transferencias();
                        });

                      });
                  </script>
                  <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                        <thead>
                          <tr >
                            <th>Beneficiado</th>
                            <th>Monto</th>
                            <th>Remitente</th>
                            <th>Fecha Pago</th>
                            <th>Origen</th>
                            <th>Destino</th>
                            <th>Pagador</th>
                            <th>P/T</th>
                            <th>Comision</th>
                            <th>Otros</th>
                            <th>Moneda</th>
                            <th>Obs.</th>
                            <th>Detalle</th>
                            <th>Estado</th>
                          </tr>
                        </thead>
                        <tbody id="listaTransf">
                        </tbody>
                    </table>
                  </div>
              </div>
          </div>
          <div class="row">
            <div class="col-md-10 col-md-offset-1" 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 >
                    <a href="#" id="pos" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <br>
        </div>
      </div>
  </div>
</div>
{% endblock content1 %}