{% extends "baseAdmin.html" %}
{% load static %}
{% block titulo %}
  .::Lista Oficinas Asociado
{% endblock titulo %}
{% block content1 %}
    <div class="container">
      <script type="text/javascript">
        $("#navOficinas").attr('class','dropdown active');
        $("#navconfiAsociado").attr('class','active');
      </script>
        <div class="row">
          <div class="col-md-12">
            {% ifnotequal resultado '' %}
            {% ifequal resultado 'exito' %}
            <div class="alert alert-success" role="alert" align="center">
              <h4>ASOCIADO CREADO!</h4>
            </div>
            {% else %}
            <div class="alert alert-danger" role="alert" align="center">
              <h4>FALLO OPERACION {{resultado}}</h4>
            </div>
            {% endifequal %}
            {% endifnotequal %}
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12" >
              <div class="panel panel-primary">
                <div class="panel-heading"> <b>CONFIGURACION ASOCIADO</b></div>
                <div class="panel-body">
                  <div class="row" >
                    <p class="bg-success" align="center" id="ExitoCambiar">
                    </p>
                  </div>
                  <div class="row">
                    <div class="col-md-2 col-md-offset-1">
                      <button type="button" class="btn btn-success btn-block btn-sm" id="btnCrear" data-toggle="modal" data-target="#ModalAgregarAso">Agregar Asociado</button>
                    </div>
                    <div class="col-md-2">
                      <button type="button" class="btn btn-warning btn-block btn-sm" id="btnRefrescar">Actualizar</button>
                    </div>
                  </div>
                  <div class="row">
                    <br>
                    <p class="bg-success">
                      &nbsp;
                    </p>
                    <div class="col-md-10 col-md-offset-1">
                        <div class="table-responsive">
                          <table class="table table-hover">
                              <thead>
                                <tr>
                                  <th>Fecha</th>
                                  <th>Asociado</th>
                                  <th>Base</th>
                                  <th>Obs.</th>
                                  <th>&nbsp;</th>
                                </tr>
                              </thead>
                              <tbody id="listaAso">
                                  
                              </tbody>
                          </table>
                        </div>
                    </div>
                    
                  </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>
              </div>
          </div>
        </div>
    </div>
<div>
  <div id="ModalAgregarAso" 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">Agragar Asociado</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <form action="/ConfigurarAsociado_tem/" method="POST">{% csrf_token %}
                <div class="panel panel-warning">
                  <div class="panel-body">
                    <div class="row">
                      <div class="col-md-4" align="right"><label>Nombre Asociado</label></div>
                      <div class="col-md-5">
                        <input type="text" class="form-control" id="txtAsociado" name="nombre" required>
                        <p></p>
                      </div>
                    </div>
                    <div class="row">
                      <p class="bg-success">Seleccion oficina y caja para la central de asociado</p>
                    </div>
                    <div class="row">
                      <div class="col-md-5 col-md-offset-1">
                        <select class="form-control" id="ComboOficinas" name="oficina" required>
                        </select>
                        <p></p>
                      </div>
                      <div class="col-md-5">
                        <select class="form-control" id="ComboCaja" name="caja" required>
                        </select>
                        <p></p>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-4"><label>Observaciones</label></div>
                      <div class="col-md-6">
                        <textarea class="form-control" rows="3" name="obs"></textarea >
                      </div>
                    </div>
                    <P></P>
                    <div class="row">
                      <div class="col-md-4 col-md-offset-4">
                        <button type="submit" class="btn btn-warning btn-block" id="btnSelectOfiExt">Crear Asociado</button>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
              
            </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>
<div id="ModalOf" 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">Oficinas</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="panel-body">
                        <div class="row">
                          <div class="col-md-6 col-md-offset-2" align="right"><label>Id Asociado: </label></div>
                          <div class="col-md-4">
                            <input type="text" class="form-control" id="txtIDAsociado" readonly>
                            <p></p>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-12">
                              <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                      <tr>
                                        <th>Oficina</th>
                                      </tr>
                                    </thead>
                                    <tbody id="listaO">
                                    </tbody>
                                </table>
                              </div>
                          </div>
                        </div>
                      </div>
                  </div><!--fin panel body-->
                </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="ModalCa" 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">Autorizar Cajas</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="panel-body">
                        <div class="row">
                          <div class="" role="alert" id="exitoCaja" align="center">
                            <label id="exitocajatext"></label>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-6 col-md-offset-2" align="right"><label>Id Oficina: </label></div>
                          <div class="col-md-4">
                            <input type="text" class="form-control" id="txtIDOficina" readonly>
                            <p></p>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-12">
                              <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                      <tr>
                                        <th>Caja</th>
                                        <th>Operador</th>
                                        <th>Marque la Caja permitidas</th>
                                      </tr>
                                    </thead>
                                    <tbody id="listaC">
                                    </tbody>
                                </table>
                              </div>
                          </div>
                        </div>
                      </div>
                  </div><!--fin panel body-->
                </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>


<script type="text/javascript">
  var Aux="";
  var filaI =0;
  var Aux2="";
  var filaI2 =0;
  $(document).ready(function () {
    ajax_asociado();
    $(document).on("click",".filaAso",function(){
      $("#txtIDAsociado").prop('value',null);
      //var num = $(this).attr('id');
      filaI = $(this).attr('id');
      var fila= $(this).attr('class');
      $("."+fila).attr('class','filaAso');
      $(this).attr('class','filaAso info');
      //console.log(filaI);
      $("#txtIDAsociado").prop('value',Aux[filaI].pk);
      ajax_oficinas_asociado();
    });
    $("#btnRefrescar").click(function(){
      ajax_asociado();
    });
    
    function ajax_asociado(){
      $.ajax({
        url:'/Admin/oficinas_asociado_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux = data;
          var html ="";
          for(var i=0;i<data.length;i++){
              html += '<tr data-toggle="modal" data-target="#ModalOf" class="filaAso" id="'+i+'"><td>'+data[i].fecha+'</td><td>'+data[i].nombre+'</td><td><b>'+data[i].ofi+' </b>'+data[i].usu+'</td><td>'+data[i].obs+'</td><td><button type="button" class="btn btn-danger btn-xs btn-asociados" id="a'+data[i].pk+'"> Bases Asociado</button></td></tr>';
          }
          $('#listaAso').html(html);
          $(".btn-asociados").click(function(event, element){
                if (event.stopPropagation) {
                    event.stopPropagation();   // W3C model
                } else {
                    event.cancelBubble = true; // IE model
                }
                var idas = $(this).prop('id');
                ajax_cajas_asoacido2(idas.substring(1));
                $("#ModalAsociado").modal('show');
                //alert(idOficina);
              })
        }
      });
    }
    //
    function ajax_cajas_asoacido2(pk){
        $.ajax({
          url:'/ver_cajas_asociado_completo_ajax/',
          data:{'pkAsoc':pk},
          type:'GET',
          dataType:'json',
          success: function(data){
            Aux2 = data;
            var html ="";
            var esta='';
            for(var i=0;i<data.length;i++){
                html += '<tr><td>'+data[i].of+'</td><td>'+data[i].ca+'</td><td>'+data[i].op+'</td></tr>';
            }
            $('#listaCaA').html(html);
          }
        });
      }
    //
    function ajax_oficinas_para_combo(){
      $.ajax({
        url:'/Admin/oficinas_no_asociado_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
        var html ="";
          $("#ComboOficinas").html('');
          for(var i=0;i<data.length;i++){
            html += '<option value="'+data[i].pk+'">'+data[i].nombre_oficina+'</option>';
          }
          $('#ComboOficinas').html(html);
          ajax_caja($('#ComboOficinas').val());
        }
      });
    };
    //
    $("#ComboOficinas").change(function(){
      ajax_caja($('#ComboOficinas').val());
    })
    function ajax_caja(oficina){
      $.ajax({
        url:'/Admin/cajas_no_asociado_ajax/',
        data:{'idOfi':oficina},
        type:'GET',
        dataType:'json',
        success: function(data){
          var html = '';
          $("#ComboCaja").html('');
          for(var i=0;i<data.length;i++){
              html += '<option value="'+data[i].pk+'">'+data[i].op+'/ '+data[i].nombre+'</option>';
          }
          $('#ComboCaja').html(html);
          //$("#ComboAfavor").html('');
          //ajax_personal_caja($("#ComboCaja").val());
        }
      });
    };
    //
    //
    function ajax_oficinas_asociado(){
      $.ajax({
        url:'/oficinas_asociados1_ajax/',
        type:'GET',
        dataType:'json',
        success: function(data){
          Aux2= data;
          var html ="";
          for(var i=0;i<data.length;i++){
              html += '<tr data-toggle="modal" data-target="#ModalCa" class="filaOfi" id="'+i+'"><td>'+data[i].nombre_oficina+'</td></tr>';
          }
          $('#listaO').html(html);
        }
      });
    }
     $(document).on("click",".filaOfi",function(){
      $("#exitoCaja").prop('class','');
      $("#exitocajatext").text('');
      $("#txtIDOficina").prop('value',null);
      $('#listaC').html('');
      var num = $(this).attr('id');
      filaI2 = num;
      var fila= $(this).attr('class');
      $("."+fila).attr('class','filaOfi');
      $(this).attr('class','filaOfi info');
      $("#txtIDOficina").prop('value',Aux2[filaI2].pk);
      ajax_cajas_asociado($("#txtIDAsociado").val(),Aux2[filaI2].pk);
      console.log(filaI2);
    });
     function ajax_cajas_asociado(pkAsoc,pkO){
          $.ajax({
            url:'/Admin/ver_cajas_asociado_ajax/',
            data:{'pkAsoc':pkAsoc,'pkO':pkO},
            type:'GET',
            dataType:'json',
            success: function(data){
              var html ="";
              for(var i=0;i<data.length;i++){
                if(data[i].aso != 'si'){
                  html += '<tr class="filaOf" id="'+i+'" ><td>'+data[i].ca+'</td><td>'+data[i].op+'</td><td align="center"><label class="checkbox"><input class="chbcaja" type="checkbox" value="option1" id="c'+data[i].pk+'">'+'<i class="input-helper"></i></label>'+'</td></tr>';
                }
                else{
                   html += '<tr class="filaOf" id="'+i+'" ><td>'+data[i].ca+'</td><td>'+data[i].op+'</td><td align="center"><label class="checkbox"><input class="chbcaja" type="checkbox" value="option1" id="c'+data[i].pk+'" checked>'+'<i class="input-helper"></i></label>'+'</td></tr>';
                }

              }                        
              $('#listaC').html(html);

              $(".chbcaja").click(function(){ 
                var num = $(this).prop('id'); 
                if($("#"+num).prop('checked')){
                    console.log("checked");
                    //var num = $(this).prop('id'); 
                    ajax_AddCa($("#txtIDAsociado").val(),num.substring(1));
                }else{
                     //var num = $(this).prop('id');
                      console.log("no checked");
                      ajax_SubCa($("#txtIDAsociado").val(),num.substring(1));
                }
                //}
                /*if ($('.chbOficina').is(':checked')) {
                      console.log("checked");
                      var num = $(this).prop('id'); 
                      ajax_AddOf($("#txtpkConf").val(),num.substring(1));
                  }else{
                      var num = $(this).prop('id');
                      console.log("no checked");
                      ajax_SubOf($("#txtpkConf").val(),num.substring(1));
                  }*/
              });

            },
            error: function(xhr, textStatus, errorThrown) {
                        console.log(xhr.responseText);
                },
          });
        };
        function ajax_AddCa(pkcf,pkC){
          $.ajax({
            url:'/agregar_caja_asociado_ajax/',
            data:{'pkAsoc':pkcf,'pkC':pkC},
            type:'GET',
            dataType:'text',
            success: function(data){
             if(data=="exito"){
              $("#exitoCaja").prop('class','alert alert-success');
              $("#exitocajatext").text('Se agrego la caja al asociado');
              ajax_cajas_asociado($("#txtIDAsociado").val(),$("#txtIDOficina").val());
             }
             else{
              $("#exitoCaja").prop('class','alert alert-danger');
              $("#exitocajatext").text(data);
              ajax_cajas_asociado($("#txtIDAsociado").val(),$("#txtIDOficina").val());
             }
            },
            error: function(xhr, textStatus, errorThrown) {
                      console.log(xhr.responseText);
                },
          });
        };


        function ajax_SubCa(pkcf,pkC){
          $.ajax({
            url:'/quitar_caja_asociado_ajax/',
            data:{'pkAsoc':pkcf,'pkC':pkC},
            type:'GET',
            dataType:'text',
            success: function(data){
             if(data=="exito"){
              $("#exitoCaja").prop('class','alert alert-warning');
              $("#exitocajatext").text('Se quito la caja del asociado');
              ajax_cajas_asociado($("#txtIDAsociado").val(),$("#txtIDOficina").val());
             }
             else{
              $("#exitoCaja").prop('class','alert alert-danger');
              $("#exitocajatext").text(data);
              ajax_cajas_asociado($("#txtIDAsociado").val(),$("#txtIDOficina").val());
             }
            },
            error: function(xhr, textStatus, errorThrown) {

                        console.log(xhr.responseText);
                },
          });
        };
    //------------------------------------------------------------------
    $(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');
    });
    $("#btnCrear").click(function(){
      ajax_oficinas_para_combo();
      $('#listaBaAdd').html('');
    });

    $('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;
        }
    });
    //
  });
</script>
<div id="ModalAsociado" 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">Bases Asociado</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>Oficina</th>
                      <th>Caja</th>
                      <th>Operador</th>
                    </tr>
                  </thead>
                  <tbody id="listaCaA">
                      
                  </tbody>
                </table>
              </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>
{% endblock content1 %}