solarcalc/templates/proyectos.html

{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>Simulaciones Guardadas</h2>
            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">Volver al Inicio</a>
        </div>
        
        <!-- Filter Form -->
        <div class="card mb-4">
            <div class="card-body">
                <form action="{{ url_for('main.proyectos') }}" method="GET" class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label for="id_casa" class="form-label">Filtrar por Casa</label>
                        <select name="id_casa" class="form-select" onchange="this.form.submit()">
                            <option value="">Todas las casas</option>
                            {% for casa in casas %}
                            <option value="{{ casa.id_casa }}" {% if selected_casa == casa.id_casa %}selected{% endif %}>{{ casa.nombre }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <a href="{{ url_for('main.proyectos') }}" class="btn btn-outline-secondary">Limpiar Filtro</a>
                    </div>
                </form>
            </div>
        </div>

        {% if proyectos %}
        <div class="card mb-4">
            <div class="card-header">
                Comparativa de Costos Mensuales: Sin Solar vs Con Solar
            </div>
            <div class="card-body">
                <canvas id="savingsChart" width="400" height="100"></canvas>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Fecha</th>
                        <th>Cliente</th>
                        <th>Ciudad</th>
                        <th>Casa</th>
                        <th>Panel</th>
                        <th>Cantidad</th>
                        <th>Energía (kWh/mes)</th>
                        <th>Ahorro ($/mes)</th>
                    </tr>
                </thead>
                <tbody>
                    {% for proyecto in proyectos %}
                    <tr>
                        <td>{{ proyecto.fecha_referencia.strftime('%Y-%m-%d') }}</td>
                        <td>{{ proyecto.nombre_cliente }}</td>
                        <td>{{ proyecto.ciudad.nombre_ciudad }}</td>
                        <td>{{ proyecto.casa.nombre if proyecto.casa else 'N/A' }}</td>
                        <td>{{ proyecto.panel.marca }} {{ proyecto.panel.modelo }}</td>
                        <td>{{ proyecto.cantidad_paneles }}</td>
                        <td>{{ "%.2f"|format(proyecto.energia_estimada_mensual) }}</td>
                        <td>{{ "%.2f"|format(proyecto.ahorro_estimado) if proyecto.ahorro_estimado else '-' }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="alert alert-info">
            No hay simulaciones guardadas todavía.
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('savingsChart').getContext('2d');
    const savingsChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {{ labels | tojson }},
            datasets: [
                {
                    label: 'Costo Sin Solar ($)',
                    data: {{ costo_sin_solar | tojson }},
                    backgroundColor: 'rgba(220, 53, 69, 0.6)',
                    borderColor: 'rgba(220, 53, 69, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Costo Con Solar ($)',
                    data: {{ costo_con_solar | tojson }},
                    backgroundColor: 'rgba(25, 135, 84, 0.6)',
                    borderColor: 'rgba(25, 135, 84, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Costo Mensual ($)'
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        footer: function(tooltipItems) {
                            let sinSolar = 0;
                            let conSolar = 0;
                            tooltipItems.forEach(function(tooltipItem) {
                                if (tooltipItem.datasetIndex === 0) {
                                    sinSolar = tooltipItem.raw;
                                } else if (tooltipItem.datasetIndex === 1) {
                                    conSolar = tooltipItem.raw;
                                }
                            });
                            // Nota: Como el tooltip muestra un item a la vez por defecto en modo 'nearest', 
                            // esto funciona mejor si el modo es 'index'.
                            return '';
                        }
                    }
                }
            },
            interaction: {
                mode: 'index',
                intersect: false,
            }
        }
    });
</script>
{% endblock %}