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

{% block form_row %}
    <div{% with { attr: row_attr|merge({ class: ('flex min-w-0 flex-col gap-2 ' ~ (row_attr.class|default('')))|trim }) } %}{{ block('attributes') }}{% endwith %}>
        {{ form_label(form) }}
        {{ form_widget(form) }}
        {{ form_errors(form) }}
    </div>
{% endblock %}

{% block form_label %}
    {% if label is not same as(false) %}
        {% if not compound %}
            {% set label_attr = label_attr|merge({ for: id }) %}
        {% endif %}

        {% set label_attr = label_attr|merge({
            class: ('text-xs uppercase tracking-[0.10em] text-dark/80 ' ~ (label_attr.class|default('')))|trim
        }) %}

        {% if label is empty %}
            {% if label_format is not empty %}
                {% set label = label_format|replace({
                    '%name%': name,
                    '%id%': id,
                }) %}
            {% else %}
                {% set label = name|humanize %}
            {% endif %}
        {% endif %}

        <label{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}>
            {% if translation_domain is same as(false) %}
                {{ label }}
            {% else %}
                {{ label|trans(label_translation_parameters, translation_domain) }}
            {% endif %}
            {% if required %}
                <span class="text-red-600">*</span>
            {% endif %}
        </label>
    {% endif %}
{% endblock %}

{% block form_widget_simple %}
    {% set has_errors = errors|length > 0 %}

    {% set base_class = 'block h-10 w-full min-w-0 max-w-full box-border border bg-white px-2 text-base sm:text-sm text-dark outline-none transition focus:ring-0' %}
    {% set normal_class = 'border-gold/25 focus:border-gold' %}
    {% set error_class = 'border-red-500 text-red-700 placeholder:text-red-300 focus:border-red-500' %}

    {% set attr = attr|merge({
        class: (base_class ~ ' ' ~ (has_errors ? error_class : normal_class) ~ ' ' ~ (attr.class|default('')))|trim
    }) %}

    {{ parent() }}
{% endblock %}

{% block textarea_widget %}
    {% set has_errors = errors|length > 0 %}
    {% set attr = attr|merge({
        class: ('block w-full min-w-0 max-w-full box-border border bg-white px-4 py-4 text-base sm:text-sm text-dark outline-none transition focus:ring-0 ' ~
        (has_errors ? 'border-red-500 focus:border-red-500' : 'border-gold/25 focus:border-gold') ~ ' ' ~
        (attr.class|default('')))|trim
    }) %}
    {{ parent() }}
{% endblock %}

{% block choice_widget_collapsed %}
    {% set has_errors = errors|length > 0 %}
    {% set attr = attr|merge({
        class: ('block h-10 w-full min-w-0 max-w-full box-border border bg-white px-4 text-base sm:text-sm text-dark outline-none transition focus:ring-0 ' ~
        (has_errors ? 'border-red-500 focus:border-red-500' : 'border-gold/25 focus:border-gold') ~ ' ' ~
        (attr.class|default('')))|trim
    }) %}
    {{ parent() }}
{% endblock %}

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

{% block _checkout_paymentMethod_widget %}
    {% set choices = form.vars.payment_method_choices|default([]) %}

    <div class="space-y-3">
        {% for choice in choices %}
            {% set child = choice.child %}
            {% set widget_attr = child.vars.attr|merge({
                class: ((child.vars.attr.class|default('')) ~ ' h-4 w-4 border-gold text-gold focus:ring-gold')|trim,
                'data-action': 'change->live#action',
                'data-live-action-param': 'savePaymentMethod',
                'data-loading': 'action(savePaymentMethod)|addAttribute(disabled)'
            }) %}

            <label
                for="{{ child.vars.id }}"
                class="flex cursor-pointer items-center gap-4 border p-4 transition{% if child.vars.checked %} border-gold bg-gold/10{% else %} border-gold/20 hover:border-gold/40{% endif %}"
            >
                {{ form_widget(child, {
                    attr: widget_attr
                }) }}

                <span class="flex-1">
                    {% set payment_description = choice.method.configuration['text']|default('')|striptags|trim %}
                    {% set choice_subtitle = choice.subtitle is not empty
                        ? choice.subtitle
                        : (choice.payment_online
                            ? 'checkout_design.payment_card_subtitle'|trans
                            : (payment_description is not empty ? 'checkout_design.payment_bank_subtitle'|trans : '')) %}
                    <span class="block text-sm font-medium uppercase">{{ choice.name }}</span>
                    {% if choice_subtitle is not empty %}
                        <span class="block text-sm text-dark/90">{{ choice_subtitle }}</span>
                    {% endif %}
                </span>

                {% if choice.icon_path %}
                    <span class="flex h-10 w-16 shrink-0 items-center justify-center border border-gold/20 bg-white px-2">
                        <img
                            src="{{ asset(choice.icon_path|imagine_filter('relative_widen_100_filter')) }}"
                            alt="{{ choice.icon_alt }}"
                            class="max-h-6 w-auto object-contain"
                        >
                    </span>
                {% endif %}

                {% if choice.payment_online %}
                    <span class="bg-dark px-3 py-1 text-[10px] uppercase tracking-[0.12em] text-white">3D Secure</span>
                {% endif %}
            </label>
        {% endfor %}
    </div>
{% endblock %}

{% block _checkout_deliveryMethod_widget %}
    {% set groups = form.vars.grouped_methods|default([]) %}
    {% set standard_choice = form.vars.standard_choice|default(null) %}
    {% set standard_shipping_text = form.vars.standard_shipping_text|default(null) %}

    <div class="space-y-4">
        {% if standard_choice %}
            <label
                for="{{ form.vars.id }}_standard"
                class="flex items-start gap-4 border border-gold/20 p-4 transition{% if standard_choice.available %} cursor-pointer hover:border-gold/40{% else %} cursor-not-allowed bg-dark/[0.02]{% endif %}{% if standard_choice.selected %} border-gold bg-gold/5{% endif %}"
            >
                <input
                    type="radio"
                    id="{{ form.vars.id }}_standard"
                    name="{{ form.vars.full_name }}"
                    value=""
                    class="mt-1 h-4 w-4 border-gold text-gold focus:ring-gold"
                    {% if standard_choice.selected %}checked{% endif %}
                    {% if standard_choice.available %}
                        data-action="change->live#action"
                        data-live-action-param="refreshShipping"
                    {% else %}
                        disabled="disabled"
                    {% endif %}
                >

                <span class="min-w-0 flex-1 space-y-1">
                    <span class="block text-sm font-medium uppercase">
                        {{ 'delivery.standard'|trans }}
                    </span>
                    <span class="block text-sm font-medium text-dark">
                        {{ 'delivery.standard_description'|trans }}
                    </span>
                    {% if standard_shipping_text %}
                        <span class="block pt-1 text-sm text-dark/75">
                            {{ standard_shipping_text }}
                        </span>
                    {% endif %}

                    {% if not standard_choice.available and standard_choice.unavailable_reason %}
                        <span class="block text-sm font-semibold leading-5 text-red-700">
                            {{ standard_choice.unavailable_reason }}
                        </span>
                    {% endif %}
                </span>

                <span class="ml-auto shrink-0 whitespace-nowrap text-sm font-semibold text-dark">
                    {{ standard_choice.price_label }}
                </span>
            </label>
        {% endif %}

        {% for group in groups %}
            {% if group.single %}
                {% set choice = group.choices|first %}
                {{ _self.delivery_method_card(choice) }}
            {% elseif group.min_view %}
                <details class="border border-gold/20" {% if group.open %}open{% endif %}>
                    <summary class="cursor-pointer px-4 py-3 text-sm font-medium uppercase">
                        {{ group.name }}
                    </summary>

                    <div class="space-y-3 border-t border-gold/20 p-4">
                        {% for choice in group.choices %}
                            {{ _self.delivery_method_card(choice) }}
                        {% endfor %}
                    </div>
                </details>
            {% else %}
                <div class="space-y-3">
                    <h3 class="text-sm font-medium uppercase">
                        {{ group.name }}
                    </h3>

                    {% for choice in group.choices %}
                        {{ _self.delivery_method_card(choice) }}
                    {% endfor %}
                </div>
            {% endif %}
        {% endfor %}
    </div>
{% endblock %}

{% macro delivery_method_card(choice) %}
    {% set child = choice.child %}
    {% set method = choice.method %}
    {% set available = choice.available %}
    {% set unavailable_reason = choice.unavailable_reason|default(null) %}
    {% set widget_attr = child.vars.attr|merge({
        class: ((child.vars.attr.class|default('')) ~ ' mt-1 h-4 w-4 border-gold text-gold focus:ring-gold')|trim
    }) %}

    {% if available %}
        {% set widget_attr = widget_attr|merge({
            'data-action': 'change->live#action',
            'data-live-action-param': 'refreshShipping'
        }) %}
    {% else %}
        {% set widget_attr = widget_attr|merge({
            disabled: 'disabled'
        }) %}
    {% endif %}

    <label
        for="{{ child.vars.id }}"
        class="flex items-start gap-4 border border-gold/20 p-4 transition{% if available %} cursor-pointer hover:border-gold/40{% else %} cursor-not-allowed bg-dark/[0.02]{% endif %}{% if child.vars.checked %} border-gold bg-gold/5{% endif %}"
    >
        {{ form_widget(child, {
            attr: widget_attr
        }) }}

        <span class="min-w-0 flex-1 space-y-1">
            <span class="block text-sm font-medium uppercase">
                {{ method.name }}
            </span>

            {% if method.description %}
                <span class="block text-sm font-medium text-dark">
                    {{ method.description|raw }}
                </span>
            {% endif %}

            {% if not available %}
                {% if unavailable_reason %}
                    <span class="block text-sm font-semibold leading-5 text-red-700">
                        {{ unavailable_reason }}
                    </span>
                {% endif %}
            {% endif %}
        </span>

        <span class="ml-auto shrink-0 whitespace-nowrap text-sm font-semibold text-dark">
            {{ choice.price_label }}
        </span>
    </label>
{% endmacro %}
