@extends('install._layout', ['step' => 3, 'title' => 'Database'])

@section('content')
    <h1>Database connection</h1>
    <p class="lead">Below you should enter your database connection details. If you're not sure about these, contact your host. The database itself must already exist — create it in your hosting panel first (most panels call this "MySQL Databases").</p>

    @php
        $nonFieldErrors = collect([
            session('error'),
            $errors->first('connection'),
            $errors->first('migration'),
            $errors->first('existing_data'),
        ])->filter()->unique()->values();
    @endphp

    @if ($nonFieldErrors->isNotEmpty())
        <div class="banner-error">
            @if ($nonFieldErrors->count() === 1)
                {{ $nonFieldErrors->first() }}
            @else
                <strong>We hit a problem:</strong>
                <ul>
                    @foreach ($nonFieldErrors as $msg)
                        <li>{{ $msg }}</li>
                    @endforeach
                </ul>
            @endif
        </div>
    @endif

    <form method="POST" action="{{ route('installer.database.store') }}" novalidate>
        @csrf

        <div class="field">
            <label for="db_database">Database name</label>
            <input type="text" id="db_database" name="db_database"
                   value="{{ old('db_database') }}"
                   placeholder="appshot_studio"
                   class="@error('db_database') has-error @enderror"
                   autocomplete="off" required>
            <div class="hint">The name of the database you want AppShot AI to use. Pick something memorable — you'll see it again in your hosting panel.</div>
            @error('db_database')
                <div class="field-error">{{ $message }}</div>
            @enderror
        </div>

        <div class="field">
            <label for="db_username">Username</label>
            <input type="text" id="db_username" name="db_username"
                   value="{{ old('db_username') }}"
                   placeholder="username"
                   class="@error('db_username') has-error @enderror"
                   autocomplete="off" required>
            <div class="hint">Your database username. On shared hosting this is usually the user you created in cPanel's "MySQL Databases" panel — not your hosting login.</div>
            @error('db_username')
                <div class="field-error">{{ $message }}</div>
            @enderror
        </div>

        <div class="field">
            <label for="db_password">Password</label>
            <div class="password-wrap">
                <input type="password" id="db_password" name="db_password"
                       placeholder="password"
                       class="@error('db_password') has-error @enderror"
                       autocomplete="new-password">
                <button type="button" class="password-toggle" data-target="db_password" aria-label="Show password">Show</button>
            </div>
            <div class="hint">The password for the database user above. Leave blank if your database is configured without one (common on local-dev only).</div>
            @error('db_password')
                <div class="field-error">{{ $message }}</div>
            @enderror
        </div>

        <div class="field">
            <label for="db_host">Database Host</label>
            <input type="text" id="db_host" name="db_host"
                   value="{{ old('db_host', 'localhost') }}"
                   class="@error('db_host') has-error @enderror"
                   autocomplete="off" required>
            <div class="hint">You should be able to get this info from your web host, if <code>localhost</code> doesn't work. Common alternatives: <code>127.0.0.1</code>, <code>mysql.your-host.com</code>, or a full server hostname for managed databases.</div>
            @error('db_host')
                <div class="field-error">{{ $message }}</div>
            @enderror
        </div>

        <div class="field">
            <label for="db_port">Port</label>
            <input type="number" id="db_port" name="db_port"
                   value="{{ old('db_port', 3306) }}"
                   min="1" max="65535"
                   class="@error('db_port') has-error @enderror"
                   required>
            <div class="hint">MySQL's default is <code>3306</code>. Only change this if your host runs MySQL on a non-standard port (rare).</div>
            @error('db_port')
                <div class="field-error">{{ $message }}</div>
            @enderror
        </div>

        <div class="actions">
            <span></span>
            <button type="submit" class="btn btn-primary">Test connection &amp; continue &rarr;</button>
        </div>
    </form>

    <script nonce="{{ Vite::cspNonce() }}">
        document.querySelectorAll('.password-toggle').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var input = document.getElementById(btn.dataset.target);
                if (! input) return;
                var showing = input.type === 'text';
                input.type = showing ? 'password' : 'text';
                btn.textContent = showing ? 'Show' : 'Hide';
                btn.setAttribute('aria-label', showing ? 'Show password' : 'Hide password');
            });
        });
    </script>
@endsection
