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

{% block title %}{{ product.title }} - Options{% endblock %}

{% block body %}
    <h1 class="h1 mb-4">{{ product.title }}</h1>

    <div class="mb-4">
        <a href="{{ path('admin_manifestation_product_new', { id: manifestation.id }) }}" class="btn-secondary btn-small">← Retour à la manifestation</a>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <h2 class="h4">Détails du produit</h2>
        </div>
        <div class="card-body grid grid-cols-2 gap-2">
            <p><span class="text-gray-500">Nom :</span><br>{{ product.title }}</p>
            <p><span class="text-gray-500">Prix par défaut :</span><br>{{ product.price|number_format(2, ',', ' ') }} €</p>
            <p><span class="text-gray-500">Max/utilisateur :</span><br>{{ product.maxQuantityPerUser ?? '—' }}</p>
            <p><span class="text-gray-500">Stock total :</span><br>{{ product.totalAvailable ?? '—' }}</p>
            <p><span class="text-gray-500">En vente :</span><br>
                {{ product.saleStart ? product.saleStart|date('d/m/Y H:i') : '—' }}
                →
                {{ product.saleEnd ? product.saleEnd|date('d/m/Y H:i') : '—' }}
            </p>
            <p><span class="text-gray-500">Actif :</span><br>{{ product.enabled ? icon('valid', true) : icon('invalid', true) }}</p>
        </div>
    </div>

    <div class="card">
        <div class="card-header flex justify-between items-center">
            <h2 class="h4">Options proposées</h2>
            <a href="{{ path('admin_manifestation_product_option_new', {
                id: manifestation.id,
                productId: product.id
            }) }}" class="btn-secondary btn-small">Ajouter une option</a>
        </div>
        <div class="card-body">
            {% if product.options|length > 0 %}
                <table class="table table-sm">
                    <thead>
                    <tr>
                        <th>Nom de l’option</th>
                        <th>Quantité incluse</th>
                        <th>Prix</th>
                        <th>Active ?</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for option in product.options %}
                        <tr>
                            <td>{{ option.label }}</td>
                            <td>{{ option.quantity ?? '—' }}</td>
                            <td>{{ option.price|number_format(2, ',', ' ') }} €</td>
                            <td>{{ option.enabled ? icon('valid', true) : icon('invalid', true) }}</td>
                            <td>
                                <span class="flex gap-2">
                                    <a href="{{ path('admin_manifestation_product_option_edit', {
                                        id: manifestation.id,
                                        productId: product.id,
                                        optionId: option.id
                                    }) }}" class="text-contrast">
                                        {{ icon('edit', true) }}
                                    </a>

                                    <confirm-delete data-action="{{ path('admin_manifestation_product_option_delete', {
                                        id: manifestation.id,
                                        productId: product.id,
                                        optionId: option.id
                                    }) }}">
                                    </confirm-delete>
                                </span>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p>Aucune option ajoutée pour ce produit.</p>
            {% endif %}
        </div>
    </div>
{% endblock %}