 

<div {{ attributes }}>
    {% set payments = this.payments %}

    <div class="relative flex h-full flex-col overflow-y-auto">

        <div class="flex-1">
            <!-- Header -->
            <div class="bg-gray-50 dark:bg-gray-800/50 px-4 py-6 sm:px-6">
                <div class="space-y-1">
                    <h2 id="drawer-title" class="text-base font-semibold text-gray-900 dark:text-white">Zahlung verwalten</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        Zahlungsstatus und Belege für die Anmeldung von {{ attendance.participant.name }} bei {{ attendance.offer.name }}.
                    </p>
                </div>
            </div>

            <!-- Divider container -->
            <div class="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-800 sm:py-0">

                <!-- Offer Details -->
                <div class="space-y-2 px-4 @md:grid @md:grid-cols-3 @md:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                    <div>
                        <span class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">Anmeldung</span>
                    </div>
                    <div class="sm:col-span-2">
                        <div class="text-sm">
                            <h4 class="truncate text-gray-900 dark:text-white font-medium leading-5">{{ attendance.offer.name }} ({{ "##{attendance.offer.id}" }})</h4>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400 leading-3">
                                {% if attendance.offer.dates is not empty %}
                                    <twig:Cms:OfferDate :dates="attendance.offer.dates" short />
                                {% else %}
                                    Dauerangebot
                                {% endif %}
                            </p>
                            <div class="mt-3">
                                <twig:Admin:Badge attendance="{{ attendance.status }}" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Payment Status -->
                <div class="space-y-2 px-4 @md:grid @md:grid-cols-3 @md:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                    <div>
                        <span class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">Zahlungsstatus</span>
                    </div>
                    <div class="sm:col-span-2">
                        <div class="flex items-center gap-x-3">
                            {% if attendance.paid %}
                                <twig:Admin:Badge color="green" content="bezahlt" size="sm" />
                            {% elseif attendance.stash %}
                                <twig:Admin:Badge color="gray" content="unbestätigt" size="sm" />
                            {% elseif attendance.payable %}
                                <twig:Admin:Badge color="red" content="unbezahlt" size="sm" />
                            {% else %}
                                <twig:Admin:Badge color="gray" content="keine Zahllast" size="sm" />
                            {% endif %}

                            {% if attendance.payable %}
                                <span class="text-sm font-medium text-gray-900 dark:text-white">
                                    {{ (attendance.offer.getFeePayable(attendance.participant, this.dispatcher)/100)|format_currency("EUR", locale="de") }}
                                </span>
                            {% endif %}
                        </div>

                        {% if attendance.payable and not attendance.paid %}
                            <div class="mt-4 flex flex-wrap gap-2">
                                <twig:Admin:Button href="{{ path('admin_attendances_settle', { ids: [attendance.id] }) }}" size="sm" data-turbo-frame="slideover">Jetzt abrechnen</twig:Admin:Button>
                                <twig:Admin:Button href="{{ path('admin_attendance_pay_status', { uuid: attendance.uuid.toBase58 }) }}" size="sm" data-turbo-frame="modal">Zahllast entfernen</twig:Admin:Button>
                            </div>
                        {% elseif attendance.paid and payments is not empty %}
                            {% set latest_payment = payments|last %}
                            {% set item_id = null %}
                            {% for item in attendance.paymentItems %}
                                {% if item.payment.id == latest_payment.id %}
                                    {% set item_id = item.id %}
                                {% endif %}
                            {% endfor %}
                            <div class="mt-4">
                                <twig:Admin:Button href="{{ path('admin_payments_reverse', { uuid: latest_payment.uuid.toBase58, items: [item_id] }) }}" size="sm" data-turbo-frame="modal">{{ 'payments.reverse'|trans({}, 'admin') }}</twig:Admin:Button>
                            </div>
                        {% elseif not attendance.payable %}
                            {% if not attendance.stash %}
                                <div class="mt-4">
                                    <twig:Admin:Button href="{{ path('admin_attendance_pay_status', { uuid: attendance.uuid.toBase58 }) }}" size="sm" data-turbo-frame="modal">Zahllast ergänzen</twig:Admin:Button>
                                </div>
                            {% else %}
                                <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                                    Diese Anmeldung ist noch nicht festgeschrieben.
                                    <a class="underline" data-turbo-frame="_top" href="{{ path('admin_commit_attendances') }}">Anmeldungen festschreiben.</a>
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>

                <!-- Receipts -->
                <div class="space-y-2 px-4 sm:space-y-0 sm:px-6 sm:py-5">
                    <div>
                        <span class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">Zugehörige Belege</span>
                    </div>
                    <div class="">
                        {% if payments is not empty %}
                            <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-800">
                                {% for payment in payments %}
                                    <li class="py-3 flex items-center justify-between">
                                            <a class="group flex flex-col" href="{{ path('admin_payments_receipt', { uuid: payment.uuid.toBase58 }) }}">
                                            <span class="group-hover:bg-gray-100 dark:group-hover:bg-gray-900/50 group-hover:text-gray-900 dark:group-hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors text-sm font-medium text-gray-900 dark:text-white">{{ 'payments.receipt'|trans({}, 'admin') }} #{{ payment.receiptNumber }}</span>
                                            <span class="text-xs text-gray-500">{{ payment.createdAt|date("d.m.Y H:i") }}</span>
                                            </a>
                                        <div class="flex items-center gap-x-2">
                                            <twig:Admin:Badge payment="{{ payment.status }}" />
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% else %}
                            <p class="text-sm text-gray-500 italic">Keine Belege vorhanden.</p>
                        {% endif %}
                    </div>
                </div>

            </div>
        </div>

        <!-- Action buttons -->
        <div class="shrink-0 border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
            <div class="flex justify-end gap-x-3">
                <twig:Admin:Button command="close" commandfor="admin-slideover-dialog">Schließen</twig:Admin:Button>
            </div>
        </div>

    </div>

</div>
