<div class="container py-4">
    <!-- Header -->
    <div class="text-center mb-5">
        <span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-2 mb-2 fw-semibold font-outfit text-uppercase">EXPLORE UNIVERSITIES</span>
        <h2 class="fw-bold font-outfit text-dark display-6">University Discovery Center</h2>
        <p class="text-muted mx-auto" style="max-width: 540px;">Find public and private universities in Ghana, explore academic programs, and connect with active student mentors.</p>
    </div>

    <!-- Search & Filter Form -->
    <div class="card border-0 shadow-sm mb-5 p-4 bg-glass">
        <form action="<?= APP_URL ?>/universities" method="GET">
            <div class="row g-3">
                <div class="col-lg-4 col-md-6">
                    <label class="form-label text-xs fw-semibold text-muted">SEARCH BY NAME</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-magnifying-glass text-muted"></i></span>
                        <input type="text" class="form-control bg-light border-start-0 ps-0" name="q" value="<?= htmlspecialchars($filters['q'] ?? '') ?>" placeholder="e.g. KNUST, Ashesi...">
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <label class="form-label text-xs fw-semibold text-muted">UNIVERSITY TYPE</label>
                    <select class="form-select bg-light border-0" name="type">
                        <option value="">All Types</option>
                        <option value="public" <?= ($filters['type'] ?? '') === 'public' ? 'selected' : '' ?>>Public University</option>
                        <option value="private" <?= ($filters['type'] ?? '') === 'private' ? 'selected' : '' ?>>Private University</option>
                    </select>
                </div>

                <div class="col-lg-3 col-md-6">
                    <label class="form-label text-xs fw-semibold text-muted">REGION (GHANA)</label>
                    <select class="form-select bg-light border-0" name="region_id">
                        <option value="">All Regions</option>
                        <?php foreach ($regions as $region): ?>
                            <option value="<?= $region['id'] ?>" <?= ($filters['region_id'] ?? 0) == $region['id'] ? 'selected' : '' ?>><?= htmlspecialchars($region['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <div class="col-lg-2 col-md-6 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary rounded-3 w-100 py-2 font-outfit fw-bold shadow-sm"><i class="fa-solid fa-sliders me-2"></i>Apply</button>
                </div>
            </div>
        </form>
    </div>

    <!-- Universities Grid -->
    <div class="row g-4 mb-4">
        <?php if (!empty($universities)): ?>
            <?php foreach ($universities as $uni): ?>
                <div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm h-100 card-hover-effect">
                        <div class="position-relative overflow-hidden" style="height: 180px;">
                            <?php if (!empty($uni['banner'])): ?>
                                <img src="<?= UPLOAD_URL ?>/banners/<?= htmlspecialchars($uni['banner']) ?>" class="w-100 h-100" alt="<?= htmlspecialchars($uni['name']) ?>" style="object-fit:cover;">
                                <div class="position-absolute top-0 start-0 w-100 h-100" style="background:linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);"></div>
                            <?php else: ?>
                                <div class="w-100 h-100 d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #1a2940 0%, #2f4858 100%);">
                                    <img src="<?= logoUrl($uni['logo'] ?? null) ?>" alt="<?= htmlspecialchars($uni['name']) ?>" style="width:80px;height:80px;object-fit:contain;opacity:0.85;">
                                </div>
                            <?php endif; ?>
                            <!-- Logo badge overlay -->
                            <?php if (!empty($uni['banner']) && !empty($uni['logo'])): ?>
                                <div class="position-absolute bottom-2 start-3 bg-white rounded-2 p-1 shadow" style="width:44px;height:44px;">
                                    <img src="<?= logoUrl($uni['logo']) ?>" alt="logo" class="w-100 h-100" style="object-fit:contain;">
                                </div>
                            <?php endif; ?>
                            <span class="position-absolute top-3 end-3 badge bg-primary text-uppercase"><?= htmlspecialchars($uni['university_type']) ?></span>
                        </div>
                        <div class="card-body d-flex flex-column p-4">
                            <h5 class="card-title fw-bold font-outfit text-dark text-truncate mb-2" title="<?= htmlspecialchars($uni['name']) ?>"><?= htmlspecialchars($uni['name']) ?></h5>
                            <p class="card-text text-muted text-sm mb-3">
                                <i class="fa-solid fa-location-dot text-primary me-2"></i> <?= htmlspecialchars($uni['city']) ?>, <?= htmlspecialchars($uni['region_name'] ?? 'Ghana') ?>
                            </p>
                            <p class="card-text text-muted text-sm flex-grow-1">
                                <?= truncate(htmlspecialchars($uni['description']), 110) ?>
                            </p>
                            <hr class="my-3 text-muted opacity-25">
                            <div class="d-flex justify-content-between align-items-center mt-auto">
                                <small class="text-muted"><i class="fa-regular fa-calendar me-2"></i> Established: <?= $uni['established_year'] ?? 'N/A' ?></small>
                                <a href="<?= APP_URL ?>/universities/<?= htmlspecialchars($uni['slug']) ?>" class="btn btn-sm btn-primary rounded-pill px-3">Explore</a>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="col-12 text-center py-5">
                <i class="fa-solid fa-school-circle-exclamation display-4 text-muted mb-3"></i>
                <h5 class="fw-bold text-muted">No Universities Found</h5>
                <p class="text-muted text-xs">Try relaxing your filters or typing a different search query.</p>
            </div>
        <?php endif; ?>
    </div>

    <!-- Pagination -->
    <div class="mt-5">
        <?= paginationLinks($pagination, APP_URL . '/universities') ?>
    </div>
</div>
