{% extends "fatanalysis/base.html" %}
{% load i18n %}

{% block fatanalysis_content %}
    <div class="row">
        <div class="col-md-12">
            <h2>{{ title }} <small>({{ period_type }} {% trans "Days Data" %})</small></h2>
            <a href="javascript:history.back()" class="btn btn-default pull-right"><i class="fas fa-arrow-left"></i> {% trans "Back" %}</a>
        </div>
    </div>
    <br>
    
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{% trans "Historical FAT Trend per Type" %}</h3>
                </div>
                <div class="panel-body">
                    <canvas id="playerTrendChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{% trans "Current FAT Breakdown" %} <small>({{ latest_period.upload_date|date:"Y-m-d" }})</small></h3>
                </div>
                <div class="panel-body">
                    {% if pie_data %}
                        <canvas id="playerPieChart"></canvas>
                    {% else %}
                        <p class="text-center text-muted">{% trans "No FATs in the latest period." %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{% trans "Historical Raw Data" %}</h3>
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-hover" id="player-table">
                        <thead>
                            <tr>
                                <th>{% trans "Upload Date" %}</th>
                                <th>{% trans "Total FATs" %}</th>
                                {% for header in dynamic_headers %}
                                <th>{{ header }}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for entry in entries reversed %}
                            <tr>
                                <td>{{ entry.period.upload_date|date:"Y-m-d H:i" }}</td>
                                <td><strong>{{ entry.total_fats }}</strong></td>
                                {% for header in dynamic_headers %}
                                    {% for key, val in entry.fat_details.items %}
                                        {% if key == header %}
                                            <td>{{ val }}</td>
                                        {% endif %}
                                    {% endfor %}
                                    {% if header not in entry.fat_details %}
                                        <td>0</td>
                                    {% endif %}
                                {% endfor %}
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="{{ dynamic_headers|length|add:2 }}" class="text-center">{% trans "No FAT data available." %}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    {{ block.super }}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function() {
            $('#player-table').DataTable({
                "order": [[ 0, "desc" ]]
            });

            // Trend Chart
            const trendCtx = document.getElementById('playerTrendChart').getContext('2d');
            new Chart(trendCtx, {
                type: 'line',
                data: {
                    labels: {{ trend_labels|safe }},
                    datasets: {{ trend_datasets|safe }}
                },
                options: {
                    responsive: true,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // Pie Chart
            {% if pie_data %}
            const pieCtx = document.getElementById('playerPieChart').getContext('2d');
            new Chart(pieCtx, {
                type: 'pie',
                data: {
                    labels: {{ pie_labels|safe }},
                    datasets: [{
                        data: {{ pie_data|safe }},
                        backgroundColor: [
                            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
                            '#FF9F40', '#E7E9ED', '#8AC926', '#1982C4', '#6A4C93'
                        ]
                    }]
                },
                options: {
                    responsive: true
                }
            });
            {% endif %}
        });
    </script>
{% endblock %}