<?= $this->extend('install/_layout') ?>
<?php $currentStep = 3; ?>

<?= $this->section('content') ?>
<h5 class="mb-3">Step 3 — Database Configuration</h5>

<form id="dbForm">
    <div class="row g-3">
        <div class="col-8">
            <label class="form-label">Database Host</label>
            <input type="text" class="form-control" name="host" value="127.0.0.1" required>
        </div>
        <div class="col-4">
            <label class="form-label">Port</label>
            <input type="text" class="form-control" name="port" value="3306" required>
        </div>
        <div class="col-12">
            <label class="form-label">Database Name</label>
            <input type="text" class="form-control" name="database" placeholder="job_portal" required>
        </div>
        <div class="col-6">
            <label class="form-label">Username</label>
            <input type="text" class="form-control" name="username" required>
        </div>
        <div class="col-6">
            <label class="form-label">Password</label>
            <input type="password" class="form-control" name="password">
        </div>
        <div class="col-12">
            <label class="form-label">Table Prefix (optional)</label>
            <input type="text" class="form-control" name="prefix" placeholder="e.g. jp_">
        </div>
    </div>

    <div id="testResult" class="mt-3"></div>

    <div class="d-flex justify-content-between mt-4">
        <a href="<?= base_url('install/step/2') ?>" class="btn btn-outline-secondary">← Back</a>
        <div>
            <button type="button" id="testBtn" class="btn btn-outline-primary me-2">Test Connection</button>
            <button type="submit" id="nextBtn" class="btn btn-primary" disabled>Next: App Config →</button>
        </div>
    </div>
</form>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
const form = document.getElementById('dbForm');
const testResult = document.getElementById('testResult');
const nextBtn = document.getElementById('nextBtn');

function formData() {
    return Object.fromEntries(new FormData(form).entries());
}

document.getElementById('testBtn').addEventListener('click', async () => {
    testResult.innerHTML = '<div class="text-muted">Testing…</div>';
    const res = await fetch('<?= base_url('install/step/3/test-connection') ?>', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(formData())
    });
    const json = await res.json();
    if (json.success) {
        testResult.innerHTML = `<div class="alert alert-success mb-0">${json.data.message}</div>`;
        nextBtn.disabled = false;
    } else {
        testResult.innerHTML = `<div class="alert alert-danger mb-0">${json.errors[0].message}</div>`;
        nextBtn.disabled = true;
    }
});

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const res = await fetch('<?= base_url('install/step/3') ?>', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: new URLSearchParams(formData())
    });
    const json = await res.json();
    if (json.success) { window.location.href = json.data.next; }
    else { alert(json.errors.map(e => e.message).join('\n')); }
});
</script>
<?= $this->endSection() ?>
