@extends('install.layout')

@section('content')
<div class="card">
    <div class="card-header d-flex align-items-center gap-2">
        <i class="bi bi-database fs-5 text-primary"></i>
        <div>
            <h5 class="mb-0">Database Configuration</h5>
            <small class="text-muted">Enter your database connection details.</small>
        </div>
    </div>
    <div class="card-body">

        @if (session('db_error'))
            <div class="alert alert-danger">
                <i class="bi bi-exclamation-triangle me-2"></i>{{ session('db_error') }}
            </div>
        @endif

        <div id="test-result" class="alert d-none mb-3"></div>

        <form method="POST" action="{{ route('install.database.store') }}" id="db-form">
            @csrf

            {{-- Driver --}}
            <div class="mb-3">
                <label class="form-label fw-semibold">Database Driver <span class="text-danger">*</span></label>
                <select name="driver" id="driver" class="form-select @error('driver') is-invalid @enderror">
                    <option value="mysql"  {{ old('driver', 'mysql') === 'mysql'  ? 'selected' : '' }}>MySQL</option>
                    <option value="pgsql"  {{ old('driver') === 'pgsql'  ? 'selected' : '' }}>PostgreSQL</option>
                    <option value="sqlite" {{ old('driver') === 'sqlite' ? 'selected' : '' }}>SQLite</option>
                </select>
                @error('driver') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            {{-- Host & Port --}}
            <div id="server-fields">
                <div class="row g-3 mb-3">
                    <div class="col-md-8">
                        <label class="form-label fw-semibold">Host <span class="text-danger">*</span></label>
                        <input type="text" name="host" class="form-control @error('host') is-invalid @enderror"
                               value="{{ old('host', '127.0.0.1') }}" placeholder="127.0.0.1">
                        @error('host') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Port <span class="text-danger">*</span></label>
                        <input type="number" name="port" id="port-field" class="form-control @error('port') is-invalid @enderror"
                               value="{{ old('port', 3306) }}" min="1" max="65535">
                        @error('port') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Username <span class="text-danger">*</span></label>
                        <input type="text" name="username" class="form-control @error('username') is-invalid @enderror"
                               value="{{ old('username', 'root') }}" autocomplete="off">
                        @error('username') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Password</label>
                        <input type="password" name="password" class="form-control" autocomplete="new-password">
                    </div>
                </div>
            </div>

            {{-- Database name / path --}}
            <div class="mb-4">
                <label class="form-label fw-semibold">
                    <span id="db-label">Database Name</span> <span class="text-danger">*</span>
                </label>
                <input type="text" name="database" id="database-field"
                       class="form-control @error('database') is-invalid @enderror"
                       value="{{ old('database', 'erp') }}"
                       placeholder="erp">
                @error('database') <div class="invalid-feedback">{{ $message }}</div> @enderror
                <div id="sqlite-hint" class="form-text d-none">
                    Full path to the SQLite file, e.g. <code>{{ database_path('database.sqlite') }}</code>.<br>
                    Leave as-is to use the default location.
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="button" id="test-btn" class="btn btn-outline-secondary">
                    <i class="bi bi-plug me-1"></i>Test Connection
                </button>
                <button type="submit" id="submit-btn" class="btn btn-primary px-4" disabled>
                    Save &amp; Continue <i class="bi bi-arrow-right ms-1"></i>
                </button>
            </div>
        </form>

    </div>
</div>
@endsection

@push('scripts')
@include('partials.jsvalidation', ['request' => 'App\Http\Requests\Install\DatabaseConfigRequest', 'selector' => '#db-form', 'includeJquery' => true])
<script>
const driverSel   = document.getElementById('driver');
const serverFields = document.getElementById('server-fields');
const portField    = document.getElementById('port-field');
const dbField      = document.getElementById('database-field');
const dbLabel      = document.getElementById('db-label');
const sqliteHint   = document.getElementById('sqlite-hint');
const testBtn      = document.getElementById('test-btn');
const submitBtn    = document.getElementById('submit-btn');
const resultBox    = document.getElementById('test-result');
const defaultSqlitePath = '{{ database_path("database.sqlite") }}';
let connectionTested = false;

const portDefaults = { mysql: 3306, pgsql: 5432, sqlite: null };

function applyDriver() {
    const driver = driverSel.value;
    const isSqlite = driver === 'sqlite';

    serverFields.style.display = isSqlite ? 'none' : '';
    sqliteHint.classList.toggle('d-none', !isSqlite);
    dbLabel.textContent = isSqlite ? 'SQLite File Path' : 'Database Name';

    if (isSqlite) {
        dbField.value = defaultSqlitePath;
    } else {
        if (dbField.value === defaultSqlitePath) dbField.value = 'erp';
        portField.value = portDefaults[driver];
    }

    connectionTested = false;
    submitBtn.disabled = true;
    resultBox.className = 'alert d-none mb-3';
}

driverSel.addEventListener('change', applyDriver);
applyDriver();

testBtn.addEventListener('click', async () => {
    testBtn.disabled = true;
    testBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Testing…';
    resultBox.className = 'alert d-none mb-3';

    const form = document.getElementById('db-form');
    const data = {
        driver:   driverSel.value,
        host:     form.host?.value,
        port:     form.port?.value,
        database: dbField.value,
        username: form.username?.value,
        password: form.password?.value,
        _token:   document.querySelector('meta[name="csrf-token"]').content,
    };

    try {
        const res  = await fetch('{{ route("install.test-db") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': data._token, 'Accept': 'application/json' },
            body: JSON.stringify(data),
        });
        const json = await res.json();

        if (json.success) {
            resultBox.className = 'alert alert-success mb-3';
            resultBox.innerHTML = '<i class="bi bi-check-circle me-2"></i>' + json.message;
            connectionTested = true;
            submitBtn.disabled = false;
        } else {
            resultBox.className = 'alert alert-danger mb-3';
            resultBox.innerHTML = '<i class="bi bi-x-circle me-2"></i>' + json.message;
            connectionTested = false;
            submitBtn.disabled = true;
        }
    } catch (e) {
        resultBox.className = 'alert alert-danger mb-3';
        resultBox.innerHTML = '<i class="bi bi-x-circle me-2"></i>Request failed. Check your network.';
    }

    testBtn.disabled = false;
    testBtn.innerHTML = '<i class="bi bi-plug me-1"></i>Test Connection';
});

// Re-disabling submit if user changes fields after a successful test
document.getElementById('db-form').querySelectorAll('input, select').forEach(el => {
    el.addEventListener('input', () => {
        if (el.id !== 'driver') {
            connectionTested = false;
            submitBtn.disabled = true;
        }
    });
});
</script>
@endpush