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

{% block title %}Produits - Boutique{% endblock %}

{% block breadcrumb %}Boutique <i class="fas fa-chevron-right"></i> Produits{% endblock %}

{% block body %}
<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col">
            <h1>
                <i class="fas fa-box"></i> Produits
            </h1>
        </div>
        <div class="col-auto">
            <a href="{{ path('admin_shop_product_new', {siteId: site.id}) }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Nouveau produit
            </a>
        </div>
    </div>

    {% for message in app.flashes('success') %}
        <div class="alert alert-success alert-dismissible fade show">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}

    <div class="card">
        <div class="card-body">
            {% if products is empty %}
                <div class="text-center py-5">
                    <i class="fas fa-box fa-4x text-muted mb-3"></i>
                    <p class="text-muted">Aucun produit pour le moment</p>
                    <a href="{{ path('admin_shop_product_new', {siteId: site.id}) }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Créer votre premier produit
                    </a>
                </div>
            {% else %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Image</th>
                                <th>Nom</th>
                                <th>SKU</th>
                                <th>Prix</th>
                                <th>Stock</th>
                                <th>Catégorie</th>
                                <th>Statut</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for product in products %}
                                <tr>
                                    <td>
                                        {% if product.image %}
                                            <img src="{{ asset('uploads/shop/' ~ product.image) }}" alt="{{ product.name }}" style="width: 50px; height: 50px; object-fit: cover;">
                                        {% else %}
                                            <div class="bg-light d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                                <i class="fas fa-image text-muted"></i>
                                            </div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <strong>{{ product.name }}</strong>
                                        {% if product.type == 'digital' %}
                                            <span class="badge bg-info">Numérique</span>
                                        {% elseif product.type == 'service' %}
                                            <span class="badge bg-secondary">Service</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ product.sku ?? '-' }}</td>
                                    <td>{{ product.formattedPrice }}</td>
                                    <td>
                                        {% if product.stock is null %}
                                            <span class="text-muted">Illimité</span>
                                        {% elseif product.stock == 0 %}
                                            <span class="badge bg-danger">Épuisé</span>
                                        {% elseif product.stock < 10 %}
                                            <span class="badge bg-warning">{{ product.stock }}</span>
                                        {% else %}
                                            {{ product.stock }}
                                        {% endif %}
                                    </td>
                                    <td>{{ product.category ? product.category.name : '-' }}</td>
                                    <td>
                                        {% if product.active %}
                                            <span class="badge bg-success">Actif</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Inactif</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <a href="{{ path('admin_shop_product_edit', {siteId: site.id, productId: product.id}) }}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form method="post" action="{{ path('admin_shop_product_delete', {siteId: site.id, productId: product.id}) }}" style="display: inline;" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?');">
                                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}