{% extends "Base.html" %}

{% block content %}
{% if user.is_authenticated %}
<main class="conteiner col-md-10 offset-md-1 mt-5 g-4">
  <div class="row row-cols-1 row-cols-md-2 g-4">
    <div class="col">
      <div class="card h-100">
        <div class="card-body">
          <p class="text-center">Precio promedio de cada tipo articulo</p>
          <div class="chart-container">
            <canvas id="avgPriceChart"></canvas>
        </div>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <div class="card-body">
          <p class="text-center">articulos en bodegas</p>
          <div class="chart-container">
            <canvas id="barChart"></canvas>
        </div>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <div class="card-body">
          <p class="text-center">Cantidad de tipos de articulos</p>
          <div class="chart-container">
            <canvas id="graficoLinealMovimientos"></canvas>
        </div>
        <br>
        <div class="text-center">
        <p class="text-center">Reportes del inventario</p>
        <a href="{% url 'generar_reporte_pdf' %}" class="btn btn-primary">Descargar PDF</a>
        <a href="{% url 'generar_reporte_excel' %}" class="btn btn-success">Descargar Excel</a>
        <a href="{% url 'generar_reporte_csv' %}" class="btn btn-info">Descargar CSV</a>
      </div>
        <br>
        <p class="text-center">Grafico de productos</p>
        <div class="text-center">
        <a href="{% url 'generar_grafico_chartjs' %}" class="btn btn-secondary">generar grafico de produccion</a>
        </div>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <div class="card-body">
          <p class="text-center">Cantidad de tipos de articulos</p>
          <div class="chart-container">
            <canvas id="pieChart"></canvas>
        </div>
      </div>
    </div>
  </div>


</main>
<script>
  // Datos dinámicos generados desde Django
  const tiposArticulo = {{ tipos_articulo | safe }};
  const cantidadesPorTipo = {{ cantidades_por_tipo | safe }};
  const bodegas = {{ bodegas | safe }};
  const cantidadesPorBodega = {{ cantidades_por_bodega | safe }};
  const tiposArticuloProm = {{ tipos_articulo_prom | safe }};
  const preciosPromedio = {{ precios_promedio | safe }};


  // 1. Gráfico de Pastel: Distribución de artículos por tipo
  new Chart(document.getElementById('pieChart').getContext('2d'), {
      type: 'pie',
      data: {
          labels: tiposArticulo,
          datasets: [{
              data: cantidadesPorTipo,
              backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)'],
          }]
      },
      options: {
          responsive: true,
          plugins: {
              legend: { position: 'top' },
          }
      }
  });

  // 2. Gráfico de Barras: Cantidad de artículos por bodega
  new Chart(document.getElementById('barChart').getContext('2d'), {
      type: 'bar',
      data: {
          labels: bodegas,
          datasets: [{
              label: 'Cantidad de Artículos',
              data: cantidadesPorBodega,
              backgroundColor: 'rgba(75, 192, 192, 0.6)',
          }]
      },
      options: {
          responsive: true,
          plugins: {
              legend: { display: false },
          },
          scales: {
              x: { title: { display: true, text: 'Bodegas' } },
              y: { title: { display: true, text: 'Cantidad' } },
          }
      }
  });

  // 3. Gráfico de Línea: Evolución de movimientos de inventario
  
  new Chart(document.getElementById('avgPriceChart').getContext('2d'), {
    type: 'bar',
    data: {
        labels: tiposArticuloProm,
        datasets: [{
            label: 'Precio Promedio',
            data: preciosPromedio,
            backgroundColor: 'rgba(255, 159, 64, 0.6)',
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { position: 'top' },
        },
        scales: {
            x: { title: { display: true, text: 'Tipos de Artículos' } },
            y: { title: { display: true, text: 'Precio Promedio' } },
        }
    }
});
const ctx = document.getElementById('graficoLinealMovimientos').getContext('2d');
const graficoLineal = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{ nombres_tipos|safe }}, // Nombres de los tipos de movimientos
        datasets: [{
            label: 'Cantidad Total Movida',
            data: {{ cantidades_por_tipos|safe }}, // Cantidades totales por tipo de movimiento
            borderColor: 'rgba(54, 162, 235, 1)',
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderWidth: 2,
            tension: 0.3, // Para suavizar la línea
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: true,
            },
            tooltip: {
                enabled: true,
            }
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Tipos de Movimiento'
                }
            },
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Cantidad Total'
                }
            }
        }
    }
});
</script>
{% else %}
{% endif %}

{% endblock  %}