{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .::Configuraciones
{% endblock titulo %}
{% block content1 %} 
      <script type="text/javascript">
        $("#navCOS").attr('class','dropdown active');
        $("#navCierreFor").attr('class','active');
      </script> 
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="card">
                <div class="card-header bgm-bluegray text-center"> <h2>Configuraciones</h2></div>
                <div class="card-body">
                  <div class="row" id="Result">
                    {% ifnotequal resultado '' %}
                    {% ifequal resultado 'exito' %}
                    <h4 class="bg-success" align="center">
                      Registro Exitoso!!
                    </h4>
                    {% else %}
                    <h4 class="bg-danger" align="center">
                      :( Fallo registro {{resultado}}
                    </h4>
                    {% endifequal %}
                    {% endifnotequal %}
                  </div>
                  <p></p>
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                      <button type="button" class="btn btn-block btn-info waves-effect" id="btnRefrescar">Actualizar</button>
                    </div>
                    <!--
                    <div class="col-md-3 ">
                      <button type="button" class="btn btn-danger btn-block" id="btnAct_ext">Actualizar Config</button>
                    </div>-->
                  </div>
                  <div class="row">
                    <br>
                    <p class="bg-success">
                      &nbsp;
                      <div class="col-md-10 col-md-offset-1">
                         
                          <div>
                            <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">Config</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"> <h4>Detalle de configuración</h4></div>
                                               <form action="/Admin/config_extra/" method="POST" data-toggle="validator" role="form"> {% csrf_token %}
                                                <div class="panel-body">
                                                  <div class="row">
                                                    <div class="col-md-12">
                                                      <h4 class="bg-success" align="center">
                                                        &nbsp;
                                                      </h4>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-3 col-md-offset-2" >
                                                      <h5>id: </h5>
                                                    </div>
                                                    <div class="col-md-3">
                                                      <input type="text" class="form-control" id="txtpk" name ="pk" readonly="readonly" required>
                                                      <p></p>
                                                    </div>
                                                    <div class="col-md-2">
                                                      <input type="text" class="form-control" id="txtpko" name ="pko" readonly="readonly" required>
                                                      <p></p>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-3 col-md-offset-2" >
                                                      <h5>Oficina: </h5>
                                                    </div>
                                                    <div class="col-md-3">
                                                      <input type="text" class="form-control" id="txtof"readonly="readonly" required>
                                                      <p></p>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-4 col-md-offset-1" >
                                                      <h5>Porcentaje Comisión para la Oficina:  </h5>
                                                    </div>
                                                    <div class="col-md-3">
                                                      <input type="text" class="form-control" id="txtporcentaje" name="porcentaje"readonly="readonly" required>
                                                      <p></p>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-3 col-md-offset-2" >
                                                      <h5>Cierre Obligatorio: </h5>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <select class="form-control" name="cf" id="txtcf" readonly="readonly">
                                                          <option value="si">si</option>
                                                          <option value="no">no</option>
                                                        </select>
                                                      <p></p>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-3 col-md-offset-2" >
                                                      <h5>Tipo Oficina: </h5>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <select class="form-control" name="tipoOfi" id="txttp" readonly="readonly">
                                                          <option value="pagador">Pagador</option>
                                                          <option value="enviador">Enviador</option>
                                                        </select>
                                                      <p></p>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-3 col-md-offset-2" >
                                                      <h5>Ver Saldo en Oficina central: </h5>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <select class="form-control" name="verSaldo" id="txtvs" readonly="readonly">
                                                          <option value="si">si</option>
                                                          <option value="no">no</option>
                                                        </select>
                                                      <p></p>
                                                    </div>
                                                  </div>
                                                  <p></p>
                                                  <div class="row"> 
                                                    <div class="col-md-10 col-md-offset-2">
                                                      <div class="toggle-switch" data-ts-color="green" id="campoChk">
                                                          <label for="ts4" class="ts-label"> Actualizar datos</label>
                                                          <input id="ts4" type="checkbox" hidden="hidden">
                                                          <label for="ts4" class="ts-helper"></label>
                                                      </div> 
                                                     </div> 
                                                  </div>
                                                  <!--<div class="row">
                                                    <div class="col-md-5 col-md-offset-6">
                                                      <div class="checkbox" id="campoChk">
                                                        <label>
                                                          <input type="checkbox" id="actualizar"> Actualizar datos
                                                        </label>
                                                      </div>
                                                    </div>
                                                  </div>-->
                                                  <p></p>
                                                  <div class="row">
                                                    <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4">
                                                      <button class="btn btn-primary btn-block" type="submit">Actualizar</button>
                                                    </div>

                                                  </div>
                                                </div>
                                              </form>
                                            </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>

                            <div id="modalOficinaCentral" 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">Opciones</h4>
                                  </div>
                                  <div class="modal-body">
                                    <div class="row">
                                      <div class="col-md-4 col-md-offset-1" align="right"> 
                                         <h5>Oficina Central:</h5> 
                                      </div>
                                      <div class="col-md-5">  
                                       <div class="fg-line">
                                        <div class="select">
                                        <select class="form-control" id="ComboOficina">    
                                        </select>
                                        </div>
                                        </div>
                                      </div>
                                    </div>
                                    <p></p>
                                    <div class="row">
                                      <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4">
                                        <button type="button" class="btn btn-warning btn-block" id="cambiarOfi">Guardar</button>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="modal-footer">
                                    <div class="row">
                                      <div class="col-md-2 col-md-offset-10">
                                         <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                                      </div>
                                    </div>
                                  </div>

                                </div><!-- /.modal-content -->
                              </div><!-- /.modal-dialog -->
                          </div><!-- /.modal -->

                          </div>
                          <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                  <tr>
                                    <th>Nro</th>
                                    <th>Oficina</th>
                                    <th>Cierre Forzado</th>
                                    <th>Procentaje que Queda</th>
                                    <th>Tipo Oficina</th>
                                    <th>Ver saldo</th>
                                    <th>Oficina Central</th>
                                  </tr>
                                </thead>
                                <tbody id="listaR">
                                    
                                </tbody>
                            </table>
                          </div>
                          <div class="row">
                            <div class="col-md-2 col-md-offset-10">
                              <button href="#" data-toggle="modal" data-target="#modalOficinaCentral" class="btn bgm-lightblue waves-effect">Oficina Central</button>
                            </div>
                          </div>
                      </div>
                    </p>
                  </div>
                  <br>
                 
                </div>
              </div>
          </div>
        </div>
     <script type="text/javascript">
                            var Aux="";
                            var filaI =0;
                            $(document).ready(function () {
                              ajax_cf();
                              $(document).on("click",".filaR",function(){
                                var num = $(this).attr('id');
                                filaI = num;
                                var fila= $(this).attr('class');
                                $("."+fila).attr('class','filaR');
                                $("#"+num).attr('class','filaR info');
                                $("#txtpk").prop('value',Aux[filaI].pk);
                                $("#txtpko").prop('value',Aux[filaI].pko);
                                $("#txtcf").prop('value',Aux[filaI].cf);
                                $("#txtof").prop('value',Aux[filaI].of);
                                $("#txtporcentaje").prop('value',Aux[filaI].xqd);
                                $("#txttp").prop('value',Aux[filaI].tpO);
                                $("#txtvs").prop('value',Aux[filaI].verS);
                              });
                                $("#campoChk").click(function(){
                                  if($("#ts4").prop('checked')){
                                      habilitar();
                                    }
                                    else{
                                      deshabilitar();
                                    }
                                });
                                function habilitar(){
                                  $("#txtcf").attr('readonly',false);
                                  $("#txtporcentaje").attr('readonly',false);
                                  $("#txttp").attr('readonly',false);
                                  $("#txtvs").attr('readonly',false);
                                };
                                function deshabilitar(){
                                  $("#txtcf").attr('readonly',true);
                                  $("#txtporcentaje").attr('readonly',true);
                                  $("#txttp").attr('readonly',true);
                                  $("#txtvs").attr('readonly',true);
                                };
                              $("#btnRefrescar").click(function(){
                                ajax_cf();
                              });
                              /*
                              $("#btnAct_ext").click(function(){
                                ajax_act();
                              })*/
                              function ajax_cf(){
                                $.ajax({
                                  url:'/cierre_forzado_ajax/',
                                  type:'GET',
                                  dataType:'json',
                                  success: function(data){
                                    Aux = data;
                                    var html ="" ,html1="",id_oficinaCentral="";
                                    for(var i=0;i<data.length;i++){
                                        html += '<tr data-toggle="modal" data-target="#myModal" class="filaR" id="'+i+'"><th scope="row">'+(i+1)+'</th><td>'+data[i].of+'</td><td>'+data[i].cf+'</td><td>'+data[i].xqd+'</td><td>'+data[i].tpO+'</td><td>'+data[i].verS+'</td><td>'+data[i].ofc+'</td></tr>';

                                        html1 += '<option value="'+data[i].pko+'">'+data[i].of+'</option>';
                                        if(data[i].ofc=="central"){
                                          id_oficinaCentral=data[i].pko;
                                        }
                                    }                        
                                    $('#listaR').html(html);
                                    $('#ComboOficina').html(html1);
                                    $("#ComboOficina").prop('value',id_oficinaCentral);
                                  }
                                });
                              }
                              /*
                              function ajax_act(){
                                $.ajax({
                                  url:'/actualizar_config_cierreForzado_total_ajax/',
                                  type:'GET',
                                  dataType:'text',
                                  success: function(data){
                                    alert(data);
                                  }
                                });
                              }
                              */

                              $('#txtporcentaje').numeric('.');
                              function ajax_cambiar_ofi(){
                                $.ajax({
                                  data:{'ofiC':$("#ComboOficina").val()},
                                  url:'/cambiar_ofi_central_ajax/',
                                  type:'GET',
                                  dataType:'text',
                                  success: function(data){
                                    if(data=='exito'){
                                      $("#modalOficinaCentral").modal('hide');
                                      ajax_cf();

                                      bootbox.alert({ 
                                        message: "Operación Exitosa",
                                        className: 'bb-alternate-modal'
                                      });

                                    }
                                    else{

                                       bootbox.alert({ 
                                        message: "La Operación fallo",
                                        className: 'bb-alternate-modal'
                                      });

                                    }
                                  }
                                });
                              }
                              $("#cambiarOfi").click(function(){
                                ajax_cambiar_ofi();
                              })
                            });
                          </script>
{% endblock content1 %}