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

{% block main %}
    <div class="@container">
        <div class="mb-4 @lg:mb-8 flex items-center justify-between">
            <div class="flex items-center space-x-3">
                {% set user = debtor.user %}
                {% if user %}
                    <span class="inline-flex items-center justify-center h-10 w-10 rounded-full bg-gray-400 shrink-0">
                        <span class="text-lg font-medium leading-none text-white">{{ user.firstname|first|upper ~ user.lastname|first|upper }}</span>
                    </span>
                    <h1 class="text-gray-900 dark:text-gray-50 tracking-tight text-2xl font-bold">{{ user.name }}</h1>
                {% else %}
                    <h1 class="text-gray-900 dark:text-gray-50 tracking-tight text-2xl font-bold">{{ 'payments.debtor_unknown'|trans }}</h1>
                {% endif %}
            </div>
            <div>
                <twig:Admin:Button href="{{ path('admin_payments_create_booking', { uuid: debtor.uuid.toBase58 }) }}" data-turbo-frame="modal">Neue freie Buchung</twig:Admin:Button>
            </div>
        </div>

        <div class="p-4 sm:p-6 @lg:p-0 grid grid-cols-1 @lg:grid-cols-3 gap-8">
            <div class="@lg:col-span-2 space-y-12">

                {# Open Attendances #}
                <section>
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Offene Anmeldungen</h2>
                    {{ component('Admin:SearchableQueryableList', {
                            qb: qb,
                            ms: ms,
                            routeName: app.current_route,
                            routeParameters: app.current_route_parameters|merge(app.request.query.all),
                            searchable: ['offer.name', 'participant.firstname', 'participant.lastname'],
                            config: {
                                scrollable: false,
                                truncate: true,
                                columns: {
                                    'participant': '{{ item.participant.name }}',
                                    'offer': '{{ item.offer.name }}',
                                    'amount': '<span class="text-red-600 font-medium">{{ (item.offer.getFeePayable(item.participant, dispatcher)|default(0)/100)|format_currency("EUR", locale="de") }}</span>'
                                }
                            }
                    }) }}
                </section>

                {# Bookings #}
                <section>
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Buchungen</h2>
                    <div class="flow-root">
                        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                                <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
                                    <thead>
                                    <tr>
                                        <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pl-0">Datum</th>
                                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Buchungssatz</th>
                                        <th scope="col" class="px-3 py-3.5 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">Betrag</th>
                                    </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                                    {% for entry in debtor.bookEntries %}
                                        <tr>
                                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500 dark:text-gray-400 sm:pl-0">
                                                {{ entry.bookingDate|format_datetime(pattern="dd.MM.yyyy") }}
                                            </td>
                                            <td class="px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                                {% if entry.payment is not null %}
                                                    <a class="text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md px-1.5 py-1 -mx-1.5 -my-1 transition-colors font-medium"
                                                       href="{{ path('admin_payments_receipt', { uuid: entry.payment.uuid.toBase58 }) }}">
                                                        #{{ entry.postingRecord }}
                                                    </a>
                                                {% else %}
                                                    {{ entry.postingRecord }}
                                                {% endif %}
                                            </td>
                                            <td class="whitespace-nowrap px-3 py-4 text-sm text-right font-medium">
                                                {% set bookingValue = entry.value/100 %}
                                                <span class="{{ bookingValue > 0 ? 'text-green-600' : (bookingValue < 0 ? 'text-red-600' : 'text-gray-600 dark:text-gray-400') }}">
                                                    {{ bookingValue|format_currency("EUR", locale="de") }}
                                                </span>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th scope="row" colspan="2" class="hidden sm:table-cell pl-4 pr-3 pt-4 text-right text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pl-0">Saldo</th>
                                            <th scope="row" class="sm:hidden pl-4 pr-3 pt-4 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Saldo</th>
                                            <td class="pl-3 pr-4 pt-4 text-right text-sm font-semibold sm:pr-0">
                                                <span class="{{ debtor.balance > 0 ? 'text-green-600' : (debtor.balance < 0 ? 'text-red-600' : 'text-gray-900 dark:text-gray-100') }}">
                                                    {{ (debtor.balance/100)|format_currency("EUR", locale="de") }}
                                                </span>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </section>

                {# Payments #}
                <section>
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Zahlungen</h2>
                    {% set payments = debtor.payments|filter(p => not p.isPaid) %}
                    {% if payments is not empty %}
                        <div class="flow-root">
                            <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                                <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                                    <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
                                        <thead>
                                        <tr>
                                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pl-0">Datum</th>
                                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Beleg</th>
                                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Status</th>
                                            <th scope="col" class="px-3 py-3.5 text-right text-sm font-semibold text-gray-900 dark:text-gray-100">Betrag</th>
                                        </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                                        {% for payment in payments %}
                                            <tr>
                                                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500 dark:text-gray-400 sm:pl-0">
                                                    {{ payment.createdAt|date('d.m.Y H:i') }}
                                                </td>
                                                <td class="whitespace-nowrap px-3 py-4 text-sm font-medium text-gray-900 dark:text-gray-100">
                                                    <a href="{{ path('admin_payments_receipt', { uuid: payment.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.5 py-1 -mx-1.5 -my-1 transition-colors">
                                                        #{{ payment.receiptNumber }}
                                                    </a>
                                                </td>
                                                <td class="whitespace-nowrap px-3 py-4 text-sm">
                                                    {{ component('Admin:Badge', { payment: payment.status }) }}
                                                </td>
                                                <td class="whitespace-nowrap px-3 py-4 text-sm text-right font-medium text-gray-900 dark:text-gray-100">
                                                    {{ (payment.totalAmount|default(0)/100)|format_currency("EUR", locale="de") }}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <p class="text-sm text-gray-500">Keine Zahlungen vorhanden.</p>
                    {% endif %}
                </section>
            </div>

            <aside class="space-y-8 @lg:pl-8 @lg:border-l @lg:border-gray-200 @lg:dark:border-gray-800">
                {# Contact Data #}
                {% if user %}
                    <section>
                        <h2 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Kontaktdaten</h2>
                        <dl class="mt-4 space-y-4">
                            {% if user.email %}
                                <div>
                                    <dt class="sr-only">E-Mail</dt>
                                    <dd class="flex items-center text-sm text-gray-900 dark:text-gray-100">
                                        <twig:ux:icon name="ph:envelope" class="h-5 w-5 text-gray-400 mr-2" />
                                        <a href="mailto:{{ user.email }}" class="hover:underline">{{ user.email }}</a>
                                    </dd>
                                </div>
                            {% endif %}
                            {% if user.phone %}
                                <div>
                                    <dt class="sr-only">Telefon</dt>
                                    <dd class="flex items-center text-sm text-gray-900 dark:text-gray-100">
                                        <twig:ux:icon name="ph:phone" class="h-5 w-5 text-gray-400 mr-2" />
                                        <a href="tel:{{ user.phone }}" class="hover:underline">{{ user.phone }}</a>
                                    </dd>
                                </div>
                            {% endif %}
                            {% if user.mobile %}
                                <div>
                                    <dt class="sr-only">Handy</dt>
                                    <dd class="flex items-center text-sm text-gray-900 dark:text-gray-100">
                                        <twig:ux:icon name="ph:device-mobile" class="h-5 w-5 text-gray-400 mr-2" />
                                        <a href="tel:{{ user.mobile }}" class="hover:underline">{{ user.mobile }}</a>
                                    </dd>
                                </div>
                            {% endif %}
                        </dl>
                    </section>
                {% endif %}

                {# Links #}
                <section>
                    <h2 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Links</h2>
                    <ul class="mt-4 space-y-4">
                        {% if user %}
                            <li>
                                <a href="{{ path('admin_accounts_show', { uuid: user.uuid.toBase58 }) }}" class="text-sm font-semibold text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 flex items-center">
                                    Benutzerkonto anzeigen
                                    <span class="ml-1">&rarr;</span>
                                </a>
                            </li>
                        {% endif %}
                        <li>
                            <h3 class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Teilnehmer:</h3>
                            <ul class="space-y-2">
                                {% for participant in user.participants|default([]) %}
                                    <li>
                                        <a href="{{ path('admin_participants_show', { uuid: participant.uuid.toBase58 }) }}" class="text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1.5 py-1 -mx-1.5 -my-1 transition-colors">
                                            {{ participant.name }}
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                    </ul>
                </section>
            </aside>
        </div>
    </div>
{% endblock %}
