<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">Docentes</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
            <select id="docente" name="docente" class="form-control" onchange="cargariiee()">
              <option value="0">SELECCIONAR</option>
              <? /*foreach ($docentes as $key => $value)* {*/ ?>
                <option value="<?/*$value->id*/ ?>"><?/*$value->documento . ' | ' . $value->apellido . ', ' . $value->nombre*/ ?></option>
              <? /*}*/ ?>
            </select>
            <span class="held-block"></span>
          </div> -->

          <!-- <div class="form-group ml-2">
            <label class="sr-only" for="grado">Fecha Inicial</label>
            <input type="date" name="fechai" id="fechai" class="form-control" value="<?= date('Y-m-d') ?>">
          </div> -->

          <!-- <div class="form-group ml-2">
            <label class="sr-only" for="grado">Fecha final</label>
            <input type="date" name="fechaf" id="fechaf" class="form-control" value="<?= date('Y-m-d') ?>">
          </div> -->

          <div class="form-group">
            <!-- <label class="sr-only" for="iiee">Email address</label> -->
            <div style="width: 500px">
              <select id="red" name="red" class="form-control select2-custom" onchange="cargardata()" style="width: 100%;">
                <option value="0">SELECCIONAR RED</option>
                <? foreach ($red as $key => $value) { ?>
                  <option value="<?= $value->id ?>"><?= $value->red ?></option>
                <? } ?>
              </select>
            </div>
            <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">
            <button type="button" onclick="listarreporteseguidos()" class="btn btn-primary btn-sm" title="CARGAR"><i class="fa fa-upload"></i> BUSCAR</button>
          </div>

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

</div>

<!-- <div class="row">
  <div class="col-lg-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Reporte entre fechas</h3>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-12 col-sm-12 col-12">
            <table id="tbseguimiento" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">


            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> -->
<!-- End Row -->

<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-warning btn-xs btn-sm p-1 text-danger" onclick="cargardata()"><i class="fa fa-bar-chart"></i></button> -->
        </div>
        <h3 class="card-title text-primary">Reporte entre fechas</h3>
        <!-- <div class="card">
      <div class="card-header">
        <h3 class="card-title">Reporte entre fechas</h3> -->
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-12">
            <div class="table-responsive">
              <table id="tbseguimiento" class="table table-sm table-bordered mb-0" style="font-size: 12px;">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>codigo modular</th>
                    <th>Institucion educativa</th>
                    <th>fecha intervencion</th>
                    <th>numero de alumnos</th>
                    <th>numero de caso por anemia</th>
                    <th>red</th>
                    <th>microred</th>
                    <th>establecimiento</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Row -->

<!-- Bootstrap modal -->
<div class="modal fade" id="modal_llform" 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">

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

<div id="modal_form" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content p-0 b-0">
      <div class="card card-color mb-0">
        <div class="card-header bg-primary" id="card-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h3 class="card-title text-white mt-1 mb-0">Card Primary</h3>
        </div>
        <div class="card-body">
          <p class="mb-0"></p>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div id="modal_grafico" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content p-0 b-0">
      <div class="card card-color mb-0">
        <div class="card-header bg-primary" id="card-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h3 class="card-title text-white mt-1 mb-0">Avance registrado</h3>
        </div>
        <div class="card-body">
          <canvas id="myChart"></canvas>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
<script src="https://cdnjs.com/libraries/Chart.js"></script>
<script src="https://www.jsdelivr.com/package/npm/chart.js?path=dist"></script>

<script type="text/javascript">
  //for save method string
  var save_method;
  var table;
  var tablex;
  $(document).ready(function() {

    $("input").change(function() {
      $(this).parent().removeClass('has-error');
      $(this).next().empty();
    });

    cargardata();

  });

  function cargardata() {
    tablex = $('#tbseguimiento').DataTable({
      language: {
        "decimal": "",
        "emptyTable": "No hay información",
        "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
        "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "Mostrar _MENU_ Entradas",
        "loadingRecords": "Cargando...",
        "processing": "Procesando...",
        "search": "Buscar:",
        "zeroRecords": "Sin resultados encontrados",
        "paginate": {
          "first": "Primero",
          "last": "Ultimo",
          "next": "Siguiente",
          "previous": "Anterior"
        }
      },
      destroy: true,
      "ajax": {
        "url": "<?= $this->url ?>/ajax_list/" + $('#red').val(),
        "type": "POST"
      },
    });
  }

  function cargarAvance() {
    // var x = ['2024-03-01', '2024-03-02', '2024-03-03', '2024-03-04', '2024-03-05', '2024-03-06', '2024-03-07', '2024-03-08'];
    // var y = [];
    // for (let index = 0; index < 8; index++) {
    //   y.push(Math.floor(Math.random() * 45));
    // }
    // console.log(x);
    // console.log(y);
    $.ajax({
      url: "<?= $this->url ?>/ajax_grafica_seguimiento",
      data: {
        fechai: $('#fechai').val(),
        fechaf: $('#fechaf').val(),
        iiee: $('#iiee').val(),
        grado: $('#grado').val(),
        seccion: $('#seccion').val(),
      },
      type: "POST",
      dataType: "JSON",
      success: function(data) {
        console.log(data);
        graf('myChart', data.x, data.y, data.z);
      },
      error: function(jqXHR, textStatus, errorThrown) {}
    });
    $('#modal_grafico').modal('show');
  }

  function graf(div, labels, data1, data2) {
    var barOptions_stacked = {
      tooltips: {
        enabled: false
      },
      hover: {
        animationDuration: 0
      },
      scales: {
        xAxes: [{
          ticks: {
            beginAtZero: true,
            fontFamily: "'Open Sans Bold', sans-serif",
            fontSize: 11
          },
          scaleLabel: {
            display: false
          },
          gridLines: {},
          stacked: true
        }],
        yAxes: [{
          gridLines: {
            display: false,
            color: "#fff",
            zeroLineColor: "#fff",
            zeroLineWidth: 0
          },
          ticks: {
            fontFamily: "'Open Sans Bold', sans-serif",
            fontSize: 11
          },
          stacked: true
        }]
      },
      legend: {
        display: true,
        position: 'bottom'
      },

      animation: {
        onComplete: function() {
          var chartInstance = this.chart;
          var ctx = chartInstance.ctx;
          ctx.textAlign = "left";
          ctx.font = "9px Open Sans";
          ctx.fillStyle = "#fff";

          Chart.helpers.each(this.data.datasets.forEach(function(dataset, i) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            Chart.helpers.each(meta.data.forEach(function(bar, index) {
              data = dataset.data[index];
              // if (i == 0) {
              //   ctx.fillText(data, 50, bar._model.y + 4);
              // } else {
              //   ctx.fillText(data, bar._model.x - 25, bar._model.y + 4);
              // }
              // ctx.fillText(data, bar._model.x, bar._model.y);

              // if (i == 0) {
              //   ctx.fillText(data, bar._model.x, bar._model.y -20);
              // } else {
              //   ctx.fillText(data, bar._model.x , bar._model.y -20);
              // }

              ctx.fillText(data, bar._model.x, bar._model.y + 20);
            }), this)
          }), this);

        }
      },
      pointLabelFontFamily: "Quadon Extra Bold",
      scaleFontFamily: "Quadon Extra Bold",
    };

    // var ctx = document.getElementById("Chart1");
    var myChart = new Chart(div, {
      type: 'bar',
      data: {
        labels: labels, // ["2014", "2013", "2012", "2011"],

        datasets: [{
          label: 'SI',
          data: data1, // [45, 40, 35, 40, 45, 50],
          backgroundColor: 'blue', // "rgba(63,103,126,1)",
          // hoverBackgroundColor: "rgba(50,90,100,1)"
        }, {
          label: 'NO',
          data: data2, // [5, 10, 15, 10, 5, 0],
          backgroundColor: 'red', // "rgba(163,103,126,1)",
          // hoverBackgroundColor: "rgba(140,85,100,1)"
        }]
      },

      options: barOptions_stacked,
    });
  }

  function grafx(div, labels, data) {
    // const ctx = document.getElementById('myChart');
    new Chart(div, {
      type: 'bar',
      data: {
        labels: labels, //['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: data, //[12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }

  function grafxx(div, labelsx, datax) {

    new Chart(div, {
      type: 'bar',
      data: {
        labels: ["A", "B", "C"],
        datasets: [{
          backgroundColor: 'red', // Utils.color(0),
          data: [10, 10, 10],
          // data: Utils.numbers({
          //   count: DATA_COUNT,
          //   min: 0,
          //   max: 100
          // }),
          datalabels: {
            align: 'end',
            anchor: 'start'
          }
        }, {
          backgroundColor: 'blue', //Utils.color(1),
          data: [10, 10, 10],
          // data: Utils.numbers({
          //   count: DATA_COUNT,
          //   min: 0,
          //   max: 100
          // }),
          datalabels: {
            align: 'center',
            anchor: 'center'
          }
        }, {
          backgroundColor: 'orange', // Utils.color(2),
          data: [10, 10, 10],
          // data: Utils.numbers({
          //   count: DATA_COUNT,
          //   min: 0,
          //   max: 100
          // }),
          datalabels: {
            anchor: 'end',
            align: 'start',
          }
        }]
      },
      options: {
        plugins: {
          datalabels: {
            color: 'white',
            display: function(context) {
              return context.dataset.data[context.dataIndex] > 15;
            },
            font: {
              weight: 'bold'
            },
            formatter: Math.round
          }
        },

        // Core options
        aspectRatio: 5 / 3,
        layout: {
          padding: {
            top: 24,
            right: 16,
            bottom: 0,
            left: 8
          }
        },
        elements: {
          line: {
            fill: false
          },
          point: {
            hoverRadius: 7,
            radius: 5
          }
        },
        scales: {
          x: {
            // stacked: true
          },
          y: {
            // stacked: true,
            min: 0,
            max: 200,
          }
        }
      }
    });
  }

  function save() {
    $.ajax({
      url: "<?= $this->url ?>/ajax_save_seguimiento",
      type: "POST",
      data: $('#form').serialize(),
      dataType: "JSON",
      success: function(data) {
        if (data.status) {
          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) {
        Lobibox.notify('error', {
          size: 'mini',
          msg: "El registro no se pudo crear verifique las validaciones."
        });
      }
    });
  };

  function listarreporteseguidos() {
    $.ajax({
      // url: "<?= $this->url ?>/ajax_list_reporte_seguidos",
      url: "<?= $this->url ?>/ajax_list_reporte_general",
      data: {
        fechai: $('#fechai').val(),
        fechaf: $('#fechaf').val(),
        // iiee: $('#iiee').val(),
        red: $('#red').val(),
        // seccion: $('#seccion').val(),
      },
      method: "POST",
      dataType: "json",
      beforeSend: function() {
        $("#tbseguimiento").html('<br><h3>Cargando datos...</h3>');
      },
      success: function(data) {
        $('#tbseguimiento').html(data.html);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.log(jqXHR);
      }
    });
  };

  function cargariiee() {
    $.ajax({
      url: "<?= $this->url ?>/cargariiee/" + $('#docente').val(),
      method: "POST",
      dataType: "json",
      success: function(data) {
        $("#iiee option").remove();
        if (data.iiees.length == 1) {
          $.each(data.iiees, function(index, value) {
            options += "<option value='" + value.id + "'>" + value.nombre_ie + "</option>"
          });
          $("#iiee").append(options);
          cargargrado();
        } else {
          var options = '<option value="0">SELECCIONAR</option>';
          $.each(data.iiees, function(index, value) {
            options += "<option value='" + value.id + "'>" + value.nombre_ie + "</option>"
          });
          $("#iiee").append(options);
        }
      },
      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();
        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();
        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">SECCION</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) {
        $("#seccion option").remove();
        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">SECCION</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);
      }
    });
  };

  function abrirmsn(sigue, motivo, estado) {
    if (estado == 'SI') {
      $('#card-header').removeClass('bg-primary');
      $('#card-header').addClass('bg-danger');
    } else {
      $('#card-header').removeClass('bg-danger');
      $('#card-header').addClass('bg-primary');
    }
    $('#modal_form .card-title').text('Motivo');
    $('#modal_form p').text(motivo);
    $('#modal_form').modal('show');
  }
</script>
<script type="text/javascript" src="<?= base_url() . RECURSOS ?>js/jquery-ui/js/jquery-ui-1.9.2.custom.js"></script>