<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold font-outfit text-dark m-0"><i class="fa-solid fa-list-check text-info me-2"></i>University Readiness Checklist</h2>
            <p class="text-muted mb-0">Track your progress across all essential preparation categories before enrollment day.</p>
        </div>
        <a href="<?= APP_URL ?>/transition" class="btn btn-outline-secondary rounded-pill px-4"><i class="fa-solid fa-arrow-left me-2"></i>Transition Hub</a>
    </div>

    <?php
    // Compute overall progress
    $totalItems = 0;
    $completedItems = 0;
    foreach ($grouped as $category => $items) {
        foreach ($items as $item) {
            $totalItems++;
            if ($item['is_completed']) $completedItems++;
        }
    }
    $overallProgress = $totalItems > 0 ? round(($completedItems / $totalItems) * 100) : 0;
    ?>

    <!-- Overall Progress Bar -->
    <div class="card border-0 shadow-sm p-4 mb-5 bg-glass">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="fw-bold font-outfit text-dark m-0">Overall Readiness</h5>
            <span class="fw-bold font-outfit text-primary fs-5"><?= $overallProgress ?>%</span>
        </div>
        <div class="progress rounded-pill" style="height: 12px;">
            <div class="progress-bar bg-<?= $overallProgress >= 80 ? 'success' : ($overallProgress >= 40 ? 'warning' : 'danger') ?> rounded-pill" 
                 role="progressbar" style="width: <?= $overallProgress ?>%;" aria-valuenow="<?= $overallProgress ?>" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <p class="text-muted text-xs mt-2 mb-0"><?= $completedItems ?> of <?= $totalItems ?> tasks completed</p>
    </div>

    <!-- Checklist Form -->
    <form action="<?= APP_URL ?>/transition/checklist" method="POST" id="checklist-form">
        <?= csrf_field() ?>

        <div class="row g-4">
            <?php
            $categoryIcons = [
                'Academic Preparation' => ['icon' => 'fa-scroll', 'color' => 'primary'],
                'Applications'         => ['icon' => 'fa-file-pen', 'color' => 'primary'],
                'Financial Planning'   => ['icon' => 'fa-coins', 'color' => 'warning'],
                'Accommodation'        => ['icon' => 'fa-house', 'color' => 'primary'],
                'Health & Wellness'    => ['icon' => 'fa-heart-pulse', 'color' => 'danger'],
                'Social & Personal'    => ['icon' => 'fa-users', 'color' => 'primary'],
            ];
            foreach ($grouped as $category => $items):
                $catCompletedCount = count(array_filter($items, fn($i) => $i['is_completed']));
                $catTotal = count($items);
                $catPct = $catTotal > 0 ? round(($catCompletedCount / $catTotal) * 100) : 0;
                $meta = $categoryIcons[$category] ?? ['icon' => 'fa-check-circle', 'color' => 'primary'];
            ?>
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-3">
                            <div class="d-flex align-items-center">
                                <div class="badge-icon-box bg-<?= $meta['color'] ?>-subtle text-<?= $meta['color'] ?> rounded-circle me-3">
                                    <i class="fa-solid <?= $meta['icon'] ?> fs-5"></i>
                                </div>
                                <h6 class="fw-bold font-outfit text-dark m-0"><?= htmlspecialchars($category) ?></h6>
                            </div>
                            <small class="text-<?= $catPct >= 100 ? 'primary' : 'muted' ?> fw-bold"><?= $catCompletedCount ?>/<?= $catTotal ?></small>
                        </div>
                        <div class="card-body p-3">
                            <!-- Category progress mini bar -->
                            <div class="progress rounded-pill mb-3" style="height: 6px;">
                                <div class="progress-bar bg-<?= $meta['color'] ?> rounded-pill" style="width: <?= $catPct ?>%;"></div>
                            </div>
 
                            <ul class="list-unstyled mb-0">
                                <?php foreach ($items as $item): ?>
                                    <li class="d-flex align-items-center py-2 border-bottom border-light">
                                        <div class="form-check m-0 flex-grow-1">
                                            <input class="form-check-input checklist-checkbox" type="checkbox" 
                                                   name="items[]" 
                                                   id="item-<?= $item['id'] ?>" 
                                                   value="<?= $item['id'] ?>"
                                                   <?= $item['is_completed'] ? 'checked' : '' ?>>
                                            <label class="form-check-label text-sm <?= $item['is_completed'] ? 'text-muted text-decoration-line-through' : 'text-dark' ?>" 
                                                   for="item-<?= $item['id'] ?>">
                                                <?= htmlspecialchars($item['item']) ?>
                                            </label>
                                        </div>
                                        <?php if ($item['is_completed'] && $item['completed_at']): ?>
                                            <small class="text-muted text-3xs ms-2 text-nowrap"><i class="fa-solid fa-check text-primary me-1"></i><?= formatDate($item['completed_at']) ?></small>
                                        <?php endif; ?>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>

        <div class="mt-5 text-center">
            <button type="submit" class="btn btn-primary rounded-pill px-5 py-2 font-outfit fw-bold shadow-sm">
                <i class="fa-solid fa-floppy-disk me-2"></i>Save Checklist Progress
            </button>
        </div>
    </form>
</div>
