{% extends 'base.html' %}
{% load static %}
{% block titulo %}COMPRAS{% endblock %}
{% block content %}

<div class="row">
    <div class="col-md-1"></div> <!-- Columna vacía al principio para espaciado -->
    <div class="col-md-10">
        <form method="get" action="{{ventas_mes}}">
            <div class="row justify-content-center mb-4">
                <div class="col-md-6">
                    <label for="yearSelect" class="form-label"><i class="fas fa-calendar-alt"></i> SELECCIONA
                        AÑO:</label>
                    <select class="form-control" id="yearSelect" name="year" onchange="this.form.submit()">
                        {% for anio in anios %}
                        <option value="{{ anio }}" {% if anio == anio_seleccionado %}selected{% endif %}>
                            {{ anio }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-6">
                    <label for="yearSelect" class="form-label"><i class="fas fa-calendar-alt"></i> SELECCIONA
                        MES:</label>
                    <select class="form-control" id="monthSelect" name="month" onchange="this.form.submit()">
                        {% for mes in meses %}
                        <option value="{{ mes.0 }}" {% if mes.0 == mes_seleccionado %}selected{% endif %}>
                            {{ mes.1 }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </form>

    </div>
    <div class="col-md-1"></div> <!-- Columna vacía al final para espaciado -->
</div>

<div class="row">
    <div class="col-md-1"></div> <!-- Columna vacía al principio para espaciado -->
    <div class="col-md-10">
        <!-- Gráfica Diaria -->
        <div class=" mt-5">
            <div class="card marine-chart">
                <div class="card marine-chart">
                    <div class="card-header chart-header">
                        COMPRAS, CUENTAS POR PAGAR Y ABONOS DIARIOS
                    </div>

                    <div class="card-body">
                        <div id="graph-container" class="mt-3">
                            {{ plot_diario|safe }} <!-- Gráfica Diaria -->
                        </div>
                    </div>
                </div>
            </div>
            <div class=" mt-5">

                <!-- Gráfica del Mes Seleccionado -->
                <div class="card marine-chart mt-5">
                    <div class="card marine-chart">
                        <div class="card-header chart-header">
                            COMPRAS, CUENTAS POR PAGAR Y ABONOS EN EL MES SELECCIONADO
                        </div>
                        <div class="card-body">
                            <div id="graph-container" class="mt-3">
                                {{ plot_mes|safe }} <!-- Gráfica Mensual -->
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <div class="col-md-1"></div> <!-- Columna vacía al final para espaciado -->
        </div>

        <!-- <div class="row">
    <div class="col-md-1"></div>  Columna vacía al principio para espaciado
    <div class="col-md-10">
        
        <div class="card shadow mb-4">
            <div class="card-body">
                <h5 class="card-title text-center">
                    <i class="fas fa-chart-line"></i> COMPRAS, CRÉDITOS Y ABONOS
                </h5>
                <div id="graph-container" class="mt-3">
                    {{ plot_total|safe }} 
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-1"></div> Columna vacía al final para espaciado
</div> -->

        {% endblock %}