{% use 'form_div_layout.html.twig' %}

{# Macro to render a static (read-only) field value with consistent formatting #}
{% macro render_static_field(label, value) %}
    <div class="mb-1">
        <label class="font-semibold block">{{ label }}</label>
        <div class="text-sm text-gray-600">{{ value ?: '-' }}</div>
    </div>
{% endmacro %}

{# Macro to render info icon tooltip for descriptions #}
{% macro info_tooltip(description) %}
    <div class="pt-px pl-1" {{ stimulus_controller('tooltip') }}>
        <button type="button" data-tooltip-target="trigger" class="text-blue-600 hover:text-blue-800">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
            </svg>
        </button>
        <template data-tooltip-target="template">
            <div class="text-sm">
                {{ description|raw }}
            </div>
        </template>
    </div>
{% endmacro %}

{%- block form_row -%}
    {%- set row_attr = row_attr|merge({ 'class': (row_attr.class|default('') ~ ' mb-4')|trim }) -%}
    {%- set widget_attr = {} -%}
    {%- if help is not empty -%}
        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
    {%- endif -%}
    {%- if form.vars.expanded is defined and form.vars.expanded -%}
        <fieldset{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
            <legend class="font-semibold mb-1">
                {{- form_label(form, null, {element: 'span'}) -}}
            </legend>
            {{- form_widget(form, widget_attr) -}}
            {{- form_errors(form) -}}
            {{- form_help(form) -}}
        </fieldset>
    {%- else -%}
        <div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
            {{- form_label(form) -}}
            {{- form_widget(form, widget_attr) -}}
            {{- form_errors(form) -}}
            {{- form_help(form) -}}
        </div>
    {%- endif -%}
{%- endblock form_row -%}

{%- block form_label -%}
    {% set class = 'font-semibold' %}
    {% if errors|length %}
        {% set class = class ~ ' text-red-500' %}
    {% endif %}
    {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ' ~ class)|trim}) %}
    {{ parent() }}
{%- endblock form_label -%}

{%- block form_errors -%}
    {%- if errors|length > 0 -%}
        <ul class="pb-2">
            {%- for error in errors -%}
                <li class="text-red-500">{{ error.message }}</li>
            {%- endfor -%}
        </ul>
    {%- endif -%}
{%- endblock form_errors -%}

{%- block form_widget_simple -%}
    {%- set type = type|default('text') -%}
    {%- set tooltip = null -%}
    {%- if attr['data-tooltip'] is defined -%}
        {%- set tooltip = attr['data-tooltip'] -%}
        {%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
    {%- endif -%}
    {%- if type != 'hidden' -%}
        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
        {%- if errors|length -%}
            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
        {%- endif -%}
        {%- if disabled is defined and disabled == true -%}
            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
        {%- endif -%}
    {%- endif -%}
    <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
        {{ parent() }}
        {%- if disabled is defined and disabled == true -%}
            <input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}">
        {%- endif -%}
    </div>
{%- endblock form_widget_simple -%}

{%- block textarea_widget -%}
    {%- set tooltip = null -%}
    {%- if attr['data-tooltip'] is defined -%}
        {%- set tooltip = attr['data-tooltip'] -%}
        {%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
    {%- endif -%}
    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
    {%- if errors|length -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
    {%- endif -%}
    {%- if disabled is defined and disabled == true -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
    {%- endif -%}
    <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
        {{ parent() }}
        {%- if disabled is defined and disabled == true -%}
            <input type="hidden" name="{{ form.vars.full_name }}" value="{{ form.vars.value }}">
        {%- endif -%}
    </div>
{%- endblock textarea_widget -%}

{%- block checkbox_widget -%}
    {%- set tooltip = null -%}
    {%- if attr['data-tooltip'] is defined -%}
        {%- set tooltip = attr['data-tooltip'] -%}
        {%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
    {%- endif -%}
    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-checkbox')|trim }) -%}
    {%- if errors|length -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-checkbox--has-error' }) -%}
    {%- endif -%}
    <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
        <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
    </div>
{%- endblock checkbox_widget -%}

{%- block radio_widget -%}
    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-radio')|trim }) -%}
    {%- if errors|length -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-radio--has-error' }) -%}
    {%- endif -%}
    {%- set tooltip = null -%}
    {%- if attr['data-tooltip'] is defined -%}
        {%- set tooltip = attr['data-tooltip'] -%}
        {%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
    {%- endif -%}
    <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
        <input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
    </div>
{%- endblock radio_widget -%}

{% block checkbox_row %}
    {%- import _self as forms -%}
    {%- set tooltip = null -%}
    {%- if form.vars.attr['data-tooltip'] is defined -%}
        {%- set tooltip = form.vars.attr['data-tooltip'] -%}
    {%- endif -%}
    {%- set description = form.vars.attr['data-description'] ?? null -%}
    <div class="{{ html_classes('flex', { 'cursor-not-allowed': form.vars.attr.readonly is defined }) }}" {% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
        <label for="{{ form.vars.id }}" class="{{ html_classes('relative flex items-start', { 'pointer-events-none': form.vars.attr.readonly is defined }) }}">
            <div class="flex h-6 items-center">
                {{ form_widget(form) }}
            </div>
            <div class="{{ html_classes('ml-2 leading-6', { 'text-red-500': errors|length }) }}">
                {{ form.vars.label | raw }}
                {{- form_errors(form) -}}
            </div>
        </label>
        {%- if description is not null -%}
            {{ forms.info_tooltip(description) }}
        {%- endif -%}
    </div>
{% endblock %}

{% block radio_row %}
    {%- import _self as forms -%}
    {%- set tooltip = null -%}
    {%- if form.vars.attr['data-tooltip'] is defined -%}
        {%- set tooltip = form.vars.attr['data-tooltip'] -%}
    {%- endif -%}
    {%- set description = form.vars.attr['data-description'] ?? null -%}
    <div class="{{ html_classes('flex', { 'cursor-not-allowed': form.vars.attr.readonly is defined }) }}" {% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
        <label for="{{ form.vars.id }}" class="{{ html_classes('relative flex items-start', { 'pointer-events-none': form.vars.attr.readonly is defined }) }}">
            <div class="flex h-6 items-center">
                {{ form_widget(form) }}
            </div>
            <div class="{{ html_classes('ml-2 leading-6', { 'text-red-500': errors|length }) }}">
                {{ form.vars.label | raw }}
                {{- form_errors(form) -}}
            </div>
        </label>
        {%- if description is not null -%}
            {{ forms.info_tooltip(description) }}
        {%- endif -%}
    </div>
{% endblock %}

{%- block choice_widget_collapsed -%}
    {%- set tooltip = null -%}
    {%- if attr['data-tooltip'] is defined -%}
        {%- set tooltip = attr['data-tooltip'] -%}
        {%- set attr = attr|filter((v, k) => k != 'data-tooltip') -%}
    {%- endif -%}
    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
    {%- if errors|length -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
    {%- endif -%}
    {%- if disabled is defined and disabled == true -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
    {%- endif -%}
    <div{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
        {%- if attr.readonly is defined %}
            <div class="cursor-not-allowed">
                {{ parent() }}
            </div>
        {% else %}
            {{ parent() }}
        {% endif %}
    </div>
{%- endblock choice_widget_collapsed -%}

{%- block choice_widget_expanded -%}
    {%- for child in form %}
        {%- set child_attr = {} -%}
        {%- if attr['hx-trigger'] is defined -%}
            {%- set child_attr = child_attr|merge({
                'hx-trigger': attr['hx-trigger'],
                'hx-post': attr['hx-post'],
                'hx-swap': attr['hx-swap']
            }) -%}
        {%- endif -%}
        {%- if child.vars.attr['data-tooltip'] is defined -%}
            {%- set child_attr = child_attr|merge({'data-tooltip': child.vars.attr['data-tooltip']}) -%}
        {%- endif -%}
        {{- form_row(child, { 'attr': child_attr }) -}}
    {% endfor -%}
{%- endblock choice_widget_expanded -%}

{%- block multiselect_widget -%}
    <div class="relative" {{ stimulus_controller('multiselect', { 'placeholder': form.vars.empty_label }) }}>
        <div {{ stimulus_action('multiselect', 'toggle', 'click')}}
                role="button"
                class="relative rounded-md border border-gray-300 flex items-start space-x-2 px-3">
            <div {{ stimulus_target('multiselect', 'label') }} class="flex-1 min-h-8 py-1.5 text-gray-900 text-sm"></div>
            <svg class="w-4 h-4 mt-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="12"/><circle cx="128" cy="60" r="12"/><circle cx="128" cy="196" r="12"/></svg>
        </div>
        <div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 max-h-48 overflow-y-scroll px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
            {% for item in form.children %}
                {{ form_row(item, { 'attr': { 'data-action': 'multiselect#update', 'data-multiselect-target': 'choice', 'data-label': item.vars.label } }) }}
            {% endfor %}
        </div>
    </div>
{%- endblock multiselect_widget -%}

{%- block birthday_widget -%}
    {%- set placeholders = {
        'day': 'Tag',
        'month': 'Monat',
        'year': 'Jahr'
    } -%}
    {%- set field_order = ['day', 'month', 'year'] -%}

    {# Check if HTMX attributes are present - if so, use birthday controller for deferred triggering #}
    {%- set has_htmx = attr['hx-trigger'] is defined -%}
    {%- set htmx_attrs = {} -%}
    {%- if has_htmx -%}
        {# Extract HTMX attributes and replace trigger with custom event #}
        {%- set htmx_attrs = {
            'hx-trigger': 'birthday:complete',
            'hx-post': attr['hx-post']|default(''),
            'hx-target': attr['hx-target']|default('#main-content'),
            'hx-swap': attr['hx-swap']|default('innerHTML')
        } -%}
        {# Remove HTMX attrs from main attr to avoid duplication #}
        {%- set attr = attr|filter((v, k) => k not in ['hx-trigger', 'hx-post', 'hx-target', 'hx-swap']) -%}
    {%- endif -%}

    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' flex items-center space-x-2')|trim}) -%}
    <div {{ block('widget_container_attributes') }}{% if has_htmx %} {{ stimulus_controller('birthday') }}{% for key, value in htmx_attrs %} {{ key }}="{{ value }}"{% endfor %}{% endif %}>
        {%- for field_name in field_order -%}
            {%- set child = form[field_name] -%}
            {%- set child_attr = child.vars.attr|default({}) -%}
            {%- set child_attr = child_attr|merge({
                'placeholder': placeholders[field_name],
                'class': (child_attr.class|default('') ~ ' form-field')|trim
            }) -%}
            {%- if has_htmx -%}
                {%- set child_attr = child_attr|merge({
                    'data-birthday-target': field_name,
                    'data-action': 'change->birthday#check'
                }) -%}
            {%- endif -%}

            {{- form_widget(child, {'attr': child_attr}) -}}
            {% if not loop.last %}
                <span class="block flex-shrink-0">.</span>
            {% endif %}
        {%- endfor -%}
    </div>
{%- endblock birthday_widget -%}

{% block insurance_choice_widget %}
    {%- if expanded -%}
        {%- for child in form %}
            {%- set child_attr = {} -%}

            {%- if attr['hx-trigger'] is defined -%}
                {%- set child_attr = child_attr|merge({
                    'hx-trigger': attr['hx-trigger'],
                    'hx-post': attr['hx-post'],
                    'hx-swap': attr['hx-swap']
                }) -%}
            {%- endif -%}

            {%- if child.vars.attr is defined -%}
                {%- set child_attr = child_attr|merge(child.vars.attr) -%}
            {%- endif -%}

            {%- set insurance = insurances[child.vars.value] ?? null -%}
            {%- set urlsProductInfo = insurance is not null ? insurance.getAllUrlsProductInfo() : [] -%}

            <div class="flex">
                {{- form_row(child, { 'attr': child_attr }) -}}

                {%- if urlsProductInfo is not empty -%}
                    <div class="pt-px pl-1" {{ stimulus_controller('tooltip') }}>
                        <button type="button" data-tooltip-target="trigger" class="text-blue-600 hover:text-blue-800">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                            </svg>
                        </button>
                        <template data-tooltip-target="template">
                            <div class="text-sm">
                                {%- for url in urlsProductInfo -%}
                                    <a href="{{ url }}" target="_blank" rel="noopener noreferrer" class="block">
                                        Produktinformation {{ loop.index }}
                                    </a>
                                {%- endfor -%}
                            </div>
                        </template>
                    </div>
                {%- endif -%}
            </div>
        {% endfor -%}
    {%- else -%}
        {{- parent() -}}
    {%- endif -%}
{% endblock %}

{% block step_select_choice_widget %}
    <div {{ stimulus_controller('step-input', { 'min': form.vars.min_value, 'max': form.vars.max_value }) }}>
        {{ form_widget(form, { 'attr': {
            'data-step-input-target': 'field',
            'class': 'hidden',
        } }) }}
        <div class="flex items-center justify-between">
            <button type="button" class="button button--small bg-white" {{ stimulus_target('step-input', 'buttonDec') }} {{ stimulus_action('step-input', 'decrease') }}>
                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
            </button>
            <div class="px-2" {{ stimulus_target('step-input', 'display') }}></div>
            <button type="button" class="button button--small button--primary" {{ stimulus_target('step-input', 'buttonInc') }} {{ stimulus_action('step-input', 'increase') }}>
                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="40" x2="128" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
            </button>
        </div>
    </div>
{% endblock %}