<?php
session_start();
include './includes/db_config.php';

/* ===== підготовка header ===== */
$siteName  = 'Розклад занять';
$pageTitle = 'Розклад занять';
$pageCss   = ['/css/home.css']; // home.css тепер підключається нормально (через header.php)

/* ===== Отримуємо останню новину ===== */
$news_content = '';
$news_sql = "SELECT content FROM `news` ORDER BY updated_at DESC LIMIT 1";
$news_result = $conn->query($news_sql);
if ($news_result && $news_result->num_rows > 0) {
    $news = $news_result->fetch_assoc();
    $news_content = (string)($news['content'] ?? '');
}

/* ===== Отримуємо список груп ===== */
$groups = [];
$sql = "SELECT id, name, position FROM `groups` ORDER BY position";
$result = $conn->query($sql);
if ($result) {
    while ($group = $result->fetch_assoc()) {
        $groups[] = $group;
    }
}
$conn->close();

/* ===== header ===== */
include './includes/header.php';
?>

<main class="page">
    <div class="kp-container">
        <h1 class="page-title">Ласкаво просимо на сайт Розклад занять</h1>

        <?php if (isset($_SESSION['user_id'])): ?>
            <p class="user-line">
                Ви увійшли як
                <strong><?= htmlspecialchars((string)$_SESSION['user_id'], ENT_QUOTES, 'UTF-8') ?></strong>,
                ваша роль:
                <strong><?= htmlspecialchars((string)($_SESSION['role'] ?? ''), ENT_QUOTES, 'UTF-8') ?></strong>
            </p>
        <?php else: ?>
            <p class="user-line">Будь ласка, увійдіть або зареєструйтеся.</p>
        <?php endif; ?>

        <section class="news-section" aria-labelledby="newsTitle">
            <h2 id="newsTitle" class="news-title">Останні новини</h2>
            <div class="news-body">
                <?php if ($news_content): ?>
                    <p><?= htmlspecialchars($news_content, ENT_QUOTES, 'UTF-8') ?></p>
                <?php else: ?>
                    <p>Немає новин.</p>
                <?php endif; ?>
            </div>
        </section>

        <section class="group-section" aria-labelledby="groupsTitle">
            <h2 id="groupsTitle" class="groups-title">Список груп</h2>

            <?php if (!empty($groups)): ?>
                <div class="groups-grid" id="groupsGrid">
                    <?php foreach ($groups as $group): ?>
                        <a
                            href="/rozklad/group_schedule.php?id=<?= (int)$group['id'] ?>"
                            class="group-card"
                            data-id="<?= (int)$group['id'] ?>"
                        >
                            <span class="group-name"><?= htmlspecialchars((string)$group['name'], ENT_QUOTES, 'UTF-8') ?></span>
                        </a>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                <p class="no-groups">Немає груп.</p>
            <?php endif; ?>
        </section>
    </div>
</main>

<?php include './includes/footer.php'; ?>

<script>
(function(){
  const els = document.querySelectorAll('.group-card');
  els.forEach((el, i) => {
    el.style.transitionDelay = (i * 40) + 'ms';
    requestAnimationFrame(() => el.classList.add('loaded'));
  });

  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    els.forEach(el => el.style.transitionDelay = '0ms');
  }
})();
</script>

</body>
</html>
