{% extends 'TARJETAS/templates/base.html' %}
{% load static %}

{% block title %}Presupuesto vs Gasto Real{% endblock %}

{% block content %}
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Reporte - Presupuesto vs Gasto Real</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Inicio</a></li>
                    <li class="breadcrumb-item active">Reporte - Presupuesto vs Gasto Real</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">

    <!-- block content -->
    <!-- Default box -->
    <div class="card">
        <div class="card-header d-flex align-items-center">
            <h3 class="card-title"><b>Comparación Presupuesto vs Gasto Real</b></h3>
        </div>
        <div class="card-body" style="max-height: 60vh;">
            <p class="mb-4">Este gráfico compara el <b>presupuesto asignado</b> frente al <b>gasto real</b> mes a mes, ayudando a visualizar desviaciones.</p>
            <canvas id="graficoPresupuestoVsGasto" width="800" height="600"></canvas>
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
            <b>Menú de Sistema</b> - Presupuesto vs Gasto Real
        </div>
        <!-- /.card-footer-->
    </div>
    <!-- /.card -->

</section>
<!-- /.content -->

<style>
    /* Para pantallas grandes (PC) */
    @media (min-width: 768px) {
        .card-body {
            height: 60vh !important;  /* Mantiene 60vh en pantallas grandes */
            margin-bottom: 30px;
        }
    }
</style>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctxPresupuesto = document.getElementById('graficoPresupuestoVsGasto').getContext('2d');
    const graficoPresupuestoVsGasto = new Chart(ctxPresupuesto, {
        type: 'bar',
        data: {
            labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo'],
            datasets: [
                {
                    label: 'Presupuesto ($)',
                    data: [3000, 3200, 3100, 3300, 3400],
                    backgroundColor: 'rgba(54, 162, 235, 0.7)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Gasto Real ($)',
                    data: [2800, 3500, 3000, 3600, 3250],
                    backgroundColor: 'rgba(255, 99, 132, 0.7)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Comparativo Mensual: Presupuesto vs Gasto Real'
                },
                legend: {
                    position: 'top'
                },
                tooltip: {
                    mode: 'index',
                    intersect: false
                }
            },
            scales: {
                x: {
                    stacked: false,
                    title: {
                        display: true,
                        text: 'Meses'
                    }
                },
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Monto en $'
                    }
                }
            }
        }
    });
</script>
{% endblock %}