<x-filament-panels::page>
    <div class="space-y-6">
        <form wire:submit="save" class="space-y-4">
            {{ $this->form }}

            <div class="fi-form-actions">
                <x-filament::actions :actions="$this->getFormActions()" />
            </div>
        </form>

        @if ($result)
            <div class="rounded-2xl border border-gray-200/80 bg-white/70 p-6 shadow-sm ring-1 ring-black/5 dark:border-white/10 dark:bg-white/5">
                <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Upload Endpoint</p>
                <p class="mt-1 break-all font-semibold text-gray-900 dark:text-white">{{ $result['upload_url'] }}</p>

                <div class="mt-4 grid gap-4 md:grid-cols-2">
                    <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
                        <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Sparkbooth Benutzername</p>
                        <p class="mt-1 break-all font-mono text-sm text-gray-900 dark:text-white">{{ $result['sparkbooth_username'] }}</p>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-300">Eintragen in Sparkbooth ➜ Settings ➜ Upload ➜ Custom Upload ➜ Username.</p>
                    </div>
                    <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
                        <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Sparkbooth Passwort</p>
                        <p class="mt-1 break-all font-mono text-sm text-gray-900 dark:text-white">{{ $result['sparkbooth_password'] }}</p>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-300">Eintragen in Sparkbooth unter „Password“.</p>
                    </div>
                </div>

                <div class="mt-4 grid gap-4 md:grid-cols-2">
                    <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
                        <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Galerie-Link</p>
                        <p class="mt-1 break-all font-semibold text-gray-900 dark:text-white">{{ $result['gallery_url'] }}</p>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-300">Slug: {{ $result['gallery']['slug'] }}, Pfad: storage/{{ $result['gallery']['images_path'] }}</p>
                    </div>
                    <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
                        <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Standard-Antwortformat</p>
                        <p class="mt-1 font-semibold text-gray-900 dark:text-white">{{ strtoupper($result['response_format']) }}</p>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-300">Muss mit der Auswahl „JSON Response“ oder „XML Response“ in Sparkbooth übereinstimmen.</p>
                    </div>
                </div>

                <div class="mt-4 grid gap-4 md:grid-cols-2">
                    <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
                        <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Legacy Upload Token</p>
                        <p class="mt-1 break-all font-mono text-sm text-gray-900 dark:text-white">{{ $result['upload_token'] }}</p>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-300">Optional: Für bestehende Integrationen nutzbar (Feld „token“).</p>
                    </div>
                    <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
                        <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Sparkbooth Hinweise</p>
                        <ul class="mt-2 list-disc space-y-1 pl-4 text-xs text-gray-600 dark:text-gray-300">
                            <li>Uploader: „Custom Upload“ wählen.</li>
                            <li>URL: {{ $result['upload_url'] }}</li>
                            <li>Username/Password eintragen, optional Message.</li>
                        </ul>
                    </div>
                </div>

                <div class="mt-6 grid gap-4 md:grid-cols-2">
                    <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
                        <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">QR Code (Galerie)</p>
                        <div class="mt-2 rounded-lg border border-gray-200 bg-white p-2 shadow-sm dark:border-white/20 dark:bg-white/5">
                            {!! \SimpleSoftwareIO\QrCode\Facades\QrCode::size(200)->margin(1)->generate($result['gallery_url']) !!}
                        </div>
                    </div>
                    <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
                        <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Legacy Upload (Token)</p>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-300">Nur falls eine alte Integration noch Token statt Username/Password nutzt.</p>
                    </div>
                </div>

                <div class="mt-6 space-y-4">
                    <div>
                        <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Sparkbooth Beispiel (Custom Upload)</p>
<pre class="mt-2 rounded-xl border border-gray-200 bg-gray-900 p-4 text-xs text-gray-100 dark:border-white/10">
curl -X POST {{ $result['upload_url'] }} \
  -F "media=@your-photo.jpg" \
  -F "username={{ $result['sparkbooth_username'] }}" \
  -F "password={{ $result['sparkbooth_password'] }}" \
  -F "name=Guest" \
  -F "message=Thanks!"
</pre>
                    </div>
                    <div>
                        <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Erwartete Server Responses</p>
                        <div class="grid gap-4 md:grid-cols-2">
                            <pre class="rounded-xl border border-gray-200 bg-gray-900 p-4 text-xs text-gray-100 dark:border-white/10">{
  "status": true,
  "error": null,
  "url": "{{ $result['gallery_url'] }}"
}</pre>
                            <pre class="rounded-xl border border-gray-200 bg-gray-900 p-4 text-xs text-gray-100 dark:border-white/10">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;rsp status="ok" url="{{ $result['gallery_url'] }}" /&gt;</pre>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</x-filament-panels::page>
