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

<?= $this->section('content') ?>
<h5 class="mb-3">Step 1 — Server Requirement Check</h5>

<ul class="list-group mb-4">
    <?php foreach ($results as $row): ?>
        <li class="list-group-item d-flex justify-content-between align-items-center req-row <?= $row['passed'] ? 'pass' : 'fail' ?>">
            <span><?= esc($row['label']) ?></span>
            <span>
                <small class="text-muted me-2">required: <?= esc($row['required']) ?></small>
                <strong><?= esc($row['actual']) ?></strong>
                <?= $row['passed'] ? '✅' : '❌' ?>
            </span>
        </li>
    <?php endforeach; ?>
</ul>

<?php if (! $allPassed): ?>
    <div class="alert alert-danger">Fix the failing items above, then refresh this page.</div>
<?php endif; ?>

<div class="d-flex justify-content-end">
    <button id="nextBtn" class="btn btn-primary" <?= $allPassed ? '' : 'disabled' ?>>Next: Folder Permissions →</button>
</div>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
document.getElementById('nextBtn').addEventListener('click', async () => {
    const res = await fetch('<?= base_url('install/step/1') ?>', { method: 'POST', headers: {'X-Requested-With':'XMLHttpRequest'} });
    const json = await res.json();
    if (json.success) { window.location.href = json.data.next; }
    else { alert(json.errors[0].message); }
});
</script>
<?= $this->endSection() ?>
