{% extends 'base.html.twig' %}
{% form_theme form with app_form_themes() only %}

{% macro account_field(field, row_class = '', input_class = 'min-h-[46px] rounded-none border border-primary/12 bg-white px-4 text-[15px] text-primary placeholder:text-primary/35 outline-none transition focus:border-primary', label_class = 'font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary/70', attr_extra = {}) %}
    <div class="grid gap-2 {{ row_class }}">
        {{ form_label(field, null, { label_attr: { class: label_class } }) }}
        {{ form_widget(field, { attr: { class: input_class }|merge(attr_extra) }) }}
        <div class="text-sm text-red-600">{{ form_errors(field) }}</div>
    </div>
{% endmacro %}

{% import _self as account %}

{% block title %}{{ 'account.title'|trans({}, 'meta') }}{% endblock %}
{% block meta %}
    {{ include('partials/seo.html.twig', {
        title_key: 'account.title',
        description_key: 'account.description',
        robots: 'noindex,nofollow'
    }) }}
{% endblock meta %}

{% block main %}
    <section class="relative min-h-screen overflow-hidden bg-background pt-32 pb-16 md:pt-36 md:pb-20">
        <div class="absolute inset-x-0 top-0 h-28 bg-primary md:h-32"></div>
        <div class="pointer-events-none absolute inset-x-0 top-0 h-[30rem] bg-[radial-gradient(circle_at_top,rgba(173,156,118,0.12),transparent_64%)]"></div>

        <div class="relative z-10 mx-auto max-w-[1440px] px-4 md:px-16">
            <div class="mx-auto max-w-4xl text-center">
                <span class="font-label text-[11px] font-semibold uppercase tracking-[0.22em] text-secondary">
                    {{ 'account_page.eyebrow'|trans }}
                </span>
                <h1 class="mt-4 font-display text-[34px] leading-[1.02] font-semibold [font-optical-sizing:auto] text-primary md:text-[48px]">
                    {{ 'account_page.heading'|trans }}
                </h1>
                <p class="mx-auto mt-4 max-w-3xl text-[15px] leading-7 text-primary/72">
                    {{ 'account_page.intro'|trans }}
                </p>
            </div>

            <div class="mx-auto mt-10 max-w-[1280px] p-0 md:border md:border-primary/10 md:bg-surface-container-low md:p-7 md:shadow-[0_20px_60px_rgba(51,38,28,0.06)]">
                <div class="bg-white/70 md:border md:border-primary/8">
                    <div class="flex flex-col gap-5 border-b border-primary/8 px-5 py-6 md:px-8 md:py-8 lg:flex-row lg:items-end lg:justify-between">
                        <div class="max-w-3xl">
                            <p class="text-[15px] leading-7 text-primary/72">
                                {{ 'account_page.intro'|trans }}
                            </p>
                        </div>

                        <a
                            href="{{ path('app_logout') }}"
                            data-turbo-prefetch="false"
                            class="inline-flex min-h-[46px] cursor-pointer items-center justify-center border border-primary px-5 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-primary transition hover:border-secondary hover:text-secondary"
                        >
                            {{ 'account_page.actions.logout'|trans }}
                        </a>
                    </div>

                    <div class="grid gap-8 px-5 py-6 md:px-8 md:py-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.08fr)]">
                        <div class="min-w-0 space-y-5">
                            <div>
                                <h2 class="font-display text-[28px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                    {{ 'account_page.orders.title'|trans }}
                                </h2>
                                <p class="mt-3 text-[15px] leading-7 text-primary/72">
                                    {{ 'account_page.orders.description'|trans }}
                                </p>
                            </div>

                            {% if orders is empty %}
                                <div class="border border-dashed border-primary/18 bg-white/60 px-5 py-6 text-[15px] leading-7 text-primary/62">
                                    {{ 'account_page.orders.empty'|trans }}
                                </div>
                            {% else %}
                                <div class="space-y-4">
                                    {% for order in orders %}
                                        {% set payment_state = order.payment_state %}
                                        <article class="border border-primary/10 bg-white/70 p-5">
                                            <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                                                <div class="min-w-0">
                                                    <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">
                                                        {{ 'account_page.orders.order_number'|trans }}
                                                    </div>
                                                    <div class="mt-3 flex flex-wrap items-center gap-3">
                                                        <div class="font-display text-[28px] leading-none font-semibold [font-optical-sizing:auto] text-primary">
                                                            #{{ order.cart.token }}
                                                        </div>
                                                        <span class="inline-flex items-center border px-2.5 py-1 font-label text-[10px] font-semibold uppercase tracking-[0.16em]
                                                            {% if payment_state.code == 'paid' %}
                                                                border-emerald-200 bg-emerald-50 text-emerald-700
                                                            {% elseif payment_state.code in ['failed', 'canceled'] %}
                                                                border-red-200 bg-red-50 text-red-700
                                                            {% else %}
                                                                border-amber-200 bg-amber-50 text-amber-700
                                                            {% endif %}
                                                        ">
                                                            {{ payment_state.label_key|trans }}
                                                        </span>
                                                    </div>
                                                </div>

                                                <a
                                                    href="{{ path('app_account_order', { cartId: order.cart.id }) }}"
                                                    class="inline-flex min-h-[42px] cursor-pointer items-center justify-center border border-primary px-4 py-2 font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary transition hover:border-secondary hover:text-secondary"
                                                >
                                                    {{ 'account_page.orders.view'|trans }}
                                                </a>
                                            </div>

                                            <div class="mt-5 grid gap-4 border-t border-primary/8 pt-5 text-[14px] leading-6 text-primary/72 sm:grid-cols-2">
                                                <div>
                                                    <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">
                                                        {{ 'account_page.orders.placed_on'|trans }}
                                                    </div>
                                                    <div class="mt-1 text-primary">
                                                        {% set order_date = order.cart.cartCheckout and order.cart.cartCheckout.payedAt
                                                            ? order.cart.cartCheckout.payedAt
                                                            : (order.cart.cartCheckout and order.cart.cartCheckout.orderedAt
                                                                ? order.cart.cartCheckout.orderedAt
                                                                : (order.cart.cartCheckout and order.cart.cartCheckout.updatedAt
                                                                    ? order.cart.cartCheckout.updatedAt
                                                                    : order.cart.updatedAt)) %}
                                                        {{ order_date ? order_date|date('d/m/Y H:i') : '-' }}
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">
                                                        {{ 'account_page.orders.total'|trans }}
                                                    </div>
                                                    <div class="mt-1 text-primary">
                                                        {% if order.cart.pricing %}
                                                            {{ order.cart.pricing.totalTTC|price_format }} €
                                                        {% else %}
                                                            -
                                                        {% endif %}
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">
                                                        {{ 'account_page.orders.payment_method'|trans }}
                                                    </div>
                                                    <div class="mt-1 text-primary">{{ order.payment_method_label ? order.payment_method_label|trans : '-' }}</div>
                                                </div>
                                                <div>
                                                    <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">
                                                        {{ 'account_page.orders.delivery_method'|trans }}
                                                    </div>
                                                    <div class="mt-1 text-primary">{{ order.cart.deliveryMethod ? order.cart.deliveryMethod.name : '-' }}</div>
                                                </div>
                                            </div>
                                        </article>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <div class="min-w-0 space-y-5">
                            <div>
                                <h2 class="font-display text-[28px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                    {{ 'account_page.form.title'|trans }}
                                </h2>
                                <p class="mt-3 text-[15px] leading-7 text-primary/72">
                                    {{ 'account_page.form.description'|trans }}
                                </p>
                            </div>

                            {% if app.user and app.user.group and not app.user.group.byDefault %}
                                <div class="border border-primary/10 bg-white/70 px-5 py-4">
                                    <div class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">
                                        {{ 'account_page.group.title'|trans }}
                                    </div>
                                    <div class="mt-2 font-display text-[24px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                        {{ app.user.group.name }}
                                    </div>
                                </div>
                            {% endif %}

                            {{ form_start(form, { attr: { class: 'grid min-w-0 gap-6' } }) }}
                                <div class="border border-primary/10 bg-white/70 p-5">
                                    <div class="grid min-w-0 gap-4 md:grid-cols-2">
                                        {{ account.account_field(form.email, 'md:col-span-2') }}
                                    </div>
                                </div>

                                <section class="border border-primary/10 bg-white/70 p-5">
                                    <h3 class="font-display text-[24px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                        {{ 'account_page.form.marketing_title'|trans }}
                                    </h3>
                                    <p class="mt-3 text-[15px] leading-7 text-primary/72">
                                        {{ 'account_page.form.marketing_description'|trans }}
                                    </p>
                                    <label class="mt-4 inline-flex max-w-full cursor-pointer items-start gap-3 border border-primary/12 bg-white px-4 py-3 text-[15px] leading-7 text-primary/72">
                                        {{ form_widget(form.marketingOptIn, {'attr': {'class': 'mt-1 h-4 w-4 rounded-none border-primary/20 text-secondary focus:ring-0'}}) }}
                                        <span>{{ form.marketingOptIn.vars.label|trans({}, form.marketingOptIn.vars.translation_domain) }}</span>
                                    </label>
                                    <div class="mt-2 text-sm text-red-600">{{ form_errors(form.marketingOptIn) }}</div>
                                </section>

                                <section class="border border-primary/10 bg-white/70 p-5">
                                    <h3 class="font-display text-[24px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                        {{ 'account_page.form.delivery_title'|trans }}
                                    </h3>
                                    <div class="mt-4 grid min-w-0 gap-4 md:grid-cols-2">
                                        {{ account.account_field(form.deliveryAddress.firstname) }}
                                        {{ account.account_field(form.deliveryAddress.lastname) }}
                                        {{ account.account_field(form.deliveryAddress.street, 'md:col-span-2') }}
                                        {{ account.account_field(form.deliveryAddress.postal) }}
                                        {{ account.account_field(form.deliveryAddress.city) }}
                                        {{ account.account_field(form.deliveryAddress.country, '', 'min-h-[46px] rounded-none border border-primary/12 bg-white px-4 pr-10 text-[15px] text-primary outline-none transition focus:border-primary cursor-pointer') }}
                                        {{ account.account_field(form.deliveryAddress.phone) }}
                                        <div class="border border-primary/10 bg-background/40 p-4 md:col-span-2">
                                            <div class="grid min-w-0 gap-4 md:grid-cols-3">
                                                {{ account.account_field(form.deliveryAddress.company) }}
                                                {{ account.account_field(form.deliveryAddress.vatId) }}
                                                {% if (form.deliveryAddress.country.vars.value ?: 'FR') == 'FR' %}
                                                    {{ account.account_field(form.deliveryAddress.siret) }}
                                                {% else %}
                                                    {% do form.deliveryAddress.siret.setRendered() %}
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </section>

                                <section
                                    x-data="{ invoiceOpen: {{ form.invoiceAddress.differentAddress.vars.checked ? 'true' : 'false' }} }"
                                    class="border border-primary/10 bg-white/70 p-5"
                                >
                                    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                                        <h3 class="font-display text-[24px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                                            {{ 'account_page.form.invoice_title'|trans }}
                                        </h3>
                                        <label class="inline-flex max-w-full cursor-pointer flex-wrap items-center gap-2 self-start border border-primary/12 bg-background/40 px-3 py-2 font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary">
                                            {{ form_widget(form.invoiceAddress.differentAddress, {
                                                attr: {
                                                    class: 'h-4 w-4 cursor-pointer rounded-none border-primary/20 text-secondary focus:ring-0',
                                                    'x-model': 'invoiceOpen'
                                                }
                                            }) }}
                                            <span>{{ 'account_page.form.invoice_different'|trans }}</span>
                                        </label>
                                    </div>

                                    <div x-cloak x-show="invoiceOpen" class="mt-4 grid min-w-0 gap-4 md:grid-cols-2">
                                        {{ account.account_field(form.invoiceAddress.firstname) }}
                                        {{ account.account_field(form.invoiceAddress.lastname) }}
                                        {{ account.account_field(form.invoiceAddress.email, '', 'min-h-[46px] rounded-none border border-primary/12 bg-white px-4 text-[15px] text-primary placeholder:text-primary/35 outline-none transition focus:border-primary', 'font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-primary/70', { 'x-bind:required': 'invoiceOpen' }) }}
                                        {{ account.account_field(form.invoiceAddress.phone) }}
                                        {{ account.account_field(form.invoiceAddress.street, 'md:col-span-2') }}
                                        {{ account.account_field(form.invoiceAddress.postal) }}
                                        {{ account.account_field(form.invoiceAddress.city) }}
                                        {{ account.account_field(form.invoiceAddress.country, '', 'min-h-[46px] rounded-none border border-primary/12 bg-white px-4 pr-10 text-[15px] text-primary outline-none transition focus:border-primary cursor-pointer') }}
                                        <div class="border border-primary/10 bg-background/40 p-4 md:col-span-2">
                                            <div class="grid min-w-0 gap-4 md:grid-cols-3">
                                                {{ account.account_field(form.invoiceAddress.company) }}
                                                {{ account.account_field(form.invoiceAddress.vatId) }}
                                                {% if (form.invoiceAddress.country.vars.value ?: 'FR') == 'FR' %}
                                                    {{ account.account_field(form.invoiceAddress.siret) }}
                                                {% else %}
                                                    {% do form.invoiceAddress.siret.setRendered() %}
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </section>

                                <div class="flex justify-end">
                                    <button
                                        type="submit"
                                        class="inline-flex min-h-[46px] cursor-pointer items-center justify-center bg-primary px-6 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-secondary"
                                    >
                                        {{ 'account_page.form.submit'|trans }}
                                    </button>
                                </div>

                                {% if form.captcha is defined %}
                                    {{ form_row(form.captcha) }}
                                {% endif %}
                                <div class="hidden">{{ form_rest(form) }}</div>
                            {{ form_end(form) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
