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

{% block title %}
    {% if query %}
        Recherche : {{ query }} - Antiquités en France
    {% else %}
        Recherche Globale - Antiquités en France
    {% endif %}
{% endblock %}

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

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

{% block hero %}
    <!-- Hero Section avec Recherche -->
<section class="hero-section search-hero">
        <div class="container">
            <div class="hero-content" data-aos="fade-up">
                <h1 class="hero-title">
                    {% if query %}
                    Résultats pour "<span style="color: var(--aef-accent-gold);">{{ query }}</span>"
                    {% else %}
                    Recherche <span style="color: var(--aef-accent-gold);">Globale</span>
                    {% endif %}
                </h1>
                
            <div class="search-form-container">
                <form action="{{ path('search_global', {'_locale': app.request.locale}) }}" method="GET">
                    <div class="search-input-group">
                        <input type="text" name="q" class="form-control" 
                               value="{{ query|default('') }}" 
                               placeholder="Rechercher des antiquités, antiquaires...">
                        <button type="submit" class="search-btn">
                            <i class="fas fa-search me-2"></i>Rechercher
                        </button>
                    </div>
                </form>
            </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block body %}
<div class="search-page">
    <!-- Section Filtres et Résultats -->
    <div class="container-fluid">
            <div class="row">
                <!-- Sidebar Filtres -->
                <div class="col-lg-3">
                <div class="filters-wrapper">
                    <div class="filters-card" data-aos="fade-right">
                        <h3 class="filter-title">
                            <i class="fas fa-filter me-2"></i>Filtres de recherche
                        </h3>
                        
                        <!-- Type de résultats -->
                    <div class="filter-section">
                            <label class="filter-label">Type de résultats</label>
                            <div class="type-filters">
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="searchType" id="items" value="items" 
                                           {% if searchType|default('items') == 'items' %}checked{% endif %}>
                                    <label class="btn btn-outline-primary" for="items">Objets</label>
                            
                                    <input type="radio" class="btn-check" name="searchType" id="members" value="members"
                                           {% if searchType|default('items') == 'members' %}checked{% endif %}>
                                    <label class="btn btn-outline-primary" for="members">Antiquaires</label>
                                </div>
                        </div>
                    </div>

                        <!-- Catégories (pour les objets) -->
                        {% if searchType|default('items') == 'items' and filterData.categories is defined %}
                            <div class="filter-section">
                                <label class="filter-label">Catégories</label>
                                {% for category in filterData.categories %}
                                    <div class="filter-check">
                                        <input type="checkbox" name="category_ids[]" value="{{ category.id }}" 
                                               id="cat_{{ category.id }}"
                                               {% if category.id in selectedFilters.categories|default([]) %}checked{% endif %}>
                                        <label for="cat_{{ category.id }}">
                                            {{ category.name }}
                                            <span class="filter-badge">{{ category.itemCount|default(0) }}</span>
                                        </label>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}

                        <!-- Régions (pour les antiquaires) -->
                        {% if searchType|default('items') == 'members' and filterData.regions is defined %}
                            <div class="filter-section">
                                <label class="filter-label">Régions</label>
                                {% for region in filterData.regions %}
                                    <div class="filter-check">
                                        <input type="checkbox" name="region_ids[]" value="{{ region.id }}" 
                                               id="reg_{{ region.id }}"
                                               {% if region.id in selectedFilters.regions|default([]) %}checked{% endif %}>
                                        <label for="reg_{{ region.id }}">
                                            {{ region.name }}
                                            <span class="filter-badge">{{ region.memberCount|default(0) }}</span>
                                        </label>
                                    </div>
                                    {% endfor %}
                            </div>
                        {% endif %}
                        
                        <!-- Fourchette de prix -->
                        {% if searchType|default('items') == 'items' %}
                            <div class="filter-section">
                                <label class="filter-label">Prix</label>
                                <div class="row g-2">
                                    <div class="col-6">
                                        <input type="number" class="form-control form-control-sm" name="price_min" 
                                               placeholder="Min €" value="{{ filters.price_min|default('') }}">
                                    </div>
                                    <div class="col-6">
                                        <input type="number" class="form-control form-control-sm" name="price_max" 
                                               placeholder="Max €" value="{{ filters.price_max|default('') }}">
                                    </div>
                                </div>
                    </div>
                        {% endif %}
                        
                        <div class="filter-section">
                            <button type="submit" class="btn btn-primary w-100 mb-2">
                                <i class="fas fa-search me-2"></i>Appliquer
                            </button>
                            <button type="button" class="btn btn-outline-secondary w-100" onclick="clearFilters()">
                                <i class="fas fa-times me-2"></i>Effacer
                            </button>
                        </div>
        </div>
                    </div>
            </div>

            <!-- Résultats -->
                <div class="col-lg-9">
                <div class="results-wrapper">
                    <!-- En-tête des résultats -->
                    <div class="results-header" data-aos="fade-left">
                            <h2 class="results-title">
            {% if query %}
                                Résultats pour "{{ query }}"
                                    {% else %}
                                Tous les résultats
                                {% endif %}
                            </h2>
                            <p class="results-count">
                            {% if pagination.totalItems is defined %}
                                {{ pagination.totalItems }} 
                                {% if searchType|default('items') == 'items' %}
                                    objet(s) trouvé(s)
                                {% else %}
                                    antiquaire(s) trouvé(s)
                                {% endif %}
                            {% endif %}
                            </p>
                </div>

                    <!-- Grille de résultats -->
                    <div class="results-grid" data-aos="fade-up" data-aos-delay="200">
                        {% if searchType|default('items') == 'items' %}
                            <!-- Résultats objets -->
                        {% for item in items %}
                                <div class="result-card">
                                        <div class="result-image">
                                        {% if item.mainImage %}
                                            <img src="{{ item.mainImageThumbPath }}" 
                                                 alt="{{ item.title }}">
                                    {% else %}
                                                <div class="placeholder-image">
                                                    <i class="fas fa-image"></i>
                                        </div>
                                            {% endif %}
                                            <div class="result-overlay">
                                            <a href="{{ path('catalog_item_show', {id: item.id}) }}" 
                                               class="result-view-btn">
                                                    <i class="fas fa-eye me-2"></i>Voir l'objet
                                                </a>
                                            </div>
                                        </div>
                                        <div class="result-info">
                                            <h3 class="result-title">{{ item.title }}</h3>
                                        {% if item.description %}
                                            <p class="result-description">{{ item.description|striptags|slice(0, 100) }}...</p>
                                        {% endif %}
                                        {% if item.price %}
                                            <div class="result-price">{{ item.price }}€</div>
                                        {% endif %}
                                            <div class="result-meta">
                                                {% if item.category %}
                                                    <span class="result-category">{{ item.category.name }}</span>
                                                {% endif %}
                                            {% if item.member %}
                                                <span class="text-muted">{{ item.member.companyName }}</span>
                                            {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                        {% else %}
                            <!-- Résultats membres -->
                                {% for member in members %}
                                <div class="result-card">
                                        <div class="result-image">
                                                                {% if member.logo %}
                                                                            <img src="{{ asset('uploads/members/logos/' ~ member.logo) }}" 
                                 alt="{{ member.companyName }}">
                            {% else %}
                                                <div class="placeholder-image">
                                                    <i class="fas fa-store"></i>
                    </div>
                                            {% endif %}
                                            <div class="result-overlay">
                                            {% if member.slug %}
                                                <a href="{{ path('app_store_show', {slug: member.slug, locale: 'fr'}) }}" 
                                                   class="result-view-btn">
                                                    <i class="fas fa-eye me-2"></i>Voir le profil
                                                </a>
                                            {% else %}
                                                <span class="result-view-btn disabled">
                                                    <i class="fas fa-eye me-2"></i>Profil en préparation
                                                </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="result-info">
                                        <h3 class="result-title">{{ member.companyName }}</h3>
                                        {% if member.description %}
                                            <p class="result-description">{{ member.description|striptags|slice(0, 100) }}...</p>
                                                        {% endif %}
                                        <div class="result-meta">
                                            {% if member.city %}
                                                <span class="text-muted">
                                                    <i class="fas fa-map-marker-alt me-1"></i>{{ member.city.name }}
                                                </span>
                                                {% endif %}
                                        </div>
                                </div>
                            </div>
                        {% endfor %}
                            {% endif %}
                        </div>
                        
                    {% if (searchType|default('items') == 'items' and items|length == 0) or 
                          (searchType|default('items') == 'members' and members|length == 0) %}
                        <div class="no-results">
                                <i class="fas fa-search"></i>
                                <h3>Aucun résultat trouvé</h3>
                            <p>Essayez de modifier vos critères de recherche ou utilisez des mots-clés différents.</p>
                            </div>
                        {% endif %}
                    
                    <!-- Pagination -->
                    {% if pagination.totalPages is defined and pagination.totalPages > 1 %}
                        <nav class="pagination-wrapper" aria-label="Navigation des résultats">
                            <ul class="pagination-modern">
                                {% if pagination.currentPage > 1 %}
                                    <li class="page-item">
                                        <a class="page-btn" href="{{ path('search_global', {'_locale': app.request.locale, 'q': query, 'page': pagination.currentPage - 1}) }}">
                                            <i class="fas fa-chevron-left"></i>
                                        </a>
                                    </li>
                                {% endif %}
                                
                                {% for page in pagination.pagesInRange %}
                                    <li class="page-item">
                                        <a class="page-btn {% if page == pagination.currentPage %}active{% endif %}" 
                                           href="{{ path('search_global', {'_locale': app.request.locale, 'q': query, 'page': page}) }}">
                                            {{ page }}
                                        </a>
                                    </li>
                                {% endfor %}
                                
                                {% if pagination.currentPage < pagination.totalPages %}
                                    <li class="page-item">
                                        <a class="page-btn" href="{{ path('search_global', {'_locale': app.request.locale, 'q': query, 'page': pagination.currentPage + 1}) }}">
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function clearFilters() {
    // Décocher toutes les cases
    document.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
    // Vider les champs de prix
    document.querySelectorAll('input[name="price_min"], input[name="price_max"]').forEach(input => input.value = '');
    // Remettre le type par défaut
    document.getElementById('items').checked = true;
}

// Gérer le changement de type de recherche
document.querySelectorAll('input[name="searchType"]').forEach(radio => {
    radio.addEventListener('change', function() {
        // Soumettre automatiquement le formulaire lors du changement de type
        // ou actualiser l'affichage des filtres
        });
});
</script>
{% endblock %}