@extends('install.layout')

@section('title', __('Database'))

@section('content')
    <h1>{{ __('Database connection') }}</h1>
    <p class="lead">{{ __('Enter the credentials of an empty MySQL/MariaDB database. Use the "Test connection" button before continuing.') }}</p>

    <div id="db-alert" class="alert{{ $errors->has('database') ? ' err' : '' }}">
        @error('database'){{ $message }}@enderror
    </div>

    <form method="POST" action="{{ route('install.database.save') }}" id="db-form">
        @csrf
        <div class="card">
            <div class="row">
                <div class="field">
                    <label>{{ __('Host') }}</label>
                    <input type="text" name="host" id="host" value="{{ $db['host'] ?? '127.0.0.1' }}" required>
                </div>
                <div class="field">
                    <label>{{ __('Port') }}</label>
                    <input type="text" name="port" id="port" value="{{ $db['port'] ?? '3306' }}">
                </div>
            </div>
            <div class="field">
                <label>{{ __('Database name') }}</label>
                <input type="text" name="database" id="database" value="{{ $db['database'] ?? '' }}" required>
            </div>
            <div class="row">
                <div class="field">
                    <label>{{ __('Username') }}</label>
                    <input type="text" name="username" id="username" value="{{ $db['username'] ?? '' }}" required>
                </div>
                <div class="field">
                    <label>{{ __('Password') }}</label>
                    {{-- No value= on the way back. Re-printing the database
                         password into the HTML put it in the page source, the
                         browser cache and any proxy log, to save retyping it
                         when a later step sends you back here. The placeholder
                         says what is already stored instead. --}}
                    <input type="password" name="password" id="password" autocomplete="off"
                           placeholder="{{ filled($db['password'] ?? '') ? __('Leave blank to keep the password you entered') : '' }}">
                </div>
            </div>
        </div>

        <div class="actions">
            <a href="{{ route('install.requirements') }}" class="btn btn-ghost">&larr; {{ __('Back') }}</a>
            <div style="display:flex; gap:10px;">
                <button type="button" class="btn btn-ghost" id="test-btn">{{ __('Test connection') }}</button>
                {{-- Disabled until a successful connection test is confirmed in this session --}}
                <button type="submit" class="btn btn-primary" id="continue-btn" disabled style="opacity:.45;cursor:not-allowed;">{{ __('Continue') }} &rarr;</button>
            </div>
        </div>
    </form>
@endsection

@section('scripts')
<script>
(function () {
    const testBtn     = document.getElementById('test-btn');
    const continueBtn = document.getElementById('continue-btn');
    const alertBox    = document.getElementById('db-alert');
    const fields      = ['host', 'port', 'database', 'username', 'password'];

    function lockContinue() {
        continueBtn.disabled = true;
        continueBtn.style.opacity = '.45';
        continueBtn.style.cursor  = 'not-allowed';
    }

    function unlockContinue() {
        continueBtn.disabled = false;
        continueBtn.style.opacity = '';
        continueBtn.style.cursor  = '';
    }

    // Reset "tested" state whenever the user edits any field
    fields.forEach(function (id) {
        const el = document.getElementById(id);
        if (el) el.addEventListener('input', lockContinue);
    });

    testBtn.addEventListener('click', async function () {
        lockContinue();
        testBtn.disabled = true;
        testBtn.textContent = @json(__('Testing...'));
        alertBox.className  = 'alert';
        alertBox.textContent = '';

        const payload = fields.reduce(function (a, id) {
            a[id] = document.getElementById(id).value;
            return a;
        }, {});

        try {
            const res  = await fetch(@json(route('install.database.test')), {
                method : 'POST',
                headers: {
                    'Content-Type' : 'application/json',
                    'X-CSRF-TOKEN' : document.querySelector('meta[name=csrf-token]').content,
                },
                body: JSON.stringify(payload),
            });
            const data = await res.json();

            alertBox.className  = 'alert ' + (data.success ? 'ok' : 'err');
            alertBox.textContent = data.message;

            if (data.success) {
                unlockContinue();
            }
        } catch (e) {
            alertBox.className  = 'alert err';
            alertBox.textContent = @json(__('Could not reach the server.'));
        } finally {
            testBtn.disabled    = false;
            testBtn.textContent = @json(__('Test connection'));
        }
    });
})();
</script>
@endsection