<div {{ attributes }}>
    <form class="relative flex h-full flex-col overflow-y-auto bg-white dark:bg-gray-900" data-action="live#action:prevent" data-live-action-param="submit">
        <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">Anmeldungen abrechnen</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        Erstellen Sie einen Beleg für die ausgewählten Anmeldungen.
                    </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">
                <div class="px-4 py-5 sm:px-6">
                    <div class="flex justify-between items-center">
                    <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100">Posten</h3>
                        <div>
                            {% if debtorId %}
                                <twig:Admin:Button href="{{ path('admin_payments_create_booking', { uuid: debtorId }) }}" size="sm" data-turbo-frame="modal">
                                    Guthaben buchen
                                </twig:Admin:Button>
                            {% endif %}
                        </div>
                    </div>
                    <div class="mt-4 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">Angebot</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 index, item in items %}
                                            <tr class="{{ item.type == 'discount' and not useBalance ? 'opacity-50 grayscale' : '' }}">
                                                <td class="py-2 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-0 max-w-0 w-full">
                                                    <div class="truncate font-medium text-gray-900 dark:text-gray-100">
                                                       {{ item.offer ?? item.label }}
                                                    </div>
                                                    {% if item.participant %}
                                                        <div class="truncate text-gray-500 dark:text-gray-400 font-normal">{{ item.participant }}</div>
                                                    {% endif %}
                                                </td>
                                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm">
                                                    {% if item.type == 'discount' %}
                                                        <div class="flex items-center justify-end gap-x-2">
                                                            {% if useBalance %}
                                                                <button type="button"
                                                                        data-action="live#action"
                                                                        data-live-action-param="toggleUseBalance"
                                                                        class="cursor-pointer text-gray-400 hover:text-gray-500">
                                                                    <twig:ux:icon name="ph:x" class="size-5" />
                                                                </button>
                                                            {% else %}
                                                                <button type="button"
                                                                        data-action="live#action"
                                                                        data-live-action-param="toggleUseBalance"
                                                                        class="cursor-pointer text-gray-400 hover:text-gray-500">
                                                                    <twig:ux:icon name="ph:plus" class="size-5" />
                                                                </button>
                                                            {% endif %}
                                                            <span class="text-gray-900 dark:text-gray-100 font-medium">{{ item.amount|format_currency('EUR', locale='de') }}</span>
                                                        </div>
                                                    {% else %}
                                                        <div class="flex items-center justify-end gap-x-2">
                                                            <button type="button"
                                                                    data-action="live#action"
                                                                    data-live-action-param="removeItem"
                                                                    data-live-index-param="{{ index }}"
                                                                    class="cursor-pointer text-gray-400 hover:text-gray-500">
                                                                <twig:ux:icon name="ph:x" class="size-5" />
                                                            </button>
                                                            <div class="flex items-center rounded-md bg-white px-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 dark:bg-white/5 dark:outline-white/10 dark:focus-within:outline-primary-500 w-32">
                                                                <div class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6 dark:text-gray-400">€</div>
                                                                <input type="number" step="0.01" data-model="items[{{ index }}].amount" class="block min-w-0 grow border-0 bg-transparent py-1.5 pr-0 pl-1 text-base text-gray-900 text-right placeholder:text-gray-400 focus:ring-0 sm:text-sm/6 dark:text-white dark:placeholder:text-gray-500" />
                                                            </div>
                                                        </div>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th scope="row" class="pl-4 pr-3 pt-4 text-right text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pl-0">Summe</th>
                                            <td class="pl-3 pr-4 pt-4 text-right text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pr-0">
                                                {{ this.totalAmount|format_currency('EUR', locale='de') }}
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <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>
                        <label for="address" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100 sm:mt-1.5">Rechnungsadresse</label>
                    </div>
                    <div class="sm:col-span-2">
                        <textarea id="address" data-model="address" rows="3" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 border-0 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-primary-500"></textarea>
                    </div>
                </div>

                <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>
                        <label for="email" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100 sm:mt-1.5">E-Mail-Adresse</label>
                    </div>
                    <div class="sm:col-span-2">
                        <input type="email" id="email" data-model="email" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 border-0 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-primary-500">
                        {% if _errors.has('email') %}
                            <p class="mt-2 text-sm text-red-600">{{ _errors.get('email')|trans({}, 'admin') }}</p>
                        {% endif %}
                    </div>
                </div>

                <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 class="hidden @md:block">
                        <span class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100 sm:mt-1.5">Optionen</span>
                    </div>
                    <div class="sm:col-span-2 space-y-4">
                        <div class="relative flex items-start">
                            <div class="flex h-6 items-center">
                                <input id="paid" data-model="paid" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
                            </div>
                            <div class="ml-3 text-sm leading-6">
                                <label for="paid" class="font-medium text-gray-900 dark:text-gray-100">Barzahlung</label>
                                <p class="text-gray-500 dark:text-gray-400">Markiert den Beleg sofort als bezahlt.</p>
                            </div>
                        </div>

                        <div class="relative flex items-start">
                            <div class="flex h-6 items-center">
                                <input id="notify" data-model="notify" type="checkbox" {% if not paid or not email %}disabled{% endif %} class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600 disabled:opacity-50 disabled:cursor-not-allowed">
                            </div>
                            <div class="ml-3 text-sm leading-6">
                                <label for="notify" class="font-medium text-gray-900 dark:text-gray-100 {% if not paid or not email %}opacity-50{% endif %}">Empfänger benachrichtigen</label>
                                <p class="text-gray-500 dark:text-gray-400">Sendet den Beleg per E-Mail an den Empfänger.</p>
                                {% if _errors.has('notify') %}
                                    <p class="mt-2 text-sm text-red-600">{{ _errors.get('notify')|trans({}, 'admin') }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </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">Abbrechen</twig:Admin:Button>
                <twig:Admin:Button variant="primary" data-action="live#action" data-live-action-param="submit">Beleg erstellen</twig:Admin:Button>
            </div>
        </div>
    </form>

    {% if newPayment %}
        <twig:Turbo:Stream:Update target="#slideover"/>
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Beleg {{ newPayment.receiptNumber ?? "" }} erstellt"
                                     dismissAfter="0" primaryActionTitle="Öffnen"
                                     primaryActionLink="{{ path('admin_payments_receipt', { uuid: newPayment.uuid.toBase58 }) }}">
                Der Beleg i.H.v. {{ (newPayment.totalAmount/100)|format_currency("EUR", locale="de") }} wurde erstellt.
                Der Beleg ist
                <twig:Admin:Badge payment="{{ newPayment.status }}" class="ml-2" />
            </twig:Admin:Notification>
        </twig:Turbo:Stream:Prepend>
    {% endif %}
</div>
