{% extends 'base.html' %}

{% block content %}
<!-- Product Detail Section -->
<section class="py-5">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('main.products') }}">Produits</a></li>
                {% if product.category %}
                    <li class="breadcrumb-item"><a href="{{ url_for('main.products', category=product.category.id) }}">{{ product.category.name }}</a></li>
                {% endif %}
                <li class="breadcrumb-item active" aria-current="page">{{ product.name }}</li>
            </ol>
        </nav>

        <div class="row">
            <!-- Product Image -->
            <div class="col-lg-6 mb-4">
                <div class="card border-0 shadow-sm">
                    {% if product.image_url %}
                        {% if product.image_url.startswith('uploads/') %}
                            <img src="{{ url_for('static', filename=product.image_url) }}" alt="{{ product.name }}" class="card-img-top product-image p-3">
                        {% else %}
                            <img src="{{ url_for('static', filename='uploads/products/' + product.image_url) }}" alt="{{ product.name }}" class="card-img-top product-image p-3">
                        {% endif %}
                    {% else %}
                        <div class="card-img-top product-image d-flex align-items-center justify-content-center p-5 bg-light">
                            <i class="fas fa-cog fa-8x text-secondary"></i>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Product Info -->
            <div class="col-lg-6">
                <h1 class="mb-3">{{ product.name }}</h1>
                
                <div class="mb-3">
                    <span class="badge bg-{% if product.condition == 'new' %}success{% elif product.condition == 'reconditioned' %}primary{% else %}secondary{% endif %} p-2">
                        {{ {'new': 'Neuf', 'reconditioned': 'Reconditionné', 'used': 'Occasion'}.get(product.condition, '') }}
                    </span>
                    
                    {% if product.is_available %}
                        <span class="badge bg-success p-2 ms-2">Disponible</span>
                    {% else %}
                        <span class="badge bg-danger p-2 ms-2">Non disponible</span>
                    {% endif %}
                    
                    {% if product.category %}
                        <a href="{{ url_for('main.products', category=product.category.id) }}" class="badge bg-info p-2 ms-2 text-decoration-none">
                            {{ product.category.name }}
                        </a>
                    {% endif %}
                </div>
                
                {% if product.price %}
                    <div class="mb-4">
                        <h2 class="text-primary">{{ product.price }} FCFA</h2>
                    </div>
                {% endif %}
                
                <div class="mb-4">
                    <h5>Description:</h5>
                    <p>{{ product.description|safe }}</p>
                </div>
                
                <div class="mb-4">
                    <h5>Caractéristiques:</h5>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="product-feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Qualité garantie</span>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="product-feature">
                                <i class="fas fa-tools"></i>
                                <span>Assistance technique</span>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="product-feature">
                                <i class="fas fa-truck"></i>
                                <span>Livraison disponible</span>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="product-feature">
                                <i class="fas fa-wrench"></i>
                                <span>Installation possible</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="d-grid gap-2">
                    <a href="{{ url_for('main.contact') }}" class="btn btn-primary btn-lg">Demander un devis</a>
                    <a href="tel:{{ settings.company_phone|default('+221 XX XXX XX XX') }}" class="btn btn-outline-primary">
                        <i class="fas fa-phone me-2"></i>{{ settings.company_phone|default('+221 XX XXX XX XX') }}
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Product Details Tabs -->
        <div class="row mt-5">
            <div class="col-12">
                <ul class="nav nav-tabs" id="productTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="specs-tab" data-bs-toggle="tab" data-bs-target="#specs" type="button" role="tab" aria-controls="specs" aria-selected="true">Spécifications</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="delivery-tab" data-bs-toggle="tab" data-bs-target="#delivery" type="button" role="tab" aria-controls="delivery" aria-selected="false">Livraison & Installation</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="warranty-tab" data-bs-toggle="tab" data-bs-target="#warranty" type="button" role="tab" aria-controls="warranty" aria-selected="false">Garantie</button>
                    </li>
                </ul>
                <div class="tab-content p-4 border border-top-0 rounded-bottom shadow-sm" id="productTabsContent">
                    <div class="tab-pane fade show active" id="specs" role="tabpanel" aria-labelledby="specs-tab">
                        <h5>Spécifications techniques</h5>
                        <p>Pour obtenir les spécifications techniques détaillées de ce produit, veuillez nous contacter directement. Notre équipe d'experts se fera un plaisir de vous fournir toutes les informations nécessaires.</p>
                        <p>Nous proposons également un service de conseil technique pour vous aider à choisir le produit qui correspond le mieux à vos besoins spécifiques.</p>
                    </div>
                    <div class="tab-pane fade" id="delivery" role="tabpanel" aria-labelledby="delivery-tab">
                        <h5>Livraison et installation</h5>
                        <p>GMPL propose un service de livraison rapide et fiable dans tout le Sénégal. Les délais de livraison varient en fonction de votre localisation et de la disponibilité du produit.</p>
                        <p>Nous offrons également un service d'installation professionnel pour garantir le bon fonctionnement de votre équipement. Notre équipe de techniciens qualifiés se déplace chez vous pour installer le produit selon les normes de sécurité et de qualité les plus strictes.</p>
                        <p>Pour plus d'informations sur les coûts et délais de livraison et d'installation, veuillez nous contacter.</p>
                    </div>
                    <div class="tab-pane fade" id="warranty" role="tabpanel" aria-labelledby="warranty-tab">
                        <h5>Garantie et service après-vente</h5>
                        <p>Tous nos produits bénéficient d'une garantie commerciale dont la durée varie selon le type de produit :</p>
                        <ul>
                            <li>Produits neufs : garantie de 12 mois</li>
                            <li>Produits reconditionnés : garantie de 6 mois</li>
                            <li>Produits d'occasion : garantie de 3 mois</li>
                        </ul>
                        <p>Notre service après-vente est disponible pour vous assister en cas de problème ou pour toute question concernant l'utilisation de votre produit.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Related Products -->
        {% if related_products %}
            <div class="row mt-5">
                <div class="col-12">
                    <h3 class="mb-4">Produits similaires</h3>
                    <div class="row">
                        {% for related in related_products %}
                            <div class="col-md-3 mb-4">
                                <div class="card h-100 product-card">
                                    {% if related.image_url %}
                                        {% if related.image_url.startswith('uploads/') %}
                                            <img src="{{ url_for('static', filename=related.image_url) }}" alt="{{ related.name }}" class="card-img-top product-img">
                                        {% else %}
                                            <img src="{{ url_for('static', filename='uploads/products/' + related.image_url) }}" alt="{{ related.name }}" class="card-img-top product-img">
                                        {% endif %}
                                    {% else %}
                                        <div class="card-img-top product-img d-flex align-items-center justify-content-center bg-light">
                                            <i class="fas fa-cog fa-3x text-secondary"></i>
                                        </div>
                                    {% endif %}
                                    <div class="card-body">
                                        <h5 class="card-title">{{ related.name }}</h5>
                                        <p class="card-text">{{ related.description|truncate(50) }}</p>
                                        {% if related.price %}
                                            <p class="text-primary fw-bold">{{ related.price }} FCFA</p>
                                        {% endif %}
                                        <a href="{{ url_for('main.product_detail', product_id=related.id) }}" class="btn btn-sm btn-outline-primary">Détails</a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</section>

<!-- CTA Section -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8 mb-3 mb-md-0">
                <h2>Vous avez des questions sur ce produit ?</h2>
                <p class="lead mb-0">Notre équipe est à votre disposition pour vous aider.</p>
            </div>
            <div class="col-md-4 text-md-end">
                <a href="{{ url_for('main.contact') }}" class="btn btn-primary btn-lg">Nous contacter</a>
            </div>
        </div>
    </div>
</section>
{% endblock %}
