@extends('install.layout')

@section('title', 'Base de données')

@section('content')
<div>
    <h2 class="text-2xl font-bold text-slate-800 mb-4">Configuration de la base de données</h2>
    <p class="text-slate-600 mb-6">Choisissez SQLite (recommandé, aucune config) ou MySQL.</p>
    <form method="POST" action="{{ route('install.database.store') }}" class="space-y-6">
        @csrf
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Type de base</label>
            <select name="driver" id="driver" class="w-full border border-slate-300 rounded-lg px-4 py-2" required>
                <option value="sqlite">SQLite (recommandé)</option>
                <option value="mysql">MySQL</option>
            </select>
        </div>
        <div id="mysql-fields" class="hidden space-y-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Hôte</label>
                <input type="text" name="host" value="127.0.0.1" class="w-full border border-slate-300 rounded-lg px-4 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Base de données</label>
                <input type="text" name="database" class="w-full border border-slate-300 rounded-lg px-4 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Utilisateur</label>
                <input type="text" name="username" value="root" class="w-full border border-slate-300 rounded-lg px-4 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">Mot de passe</label>
                <input type="password" name="password" class="w-full border border-slate-300 rounded-lg px-4 py-2">
            </div>
        </div>
        <button type="submit" class="gdev-btn">
            Tester et continuer
        </button>
    </form>
</div>
<script>
document.getElementById('driver').addEventListener('change', function() {
    document.getElementById('mysql-fields').classList.toggle('hidden', this.value !== 'mysql');
});
</script>
@endsection
