@php
    $uploadUrl = $upload_url ?? null;
    $galleryUrl = $gallery_url ?? null;
    $username = $sparkbooth_username ?? '—';
    $password = $sparkbooth_password ?? '—';
    $format = strtoupper($response_format ?? 'JSON');
    $imagesPath = $gallery['images_path'] ?? 'uploads';
@endphp

<div class="space-y-4">
    <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">Upload Endpoint</p>
        <p class="mt-1 break-all font-semibold text-gray-900 dark:text-white">{{ $uploadUrl }}</p>
        <p class="mt-2 text-xs text-gray-500 dark:text-gray-300">Methode: POST (multipart/form-data) mit Username/Password.</p>
    </div>

    <div class="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">Photobooth Benutzername</p>
            <p class="mt-1 break-all font-mono text-sm text-gray-900 dark:text-white">{{ $username }}</p>
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-300">Eintragen im Photobooth Uploader unter „Benutzername“.</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">Photobooth Passwort</p>
            <p class="mt-1 break-all font-mono text-sm text-gray-900 dark:text-white">{{ $password }}</p>
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-300">Eintragen im Photobooth Uploader unter „Passwort“.</p>
        </div>
    </div>

    <div class="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">Antwortformat</p>
            <p class="mt-1 font-semibold text-gray-900 dark:text-white">{{ $format }}</p>
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-300">Im Photobooth Uploader das passende Antwort-Format auswählen.</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">Photobooth Hinweise</p>
            <ul class="mt-2 list-disc space-y-1 pl-4 text-xs text-gray-600 dark:text-gray-300">
                <li>Uploader starten und Zugangsdaten eintragen.</li>
                <li>Username &amp; Password wie oben eintragen.</li>
                <li>Optional: Name/Email/Message Felder im Uploader setzen.</li>
            </ul>
        </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">Beispiel (curl)</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 {{ $uploadUrl }} \
  -F "media=@/pfad/zum/foto.jpg" \
  -F "username={{ $username }}" \
  -F "password={{ $password }}" \
  -F "response_format={{ strtolower($format) }}" \
  -F "name=Guest" \
  -F "message=Hallo von der Fotobox"</pre>
    </div>

    <div class="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">{{ $galleryUrl }}</p>
            <p class="mt-2 text-xs text-gray-500 dark:text-gray-300">Slug: {{ $gallery['slug'] ?? '—' }}, Pfad: storage/{{ $imagesPath }}</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">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($galleryUrl) !!}
            </div>
        </div>
    </div>
</div>