@extends('layouts.guest')

@section('title', 'Database Setup')
@section('subtitle', 'Configure database connection')

@section('content')
@include('install._steps', ['step' => 4])

<form method="POST" action="{{ route('install.database.test') }}" id="dbForm">
    @csrf
    <div class="mb-3">
        <label class="form-label">Connection</label>
        <select name="db_connection" id="db_connection" class="form-select" required>
            <option value="mysql" {{ old('db_connection', 'mysql') === 'mysql' ? 'selected' : '' }}>MySQL</option>
            <option value="sqlite" {{ old('db_connection') === 'sqlite' ? 'selected' : '' }}>SQLite</option>
        </select>
    </div>
    <div id="mysqlFields">
        <div class="row g-3">
            <div class="col-md-8">
                <label class="form-label">Host</label>
                <input type="text" name="db_host" class="form-control" value="{{ old('db_host', '127.0.0.1') }}">
            </div>
            <div class="col-md-4">
                <label class="form-label">Port</label>
                <input type="number" name="db_port" class="form-control" value="{{ old('db_port', 3306) }}">
            </div>
            <div class="col-12">
                <label class="form-label">Database</label>
                <input type="text" name="db_database" class="form-control" value="{{ old('db_database') }}">
            </div>
            <div class="col-md-6">
                <label class="form-label">Username</label>
                <input type="text" name="db_username" class="form-control" value="{{ old('db_username', 'root') }}">
            </div>
            <div class="col-md-6">
                <label class="form-label">Password</label>
                <input type="password" name="db_password" class="form-control" value="{{ old('db_password') }}">
            </div>
        </div>
    </div>
    <div class="d-flex gap-2 mt-4">
        <a href="{{ route('install.hotel') }}" class="btn btn-hp-outline">Back</a>
        <button type="submit" class="btn btn-hp-primary flex-grow-1">Test &amp; Continue</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.getElementById('db_connection').addEventListener('change', function () {
    document.getElementById('mysqlFields').style.display = this.value === 'mysql' ? 'block' : 'none';
});
document.getElementById('db_connection').dispatchEvent(new Event('change'));
</script>
@endpush