<?php
// pages/birthdays.php
requireRole('any');

$month = isset($_GET['month']) ? (int)$_GET['month'] : (int)date('n');
$month_name = date('F', mktime(0, 0, 0, $month, 10));

// Fetch birthdays for the selected month
$stmt = $pdo->prepare("SELECT * FROM members WHERE MONTH(dob) = ? ORDER BY DAY(dob) ASC");
$stmt->execute([$month]);
$birthdays = $stmt->fetchAll();

// Group by day for calendar
$calendar_data = [];
foreach ($birthdays as $b) {
    $day = (int)date('j', strtotime($b['dob']));
    $calendar_data[$day][] = $b;
}

?>

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
    <h1>🎂 Member Birthdays</h1>
    <form method="GET" style="display: flex; align-items: center; gap: 10px;">
        <input type="hidden" name="page" value="birthdays">
        <select name="month" onchange="this.form.submit()" class="form-control" style="width: auto;">
            <?php for($m=1; $m<=12; $m++): ?>
                <option value="<?php echo $m; ?>" <?php if($m==$month) echo 'selected'; ?>>
                    <?php echo date('F', mktime(0, 0, 0, $m, 10)); ?>
                </option>
            <?php endfor; ?>
        </select>
    </form>
</div>

<!-- Layout: Calendar Grid + List View -->
<div class="row">
    <!-- Calendar Grid -->
    <div class="col" style="flex: 2;">
        <div class="card">
            <h3>Calendar - <?php echo $month_name; ?></h3>
            <div class="calendar-grid">
                <?php
                // Get number of days in month
                $days_in_month = cal_days_in_month(CAL_GREGORIAN, $month, date('Y'));
                
                for ($d = 1; $d <= $days_in_month; $d++) {
                    $has_bday = isset($calendar_data[$d]);
                    $bg = $has_bday ? 'var(--primary-color)' : 'rgba(255,255,255,0.05)';
                    $border = $has_bday ? '1px solid var(--accent-color)' : '1px solid #444';
                    
                    echo "<div class='calendar-day' style='background: $bg; border: $border;'>";
                    echo "<div class='day-number'>$d</div>";
                    
                    if ($has_bday) {
                        foreach ($calendar_data[$d] as $p) {
                            echo "<div class='bday-name' title='{$p['full_name']}'>• " . explode(' ', $p['full_name'])[0] . "</div>";
                        }
                    }
                    echo "</div>";
                }
                ?>
            </div>
        </div>
    </div>

    <!-- List View -->
    <div class="col" style="flex: 1;">
        <div class="card">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <h3>List View</h3>
                <button onclick="copyToWhatsApp()" class="btn" style="background-color: #25D366; color: #fff; padding: 5px 10px; font-size: 0.9rem;">
                    <i class="fab fa-whatsapp"></i> Copy
                </button>
            </div>
            
            <div id="whatsapp-content" style="display: none;">
🎂 *<?php echo strtoupper($month_name); ?> BIRTHDAYS* 🎂

<?php foreach ($birthdays as $b): 
    $d = date('jS', strtotime($b['dob']));
    echo "• {$d}: {$b['full_name']}\n";
endforeach; ?>
            </div>

            <div style="max-height: 500px; overflow-y: auto; margin-top: 10px;">
                <?php if (empty($birthdays)): ?>
                    <p style="text-align: center; color: #888;">No birthdays this month.</p>
                <?php else: ?>
                    <table style="width: 100%;">
                        <?php foreach ($birthdays as $b): ?>
                        <tr>
                            <td style="width: 50px; font-weight: bold; color: var(--accent-color);">
                                <?php echo date('jS', strtotime($b['dob'])); ?>
                            </td>
                            <td>
                                <a href="index.php?page=member_form&id=<?php echo $b['id']; ?>" style="color: #fff; text-decoration: none;">
                                    <?php echo htmlspecialchars($b['full_name']); ?>
                                </a>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </table>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<style>
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 5px;
        margin-top: 10px;
    }
    .calendar-day {
        min-height: 80px;
        padding: 5px;
        border-radius: 4px;
    }
    .day-number {
        font-weight: bold;
        font-size: 0.8rem;
        margin-bottom: 2px;
        color: #888;
    }
    .bday-name {
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
    }
</style>

<script>
function copyToWhatsApp() {
    const content = document.getElementById('whatsapp-content').innerText;
    navigator.clipboard.writeText(content).then(() => {
        alert('Birthday list copied! You can now paste it into WhatsApp.');
    }).catch(err => {
        console.error('Failed to copy: ', err);
    });
}
</script>
