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

{% block title %}Ajouter une option{% endblock %}

{% block body %}
    <h1 class="h1 mb-4">Ajouter une option à <span class="text-contrast">{{ product.title }}</span></h1>

    {{ form_start(form, { attr: { class: 'grid grid-2 gap-4', id: 'option-form' } }) }}
    {{ form_row(form.label) }}
    {{ form_row(form.price) }}
    {{ form_row(form.quantity) }}
    {{ form_row(form.enabled) }}
    {{ form_row(form.substitutePrice) }}

    <div id="substitute-wrapper" style="display: none;">
        {{ form_row(form.substituteTotalPrice) }}
        <p class="text-sm text-gray-600 italic mt-1">
            💡 Le prix total du produit sera remplacé par cette valeur, peu importe la quantité.
        </p>
    </div>

    <div class="col-span-2">
        <button type="submit" class="btn-primary">Ajouter</button>
        <a href="{{ path('admin_manifestation_product_show', {
            id: manifestation.id,
            productId: product.id
        }) }}" class="btn-secondary">Annuler</a>
    </div>
    {{ form_end(form) }}

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const substituteCheckbox = document.querySelector('#{{ form.substitutePrice.vars.id }}');
            const substituteWrapper = document.getElementById('substitute-wrapper');

            const toggleSubstitute = () => {
                substituteWrapper.style.display = substituteCheckbox.checked ? 'block' : 'none';
            };

            substituteCheckbox.addEventListener('change', toggleSubstitute);
            toggleSubstitute(); // init au chargement
        });
    </script>

{% endblock %}