WebAPP/resources/views/installer/steps/finalize.blade.php

<x-layouts.installer :currentStep="5">
    @if ($installed ?? false)
        {{-- ══════ SUCCESS PAGE ══════ --}}
        <div class="text-center mb-4">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <h2 class="text-lg font-semibold text-gray-900">Installation erfolgreich!</h2>
            <p class="text-sm text-gray-600 mt-1">Die Handball WebApp ist einsatzbereit.</p>
        </div>

        {{-- Credentials table --}}
        <div class="bg-gray-50 rounded-md border border-gray-200 p-4 mb-4">
            <h3 class="text-sm font-semibold text-gray-700 mb-3">Zugangsdaten</h3>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-1.5 px-2 font-medium text-gray-600">Rolle</th>
                            <th class="text-left py-1.5 px-2 font-medium text-gray-600">E-Mail</th>
                            <th class="text-left py-1.5 px-2 font-medium text-gray-600">Passwort</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b border-gray-100 bg-blue-50">
                            <td class="py-1.5 px-2 font-medium text-gray-800">Administrator</td>
                            <td class="py-1.5 px-2 text-gray-700">{{ $adminEmail }}</td>
                            <td class="py-1.5 px-2 text-gray-500 italic">Dein gewähltes Passwort</td>
                        </tr>
                        @if ($installDemo ?? false)
                            <tr class="border-b border-gray-100">
                                <td class="py-1.5 px-2 font-medium text-gray-800">Trainer</td>
                                <td class="py-1.5 px-2 text-gray-700 font-mono text-xs">trainer@handball.local</td>
                                <td class="py-1.5 px-2 text-gray-700 font-mono text-xs">trainer1234</td>
                            </tr>
                            <tr class="border-b border-gray-100">
                                <td class="py-1.5 px-2 font-medium text-gray-800">Elternvertretung</td>
                                <td class="py-1.5 px-2 text-gray-700 font-mono text-xs">elternvertretung@handball.local</td>
                                <td class="py-1.5 px-2 text-gray-700 font-mono text-xs">eltern1234</td>
                            </tr>
                            <tr class="border-b border-gray-100">
                                <td class="py-1.5 px-2 text-gray-800">Eltern (Beispiel)</td>
                                <td class="py-1.5 px-2 text-gray-700 font-mono text-xs">mary.parker@handball.local</td>
                                <td class="py-1.5 px-2 text-gray-700 font-mono text-xs">eltern1234</td>
                            </tr>
                            <tr>
                                <td class="py-1.5 px-2 text-gray-800">Eltern (Beispiel)</td>
                                <td class="py-1.5 px-2 text-gray-700 font-mono text-xs">tony.stark@handball.local</td>
                                <td class="py-1.5 px-2 text-gray-700 font-mono text-xs">eltern1234</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        @if ($installDemo ?? false)
            <p class="text-xs text-gray-500 mb-4">
                Die Beispieldaten umfassen ein Demo-Team mit 27 Spielern, 35 Eltern, 8 Events und weitere
                Testdaten. Alle Demo-Eltern nutzen das Passwort <code class="bg-gray-100 px-1 rounded">eltern1234</code>.
            </p>
        @endif

        <div class="text-center">
            <a href="/login"
               class="inline-block px-6 py-2.5 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700 transition">
                Zum Login
            </a>
        </div>
    @else
        {{-- ══════ FINALIZE FORM ══════ --}}
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Installation abschließen</h2>

        {{-- Summary --}}
        <div class="bg-gray-50 rounded-md border border-gray-200 p-4 mb-5">
            <h3 class="text-sm font-semibold text-gray-700 mb-2">Zusammenfassung</h3>
            <dl class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm">
                <dt class="text-gray-500">App-Name:</dt>
                <dd class="text-gray-800 font-medium">{{ $appName }}</dd>
                <dt class="text-gray-500">Administrator:</dt>
                <dd class="text-gray-800">{{ $adminName }} ({{ $adminEmail }})</dd>
                <dt class="text-gray-500">Datenbank:</dt>
                <dd class="text-gray-800">{{ $dbDriver === 'mysql' ? 'MySQL' : 'SQLite' }}</dd>
            </dl>
        </div>

        <form method="POST" action="{{ route('install.finalize.store') }}" x-data="{ submitting: false }" @submit="submitting = true">
            @csrf

            {{-- Demo data checkbox --}}
            <div class="mb-5 p-4 bg-blue-50 border border-blue-200 rounded-md">
                <label class="flex items-start gap-3 cursor-pointer">
                    <input type="checkbox" name="install_demo" value="1" checked
                           class="mt-0.5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                    <div>
                        <span class="text-sm font-medium text-gray-800">Beispieldaten installieren</span>
                        <p class="text-xs text-gray-600 mt-1">
                            Erstellt ein Demo-Team mit 27 Spielern, 35 Eltern-Accounts, 8 Events
                            (Training, Heimspiel, Auswärtsspiel, Turnier, Besprechung, etc.),
                            Catering-Einträge, Zeitnehmer, Kommentare und weitere Testdaten.
                            Ideal, um alle Funktionen der App kennenzulernen.
                        </p>
                    </div>
                </label>
            </div>

            {{-- Registration opt-in --}}
            <div class="mb-5 p-4 bg-green-50 border border-green-200 rounded-md">
                <label class="flex items-start gap-3 cursor-pointer">
                    <input type="checkbox" name="register_installation" value="1" checked
                           class="mt-0.5 rounded border-gray-300 text-green-600 focus:ring-green-500">
                    <div>
                        <span class="text-sm font-medium text-gray-800">Installation registrieren</span>
                        <p class="text-xs text-gray-600 mt-1">
                            Registriert diese Installation beim Entwickler. Es werden nur technische Daten
                            übermittelt (App-Name, URL, PHP-Version, App-Version). Keine persönlichen Daten.
                            Ermöglicht Update-Benachrichtigungen und Support-Anfragen.
                        </p>
                    </div>
                </label>
            </div>

            {{-- License key (optional) --}}
            <div class="mb-5">
                <label for="license_key" class="block text-sm font-medium text-gray-700 mb-1">
                    Lizenzschlüssel <span class="text-gray-400 font-normal">(optional)</span>
                </label>
                <input type="text" name="license_key" id="license_key"
                       placeholder="XXXX-XXXX-XXXX-XXXX"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm font-mono focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                <p class="text-xs text-gray-400 mt-1">Falls vorhanden. Kann auch später in den Einstellungen eingetragen werden.</p>
            </div>

            <div class="flex justify-between items-center">
                <a href="{{ route('install.mail') }}"
                   class="px-4 py-2 text-sm text-gray-600 bg-gray-100 rounded-md hover:bg-gray-200 transition">
                    Zurück
                </a>
                <button type="submit" :disabled="submitting"
                        class="px-5 py-2 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-wait flex items-center gap-2">
                    <template x-if="submitting">
                        <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                    </template>
                    <span x-text="submitting ? 'Installation läuft...' : 'Installation abschließen'"></span>
                </button>
            </div>
        </form>
    @endif
</x-layouts.installer>