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

{% block content %}
<div class="bg-white rounded-lg shadow-md overflow-hidden">
    {# Tabs Navigation #}
    <div class="border-b border-gray-200">
        <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500" role="tablist">
            <li class="mr-2" role="presentation">
                <button class="inline-flex items-center p-4 border-b-2 border-blue-600 rounded-t-lg text-blue-600 hover:text-blue-700 group"
                        id="overview-tab" data-tabs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">
                    <i class="fas fa-home mr-2"></i>
                    Vue d'ensemble
                </button>
            </li>
            <li class="mr-2" role="presentation">
                <button class="inline-flex items-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 group"
                        id="forms-tab" data-tabs-target="#forms" type="button" role="tab" aria-controls="forms" aria-selected="false">
                    <i class="fas fa-edit mr-2"></i>
                    Formulaires
                </button>
            </li>
            <li class="mr-2" role="presentation">
                <button class="inline-flex items-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 group"
                        id="navigation-tab" data-tabs-target="#navigation" type="button" role="tab" aria-controls="navigation" aria-selected="false">
                    <i class="fas fa-compass mr-2"></i>
                    Navigation
                </button>
            </li>
            <li class="mr-2" role="presentation">
                <button class="inline-flex items-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 group"
                        id="modals-tab" data-tabs-target="#modals" type="button" role="tab" aria-controls="modals" aria-selected="false">
                    <i class="fas fa-window-maximize mr-2"></i>
                    Modals & Alerts
                </button>
            </li>
            <li class="mr-2" role="presentation">
                <button class="inline-flex items-center p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 group"
                        id="tables-tab" data-tabs-target="#tables" type="button" role="tab" aria-controls="tables" aria-selected="false">
                    <i class="fas fa-table mr-2"></i>
                    Tables & Cards
                </button>
            </li>
        </ul>
    </div>

    {# Tabs Content #}
    <div id="tabContentExample">
        {# Overview Tab #}
        <div class="p-6" id="overview" role="tabpanel" aria-labelledby="overview-tab">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">Bienvenue dans la démo Flowbite</h2>
            <p class="text-gray-600 mb-6">
                Cette page présente tous les composants Flowbite disponibles pour vos futurs développements.
                Explorez les différentes sections via les onglets ci-dessus.
            </p>

            {# Quick Stats Grid #}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                {% for stat in sampleData.stats %}
                <div class="bg-gradient-to-br from-white to-gray-50 rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm font-medium text-gray-600">{{ stat.label }}</span>
                        {% if stat.trend == 'up' %}
                            <i class="fas fa-arrow-up text-green-500"></i>
                        {% else %}
                            <i class="fas fa-arrow-down text-red-500"></i>
                        {% endif %}
                    </div>
                    <div class="text-3xl font-bold text-gray-900">{{ stat.value }}</div>
                    <div class="mt-2">
                        <span class="text-sm {% if stat.trend == 'up' %}text-green-600{% else %}text-red-600{% endif %}">
                            {{ stat.change }}
                        </span>
                        <span class="text-xs text-gray-500 ml-1">vs dernier mois</span>
                    </div>
                </div>
                {% endfor %}
            </div>

            {# Features Grid #}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="border border-gray-200 rounded-lg p-6">
                    <i class="fas fa-check-circle text-green-500 text-2xl mb-3"></i>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Composants prêts à l'emploi</h3>
                    <p class="text-gray-600 text-sm">
                        Plus de 50+ composants Flowbite prêts à être utilisés dans vos projets avec Tailwind CSS.
                    </p>
                </div>
                <div class="border border-gray-200 rounded-lg p-6">
                    <i class="fas fa-paint-brush text-blue-500 text-2xl mb-3"></i>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Personnalisable</h3>
                    <p class="text-gray-600 text-sm">
                        Tous les composants sont personnalisables avec les classes utilitaires de Tailwind CSS.
                    </p>
                </div>
                <div class="border border-gray-200 rounded-lg p-6">
                    <i class="fas fa-mobile-alt text-purple-500 text-2xl mb-3"></i>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Responsive</h3>
                    <p class="text-gray-600 text-sm">
                        Design responsive par défaut, optimisé pour mobile, tablette et desktop.
                    </p>
                </div>
                <div class="border border-gray-200 rounded-lg p-6">
                    <i class="fas fa-bolt text-yellow-500 text-2xl mb-3"></i>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Performance</h3>
                    <p class="text-gray-600 text-sm">
                        Composants légers et optimisés pour des performances maximales.
                    </p>
                </div>
            </div>
        </div>

        {# Forms Tab #}
        <div class="hidden p-6" id="forms" role="tabpanel" aria-labelledby="forms-tab">
            {% include 'flowbite_test/sections/_forms.html.twig' %}
        </div>

        {# Navigation Tab #}
        <div class="hidden p-6" id="navigation" role="tabpanel" aria-labelledby="navigation-tab">
            {% include 'flowbite_test/sections/_navigation.html.twig' %}
        </div>

        {# Modals Tab #}
        <div class="hidden p-6" id="modals" role="tabpanel" aria-labelledby="modals-tab">
            {% include 'flowbite_test/sections/_modals_alerts.html.twig' %}
        </div>

        {# Tables Tab #}
        <div class="hidden p-6" id="tables" role="tabpanel" aria-labelledby="tables-tab">
            {% include 'flowbite_test/sections/_tables_cards.html.twig' with {'users': sampleData.users} %}
        </div>
    </div>
</div>

{# Tabs functionality script #}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('[role="tab"]');
    const tabPanels = document.querySelectorAll('[role="tabpanel"]');

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-tabs-target');

            // Reset all tabs
            tabButtons.forEach(btn => {
                btn.classList.remove('border-blue-600', 'text-blue-600');
                btn.classList.add('border-transparent', 'text-gray-500');
                btn.setAttribute('aria-selected', 'false');
            });

            // Hide all panels
            tabPanels.forEach(panel => {
                panel.classList.add('hidden');
            });

            // Activate clicked tab
            this.classList.remove('border-transparent', 'text-gray-500');
            this.classList.add('border-blue-600', 'text-blue-600');
            this.setAttribute('aria-selected', 'true');

            // Show target panel
            const targetPanel = document.querySelector(targetId);
            if (targetPanel) {
                targetPanel.classList.remove('hidden');
            }
        });
    });
});
</script>
{% endblock %}