{% extends 'base.html' %}

{% block content %}
<!-- Hero Section -->
<section class="hero products-hero">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center hero-content">
                <h1>Nos produits</h1>
                <p class="lead">Des moteurs et pièces détachées de qualité pour poids lourds</p>
                <div class="hero-badges mt-3">
                    <span class="hero-badge"><i class="fas fa-check-circle"></i> Plus de 5000 références</span>
                    <span class="hero-badge"><i class="fas fa-tools"></i> Pièces d'origine</span>
                    <span class="hero-badge"><i class="fas fa-truck"></i> Livraison rapide</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Categories -->
<section class="featured-categories py-4">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 text-center mb-4">
                <h2 class="section-title">Explorez nos catégories</h2>
                <p class="text-muted">Trouvez rapidement ce dont vous avez besoin</p>
            </div>
            <div class="col-12">
                <div class="category-pills d-flex justify-content-center flex-wrap">
                    <a href="{{ url_for('main.products') }}" class="category-pill {% if not current_category_id %}active{% endif %}">
                        <i class="fas fa-th"></i> Tous les produits
                    </a>
                    {% for category in parent_categories %}
                        <a href="{{ url_for('main.products', category=category.id) }}" class="category-pill {% if current_category_id == category.id %}active{% endif %}">
                            <i class="fas fa-{{ {'Moteurs': 'engine', 'Pièces détachées': 'cogs', 'Équipements': 'tools', 'Accessoires': 'wrench'}.get(category.name, 'tag') }}"></i> {{ category.name }}
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Products Section -->
<section class="py-5 products-section">
    <div class="container">
        <div class="row">
            <!-- Sidebar with categories -->
            <div class="col-lg-3 mb-4">
                <div class="product-filters">
                    <div class="filter-card">
                        <div class="filter-header">
                            <h5><i class="fas fa-list"></i> Catégories</h5>
                        </div>
                        <div class="filter-body">
                            <ul class="category-tree">
                                <li class="{% if not current_category_id %}active{% endif %}">
                                    <a href="{{ url_for('main.products') }}" class="{% if not current_category_id %}active{% endif %}">
                                        <i class="fas fa-th"></i> Tous les produits
                                    </a>
                                </li>
                                {% for category in parent_categories %}
                                    <li class="{% if current_category_id == category.id %}active{% endif %}">
                                        <a href="{{ url_for('main.products', category=category.id) }}" class="{% if current_category_id == category.id %}active{% endif %}">
                                            <i class="fas fa-{{ {'Moteurs': 'engine', 'Pièces détachées': 'cogs', 'Équipements': 'tools', 'Accessoires': 'wrench'}.get(category.name, 'tag') }}"></i> {{ category.name }}
                                        </a>
                                        
                                        <!-- Display subcategories if any -->
                                        {% if category.subcategories %}
                                            <ul class="subcategory-list">
                                                {% for subcategory in category.subcategories %}
                                                    <li class="{% if current_category_id == subcategory.id %}active{% endif %}">
                                                        <a href="{{ url_for('main.products', category=subcategory.id) }}" class="{% if current_category_id == subcategory.id %}active{% endif %}">
                                                            <i class="fas fa-angle-right"></i> {{ subcategory.name }}
                                                        </a>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        {% endif %}
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>

                    <!-- Product conditions filter -->
                    <div class="filter-card mt-4">
                        <div class="filter-header">
                            <h5><i class="fas fa-filter"></i> État</h5>
                        </div>
                        <div class="filter-body">
                            <div class="condition-filter-group">
                                <label class="condition-filter">
                                    <input type="checkbox" id="newCheck" checked>
                                    <span class="condition-name">
                                        <i class="fas fa-star condition-icon new"></i> Neuf
                                    </span>
                                </label>
                                <label class="condition-filter">
                                    <input type="checkbox" id="reconditionedCheck" checked>
                                    <span class="condition-name">
                                        <i class="fas fa-sync-alt condition-icon reconditioned"></i> Reconditionné
                                    </span>
                                </label>
                                <label class="condition-filter">
                                    <input type="checkbox" id="usedCheck" checked>
                                    <span class="condition-name">
                                        <i class="fas fa-history condition-icon used"></i> Occasion
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Search Products -->
                    <div class="filter-card mt-4">
                        <div class="filter-header">
                            <h5><i class="fas fa-search"></i> Recherche</h5>
                        </div>
                        <div class="filter-body">
                            <div class="search-box">
                                <input type="text" id="productSearch" class="form-control" placeholder="Rechercher un produit...">
                                <button type="button" class="search-button">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Contact CTA -->
                    <div class="filter-cta mt-4">
                        <div class="cta-content">
                            <h5>Besoin d'aide ?</h5>
                            <p>Nos experts sont là pour vous conseiller sur le choix de vos pièces.</p>
                            <a href="{{ url_for('main.contact') }}" class="btn btn-accent">
                                <i class="fas fa-headset"></i> Contactez-nous
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Products list -->
            <div class="col-lg-9">
                {% if products %}
                    <div class="products-header">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h2 class="products-title">{{ title }}</h2>
                                <p class="products-count">{{ products|length }} produit{% if products|length > 1 %}s{% endif %} trouvé{% if products|length > 1 %}s{% endif %}</p>
                            </div>
                            <div class="col-md-6">
                                <div class="products-actions">
                                    <div class="view-mode">
                                        <button id="gridView" class="view-btn active" title="Vue grille">
                                            <i class="fas fa-th"></i>
                                        </button>
                                        <button id="listView" class="view-btn" title="Vue liste">
                                            <i class="fas fa-list"></i>
                                        </button>
                                    </div>
                                    <div class="sort-selector">
                                        <label for="sort">Trier par:</label>
                                        <select class="form-select" id="sort">
                                            <option value="name_asc">Nom (A-Z)</option>
                                            <option value="name_desc">Nom (Z-A)</option>
                                            <option value="price_asc">Prix (croissant)</option>
                                            <option value="price_desc">Prix (décroissant)</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="products-grid grid-view" id="products-container">
                        {% for product in products %}
                            <div class="product-item" 
                                 data-name="{{ product.name|lower }}" 
                                 data-price="{{ product.price|default(0) }}"
                                 data-condition="{{ product.condition|default('') }}">
                                <div class="product-card">
                                    <div class="product-badge {% if product.condition == 'new' %}new{% elif product.condition == 'reconditioned' %}reconditioned{% else %}used{% endif %}">
                                        {{ {'new': 'Neuf', 'reconditioned': 'Reconditionné', 'used': 'Occasion'}.get(product.condition, '') }}
                                    </div>
                                    <div class="product-image">
                                        {% if product.image_url %}
                                            <img src="{{ url_for('static', filename=product.image_url) }}" alt="{{ product.name }}" onerror="this.src='{{ url_for('static', filename='uploads/products/demo_motor1.jpg') }}'">
                                        {% else %}
                                            <div class="no-image">
                                                <i class="fas fa-cog"></i>
                                            </div>
                                        {% endif %}
                                        <div class="product-actions">
                                            <a href="{{ url_for('main.product_detail', product_id=product.id) }}" class="action-btn" title="Voir détails">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ url_for('main.contact') }}?product={{ product.id }}" class="action-btn" title="Demander un devis">
                                                <i class="fas fa-shopping-cart"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-info">
                                        <h3 class="product-name">
                                            <a href="{{ url_for('main.product_detail', product_id=product.id) }}">{{ product.name }}</a>
                                        </h3>
                                        <div class="product-category">
                                            <span><i class="fas fa-tag"></i> {{ product.category.name }}</span>
                                        </div>
                                        <div class="product-description">
                                            <p>{{ product.description|truncate(100) }}</p>
                                        </div>
                                        {% if product.price %}
                                            <div class="product-price">
                                                <span>{{ product.price }} FCFA</span>
                                            </div>
                                        {% endif %}
                                        <div class="product-footer">
                                            <a href="{{ url_for('main.product_detail', product_id=product.id) }}" class="btn btn-primary">
                                                <i class="fas fa-info-circle"></i> Détails
                                            </a>
                                            <a href="{{ url_for('main.contact') }}?product={{ product.id }}" class="btn btn-outline-accent">
                                                <i class="fas fa-file-invoice"></i> Devis
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="empty-products">
                        <div class="empty-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <h3>Aucun produit trouvé</h3>
                        <p>Il n'y a pas de produits disponibles dans cette catégorie pour le moment.</p>
                        <div class="empty-actions">
                            <a href="{{ url_for('main.products') }}" class="btn btn-primary">
                                <i class="fas fa-th"></i> Voir tous les produits
                            </a>
                            <a href="{{ url_for('main.contact') }}" class="btn btn-outline-primary">
                                <i class="fas fa-envelope"></i> Nous contacter
                            </a>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Section -->
<section class="py-5 bg-light why-choose-section">
    <div class="container">
        <div class="row mb-4 text-center">
            <div class="col-md-12">
                <h2 class="section-title">Pourquoi choisir GMPL ?</h2>
                <p class="section-subtitle">Nous offrons le meilleur service et des produits de qualité</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-3 mb-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-medal"></i>
                    </div>
                    <h4>Qualité garantie</h4>
                    <p>Toutes nos pièces sont testées et garanties pour assurer fiabilité et durabilité.</p>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-truck"></i>
                    </div>
                    <h4>Livraison rapide</h4>
                    <p>Service de livraison rapide et sécurisé pour minimiser vos temps d'arrêt.</p>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h4>Support technique</h4>
                    <p>Notre équipe d'experts vous guide dans le choix des pièces adaptées à vos besoins.</p>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h4>Service après-vente</h4>
                    <p>Assistance technique et service après-vente pour une satisfaction totale.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Banner -->
<section class="py-5 cta-banner">
    <div class="container">
        <div class="row justify-content-between align-items-center">
            <div class="col-lg-7 mb-4 mb-lg-0">
                <h2 class="cta-title">Vous recherchez une pièce spécifique ?</h2>
                <p class="cta-text">Si vous ne trouvez pas le produit que vous cherchez, contactez-nous. Notre équipe fera tout son possible pour vous aider à trouver la pièce dont vous avez besoin.</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a href="{{ url_for('main.contact') }}" class="btn btn-light btn-lg cta-btn">
                    <i class="fas fa-envelope me-2"></i> Nous contacter
                </a>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // View toggle functionality
        const gridViewBtn = document.getElementById('gridView');
        const listViewBtn = document.getElementById('listView');
        const productsContainer = document.getElementById('products-container');
        
        if (gridViewBtn && listViewBtn && productsContainer) {
            gridViewBtn.addEventListener('click', function() {
                productsContainer.classList.remove('list-view');
                productsContainer.classList.add('grid-view');
                gridViewBtn.classList.add('active');
                listViewBtn.classList.remove('active');
                localStorage.setItem('productsViewMode', 'grid');
            });
            
            listViewBtn.addEventListener('click', function() {
                productsContainer.classList.remove('grid-view');
                productsContainer.classList.add('list-view');
                listViewBtn.classList.add('active');
                gridViewBtn.classList.remove('active');
                localStorage.setItem('productsViewMode', 'list');
            });
            
            // Load saved view mode from localStorage
            const savedViewMode = localStorage.getItem('productsViewMode');
            if (savedViewMode === 'list') {
                listViewBtn.click();
            }
        }
        
        // Sort functionality
        const sortSelect = document.getElementById('sort');
        if (sortSelect) {
            sortSelect.addEventListener('change', function() {
                sortProducts(this.value);
            });
        }
        
        // Filter by condition
        const conditionCheckboxes = document.querySelectorAll('.condition-filter input[type="checkbox"]');
        conditionCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                filterProducts();
            });
        });
        
        // Search functionality
        const searchInput = document.getElementById('productSearch');
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                searchProducts(this.value.trim().toLowerCase());
            });
        }
        
        // Initial sort
        sortProducts('name_asc');
        
        // Add animation to product cards
        animateProductCards();
        
        // Functions
        function sortProducts(sortBy) {
            const productsContainer = document.getElementById('products-container');
            if (!productsContainer) return;
            
            const products = Array.from(document.querySelectorAll('.product-item'));
            if (products.length === 0) return;
            
            products.sort((a, b) => {
                if (sortBy === 'name_asc') {
                    return a.dataset.name.localeCompare(b.dataset.name);
                } else if (sortBy === 'name_desc') {
                    return b.dataset.name.localeCompare(a.dataset.name);
                } else if (sortBy === 'price_asc') {
                    return parseFloat(a.dataset.price) - parseFloat(b.dataset.price);
                } else if (sortBy === 'price_desc') {
                    return parseFloat(b.dataset.price) - parseFloat(a.dataset.price);
                }
                return 0;
            });
            
            // Clear container
            productsContainer.innerHTML = '';
            
            // Append sorted items
            products.forEach(product => {
                if (product.style.display !== 'none') {
                    productsContainer.appendChild(product);
                }
            });
            
            // Re-animate product cards
            animateProductCards();
        }
        
        function filterProducts() {
            const newCheck = document.getElementById('newCheck')?.checked || false;
            const reconditionedCheck = document.getElementById('reconditionedCheck')?.checked || false;
            const usedCheck = document.getElementById('usedCheck')?.checked || false;
            
            const products = document.querySelectorAll('.product-item');
            if (products.length === 0) return;
            
            products.forEach(product => {
                const condition = product.dataset.condition;
                
                if ((condition === 'new' && newCheck) || 
                    (condition === 'reconditioned' && reconditionedCheck) || 
                    (condition === 'used' && usedCheck) || 
                    (!condition)) {
                    product.style.display = '';
                } else {
                    product.style.display = 'none';
                }
            });
            
            // Re-sort after filtering
            const sortSelect = document.getElementById('sort');
            if (sortSelect) {
                sortProducts(sortSelect.value);
            }
        }
        
        function searchProducts(query) {
            const products = document.querySelectorAll('.product-item');
            if (products.length === 0) return;
            
            products.forEach(product => {
                const name = product.dataset.name || '';
                const description = product.querySelector('.product-description')?.textContent.toLowerCase() || '';
                
                if (name.includes(query) || description.includes(query) || query === '') {
                    product.style.display = '';
                } else {
                    product.style.display = 'none';
                }
            });
            
            // Re-sort after searching
            const sortSelect = document.getElementById('sort');
            if (sortSelect) {
                sortProducts(sortSelect.value);
            }
        }
        
        function animateProductCards() {
            const products = document.querySelectorAll('.product-item');
            products.forEach((product, index) => {
                product.style.animationDelay = (index * 0.1) + 's';
                product.classList.add('animate-in');
            });
        }
        
        // Add hover effect on product cards
        const productCards = document.querySelectorAll('.product-card');
        productCards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.classList.add('hover');
            });
            
            card.addEventListener('mouseleave', function() {
                this.classList.remove('hover');
            });
        });
    });
</script>
{% endblock %}
