{% extends "Base.html" %}

{% block content %}
{% if user.is_authenticated %}
<div class="container my-4">
    <h1 class="text-center mb-4">Dashboard - Inventario y Ventas</h1>

    <!-- Fila de los resúmenes de datos -->
    <div class="row mb-4">
        <!-- Resumen de total de ventas -->
        <div class="col-md-3 mb-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5 class="card-title">Total de Ventas</h5>
                    <p class="card-text">
                        <strong>${{ total_ventas|floatformat:2 }}</strong>
                    </p>
                </div>
            </div>
        </div>
        <!-- Resumen de productos en inventario -->
        <div class="col-md-3 mb-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">Productos en Inventario</h5>
                    <p class="card-text">
                        <strong>{{ total_productos_en_inventario }}</strong>
                    </p>
                </div>
            </div>
        </div>
        <!-- Resumen de artículos vendidos -->
        <div class="col-md-3 mb-3">
            <div class="card bg-warning text-dark">
                <div class="card-body">
                    <h5 class="card-title">Artículos Vendidos</h5>
                    <p class="card-text">
                        <strong>{{ total_articulos_vendidos }}</strong>
                    </p>
                </div>
            </div>
        </div>
        <!-- Resumen de proveedores -->
        <div class="col-md-3 mb-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h5 class="card-title">Proveedores</h5>
                    <p class="card-text">
                        <strong>{{ total_proveedores }}</strong>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Fila para organizar los gráficos -->
    <div class="row">
        <!-- Gráfico Ventas por Bodega -->
        <div class="col-md-6 mb-4">
            <h4 class="text-center">Ventas por Bodega</h4>
            <canvas id="ventasPorBodega"></canvas>
        </div>
        <!-- Gráfico Inventario Total -->
        <div class="col-md-6 mb-4">
            <h4 class="text-center">Inventario Total</h4>
            <canvas id="inventarioTotal"></canvas>
        </div>
    </div>
    
    <div class="row">
        <!-- Gráfico Ventas por Artículo -->
        <div class="col-md-6 mb-4">
            <h4 class="text-center">Ventas por Artículo</h4>
            <canvas id="ventasPorArticulo"></canvas>
        </div>
        <!-- Gráfico Precios de Artículos -->
        <div class="col-md-6 mb-4">
            <h4 class="text-center">Precios de Artículos</h4>
            <canvas id="preciosArticulos"></canvas>
        </div>
    </div>
</div>

<script>
    // Ventas por bodega
    const ventasPorBodega = {{ ventas_por_bodega|safe }};
    const bodegaLabels = ventasPorBodega.map(item => item.bodega__nombre_bodega);
    const bodegaData = ventasPorBodega.map(item => item.total_ventas);

    new Chart(document.getElementById('ventasPorBodega'), {
        type: 'bar',
        data: {
            labels: bodegaLabels,
            datasets: [{
                label: 'Ventas Totales',
                data: bodegaData,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        }
    });

    // Inventario total por artículo
    const inventarioTotal = {{ inventario_total|safe }};
    const inventarioLabels = inventarioTotal.map(item => item.articulo__nombre_articulo);
    const inventarioData = inventarioTotal.map(item => item.total);

    new Chart(document.getElementById('inventarioTotal'), {
        type: 'pie',
        data: {
            labels: inventarioLabels,
            datasets: [{
                label: 'Inventario Total',
                data: inventarioData,
                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'],
            }]
        }
    });

    // Ventas por artículo
    const ventasPorArticulo = {{ ventas_por_articulo|safe }};
    const articuloLabels = ventasPorArticulo.map(item => item.articulo__nombre_articulo);
    const articuloData = ventasPorArticulo.map(item => item.total);

    new Chart(document.getElementById('ventasPorArticulo'), {
        type: 'line',
        data: {
            labels: articuloLabels,
            datasets: [{
                label: 'Unidades Vendidas',
                data: articuloData,
                borderColor: 'rgba(153, 102, 255, 1)',
                borderWidth: 2
            }]
        }
    });

    // Comparación de precios de artículos
    const preciosArticulos = {{ precios_articulos|safe }};
    const precioLabels = preciosArticulos.map(item => item.nombre_articulo);
    const precioCompraData = preciosArticulos.map(item => item.precio_compra);
    const precioVentaData = preciosArticulos.map(item => item.precio_venta);

    new Chart(document.getElementById('preciosArticulos'), {
        type: 'bar',
        data: {
            labels: precioLabels,
            datasets: [
                {
                    label: 'Precio de Compra',
                    data: precioCompraData,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Precio de Venta',
                    data: precioVentaData,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }
            ]
        }
    });
</script>
{% else %}
<script>
    window.location.href = "{% url 'signin' %}";
</script>

{% endif %}

{% endblock  %}