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

<x-layouts.installer :currentStep="2">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Datenbank einrichten</h2>
    <p class="text-sm text-gray-600 mb-4">Wähle den Datenbanktyp und gib die Verbindungsdaten ein.</p>

    <form method="POST" action="{{ route('install.database.store') }}" x-data="{ driver: @js(old('db_driver', $dbDriver)), submitting: false }" @submit="submitting = true">
        @csrf

        {{-- Driver selection --}}
        <div class="mb-5">
            <label class="block text-sm font-medium text-gray-700 mb-2">Datenbanktyp</label>
            <div class="flex gap-4">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="db_driver" value="sqlite" x-model="driver"
                           class="text-blue-600 focus:ring-blue-500">
                    <span class="text-sm text-gray-800">SQLite</span>
                    <span class="text-xs text-gray-400">(Empfohlen für Einzelbetrieb)</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="db_driver" value="mysql" x-model="driver"
                           class="text-blue-600 focus:ring-blue-500">
                    <span class="text-sm text-gray-800">MySQL</span>
                </label>
            </div>
        </div>

        {{-- SQLite info --}}
        <div x-show="driver === 'sqlite'" x-cloak class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md text-sm text-blue-700">
            SQLite speichert alle Daten in einer einzelnen Datei. Ideal für kleine bis mittlere Installationen.
            Es werden keine weiteren Angaben benötigt.
        </div>

        {{-- MySQL fields --}}
        <div x-show="driver === 'mysql'" x-cloak class="space-y-4 mb-4">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label for="db_host" class="block text-sm font-medium text-gray-700 mb-1">Host</label>
                    <input type="text" name="db_host" id="db_host" value="{{ old('db_host', '127.0.0.1') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('db_host') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="db_port" class="block text-sm font-medium text-gray-700 mb-1">Port</label>
                    <input type="number" name="db_port" id="db_port" value="{{ old('db_port', '3306') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('db_port') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
            <div>
                <label for="db_database" class="block text-sm font-medium text-gray-700 mb-1">Datenbankname</label>
                <input type="text" name="db_database" id="db_database" value="{{ old('db_database') }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                @error('db_database') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>
            <div>
                <label for="db_username" class="block text-sm font-medium text-gray-700 mb-1">Benutzername</label>
                <input type="text" name="db_username" id="db_username" value="{{ old('db_username') }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                @error('db_username') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>
            <div>
                <label for="db_password" class="block text-sm font-medium text-gray-700 mb-1">Passwort</label>
                <input type="password" name="db_password" id="db_password" value="{{ old('db_password') }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                @error('db_password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="mt-6 flex justify-between items-center">
            <a href="{{ route('install.requirements') }}"
               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-blue-600 rounded-md hover:bg-blue-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 ? 'Migrationen werden ausgeführt...' : 'Datenbank einrichten'"></span>
            </button>
        </div>
    </form>
</x-layouts.installer>