{% extends 'base.html.twig' %}

{% block head %}{{ parent() }}{% endblock %}
{% block header %}{{ parent() }}{% endblock %}

{% block body %}
    <div class="container py-4">
        <div class="row mb-4">
            <div class="col-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{{ path('admin') }}" class="text-decoration-none">
                                <i class="fas fa-arrow-left me-2"></i>Retourner à l'administration
                            </a>
                        </li>
                    </ol>
                </nav>
                <h2 class="text-center mb-4 text-eolia">Statistiques</h2>
            </div>
        </div>
        
        {% set statGroups = {
            'sports': {
                'title': 'Statistiques par sport',
                'icon': 'running',
                'stats': ['stat1', 'stat2', 'stat3']
            },
            'people': {
                'title': 'Statistiques par personne',
                'icon': 'users',
                'stats': ['stat4', 'stat5', 'stat6', 'stat8']
            },
            'finance': {
                'title': 'Statistiques financières',
                'icon': 'euro-sign',
                'stats': ['stat7']
            }
        } %}
        
        <div class="row">
            {% for groupKey, group in statGroups %}
                <div class="col-lg-6 mb-4">
                    <div class="card shadow">
                        <div class="card-header bg-eolia text-white py-3">
                            <h3 class="h4 mb-0"><i class="fas fa-{{ group.icon }} me-2"></i> {{ group.title }}</h3>
                        </div>
                        <div class="card-body">
                            <ul class="nav nav-tabs mb-3" id="{{ groupKey }}-tabs" role="tablist">
                                {% for statKey in group.stats %}
                                    {% set stat = statsConfig[statKey] %}
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link {% if loop.first %}active{% endif %}" 
                                                id="{{ statKey }}-tab" 
                                                data-bs-toggle="tab" 
                                                data-bs-target="#{{ statKey }}" 
                                                type="button" 
                                                role="tab"
                                                aria-controls="{{ statKey }}" 
                                                aria-selected="{{ loop.first ? 'true' : 'false' }}">
                                            {{ stat.title }}
                                        </button>
                                    </li>
                                {% endfor %}
                            </ul>
                            
                            <div class="tab-content" id="{{ groupKey }}-content">
                                {% for statKey in group.stats %}
                                    {% set stat = statsConfig[statKey] %}
                                    <div class="tab-pane fade {% if loop.first %}show active{% endif %}" 
                                         id="{{ statKey }}" 
                                         role="tabpanel" 
                                         aria-labelledby="{{ statKey }}-tab">
                                        
                                        {{ form_start(stat.formView, {'attr': {'class': 'needs-validation mb-3'}}) }}
                                            <div class="row g-3 align-items-end">
                                                {% for field in stat.formView %}
                                                    <div class="col{% if not loop.last %}-md-5{% else %}-md-2{% endif %}">
                                                        <div class="mb-2">
                                                            {{ form_widget(field, {'attr': {'class': 'form-control btn btn-outline-secondary'}}) }}
                                                        </div>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        {{ form_end(stat.formView) }}
                                        
                                        <div class="mt-3">
                                            {% if stat.result %}
                                                <div class="table-responsive">
                                                    <table class="table table-sm table-striped table-hover">
                                                        <thead class="table-light">
                                                            <tr>
                                                                {% for header in stat.resultHeader %}
                                                                    <th>{{ header }}</th>
                                                                {% endfor %}
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            {% for row in stat.result %}
                                                                <tr>
                                                                    {% for field in stat.resultFields %}
                                                                        <td>{{ attribute(row, field) }}</td>
                                                                    {% endfor %}
                                                                </tr>
                                                            {% endfor %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            {% else %}
                                                <div class="alert alert-info py-2 mb-0">
                                                    <i class="fas fa-info-circle me-2"></i>Pas de données disponibles
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{% block footer %}{{ parent() }}{% endblock %}