{# Panneaux repliables (couleur) + modale (icônes Tabler).
   Charger {{ asset('js/form-appearance-pickers.js') }} de préféré en defer sur la page.

   expandable_color_field(form.color, { optional: true }) pour couleur facultative (#RRGGBB ou vide).
#}
{% macro expandable_color_field(form_field, opts) %}
    {% set opts = opts|default({}) %}
    {% set optional = opts.optional|default(false) %}
    {% set id = form_field.vars.id %}
    {% set hexVal = form_field.vars.value ?? '' %}
    {% set hexValStr = hexVal is not null ? hexVal : '' %}
    {% set err = form_field.vars.errors %}

    {# Pastille VIIZIA + usages courants ERP / Airbnb-style #}
    {% set viz_palette = [
        '#7C3AED', '#6366F1', '#3B82F6', '#0EA5E9', '#14B8A6', '#10B981', '#84CC16', '#EAB308',
        '#F59E0B', '#F97316', '#EF4444', '#EC4899', '#A855F7', '#78716C', '#111827', '#6B7280', '#059669'
    ] %}

    {% set isValidHex = hexValStr|length == 7 and hexValStr starts with '#' %}
    {% set previewBg = isValidHex ? hexValStr : ((not optional) ? '#6B7280' : '') %}
    {# value="" invalide pour <input type="color> → gris médian hors soumission vide #}
    {% set pickerSeed = isValidHex ? hexValStr : '#6B7280' %}

    <div class="field viz-field-appearance viz-field-appearance--color">
        <label class="label" for="{{ id }}">{{ form_field.vars.label }}{% if form_field.vars.required %}<span class="has-text-danger">*</span>{% endif %}</label>

        {% if form_field.vars.help %}
            <p class="help mb-3">{{ form_field.vars.help }}</p>
        {% endif %}

        <details class="viz-details-appearance" data-controller="viz-color-expand"
                 data-viz-color-expand-optional-param="{{ optional ? '1' : '0' }}">
            <summary class="viz-details-appearance__summary is-unselectable" role="button" aria-expanded="false">
                <span class="viz-details-appearance__hint is-size-7 has-text-grey">Cliquer pour ouvrir le sélecteur</span>
                <span class="viz-details-appearance__snapshot">
                    <span class="viz-color-preview{% if optional and previewBg is empty %} viz-color-preview--empty{% endif %}" data-viz-color-preview="{{ id }}"
                          {% if optional and previewBg is empty %}aria-label="Pas de couleur"{% endif %}
                          {% if previewBg is not empty %}style="background-color: {{ previewBg }};"{% endif %}></span>
                    <code class="viz-details-appearance__snapshot-code ml-3 is-size-7" data-viz-color-summary-label="{{ id }}" translate="no">
                        {{- previewBg ? previewBg ~ '' : '—' -}}
                    </code>
                </span>
                <span class="icon has-text-grey"><i class="ti ti-chevrons-down viz-details-appearance__caret" aria-hidden="true"></i></span>
            </summary>

            <div class="viz-details-appearance__panel box is-shadowless has-background-light mt-3">
                <div class="is-flex is-flex-wrap is-align-items-center mb-4" style="gap: 0.75rem;">
                    <span class="is-size-7 has-text-grey">Palettes rapides</span>
                    <div class="is-flex is-flex-wrap" style="gap: 6px;">
                        {% for c in viz_palette %}
                            <button type="button" class="viz-palette-chip" title="{{ c }}"
                                    data-viz-color-swatch="{{ c }}" style="background: {{ c }};" aria-label="Couleur {{ c }}"></button>
                        {% endfor %}
                    </div>
                </div>

                <div class="columns is-multiline is-align-items-center">
                    <div class="column is-narrow">
                        <label class="label is-small mb-2" for="{{ id }}_viz_native">Teinte (système)</label>
                        <input type="color" id="{{ id }}_viz_native"
                               value="{{ pickerSeed }}"
                               aria-label="Sélecteur de teinte système"
                               class="viz-native-color-picker"
                               data-viz-color-picker="{{ id }}" />
                    </div>
                    <div class="column">
                        <label class="label is-small mb-2" for="{{ id }}">Code hexadécimal (#RRGGBB)</label>
                        {# hex : un seul name soumis (#RRGGBB ou vide si optionnel). #}
                        {{ form_widget(form_field, {'attr': {
                            'data-viz-color-hex': id,
                            'class': ('input mr-3 mb-3 is-family-monospace' ~ (err|length > 0 ? ' is-danger' : ''))|trim,
                            'style': 'max-width:11rem;',
                            'autocomplete': 'off'
                        }}) }}
                        {% if optional %}
                            <button type="button" class="button is-light is-small" data-viz-color-clear="{{ id }}">
                                {{ 'Retirer la couleur' }}
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </details>

        {% if err|length > 0 %}
            <p class="help is-danger mt-2">
                {% for e in err %}{{ e.message }}{% if not loop.last %}<br>{% endif %}{% endfor %}
            </p>
        {% endif %}
    </div>
{% endmacro %}

{% macro expandable_icon_tabler_field(form_field) %}
    {% set id = form_field.vars.id %}
    {# Icônes Tabler Icons 3 souvent utilisées ou adaptées métier VIIZIA #}
    {% set tabler_pick_icons = [
        'ti-home', 'ti-building', 'ti-building-store', 'ti-building-skyscraper', 'ti-world', 'ti-map-pin',
        'ti-shopping-cart', 'ti-shopping-bag', 'ti-credit-card', 'ti-cash', 'ti-currency-euro', 'ti-receipt',
        'ti-wallet', 'ti-pig-money', 'ti-chart-line', 'ti-chart-bar', 'ti-transfer', 'ti-refresh',
        'ti-bed', 'ti-plane', 'ti-car', 'ti-tools', 'ti-hammer',
        'ti-tag', 'ti-tags', 'ti-category', 'ti-layout-grid',
        'ti-device-laptop', 'ti-notes', 'ti-book', 'ti-briefcase', 'ti-calendar', 'ti-calendar-event', 'ti-clock',
        'ti-user', 'ti-users', 'ti-photo', 'ti-phone', 'ti-mail', 'ti-flag',
        'ti-alert-circle', 'ti-info-circle', 'ti-circle-check', 'ti-thumb-up',
        'ti-folder', 'ti-settings', 'ti-adjustments-horizontal', 'ti-adjustments-vertical', 'ti-bolt', 'ti-flame'
    ] %}
    {% set err = form_field.vars.errors %}

    <div class="field viz-field-appearance viz-field-appearance--icon" id="viz-tabler-root-{{ id }}" data-controller="viz-icon-expand">
        <label class="label" for="{{ id }}">{{ form_field.vars.label }}{% if form_field.vars.required %}<span class="has-text-danger">*</span>{% endif %}</label>

        {% if form_field.vars.help %}
            <p class="help mb-3">{{ form_field.vars.help }}</p>
        {% endif %}

        <details class="viz-details-appearance">
            <summary class="viz-details-appearance__summary is-unselectable" role="button" aria-expanded="false">
                <span class="viz-details-appearance__hint is-size-7 has-text-grey">Cliquer pour options et galerie</span>
                <span class="viz-details-appearance__snapshot">
                    <span class="viz-icon-preview-box" data-viz-icon-summary-mount="{{ id }}">
                        {% set ic = form_field.vars.value %}
                        {% if ic %}
                            <i class="ti {{ ic }}" aria-hidden="true"></i>
                        {% else %}
                            <span class="viz-icon-summary-placeholder is-size-7 has-text-grey" translate="no">—</span>
                        {% endif %}
                    </span>
                    <code class="viz-details-appearance__snapshot-code ml-3 is-size-7" data-viz-icon-summary-code="{{ id }}" translate="no">
                        {{- ic ? ic : '—' -}}
                    </code>
                </span>
                <span class="icon has-text-grey"><i class="ti ti-chevrons-down viz-details-appearance__caret" aria-hidden="true"></i></span>
            </summary>

            <div class="viz-details-appearance__panel box is-shadowless has-background-light mt-3">
                <div class="field">
                    <label class="label is-small" for="{{ id }}">{{ 'Classe Tabler affichée' }}</label>
                    {{ form_widget(form_field, {'attr': {
                        'placeholder': 'ex. ti-building-skyscraper',
                        'class': ('input is-family-monospace' ~ (err|length > 0 ? ' is-danger' : ''))|trim,
                        'data-viz-icon-input': id,
                        'autocomplete': 'off'
                    }}) }}
                </div>

                <div class="field is-grouped">
                    <p class="control">
                        <button type="button" class="button is-primary is-small" data-viz-icon-open="{{ id }}" aria-haspopup="dialog">
                            <span class="icon is-small"><i class="ti ti-layout-grid"></i></span>
                            <span>{{ 'Parcourir les icônes…' }}</span>
                        </button>
                    </p>
                    <p class="control">
                        <button type="button" class="button is-light is-small js-viz-icon-clear-{{ id }}" data-viz-icon-clear="{{ id }}" title="{{ 'Vider le champ icône' }}">
                            {{ 'Aucune icône' }}
                        </button>
                    </p>
                </div>
            </div>
        </details>

        <div class="modal viz-icon-modal" id="viz-icon-modal-{{ id }}" tabindex="-1" aria-modal="true"
             aria-labelledby="viz-icon-modal-head-{{ id }}" aria-hidden="true">
            <div class="modal-background" data-viz-icon-close="{{ id }}" aria-hidden="true"></div>
            <div class="modal-card" style="max-width:560px;width:calc(100% - 2rem);margin: var(--viz-modal-margin, 10vh auto);">
                <header class="modal-card-head">
                    <p class="modal-card-title" id="viz-icon-modal-head-{{ id }}">{{ 'Choisir une icône Tabler' }}</p>
                    <button class="delete" type="button" data-viz-icon-close="{{ id }}" aria-label="{{ 'Fermer' }}"></button>
                </header>
                <section class="modal-card-body">
                    <p class="help mb-4">{{ 'Filtrez la liste puis cliquer sur une vignette pour l’injecter dans le champ.' }}</p>
                    <div class="field">
                        <div class="control has-icons-left">
                            <span class="icon is-small is-left"><i class="ti ti-filter"></i></span>
                            <input type="search" class="input" placeholder="{{ 'Filtrer par nom (ex. building, carte…)' }}"
                                   data-viz-icon-filter="{{ id }}" autocomplete="off" />
                        </div>
                    </div>
                    <div class="viz-icon-picker-grid" data-viz-icon-grid="{{ id }}">
                        {% for cls in tabler_pick_icons %}
                            <button type="button" data-viz-icon-choice="{{ cls }}" data-viz-icon-name="{{ cls }}"
                                    title="{{ cls }}" class="button is-small is-light viz-icon-choice-btn viz-icon-choice-tile">
                                <i class="ti {{ cls }}" aria-hidden="true"></i>
                            </button>
                        {% endfor %}
                    </div>
                </section>
                <footer class="modal-card-foot">
                    <button type="button" class="button" data-viz-icon-close="{{ id }}">{{ 'Fermer sans changer' }}</button>
                </footer>
            </div>
        </div>

        {% if err|length > 0 %}
            <p class="help is-danger mt-2">
                {% for e in err %}{{ e.message }}{% if not loop.last %}<br>{% endif %}{% endfor %}
            </p>
        {% endif %}
    </div>
{% endmacro %}