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

{% block title %}{{ 'directory.title'|trans }} - {{ parent() }}{% endblock %}

{% block head %}
<!-- AOS Animation Library -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
{% endblock %}

{% set body_class = 'page-with-hero' %}

{% block hero %}
    <!-- Hero Section -->
<section class="hero-section directory-hero">
        <div class="container">
            <div class="hero-content" data-aos="fade-up" data-aos-duration="1000">
                <h1 class="hero-title">Annuaire des Antiquaires</h1>
                <p class="hero-subtitle">Découvrez les meilleurs professionnels des antiquités partout en France</p>
                
                <div class="hero-stats" data-aos="fade-up" data-aos-delay="200">
                <div class="stat-item">
                    <span class="stat-number">{{ pagination.totalMembers|default(0) }}</span>
                    <span class="stat-label">Antiquaires</span>
                    </div>
                <div class="stat-item">
                    <span class="stat-number">{{ regions|default([])|length }}</span>
                    <span class="stat-label">Régions</span>
                    </div>
                <div class="stat-item">
                    <span class="stat-number">{{ specialties|default([])|length }}</span>
                    <span class="stat-label">Spécialités</span>
                    </div>
                </div>
                
                <!-- Filtres modernes dans le hero -->
                <div class="filters-section hero-filters" data-aos="fade-up" data-aos-delay="400" id="filters">
                    <form method="GET" id="directoryFilters">
                        <div class="filters-grid">
                            <div class="filter-group">
                                <label class="filter-label">
                                    <i class="fas fa-search"></i>
                                    Recherche
                                </label>
                                <input type="text" 
                                       name="search" 
                                       class="filter-input" 
                                       value="{{ filters.search|default('') }}" 
                                       placeholder="Nom, ville, spécialité...">
                            </div>

                            <div class="filter-group">
                                <label class="filter-label">
                                    <i class="fas fa-map-marker-alt"></i>
                                    Région
                                </label>
                                <select name="region" class="filter-input">
                                    <option value="">Toutes les régions</option>
                                    {% for region in regions|default([]) %}
                                        <option value="{{ region.id }}" 
                                                {% if filters.region|default(0) == region.id %}selected{% endif %}>
                                            {{ region.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="filter-group">
                                <label class="filter-label">
                                    <i class="fas fa-star"></i>
                                    Spécialité
                                </label>
                                <select name="specialty" class="filter-input">
                                    <option value="">Toutes les spécialités</option>
                                    {% for specialty in specialties|default([]) %}
                                        <option value="{{ specialty.id }}" 
                                                {% if filters.specialty|default(0) == specialty.id %}selected{% endif %}>
                                            {{ specialty.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="filter-group">
                                <label class="filter-label">
                                    <i class="fas fa-sort"></i>
                                    Tri
                                </label>
                                <select name="sort" class="filter-input">
                                    <option value="name_asc" {% if filters.sort|default('name_asc') == 'name_asc' %}selected{% endif %}>Nom A-Z</option>
                                    <option value="name_desc" {% if filters.sort|default('name_asc') == 'name_desc' %}selected{% endif %}>Nom Z-A</option>
                                    <option value="city_asc" {% if filters.sort|default('name_asc') == 'city_asc' %}selected{% endif %}>Ville A-Z</option>
                                    <option value="recent" {% if filters.sort|default('name_asc') == 'recent' %}selected{% endif %}>Plus récents</option>
                                </select>
                            </div>
                        </div>

                        <div class="filter-buttons">
                            <button type="submit" class="btn-filter">
                                <i class="fas fa-search"></i>
                                Rechercher
                            </button>
                            <a href="{{ path('directory_index') }}#filters" class="btn-reset">
                                <i class="fas fa-times"></i>
                                Réinitialiser
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block body %}
    <div class="container">

    <!-- Résultats -->
    <section class="results-section">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3>
                {% if pagination is defined and pagination.totalMembers is defined %}
                    {{ pagination.totalMembers }} antiquaire(s) trouvé(s)
                {% else %}
                    Antiquaires
                {% endif %}
            </h3>
                </div>

        {% if members is defined and members|length > 0 %}
            <div class="members-grid">
                {% for member in members %}
                    <article class="member-card" data-aos="fade-up" data-aos-delay="{{ loop.index * 100 }}">
                        <div class="member-image">
                            {% if member.logo %}
                                                                        <img src="{{ asset('uploads/members/logos/' ~ member.logo) }}" 
                                     alt="{{ member.companyName }}" 
                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                <div class="placeholder-logo" style="display: none;">
                                    <i class="fas fa-store"></i>
                                </div>
                            {% else %}
                                <div class="placeholder-logo">
                                    <i class="fas fa-store"></i>
                                </div>
                            {% endif %}
                            
                            <!-- Badge Premium -->
                            <div class="premium-badge">
                                <i class="fas fa-crown"></i>
                                <span>PREMIUM</span>
                            </div>
                            
                            <div class="member-overlay">
                                {% if member.slug %}
                                    <a href="{{ path('app_store_show', {slug: member.slug, locale: 'fr'}) }}" class="view-btn">
                                        <i class="fas fa-eye me-2"></i>Voir le profil
                                    </a>
                                {% else %}
                                <a href="{{ path('directory_member_show', {id: member.id}) }}" class="view-btn">
                                    <i class="fas fa-eye me-2"></i>Voir le profil
                                </a>
                                {% endif %}
                            </div>
                        </div>

                        <div class="member-info">
                            <h3 class="member-title">{{ member.companyName }}</h3>
                            <p class="member-location">
                                <i class="fas fa-map-marker-alt"></i>
                                {{ member.city|default('Ville non renseignée') }}
                                {% if member.region %}, {{ member.region.name }}{% endif %}
                            </p>
                            
                            {% if member.specialties is defined and member.specialties|length > 0 %}
                                <div class="member-specialties">
                                    {% for specialty in member.specialties|slice(0, 3) %}
                                        <span class="specialty-tag">{{ specialty.name }}</span>
                                    {% endfor %}
                                    {% if member.specialties|length > 3 %}
                                        <span class="specialty-tag specialty-more">+{{ member.specialties|length - 3 }}</span>
                                    {% endif %}
                                </div>
                            {% endif %}
                            
                            {% if member.description %}
                                <p class="member-description">{{ member.description|striptags|slice(0, 120) }}{% if member.description|length > 120 %}...{% endif %}</p>
                            {% endif %}
                            
                            <div class="member-stats">
                                {% if member.items is defined and member.items|length > 0 %}
                                    <span class="stat-item">
                                        <i class="fas fa-gem"></i>
                                        {{ member.items|length }} objets
                                    </span>
                                {% endif %}
                                {% if member.createdAt %}
                                    <span class="stat-item">
                                        <i class="fas fa-calendar"></i>
                                        Depuis {{ member.createdAt|date('Y') }}
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    </article>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center py-5">
                <i class="fas fa-search fa-3x text-muted mb-3"></i>
                <h4>Aucun antiquaire trouvé</h4>
                <p class="text-muted">Essayez de modifier vos critères de recherche.</p>
            </div>
        {% endif %}

        <!-- Pagination -->
        {% if pagination is defined and pagination.totalPages is defined and pagination.totalPages > 1 %}
            <div class="d-flex justify-content-center mt-4">
                <nav aria-label="Pagination antiquaires">
                    <ul class="pagination">
                        {% if pagination.page is defined and pagination.page > 1 %}
                            <li class="page-item">
                                <a class="page-link" href="{{ path('directory_index', filters|default({})|merge({page: pagination.page - 1})) }}#filters">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                            </li>
                        {% endif %}

                        {% for page in 1..pagination.totalPages %}
                            {% if page == pagination.page|default(1) %}
                                <li class="page-item active">
                                    <span class="page-link">{{ page }}</span>
                                </li>
                            {% else %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ path('directory_index', filters|default({})|merge({page: page})) }}#filters">{{ page }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if pagination.page is defined and pagination.page < pagination.totalPages %}
                            <li class="page-item">
                                <a class="page-link" href="{{ path('directory_index', filters|default({})|merge({page: pagination.page + 1})) }}#filters">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        {% endif %}
    </section>
</div>

<!-- Scripts AOS -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialisation AOS optimisée
    AOS.init({
        duration: 800,
        easing: 'ease-out-cubic',
        once: true,
        offset: 50,
        disable: function() {
            // Désactiver sur mobile pour les performances
            return window.innerWidth < 768;
        }
    });

    // Auto-submit des filtres
    const filterForm = document.getElementById('directoryFilters');
    const filterInputs = filterForm ? filterForm.querySelectorAll('select, input[type="text"]') : [];
    
    // Fonction pour soumettre le formulaire avec ancre
    function submitFormWithAnchor() {
        try {
            // Ajouter l'ancre à l'action du formulaire
            const currentAction = filterForm.action || window.location.pathname;
            filterForm.action = currentAction + '#filters';
            filterForm.submit();
        } catch (error) {
            // En cas d'erreur, rediriger vers la page d'annuaire
            window.location.href = '{{ path('directory_index') }}#filters';
        }
    }
    
    filterInputs.forEach(input => {
        let timeout;
        const event = input.type === 'text' ? 'input' : 'change';
        
        input.addEventListener(event, function() {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                submitFormWithAnchor();
            }, input.type === 'text' ? 1000 : 300);
        });
    });
    
    // Gérer la soumission manuelle du formulaire (bouton "Rechercher")
    if (filterForm) {
        filterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            submitFormWithAnchor();
        });
    }
    
    // Smooth scroll vers les filtres si l'ancre est présente dans l'URL
    if (window.location.hash === '#filters') {
        setTimeout(() => {
            const filtersSection = document.getElementById('filters');
            if (filtersSection) {
                const rect = filtersSection.getBoundingClientRect();
                const offset = 20; // Espace au-dessus des filtres
                const scrollTop = window.pageYOffset + rect.top - offset;
                
                window.scrollTo({
                    top: scrollTop,
                    behavior: 'smooth'
                });
            }
        }, 100);
    }
});
</script>
{% endblock %}