<?php
/**
 * Dashboard Header with Notifications
 * LandSales Pro - Common header component
 *
 * Usage: Set $pageTitle before including this file
 * Optional: Set $headerActions to custom action buttons HTML
 */
$pageTitle = $pageTitle ?? 'Dashboard';
$headerActions = $headerActions ?? '';
$canViewFollowups = canView('payments');
?>
<div class="top-header">
    <button class="menu-toggle" onclick="toggleSidebar()">
        <i class="fas fa-bars"></i>
    </button>
    <h1 class="page-title"><?php echo htmlspecialchars($pageTitle); ?></h1>

    <?php if ($canViewFollowups): ?>
    <!-- Payment Follow-up Notifications -->
    <div class="notification-wrapper">
        <button class="notification-bell" onclick="FollowupNotifications.toggle()" title="Payment Follow-ups">
            <i class="fas fa-bell"></i>
            <span class="notification-badge" id="followupBadge" style="display: none;">0</span>
        </button>

        <div class="notification-dropdown" id="followupDropdown">
            <div class="notification-header">
                <h3><i class="fas fa-phone-volume"></i> Payment Follow-ups</h3>
                <span class="date-badge"><?php echo date('M j, Y'); ?></span>
            </div>
            <div class="notification-list" id="followupList">
                <div class="notification-empty">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>Loading...</p>
                </div>
            </div>
            <div class="notification-footer">
                <a href="<?php echo SITE_URL; ?>/dashboard/payments/reminders.php">
                    <i class="fas fa-list"></i> View All Payment Reminders
                </a>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <div class="header-actions">
        <?php echo $headerActions; ?>
    </div>
</div>

<?php if ($canViewFollowups): ?>
<!-- Promised to Pay Modal -->
<div class="reschedule-modal" id="promisedModal">
    <div class="reschedule-content">
        <h4><i class="fas fa-handshake"></i> Buyer Promised to Pay</h4>
        <div class="form-group">
            <label>When did they promise to pay?</label>
            <div class="promised-options">
                <label class="promised-option">
                    <input type="radio" name="promisedType" value="today" onchange="FollowupNotifications.togglePromisedDate(false)">
                    <span class="option-box">
                        <i class="fas fa-clock"></i>
                        <strong>Today</strong>
                        <small>Will pay later today</small>
                    </span>
                </label>
                <label class="promised-option">
                    <input type="radio" name="promisedType" value="other" onchange="FollowupNotifications.togglePromisedDate(true)">
                    <span class="option-box">
                        <i class="fas fa-calendar-alt"></i>
                        <strong>Another Date</strong>
                        <small>Select specific date</small>
                    </span>
                </label>
            </div>
        </div>
        <div class="form-group" id="promisedDateGroup" style="display: none;">
            <label for="promisedDate">Promised Payment Date</label>
            <input type="date" id="promisedDate">
        </div>
        <div class="form-group">
            <label for="promisedNotes">Notes (optional)</label>
            <textarea id="promisedNotes" placeholder="e.g., Will pay after receiving salary"></textarea>
        </div>
        <div class="reschedule-buttons">
            <button type="button" class="cancel-btn" onclick="FollowupNotifications.closePromised()">Cancel</button>
            <button type="button" class="save-btn" onclick="FollowupNotifications.submitPromised()">
                <i class="fas fa-check"></i> Save
            </button>
        </div>
    </div>
</div>

<style>
.promised-options {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.promised-option {
    flex: 1;
    cursor: pointer;
}
.promised-option input {
    display: none;
}
.promised-option .option-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s;
    text-align: center;
}
.promised-option .option-box i {
    font-size: 1.5rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}
.promised-option .option-box strong {
    color: #1e293b;
    font-size: 0.9rem;
}
.promised-option .option-box small {
    color: #94a3b8;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}
.promised-option input:checked + .option-box {
    border-color: #7c3aed;
    background: #f5f3ff;
}
.promised-option input:checked + .option-box i {
    color: #7c3aed;
}
.promised-option:hover .option-box {
    border-color: #a78bfa;
}
</style>
<?php endif; ?>
