{% extends "base.html" %}

{% block title %}Căutare Activități - INDEX Sistem Jocuri{% endblock %}

{% block content %}
<div class="search-page">
    <div class="search-header">
        <h2 class="search-title">Căutare Activități Educaționale</h2>
        <p class="search-subtitle">
            Descoperă activități pentru copii și tineri din catalogul nostru de 
            {% if stats and stats.total_activities %}{{ stats.total_activities }}{% else %}500+{% endif %} 
            jocuri și exerciții.
        </p>
    </div>

    <form method="POST" action="{{ url_for('main.search') }}" class="search-form">
        <!-- Main search input -->
        <div class="search-input-group">
            <input 
                type="text" 
                name="search_query" 
                id="search_query"
                class="search-input" 
                placeholder="Caută activități după nume, descriere sau cuvinte cheie..."
                autocomplete="off"
            >
            <button type="submit" class="search-button">Căutare</button>
        </div>

        <!-- Dynamic filters -->
        <div class="filters-grid">
            {% if filters %}
                {% if filters.category %}
                <div class="filter-group">
                    <label for="category" class="filter-label">Categorie</label>
                    <select name="category" id="category" class="filter-select">
                        <option value="">Toate categoriile</option>
                        {% for category in filters.category %}
                        <option value="{{ category }}">{{ category }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                {% if filters.age_group %}
                <div class="filter-group">
                    <label for="age_group" class="filter-label">Grupa de vârstă</label>
                    <select name="age_group" id="age_group" class="filter-select">
                        <option value="">Toate vârstele</option>
                        {% for age_group in filters.age_group %}
                        <option value="{{ age_group }}">{{ age_group }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                {% if filters.participants %}
                <div class="filter-group">
                    <label for="participants" class="filter-label">Participanți</label>
                    <select name="participants" id="participants" class="filter-select">
                        <option value="">Orice număr</option>
                        {% for participants in filters.participants %}
                        <option value="{{ participants }}">{{ participants }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                {% if filters.duration %}
                <div class="filter-group">
                    <label for="duration" class="filter-label">Durata</label>
                    <select name="duration" id="duration" class="filter-select">
                        <option value="">Orice durată</option>
                        {% for duration in filters.duration %}
                        <option value="{{ duration }}">{{ duration }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                {% if filters.materials %}
                <div class="filter-group">
                    <label for="materials" class="filter-label">Materiale</label>
                    <select name="materials" id="materials" class="filter-select">
                        <option value="">Orice materiale</option>
                        {% for materials in filters.materials %}
                        <option value="{{ materials }}">{{ materials }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                {% if filters.difficulty %}
                <div class="filter-group">
                    <label for="difficulty" class="filter-label">Dificultate</label>
                    <select name="difficulty" id="difficulty" class="filter-select">
                        <option value="">Orice nivel</option>
                        {% for difficulty in filters.difficulty %}
                        <option value="{{ difficulty }}">{{ difficulty }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}
            {% endif %}
        </div>

        <!-- Action buttons -->
        <div class="search-actions">
            <button type="submit" class="btn btn-primary">Aplică filtrele</button>
            <button type="button" class="btn btn-secondary" onclick="clearFilters()">Resetează</button>
        </div>
    </form>

    <!-- Quick stats -->
    {% if stats and stats.categories %}
    <div class="quick-stats">
        <h3 class="stats-title">Categorii disponibile</h3>
        <div class="stats-grid">
            {% for category, count in stats.categories.items() %}
            <div class="stat-item">
                <span class="stat-label">{{ category }}</span>
                <span class="stat-value">{{ count }}</span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
function clearFilters() {
    // Reset all form fields
    document.getElementById('search_query').value = '';
    
    const selects = document.querySelectorAll('.filter-select');
    selects.forEach(select => select.selectedIndex = 0);
}

// Auto-submit on filter change for better UX
document.addEventListener('DOMContentLoaded', function() {
    const filterSelects = document.querySelectorAll('.filter-select');
    filterSelects.forEach(select => {
        select.addEventListener('change', function() {
            if (this.value) {
                document.querySelector('.search-form').submit();
            }
        });
    });
});
</script>
{% endblock %}