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

<?= $this->section('content') ?>
<h5 class="mb-3">Step 6 — SMTP Configuration <small class="text-muted">(optional)</small></h5>
<p class="text-muted">You can skip this and configure it later from Admin → Settings.</p>

<form id="smtpForm">
    <div class="row g-3">
        <div class="col-8">
            <label class="form-label">SMTP Host</label>
            <input type="text" class="form-control" name="host" placeholder="smtp.mailgun.org">
        </div>
        <div class="col-4">
            <label class="form-label">Port</label>
            <input type="text" class="form-control" name="port" value="587">
        </div>
        <div class="col-6">
            <label class="form-label">Username</label>
            <input type="text" class="form-control" name="username">
        </div>
        <div class="col-6">
            <label class="form-label">Password</label>
            <input type="password" class="form-control" name="password">
        </div>
        <div class="col-4">
            <label class="form-label">Encryption</label>
            <select class="form-select" name="encryption">
                <option value="tls" selected>TLS</option>
                <option value="ssl">SSL</option>
            </select>
        </div>
        <div class="col-4">
            <label class="form-label">From Name</label>
            <input type="text" class="form-control" name="from_name" value="Job Portal">
        </div>
        <div class="col-4">
            <label class="form-label">From Email</label>
            <input type="email" class="form-control" name="from_email">
        </div>
    </div>

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

    <div class="d-flex justify-content-between mt-4">
        <a href="<?= base_url('install/step/5') ?>" class="btn btn-outline-secondary">← Back</a>
        <div>
            <button type="button" id="testBtn" class="btn btn-outline-primary me-2">Send Test Email</button>
            <button type="button" id="skipBtn" class="btn btn-outline-secondary me-2">Skip for now</button>
            <button type="submit" class="btn btn-primary">Next: Payment Config →</button>
        </div>
    </div>
</form>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
const form = document.getElementById('smtpForm');
function formData() { return Object.fromEntries(new FormData(form).entries()); }

document.getElementById('testBtn').addEventListener('click', async () => {
    const data = formData();
    data.test_recipient = data.from_email;
    const res = await fetch('<?= base_url('install/step/6/test-smtp') ?>', {
        method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)
    });
    const json = await res.json();
    document.getElementById('testResult').innerHTML = json.success
        ? `<div class="alert alert-success mb-0">${json.data.message}</div>`
        : `<div class="alert alert-danger mb-0">${json.errors[0].message}</div>`;
});

document.getElementById('skipBtn').addEventListener('click', async () => {
    const res = await fetch('<?= base_url('install/step/6') ?>', {
        method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: new URLSearchParams({skip: '1'})
    });
    const json = await res.json();
    if (json.success) window.location.href = json.data.next;
});

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const res = await fetch('<?= base_url('install/step/6') ?>', {
        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() ?>
