{% 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 page_hero %}
    {% set hero_image_path %}{% block hero_image %}{{ viti_theme_asset('images/headers/header-shop.jpg') }}{% endblock %}{% endset %}
    {% include 'partials/_hero.html.twig' with {
        page_key: 'account',
        target_id: 'account',
        image: 'images/headers/header-shop.jpg',
        image_path: hero_image_path|trim,
        image_alt: 'background-header.account'
    } %}
{% endblock %}

{% block main %}
    <section id="account" class="theme-page theme-account">
        <div class="theme-container">
            <header class="theme-account__header">
                <div>
                    <p class="theme-eyebrow">{{ 'account_page.eyebrow'|trans }}</p>
                    <h2>{{ 'account_page.heading'|trans }}</h2>
                    <p>{{ 'account_page.intro'|trans }}</p>
                </div>
                <a
                    href="{{ path('app_logout') }}"
                    data-turbo-prefetch="false"
                    class="theme-button-stroke theme-hover-link-effect"
                >
                    {{ 'account_page.actions.logout'|trans }}
                </a>
            </header>

            <div class="theme-account__grid">
                <section class="theme-account-panel">
                    <div class="theme-account-panel__heading">
                        <h3>{{ 'account_page.orders.title'|trans }}</h3>
                        <p>{{ 'account_page.orders.description'|trans }}</p>
                    </div>

                    {% if orders is empty %}
                        <div class="theme-account-empty">
                            {{ 'account_page.orders.empty'|trans }}
                        </div>
                    {% else %}
                        <div class="theme-order-list">
                            {% for order in orders %}
                                {% set payment_state = order.payment_state %}
                                <article class="theme-order-card">
                                    <div class="theme-order-card__top">
                                        <div>
                                            <div class="theme-order-card__label">{{ 'account_page.orders.order_number'|trans }}</div>
                                            <div class="theme-order-card__number">#{{ order.cart.token }}</div>
                                        </div>
                                        <span class="theme-status theme-status--{{ payment_state.code }}">
                                            {{ payment_state.label_key|trans }}
                                        </span>
                                    </div>

                                    <dl class="theme-order-card__details">
                                        <div>
                                            <dt>{{ 'account_page.orders.placed_on'|trans }}</dt>
                                            <dd>
                                                {% 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') : '-' }}
                                            </dd>
                                        </div>
                                        <div>
                                            <dt>{{ 'account_page.orders.total'|trans }}</dt>
                                            <dd>
                                                {% if order.cart.pricing %}
                                                    {{ order.cart.pricing.totalTTC|price_format }} €
                                                {% else %}
                                                    -
                                                {% endif %}
                                            </dd>
                                        </div>
                                        <div>
                                            <dt>{{ 'account_page.orders.payment_method'|trans }}</dt>
                                            <dd>{{ order.payment_method_label ? order.payment_method_label|trans : '-' }}</dd>
                                        </div>
                                        <div>
                                            <dt>{{ 'account_page.orders.delivery_method'|trans }}</dt>
                                            <dd>{{ order.cart.deliveryMethod ? order.cart.deliveryMethod.name : '-' }}</dd>
                                        </div>
                                    </dl>

                                    <div class="theme-form-line">
                                        <a href="{{ path('app_account_order', { cartId: order.cart.id }) }}" class="theme-inline-link">
                                            {{ 'account_page.orders.view'|trans }}
                                        </a>
                                        {% if order.cart.withdrawalRequest %}
                                            <span class="theme-status">
                                                {{ 'withdrawal.account.already_submitted'|trans({ '%date%': order.cart.withdrawalRequest.submittedAt|date('d/m/Y H:i') }) }}
                                            </span>
                                        {% else %}
                                            <a href="{{ path('shop_withdrawal', { reference: order.cart.token }) }}" class="theme-inline-link">
                                                {{ 'withdrawal.access_link'|trans }}
                                            </a>
                                        {% endif %}
                                    </div>
                                </article>
                            {% endfor %}
                        </div>
                    {% endif %}
                </section>

                <section class="theme-account-panel">
                    <div class="theme-account-panel__heading">
                        <h3>{{ 'account_page.form.title'|trans }}</h3>
                        <p>{{ 'account_page.form.description'|trans }}</p>
                    </div>

                    {% if app.user and app.user.group and not app.user.group.byDefault %}
                        <div class="theme-account-group">
                            <div class="theme-order-card__label">{{ 'account_page.group.title'|trans }}</div>
                            <div>{{ app.user.group.name }}</div>
                        </div>
                    {% endif %}

                    {{ form_start(form, { attr: { class: 'theme-account-form' } }) }}
                        <div class="theme-account-form__section">
                            <div class="theme-account-form__grid">
                                {{ form_row(form.email, { row_attr: { class: 'theme-account-form__wide' } }) }}
                            </div>
                        </div>

                        <section class="theme-account-form__section">
                            <h4>{{ 'account_page.form.marketing_title'|trans }}</h4>
                            <p>{{ 'account_page.form.marketing_description'|trans }}</p>
                            <label class="theme-checkbox theme-checkbox--panel">
                                {{ form_widget(form.marketingOptIn, {'attr': {'class': 'theme-checkbox__input'}}) }}
                                <span>{{ form.marketingOptIn.vars.label|trans({}, form.marketingOptIn.vars.translation_domain) }}</span>
                            </label>
                            <div class="theme-form-error">{{ form_errors(form.marketingOptIn) }}</div>
                        </section>

                        <section class="theme-account-form__section">
                            <h4>{{ 'account_page.form.delivery_title'|trans }}</h4>
                            <div class="theme-account-form__grid">
                                {{ form_row(form.deliveryAddress.firstname) }}
                                {{ form_row(form.deliveryAddress.lastname) }}
                                {{ form_row(form.deliveryAddress.street, { row_attr: { class: 'theme-account-form__wide' } }) }}
                                {{ form_row(form.deliveryAddress.postal) }}
                                {{ form_row(form.deliveryAddress.city) }}
                                {{ form_row(form.deliveryAddress.country) }}
                                {{ form_row(form.deliveryAddress.phone) }}
                                <div class="theme-account-form__nested theme-account-form__wide">
                                    <div class="theme-account-form__grid theme-account-form__grid--three">
                                        {{ form_row(form.deliveryAddress.company) }}
                                        {{ form_row(form.deliveryAddress.vatId) }}
                                        {% if (form.deliveryAddress.country.vars.value ?: 'FR') == 'FR' %}
                                            {{ form_row(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="theme-account-form__section"
                        >
                            <div class="theme-account-form__section-head">
                                <h4>{{ 'account_page.form.invoice_title'|trans }}</h4>
                                <label class="theme-checkbox theme-checkbox--panel">
                                    {{ form_widget(form.invoiceAddress.differentAddress, {
                                        attr: {
                                            class: 'theme-checkbox__input',
                                            'x-model': 'invoiceOpen'
                                        }
                                    }) }}
                                    <span>{{ 'account_page.form.invoice_different'|trans }}</span>
                                </label>
                            </div>

                            <div x-cloak x-show="invoiceOpen" class="theme-account-form__grid theme-account-form__grid--invoice">
                                {{ 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: 'theme-account-form__wide' } }) }}
                                {{ form_row(form.invoiceAddress.postal) }}
                                {{ form_row(form.invoiceAddress.city) }}
                                {{ form_row(form.invoiceAddress.country) }}
                                <div class="theme-account-form__nested theme-account-form__wide">
                                    <div class="theme-account-form__grid theme-account-form__grid--three">
                                        {{ form_row(form.invoiceAddress.company) }}
                                        {{ form_row(form.invoiceAddress.vatId) }}
                                        {% if (form.invoiceAddress.country.vars.value ?: 'FR') == 'FR' %}
                                            {{ form_row(form.invoiceAddress.siret) }}
                                        {% else %}
                                            {% do form.invoiceAddress.siret.setRendered() %}
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </section>

                        <div class="theme-account-form__actions">
                            <button type="submit" class="theme-button-fill theme-hover-link-effect">
                                {{ '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) }}
                </section>
            </div>
        </div>
    </section>
{% endblock %}
