 

<div {{ attributes }}>
    {% if success %}
        <twig:Turbo:Stream:Update target="#modal"/>
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Stornobeleg {{ success.receiptNumber }} erstellt" dismissAfter="0" primaryActionTitle="Öffnen" primaryActionLink="{{ path('admin_payments_receipt', { uuid: success.uuid.toBase58 }) }}">
                Der Stornobeleg i.H.v. {{ (success.totalAmount/100)|abs|format_currency("EUR", locale="de") }} wurde erstellt.
            </twig:Admin:Notification>
        </twig:Turbo:Stream:Prepend>
    {% endif %}

    {% if error %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="error" title="Fehler" message="{{ error }}" />
        </twig:Turbo:Stream:Prepend>
    {% endif %}

    <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100">Zahlung stornieren</h3>
    <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
        <p>Sie können eine Zahlung umkehren und einen Stornobeleg erstellen.</p>
    </div>

    <div class="mt-5">
        <form data-action="live#action" data-live-action-param="save">

        <h4 class="font-medium text-sm text-gray-900 dark:text-gray-100">Wählen Sie aus, welche Belegpositionen sie stornieren möchten:</h4>

        <div class="divide-y divide-gray-200 dark:divide-gray-800">
            {% for paymentItem in payment.items|filter(i => i.type == 'attendance') %}
                <div class="py-2 flex justify-between items-center">
                    <div class="shrink-0">
                        <input type="checkbox" id="item_{{ paymentItem.id }}"
                               class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:checked:bg-primary-600 dark:checked:border-primary-600 rounded"
                               value="{{ paymentItem.id }}"
                               {% if paymentItem.id in items %}checked{% endif %}
                               data-model="items[]">
                    </div>
                    <div class="ml-3 flex-1 relative">
                        <p class="font-medium text-sm/4 text-gray-900 dark:text-gray-100">{{ paymentItem.attendance.participant.name }}
                        <twig:Admin:Badge attendance="{{ paymentItem.attendance.status }}" size="xs" />
                        </p>
                        <p class="font-medium text-sm/4 text-gray-900 dark:text-gray-100">{{ paymentItem.attendance.offer.name }}</p>
                        <p class="text-xs/4 text-gray-500 dark:text-gray-400">
                            {% if paymentItem.attendance.offer.dates is not empty %}
                                <twig:Cms:OfferDate :dates="paymentItem.attendance.offer.dates" short />
                            {% else %}
                                Dauerangebot
                            {% endif %}
                        </p>
                        <label class="-indent-[99999px] absolute left-0 top-0 w-full h-full" for="item_{{ paymentItem.id }}">auswählen</label>
                    </div>
                    <div class="shrink-0 text-right">
                        <p class="font-medium text-gray-900 dark:text-gray-100">
                            {{ (paymentItem.amount/100)|format_currency("EUR", locale="de") }}
                        </p>

                        {% if paymentItem.attendance.paid %}
                            <twig:Admin:Badge payment="paid" size="xs" />
                        {% else %}
                            <twig:Admin:Badge color="red" size="xs">payments.status.reversed</twig:Admin:Badge>
                        {% endif %}

                    </div>
                </div>
            {% endfor %}
        </div>

        <div class="mt-6 space-y-5">
            <div class="flex gap-3">
                <div class="flex h-6 shrink-0 items-center">
                    <div class="group grid size-4 grid-cols-1">
                        <input id="unpay" type="checkbox" data-model="unpay" {% if unpay %}checked{% endif %}
                               class="col-start-1 row-start-1 appearance-none size-full rounded-sm border border-gray-300 bg-white checked:border-primary-600 checked:bg-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:border-white/10 dark:bg-white/5 dark:checked:border-primary-500 dark:checked:bg-primary-500 forced-colors:appearance-auto">
                        <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white opacity-0 group-has-checked:opacity-100">
                            <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                </div>
                <div class="text-sm/6">
                    <label for="unpay" class="font-medium text-gray-900 dark:text-white">Anmeldungen als »unbezahlt« markieren</label>
                    <p id="unpay-description" class="text-gray-500 dark:text-gray-400">Sollte der Teilnahmestatus auf "nimmt teil" sein, ist eine erneute Zahlung erforderlich</p>
                </div>
            </div>
            <div class="flex gap-3">
                <div class="flex h-6 shrink-0 items-center">
                    <div class="group grid size-4 grid-cols-1">
                        <input id="withdraw" type="checkbox" data-model="withdraw" {% if withdraw %}checked{% endif %}
                               class="col-start-1 row-start-1 appearance-none size-full rounded-sm border border-gray-300 bg-white checked:border-primary-600 checked:bg-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:border-white/10 dark:bg-white/5 dark:checked:border-primary-500 dark:checked:bg-primary-500 forced-colors:appearance-auto">
                        <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white opacity-0 group-has-checked:opacity-100">
                            <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                </div>
                <div class="text-sm/6">
                    <label for="withdraw" class="font-medium text-gray-900 dark:text-white">Anmeldungen auf »abgemeldet« setzen</label>
                    <p id="withdraw-description" class="text-gray-500 dark:text-gray-400">Die Person zusammen mit der Zahlungsstornierung vom Angebot abmelden</p>
                </div>
            </div>
            <div class="flex gap-3">
                <div class="flex h-6 shrink-0 items-center">
                    <div class="group grid size-4 grid-cols-1">
                        <input id="partialReverse" type="checkbox" data-model="partialReverse" {% if partialReverse %}checked{% endif %}
                               class="col-start-1 row-start-1 appearance-none size-full rounded-sm border border-gray-300 bg-white checked:border-primary-600 checked:bg-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:border-white/10 dark:bg-white/5 dark:checked:border-primary-500 dark:checked:bg-primary-500 forced-colors:appearance-auto">
                        <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white opacity-0 group-has-checked:opacity-100">
                            <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                </div>
                <div class="text-sm/6">
                    <label for="partialReverse" class="font-medium text-gray-900 dark:text-white">Teilbetrag stornieren</label>
                    {% if partialReverse %}
                        <div class="mt-2">
                            <div class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[:focus-within]:outline-2 has-[:focus-within]:-outline-offset-2 has-[:focus-within]:outline-primary-600 dark:bg-white/5 dark:outline-gray-600 dark:has-[:focus-within]:outline-primary-500">
                                <div class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6 dark:text-gray-400">
                                    {{ partialReverseType == 'percent' ? '' : '€' }}
                                </div>
                                <input id="partialReverseValue" type="text" data-model="partialReverseValue" placeholder="0.00" class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base border-none shadow-none focus:ring-0 text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 bg-transparent dark:text-white dark:placeholder:text-gray-500" />
                                <div class="grid shrink-0 grid-cols-1 focus-within:relative">
                                    <select id="partialReverseType" data-model="partialReverseType" aria-label="Type" class="focus:ring-0 col-start-1 row-start-1 w-full appearance-none py-1.5 pr-7 pl-3 text-base text-gray-500 placeholder:text-gray-400 focus:outline-none border-none shadow-none sm:text-sm/6 bg-transparent dark:text-gray-400 dark:*:bg-gray-800 dark:placeholder:text-gray-500">
                                        <option value="percent">%</option>
                                        <option value="EUR">EUR</option>
                                    </select>
                                </div>
                            </div>
                            {% if _errors.has('partialReverseValue') %}
                                <p class="mt-2 text-sm text-red-600">{{ _errors.get('partialReverseValue') }}</p>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        {% if payment.debtor %}
            <fieldset class="mt-6 -space-y-px rounded-md bg-white dark:bg-gray-800">
                {% for choice in ['payout', 'balance'] %}
                    <label class="group flex cursor-pointer border border-gray-200 dark:border-gray-700 p-4 first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md focus:outline-none has-[:checked]:relative has-[:checked]:border-primary-200 dark:has-[:checked]:border-primary-800 has-[:checked]:bg-primary-50 dark:has-[:checked]:bg-primary-900/20">
                        <input name="payout" value="{{ choice }}"
                               type="radio" {% if choice == payout %}checked{% endif %}
                               data-model="payout"
                               class="relative mt-0.5 size-4 shrink-0 appearance-none rounded-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 before:absolute before:inset-1 before:rounded-full before:bg-white dark:before:bg-gray-900 checked:border-primary-600 dark:checked:border-primary-500 checked:bg-primary-600 dark:checked:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
                        <span class="ml-3 flex flex-col">
                            <span class="block text-sm font-medium text-gray-900 dark:text-gray-100 group-has-[:checked]:text-primary-900 dark:group-has-[:checked]:text-primary-400">
                                {{ choice == 'payout' ? 'Betrag auszahlen' : 'Auf Guthabenkonto übertragen' }}
                            </span>
                            <span class="block text-sm text-gray-500 dark:text-gray-400 group-has-[:checked]:text-primary-700 dark:group-has-[:checked]:text-primary-300">
                                {% if choice == 'payout' %}
                                    Der Betrag wird so gebucht, dass das Geld von der Kasse abgeht.
                                {% else %}
                                    Der Betrag wird auf das Guthabenkonto »{{ payment.debtor.user.name|default('') }}« übertragen, das bei der nächsten Zahlung angerechnet wird.
                                {% endif %}
                            </span>
                        </span>
                    </label>
                {% endfor %}
            </fieldset>
        {% endif %}

        {% if totalAmount > 0 %}
            <div class="mt-6 p-4 rounded-md bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-800">
                <p class="text-sm font-medium text-primary-900 dark:text-primary-400">
                    Der Betrag
                    {% if totalAmount < this.originalTotalAmount %}
                        <span class="line-through text-gray-400 mr-1">{{ (this.originalTotalAmount/100)|format_currency("EUR", locale="de") }}</span>
                    {% endif %}
                    {{ (totalAmount/100)|format_currency("EUR", locale="de") }} wird
                    {{ payoutMode == 'balance' ? 'aufs Guthabenkonto übertragen' : 'ausgezahlt' }}.
                </p>
            </div>
        {% endif %}

        <div class="mt-8 flex justify-end gap-x-3">
            <twig:Admin:Button command="close" commandfor="admin-modal-dialog">Abbrechen</twig:Admin:Button>
            <twig:Admin:Button variant="primary" type="submit">Stornieren</twig:Admin:Button>
        </div>

        </form>
    </div>
</div>
