{% extends 'base.html' %}
{% load static %}

{% load custom_filters %}
{% load humanize %}
{% block titulo %}PRODUCTOS MAS VENDIDOS{% endblock %}

{% block content %}


    

    <div class="row mb-5">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <form method="GET" action="{% url 'producto_detalle' %}" class="mb-4">
                <div class="row">
                    <div class="col-md-4">
                        <label for="fechaInicio">Fecha de inicio:</label>
                        <input type="text" id="fechaInicio" name="fecha_inicio" class="form-control datepicker"
                            value="{{ fecha_inicio }}" placeholder="Selecciona la fecha" required>
                    </div>

                    <div class="col-md-4">
                        <label for="fechaFin">Fecha de fin:</label>
                        <input type="text" id="fechaFin" name="fecha_fin" class="form-control datepicker"
                            value="{{ fecha_fin }}" placeholder="Selecciona la fecha" required>
                    </div>
                    <div class="col-md-2">
                        <label for="fechaFin">CANTIDAD DE PRODUCTOS</label>
                        <input type="number" id="fechaFin" name="cantidad" class="form-control " value="{{ cantidad }}"
                            required>
                    </div>

                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">Filtrar</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-md-1"></div>
    </div>

    <!-- Sección de la Gráfica -->
    <div class="row mb-5">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div class="card marine-chart">
                <div class="card-header chart-header">
                     PRODUCTOS MAS VENDIDOS del {{fecha_inicio_str}} a
                    {{fecha_fin_str}}
                    
                </div>
                <div class="card-body">
                    
                    <div id="graph-container" class="mt-4">{{ plot|safe }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-5">
        <div class="col-md-1"></div>
        <div class="col-md-10">

            <div class="card marine-chart">
                <div class="card-header chart-header">
                    Cantidad de Productos Vendidos por Año
                </div>
                <div class="card-body">
                    
                    <div class="table-responsive mt-3">
                        <table class="table table-hover table-bordered ">
                            <thead>
                                <tr>
                                    <th>Año</th>
                                    {% for producto in top_productos %}
                                    <th>{{ producto }}</th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in cantidad_vendida_por_año %}
                                <tr>
                                    <td>{{ row.año }}</td> <!-- Asegúrate de que la clave sea 'año' -->
                                    {% for producto in top_productos %}
                                    <td>{{ row|get_item:producto|default:0|intcomma }}</td>
                                    {% endfor %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>


                </div>

            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
    <div class="row mb-5">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div class="card marine-chart">
                <div class="card-header chart-header">
                    Estadísticas Generales por Producto
                </div>
                <div class="card-body">
                   
                    <div id="graph-container" class="mt-4">{{ plot_pie | safe }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>

    <div class="row mb-5">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div class="card marine-chart">
                <div class="card-header chart-header">
                    Estadísticas Generales por Producto
                </div>
                <div class="card-body">
                   
                    <div class="table-responsive mt-3">
                        <table class="table table-hover table-bordered  mt-3">
                            <thead>
                                <tr>
                                    <th>Producto</th>
                                    <th>Total Vendido (kg/piezas)</th>
                                    <th>Estabilidad de demanda</th>
                                    <th>Variabilidad en demanda</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for producto in productos_estadisticas %}
                                <tr>
                                    <td>{{ producto.producto }}</td>
                                    <td>{{ producto.total_vendido }}</td>
                                    <td>{{ producto.promedio }}</td>
                                    <td>{{ producto.desviacion_estandar }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-1"></div>

        </div>
    </div>





    {% for producto, items in productos_data.items %}
    <div class="row mb-5">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div class="card marine-chart">
                <div class="card-header chart-header">
                    {{ producto }}
                </div>
                <div class="card-body">
                    
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered  mt-3 ">
                            <thead class="thead-light">
                                <tr class="text-center">
                                    <th>Año</th>
                                    <th>Mes</th>
                                    <th>Total Vendido (kg/piezas)</th>

                                </tr>
                            </thead>
                            <tbody>
                                {% load humanize %} <!-- Cargar el módulo humanize -->
                                {% for item in items %}
                                <tr class="text-center">
                                    <td>{{ item.año }}</td>
                                    <td>{{ item.mes }}</td>
                                    <td>{{ item.total_vendido|floatformat:2|intcomma }}</td>
                                    <!-- Agregar intcomma -->

                                </tr>
                                {% endfor %}
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}


{% endblock %}