<!-- <link href="assets/libs/select2/select2.min.css" rel="stylesheet" type="text/css" /> -->
<style>
  input[type="checkbox"]:checked+label {
    color: blue;
  }

  input[type="checkbox"]+label {
    color: red;
  }
</style>
<div class="row">
  <div class="col-lg-12">
    <div class="card card-border">
      <div class="card-header border-primary bg-transparent pb-0">
        <div class="card-widgets">
          <button type="button" class="btn btn-dark btn-xs" onclick="location.reload()"><i class="fa fa-redo"></i> Actualizar</button>
        </div>
        <h3 class="card-title">Filtros</h3>
      </div>
      <div class="card-body">
        <form class="form-inline">
          <div class="form-group">
            <label class="sr-only" for="iiee">Email address</label>
            <!-- <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> -->
            <select id="iiee" name="iiee" class="form-control" onchange="cargarseccion()">
              <option value="">SELECCIONAR</option>
              <? foreach ($iiee as $key => $value) { ?>
                <option value="<?= $value->id ?>"><?= $value->nombre_ie ?></option>
              <? } ?>
            </select>
            <span class="held-block"></span>
          </div>

          <!-- <div class="form-group ml-2">
            <label class="sr-only" for="grado">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
            <select id="grado" name="grado" class="form-control" onchange="cargarseccion()">
              <option value="0">GRADO</option>
            </select>
          </div> -->

          <div class="form-group ml-2">
            <!-- <label class="sr-only" for="seccion">Password</label> -->
            <!-- <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> -->
            <select id="seccion" name="seccion" class="form-control">
              <option value="0">SECCION</option>
            </select>
          </div>

          <div class="form-group ml-2">
            <button type="button" onclick="listarseguidos()" class="btn btn-primary btn-sm" title="CARGAR"><i class="fa fa-upload"></i> BUSCAR</button>
          </div>

        </form>
      </div>
    </div>
  </div>

</div>
<form action="" id="form" class="" autocomplete="off">
  <input type="hidden" id="conteo" name="conteo" value="0">
  <input type="hidden" id="conteo2" name="conteo2" value="0">
  <div class="row">
    <div class="col-lg-12">
      <p id="ccc"></p>
      <div class="card card-border">
        <div class="card-header border-primary bg-transparent pb-0">
          <div class="card-widgets">
            <a href="javascript:void(0)" class="text-primary font-20" title="CARGAR" id="status-save"><i class="fas fa-save"></i></a>
          </div>
          <h3 class="card-title text-primary">Registro de Seguimiento Diario</h3>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12 col-sm-12 col-12 p-0">
              <div class="table-responsive" id="tbseguimiento">
              </div>
              <div><button type="button" onclick="save()" class="btn btn-primary btn-sm" title="CARGAR">Guardar</button></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Row -->
</form>
<script type="text/javascript">
  //for save method string
  var save_method;
  var table;
  $(document).ready(function() {
    $("input").change(function() {
      $(this).parent().removeClass('has-error');
      $(this).next().empty();
    });
    // $("#alumno").autocomplete({
    //   source: "<?= $this->url ?>/completaralumno",
    //   minLength: 2,
    //   select: function(event, ui) {
    //     $("#id").val(ui.item.alumno);
    //   }
    // });
    // cargargrado();

    evaluarSave();
  });

  // modifica el estado de la figura indicando que se guardo(VERDE) no tiene datos(ROJO)
  function evaluarSave() {
    $.ajax({
      url: "<?= $this->url ?>/ajax_evaluar_save",
      data: {
        iiee: $('#iiee').val(),
        grado: $('#grado').val(),
        seccion: $('#seccion').val(),
      },
      method: "POST",
      dataType: "json",
      success: function(data) {
        console.log(data);
        if (data.status) {
          $('#status-save').removeClass('text-primary text-success');
          $('#status-save').addClass('text-success');
        } else {
          $('#status-save').removeClass('text-primary text-success');
          $('#status-save').addClass('text-primary');
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        //console.log('error');
        // Lobibox.notify('error', {
        //   size: 'mini',
        //   msg: "El registro no se pudo crear verifique las validaciones."
        // });
      }
    });
  }

  function cambiarSINO(pos, pos2) {
    var checkbox = $('#options' + pos + '_' + pos2);
    if (checkbox.is(':checked')) {
      checkbox.next().html('SI');
    } else {
      checkbox.next().html('NO');
    }
  }

  // if ($seccion != '')
  //           $this->db->where('dsc_seccion', $seccion);

  function save() {
    $.ajax({
      url: "<?= $this->url ?>/ajax_save_seguimiento",
      type: "POST",
      data: $('#form').serialize(),
      dataType: "JSON",
      success: function(data) {
        //console.log('guardado'+data.otros);
        if (data.status) {
          evaluarSave();
          Lobibox.notify('success', {
            size: 'mini',
            msg: "El registro fue creado exitosamente."
          });
        } else {
          Lobibox.notify('error', {
            size: 'mini',
            msg: "No se registro"
          });
        } //*/
      },
      error: function(jqXHR, textStatus, errorThrown) {
        //console.log('error');
        Lobibox.notify('error', {
          size: 'mini',
          msg: "El registro no se pudo crear verifique las validaciones."
        });
      }
    });
  };

  function listarseguidos() {
    $.ajax({
      url: "<?= $this->url ?>/ajax_list_seguidos",
      data: {
        iiee: $('#iiee').val(),
        grado: $('#grado').val(),
        seccion: $('#seccion').val(),
      },
      method: "POST",
      dataType: "json",
      beforeSend: function() {
        // $("#tbsegu-imiento").html('<br><h3>Cargando datos...</h3>');
      },
      success: function(data) {
        console.log(data);
        // $('#xxx').html('<tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td></tr>');
        $('#tbseguimiento').html(data.html);
        $('#conteo').val(data.conteo);
        $('#conteo2').val(data.conteofec);
        $('#tabla1').DataTable({
          dom: 'f', // Solo muestra el cuadro de búsqueda
          paging: false, // Desactiva la paginación
          ordering: false, // Desactiva el ordenamiento
          info: false, // Desactiva la información del datatable
          language: {
            "sProcessing": "Procesando...",
            "sLengthMenu": "Mostrar _MENU_ registros",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sSearch": "Buscar:",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
              "sFirst": "Primero",
              "sLast": "Último",
              "sNext": "Siguiente",
              "sPrevious": "Anterior"
            },
            "oAria": {
              "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
              "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
          },
          createdRow: function(row, data, dataIndex) {
            $('td', row).css({
              // 'background-color': '#f2f2f2', // Color de fondo
              'color': '#000' // Color del texto
            });
          }
        });
        evaluarSave();
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(jqXHR);
      }
    });
  };

  function cargargrado() {
    $.ajax({
      url: "<?= $this->url ?>/cargargrado/" + $('#iiee').val(),
      method: "POST",
      dataType: "json",
      success: function(data) {
        $("#grado option").remove();
        // console.log(data.grados.length);
        if (data.grados.length == 1) {
          $.each(data.grados, function(index, value) {
            options += "<option value='" + value.id + "'>" + value.grado + "</option>"
          });
          $("#grado").append(options);
          cargarseccion();
        } else {
          var options = '<option value="0">GRADO</option>';
          $.each(data.grados, function(index, value) {
            options += "<option value='" + value.id + "'>" + value.grado + "</option>"
          });
          $("#grado").append(options);
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(jqXHR);
      }
    });
  };

  function cargar___seccion() {
    $.ajax({
      url: "<?= $this->url ?>/cargarseccion/" + $('#iiee').val() + "/" + $('#grado').val(),
      method: "POST",
      dataType: "json",
      success: function(data) {
        $("#seccion option").remove();
        // console.log(data.grados.length);
        if (data.seccions.length == 1) {
          $.each(data.seccions, function(index, value) {
            options += "<option value='" + value.id + "'>" + value.seccion + "</option>"
          });
        } else {
          var options = '<option value="0">SECCIÓN</option>';
          $.each(data.seccions, function(index, value) {
            options += "<option value='" + value.id + "'>" + value.seccion + "</option>"
          });
        }

        $("#seccion").append(options);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(jqXHR);
      }
    });
  };

  function cargarseccion() {
    $.ajax({
      url: "<?= $this->url ?>/cargarseccion/" + $('#iiee').val(),
      method: "POST",
      dataType: "json",
      success: function(data) {
        console.log('xxx');
        $("#seccion option").remove();
        console.log(data);
        if (data.seccions.length == 1) {
          $.each(data.seccions, function(index, value) {
            options += "<option value='" + value.seccion + "'>" + value.seccion + "</option>"
          });
        } else {
          var options = '<option value="0">SECCIÓN</option>';
          $.each(data.seccions, function(index, value) {
            options += "<option value='" + value.seccion + "'>" + value.seccion + "</option>"
          });
        }

        $("#seccion").append(options);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(jqXHR);
      }
    });
  };
</script>
<script type="text/javascript" src="<?= base_url() . RECURSOS ?>js/jquery-ui/js/jquery-ui-1.9.2.custom.js"></script>

<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
  <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>
        <h3 class="modal-title"></h3>
      </div>
      <div class="modal-body form">
        <form action="#" id="form" class="form-horizontal" autocomplete="off">
          <input type="hidden" id="id" name="id">
          <div class="form-body">
            <div class="form-group">
              <label class="control-label col-md-3">Dni:<span class="required">*</span></label>
              <div class="col-md-9">
                <input class="form-control" id="documento" type="text" name="documento">
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-3">Nombre<span class="required">*</span></label>
              <div class="col-md-9">
                <input class="form-control" id="nombre" type="text" name="nombre">
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-3">Apellido<span class="required">*</span></label>
              <div class="col-md-9">
                <input class="form-control" id="apellido" type="text" name="apellido">
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-3">Direccion</label>
              <div class="col-md-9">
                <input class="form-control" id="direccion" type="text" name="direccion">
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-3">Celular<span class="required">*</span></label>
              <div class="col-md-9">
                <input class="form-control" id="celular" type="text" name="celular">
                <span class="help-block"></span>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-3">Correo<span class="required">*</span></label>
              <div class="col-md-9">
                <input class="form-control" id="correo" type="text" name="correo">
                <span class="help-block"></span>
              </div>
            </div>
            <!--div class="form-group">
              <label class="control-label col-md-3">Usuario<span class="required">*</span></label>
              <div class="col-md-9">
                
                <input class="form-control" id="usuario" type="text" name="usuario">
                <span class="help-block"></span>
              </div>
            </div-->
            <!--div class="form-group">
              <label class="control-label col-md-3">Contrase0Š9a<span class="required">*</span></label>
              <div class="col-md-9">
                <input class="form-control password" id="password" type="password" name="password">
                <span class="help-block"></span>
              </div>
            </div-->
            <!--div class="form-group">
              <label class="control-label col-md-3">Repita Contrase0Š9a<span class="required">*</span></label>
              <div class="col-md-9">
                <input class="form-control password" id="re_password" type="password" name="re_password">
                <span class="help-block"></span>
              </div>
            </div-->
            <!--div class="form-group">
              <label class="control-label col-md-3">Perfil<span class="required">*</span></label>
              <div class="col-md-9">
                <select id="perfil" name="perfil" class="form-control">
                  <?php foreach ($perfiles as $value) { ?>
                    <option value="<?= $value->id ?>"><?= $value->perfil ?></option>
                  <?php } ?>
                </select>
                <span class="help-block"></span>
              </div>
            </div-->
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" id="btnSave" onclick="sav__e()" class="btn btn-primary">Guardar</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bootstrap modal -->