{% extends "@FerienpassAdmin/layout/slideOverBase.html.twig" %}

{% trans_default_domain 'admin' %}


{% block main %}

    <div class="@container">

        <div class="p-4 sm:p-6 @lg:p-0">
            <div class="flex flex-col @lg:flex-row @lg:items-center @lg:justify-between gap-4 mb-4 @lg:mb-8">
                <div class="flex-1 min-w-0">
                    <h1 class="text-gray-900 dark:text-gray-50 tracking-tight shrink text-xl font-bold truncate">Beleg
                        #{{ payment.receiptNumber }}</h1>
                </div>
                <div class="flex gap-2">
                    {% if payment.isPaid and not payment.isReversal %}
                        <twig:Admin:Button href="{{ path('admin_payments_reverse', { uuid: payment.uuid.toBase58 } ) }}" data-turbo-frame="modal">{{ 'payments.reverse'|trans({}, 'admin') }}</twig:Admin:Button>
                    {% endif %}
                    {% if payment.receiptNumber %}
                        <twig:Admin:Button href="{{ path('admin_payments_receipt_pdf', { uuid: payment.uuid.toBase58 } ) }}">{{ 'payments.receipt'|trans({}, 'admin') }}</twig:Admin:Button>
                    {% endif %}
                </div>
            </div>

            {% if payment.status == 'created' %}

                <twig:Admin:Alert type="warning" class="mb-6 shadow border border-yellow-700/30 dark:border-yellow-700/50">
                    <span class="block">
                        Diese Rechnung ist unbezahlt. Das ist der Zahlungslink: <a
                                href="{{ path('cms_pay', { token: payment.uuid }) }}" class="font-semibold underline"
                                target="_blank">{{ path('cms_pay', { token: payment.uuid }) }}</a>
                    </span>
                    <span class="block">
                        Dieser Beleg verschwindet automatisch, wenn innerhalb von 30 Tagen keine Zahlung eingeht.
                    </span>
                </twig:Admin:Alert>

            {% endif %}

            <div class="grid grid-cols-1 @lg:grid-cols-3 gap-8">

                <div class="@lg:col-span-2 @lg:border-r @lg:border-gray-200 @lg:dark:border-white/5 @lg:pr-8">

                    <div class="space-y-12 @lg:space-y-20">

                        <aside class="@lg:hidden">
                            <h2 class="sr-only">Details</h2>
                            <div class="space-y-5">
                                <div class="flex items-center space-x-2">
                                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ 'payments.amount'|trans({}, 'admin') }}</span>
                                    <span class="text-sm font-medium text-gray-900 dark:text-white">{{ (payment.totalAmount/100)|format_currency('EUR', locale='de') }}</span>
                                    <twig:Admin:Badge payment="{{ payment.status }}" size="sm" />
                                </div>
                            </div>
                        </aside>

                        {% set isSlideOver = app.request.headers.get('turbo-frame') == 'slideover' %}
                        <div class="{{ isSlideOver ? '' : '-mx-4 px-4 py-8 bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-white/10 sm:mx-0 sm:rounded-lg sm:px-8 sm:pb-14 @lg:px-16 @lg:pb-20 @lg:pt-16' }}">
                            {% include '@FerienpassAdmin/components/invoice.html.twig' with {headline: 'payments.receipt'} %}
                        </div>

                    </div>

                </div>

                <aside class="hidden @lg:block @lg:pl-8">
                    <h2 class="sr-only">Details</h2>
                    <div class="space-y-5">
                        <div>
                            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ 'payments.amount'|trans({}, 'admin') }}</h3>
                            <div class="mt-1 text-base font-semibold leading-6 text-gray-900 dark:text-white flex items-center space-x-2">
                                <span>{{ (payment.totalAmount/100)|format_currency('EUR', locale='de') }}</span>
                                <twig:Admin:Badge payment="{{ payment.status }}" size="sm" />
                            </div>
                        </div>
                        {% if payment.user|default %}
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ 'payments.user'|trans({}, 'admin') }}</h3>
                                <div class="mt-1 font-semibold leading-6 text-gray-900 dark:text-white flex items-center space-x-1">
                                    <span class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-gray-400">
                                        <span class="text-xs font-medium leading-none text-white">{{ payment.user.firstname|first|upper ~ payment.user.lastname|first|upper }}</span>
                                    </span>
                                    <a href="{{ path('admin_accounts_show', { uuid: payment.user.uuid.toBase58 }) }}" class="hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors font-medium text-gray-900 dark:text-gray-100" data-turbo-frame="slideover">
                                        {{ payment.user.firstname ~ ' '~payment.user.lastname }}
                                    </a>
                                </div>
                            </div>
                        {% endif %}
                        {% if payment.pmPaymentTransactionId|default %}
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ 'payments.pmPaymentTransactionId'|trans({}, 'admin') }}</h3>
                                <div class="mt-1 font-normal text-sm leading-5 text-gray-500 dark:text-gray-400">
                                    <span>{{ payment.pmPaymentTransactionId }}</span>
                                </div>
                            </div>
                        {% endif %}
                        {% if payment.pmPaymentTransactionStatus|default %}
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ 'payments.pmPaymentTransactionStatus'|trans({}, 'admin') }}</h3>
                                <div class="mt-1 font-normal text-sm leading-5 text-gray-500 dark:text-gray-400">
                                    <span>{{ payment.pmPaymentTransactionStatus.status }} {{ payment.pmPaymentTransactionStatus.description }} </span>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </aside>
            </div>
        </div>
    </div>
{% endblock %}