<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
require_once __DIR__ . '/includes/db.php';
require_once __DIR__ . '/includes/functions.php';

$role = $_SESSION['user_role'] ?? 'guest';
$allowed = ['super_admin', 'admin', 'customer_rep', 'contact_rep'];
if (!in_array($role, $allowed, true)) {
    header('Location: dashboard.php');
    exit;
}

header('Location: customer-rep-dashboard.php#client-celebrations');
exit;

$companyId = function_exists('getCurrentCompanyId') ? (int) getCurrentCompanyId() : (int) ($_SESSION['company_id'] ?? 0);
$celebrationData = function_exists('getClientCelebrationReminders') ? getClientCelebrationReminders(30, $companyId) : ['birthdays' => [], 'anniversaries' => [], 'counts' => ['birthdays' => 0, 'anniversaries' => 0, 'total' => 0]];
$birthdayReminders = $celebrationData['birthdays'] ?? [];
$anniversaryReminders = $celebrationData['anniversaries'] ?? [];
$birthdayCount = (int) ($celebrationData['counts']['birthdays'] ?? count($birthdayReminders));
$anniversaryCount = (int) ($celebrationData['counts']['anniversaries'] ?? count($anniversaryReminders));
$totalCount = (int) ($celebrationData['counts']['total'] ?? ($birthdayCount + $anniversaryCount));

include __DIR__ . '/includes/header.php';
?>
<style>
.celebration-page {
    padding: 1.5rem 0 2rem;
}
.celebration-shell {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 28px;
    padding: 1.5rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}
.celebration-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.celebration-summary-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 22px;
    padding: 1.1rem 1.2rem;
    background: #fff;
}
.celebration-summary-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    font-weight: 700;
    margin-bottom: .35rem;
}
.celebration-summary-value {
    font-size: 1.9rem;
    line-height: 1;
    font-weight: 800;
    color: #0f172a;
}
.celebration-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.celebration-panel {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    background: #fff;
    overflow: hidden;
}
.celebration-panel-header {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.celebration-panel-body {
    padding: .35rem 1rem 1rem;
}
.celebration-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.celebration-item {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    padding: .9rem 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    background: #f8fafc;
}
.celebration-name-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #0d6efd;
    font-weight: 700;
    text-align: left;
}
.celebration-name-button:hover {
    text-decoration: underline;
    color: #0a58ca;
}
.celebration-name-button:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.3);
    outline-offset: 3px;
    border-radius: 6px;
}
.celebration-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .25rem .65rem;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.celebration-detail-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    padding: 1rem;
    background: #f8fafc;
}
.celebration-detail-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    font-weight: 700;
    margin-bottom: .35rem;
}
.celebration-detail-value {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}
@media (max-width: 991.98px) {
    .celebration-summary-grid,
    .celebration-board {
        grid-template-columns: 1fr;
    }
}
</style>

<div class="container-fluid px-3 px-md-4 celebration-page">
    <div class="celebration-shell">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
            <div>
                <div class="text-uppercase small fw-bold text-primary mb-2">Contact Centre</div>
                <h2 class="mb-1">Client Celebrations</h2>
                <p class="text-muted mb-0">Track every birthday and anniversary coming up in the next 30 days from one page.</p>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <a href="customer-care.php#celebrations" class="btn btn-outline-secondary btn-sm"><i class="fa-solid fa-arrow-left me-1"></i>Back to Contact Centre</a>
                <a href="customer-rep-dashboard.php#client-celebrations" class="btn btn-outline-primary btn-sm"><i class="fa-solid fa-chart-line me-1"></i>Open Dashboard KPI</a>
            </div>
        </div>

        <div class="celebration-summary-grid mb-4">
            <div class="celebration-summary-card">
                <div class="celebration-summary-label">Total reminders</div>
                <div class="celebration-summary-value"><?= number_format($totalCount) ?></div>
                <div class="small text-muted mt-2">Combined birthday and anniversary alerts in the next 30 days.</div>
            </div>
            <div class="celebration-summary-card">
                <div class="celebration-summary-label">Birthdays ≤30D</div>
                <div class="celebration-summary-value text-success"><?= number_format($birthdayCount) ?></div>
                <div class="small text-muted mt-2">Use this list to plan client appreciation and outreach.</div>
            </div>
            <div class="celebration-summary-card">
                <div class="celebration-summary-label">Anniversaries ≤30D</div>
                <div class="celebration-summary-value text-danger"><?= number_format($anniversaryCount) ?></div>
                <div class="small text-muted mt-2">Keep relationship moments visible for your team.</div>
            </div>
        </div>

        <div class="celebration-board">
            <section class="celebration-panel" id="birthday-reminders">
                <div class="celebration-panel-header">
                    <div>
                        <h5 class="mb-1">Birthday reminders</h5>
                        <div class="small text-muted">Every client birthday coming up in the next 30 days.</div>
                    </div>
                    <span class="badge text-bg-light rounded-pill px-3 py-2"><?= number_format($birthdayCount) ?></span>
                </div>
                <div class="celebration-panel-body">
                    <?php if (empty($birthdayReminders)): ?>
                        <div class="text-muted py-3">No birthday reminders found for the next 30 days.</div>
                    <?php else: ?>
                        <div class="celebration-list">
                            <?php foreach ($birthdayReminders as $birthday): ?>
                                <div class="celebration-item">
                                    <div>
                                        <button
                                            type="button"
                                            class="celebration-name-button"
                                            data-bs-toggle="modal"
                                            data-bs-target="#celebrationClientModal"
                                            data-client-name="<?= htmlspecialchars($birthday['name'] ?? '-', ENT_QUOTES) ?>"
                                            data-client-email="<?= htmlspecialchars($birthday['email'] ?? '', ENT_QUOTES) ?>"
                                            data-client-birthday="<?= htmlspecialchars($birthday['birthday_display'] ?? 'Not available', ENT_QUOTES) ?>"
                                            data-client-anniversary="<?= htmlspecialchars($birthday['anniversary_display'] ?? 'Not available', ENT_QUOTES) ?>"
                                        ><?= htmlspecialchars($birthday['name'] ?? '-') ?></button>
                                        <div class="small text-muted mt-1">Birthday reminder · <?= htmlspecialchars($birthday['occurs_on'] ?? '-') ?></div>
                                        <div class="small text-muted"><?= htmlspecialchars($birthday['email'] ?? '') ?></div>
                                    </div>
                                    <span class="celebration-chip"><?= htmlspecialchars($birthday['reminder_label'] ?? '') ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </section>

            <section class="celebration-panel" id="anniversary-reminders">
                <div class="celebration-panel-header">
                    <div>
                        <h5 class="mb-1">Anniversary reminders</h5>
                        <div class="small text-muted">Every client anniversary coming up in the next 30 days.</div>
                    </div>
                    <span class="badge text-bg-light rounded-pill px-3 py-2"><?= number_format($anniversaryCount) ?></span>
                </div>
                <div class="celebration-panel-body">
                    <?php if (empty($anniversaryReminders)): ?>
                        <div class="text-muted py-3">No anniversary reminders found for the next 30 days.</div>
                    <?php else: ?>
                        <div class="celebration-list">
                            <?php foreach ($anniversaryReminders as $anniversary): ?>
                                <div class="celebration-item">
                                    <div>
                                        <button
                                            type="button"
                                            class="celebration-name-button"
                                            data-bs-toggle="modal"
                                            data-bs-target="#celebrationClientModal"
                                            data-client-name="<?= htmlspecialchars($anniversary['name'] ?? '-', ENT_QUOTES) ?>"
                                            data-client-email="<?= htmlspecialchars($anniversary['email'] ?? '', ENT_QUOTES) ?>"
                                            data-client-birthday="<?= htmlspecialchars($anniversary['birthday_display'] ?? 'Not available', ENT_QUOTES) ?>"
                                            data-client-anniversary="<?= htmlspecialchars($anniversary['anniversary_display'] ?? 'Not available', ENT_QUOTES) ?>"
                                        ><?= htmlspecialchars($anniversary['name'] ?? '-') ?></button>
                                        <div class="small text-muted mt-1">Anniversary reminder · <?= htmlspecialchars($anniversary['occurs_on'] ?? '-') ?></div>
                                        <div class="small text-muted"><?= htmlspecialchars($anniversary['email'] ?? '') ?></div>
                                    </div>
                                    <span class="celebration-chip"><?= htmlspecialchars($anniversary['reminder_label'] ?? '') ?></span>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </section>
        </div>
    </div>
</div>

<div class="modal fade" id="celebrationClientModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <div>
                    <h5 class="modal-title" id="celebrationClientModalName">Client details</h5>
                    <div class="small text-muted" id="celebrationClientModalEmail">-</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-3">
                <div class="row g-3">
                    <div class="col-12">
                        <div class="celebration-detail-card">
                            <div class="celebration-detail-label">Birthday</div>
                            <div class="celebration-detail-value" id="celebrationClientModalBirthday">Not available</div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="celebration-detail-card">
                            <div class="celebration-detail-label">Anniversary</div>
                            <div class="celebration-detail-value" id="celebrationClientModalAnniversary">Not available</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php include __DIR__ . '/includes/footer.php'; ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var celebrationModal = document.getElementById('celebrationClientModal');
    if (!celebrationModal) {
        return;
    }
    celebrationModal.addEventListener('show.bs.modal', function (event) {
        var trigger = event.relatedTarget;
        if (!trigger) {
            return;
        }
        var nameNode = document.getElementById('celebrationClientModalName');
        var emailNode = document.getElementById('celebrationClientModalEmail');
        var birthdayNode = document.getElementById('celebrationClientModalBirthday');
        var anniversaryNode = document.getElementById('celebrationClientModalAnniversary');
        if (nameNode) {
            nameNode.textContent = trigger.getAttribute('data-client-name') || 'Client details';
        }
        if (emailNode) {
            emailNode.textContent = trigger.getAttribute('data-client-email') || 'No email available';
        }
        if (birthdayNode) {
            birthdayNode.textContent = trigger.getAttribute('data-client-birthday') || 'Not available';
        }
        if (anniversaryNode) {
            anniversaryNode.textContent = trigger.getAttribute('data-client-anniversary') || 'Not available';
        }
    });
});
</script>