@extends('install.layout')
@section('title', 'Database')
@section('step2', 'active')

@section('content')
    <p class="eyebrow">Step 2 of 4</p>
    <h1>Connect your database.</h1>
    <p class="lede">
        SQLite is the simplest option — no setup required. For production we recommend MySQL or
        PostgreSQL with credentials prepared in advance.
    </p>

    <form class="card" method="post" action="{{ route('install.database.save') }}">
        @csrf

        @if ($errors->any())
            <div class="alert alert-error">{{ $errors->first() }}</div>
        @endif

        <div class="field">
            <label for="driver">Driver</label>
            <select id="driver" name="driver" onchange="document.getElementById('details').style.display = this.value === 'sqlite' ? 'none' : 'block';">
                <option value="sqlite" @selected(old('driver', $current['driver']) === 'sqlite')>SQLite (recommended for small installs)</option>
                <option value="mysql"  @selected(old('driver', $current['driver']) === 'mysql')>MySQL / MariaDB</option>
                <option value="pgsql"  @selected(old('driver', $current['driver']) === 'pgsql')>PostgreSQL</option>
            </select>
            <p class="small">SQLite uses <code>database/database.sqlite</code> on disk — no server required.</p>
        </div>

        <div id="details" style="display: {{ old('driver', $current['driver']) === 'sqlite' ? 'none' : 'block' }};">
            <div class="row">
                <div class="field">
                    <label for="host">Host</label>
                    <input type="text" id="host" name="host" value="{{ old('host', $current['host']) }}" placeholder="127.0.0.1" />
                </div>
                <div class="field">
                    <label for="port">Port</label>
                    <input type="text" id="port" name="port" value="{{ old('port', $current['port']) }}" placeholder="3306 / 5432" />
                </div>
            </div>

            <div class="field">
                <label for="database">Database name</label>
                <input type="text" id="database" name="database" value="{{ old('database', $current['database']) }}" placeholder="wedflow" />
            </div>

            <div class="row">
                <div class="field">
                    <label for="username">Username</label>
                    <input type="text" id="username" name="username" value="{{ old('username', $current['username']) }}" />
                </div>
                <div class="field">
                    <label for="password">Password</label>
                    <input type="password" id="password" name="password" />
                </div>
            </div>
        </div>

        <div class="actions">
            <a class="btn-outline" href="{{ route('install.welcome') }}">Back</a>
            <button class="btn" type="submit">Test &amp; continue →</button>
        </div>
    </form>
@endsection