<?php

use App\Enums\AssociationStatus;
use App\Livewire\Forms\ApplicationForm;
use App\Models\EinundzwanzigPleb;
use App\Support\NostrAuth;
use Livewire\Component;
use swentel\nostr\Event\Event as NostrEvent;
use swentel\nostr\Filter\Filter;
use swentel\nostr\Message\EventMessage;
use swentel\nostr\Message\RequestMessage;
use swentel\nostr\Relay\Relay;
use swentel\nostr\Relay\RelaySet;
use swentel\nostr\Request\Request;
use swentel\nostr\Sign\Sign;
use swentel\nostr\Subscription\Subscription;
use WireUi\Actions\Notification;

new class extends Component {
    public ApplicationForm $form;

    public bool $no = false;

    public bool $showEmail = true;

    public string $fax = '';

    public ?string $email = '';

    public array $yearsPaid = [];

    public array $events = [];

    public $payments;

    public int $amountToPay;

    public bool $currentYearIsPaid = false;

    public ?string $currentPubkey = null;

    public ?EinundzwanzigPleb $currentPleb = null;

    public ?string $qrCode = null;

    protected $listeners = [
        'nostrLoggedIn' => 'handleNostrLoggedIn',
        'nostrLoggedOut' => 'handleNostrLoggedOut',
    ];

    public function mount(): void
    {
        if (NostrAuth::check()) {
            $this->currentPubkey = NostrAuth::pubkey();
            $this->currentPleb = EinundzwanzigPleb::query()
                ->with([
                    'paymentEvents' => fn ($query) => $query->where('year', date('Y')),
                ])
                ->where('pubkey', $this->currentPubkey)->first();
            if ($this->currentPleb) {
                $this->email = $this->currentPleb->email;
                $this->showEmail = ! $this->no;
                if ($this->currentPleb->association_status === AssociationStatus::ACTIVE) {
                    $this->amountToPay = config('app.env') === 'production' ? 21000 : 1;
                }
                if ($this->currentPleb->paymentEvents->count() < 1) {
                    $this->createPaymentEvent();
                    $this->currentPleb->load('paymentEvents');
                }
                $this->loadEvents();
                $this->listenForPayment();
            }
        }
    }

    public function handleNostrLoggedIn($pubkey): void
    {
        NostrAuth::login($pubkey);

        $this->currentPubkey = $pubkey;
        $this->currentPleb = EinundzwanzigPleb::query()
            ->with([
                'paymentEvents' => fn ($query) => $query->where('year', date('Y')),
            ])
            ->where('pubkey', $pubkey)->first();
        $this->email = $this->currentPleb->email;
        $this->no = $this->currentPleb->no_email;
        $this->showEmail = ! $this->no;
        if ($this->currentPleb->association_status === AssociationStatus::ACTIVE) {
            $this->amountToPay = config('app.env') === 'production' ? 21000 : 1;
        }
        if ($this->currentPleb->paymentEvents->count() < 1) {
            $this->createPaymentEvent();
            $this->currentPleb->load('paymentEvents');
        }
        $this->loadEvents();
        $this->listenForPayment();
    }

    public function handleNostrLoggedOut(): void
    {
        NostrAuth::logout();

        $this->currentPubkey = null;
        $this->currentPleb = null;
        $this->yearsPaid = [];
        $this->events = [];
        $this->payments = [];
        $this->qrCode = null;
        $this->amountToPay = config('app.env') === 'production' ? 21000 : 1;
        $this->currentYearIsPaid = false;
    }

    public function updatedNo(): void
    {
        $this->showEmail = ! $this->no;
        $this->currentPleb->update([
            'no_email' => $this->no,
        ]);
    }

    public function updatedFax(): void
    {
        $this->js('alert("Markus Turm wird sich per Fax melden!")');
    }

    public function saveEmail(): void
    {
        $this->validate([
            'email' => 'required|email',
        ]);
        $this->currentPleb->update([
            'email' => $this->email,
        ]);
        $notification = new Notification($this);
        $notification->success('E-Mail Adresse gespeichert.');
    }

    public function pay($comment): \Illuminate\Http\RedirectResponse
    {
        $paymentEvent = $this->currentPleb
            ->paymentEvents()
            ->where('year', date('Y'))
            ->first();
        if ($paymentEvent->btc_pay_invoice) {
            return redirect('https://pay.einundzwanzig.space/i/'.$paymentEvent->btc_pay_invoice);
        }
        try {
            $response = \Illuminate\Support\Facades\Http::withHeaders([
                'Authorization' => 'token '.config('services.btc_pay.api_key'),
            ])->post(
                'https://pay.einundzwanzig.space/api/v1/stores/98PF86BoMd3C8P1nHHyFdoeznCwtcm5yehcAgoCYDQ2a/invoices',
                [
                    'amount' => $this->amountToPay,
                    'metadata' => [
                        'orderId' => $comment,
                        'orderUrl' => url()->route('association.profile'),
                        'itemDesc' => 'Mitgliedsbeitrag '.date('Y').' von nostr:'.$this->currentPleb->npub,
                        'posData' => [
                            'event' => $paymentEvent->event_id,
                            'pubkey' => $this->currentPleb->pubkey,
                            'npub' => $this->currentPleb->npub,
                        ],
                    ],
                    'checkout' => [
                        'expirationMinutes' => 60 * 24,
                        'redirectURL' => url()->route('association.profile'),
                        'redirectAutomatically' => true,
                        'defaultLanguage' => 'de',
                    ],
                ],
            )->throw();
            $paymentEvent->btc_pay_invoice = $response->json()['id'];
            $paymentEvent->save();

            return redirect($response->json()['checkoutLink']);
        } catch (\Exception $e) {
            $notification = new Notification($this);
            $notification->error(
                'Fehler beim Erstellen der Rechnung. Bitte versuche es später erneut: '.$e->getMessage(),
            );

            return redirect()->route('association.profile');
        }
    }

    public function listenForPayment(): void
    {
        $paymentEvent = $this->currentPleb
            ->paymentEvents()
            ->where('year', date('Y'))
            ->first();
        if ($paymentEvent->btc_pay_invoice) {
            $response = \Illuminate\Support\Facades\Http::withHeaders([
                'Authorization' => 'token '.config('services.btc_pay.api_key'),
            ])
                ->get(
                    'https://pay.einundzwanzig.space/api/v1/stores/98PF86BoMd3C8P1nHHyFdoeznCwtcm5yehcAgoCYDQ2a/invoices/'.$paymentEvent->btc_pay_invoice,
                );
            if ($response->json()['status'] === 'Expired') {
                $paymentEvent->btc_pay_invoice = null;
                $paymentEvent->paid = false;
                $paymentEvent->save();
            }
            if ($response->json()['status'] === 'Settled') {
                $paymentEvent->paid = true;
                $paymentEvent->save();
                $this->currentYearIsPaid = true;
            }
        }
        if ($paymentEvent->paid) {
            $this->currentYearIsPaid = true;
        }
        $paymentEvent = $paymentEvent->refresh();
        $this->payments = $this->currentPleb
            ->paymentEvents()
            ->where('paid', true)
            ->get();
    }

    public function save($type): void
    {
        $this->form->validate();
        if (! $this->form->check) {
            $this->js('alert("Du musst den Statuten zustimmen.")');

            return;
        }

        $this->currentPleb
            ->update([
                'association_status' => $type,
            ]);
    }

    public function createPaymentEvent(): void
    {
        $note = new NostrEvent;
        $note->setKind(32121);
        $note->setContent(
            'Dieses Event dient der Zahlung des Mitgliedsbeitrags für das Jahr '.date(
                'Y',
            ).'. Bitte bezahle den Betrag von '.number_format($this->amountToPay, 0, ',', '.').' Satoshis.',
        );
        $note->setTags([
            ['d', $this->currentPleb->pubkey.','.date('Y')],
            ['zap', 'daf83d92768b5d0005373f83e30d4203c0b747c170449e02fea611a0da125ee6', config('services.relay'), '1'],
        ]);
        $signer = new Sign;
        $signer->signEvent($note, config('services.nostr'));

        $eventMessage = new EventMessage($note);

        $relayUrl = config('services.relay');
        $relay = new Relay($relayUrl);
        $relay->setMessage($eventMessage);
        $result = $relay->send();

        $this->currentPleb->paymentEvents()->create([
            'year' => date('Y'),
            'event_id' => $result->eventId,
            'amount' => $this->amountToPay,
        ]);
    }

    public function loadEvents(): void
    {
        $subscription = new Subscription;
        $subscriptionId = $subscription->setId();

        $filter1 = new Filter;
        $filter1->setKinds([32121]);
        $filter1->setAuthors(['daf83d92768b5d0005373f83e30d4203c0b747c170449e02fea611a0da125ee6']);
        $filters = [$filter1];

        $requestMessage = new RequestMessage($subscriptionId, $filters);

        $relays = [
            new Relay(config('services.relay')),
        ];
        $relaySet = new RelaySet;
        $relaySet->setRelays($relays);

        $request = new Request($relaySet, $requestMessage);
        $response = $request->send();

        $this->events = collect($response[config('services.relay')])
            ->map(function ($event) {
                if (! isset($event->event)) {
                    return false;
                }

                return [
                    'id' => $event->event->id,
                    'kind' => $event->event->kind,
                    'content' => $event->event->content,
                    'pubkey' => $event->event->pubkey,
                    'tags' => $event->event->tags,
                    'created_at' => $event->event->created_at,
                ];
            })
            ->filter()
            ->unique('id')
            ->toArray();
    }
}
?>

<div>
    <div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">

        <!-- Page header -->
        <div class="mb-8">

            <!-- Title -->
            <h1 class="text-2xl md:text-3xl text-[#1B1B1B] dark:text-gray-100 font-bold">
                Einundzwanzig ist, was du draus machst
            </h1>

        </div>

        <flux:card mb-8>
            <div class="flex flex-col md:flex-row md:-mr-px">

                <!-- Sidebar -->
                <div
                    class="flex flex-nowrap overflow-x-scroll no-scrollbar md:block md:overflow-auto px-3 py-6 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-700/60 min-w-60 md:space-y-3">
                    <!-- Group 1 -->
                    <div>
                        <div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase mb-3">
                            Meine Mitgliedschaft
                        </div>
                        <ul class="flex flex-nowrap md:block mr-3 md:mr-0">
                            <li class="mr-0.5 md:mr-0 md:mb-0.5">
                                <a class="flex items-center px-2.5 py-2 rounded-lg whitespace-nowrap bg-[linear-gradient(135deg,var(--tw-gradient-stops))] from-orange-500/12 dark:from-orange-500/24 to-orange-500/4"
                                   href="#0">
                                    <i class="fa-sharp-duotone fa-solid fa-id-card-clip shrink-0 fill-current text-orange-400 mr-2"></i>
                                    <span
                                        class="text-sm font-medium text-orange-500 dark:text-orange-400">Status</span>
                                </a>
                            </li>
                        </ul>
                                    </flux:card>

                <!-- Panel -->
                <div class="grow">

                    <!-- Panel body -->
                    <div class="p-6 space-y-6">
                        <h2 class="sm:text-2xl text-[#1B1B1B] dark:text-gray-100 font-bold mb-5">Aktueller Status</h2>

                        <section>

                            @if(!$currentPleb)
                                <div class="space-y-2 mb-12">
                                    <div class="flex justify-between items-center mb-4">
                                        <div class="text-xl text-gray-500 dark:text-gray-400 italic">Empfohlene Nostr
                                            Login und Signer-Apps
                                        </div>
                                    </div>
                                    <flux:card>
                                        <div
                                            class="md:flex justify-between items-center space-y-4 md:space-y-0 space-x-2">
                                            <!-- Left side -->
                                            <div class="flex items-start space-x-3 md:space-x-4">
                                                <div>
                                                    <a class="inline-flex font-semibold text-gray-800 dark:text-gray-100"
                                                       href="https://github.com/greenart7c3/Amber">
                                                        Amber
                                                    </a>
                                                    <div class="text-sm">Perfekt für mobile Android Geräte. Eine App, in
                                                        der man alle Keys/nsecs verwalten kann.
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Right side -->
                                            <div class="flex items-center space-x-4 pl-10 md:pl-0">
                                                <div
                                                    class="text-xs inline-flex font-medium bg-green-500/20 text-green-700 rounded-full text-center px-2.5 py-1">
                                                    Android
                                                </div>
                                            </div>
                                        </div>
                                    </flux:card>
                                    <flux:card>
                                        <div
                                            class="md:flex justify-between items-center space-y-4 md:space-y-0 space-x-2">
                                            <!-- Left side -->
                                            <div class="flex items-start space-x-3 md:space-x-4">
                                                <div>
                                                    <a class="inline-flex font-semibold text-gray-800 dark:text-gray-100"
                                                       href="https://addons.mozilla.org/en-US/firefox/addon/alby/">
                                                        Alby - Bitcoin Lightning Wallet & Nostr
                                                    </a>
                                                    <div class="text-sm">
                                                        Browser-Erweiterung in die man seinen Key/nsec eingeben kann.
                                                        Pro Alby-Konto ein nsec.
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Right side -->
                                            <div class="flex items-center space-x-4 pl-10 md:pl-0">
                                                <div
                                                    class="text-xs inline-flex font-medium bg-yellow-500/20 text-yellow-700 rounded-full text-center px-2.5 py-1">
                                                    Browser Chrome/Firefox
                                                </div>
                                            </div>
                                        </div>
                                    </flux:card>
                                    <flux:card>
                                        <div
                                            class="md:flex justify-between items-center space-y-4 md:space-y-0 space-x-2">
                                            <!-- Left side -->
                                            <div class="flex items-start space-x-3 md:space-x-4">
                                                <div>
                                                    <a class="inline-flex font-semibold text-gray-800 dark:text-gray-100"
                                                       href="https://chromewebstore.google.com/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp">
                                                        nos2x
                                                    </a>
                                                    <div class="text-sm">
                                                        Browser-Erweiterung für Chrome Browser. Multi-Key fähig.
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Right side -->
                                            <div class="flex items-center space-x-4 pl-10 md:pl-0">
                                                <div
                                                    class="text-xs inline-flex font-medium bg-red-500/20 text-red-700 rounded-full text-center px-2.5 py-1">
                                                    Browser Chrome
                                                </div>
                                            </div>
                                        </div>
                                    </flux:card>
                                    <flux:card>
                                        <div
                                            class="md:flex justify-between items-center space-y-4 md:space-y-0 space-x-2">
                                            <!-- Left side -->
                                            <div class="flex items-start space-x-3 md:space-x-4">
                                                <div>
                                                    <a class="inline-flex font-semibold text-gray-800 dark:text-gray-100"
                                                       href="https://addons.mozilla.org/en-US/firefox/addon/nos2x-fox/">
                                                        nos2x-fox
                                                    </a>
                                                    <div class="text-sm">
                                                        Browser-Erweiterung für Firefox Browser. Multi-Key fähig.
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Right side -->
                                            <div class="flex items-center space-x-4 pl-10 md:pl-0">
                                                <div
                                                    class="text-xs inline-flex font-medium bg-amber-500/20 text-amber-700 rounded-full text-center px-2.5 py-1">
                                                    Browser Firefox
                                                </div>
                                            </div>
                                    </flux:card>
                                    </div>
                                </div>
                            @endif

                            <div class="flex flex-wrap space-y-2 sm:space-y-0 items-center justify-between">
                                <template x-if="$store.nostr.user">
                                    <div class="flex items">
                                        <img class="w-12 h-12 rounded-full"
                                             x-bind:src="$store.nostr.user.picture || '{{ asset('apple-touch-icon.png') }}'"
                                             alt="Avatar">
                                        <div class="ml-4">
                                            <h3 class="w-48 sm:w-full truncate text-lg leading-snug text-[#1B1B1B] dark:text-gray-100 font-bold"
                                                x-text="$store.nostr.user.display_name"></h3>
                                            <div
                                                class="w-48 sm:w-full truncate text-sm text-gray-500 dark:text-gray-400"
                                                x-text="$store.nostr.user.name"></div>
                                        </div>
                                    </div>
                                </template>
                                @if($currentPubkey && $currentPleb->association_status->value < 2)
                                    <div
                                        <flux:card>
<div class="flex w-full justify-between items-start">
                                            <div class="flex">
                                                <svg class="shrink-0 fill-current text-green-500 mt-[3px] mr-3"
                                                     width="16" height="16" viewBox="0 0 16 16">
                                                    <path
                                                        d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z"></path>
                                                </svg>
                                                <div>Profil in der Datenbank vorhanden.</div>
                                            </div>
                                        </flux:card>
                                    </div>
                                @endif
                            </div>
                        </section>

                        <section>
                            @if($currentPubkey && !$currentPleb->application_for && $currentPleb->association_status->value < 2)
                                <h3 class="text-xl leading-snug text-[#1B1B1B] dark:text-gray-100 font-bold mb-1">
                                    Einundzwanzig Mitglied werden
                                </h3>
                                <h4 class="text-xs leading-snug text-[#1B1B1B] dark:text-gray-100 font-italic mb-1">
                                    Nur Personen können Mitglied werden und zahlen 21.000 Satoshis im Jahr.<br>
                                    <a href="https://einundzwanzig.space/verein/" class="text-amber-500">Firmen melden
                                        sich bitte direkt an den Vorstand.</a>
                                </h4>
                                <div class="sm:flex sm:items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-5">
                                     <div class="sm:w-1/2 flex flex-col space-y-2">
                                         <div class="flex items-center space-x-2">
                                              <div wire:dirty>
                                                  <flux:field variant="inline">
                                                      <flux:checkbox wire:model="form.check" label="Ich stimme den Vereins-Statuten zu"/>
                                                      <flux:error name="form.check" />
                                                  </flux:field>
                                              </div>
                                            <div>
                                                <a href="https://einundzwanzig.space/verein/" target="_blank"
                                                   class="text-amber-500">Statuten</a>
                                            </div>
                                        </div>
                                         <flux:button wire:click="save({{ AssociationStatus::PASSIVE() }})">
                                            Mit deinem aktuellen Nostr-Profil Mitglied werden
                                        </flux:button>
                                    </div>
                                </div>
                            @endif
                            @if($currentPubkey)
                                <div
<flux:card class="mt-6">
<div class="flex w-full justify-between items-start">
                                        <div class="flex w-full">
                                            <svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3"
                                                 width="16"
                                                 height="16" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path>
                                            </svg>
                                            <div class="w-full">
                                                <div
                                                    class="w-full font-medium text-gray-800 dark:text-gray-100 mb-1">
                                                    Falls du möchtest, kannst du hier eine E-Mail Adresse
                                                    hinterlegen,
                                                    damit der Verein dich darüber informieren kann, wenn es
                                                    Neuigkeiten
                                                    gibt.<br><br>
                                                    Am besten eine anynomisierte E-Mail Adresse verwenden. Wir
                                                    sichern
                                                    diese Adresse AES-256 verschlüsselt in der Datenbank ab.
                                                </div>
                                                <div
                                                     class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 text-amber-500">
                                                      <flux:field variant="inline" xl>
                                                            <flux:label>NEIN</flux:label>
                                                            <flux:description>Ich informiere mich selbst in der News Sektion und gebe keine E-Mail Adresse raus.</flux:description>
                                                            <flux:switch
                                                                wire:model.live="no"
                                                                wire:dirty
                                                            />
                                                            <flux:error name="no" />
                                                        </flux:field>
                                                </div>
                                                @if($showEmail)
                                                    <div wire:key="showEmail"
                                                         class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
                                                         <flux:field>
                                                            <flux:label>Fax-Nummer</flux:label>
                                                            <flux:input wire:model.live.debounce="fax" wire:dirty placeholder="Fax-Nummer"/>
                                                            <flux:error name="fax" />
                                                        </flux:field>
                                                        <flux:field>
                                                            <flux:label>E-Mail Adresse</flux:label>
                                                            <flux:input type="email" wire:model.live.debounce="email" wire:dirty placeholder="E-Mail Adresse"/>
                                                            <flux:error name="email" />
                                                        </flux:field>
                                                    </div>
                                                    <div wire:key="showSave" class="flex space-x-2 mt-2">
                                                        <flux:button wire:click="saveEmail" wire:loading.attr="disabled">
                                                        Speichern
                                                    </flux:button>
                                                    </div>
                                                @endif
                                            </div>
                                        </flux:card>
                                    </div>
                                </div>
                            @endif
                        </section>

                        <section>
                            @if($currentPleb && $currentPleb->association_status->value > 1)
                                <div class="flex flex-col space-y-4">
                                    <div
<flux:card class="max-w-lg">
<div class="flex w-full justify-between items-start">
                                            <div class="flex">
                                                <svg class="shrink-0 fill-current text-green-500 mt-[3px] mr-3"
                                                     width="16"
                                                     height="16" viewBox="0 0 16 16">
                                                    <path
                                                        d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path>
                                                </svg>
                                                <div>
                                                    <div class="font-medium text-gray-800 dark:text-gray-100 mb-1">
                                                        Du bist derzeit ein Mitglied des Vereins.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </flux:card>
                                </div>
                            @endif
                        </section>

                        <section>
                            @if($currentPleb && $currentPleb->association_status->value > 1)
                                <div
<flux:card>
<div class="flex w-full justify-between items-start">
                                        <div class="flex">
                                            <svg class="shrink-0 fill-current text-yellow-500 mt-[3px] mr-3" width="16"
                                                 height="16" viewBox="0 0 16 16">
                                                <path
                                                    d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z"></path>
                                            </svg>
                                            <div>
                                                <div
                                                    class="font-medium text-gray-800 dark:text-gray-100 mb-1 space-y-2">
                                                    <p>Nostr Event für die Zahlung des
                                                        Mitgliedsbeitrags: <span
                                                            class="break-all">{{ $currentPleb->paymentEvents->last()->event_id }}</span>
                                                    </p>
                                                    <div>
                                                        @php
                                                            // latest event by created_at field of $events
                                                            $latestEvent = collect($events)->sortByDesc('created_at')->first();
                                                        @endphp
                                                        @if(isset($latestEvent))
                                                            <p>{{ $latestEvent['content'] }}</p>
                                                            <div class="mt-8">
                                                                @if(!$currentYearIsPaid)
                                                                    <div class="flex justify-center">
                                                                        <button
                                                                            wire:click="pay('{{ date('Y') }}:{{ $currentPubkey }}')"
                                                                            class="btn text-2xl dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 text-green-500"
                                                                        >
                                                                            <i class="fa-sharp-duotone fa-solid fa-bolt-lightning mr-2"></i>
                                                                            Pay {{ $amountToPay }} Sats
                                                                        </button>
                                                                    </div>
                                                                @else
                                                                @if($currentYearIsPaid)
                                                                    <div class="flex sm:justify-center">
                                                                        <div
                                                                            class="btn sm:text-2xl dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 text-green-500"
                                                                        >
                                                                            <i class="fa-sharp-duotone fa-solid fa-check-circle mr-2"></i>
                                                                            aktuelles Jahr bezahlt
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                                @endif
                                                            </div>
                                                        @else
                                                            <div class="flex sm:justify-center">
                                                                <button
                                                                    class="btn dark:bg-gray-800 border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 text-amber-500"
                                                                >
                                                                    <i class="fa-sharp-duotone fa-solid fa-user-helmet-safety mr-2"></i>
                                                                    Unser Nostr-Relay konnte derzeit nicht erreicht
                                                                    werden, um eine Zahlung zu initialisieren. Bitte
                                                                    versuche es später noch einmal.
                                                                </button>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <section>
                                                        <h3 class="text-xl leading-snug text-gray-800 dark:text-gray-100 font-bold mb-1">
                                                            bisherige Zahlungen</h3>
                                                        <!-- Table -->
                                                        <table class="table-auto w-full dark:text-gray-400">
                                                            <!-- Table header -->
                                                            <thead
                                                                class="text-xs uppercase text-gray-400 dark:text-gray-500">
                                                            <tr class="flex flex-wrap md:table-row md:flex-no-wrap">
                                                                <th class="w-full hidden md:w-auto md:table-cell py-2">
                                                                    <div class="font-semibold text-left">Satoshis</div>
                                                                </th>
                                                                <th class="w-full hidden md:w-auto md:table-cell py-2">
                                                                    <div class="font-semibold text-left">Jahr</div>
                                                                </th>
                                                                <th class="w-full hidden md:w-auto md:table-cell py-2">
                                                                    <div class="font-semibold text-left">Event-ID</div>
                                                                </th>
                                                                <th class="w-full hidden md:w-auto md:table-cell py-2">
                                                                    <div class="font-semibold text-left">Quittung</div>
                                                                </th>
                                                            </tr>
                                                            </thead>
                                                            <!-- Table body -->
                                                            <tbody class="text-sm">
                                                            @foreach($payments as $payment)
                                                                <tr class="flex flex-wrap md:table-row md:flex-no-wrap border-b border-gray-200 dark:border-gray-700/60 py-2 md:py-0">
                                                                    <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
                                                                        <div
                                                                            class="text-left font-medium text-gray-800 dark:text-gray-100">
                                                                            <span class="sm:hidden">Sats:</span>
                                                                            {{ $payment->amount }}
                                                                        </div>
                                                                    </td>
                                                                    <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
                                                                        <div
                                                                            class="text-left"><span
                                                                                class="sm:hidden">Jahr:</span>{{ $payment->year }}
                                                                        </div>
                                                                    </td>
                                                                    <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
                                                                        <div
                                                                            class="text-left font-medium break-all">{{ $payment->event_id }}</div>
                                                                    </td>
                                                                    <td class="w-full block md:w-auto md:table-cell py-0.5 md:py-2">
                                                                        @if($payment->btc_pay_invoice)
                                                                            <flux:button href="https://pay.einundzwanzig.space/i/{{ $payment->btc_pay_invoice }}/receipt"
                                                                                       target="_blank"
                                                                                       size="xs"
                                                                                       variant="subtle">
                                                                                Quittung
                                                                            </flux:button>
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                            </tbody>
                                                        </table>
                                                    </section>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </flux:card>
                            @endif
                        </section>

                    </div>

                </div>

            </div>
        </div>

    </div>
</div>