{% extends "baseAdmin.html" %}
{% block titulo %}
  .::Cuentas Ahorros - Autorizaciones
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
        $("#navCuentas").attr('class','dropdown active');
        $("#navACtaAhorros").attr('class','active');
      </script>
      <form action="">
         
        <div class="row">
          <div class="col-md-12" >
              <div class="card">
                <div class="card-head card-head-xs style-default"> <strong>LISTADO PETICIONES DE AUTORIZACIONES CUENTAS AHORROS</strong></div>
                <div class="card-body">
                  <div class="row" >
                    <h4 class="bg-success" align="center" id="ExitoMensaje">
                    </h4>
                  </div>
                  
                  <HR width=100% >
                  <div class="row">
                    <div class="col-md-1 col-md-offset-4">
                      <h5>Buscar por:</h5>
                    </div>
                   
                    <div class=" col-md-2" id="div2">
                      <div class="fg-line">
                      <input type="text" class="form-control" id="txtfiltro" placeholder="Nro Cta Ahorros">
                      </div>
                      <p></p>
                    </div>
                    <div class="col-md-2" id="div3">
                      <button type="button" class="btn btn-success btn-block" id="btnfiltrar"><i class="fa fa-search"></i> Buscar</button><p></p>
                    </div>
                   
                  </div>
                    <HR width=100% >
                    <div class="table-responsive">
                      <table class="table table-hover table-bordered">
                          <thead>
                            <tr >
                              <th>Nro</th>
                              <th>Usuario</th>
                              <th>Oficina</th>
                              <th>Nombre cliente</th>
                              <th>A. Paterno</th>
                              <th>A. Materno</th>
                              <th>Nro Cta</th>
                              <th>Fecha y hora</th>
                              <th>Estado</th>
                              <th>Monto</th>
                              <th>Saldo</th> 
                             
                               
                            </tr>
                          </thead>
                          <tbody id="listaCtaAhorros">
                            
                          </tbody>
                      </table>
                    </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 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>
                  </div>
                </div>
                  <div class="row">
                    <br>
                     
                      <div class="col-md-10 col-md-offset-1">
                          <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-default" id="grupoDetalleCtaCte">
                                            <div class="panel-heading" align="center"> <h4>Detalles Peticion de Autorizacion de la Cuenta Ahorros</h4></div>
                                            <div class="panel-body">
                                               
                                              <div class="row">
                                                <div class="col-md-12">
                                                  <h4 class="bg-success" align="center" id="txtTituloPersonales">
                                                    <!--&nbsp;-->
                                                    Datos del Personal
                                                  </h4>
                                                </div>
                                              </div>
                                              <p></p> 
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Usuario</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtUsuario" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                               <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Oficina</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtOficina" disabled="disabled">         
                                                  </div> 
                                              </div>
                                               <p></p>
                                               <div class="row">
                                                <div class="col-md-12">
                                                  <h4 class="bg-success" align="center" id="txtTituloPersonales">
                                                    <!--&nbsp;-->
                                                    Datos de la Cuenta Ahorros
                                                  </h4>
                                                </div>
                                              </div>
                                              <p></p>
                                              <input type="hidden" id="idpeticion">
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Nro Cta</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtIdCtaAhorros" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Saldo</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtSaldoCtaAhorros" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                               <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Monto</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtMontoCtaAhorros" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                               <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Tipo de Moneda</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtMonedaCtaAhorros" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                               <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Fecha y Hora</h5> 
                                                  </div>
                                                  <div class="col-md-5">
                                                    <input type="text" class="form-control" id="txtFechaHoraCtaAhorros" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                              <div class="row">
                                                  <div class="col-md-4 col-md-offset-1" align="right"> 
                                                    <h5>Estado</h5> 
                                                  </div>
                                                  <div class="col-md-4">
                                                    <input type="text" class="form-control" id="txtEstadoCtaAhorros" disabled="disabled">         
                                                  </div> 
                                              </div>
                                              <p></p>
                                
                                              <div class="row">                                        
                                                <div class="col-md-4">
                                                  <button type="button" class="btn btn-warning" id="btnAutorizar">Autorizar</button>
                                                </div>
                                              </div>
                                              <br>
                                            </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="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:'Lucida Console', Monaco, monospace;font-size:13px;">
                                      <h3><u> Recibo Ingreso</u></h3>
                                      <h4 id="oficinaRecibo"></h4>
                                      <h4 id="fechaRecibo"></h4>
                                      <h4 id="horaRecibo"></h4>
                                      <br>
                                       <b>RECIBÍ DE:</b>
                                      <br>
                                      <p id="recibi"></p>
                                      <br>
                                      <br>
                                      <b>IMPORTE:</b>
                                      <p id="importe"></p>
                                      <br>
                                      <b>CONCEPTO:</b>
                                      <br>
                                      <p id="concepto">Abono/Deposito en Cuenta Ahorros</p>
                                      <br>
                                      <br>
                                      <p>________________</p>
                                      <b>OP. <span id="operador"></span></b>
                                      <br>
                                      <br>
                                      <p>________________</p>
                                      <b>DNI <span id="dni"></span></b>
                                      <br>
                                      <p id ="hopa"></p>
                                    </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 -->
 
                         
                      </div>
                    </p>
                  </div>
                  <br>
                   
                  <br>
                </div>
          </div>
      </form>  
     <script type="text/JavaScript">
        var pagina=1;
        var Aux="";
        var filaI =0; 
        var dialog="";

        $(document).ready(readybtn); 
        function readybtn(){ 
             ajax_PeticionesCtaAhorros(); 
        }

        $(".pag").click(function(){
            $(".pag").attr('class','pag');
            $(this).attr('class','active pag');
            pagina = $(this).text();
            ajax_CtaCte();
        })
        $(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');
        });
        function ajax_PeticionesCtaAhorros(){

            $.ajax({
                data:{'pg':pagina},
                url:'/ListadoAutorizarCtaAhorros_ajax/',
                type:'GET',
                dataType:'json',
                success: function(data){
                  Aux = data;
                  var html =""; 
                  var sim="";
                  for(var i=0;i<data.length;i++){
                     var estado ="";
                      if(data[i].estado.trim() =="CONFIRMADO"){
                            estado="success";
                            
                      }
                      if(data[i].estado.trim() =="RETIRADO"){
                            estado = "danger";
                            
                      }
                       if(data[i].estado.trim() =="ESPERANDO"){
                            estado = "warning";
                             
                      }
                      
                      if(data[i].moneda=="soles"){
                          sim="S/."
                      } else{
                          sim="$/."
                      }

                   html += '<tr data-toggle="modal" data-target="#myModal" class="filaCtaAhorros '+estado+'" id="'+i+'"><th scope="row">'+data[i].id+'</th><td>'+data[i].usuario+'</td><td>'+data[i].oficina+'</td><td>'+data[i].nombre+'</td><td>'+data[i].ap+'</td><td>'+data[i].am+'</td><td>'+data[i].idCta+'</td><td>'+data[i].fechaHora+'</td><td><h4><span class="label label-'+estado+'">'+data[i].estado+'</span></h4></td><td><h4><span class="label label-'+estado+'">'+sim+" "+data[i].monto+'</span></h4></td><td><h4><span class="label label-'+estado+'">'+sim+" "+data[i].saldo+'</span></h4></td></tr>';
                  }
                                       
                  $('#listaCtaAhorros').html(html);   
                },
                error: function(xhr, textStatus, errorThrown) {

                        console.log(xhr.responseText);
                },
          });
        }

     
        $(document).on("click","#btnfiltrar",function(){
           if($("#txtfiltro").val()!="")
           {
              ajax_CtaAhorrosFiltro($("#txtfiltro").val());
           }

          });


        function ajax_CtaAhorrosFiltro(parametro){
              $.ajax({
                      data:{'idctaahorros':parametro},
                      url:'/ListaPeticionesCtaAhorrosFiltro/',
                      type:'GET',
                      dataType:'json',
                      success: function(data){
                        console.log(data);
                        Aux = data;
                        var html =""; 
                        var sim="";
                        for(var i=0;i<data.length;i++){
                           var estado ="";
                            if(data[i].estado.trim() =="CONFIRMADO"){
                                  estado="success";
                                  
                            }
                            if(data[i].estado.trim() =="RETIRADO"){
                                  estado = "danger";
                                  
                            }
                             if(data[i].estado.trim() =="ESPERANDO"){
                                  estado = "warning";
                                   
                            }
                            
                            if(data[i].moneda=="soles"){
                                sim="S/."
                            } else{
                                sim="$/."
                            }

                         html += '<tr data-toggle="modal" data-target="#myModal" class="filaCtaCte '+estado+'" id="'+i+'"><th scope="row">'+data[i].id+'</th><td>'+data[i].usuario+'</td><td>'+data[i].oficina+'</td><td>'+data[i].nombre+'</td><td>'+data[i].ap+'</td><td>'+data[i].am+'</td><td>'+data[i].idCta+'</td><td>'+data[i].fechaHora+'</td><td><h4><span class="label label-'+estado+'">'+data[i].estado+'</span></h4></td><td><h4><span class="label label-'+estado+'">'+sim+" "+data[i].monto+'</span></h4></td><td><h4><span class="label label-'+estado+'">'+sim+" "+data[i].saldo+'</span></h4></td></tr>';
                        }
                                             
                        $('#listaCtaAhorros').html(html); 
                       
                      },
                      error: function(xhr, textStatus, errorThrown) { 
                        console.log(xhr.responseText);
                      },
                  });
        }



        $(document).on("click","#btnAutorizar",function(){
            
            bootbox.confirm({
                message: "¿Autorizar retiro de dinero?",
                className: 'bb-alternate-modal',
                buttons: {
                    confirm: {
                        label: '<i class="fa fa-check"></i> Aceptar',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: '<i class="fa fa-times"></i> Cancelar',
                        className: 'btn-danger'
                    }
                },
                callback: function (result) {
                     if(result) {
                        dialog=bootbox.dialog({
                            message: '<p><i class="fa fa-spin fa-spinner"></i> Realizando Operación...</p>'
                        });

                         $.ajax({
                            data:{'id':$("#idpeticion").val(),'estado':"CONFIRMADO"},
                            url:'/Admin/ActualizarEstadoPeticionCtaAhorros_ajax/',
                            type:'GET',
                            dataType:'json',
                            success: function(data){
                              console.log(data);
                             if(data.resultado=='exito') {

                                 bootbox.alert({ 
                                    message: "Autorización realizada",
                                    className: 'bb-alternate-modal'
                                  });
                                  dialog.modal('hide');
 
                               window.location="/ListadoAutorizarCtaAhorros_view";
                             }
                             else{
                                 bootbox.alert({ 
                                  message: "Actualice la tabla",
                                  className: 'bb-alternate-modal'
                                });
                                dialog.modal('hide');
                             }
                            },
                            error: function(xhr, textStatus, errorThrown) { 
                              //$("#APCtaCte").click();
                              console.log(xhr.responseText);
                            },
                        });
                        
                    }
                     
                }
            });
 
           
        });

        $(document).on("click",".filaCtaAhorros",function(){
            var num = $(this).attr('id');
            filaI = num;
            var fila= $(this).attr('class');
            if(Aux[filaI].estado.trim() =="CONFIRMADO"){
               $("#btnAutorizar").hide();         
            }else{
              if(Aux[filaI].estado.trim() =="RETIRADO"){
                $("#btnAutorizar").hide(); 
              }else{
                $("#btnAutorizar").show(); 
              }
            }
            //insertar datos en modal
            $("#idpeticion").val(Aux[filaI].id);
            $("#txtUsuario").val(Aux[filaI].usuario);
            $("#txtOficina").val(Aux[filaI].oficina);
            $("#txtIdCtaAhorros").val(Aux[filaI].idCta);
            $("#txtSaldoCtaAhorros").val(Aux[filaI].saldo);
            $("#txtMontoCtaAhorros").val(Aux[filaI].monto);
            $("#txtMonedaCtaAhorros").val(Aux[filaI].moneda);
            $("#txtFechaHoraCtaAhorros").val(Aux[filaI].fechaHora);
            $("#txtEstadoCtaAhorros").val(Aux[filaI].estado);

        });
 
 
        
    </script>
{% endblock content1 %}