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

{% 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 %}
    <div class="min-h-[calc(100vh-13rem)] bg-[#f7f2ea]">
        <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
            <section class="overflow-hidden rounded-sm border border-[#e5d8c7] bg-white shadow-[0_18px_45px_rgba(61,43,23,0.08)]">
                <div class="border-b border-[#efe3d4] bg-[#fcfaf7] px-6 py-8 sm:px-8">
                    <div class="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
                        <div class="max-w-2xl">
                            <p class="text-xs uppercase tracking-[0.4em] text-[#9d7c47]">{{ 'account_page.eyebrow'|trans }}</p>
                            <h1 class="mt-3 font-serif text-3xl text-[#201917] sm:text-4xl">{{ 'account_page.heading'|trans }}</h1>
                            <p class="mt-3 text-sm leading-6 text-[#5d4b41] sm:text-base">
                                {{ 'account_page.intro'|trans }}
                            </p>
                        </div>

                        <a
                            href="{{ path('app_logout') }}"
                            data-turbo-prefetch="false"
                            class="inline-flex min-h-11 items-center justify-center border border-[#201917] px-5 text-sm font-medium uppercase tracking-[0.2em] text-[#201917] transition hover:border-[#9d7c47] hover:text-[#9d7c47]"
                        >
                            {{ 'account_page.actions.logout'|trans }}
                        </a>
                    </div>
                </div>

                <div class="grid gap-8 px-6 py-8 sm:px-8 lg:grid-cols-[0.95fr_1.05fr]">
                    <div class="min-w-0 space-y-5">
                        <div>
                            <h2 class="font-serif text-2xl text-[#201917]">{{ 'account_page.orders.title'|trans }}</h2>
                            <p class="mt-2 text-sm leading-6 text-[#5d4b41]">{{ 'account_page.orders.description'|trans }}</p>
                        </div>

                        {% if orders is empty %}
                            <div class="rounded-sm border border-dashed border-[#d9c7ae] bg-[#fcfaf7] px-5 py-6 text-sm text-[#5d4b41]">
                                {{ 'account_page.orders.empty'|trans }}
                            </div>
                        {% else %}
                            <div class="space-y-4">
                                {% for order in orders %}
                                    {% set is_paid = order.cart.cartCheckout and order.cart.cartCheckout.payedAt %}
                                    <article class="rounded-sm border border-[#eadfcf] bg-white p-5">
                                        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                                            <div>
                                                <div class="text-xs uppercase tracking-[0.22em] text-[#9d7c47]">{{ 'account_page.orders.order_number'|trans }}</div>
                                                <div class="mt-2 flex flex-wrap items-center gap-3">
                                                    <div class="font-serif text-2xl text-[#201917]">#{{ order.cart.token }}</div>
                                                    <span class="inline-flex items-center border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.16em] {{ is_paid ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-amber-200 bg-amber-50 text-amber-700' }}">
                                                        {{ (is_paid ? 'account_page.orders.paid' : 'account_page.orders.unpaid')|trans }}
                                                    </span>
                                                </div>
                                            </div>

                                            <a
                                                href="{{ path('app_account_order', { cartId: order.cart.id }) }}"
                                                class="inline-flex min-h-10 items-center justify-center border border-[#201917] px-4 text-xs font-medium uppercase tracking-[0.18em] text-[#201917] transition hover:border-[#9d7c47] hover:text-[#9d7c47]"
                                            >
                                                {{ 'account_page.orders.view'|trans }}
                                            </a>
                                        </div>

                                        <div class="mt-5 grid gap-4 text-sm text-[#5d4b41] sm:grid-cols-2">
                                            <div>
                                                <div class="text-xs uppercase tracking-[0.18em] text-[#9d7c47]">{{ 'account_page.orders.placed_on'|trans }}</div>
                                                <div class="mt-1 text-[#201917]">
                                                    {% 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="text-xs uppercase tracking-[0.18em] text-[#9d7c47]">{{ 'account_page.orders.total'|trans }}</div>
                                                <div class="mt-1 text-[#201917]">
                                                    {% if order.cart.pricing %}
                                                        {{ order.cart.pricing.totalTTC|price_format }} €
                                                    {% else %}
                                                        -
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div>
                                                <div class="text-xs uppercase tracking-[0.18em] text-[#9d7c47]">{{ 'account_page.orders.payment_method'|trans }}</div>
                                                <div class="mt-1 text-[#201917]">{{ order.payment_method_label ? order.payment_method_label|trans : '-' }}</div>
                                            </div>
                                            <div>
                                                <div class="text-xs uppercase tracking-[0.18em] text-[#9d7c47]">{{ 'account_page.orders.delivery_method'|trans }}</div>
                                                <div class="mt-1 text-[#201917]">{{ 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-serif text-2xl text-[#201917]">{{ 'account_page.form.title'|trans }}</h2>
                            <p class="mt-2 text-sm leading-6 text-[#5d4b41]">{{ 'account_page.form.description'|trans }}</p>
                        </div>

                        {% if app.user and app.user.group and not app.user.group.byDefault %}
                            <div class="rounded-sm border border-[#d9c7ae] bg-[#fcfaf7] px-5 py-4">
                                <div class="text-xs uppercase tracking-[0.22em] text-[#9d7c47]">{{ 'account_page.group.title'|trans }}</div>
                                <div class="mt-2 font-serif text-xl text-[#201917]">{{ app.user.group.name }}</div>
                            </div>
                        {% endif %}

                        {{ form_start(form, { attr: { class: 'grid min-w-0 gap-6' } }) }}
                            <div class="rounded-sm border border-[#eadfcf] bg-[#fcfaf7] p-5">
                                <div class="grid min-w-0 gap-4 md:grid-cols-2">
                                    {{ form_row(form.email, { row_attr: { class: 'md:col-span-2' } }) }}
                                </div>
                            </div>

                            <section class="rounded-sm border border-[#eadfcf] bg-white p-5">
                                <h3 class="font-serif text-xl text-[#201917]">{{ 'account_page.form.marketing_title'|trans }}</h3>
                                <p class="mt-2 text-sm leading-6 text-[#5d4b41]">{{ 'account_page.form.marketing_description'|trans }}</p>
                                <label class="mt-4 inline-flex max-w-full cursor-pointer items-start gap-3 rounded-sm border border-[#d9c7ae] bg-[#fcfaf7] px-4 py-3 text-sm leading-6 text-[#5d4b41]">
                                    {{ form_widget(form.marketingOptIn, {'attr': {'class': 'mt-1 h-4 w-4 rounded border-[#cfb183] text-[#9d7c47] 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>

                            <div class="grid gap-6">
                                <section class="rounded-sm border border-[#eadfcf] bg-white p-5">
                                    <h3 class="font-serif text-xl text-[#201917]">{{ 'account_page.form.delivery_title'|trans }}</h3>
                                    <div class="mt-4 grid min-w-0 gap-4 md:grid-cols-2">
                                        {{ form_row(form.deliveryAddress.firstname) }}
                                        {{ form_row(form.deliveryAddress.lastname) }}
                                        {{ form_row(form.deliveryAddress.street, { row_attr: { class: 'md:col-span-2' } }) }}
                                        {{ form_row(form.deliveryAddress.postal) }}
                                        {{ form_row(form.deliveryAddress.city) }}
                                        {{ form_row(form.deliveryAddress.country) }}
                                        {{ form_row(form.deliveryAddress.phone) }}
                                        <div class="rounded-sm border border-[#d9c7ae] bg-[#fcfaf7] p-4 md:col-span-2">
                                            <div class="grid min-w-0 gap-4 md:grid-cols-3">
                                                {{ form_row(form.deliveryAddress.company) }}
                                                {{ form_row(form.deliveryAddress.vatId) }}
                                                {{ form_row(form.deliveryAddress.siret) }}
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                <section
                                    x-data="{ invoiceOpen: {{ form.invoiceAddress.differentAddress.vars.checked ? 'true' : 'false' }} }"
                                    class="rounded-sm border border-[#eadfcf] bg-white p-5"
                                >
                                    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                                        <h3 class="font-serif text-xl text-[#201917]">{{ '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-[#d9c7ae] bg-[#fcfaf7] px-3 py-2 text-[11px] font-medium uppercase tracking-[0.16em] text-[#201917]">
                                            {{ form_widget(form.invoiceAddress.differentAddress, {
                                                attr: {
                                                    class: 'h-4 w-4 cursor-pointer rounded border-[#c8b79c] text-[#9d7c47] focus:ring-[#9d7c47]',
                                                    '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">
                                        {{ form_row(form.invoiceAddress.firstname) }}
                                        {{ form_row(form.invoiceAddress.lastname) }}
                                        {{ form_row(form.invoiceAddress.email, {
                                            attr: {
                                                'x-bind:required': 'invoiceOpen'
                                            }
                                        }) }}
                                        {{ form_row(form.invoiceAddress.phone) }}
                                        {{ form_row(form.invoiceAddress.street, { row_attr: { class: 'md:col-span-2' } }) }}
                                        {{ form_row(form.invoiceAddress.postal) }}
                                        {{ form_row(form.invoiceAddress.city) }}
                                        {{ form_row(form.invoiceAddress.country) }}
                                        <div class="rounded-sm border border-[#d9c7ae] bg-[#fcfaf7] p-4 md:col-span-2">
                                            <div class="grid min-w-0 gap-4 md:grid-cols-3">
                                                {{ form_row(form.invoiceAddress.company) }}
                                                {{ form_row(form.invoiceAddress.vatId) }}
                                                {{ form_row(form.invoiceAddress.siret) }}
                                            </div>
                                        </div>
                                    </div>
                                </section>

                            </div>

                            <div class="flex justify-end">
                                <button
                                    type="submit"
                                    class="inline-flex min-h-12 items-center cursor-pointer justify-center bg-[#201917] px-6 text-sm font-medium uppercase tracking-[0.24em] text-white transition hover:bg-[#9d7c47]"
                                >
                                    {{ 'account_page.form.submit'|trans }}
                                </button>
                            </div>

                            <div class="hidden">{{ form_rest(form) }}</div>
                        {{ form_end(form) }}
                    </div>
                </div>
            </section>
        </div>
    </div>
{% endblock %}
