<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);

session_start();
require 'config.php';

/* ── AUTH: All logged-in roles can view ── */
if (!isset($_SESSION['user_id'])) {
    header("Location: index.php");
    exit;
}

$today     = date('m-d');
$todayFull = date('Y-m-d');
$month     = date('m');

/* ── TODAY'S BIRTHDAYS ── */
$todayBirths = $conn->query("
    SELECT id, first_name, last_name, division, designation, photo,
           date_of_birth,
           TIMESTAMPDIFF(YEAR, date_of_birth, CURDATE()) AS age
    FROM users
    WHERE status='active'
      AND DATE_FORMAT(date_of_birth,'%m-%d') = '$today'
    ORDER BY first_name
");

/* ── THIS MONTH'S BIRTHDAYS (excluding today) ── */
$monthBirths = $conn->query("
    SELECT id, first_name, last_name, division, designation, photo,
           date_of_birth,
           DAY(date_of_birth) AS birth_day,
           TIMESTAMPDIFF(YEAR, date_of_birth, CURDATE()) + 1 AS turning_age,
           DATEDIFF(
               DATE(CONCAT(YEAR(CURDATE()),'-',MONTH(date_of_birth),'-',DAY(date_of_birth))),
               CURDATE()
           ) AS days_left
    FROM users
    WHERE status='active'
      AND MONTH(date_of_birth) = MONTH(CURDATE())
      AND DATE_FORMAT(date_of_birth,'%m-%d') != '$today'
    ORDER BY DAY(date_of_birth)
");

/* ── UPCOMING (next 30 days, next 2 months, excl. this month) ── */
$upcoming = $conn->query("
    SELECT id, first_name, last_name, division, designation, photo,
           date_of_birth,
           DATE_FORMAT(date_of_birth,'%M %d') AS bday_display,
           TIMESTAMPDIFF(YEAR, date_of_birth, CURDATE()) + 1 AS turning_age,
           CASE
             WHEN MONTH(date_of_birth) < MONTH(CURDATE()) THEN
               DATEDIFF(
                 DATE(CONCAT(YEAR(CURDATE())+1,'-',LPAD(MONTH(date_of_birth),2,'0'),'-',LPAD(DAY(date_of_birth),2,'0'))),
                 CURDATE()
               )
             ELSE
               DATEDIFF(
                 DATE(CONCAT(YEAR(CURDATE()),'-',LPAD(MONTH(date_of_birth),2,'0'),'-',LPAD(DAY(date_of_birth),2,'0'))),
                 CURDATE()
               )
           END AS days_left
    FROM users
    WHERE status='active'
      AND MONTH(date_of_birth) != MONTH(CURDATE())
      AND (
            (MONTH(date_of_birth) > MONTH(CURDATE()) AND MONTH(date_of_birth) <= MONTH(CURDATE())+2)
         OR (MONTH(CURDATE()) >= 11 AND MONTH(date_of_birth) <= 2)
          )
    ORDER BY MONTH(date_of_birth), DAY(date_of_birth)
    LIMIT 20
");

/* ── STATS ── */
$totalThisMonth = $conn->query("
    SELECT COUNT(*) AS cnt FROM users
    WHERE status='active' AND MONTH(date_of_birth)=MONTH(CURDATE())
")->fetch_assoc()['cnt'];

$totalToday = $conn->query("
    SELECT COUNT(*) AS cnt FROM users
    WHERE status='active' AND DATE_FORMAT(date_of_birth,'%m-%d')='$today'
")->fetch_assoc()['cnt'];

$currentMonthName = date('F');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎂 Birthday Reminders</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --rose:    #f43f5e;
  --rose2:   #fb7185;
  --amber:   #f59e0b;
  --amber2:  #fbbf24;
  --coral:   #fb923c;
  --warm-bg: #fffbf7;
  --card:    #ffffff;
  --navy:    #1e1b2e;
  --text:    #2d2640;
  --muted:   #7c7490;
  --border:  #f0eaf6;
  --shadow:  0 8px 32px rgba(244,63,94,.08);
  --r:       16px;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--warm-bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* confetti dots background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(244,63,94,.06) 1px, transparent 1px),
    radial-gradient(circle, rgba(251,146,60,.05) 1px, transparent 1px),
    radial-gradient(circle, rgba(245,158,11,.04) 1px, transparent 1px);
  background-size: 60px 60px, 90px 90px, 120px 120px;
  background-position: 0 0, 30px 30px, 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ── NAV ── */
.topnav {
  background: var(--navy);
  padding: 0 2.5rem;
  height: 62px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 20px rgba(30,27,46,.35);
}
.nav-brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem; font-weight: 700;
  color: #fff;
  display: flex; align-items: center; gap: 10px;
}
.nav-brand .dot { color: var(--rose2); }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.1);
  padding: 7px 16px; border-radius: 8px;
  font-size: .82rem; font-weight: 500;
  text-decoration: none; transition: .2s;
}
.back-btn:hover { background: rgba(255,255,255,.13); color: #fff; }

/* ── HERO BANNER ── */
.hero {
  position: relative; z-index: 1;
  background: linear-gradient(135deg, #f43f5e 0%, #fb7185 40%, #fb923c 80%, #f59e0b 100%);
  padding: 3.5rem 2.5rem 5rem;
  text-align: center;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 60px;
  background: var(--warm-bg);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.hero-emoji {
  font-size: 3.5rem;
  display: block;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem; font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.18);
  margin: 12px 0 8px;
  letter-spacing: -.02em;
}
.hero p {
  color: rgba(255,255,255,.85);
  font-size: 1rem; font-weight: 400;
}
.floating-emojis {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.fe {
  position: absolute;
  font-size: 1.4rem;
  animation: float linear infinite;
  opacity: .55;
}
@keyframes float {
  from { transform: translateY(100%) rotate(0deg); opacity: .5; }
  to   { transform: translateY(-120%) rotate(360deg); opacity: 0; }
}

/* ── STAT PILLS ── */
.stats-row {
  display: flex; gap: 1.25rem; justify-content: center;
  flex-wrap: wrap;
  position: relative; z-index: 10;
  margin: -2.5rem auto 0;
  padding: 0 1.5rem;
  max-width: 860px;
}
.stat-pill {
  background: #fff;
  border-radius: 14px;
  padding: 1.1rem 2rem;
  box-shadow: 0 8px 32px rgba(244,63,94,.13), 0 1px 4px rgba(0,0,0,.05);
  display: flex; align-items: center; gap: 14px;
  flex: 1; min-width: 180px;
  animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.stat-pill:nth-child(2) { animation-delay: .1s; }
.stat-pill:nth-child(3) { animation-delay: .2s; }
@keyframes popIn {
  from { opacity: 0; transform: scale(.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.stat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.si-rose   { background: linear-gradient(135deg,#fecdd3,#fda4af); }
.si-amber  { background: linear-gradient(135deg,#fde68a,#fbbf24); }
.si-coral  { background: linear-gradient(135deg,#fed7aa,#fb923c); }
.stat-label { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 700; color: var(--text); line-height: 1; margin-top: 2px; }

/* ── LAYOUT ── */
.page { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem 4rem; position: relative; z-index: 1; }

/* ── SECTION HEADER ── */
.sec-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 1.5rem;
}
.sec-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem; font-weight: 700; color: var(--navy);
}
.sec-line { flex: 1; height: 1px; background: linear-gradient(to right, var(--border), transparent); }
.sec-badge {
  background: linear-gradient(135deg, var(--rose), var(--coral));
  color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  letter-spacing: .05em;
}

/* ── TODAY CARD ── */
.today-section { margin-bottom: 3rem; }
.today-empty {
  background: #fff;
  border-radius: var(--r);
  padding: 2.5rem;
  text-align: center;
  border: 2px dashed #fecdd3;
}
.today-empty p { color: var(--muted); font-size: .9rem; margin-top: 8px; }

.birthday-spotlight {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.spotlight-card {
  background: linear-gradient(135deg, #fff5f7 0%, #fff 60%);
  border: 1.5px solid #fecdd3;
  border-radius: var(--r);
  padding: 1.75rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(244,63,94,.1);
  animation: fadeSlideUp .5s ease both;
}
.spotlight-card::before {
  content: '🎉';
  position: absolute; top: -10px; right: -5px;
  font-size: 3.5rem; opacity: .12;
  transform: rotate(20deg);
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.today-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rose), var(--coral));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; color: #fff;
  margin: 0 auto 14px;
  box-shadow: 0 6px 20px rgba(244,63,94,.35);
  letter-spacing: -.02em;
  object-fit: cover;
}
.today-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; font-weight: 700; color: var(--navy);
}
.today-dept { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.today-age {
  display: inline-block;
  background: linear-gradient(135deg, var(--rose), var(--rose2));
  color: #fff;
  font-size: .78rem; font-weight: 700;
  padding: 4px 14px; border-radius: 20px;
  margin-top: 10px;
}
.wish-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1.5px solid #fda4af;
  color: var(--rose);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem; font-weight: 600;
  padding: 7px 18px; border-radius: 8px;
  cursor: pointer; margin-top: 10px;
  transition: .2s; text-decoration: none;
}
.wish-btn:hover { background: var(--rose); color: #fff; border-color: var(--rose); }

/* ── MONTH GRID ── */
.month-section { margin-bottom: 3rem; }
.month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.month-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  animation: fadeSlideUp .4s ease both;
}
.month-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(244,63,94,.1);
  border-color: #fda4af;
}
.m-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, #fde68a, var(--coral));
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
  object-fit: cover;
}
.m-name { font-weight: 600; font-size: .9rem; color: var(--navy); }
.m-dept { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.days-chip {
  margin-left: auto; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  background: #fff7ed;
  border: 1.5px solid #fed7aa;
  border-radius: 10px;
  padding: 4px 10px;
}
.days-chip .dc-num { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: var(--coral); line-height: 1; }
.days-chip .dc-lbl { font-size: .6rem; font-weight: 600; color: #9a6800; text-transform: uppercase; letter-spacing: .04em; }

/* ── UPCOMING TABLE ── */
.upcoming-section { }
.up-card {
  background: #fff;
  border-radius: var(--r);
  border: 1.5px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.up-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.up-table thead th {
  background: #faf7ff;
  padding: 11px 18px;
  font-size: .71rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
  border-bottom: 1.5px solid var(--border); text-align: left;
}
.up-table tbody tr { transition: background .15s; }
.up-table tbody tr:hover { background: #fff8f8; }
.up-table tbody td { padding: 13px 18px; border-bottom: 1px solid #faf5ff; vertical-align: middle; }
.up-table tbody tr:last-child td { border-bottom: none; }
.up-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #c4b5fd, #818cf8);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff;
  object-fit: cover;
}
.up-name { font-weight: 600; color: var(--navy); }
.up-dept { font-size: .75rem; color: var(--muted); margin-top: 1px; }
.month-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700;
  background: #ede9fe; color: #5b21b6;
}
.days-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700;
  background: #fff7ed; color: #c2410c;
}
.no-data { text-align: center; padding: 3rem; color: var(--muted); font-size: .9rem; }

/* ── EMPTY ── */
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state .ei { font-size: 3rem; margin-bottom: 12px; display: block; }
.empty-state p { color: var(--muted); }

/* Stagger animation delays for cards */
.month-card:nth-child(1) { animation-delay: .05s; }
.month-card:nth-child(2) { animation-delay: .10s; }
.month-card:nth-child(3) { animation-delay: .15s; }
.month-card:nth-child(4) { animation-delay: .20s; }
.month-card:nth-child(5) { animation-delay: .25s; }
.month-card:nth-child(6) { animation-delay: .30s; }

@media (max-width: 640px) {
  .hero h1 { font-size: 1.9rem; }
  .page { padding: 2rem 1rem 3rem; }
  .topnav { padding: 0 1rem; }
}
</style>
</head>
<body>

<!-- NAV -->
<nav class="topnav">
  <div class="nav-brand">
    🎂 <span>Birthday<span class="dot">.</span>HRM</span>
  </div>
  <a href="dashboard.php" class="back-btn">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
    Dashboard
  </a>
</nav>

<!-- HERO -->
<div class="hero">
  <div class="floating-emojis">
    <?php
    $fe = ['🎈','🎉','🎊','🎁','🌟','✨','🎂','🍰','🥳'];
    $positions = [[10,80],[25,60],[40,90],[60,70],[75,50],[88,85],[15,40],[55,30],[80,20]];
    foreach($positions as $i=>$p):
      $delay = ($i * 1.3);
      $duration = 6 + ($i % 4);
    ?>
    <span class="fe" style="left:<?=$p[0]?>%;bottom:<?=$p[1]?>%;animation-duration:<?=$duration?>s;animation-delay:<?=$delay?>s;"><?=$fe[$i%count($fe)]?></span>
    <?php endforeach; ?>
  </div>
  <span class="hero-emoji">🎂</span>
  <h1>Birthday Reminders</h1>
  <p>Celebrate every milestone — never miss a birthday again</p>
</div>

<!-- STAT PILLS -->
<div class="stats-row">
  <div class="stat-pill">
    <div class="stat-icon si-rose">🎂</div>
    <div>
      <div class="stat-label">Today</div>
      <div class="stat-value"><?= $totalToday ?></div>
    </div>
  </div>
  <div class="stat-pill">
    <div class="stat-icon si-amber">📅</div>
    <div>
      <div class="stat-label">This Month (<?= $currentMonthName ?>)</div>
      <div class="stat-value"><?= $totalThisMonth ?></div>
    </div>
  </div>
  <div class="stat-pill">
    <div class="stat-icon si-coral">🗓️</div>
    <div>
      <div class="stat-label">Today's Date</div>
      <div class="stat-value" style="font-size:1.1rem;margin-top:4px;"><?= date('d M Y') ?></div>
    </div>
  </div>
</div>

<!-- MAIN PAGE -->
<div class="page">

  <!-- TODAY -->
  <div class="today-section">
    <div class="sec-head">
      <h2>🥳 Today's Birthdays</h2>
      <div class="sec-line"></div>
      <?php if($totalToday > 0): ?><span class="sec-badge"><?= $totalToday ?> Today!</span><?php endif; ?>
    </div>

    <?php if($totalToday == 0): ?>
    <div class="today-empty">
      <div style="font-size:2.5rem;">🎈</div>
      <p>No birthdays today — check back tomorrow!</p>
    </div>
    <?php else: ?>
    <div class="birthday-spotlight">
      <?php while($b = $todayBirths->fetch_assoc()):
        $initials = strtoupper(substr($b['first_name'],0,1).substr($b['last_name'],0,1));
      ?>
      <div class="spotlight-card">
        <?php if (!empty($b['photo'])): ?>
          <img src="<?= htmlspecialchars($b['photo']) ?>" class="today-avatar" alt="<?= $initials ?>">
        <?php else: ?>
          <div class="today-avatar"><?= $initials ?></div>
        <?php endif; ?>
        <div class="today-name"><?= htmlspecialchars($b['first_name'].' '.$b['last_name']) ?></div>
        <div class="today-dept"><?= htmlspecialchars($b['division'] ?? $b['designation'] ?? '—') ?></div>
        <div><span class="today-age">🎉 Turning <?= $b['age']+1 ?> today!</span></div>
        <div>
          <a href="mailto:<?= /* add email field if exists */ '' ?>" class="wish-btn">
            💌 Send Wishes
          </a>
        </div>
      </div>
      <?php endwhile; ?>
    </div>
    <?php endif; ?>
  </div>


  <!-- THIS MONTH -->
  <div class="month-section">
    <div class="sec-head">
      <h2>📅 <?= $currentMonthName ?>'s Birthdays</h2>
      <div class="sec-line"></div>
      <?php if($totalThisMonth > 0): ?><span class="sec-badge"><?= $totalThisMonth ?> this month</span><?php endif; ?>
    </div>

    <?php
    $monthRows = [];
    while($r = $monthBirths->fetch_assoc()) $monthRows[] = $r;
    ?>

    <?php if(empty($monthRows)): ?>
    <div class="empty-state">
      <span class="ei">📭</span>
      <p>No other birthdays this month.</p>
    </div>
    <?php else: ?>
    <div class="month-grid">
      <?php foreach($monthRows as $b):
        $initials = strtoupper(substr($b['first_name'],0,1).substr($b['last_name'],0,1));
        $daysLeft = max(0, (int)$b['days_left']);
      ?>
      <div class="month-card">
        <?php if (!empty($b['photo'])): ?>
          <img src="<?= htmlspecialchars($b['photo']) ?>" class="m-avatar" alt="<?= $initials ?>">
        <?php else: ?>
          <div class="m-avatar"><?= $initials ?></div>
        <?php endif; ?>
        <div style="flex:1;min-width:0;">
          <div class="m-name"><?= htmlspecialchars($b['first_name'].' '.$b['last_name']) ?></div>
          <div class="m-dept"><?= htmlspecialchars($b['division'] ?? $b['designation'] ?? '—') ?></div>
          <div style="font-size:.72rem;color:var(--muted);margin-top:3px;">
            <?= date('jS', mktime(0,0,0,(int)$month,(int)$b['birth_day'])) ?> <?= $currentMonthName ?> · Turning <?= $b['turning_age'] ?>
          </div>
        </div>
        <div class="days-chip">
          <span class="dc-num"><?= $daysLeft ?></span>
          <span class="dc-lbl">days</span>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <?php endif; ?>
  </div>


  <!-- UPCOMING -->
  <div class="upcoming-section">
    <div class="sec-head">
      <h2>🔮 Coming Up Next</h2>
      <div class="sec-line"></div>
    </div>

    <div class="up-card">
      <?php
      $upRows = [];
      while($r = $upcoming->fetch_assoc()) $upRows[] = $r;
      ?>
      <?php if(empty($upRows)): ?>
      <div class="no-data">No upcoming birthdays in the next 60 days.</div>
      <?php else: ?>
      <table class="up-table">
        <thead>
          <tr>
            <th>Employee</th>
            <th>Division</th>
            <th>Birthday</th>
            <th>Turning</th>
            <th>Days Left</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach($upRows as $b):
            $initials = strtoupper(substr($b['first_name'],0,1).substr($b['last_name'],0,1));
            $daysLeft = max(0, (int)$b['days_left']);
          ?>
          <tr>
            <td>
              <div style="display:flex;align-items:center;gap:10px;">
                <?php if (!empty($b['photo'])): ?>
                  <img src="<?= htmlspecialchars($b['photo']) ?>" class="up-avatar" alt="<?= $initials ?>">
                <?php else: ?>
                  <div class="up-avatar"><?= $initials ?></div>
                <?php endif; ?>
                <div>
                  <div class="up-name"><?= htmlspecialchars($b['first_name'].' '.$b['last_name']) ?></div>
                </div>
              </div>
            </td>
            <td><span style="color:var(--muted);font-size:.83rem;"><?= htmlspecialchars($b['division'] ?? $b['designation'] ?? '—') ?></span></td>
            <td><span class="month-badge">🎂 <?= htmlspecialchars($b['bday_display']) ?></span></td>
            <td style="font-weight:600;color:var(--navy);"><?= $b['turning_age'] ?></td>
            <td><span class="days-badge">⏳ <?= $daysLeft ?> days</span></td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
      <?php endif; ?>
    </div>
  </div>

</div><!-- /page -->

<?php if(in_array($_SESSION['role'] ?? '', ['hr','admin','superadmin'])): ?>
<div style="position:fixed;bottom:24px;right:24px;z-index:100;">
  <a href="birthday_hr.php" style="
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(135deg,var(--rose),var(--coral));
    color:#fff;text-decoration:none;
    padding:12px 22px;border-radius:12px;
    font-weight:700;font-size:.88rem;
    box-shadow:0 6px 24px rgba(244,63,94,.4);
    transition:.2s;
  " onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
    ⚙️ Manage Birthdays
  </a>
</div>
<?php endif; ?>

</body>
</html>