<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>arWare - Control de monotributo</title>

  <!-- Google Fonts -->
  <link href="https://fonts.gstatic.com" rel="preconnect">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

  <!-- JQuery -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>

  <script language="javascript">

    $(document).ready(function() {
      $.getJSON({
        url: 'http://localhost:1979/api/v1/mononacional/getEmpresas',
        type: "GET",
        crossDomain: true,
        dataType: 'json',
        success: function(data) {
          //$("#main").html(data);
          var sel = $("#empresa");
          sel.empty();
          for (var i=0; i<data.length; i++) {
            sel.append('<option value="' + data[i].name + '">' + data[i].description + '</option>');
          }
        },
      });
      var fecha = new Date();
      document.getElementById("fechaHasta").valueAsDate = fecha;
      fecha.setDate(fecha.getDate() - 365)
      document.getElementById("fechaDesde").valueAsDate = fecha;
      // Dibujo el esqueleto del gráfico
      var fillOptions = {
        fill: {
          type: "gradient",
          gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.3,
            opacityTo: 0.7,
            stops: [0, 90, 100]
          }
        }
      };
      var options = {
        chart: {
            height: 350,
            type: 'line',
            toolbar: {
              show: false
            },
        },
        dataLabels: {
            enabled: false
        },
        series: [{
          name: '-',
          color: '#FFFFFF',
          data: []
        }],
        //colors: ['#4154f1', '#2eca6a', '#ff771d'],
        /*fill: {
          type: "gradient",
          gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.3,
            opacityTo: 0.7,
            stops: [0, 90, 100]
          }
        },*/
        markers: {
          size: 3,
        },
        stroke: {
          curve: 'smooth',
          width: 2
        },
        noData: {
          text: 'Aplique un filtro para ver la gráfica...'
        }
        /*yaxis: {
          forceNiceScale: true
        }*/
      }
      var chart = new ApexCharts(
        document.querySelector("#reportsChart"),
        options
      );
      chart.render();
      //chart.hideSeries("-");
      $("#aplicarFiltros").on("click", function() {
        //alert( "Handler for `click` called." );
        $("#tituloGrafico").text($("#empresa").find(":selected").text());
        var param = {desde: $("#fechaDesde").val(), hasta: $("#fechaHasta").val(), empresa: $("#empresa").find(":selected").val()};
        chart.updateSeries([{
          data: [],
          color: '#FFFFFF',
          name: '-'
        }]);
        //chart.resetSeries();
        //chart.hideSeries("-");
        var xcat = 0;
        // Seteo ajax sincrónicos para que esperen a terminar antes de continuar la ejecución
        $.ajaxSetup({
          async: false
        });
        // Ventas mensuales
        if ($('#swVMes').is(":checked")) {
          $.getJSON('http://localhost:1979/api/v1/mononacional/getVentasMensuales', param, function(response) {
            var result = [];
            var ejex = [];
            var cuenta = 0;
            $.each(response, function(i, field){
              //console.debug(field.subtotal);
              result.push((field.periodo, parseInt(field.subtotal)));
              ejex.push(field.periodo);
              cuenta++;
            });
            if (cuenta > xcat) {
              xcat = cuenta;
              //console.debug("xcat=" + xcat);
              //console.debug("cuenta=" + cuenta);
            }
            chart.updateOptions({
              xaxis: {
                categories: ejex
              }
            });
            chart.appendSeries({
              name: 'Ventas mensuales',
              color: '#0000ff',
              data: result,
              //type: 'area'
            });
          });
        }
        // Compras mensuales
        if ($('#swCMes').is(":checked")) {
          $.getJSON('http://localhost:1979/api/v1/mononacional/getComprasMensuales', param, function(response) {
            var result = [];
            var ejex = [];
            var cuenta = 0;
            $.each(response, function(i, field){
              //console.debug(field.subtotal);
              result.push((field.periodo, parseInt(field.subtotal)));
              ejex.push(field.periodo);
              cuenta++;
            });
            if (cuenta > xcat) {
              xcat = cuenta;
              //console.debug("xcat=" + xcat);
              //console.debug("cuenta=" + cuenta);
            }
            chart.updateOptions({
              xaxis: {
                categories: ejex
              }
            });
            chart.appendSeries({
              name: 'Compras mensuales',
              color: '#ffa500',
              data: result
            });
          });
        }
        // Ventas acumuladas
        if ($('#swVAcumuladas').is(":checked")) {
          $.getJSON('http://localhost:1979/api/v1/mononacional/getVentasMensuales', param, function(response) {
            var result = [];
            var ejex = [];
            var acum = 0;
            var cuenta = 0;
            $.each(response, function(i, field){
              acum = acum + parseInt(field.subtotal);
              //console.debug(acum);
              result.push((field.periodo, acum));
              ejex.push(field.periodo);
              cuenta++;
            });
            if (cuenta > xcat) {
              xcat = cuenta;
              //console.debug("xcat=" + xcat);
              //console.debug("cuenta=" + cuenta);
            }
            chart.updateOptions({
              xaxis: {
                categories: ejex
              }
            });
            chart.appendSeries({
              name: 'Ventas acumuladas',
              color: '#00ff00',
              data: result
            });
          });
        }
        // Compras acumuladas
        if ($('#swCAcumuladas').is(":checked")) {
          $.getJSON('http://localhost:1979/api/v1/mononacional/getComprasMensuales', param, function(response) {
            var result = [];
            var ejex = [];
            var acum = 0;
            var cuenta = 0;
            $.each(response, function(i, field){
              acum = acum + parseInt(field.subtotal);
              //console.debug(acum);
              result.push((field.periodo, acum));
              ejex.push(field.periodo);
              cuenta++;
            });
            if (cuenta > xcat) {
              xcat = cuenta;
              //console.debug("xcat=" + xcat);
              //console.debug("cuenta=" + cuenta);
            }
            chart.updateOptions({
              xaxis: {
                categories: ejex
              }
            });
            chart.appendSeries({
              name: 'Compras acumuladas',
              color: '#ff0000',
              data: result
            });
          });
        }
        // Escalas monotributo
        if ($('#escalas').is(":checked")) {
          const letras = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
          const montos = [6450000, 9450000, 13250000, 16450000, 19350000, 24250000, 29000000, 44000000, 49250000, 56400000, 68000000];
          //const colores = ['#C9DABF', '#9CA986', '#808D7C', '#5F6F65', '#4F6F65', '#3F6F65', '#2F6F65', '#1F6F65', '#0F6F65', '#0E6F65', '#0D6F65'];
          const colores = ['#00FF00', '#33ff00', '#66ff00', '#99ff00', '#AAff00', '#CCAA00', '#FFCC00', '#ff9900', '#ff6600', '#FF3300', '#FF0000'];
          //console.debug("periodos=" + xcat);
          for (i = 0; i < letras.length; i++) {
            if ($('#escalas'+letras[i]).is(":checked")) {
              var categ = [];
              for (c=0; c<xcat; c++){
                // Lleno cada valor de X con el valor de cada categoría
                //console.debug("c=" + c);
                categ.push(montos[i]);
              }
              chart.appendSeries({
                name: 'Categoría ' + letras[i],
                data: categ,
                //color: '#5' +  letras[i] + '1'  + letras[i] + '4' + letras[i],
                color: colores[i],
                type: 'line'
              })
            }
          }
        }
      });
    });

  </script>

</head>

<body>

  <header id="header" class="header fixed-top d-flex align-items-center">
    <a href class="logo d-flex align-items-center">
      <img src="assets/img/logo.png" alt="">
      <span class="d-none d-lg-block">arWare - Control de monotributo</span>
    </a>
  </header>

  <main id="main" class="main">

    <div class="row">
      <div class="col-lg-2">
        <!-- Card: Empresa -->
        <div class="card col-lg-12">
          <div class="card-body">
            <label for="empresa" class="col-form-label">Empresa</label>
            <div class="col-sm-12">
              <select id="empresa" class="form-select" aria-label="">
              </select>
            </div>
          </div>
        </div><!-- Card: Empresa -->
        <!-- Card: Modulo -->
        <div class="card col-lg-12">
          <div class="card-body">
            <label for="modulo" class="col-form-label">Módulo</label>
            <div class="col-sm-12">
              <select id="modulo" class="form-select" aria-label="">
		<option value="cpvt">Compras/Ventas</option>
		<option value="iva">IVA</option>
              </select>
            </div>
          </div>
        </div><!-- Card: Modulo -->
        <!-- Card: Fecha desde -->
        <div class="card col-lg-12">
          <div class="card-body">
            <label for="fechaDesde" class="col-form-label">Fecha desde</label>
            <div class="col-sm-12">
              <input id="fechaDesde" type="date" class="form-control">
            </div>
          </div>
        </div><!-- Card: Fecha desde -->
        <!-- Card: Fecha hasta -->
        <div class="card col-lg-12">
          <div class="card-body">
            <label for="fechaHasta" class="col-form-label">Fecha hasta</label>
            <div class="col-sm-12">
              <input id="fechaHasta" type="date" class="form-control">
            </div>
          </div>
        </div><!-- Card: Fecha desde -->
        <div class="col-lg-12 text-center">
          <button type="button" class="btn btn-success" id="aplicarFiltros"><i class="bx bx-filter"></i> Aplicar filtros</button>
        </div>
      </div>
        <div class="col-lg-8">
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" id="tituloGrafico"></h5>
                  <div id="reportsChart"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

    <div class="col-lg-2">
      <!-- Card: Ventas -->
      <div class="card col-lg-12 mb-2">
        <div class="card-body pb-0">
          <h5 class="card-title pb-0 pt-1 mb-1">Ventas</h5>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="swVMes" checked>
            <label for="swVMes" class="col-form-label pb-0">Mensuales</label>
            </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="swVAcumuladas" checked>
            <label for="swVAcumuladas" class="col-form-label">Acumuladas</label>
          </div>
        </div>
      </div><!-- Card: Ventas diarias -->
      <!-- Card: Compras -->
      <div class="card col-lg-12 mb-2">
        <div class="card-body pb-0">
          <h5 class="card-title pb-0 pt-1 mb-1">Compras</h5>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="swCMes" checked>
            <label for="swCMes" class="col-form-label pb-0">Mensuales</label>
          </div>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="swCAcumuladas" checked>
            <label for="swCAcumuladas" class="col-form-label">Acumuladas</label>
          </div>
        </div>
      </div><!-- Card: Compras -->
      <!-- Card: Escalas -->
      <div class="card col-lg-12 mb-2">
        <div class="card-body pb-2">
          <h5 class="card-title pb-0 pt-1 mb-0">Monotributo</h5>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="escalas" checked>
            <label for="escalas" class="col-form-label pb-0">Mostrar escalas</label>
          </div>
          A <input class="form-check-input" type="checkbox" id="escalasA" checked>
          B <input class="form-check-input" type="checkbox" id="escalasB" checked>
          C <input class="form-check-input" type="checkbox" id="escalasC" checked>
          D <input class="form-check-input" type="checkbox" id="escalasD" checked>
          E <input class="form-check-input" type="checkbox" id="escalasE" checked>
          F <input class="form-check-input" type="checkbox" id="escalasF" checked>
          G <input class="form-check-input" type="checkbox" id="escalasG" checked>
          H <input class="form-check-input" type="checkbox" id="escalasH" checked>
          I <input class="form-check-input" type="checkbox" id="escalasI" checked>
          J <input class="form-check-input" type="checkbox" id="escalasJ" checked>
          K <input class="form-check-input" type="checkbox" id="escalasK" checked>
        </div>
      </div><!-- Card: Escalas -->
    </div>

  </div>

  </main>

  <footer id="footer" class="footer">
    <div class="copyright">
      &copy; 2024 <strong><span>arWare</span></strong> Todos los derechos reservados
    </div>
  </footer>

  <!-- ApexCharts -->
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

</body>

</html>