{% extends "baseAdmin.html" %}
{% block titulo %}
  .::Transferencias - Creadas (Administrador)
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navTrans").attr('class','dropdown active');
        $("#navTransCreadas").attr('class','active');
      </script>
      <form action="">
        <div class="row"><br><br><br><br></div>
        <div class="row">
          <div class="col-md-10 col-md-offset-1 col-sm-12" >
              <div class="panel panel-primary">
                <div class="panel-heading" align="center"> <h5>Transferencias</h5></div>
                <div class="panel-body">
                  <div class="row">
                      <div class="col-md-2 col-md-offset-1 col-xs-4 col-xs-offset-1">
                        <a class="btn btn-default btn-block" href="#" role="button" >Nuevo</a>
                      </div>
                      <div class="col-md-2 col-xs-4">
                        <button type="button" class="btn btn-default btn-block" id="RefrescarLista">Refrescar</button>
                      </div>
                  </div>
                  <br>
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                      <h5>Buscar por:</h5>
                    </div>
                    <div class="col-md-2">
                      <select class="form-control" id="comboFiltro">
                        <option value="benef">Beneficiario</option>
                        <option value="solicit">Solicitante</option>
                        <!--<option value="fecha">Fecha</option>-->
                      </select>
                      <p></p>
                    </div>
                    <div class="col-md-2" id="div1">
                      <select class="form-control" id="combofiltro2">
                        <option value="nombre">Nombre</option>
                        <option value="apellido">Apellido</option>
                        <option value="dni" id="fd">DNI</option>
                        <option value="ruc" id="fr">RUC</option>
                      </select>
                      <p></p>
                    </div>
                    <div class=" col-md-2" id="div2">
                      <input type="text" class="form-control" id="txtfiltro" placeholder="busqueda">
                      <p></p>
                    </div>
                    <div class="col-md-2" id="div3">
                      <button type="button" class="btn btn-default btn-block" id="btnfiltrar">Buscar</button><p></p>
                    </div>
                    <div class="" id="div4">
                    </div>
                    <div class="" id="div5">
                    </div>
                  </div>
                  <div class="row">
                    <br>
                    <p class="bg-success">
                      &nbsp;
                      <div class="col-md-10 col-md-offset-1">
                          <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"><p class="bg-warning">Extornar</p></h4>
                                  </div>
                                  <div class="modal-body">
                                    <p>
                                      ¿esta seguro que dese extornar?
                                    </p>
                                  </div>
                                  <div class="modal-footer">
                                    <hr>
                                    <button type="button" class="btn btn-primary"data-dismiss="modal">Si</button>
                                    <button type="button" class="btn btn-default"data-dismiss="modal" data-toggle="modal" data-target="#myModal" >No</button>
                                  </div>
                                </div><!-- /.modal-content -->
                              </div><!-- /.modal-dialog -->
                          </div><!-- /.modal -->
                           <div id="myModal2" 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"><p class="bg-warning">Forzar Pago</p></h4>
                                  </div>
                                  <div class="modal-body">
                                    <p>
                                      ¿esta seguro que desea retornar esta transferenca?
                                    </p>
                                  </div>
                                  <div class="modal-footer">
                                    <hr>
                                    <button type="button" class="btn btn-primary"data-dismiss="modal">Si</button>
                                    <button type="button" class="btn btn-default"data-toggle="modal" data-target="#myModal" data-dismiss="modal">No</button>
                                  </div>

                                </div><!-- /.modal-content -->
                              </div><!-- /.modal-dialog -->
                          </div><!-- /.modal -->
                          <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"> <h5>Detalle de Transferencia</h5></div>
                                            <div class="panel-body">
                                              <div class="row">
                                                <div class="col-md-5 " align="right">
                                                  <h5> Estado de Transferencia </h5>
                                                </div>
                                                <div class="col-md-3">
                                                  <input type="text" class="form-control" id="txtEstadoTrans" disabled="disabled">
                                                  <p></p>
                                                </div>
                                                <div class="col-md-2">
                                                  <button type="button" class="btn btn-default"data-toggle="modal" data-target="#myModal1" data-dismiss="modal" id="extornarT">Extornar</button>
                                                </div>
                                              </div>
                                              <br>
                                              <div class="row">
                                                <div class="col-md-12">
                                                  <p class="bg-success" align="center">
                                                    <!--&nbsp;-->
                                                    Solicitante
                                                  </p>
                                                </div>
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>DNI/RUC</h5> 
                                                  </div>
                                                  <div class="col-md-3">
                                                    <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"> 
                                                    <h5>Nombres y Apellidos</h5> 
                                                  </div>
                                                  <div class="col-md-6">
                                                    <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;-->
                                                    Beneficiario
                                                  </p>
                                                </div>
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Nombres y Apellidos</h5> 
                                                  </div>
                                                  <div class="col-md-6">
                                                    <input type="text" class="form-control" id="txtNombres_Bene" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <br>
                                              <div class="row">
                                                <div class="col-md-12">
                                                  <p class="bg-success" align="center">
                                                    <!--&nbsp;-->
                                                    Datos de Transferencia
                                                  </p>
                                                </div>
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>ID Transferencia</h5> 
                                                  </div>
                                                  <div class="col-md-3">
                                                    <input type="text" class="form-control" id="txtIDtrans" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Fecha</h5> 
                                                  </div>
                                                  <div class="col-md-3">
                                                    <input type="text" class="form-control" id="txtFecha" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Personal Emisor</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtPersonalE" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Oficina Destino</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtOficinaDest" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Cantidad</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtMonto" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Comicion</h5> 
                                                  </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"> 
                                                    <h5>Observaciones</h5> 
                                                  </div>
                                                  <div class="col-md-6">
                                                    <input type="text" class="form-control" id="txtObs" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <br>
                                              <div class="row">
                                                <div class="col-md-4 col-md-offset-4">
                                                  <button type="button" class="btn btn-default"data-toggle="modal" data-target="#myModal2" data-dismiss="modal" id="pagarT">Forzar Pago</button>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                      </div>
                                    </p>
                                  </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 -->
                              <!--<input type="button" class="btn btn-default btn-block" data-toggle="modal" data-target="#myModal" value="Clientes">-->
                          <script type="text/JavaScript">
                              var Aux="";
                              var filaI =0;

                              $(document).ready(function(){
                                /*$(document).on("click",".detalles",function(){
                                    var cod = $(this).attr('id');
                                    showDetalles(cod);
                                });*/
                                ajax_Transferencias();
                                $("#RefrescarLista").click(function(){
                                  ajax_Transferencias();
                                  $('#fr').attr('disabled','disabled');
                                  $('#fd').prop('disabled',true);
                                });
                                $("#comboFiltro2").focus(function(){
                                  if($("#comboFiltro").val()=="benef"){
                                    $("#fr").prop('disabled',true);
                                    $("#fd").prop('disabled',true);
                                  }
                                });
                                 $("#comboFiltro").focus(function(){
                                    $("#fr").prop('disabled',false);
                                    $("#fd").prop('disabled',false);
                                  
                                });
                                 $("#btnfiltrar").click(function(){
                                    ajax_TransferenciasFiltro();
                                 })
                                /*
                                $("#comboFiltro").focusout(function(){
                                  activarfiltro();
                                });
                                $("#comboFiltro").change(function(){
                                  activarfiltro();
                                });
                                $("#comboFiltro").focus(function(){
                                  activarfiltro();
                                });*/
                                function activarfiltro(){
                                  /*if($("#comboFiltro").val()=="benef"){
                                    html= '<select class="form-control" id="combofiltro2"><option value="nombre">Nombre</option><option value="apellido">Apellido</option></select><p></p>';
                                    $("#div1").attr('class','col-md-2');
                                    $("#div1").html(html);
                                    $("#div2").attr('class','col-md-2');
                                    $("#div2").html('<input type="text" class="form-control" id="txtfiltro" placeholder="busqueda"><p></p>');
                                    $("#div3").attr('class','col-md-2');
                                    $("#div3").html('<button type="button" class="btn btn-default btn-block" id="btnfiltrar">Buscar</button><p></p>');
                                  }
                                  if($("#comboFiltro").val()=="solicit"){
                                    html= '<select class="form-control" id="combofiltro2"><option value="dni">DNI</option><option value="ruc">RUC</option><option value="nombre">Nombre</option><option value="apellido">Apellido</option></select><p></p>';
                                    $("#div1").attr('class','col-md-2');
                                    $("#div1").html(html);
                                    $("#div2").attr('class','col-md-2');
                                    $("#div2").html('<input type="text" class="form-control" id="txtfiltro" placeholder="busqueda"><p></p>');
                                    $("#div3").attr('class','col-md-2');
                                    $("#div3").html('<button type="button" class="btn btn-default btn-block" id="btnfiltrar">Buscar</button><p></p>');
                                  }
                                  if($("#comboFiltro").val()=="fecha"){
                                    $("#div1").attr('class','');
                                    $("#div1").html('');
                                    $("#div2").attr('class','');
                                    $("#div2").html('');
                                    $("#div3").attr('class','');
                                    $("#div3").html('');
                                  }*/
                                }
                                $(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);
                                  $('#pagarT').prop('disabled',false);
                                  $('#txtEstadoTrans').attr("value",Aux[filaI].Estado);
                                  $('#txtDNI').attr("value",Aux[filaI].dniCliente);
                                  $('#txtNombres_Soli').attr("value",Aux[filaI].NombreCliente+" "+Aux[filaI].A_parenoCliente +" "+ Aux[filaI].A_marenoCliente);
                                  $('#txtNombres_Bene').attr("value",Aux[filaI].NombreBenef +" "+ Aux[filaI].A_paternoBenef +" "* Aux[filaI].A_maternoBenef);
                                  $('#txtIDtrans').attr("value",Aux[filaI].IdSolicitudTrans);
                                  $('#txtFecha').attr("value",Aux[filaI].fecha);
                                  $('#txtPersonalE').attr("value",Aux[filaI].IdUserPersonal);
                                  $('#txtOficinaDest').attr("value",Aux[filaI].oficina);
                                  $('#txtMonto').attr("value",Aux[filaI].cantidad);
                                  $('#txtComicion').attr("value",Aux[filaI].comicion);
                                  $('#txtObs').attr("value",Aux[filaI].observaciones);
                                  if(Aux[filaI].Estado !="activo"){
                                    $('#extornarT').prop('disabled',true);
                                    $('#pagarT').prop('disabled',true);
                                  }
                                });
                                function ajax_Transferencias(){
                                  $.ajax({
                                    url:'/Admin/listaTransfereciasTotal_ajax/',
                                    //async:false,
                                    type:'GET',
                                    dataType:'json',
                                    success: function(data){
                                      Aux = data;
                                      var html ="";
                                      //$('#listaCli').html(html);
                                      //html='<table class="table table-hover"><thead><tr><th>Nro</th><th>Tipo P</th><th>DNI</th><th>RUC</th><th>Nombres</th><th>A Paterno</th><th>A Materno</th><th>Telefono</th><th>Celular</th><th>Direccion</th><th>Cumpleaños</th><th>Ciudad Natal</th><th>Email</th><th>DREM</th></tr></thead><tbody id="listaClie">';
                                      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+'"><th scope="row">'+(i+1)+'</th><td>'+data[i].IdSolicitudTrans+'</td><td>'+data[i].NombreBenef+' '+data[i].A_paternoBenef+' '+data[i].A_maternoBenef+'</td><td>'+data[i].cantidad+'</td><td>'+data[i].NombreCliente+' '+data[i].A_parenoCliente+' '+data[i].A_marenoCliente+'</td><td>'+data[i].fecha+'</td><td>'+data[i].pagador+'</td><td>'+data[i].NroSolicitudT+'</td><td>'+data[i].comicion+'</td><td>'+data[i].observaciones+'</td></tr>';
                                      }
                                      //html+='</tbody></table>';
                                      $('#listaTransf').html(html);
                                    }
                                  });
                                };

                                function ajax_TransferenciasFiltro(){
                                  $.ajax({
                                    data:{'filtro1':$('#comboFiltro').val(),'filtro2':$('#combofiltro2').val(),'valor':$('#txtfiltro').val()},
                                    url:'/Admin/listaTransfereciasFiltro_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+'"><th scope="row">'+(i+1)+'</th><td>'+data[i].IdSolicitudTrans+'</td><td>'+data[i].NombreBenef+' '+data[i].A_paternoBenef+' '+data[i].A_maternoBenef+'</td><td>'+data[i].cantidad+'</td><td>'+data[i].NombreCliente+' '+data[i].A_parenoCliente+' '+data[i].A_marenoCliente+'</td><td>'+data[i].fecha+'</td><td>'+data[i].pagador+'</td><td>'+data[i].NroSolicitudT+'</td><td>'+data[i].comicion+'</td><td>'+data[i].observaciones+'</td></tr>';
                                      }
                                      //html+='</tbody></table>';
                                      $('#listaTransf').html(html);
                                    }
                                  });
                                }
                               /*function showDetalles(cod){
                                $.ajax({
                                  data:{'id':cod},
                                  url:'/detalleTrans_ajax',
                                  async:false,
                                  type:'GET',
                                  dataType:'json',
                                  success: function(data){
                                      $('#txtEstadoTrans').attr("value",data[0].Estado);
                                      $('#txtDNI').attr("value",data[0].dniCliente);
                                      $('#txtNombres_Soli').attr("value",data[0].NombreCliente+" "+data[0].A_parenoCliente +" "+ data[0].A_marenoCliente);
                                      $('#txtNombres_Bene').attr("value",data[0].NombreBenef +" "+ data[0].A_paternoBenef +" "* data[0].A_maternoBenef);
                                      $('#txtIDtrans').attr("value",data[0].IdSolicitudTrans);
                                      $('#txtFecha').attr("value",data[0].fecha);
                                      $('#txtPersonalE').attr("value",data[0].IdUserPersonal);
                                      $('#txtOficinaDest').attr("value",data[0].oficina);
                                      $('#txtMonto').attr("value",data[0].cantidad);
                                      $('#txtComicion').attr("value",data[0].comicion);
                                      $('#txtObs').attr("value",data[0].observaciones);
                                  }
                                });
                               }*/

                              });
                          </script>
                          <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                  <tr >
                                    <th>#</th>
                                    <th>ID</th>
                                    <th>Beneficiado</th>
                                    <th>Monto</th>
                                    <th>Remitente</th>
                                    <th>Fecha</th>
                                    <th>Pagador</th>
                                    <th>S/T</th>
                                    <th>Comision</th>
                                    <th>Observaciones</th>
                                  </tr>
                                </thead>
                                <tbody id="listaTransf">
                                  {% for dato in transferencia %}
                                  <tr data-toggle="modal" data-target="#myModal" id="{{dato.IdSolicitudTrans}}" class="detalles">
                                    <th scope="row">1</th>
                                    <td>{{dato.IdSolicitudTrans}}</td>
                                    <td>{{dato.NombreBenef}}{{dato.A_paternoBenef}}{{dato.A_maternoBenef}}</td>
                                    <td>{{dato.cantidad}}</td>
                                    <td>{{dato.NombreCliente}}{{dato.A_parenoCliente}}{{dato.A_marenoCliente}}</td>
                                    <td>{{dato.fecha}}</td>
                                    <td>--</td>
                                    <td>{{dato.NroSolicitudT}}</td>
                                    <td>{{dato.comicion}}</td>
                                    <td>{{dato.observaciones}}</td>
                                  </tr>
                                  {% endfor %}
                                </tbody>
                            </table>
                          </div>
                      </div>
                    </p>
                  </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="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li><a href="#">5</a></li>
                          <li>
                            <a href="#" aria-label="Next">
                              <span aria-hidden="true">&raquo;</span>
                            </a>
                          </li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                  <!--<div class="row">
                    <div class="col-md-2 col-md-offset-8 col-xs-4 col-xs-offset-4">
                      <input class="btn btn-default btn-block" type="button" value="<<< Anterior" >
                    </div>
                     <div class="col-md-2  col-xs-4">
                      <input class="btn btn-default btn-block" type="button" value="Siguiente >>>" >
                    </div>
                  </div>-->
                  <br>
                </div>
              </div>
          </div>
        </div>
      </form>
    </div>
{% endblock content1 %}