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

{% block title %}Tableau de bord {{ parent() }}{% endblock %}

{% block body %}
{# Define a macro for tab links #}
{% macro tab_link(id, title) %}
    <li>
        <button aria-selected="false" role="tab" aria-controls="{{ id }}" id="tab-{{ id }}" class="tab-link flex items-center py-2 px-4 w-full text-left rounded hover:bg-gray-700 focus:outline-none" data-tab="{{ id }}">
            <span class="flex-1">{{ title }}</span>
            <span class="w-1 h-8 bg-blue-600 hidden tab-indicator"></span>
        </button>
    </li>
{% endmacro %}

<div class="flex">
    <!-- Barre latérale -->
    <nav class="w-64 bg-gray-800 text-white min-h-screen py-4 px-6" aria-label="Navigation du tableau de bord">
        <div class="mb-6">
            <h1 class="text-xl font-bold">Tableau de bord</h1>
            <button id="dashboard-home" class="block w-full text-left py-2 px-4 text-white bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600" aria-expanded="false" aria-controls="default-content">Accueil</button>
        </div>
        <input type="text" id="search-input" placeholder="Rechercher..." class="mb-4 w-full p-2 rounded" aria-label="Rechercher une section">
        <ul id="nav-list" role="tablist">
            {{ _self.tab_link('audit', 'Audit') }}
            {{ _self.tab_link('avis', 'Avis') }}
            {{ _self.tab_link('categories', 'Catégories') }}
            {{ _self.tab_link('clients', 'Clients') }}
            {{ _self.tab_link('commandes', 'Commandes') }}
            {{ _self.tab_link('contact', 'Contact') }}
            {{ _self.tab_link('devis', 'Devis') }}
            {{ _self.tab_link('employes', 'Employés') }}
            {{ _self.tab_link('location', 'Location') }}
            {{ _self.tab_link('nos-postes', 'Nos Postes') }}
            {{ _self.tab_link('produits', 'Produits') }}
            {{ _self.tab_link('rendezvous', 'Rendez-vous') }}
            {{ _self.tab_link('test', 'test') }}
        </ul>
    </nav>

    <!-- Contenu principal -->
    <main class="flex-1 p-6 bg-gray-100">
        <div id="default-content" role="tabpanel" aria-labelledby="dashboard-home" class="text-gray-700">
            <h2>Accueil du tableau de bord</h2>
            <p>Bienvenue sur le tableau de bord. Utilisez les onglets à gauche pour naviguer entre les sections.</p>
            <h2>Statistiques</h2>
            {{ render(controller('App\\Controller\\StatisticsController::index')) }}
        </div>
        <div class="tab-content">
            <div id="audit" role="tabpanel" aria-labelledby="tab-audit" class="tab-pane hidden">
                <h2>Audit</h2>
                {{ render(controller('App\\Controller\\AdminController::audit')) }}
            </div>
            <div id="avis" role="tabpanel" aria-labelledby="tab-avis" class="tab-pane hidden">
                <h2>Avis</h2>
                <a href="{{ path('app_review_new') }}" class="block text-blue-600 hover:text-blue-800">Création d'avis</a>
                {{ render(controller('App\\Controller\\ReviewController::index')) }}
            </div>
            <div id="categories" role="tabpanel" aria-labelledby="tab-categories" class="tab-pane hidden">
                <h2>Catégories</h2>
                {{ render(controller('App\\Controller\\CategoryController::index')) }}
            </div>
            <div id="clients" role="tabpanel" aria-labelledby="tab-clients" class="tab-pane hidden">
                <h2>Clients</h2>
                <a href="#" class="block text-blue-600 hover:text-blue-800">Voir les clients</a>
            </div>
            <div id="commandes" role="tabpanel" aria-labelledby="tab-commandes" class="tab-pane hidden">
                <h2>Commandes</h2>
                {{ render(controller('App\\Controller\\AdminController::command')) }}
            </div>
            <div id="contact" role="tabpanel" aria-labelledby="tab-contact" class="tab-pane hidden">
                <h2>Contact</h2>
                {{ render(controller('App\\Controller\\ContactController::index')) }}
            </div>
            <div id="devis" role="tabpanel" aria-labelledby="tab-devis" class="tab-pane hidden">
                <h2>Devis</h2>
                {{ render(controller('App\\Controller\\QuoteController::index')) }}
            </div>
            <div id="employes" role="tabpanel" aria-labelledby="tab-employes" class="tab-pane hidden">
                <h2>Employés</h2>
                <a href="{{ path('app_contract_new') }}" class="block text-blue-600 hover:text-blue-800">Créer un contrat de travail</a>
                <a href="{{ path('admin_user', {'type': 'employee'}) }}" class="block text-blue-600 hover:text-blue-800">Effectifs</a>
                <a href="#" class="block text-blue-600 hover:text-blue-800">Gestion des présences</a>
                <a href="{{ path('app_contract_index') }}" class="block text-blue-600 hover:text-blue-800">Historique des contrats</a>
            </div>
            <div id="location" role="tabpanel" aria-labelledby="tab-location" class="tab-pane hidden">
                <h2>Locations</h2>
                {{ render(controller('App\\Controller\\AdminController::rental')) }}
            </div>
            <div id="nos-postes" role="tabpanel" aria-labelledby="tab-nos-postes" class="tab-pane hidden">
                <h2>Nos Postes</h2>
                {{ render(controller('App\\Controller\\JobPositionController::index')) }}
            </div>
            <div id="produits" role="tabpanel" aria-labelledby="tab-produits" class="tab-pane hidden">
                <h2>Produits</h2>
                {{ render(controller('App\\Controller\\AdminController::product')) }}
            </div>
            <div id="rendezvous" role="tabpanel" aria-labelledby="tab-rendezvous" class="tab-pane hidden">
                <h2>Rendez-vous</h2>
                {{ render(controller('App\\Controller\\AppointmentController::index')) }}
            </div>
        </div>
    </main>
</div>

<script>
$(function() {
    const $tabLinks = $('.tab-link');
    const $tabPanes = $('.tab-pane');
    const $indicators = $('.tab-indicator');
    const $defaultContent = $('#default-content');

    function resetTabs() {
        $tabLinks.removeClass('bg-gray-700 text-blue-600')
                 .attr('aria-selected', 'false')
                 .attr('aria-expanded', 'false');
        $indicators.addClass('hidden');
        $tabPanes.addClass('hidden');
    }

    $tabLinks.on('click', function() {
        resetTabs();
        const tabId = $(this).data('tab');

        $(this).addClass('bg-gray-700 text-blue-600')
               .attr('aria-selected', 'true')
               .attr('aria-expanded', 'true')
               .find('.tab-indicator').removeClass('hidden');

        $('#' + tabId).removeClass('hidden');
        $defaultContent.addClass('hidden');
    });

    $('#dashboard-home').on('click', function() {
        resetTabs();
        $defaultContent.removeClass('hidden');
        $(this).attr('aria-expanded', 'true');
    });

    $('#search-input').on('input', function() {
        const searchTerm = $(this).val().toLowerCase();
        $('#nav-list li').each(function() {
            const $button = $(this).find('.tab-link');
            const sectionText = $button.text().toLowerCase();
            const linksText = $(this).find('.tab-pane').find('a').map(function() {
                return $(this).text().toLowerCase();
            }).get().join(' ');
            const isVisible = sectionText.includes(searchTerm) || linksText.includes(searchTerm);
            $(this).toggle(isVisible);
        });
    });

    resetTabs();
});
</script>
{% endblock %}