{% extends "base.html" %}
{% load static %}
{% load bootstrap4 %}

{% block head_extra %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
    .container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .chart-container {
        width: 60%;
        position: relative;
    }
    .doughnut-container {
        width: 35%;
        position: relative;
        text-align: center;
    }
    .summary-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.5em;
        font-weight: bold;
        pointer-events: none;
    }
    @media (max-width: 768px) {
        .container {
            flex-direction: column;
            align-items: center;
        }
        .chart-container, .doughnut-container {
            width: 80%;
        }
    }
</style>
{% endblock %}

{% block content %}
<section>
    <div class="container px-5">
        <div class="row gx-5 align-items-center">
            <div class="col-lg-12">
                <div class="p-5">
                    <div class="container">
                        <a href="{% url 'kudosdeluxe:link' %}">Back</a>
                        <!-- Stacked Bar Chart -->
                        <div class="chart-container">
                            <canvas id="barChart"></canvas>
                        </div>
                
                        <!-- Doughnut Chart with Total Minutes -->
                        <div class="doughnut-container">
                            <canvas id="doughnutChart"></canvas>
                            <div class="summary-box">
                                {{ total_minutes }}<br>min
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock content %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // Stacked Bar Chart
    const barCtx = document.getElementById('barChart').getContext('2d');
    const barChart = new Chart(barCtx, {
        type: 'bar',
        data: {
            labels: {{ days|safe }},
            datasets: {{ bar_datasets|safe }},
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right', // Position legend on the right
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                },
            },
            scales: {
                x: {
                    stacked: true,
                },
                y: {
                    stacked: true,
                    title: {
                        display: true,
                        text: 'Minutes Trained',
                    },
                },
            },
        },
    });

    // Doughnut Chart
    const doughnutCtx = document.getElementById('doughnutChart').getContext('2d');
    const doughnutChart = new Chart(doughnutCtx, {
        type: 'doughnut',
        data: {
            labels: {{ doughnut_labels|safe }},
            datasets: [{
                data: {{ doughnut_data|safe }},
                backgroundColor: {{ doughnut_colors|safe }},
                borderWidth: 1,
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'off', // Position legend on the right
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed !== null) {
                                label += context.parsed + ' mins';
                            }
                            return label;
                        }
                    }
                },
            },
        },
    });
</script>
{% endblock scripts %}