{% macro input(field, class = '') %}
    {% set field_attr = field.vars.attr|default({}) %}
    {% set input_class = 'w-full rounded-md border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900 shadow-sm outline-none transition placeholder:text-stone-400 focus:border-[#9d7c47] focus:ring-2 focus:ring-[#9d7c47]/20 disabled:cursor-not-allowed disabled:bg-stone-100 ' ~ class %}
    <div class="grid gap-1.5">
        {{ form_label(field, null, {
            label_attr: {
                class: 'text-xs font-extrabold uppercase tracking-wide text-stone-500'
            }
        }) }}
        {{ form_widget(field, {
            attr: field_attr|merge({
                class: (field_attr.class|default('') ~ ' ' ~ input_class)|trim
            })
        }) }}
        {% if field.vars.help is defined and field.vars.help %}
            <p class="m-0 text-xs leading-5 text-stone-500">{{ field.vars.help|trans({}, field.vars.translation_domain|default('form')) }}</p>
        {% endif %}
        {{ form_errors(field) }}
    </div>
{% endmacro %}

{% macro checkbox(field) %}
    {% set field_attr = field.vars.attr|default({}) %}
    <div>
        <label class="flex items-start gap-3 rounded-md border border-stone-200 bg-stone-50/80 p-3 text-sm font-semibold leading-5 text-stone-700 transition hover:border-stone-300 hover:bg-white">
            {{ form_widget(field, {
                attr: field_attr|merge({
                    class: (field_attr.class|default('') ~ ' mt-0.5 h-4 w-4 rounded border-stone-300 text-[#9d7c47] focus:ring-[#9d7c47]')|trim
                })
            }) }}
            <span>{{ field.vars.label|trans({}, field.vars.translation_domain|default('form')) }}</span>
        </label>
        {{ form_errors(field) }}
    </div>
{% endmacro %}

{% macro accordion(kicker, title, body, content, open = false) %}
    <details class="group overflow-hidden rounded-md border border-stone-200 bg-white shadow-[0_8px_18px_rgba(61,43,23,0.04)]" {% if open %}open{% endif %}>
        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 border-b border-transparent p-4 transition hover:bg-stone-50 group-open:border-stone-200 [&::-webkit-details-marker]:hidden">
            <div>
                <p class="mb-1 text-xs font-extrabold uppercase tracking-wide text-stone-500">{{ kicker }}</p>
                <h3 class="m-0 text-base font-extrabold text-stone-900">{{ title }}</h3>
                {% if body %}
                    <p class="mt-2 mb-0 max-w-4xl text-sm leading-6 text-stone-500">{{ body }}</p>
                {% endif %}
            </div>
            <span class="grid h-9 w-9 shrink-0 place-items-center rounded border border-stone-200 bg-stone-50 text-lg font-bold leading-none text-stone-600">
                <span class="group-open:hidden">+</span>
                <span class="hidden -translate-y-1 group-open:block">_</span>
            </span>
        </summary>
        <div class="p-4">
            {{ content|raw }}
        </div>
    </details>
{% endmacro %}

{% macro section_intro(kicker, title, body) %}
    <section class="rounded-md border border-stone-200 bg-white p-5 shadow-[0_8px_20px_rgba(61,43,23,0.05)]">
        <p class="mb-1 text-xs font-extrabold uppercase tracking-wide text-stone-500">{{ kicker }}</p>
        <h2 class="m-0 text-xl font-extrabold leading-tight text-stone-900">{{ title }}</h2>
        {% if body %}
            <p class="mt-2 mb-0 max-w-3xl text-sm leading-6 text-stone-500">{{ body }}</p>
        {% endif %}
    </section>
{% endmacro %}

{% macro hint(title, body) %}
    <div class="rounded-md border border-[#9d7c47]/25 bg-[#9d7c47]/5 p-3">
        <strong class="block text-sm font-extrabold text-stone-900">{{ title }}</strong>
        <p class="mt-1 mb-0 text-sm leading-6 text-stone-600">{{ body }}</p>
    </div>
{% endmacro %}

{% import _self as ui %}

{% if not form.vars.valid %}
    <div class="rounded-md border border-red-200 border-l-4 border-l-red-700 bg-white p-4 text-sm text-stone-800" role="alert">
        <strong class="block text-red-800">Les erreurs à corriger</strong>
        {% if not form.vars.valid %}
            <ul class="mt-3 mb-0 grid gap-1 pl-5">
                {% for error in form.vars.errors %}
                    <li>
                        <span class="font-bold">{{ (error.origin.config.name)|trans([]) }}</span>
                        {{ error.message }}
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
        {% for children in form.children %}
            {% if not children.vars.valid %}
                <span class="mt-3 block font-bold">{{ (children.vars.name)|trans([]) }}</span>
                <ul class="mt-1 mb-0 grid gap-1 pl-5">
                    {% for error in children.vars.errors.form.getErrors(true) %}
                        <li>{{ error.message }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        {% endfor %}
    </div>
{% endif %}

<div class="grid gap-4">
    {{ ui.section_intro(
        'Configuration boutique',
        'Réglages généraux de la boutique',
        'Chaque section peut être ouverte ou refermée pour travailler sur un groupe de paramètres à la fois.'
    ) }}

    {% set checkout_content %}
        <div class="grid gap-4">
            {{ ui.hint('Visuel du parcours de commande', 'Cette image est utilisée dans le checkout. Le titre média n’est pas nécessaire ici.') }}
            {{ form_row(form.image) }}
        </div>
    {% endset %}
    {{ ui.accordion('Checkout', 'Image et présentation du checkout', 'Paramètres visuels utilisés pendant le paiement.', checkout_content) }}

    {% set display_content %}
        <div class="grid gap-4 md:grid-cols-2">
            {{ ui.checkbox(form.hidePriceDefault) }}
            {{ ui.checkbox(form.enableAwardShop) }}
            {{ ui.checkbox(form.enablePartnerCodeFront) }}
            {{ ui.checkbox(form.enableProductPageFront) }}
            <div class="md:col-span-2">
                {{ ui.checkbox(form.showPartnerCodeWhenShopBlocked) }}
            </div>
        </div>
    {% endset %}
    {{ ui.accordion('Affichage public', 'Boutique côté client', 'Gérez les prix, les médailles, les pages produit et le code partenaire visibles sur le front.', display_content) }}

    {% set invoice_content %}
        <div class="grid gap-4 md:grid-cols-2">
            <div class="md:col-span-2">
                {{ ui.checkbox(form.invoice) }}
            </div>
            <div id="{{ form.invoicePaymentTerm.vars.id }}_wrapper" {% if not form.invoice.vars.checked %}hidden{% endif %}>
                {{ ui.input(form.invoicePaymentTerm) }}
            </div>
            <div id="{{ form.invoiceSuffix.vars.id }}_wrapper" {% if not form.invoice.vars.checked %}hidden{% endif %}>
                {{ ui.input(form.invoiceSuffix) }}
            </div>
        </div>
    {% endset %}
    {{ ui.accordion('Facturation', 'Gestion des factures boutique', 'Activez les factures et définissez les conditions de règlement ou le préfixe de numérotation.', invoice_content) }}

    {% set enabled_countries_content %}
        <div class="grid gap-4">
            {{ ui.hint('Liste blanche optionnelle', 'Si cette liste est vide, la boutique n’est pas limitée à certains pays.') }}
            {{ ui.input(form.enableCountriesForShop, 'min-h-56') }}
        </div>
    {% endset %}
    {{ ui.accordion('Restriction pays', 'Pays autorisés', 'Limitez la boutique à une liste de pays autorisés lorsque le contexte commercial le nécessite.', enabled_countries_content) }}

    {% set disabled_countries_attr = form.disableCountries.vars.attr|default({}) %}
    {% set disabled_countries_content %}
        <div class="grid gap-4">
            {{ ui.hint('Liste noire avec message dédié', 'Chaque pays bloqué peut avoir un texte spécifique affiché au client.') }}
            {{ form_widget(form.disableCountries, {
                attr: disabled_countries_attr|merge({
                    class: (disabled_countries_attr.class|default('') ~ ' grid gap-3')|trim
                })
            }) }}
            {{ form_errors(form.disableCountries) }}
        </div>
    {% endset %}
    {{ ui.accordion('Restriction pays', 'Pays bloqués', 'Bloquez seulement certains pays, avec une communication personnalisée si nécessaire.', disabled_countries_content) }}

    {% set multiples_attr = form.multiples.vars.attr|default({}) %}
    {% set multiples_content %}
        <div class="grid gap-4">
            {{ ui.hint('Règles de panier', 'Définissez les minimums ou multiples selon les quantités, zones de livraison et types de produits.') }}
            {{ form_widget(form.multiples, {
                attr: multiples_attr|merge({
                    class: (multiples_attr.class|default('') ~ ' grid gap-3')|trim
                })
            }) }}
            {{ form_errors(form.multiples) }}
        </div>
    {% endset %}
    {{ ui.accordion('Commandes', 'Multiples et minimums autorisés', 'Contrôlez les quantités autorisées dans le panier selon vos contraintes logistiques.', multiples_content) }}

    {% set vacation_content %}
        <div class="grid gap-4 md:grid-cols-2">
            {{ ui.input(form.vacationOf) }}
            {{ ui.input(form.vacationAt) }}
            <div class="md:col-span-2">
                {{ ui.checkbox(form.disableShopForVacation) }}
            </div>
            <div class="md:col-span-2">
                <div class="grid gap-3">
                    {% for locale, translation in form.translations %}
                        <div class="rounded-md border border-stone-200 bg-stone-50/70 p-3">
                            <div class="mb-3 inline-flex rounded border border-stone-200 bg-white px-2 py-1 text-xs font-extrabold uppercase tracking-wide text-stone-500">
                                {{ locale }}
                            </div>
                            {{ ui.input(translation.vacation, 'min-h-40') }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endset %}
    {{ ui.accordion('Indisponibilité', 'Boutique en vacances', 'Planifiez une fermeture temporaire et préparez le message affiché aux visiteurs.', vacation_content) }}
</div>

{{ form_rest(form) }}

<script>
    (function () {
        var invoiceField = document.getElementById('{{ form.invoice.vars.id }}');
        var invoicePaymentTermField = document.getElementById('{{ form.invoicePaymentTerm.vars.id }}');
        var invoicePaymentTermWrapper = document.getElementById('{{ form.invoicePaymentTerm.vars.id }}_wrapper');
        var invoiceSuffixWrapper = document.getElementById('{{ form.invoiceSuffix.vars.id }}_wrapper');

        if (!invoiceField || !invoicePaymentTermField || !invoicePaymentTermWrapper || !invoiceSuffixWrapper) {
            return;
        }

        function toggleInvoicePaymentTerm() {
            var enabled = invoiceField.checked;
            invoicePaymentTermWrapper.hidden = !enabled;
            invoiceSuffixWrapper.hidden = !enabled;
            invoicePaymentTermField.required = enabled;
        }

        toggleInvoicePaymentTerm();
        invoiceField.addEventListener('change', toggleInvoicePaymentTerm);
    })();
</script>
