{% extends "base/base.html" %}
{% block content %}

<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">
        Normierter Verbrauch zu <b>{{ reu.REID.City }}, {{ reu.REID.Street }} {{ reu.REID.HouseNumber }}, {{ reu.REUDesc }}</b>
– für Nutzer <b>{{ nutzer.fullName }}</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_spez_api' reuid=reuid nutzer_id=nutzer_id %}";

async function loadCharts() {
    try {
        const response = await fetch(API_URL);
        const data = await response.json();
        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);
            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',
                    intersect: true,
                    callbacks: {
                        label: ctx => ctx.raw === null ? `${ctx.dataset.label}: keine Daten` : `${ctx.dataset.label}: ${ctx.raw} ${einheit}`
                    }
                }
            }
        }
    });
}

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