{% extends "base/base.html" %}
{# Migrated from resources/views/mietve/verbrauch.blade.php #}

{% block content %}

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">
        Verbrauchsübersicht zu <b>{{ mietv.City }}, {{ mietv.Street }} {{ mietv.HouseNumber }}, {{ mietv.REUDesc }}</b>
    </h1>
</div>

<div class="row" id="chart-container">
    <div class="text-center p-4">
        <div class="spinner-border" role="status"></div>
    </div>
</div>

{% endblock content %}

{% block extra_scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script>

const API_URL = "{% url 'app_verbrauch:verbrauch_chart_api_old' mietvid=mietvid %}";

async function loadCharts() {
    try {
        const response = await fetch(API_URL);
        const data = await response.json();


        // Charts rendern
        const container = document.getElementById('chart-container');
        container.innerHTML = '';

        data.charts.forEach(chart => {
            const col = document.createElement('div');
            col.className = 'col-xl-6 mb-4';
            col.innerHTML = `
                <div class="card shadow">
                    <div class="card-header"><b>${chart.Title}</b></div>
                    <div class="card-body">
                        <p>${chart.Text}</p>
                        <canvas id="chart-${chart.ChartType}"></canvas>
                    </div>
                </div>`;
            container.appendChild(col);

            // Chart.js rendern
            renderChart(
                `chart-${chart.ChartType}`,
                chart.charts,
                chart.MassEinheit
            );
        });

    } catch (err) {
        document.getElementById('chart-container').innerHTML =
            `<div class="alert alert-danger">Fehler beim Laden der Daten.</div>`;
    }
}

function renderChart(canvasId, bars, einheit) {
    const ctx = document.getElementById(canvasId).getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],
            datasets: bars.map(bar => ({
                label: bar.year,
                data: bar.data,
                backgroundColor: bar.color,
            }))
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top' },
                tooltip: {
                    mode: 'index',        // alle Datasets eines Monats zusammen
                    intersect: true,     // auch ohne direkten Hover
                    callbacks: {
                        label: ctx => ctx.raw === null ? `${ctx.dataset.label}: keine Daten` : `${ctx.dataset.label}: ${ctx.raw} ${einheit}`
                    }
                }
            }
        }
    });
}

loadCharts();
</script>
{% endblock extra_scripts %}