@extends('voyager::master')

@section('content')
    <div class="content">
  <div>
    <nav class="navbar navbar-inverse" style="z-index: 0;">
    <h1 class="text-center"><span class="label label-inverse">@yield('page_title', setting('admin.description'))</span></h1>
      <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a id="linkRegistros" href="javascript:void(0)" onclick="cambiarFormulario(this.id, 'form_registros')">Registros</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown" style="z-index: 1;">
          <a id="linkIntervalo" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Últimos 28 días <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" onclick="cambiarIntervalo(7)">Últimos 7 días</a></li>
            <li><a href="javascript:void(0)" onclick="cambiarIntervalo(28)">Últimos 28 días</a></li>
            <li><a href="javascript:void(0)" onclick="cambiarIntervalo(90)">Últimos 90 días</a></li>
            <li><a href="javascript:void(0)" onclick="cambiarIntervalo(365)">Últimos 365 días</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
      <div class="container" id="contenedor" style="width: 100%;">
        <canvas id="chartGrafico" style="height: 450px; width: 100%; max-width: 100%; margin: 0px auto;"></canvas>
      </div>
    </nav>
  </div>
</div>
@stop

@section('javascript')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js" integrity="sha512-t41WshQCxr9T3SWH3DBZoDnAT9gfVLtQS+NKO60fdAwScoB37rXtdxT/oKe986G0BFnP4mtGzXxuYpHrMoMJLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
  var id_global = "linkRegistros";
  var formulario_global = "form_registros";
  var intervalo_global = "28";

  $(function() {
    cargarDatos(formulario_global, intervalo_global);
  });

  function cambiarFormulario(id, formulario){
    $("#" + id_global).parent().removeClass("active");
    $("#" + id).parent().addClass("active");

    id_global = id;
    formulario_global = formulario;
    cargarDatos(formulario, intervalo_global);
  }

  function cambiarIntervalo(intervalo){
    intervalo_global = intervalo;
    $("#linkIntervalo").empty();
    $("#linkIntervalo").append('Últimos ' + intervalo + ' días <span class="caret"></span>');
    cargarDatos(formulario_global, intervalo_global);
  }

  function cargarDatos(formulario, intervalo){
    $.ajax({
      url: "{{ url('cargar-grafico') }}" + "/" + formulario + "/" + intervalo,
      dataType: 'json',
      success: function(resp) {
        //console.log(resp.array_contador);
        let labels = resp.array_labels;
        let contadores = resp.array_contador;
        let total = resp.total;

        console.log(total);
        $('#contenedor').empty();
        $('#contenedor').append(
          '<canvas id="chartGrafico" style="height: 450px; max-width: 100%; width: 100%; margin: 0px auto;" ondblclick ="linkTo(1)"></canvas>');

        var ctx = $('#chartGrafico');
        var myChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: labels,
            datasets: [{
              label: 'Registros',
              data: contadores,
              backgroundColor: [
                'rgba(255, 255, 255, 0)'
                ],
              borderColor: [
                'rgb(34, 167, 240)'
                ],
              pointStyle: 'circle',
              pointRadius: 10,
              pointHoverRadius: 15,
              lineTension: 0.05
            }]
          },
          options: {
            plugins: {
              title: {
                  display: true,
                  text: 'Total de registros: ' + total
              },
              legend: {
                display: false
              }
            }
          }
        });

      },
      error:function(XMLHttpRequest, textStatus, errorThrown){
        console.log(textStatus);
      }
    });         
  }

function linkTo(ruta){
    if(ruta == 1){
        location.href = "{{ url('admin/form-registros') }}";
    }
}
</script>
@stop