{% extends "base.html" %}
{% load static %}
{% block titulo %}
  Cuentas Ahorro
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navCajaMaterial_dinero").attr('class','active');
  $("#navListaAhorro").attr('class','active');
</script>
<div class="row">
  <div class="col-md-12" >
      <div class="panel panel-default" >
        <div class="panel-heading panel-material"> <strong>Lista de cuentas Ahorro</strong></div>
        <div class="panel-body">
          <div class="row" id="Result">
            {% ifnotequal resultado '' %}
            {% ifequal resultado 'exito' %}
            <div class="alert alert-success" role="alert" align="center">
              <h4>OPERACION EXITOSA!!</h4>
            </div>
            {% else %}
            <div class="alert alert-danger" role="alert" align="center">
              <h4>FALLO OPERACION: {{resultado}}</h4>
            </div>
            {% endifequal %}
            {% endifnotequal %}
          </div>
          <div class="row">
            <div class="col-md-2">
              <button type="button" class="btn btn-warning btn-block btn-sm" id="btnRefrescar">Actualizar lista</button>
            </div>
          </div>
          <p></p>
          <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                  <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>Tipo Cuenta</th>
                          <th>Cliente</th>
                          <th>Fecha Apertura</th>
                          <th>Oficia Apertura</th>
                          <th>Plazo</th>
                          <th>Capital</th>
                          <th>Interes</th>
                          <th>Vence</th>
                          <th>Estado</th>
                        </tr>
                      </thead>
                      <tbody id="listaC">
                          
                      </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="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li class="active"><a href="#">1</a></li>
                  <li>
                    <a href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

<!-- modificar cuentas -->
<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" id="body_modal_ctas">
      <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 class="row">
          <div class="col-md-6" >
              <div class="panel panel-default">
                <div class="panel-heading"> <strong>Detalle de Cliente</strong></div>
                  <div class="panel-body">
                    <div class="row">
                      <div class="col-md-2">
                        <label id="dniRUC"> DNI/RUC </label>
                      </div>
                      <div class="col-md-6">
                         <input type="text" class="form-control" id="txtDNIcli" disabled="disabled" name="DniCli">
                      </div>
                    </div>
                    <br>
                    <div class="row">
                       <div class="col-md-12">
                          <label class="radio-inline">
                            <input type="radio"id="rbNatural" name="TipoPersona1" value="natural" disabled> Persona Natural
                          </label>
                          <label class="radio-inline">
                            <input type="radio"id="rbJuridica" name="TipoPersona1" value="natural" disabled> Persona Juridica
                          </label>
                          <p></p>
                      </div>
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-3"> 
                          <label id="nombreRazon">Nombres</label> 
                        </div>
                        <div class="col-md-9">
                          <input type="text" class="form-control" id="txtNombre" name="NombreCli">  
                        </div> 
                    </div>
                    <p></p>
                    <div class="row" id="campoAp2">
                      <div class="col-md-5" >
                        <label>Apellido Paterno</label> 
                      </div>
                      <div class="col-md-7">
                        <input type="text" class="form-control" id="txtAPcli" name="PaternoCli">  
                      </div> 
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-5" > 
                          <label>Apellido Materno</label> 
                        </div>
                        <div class="col-md-7">
                          <input type="text" class="form-control" id="txtAMcli" name="MaternoCli">  
                        </div> 
                    </div>
                  </div>
              </div>
          </div>
          <div class="col-md-6">
            <div class="panel panel-success">
                <div class="panel-heading"> <strong>Detalle de Cuenta</strong></div>
                  <div class="panel-body">
                    <div class="row">
                        <div class="col-md-2"> 
                          <label id="">ID</label> 
                        </div>
                        <div class="col-md-4">
                          <input type="text" class="form-control" id="pk_cta" disabled>  
                        </div> 
                    </div>
                    <p></p>
                    <div class="row">
                        <div class="col-md-5"> 
                          <label id="">Fecha Apertura</label> 
                        </div>
                        <div class="col-md-6">
                          <input type="text" class="form-control" id="txtfecha">  
                        </div> 
                    </div>
                    <p></p>
                   <div class="row">
                        <div class="col-md-5"> 
                          <label id="">Monto Apertura</label> 
                        </div>
                        <div class="col-md-6">
                          <input type="text" class="form-control" id="txtmonto">  
                        </div> 
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-5" > 
                          <label>Periodo del Interes</label> 
                        </div>
                        <div class="col-md-7">
                          <input type="text" class="form-control" id="txtplazo_int">  
                        </div> 
                    </div>
                   <p></p>
                    <div class="row">
                      <div class="col-md-3" > 
                          <label>Interes</label> 
                        </div>
                        <div class="col-md-5">
                          <input type="text" class="form-control" id="txtinteres">  
                        </div> 
                    </div>
                   <p></p>

                   <div class="row">
                      <div class="col-md-3" > 
                          <label>Plazo</label> 
                        </div>
                        <div class="col-md-5">
                          <input type="text" class="form-control" id="txtplazo">  
                        </div> 
                    </div>
                   <p></p>
                    
                    <div class="row">
                      <div class="col-md-6" > 
                          <label>Interes que gana al finalizar el plazo</label> 
                        </div>
                        <div class="col-md-5">
                          <input type="text" class="form-control" id="txtinteres_g">  
                        </div> 
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-6">
                        <input class="btn btn-warning btn-block btn-xs" type="button" id="retirarCtaPF" value="Retirar Capital / Interes">
                      </div>
                    </div>
                    <p></p>
                    <div class="row">
                      <div class="col-md-5">
                        <input class="btn btn-danger btn-block btn-xs" type="button" id="anularCtaPF" value="Anular Plazo Fijo">
                      </div>
                      <div class="col-md-4 col-md-offset-3">
                        <input class="btn btn-success btn-block " type="button" id="movimientos" value="Movimientos">
                      </div>

                    </div>
                    <p></p>
                  </div>
              </div>
          </div>
        </div>
      </div>

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

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
<div id="modal_confirmar" 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">Alerta</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
              <div class="panel panel-default">
                <div class="panel-body">
                  <div class="row">
                    <div class="alert alert-warning" role="alert" align="center">
                      <h3 id="text_alerta">¿DESEA ANULAR PLAZO FIJO?</h3>
                      <p>Esta accion sera erreversible</p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-3">
                      <label class="control-label ">Observación: </label>
                    </div>
                    <div class="col-md-9">
                      <div class="form-group">
                        <textarea type="text" class="form-control" id="txtobservacion_anu"></textarea>
                      </div>
                      <p></p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                      <button  type="button"  class="btn btn-warning btn-block btn-sm" id="btn_confirmar_anulacion" >Anular Plazo Fijo</button>
                    </div>
                  </div>
                </div>
              </div>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
<div id="modal_confirmar_retiro" 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">Alerta</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
              <div class="panel panel-default">
                <div class="panel-body">
                  <div class="row">
                    <div class="alert alert-warning" role="alert" align="center">
                      <h3 id="text_alerta_ret">¿DESEA RETIRAR DINERO DE PLAZO FIJO?</h3>
                      <p>Esta accion sera erreversible</p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-3">
                      <label class="control-label ">Observación: </label>
                    </div>
                    <div class="col-md-9">
                      <div class="form-group">
                        <textarea type="text" class="form-control" id="txtobservacion_ret"></textarea>
                      </div>
                      <p></p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-4 col-md-offset-2">
                      <button  type="button"  class="btn btn-info btn-block btn-sm" id="btn_confirmar_ret_capital" >Retirar Capital</button>
                    </div>
                    <div class="col-md-4">
                      <button  type="button"  class="btn btn-warning btn-block btn-sm" id="btn_confirmar_ret_interes" >Retirar Interes</button>
                    </div>
                  </div>
                </div>
              </div>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
<div id="modalrecibo_cta" 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:8px;">
                <table>
                  <tr  align="center" nowrap >===================</tr>
                </table>
                <label>OFICINA: {{ SITE_URL }}</label>
                <table>
                  <tr>
                    <td>{{ caja }}</td>
                    <td><div style="width:50px;"> </div></td>
                    <td >N° R/E <span id="anu_nr"></span></td>
                  </tr>
                </table>
                <table>
                  <tr>
                    <td>FECHA: </td>
                    <td><div style="width:10px;"> </div></td>
                    <td id="anu_fecha" nowrap></td>
                    <td>&nbsp;</td>
                    <td id="anu_hora" nowrap></td>
                  </tr>
                </table>
                <table>
                  <tr>
                    <td><b>Cliente: </b></td>
                    <td id="anu_socio"></td>
                  </tr>
                  <tr>
                    <td><b>DNI: </b></td>
                    <td id="anu_dni"></td>
                  </tr>
                </table>
                <table>
                  <tr>
                    <td>Concepto:</td>
                    <td>
                      <div style="width:40px;"> </div>
                    </td>
                    <td id="anu_concep"></td>
                  </tr>
                </table>
                <table>
                  <tr>
                    <td>Importe:</td>
                    <td>
                      <div style="width:40px;"> </div>
                    </td>
                    <td id="anu_importe"></td>
                  </tr>

                </table>
                <table>
                  <tr>
                    <td>______________</td>
                  </tr>
                  <tr>
                    <td id ="anu_sociof"></td>
                  </tr>
                  <tr>
                    <td>
                      <div style="height: 25px;"></div>
                    </td>
                  </tr>
                  <tr>
                    <td>______________</td>
                  </tr>
                  <tr>
                    <td nowrap>OP. {{ dg_operador }}</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;
  $(document).ready(function () {
    $('#txtDniC').numeric();
    $('#txtfecha_anu').datetimepicker({
      locale: 'es',
      format: 'YYYY-MM-DD'
    });
    $('input').on('keypress', function(e){
      if(e.keyCode == 13)
      {
        var inputs = $(this).parents("form").eq(0).find(":input.form-control");
        var idx = inputs.index($(this));
        if (idx == inputs.length - 1) {
          inputs[0].select()
        } 
        else {
          inputs[idx + 1].focus(); //  handles submit buttons
          inputs[idx + 1].select();
        }
        return false;
      }
    });

    ajax_ctas();
    $(document).on("click",".filaC",function(){
      var num = $(this).attr('id');
      filaI = num;
      var fila= $(this).attr('class');
      //$("."+fila).attr('class','filaC');
      $("#pk_cta").prop('value',null);
      $("#body_modal_ctas").css('background-color','#FFF');
      if(Aux[filaI].tp == 'Natural'){
        $("#dniRUC").text("DNI");
        $("#nombreRazon").text("Nombres");
        $("#rbNatural").prop("checked", true);
        $("#txtDNIcli").attr('value',Aux[filaI].dni);
        $("#campoAp1").show();
        $("#campoAp2").show();
      }
      else{
        $("#dniRUC").text("RUC");
        $("#nombreRazon").text("Razon Social");
        $("#rbJuridica").prop("checked", true);
        $("#txtDNIcli").attr('value',Aux[filaI].dni);
        $("#campoAp1").hide();
        $("#campoAp2").hide();
      }
      $("#pk_cta").prop('value',Aux[filaI].pk);
      $("#txtDNIcli").attr('value',Aux[filaI].dni);
      $("#txtNombre").prop('value',Aux[filaI].nom);
      $("#txtAPcli").prop('value',Aux[filaI].ap);
      $("#txtAMcli").prop('value',Aux[filaI].am);
      $("#txtfecha").prop('value',Aux[filaI].fa);
      $("#txtmonto").prop('value',Aux[filaI].monto);
      $("#txtinteres").prop('value',Aux[filaI].interes);
      $("#txtplazo").prop('value',Aux[filaI].plazo);
      $("#txtplazo_int").prop('value',Aux[filaI].plazo_int);
      $("#txtinteres_g").prop('value',Aux[filaI].interes_g);
      if(Aux[filaI].estado=='cerrado'){
        $("#body_modal_ctas").css('background-color','#E57373');
        $("#anularCtaPF").hide();
      }
      else{
        $("#anularCtaPF").show();
      }
    });
    $("#btnRefrescar").click(function(){
      ajax_ctas();
    });
  

  
    function ajax_ctas(){
      $('.table-responsive').waitMe({effect : 'progressBar',text : 'Recuperando Datos'});
      $.ajax({
        url:'/listacentasAhorros_activos_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux = data;
          var html ="";
          var sty='';
          for(var i=0;i<data.length;i++){
            if(data[i].estado=='cerrado'){
              sty="danger";
            }
            else{
              if(data[i].estado=='vencido'){
                sty="success";
              }
              else{
                sty="";
              }
              
            }
              html += '<tr data-toggle="modal" data-target="#myModal" class="filaC '+sty+'" id="'+i+'"><td>'+data[i].tipo+'</td><td>'+data[i].nom+' '+data[i].ap+' '+data[i].am+'</td><td>'+data[i].fa+'</td><td>'+data[i].oa+'</td><td>'+data[i].plazo+'</td><td>'+data[i].monto+'</td><td>'+data[i].interes_g+'</td><td>'+data[i].fv+'</td><td>'+data[i].estado+'</td></tr>';
          }
          $('#listaC').html(html);
          $('.table-responsive').waitMe('hide');
        }
      });
    }
     $(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');
    });
    //-----------------------------------------------------------------------------
    $("#anularCtaPF").click(function(){
      $("#modal_confirmar").modal('show');
    });
    $("#btn_confirmar_anulacion").click(function(){
      $(this).prop('disabled',true);
      $("#text_alerta").text('Anulando Cuenta....');
      ajax_solicitud_anular_cuenta_pf();
    });
    //-------------------------------------------
     function ajax_solicitud_anular_cuenta_pf(){
      $.ajax({
        data:{'id_cta':$("#pk_cta").val(),'obs':$("#txtobservacion_anu").val(),'fecha':$("#txtfecha_anu").val()},
        url:'/anular_cuenta_pf_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          if(data.resultado=='exito'){
            swal("Exito",'Cta Cerrado', "success");
            $("#anu_nr").text(data.nroRecibo);
            $("#anu_fecha").text(data.fechaRecibo);
            $("#anu_hora").text(data.horaRecibo);
            $("#anu_socio").text(data.nombreRecibo);
            $("#anu_dni").text(data.dniRecibo);
            $("#anu_concep").text(data.conceptoDetalleRecibo);
            $("#anu_importe").text(data.montoRecibo);
            $("#anu_sociof").text(data.nombreRecibo);
            ajax_ctas();
            $("#platillaI").printThis();
            $("#btn_confirmar_anulacion").prop('disabled',false);
            $("#text_alerta").text('¿DESEA ANULAR PLAZO FIJO?');
            $("#txtobservacion_anu").prop('value',null);
          }
          else{
             swal("Error", data.resultado, "error");
             $("#btn_confirmar_anulacion").prop('disabled',false);
             $("#text_alerta").text('¿DESEA ANULAR PLAZO FIJO?');
            $("#txtobservacion_anu").prop('value',null);
          }
        },
        error: function(xhr, textStatus, errorThrown) {
           //$('.table-solicitudes').waitMe('hide');
            console.log(xhr.responseText);
        },
      });
    }
    //------------------------------------
    $("#retirarCtaPF").click(function(){
      $("#modal_confirmar_retiro").modal('show');
    });
    //----------------------------------
    $("#btn_confirmar_ret_capital").click(function(){
      $(this).prop('disabled',true);
      $("#text_alerta_ret").text('Retirando Capital....');
      ajax_solicitud_retiro_capital();
    });
    function ajax_solicitud_retiro_capital(){
      $.ajax({
        data:{'id_cta':$("#pk_cta").val(),'obs':$("#txtobservacion_ret").val(),},
        url:'/ritarar_capital_cuenta_pf_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          if(data.resultado=='exito'){
            swal("Exito",'Retiro de capital exitoso', "success");
            $("#anu_nr").text(data.nroRecibo);
            $("#anu_fecha").text(data.fechaRecibo);
            $("#anu_hora").text(data.horaRecibo);
            $("#anu_socio").text(data.nombreRecibo);
            $("#anu_dni").text(data.dniRecibo);
            $("#anu_concep").text(data.conceptoDetalleRecibo);
            $("#anu_importe").text(data.montoRecibo);
            $("#anu_sociof").text(data.nombreRecibo);
            
            ajax_ctas();
            $("#platillaI").printThis();
            $("#btn_confirmar_ret_capital").prop('disabled',false);
            $("#text_alerta_ret").text('¿DESEA RETIRAR DINERO DE PLAZO FIJO?');
            $("#txtobservacion_ret").prop('value',null);
          }
          else{
             swal("Error", data.resultado, "error");
             $("#btn_confirmar_ret_capital").prop('disabled',false);
             $("#text_alerta_ret").text('¿DESEA RETIRAR DINERO DE PLAZO FIJO?');
            $("#txtobservacion_ret").prop('value',null);
          }
        },
        error: function(xhr, textStatus, errorThrown) {
            console.log(xhr.responseText);
        },
      });
    }
    //------------------------------------
    $("#btn_confirmar_ret_interes").click(function(){
      $(this).prop('disabled',true);
      $("#text_alerta_ret").text('Retirando Interes....');
      ajax_solicitud_retiro_interes();
    });
     function ajax_solicitud_retiro_interes(){
      $.ajax({
        data:{'id_cta':$("#pk_cta").val(),'obs':$("#txtobservacion_ret").val(),},
        url:'/ritarar_interes_cuenta_pf_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          if(data.resultado=='exito'){
            swal("Exito",'Retiro de Interes exitoso', "success");
            $("#anu_nr").text(data.nroRecibo);
            $("#anu_fecha").text(data.fechaRecibo);
            $("#anu_hora").text(data.horaRecibo);
            $("#anu_socio").text(data.nombreRecibo);
            $("#anu_dni").text(data.dniRecibo);
            $("#anu_concep").text(data.conceptoDetalleRecibo);
            $("#anu_importe").text(data.montoRecibo);
            $("#anu_sociof").text(data.nombreRecibo);
            
            ajax_ctas();
            $("#platillaI").printThis();
            $("#btn_confirmar_ret_interes").prop('disabled',false);
            $("#text_alerta_ret").text('¿DESEA RETIRAR DINERO DE PLAZO FIJO?');
            $("#txtobservacion_ret").prop('value',null);
          }
          else{
             swal("Error", data.resultado, "error");
             $("#btn_confirmar_ret_interes").prop('disabled',false);
             $("#text_alerta_ret").text('¿DESEA RETIRAR DINERO DE PLAZO FIJO?');
            $("#txtobservacion_ret").prop('value',null);
          }
        },
        error: function(xhr, textStatus, errorThrown) {
            console.log(xhr.responseText);
        },
      });
    }
    //------------------------------------
    //------------------------------------
  });
</script>
{% endblock content1 %}