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

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

<form id="appForm">
    <div class="row g-3">
        <div class="col-12">
            <label class="form-label">Application Name</label>
            <input type="text" class="form-control" name="app_name" value="Job Portal" required>
        </div>
        <div class="col-12">
            <label class="form-label">Application URL</label>
            <input type="url" class="form-control" name="app_url" value="<?= rtrim(base_url(), '/') ?>" required>
        </div>
        <div class="col-6">
            <label class="form-label">Timezone</label>
            <select class="form-select" name="timezone" required>
                <?php foreach ($timezones as $tz): ?>
                    <option value="<?= esc($tz) ?>" <?= $tz === 'Asia/Karachi' ? 'selected' : '' ?>><?= esc($tz) ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="col-3">
            <label class="form-label">Locale</label>
            <select class="form-select" name="locale" required>
                <option value="en" selected>English</option>
                <option value="ur">اردو (Urdu)</option>
            </select>
        </div>
        <div class="col-3">
            <label class="form-label">Currency</label>
            <input type="text" class="form-control" name="currency" value="PKR" maxlength="3" required>
        </div>
    </div>

    <div class="d-flex justify-content-between mt-4">
        <a href="<?= base_url('install/step/3') ?>" class="btn btn-outline-secondary">← Back</a>
        <button type="submit" class="btn btn-primary">Next: Admin Account →</button>
    </div>
</form>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
document.getElementById('appForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const res = await fetch('<?= base_url('install/step/4') ?>', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: new URLSearchParams(new FormData(e.target))
    });
    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() ?>
