<?php
/**
 * Couple Portal — Wedding Insights (RC-021)
 * Location: app/views/invitation/insights.php
 */

if (!function_exists('format_money')) {
    function format_money(float $amount, string $currency = 'IDR'): string
    {
        if ($currency === 'IDR') {
            return 'Rp ' . number_format($amount, 0, ',', '.');
        }
        return $currency . ' ' . number_format($amount, 2, '.', ',');
    }
}

$isOverBudget = $budget_difference < 0.00;
$diffTextStyle = $isOverBudget ? 'text-rose-600 font-black' : 'text-emerald-600 font-black';
$diffBgStyle = $isOverBudget ? 'bg-rose-50 border-rose-100' : 'bg-slate-50 border-slate-100';
$diffLabel = $isOverBudget ? 'Over Budget' : 'Remaining Budget';
?>

<div class="max-w-6xl mx-auto space-y-6">

    <!-- ── Header Section ────────────────────────────────────────────────── -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <div class="page-breadcrumb">
                <a href="<?= url('/app/couple/dashboard') ?>">Dashboard</a>
                <span class="sep">/</span>
                <span>Wedding Insights</span>
            </div>
            <h1 class="page-h1">
                <span class="page-header-icon">
                    <i class="fa-solid fa-chart-pie"></i>
                </span>
                Wedding Insights
            </h1>
            <p class="page-subtitle">A factual overview of your wedding budget, guest list, and schedule.</p>
        </div>
        <div class="flex items-center gap-2">
            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-xl border border-transparent" style="background-color:var(--brand-rose-gold-lt); color:var(--color-secondary-600);">
                <i class="fa-solid fa-hourglass-half text-[10px]"></i> Setup Phase
            </span>
        </div>
    </div>

    <!-- ── SECTION 6: WEDDING COUNTDOWN ── -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 rounded-3xl p-6 text-white overflow-hidden shadow-sm relative" style="background-color:#232323;">
        <div class="absolute -right-12 -bottom-12 w-48 h-48 rounded-full pointer-events-none" style="background:rgba(212,162,140,0.06); filter:blur(32px);"></div>
        
        <div class="md:col-span-1 border-r border-white/10 pr-4 flex flex-col justify-center">
            <span class="text-[9px] uppercase tracking-widest font-bold" style="color:#D0C8BE;">Wedding Date</span>
            <span class="text-base font-black mt-1"><?= date('d F Y', strtotime($workspace['wedding_date'])) ?></span>
        </div>

        <div class="text-center md:col-span-1 border-r border-white/10 flex flex-col justify-center">
            <span class="text-3xl font-black font-mono tracking-tight text-white"><?= $countdown_days ?></span>
            <span class="text-[8px] uppercase tracking-wider font-bold mt-1" style="color:#D0C8BE;">Days Remaining</span>
        </div>

        <div class="text-center md:col-span-1 border-r border-white/10 flex flex-col justify-center">
            <span class="text-3xl font-black font-mono tracking-tight text-white"><?= $weeks_remaining ?></span>
            <span class="text-[8px] uppercase tracking-wider font-bold mt-1" style="color:#D0C8BE;">Weeks Remaining</span>
        </div>

        <div class="text-center md:col-span-1 flex flex-col justify-center">
            <span class="text-3xl font-black font-mono tracking-tight text-white"><?= $months_remaining ?></span>
            <span class="text-[8px] uppercase tracking-wider font-bold mt-1" style="color:#D0C8BE;">Months Remaining</span>
        </div>
    </div>

    <!-- ── SECTION 9: INSIGHT HIGHLIGHT CARDS ────────────────────────────── -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
        
        <!-- Largest Expense Category -->
        <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-xs flex flex-col justify-between">
            <div>
                <span class="text-[9px] font-bold text-slate-400 block uppercase tracking-wider">Largest Expense Cat</span>
                <span class="text-sm font-bold text-slate-700 block mt-2">
                    <?= $largest_expense_cat ? escape_html($largest_expense_cat['name']) : '—' ?>
                </span>
            </div>
            <span class="text-[10px] text-slate-400 block mt-1.5 font-bold">
                <?= $largest_expense_cat ? format_money((float)$largest_expense_cat['total_est'], $currency) : '—' ?>
            </span>
        </div>

        <!-- Largest Remaining Payment -->
        <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-xs flex flex-col justify-between">
            <div>
                <span class="text-[9px] font-bold text-slate-400 block uppercase tracking-wider">Largest Open Balance</span>
                <span class="text-sm font-bold text-slate-700 block mt-2 truncate">
                    <?= $largest_remaining_payment ? escape_html($largest_remaining_payment['name']) : '—' ?>
                </span>
            </div>
            <span class="text-[10px] text-amber-600 block mt-1.5 font-black">
                <?= $largest_remaining_payment ? format_money($largest_remaining_payment['balance'], $currency) : '—' ?>
            </span>
        </div>

        <!-- Most Active Guest Group -->
        <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-xs flex flex-col justify-between">
            <div>
                <span class="text-[9px] font-bold text-slate-400 block uppercase tracking-wider">Active Guest Group</span>
                <span class="text-sm font-bold text-slate-700 block mt-2 capitalize">
                    <?= $most_active_guest_group ? escape_html(str_replace('_', ' ', $most_active_guest_group['guest_group'])) : '—' ?>
                </span>
            </div>
            <span class="text-[10px] text-emerald-600 block mt-1.5 font-bold">
                <?= $most_active_guest_group ? $most_active_guest_group['yes_count'] . ' Confirmed RSVPs' : 'No Yes responses yet' ?>
            </span>
        </div>

        <!-- Newest Vendor -->
        <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-xs flex flex-col justify-between">
            <div>
                <span class="text-[9px] font-bold text-slate-400 block uppercase tracking-wider">Newest Vendor</span>
                <span class="text-sm font-bold text-slate-700 block mt-2 truncate">
                    <?= $newest_vendor ? escape_html($newest_vendor['name']) : '—' ?>
                </span>
            </div>
            <span class="text-[10px] text-slate-400 block mt-1.5 font-bold">
                <?= $newest_vendor ? 'Registered ' . date('d M Y', strtotime($newest_vendor['created_at'])) : '—' ?>
            </span>
        </div>

        <!-- Latest RSVP -->
        <div class="bg-white p-5 rounded-2xl border border-slate-100 shadow-xs flex flex-col justify-between">
            <div>
                <span class="text-[9px] font-bold text-slate-400 block uppercase tracking-wider">Latest Guest RSVP</span>
                <span class="text-sm font-bold text-slate-700 block mt-2 truncate">
                    <?= $latest_rsvp ? escape_html($latest_rsvp['full_name']) : '—' ?>
                </span>
            </div>
            <span class="text-[10px] text-[#A8735C] block mt-1 font-bold uppercase tracking-wider">
                <?= $latest_rsvp ? escape_html($latest_rsvp['rsvp_status']) : 'No replies yet' ?>
            </span>
        </div>

    </div>

    <!-- ── SECTION 1 & 2: BUDGET INSIGHTS & DISTRIBUTION ────────────────── -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Budget summaries -->
        <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm space-y-4">
            <h3 class="font-black text-slate-800 text-sm border-b border-slate-50 pb-2.5">
                <i class="fa-solid fa-receipt text-[#D4A28C]"></i> Financial Summary
            </h3>
            <div class="space-y-3.5 text-xs">
                <div class="flex justify-between">
                    <span class="text-slate-400">Total Budget Limit</span>
                    <span class="font-bold text-slate-800"><?= format_money($total_budget, $currency) ?></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">Allocated Planned Cost</span>
                    <span class="font-bold text-slate-700"><?= format_money($allocated_budget, $currency) ?></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">Actual Negotiated Deals</span>
                    <span class="font-bold text-[#A8735C]"><?= format_money($actual_deal_value, $currency) ?></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">Amount Paid Installments</span>
                    <span class="font-bold text-emerald-600"><?= format_money($paid, $currency) ?></span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">Remaining Balance Cash</span>
                    <span class="font-bold text-slate-800"><?= format_money($remaining_cash, $currency) ?></span>
                </div>
                <div class="flex justify-between items-center pt-2.5 border-t border-slate-100">
                    <span class="text-slate-400"><?= $diffLabel ?></span>
                    <span class="px-2 py-0.5 rounded text-[10px] font-bold border <?= $isOverBudget ? 'bg-rose-50 border-rose-100 text-rose-700' : 'bg-slate-50 border-slate-100 text-slate-600' ?>">
                        <?= format_money(abs($budget_difference), $currency) ?>
                    </span>
                </div>
            </div>

            <!-- SECTION 2: BUDGET DISTRIBUTION NATIVE CHARTS -->
            <div class="pt-4 border-t border-slate-150">
                <h4 class="font-bold text-slate-700 text-xs mb-3">Allocated Share per Category</h4>
                <div class="space-y-2 max-h-40 overflow-y-auto pr-1">
                    <?php 
                    $sumAllocated = array_sum(array_column($top_planned, 'planned'));
                    foreach ($top_planned as $tp):
                        $pct = $sumAllocated > 0 ? ($tp['planned'] / $sumAllocated) * 100 : 0.0;
                    ?>
                        <div class="space-y-1">
                            <div class="flex justify-between text-[10px] text-slate-500 font-semibold">
                                <span class="truncate pr-2"><?= escape_html($tp['name']) ?></span>
                                <span class="font-mono"><?= number_format($pct, 1) ?>%</span>
                            </div>
                            <div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
                                <div class="bg-[#D4A28C] h-full rounded-full" style="width: <?= $pct ?>%"></div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <!-- Category tables (Top 5 list sheets) -->
        <div class="lg:col-span-2 bg-white p-6 rounded-3xl border border-slate-100 shadow-sm space-y-6" x-data="{ sortTab: 'planned' }">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-b border-slate-50 pb-3">
                <h3 class="font-black text-slate-800 text-sm">
                    Top 5 Cost Allocation Priorities
                </h3>
                <!-- Tab togglers -->
                <div class="flex bg-slate-100 p-0.5 rounded-lg text-xxs font-bold">
                    <button type="button" @click="sortTab = 'planned'" :class="sortTab === 'planned' ? 'bg-white text-slate-800 shadow-xs' : 'text-slate-500 hover:text-slate-800'" class="px-2.5 py-1 rounded">Planned Budget</button>
                    <button type="button" @click="sortTab = 'actual'" :class="sortTab === 'actual' ? 'bg-white text-slate-800 shadow-xs' : 'text-slate-500 hover:text-slate-800'" class="px-2.5 py-1 rounded">Negotiated Deal</button>
                    <button type="button" @click="sortTab = 'diff'" :class="sortTab === 'diff' ? 'bg-white text-slate-800 shadow-xs' : 'text-slate-500 hover:text-slate-800'" class="px-2.5 py-1 rounded">Variance Diff</button>
                </div>
            </div>

            <!-- Planned Budget table -->
            <div x-show="sortTab === 'planned'" class="overflow-x-auto">
                <table class="w-full text-left text-xs border-collapse">
                    <thead>
                        <tr class="bg-slate-50 text-[10px] font-bold text-slate-400 uppercase py-2 border-b border-slate-100">
                            <th class="py-2.5 px-3">Category Name</th>
                            <th class="py-2.5 px-3 text-right">Planned (Budget)</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        <?php foreach ($top_planned as $tp): ?>
                            <tr>
                                <td class="py-2.5 px-3 font-bold text-slate-700"><?= escape_html($tp['name']) ?></td>
                                <td class="py-2.5 px-3 text-right font-bold text-slate-700"><?= format_money($tp['planned'], $currency) ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <!-- Negotiated Deal table -->
            <div x-show="sortTab === 'actual'" style="display: none;" class="overflow-x-auto">
                <table class="w-full text-left text-xs border-collapse">
                    <thead>
                        <tr class="bg-slate-50 text-[10px] font-bold text-slate-400 uppercase py-2 border-b border-slate-100">
                            <th class="py-2.5 px-3">Category Name</th>
                            <th class="py-2.5 px-3 text-right">Actual Negotiated</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        <?php foreach ($top_actual as $ta): ?>
                            <tr>
                                <td class="py-2.5 px-3 font-bold text-slate-700"><?= escape_html($ta['name']) ?></td>
                                <td class="py-2.5 px-3 text-right font-bold text-[#A8735C]"><?= format_money($ta['actual'], $currency) ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <!-- Variance Difference table -->
            <div x-show="sortTab === 'diff'" style="display: none;" class="overflow-x-auto">
                <table class="w-full text-left text-xs border-collapse">
                    <thead>
                        <tr class="bg-slate-50 text-[10px] font-bold text-slate-400 uppercase py-2 border-b border-slate-100">
                            <th class="py-2.5 px-3">Category Name</th>
                            <th class="py-2.5 px-3 text-right">Planned Budget</th>
                            <th class="py-2.5 px-3 text-right">Actual Negotiated</th>
                            <th class="py-2.5 px-3 text-right">Difference Saving</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        <?php foreach ($top_diff as $td): 
                            $diffVal = $td['difference'];
                            $diffColor = $diffVal > 0.00 ? 'text-green-600' : ($diffVal < 0.00 ? 'text-rose-600' : 'text-slate-400');
                        ?>
                            <tr>
                                <td class="py-2.5 px-3 font-bold text-slate-700"><?= escape_html($td['name']) ?></td>
                                <td class="py-2.5 px-3 text-right text-slate-500"><?= format_money($td['planned'], $currency) ?></td>
                                <td class="py-2.5 px-3 text-right text-slate-500"><?= format_money($td['actual'], $currency) ?></td>
                                <td class="py-2.5 px-3 text-right font-bold <?= $diffColor ?>"><?= format_money($diffVal, $currency) ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

        </div>

    </div>

    <!-- ── SECTION 3 & 4: GUEST & TIMELINE INSIGHTS ──────────────────────── -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        
        <!-- Guests metrics -->
        <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm space-y-4">
            <h3 class="font-black text-slate-800 text-sm border-b border-slate-50 pb-2.5">
                <i class="fa-solid fa-users text-[#D4A28C]"></i> Guest &amp; RSVP Insights
            </h3>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-center text-xs">
                <div class="p-3 rounded-2xl bg-slate-50 border border-slate-100">
                    <span class="text-[8px] font-bold text-slate-400 block uppercase">Total Guests</span>
                    <span class="text-lg font-black text-slate-800 block mt-1"><?= $total_guests ?></span>
                </div>
                <div class="p-3 rounded-2xl bg-slate-50 border border-slate-100">
                    <span class="text-[8px] font-bold text-slate-400 block uppercase">Invitations Sent</span>
                    <span class="text-lg font-black text-slate-800 block mt-1"><?= $sent_count ?></span>
                </div>
                <div class="p-3 rounded-2xl bg-slate-50 border border-slate-100">
                    <span class="text-[8px] font-bold text-slate-400 block uppercase">Not Sent</span>
                    <span class="text-lg font-black text-slate-800 block mt-1"><?= $not_sent_count ?></span>
                </div>
                <div class="p-3 rounded-2xl bg-amber-50/50 border border-amber-100">
                    <span class="text-[8px] font-bold text-amber-700 block uppercase">Need Follow Up</span>
                    <span class="text-lg font-black text-amber-600 block mt-1"><?= $need_follow_up ?></span>
                </div>
            </div>

            <!-- RSVP breakdown metrics -->
            <div class="space-y-3 pt-3 border-t border-slate-50 text-xs">
                <div class="flex justify-between font-bold text-slate-700 text-[10px] uppercase tracking-wider mb-1">
                    <span>RSVP Response Rate</span>
                    <span class="font-mono"><?= number_format($rsvp_percent, 1) ?>%</span>
                </div>
                <!-- Progress bar -->
                <div class="w-full bg-slate-100 h-2.5 rounded-full overflow-hidden">
                    <div class="bg-[#D4A28C] h-full rounded-full transition-all duration-300" style="width: <?= $rsvp_percent ?>%"></div>
                </div>

                <div class="grid grid-cols-3 gap-2 text-xxs font-bold text-slate-500 pt-2">
                    <div class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded bg-emerald-500 inline-block"></span>
                        <span>Confirmed Attending: <?= $confirmed ?></span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded bg-rose-500 inline-block"></span>
                        <span>Declined RSVP: <?= $declined ?></span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded bg-amber-500 inline-block"></span>
                        <span>Pending Reply: <?= $pending ?></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Timeline check list progress -->
        <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm space-y-4">
            <h3 class="font-black text-slate-800 text-sm border-b border-slate-50 pb-2.5">
                <i class="fa-solid fa-list-check text-[#D4A28C]"></i> Timeline Insights
            </h3>

            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 text-center text-xs">
                <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-100">
                    <span class="text-[8px] font-bold text-slate-400 block uppercase">Completed Tasks</span>
                    <span class="text-xl font-black text-emerald-600 block mt-1"><?= $timeline['completed'] ?></span>
                </div>
                <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-100">
                    <span class="text-[8px] font-bold text-slate-400 block uppercase">Remaining Tasks</span>
                    <span class="text-xl font-black text-slate-800 block mt-1"><?= $timeline['remaining'] ?></span>
                </div>
                <div class="p-3.5 rounded-2xl bg-rose-50/50 border border-rose-100">
                    <span class="text-[8px] font-bold text-rose-500 block uppercase">Overdue Tasks</span>
                    <span class="text-xl font-black text-rose-600 block mt-1"><?= $timeline['overdue'] ?></span>
                </div>
                <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-100">
                    <span class="text-[8px] font-bold text-slate-400 block uppercase">Due Today</span>
                    <span class="text-xl font-black text-slate-800 block mt-1"><?= $timeline['due_today'] ?></span>
                </div>
                <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-100">
                    <span class="text-[8px] font-bold text-slate-400 block uppercase">Due This Week</span>
                    <span class="text-xl font-black text-slate-850 block mt-1"><?= $timeline['due_this_week'] ?></span>
                </div>
                <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-100">
                    <span class="text-[8px] font-bold text-slate-400 block uppercase">Total Setup Tasks</span>
                    <span class="text-xl font-black text-slate-700 block mt-1"><?= $timeline['total'] ?></span>
                </div>
            </div>

            <!-- Task completion progress bar -->
            <div class="space-y-1.5 pt-3 border-t border-slate-50 text-xs">
                <?php 
                $tlPercent = $timeline['total'] > 0 ? ($timeline['completed'] / $timeline['total']) * 100 : 0.0;
                ?>
                <div class="flex justify-between font-bold text-slate-700 text-[10px] uppercase tracking-wider mb-1">
                    <span>Task Checklist Completion</span>
                    <span class="font-mono"><?= number_format($tlPercent, 1) ?>%</span>
                </div>
                <div class="w-full bg-slate-100 h-2.5 rounded-full overflow-hidden">
                    <div class="bg-[#D4A28C] h-full rounded-full transition-all duration-300" style="width: <?= $tlPercent ?>%"></div>
                </div>
            </div>
        </div>

    </div>

    <!-- ── SECTION 5: VENDOR INSIGHTS ── -->
    <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm space-y-4">
        <h3 class="font-black text-slate-800 text-sm border-b border-slate-50 pb-2.5">
            <i class="fa-solid fa-store text-[#D4A28C]"></i> Vendor Supporting Insights
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-5 gap-4 text-xs">
            <div class="p-4 rounded-2xl bg-slate-50 border border-slate-100">
                <span class="text-[8px] font-bold text-slate-400 block uppercase">Total Vendors Registry</span>
                <span class="text-base font-black text-slate-800 block mt-1"><?= $vendors_count ?> Vendors</span>
            </div>

            <div class="p-4 rounded-2xl bg-slate-50 border border-slate-100">
                <span class="text-[8px] font-bold text-slate-400 block uppercase">Booked / Assigned</span>
                <span class="text-base font-black text-emerald-600 block mt-1"><?= $assigned_vendors ?> Booked</span>
            </div>

            <div class="p-4 rounded-2xl bg-slate-50 border border-slate-100">
                <span class="text-[8px] font-bold text-slate-400 block uppercase">Unassigned Categories</span>
                <span class="text-base font-black text-amber-600 block mt-1"><?= $unassigned_cats ?> Unassigned</span>
            </div>

            <div class="p-4 rounded-2xl bg-slate-50 border border-slate-100">
                <span class="text-[8px] font-bold text-slate-400 block uppercase">Upcoming Installments</span>
                <span class="text-base font-black text-slate-800 block mt-1"><?= $upcoming_payments_count ?> Dues</span>
            </div>

            <div class="p-4 rounded-2xl bg-slate-50 border border-slate-100">
                <span class="text-[8px] font-bold text-slate-400 block uppercase">Largest Vendor Contract</span>
                <span class="text-base font-black text-slate-800 block mt-1 truncate">
                    <?= $largest_vendor_expense ? format_money((float)$largest_vendor_expense['contract_value'], $currency) : '—' ?>
                </span>
            </div>
        </div>
    </div>

    <!-- ── SECTION 7 & 8: ACTIVITIES ────────────────────────────────────── -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        
        <!-- Recent Activities Feed (Latest 10) -->
        <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm space-y-4">
            <h3 class="font-black text-slate-800 text-sm border-b border-slate-50 pb-2.5">
                <i class="fa-solid fa-list-timeline text-[#D4A28C]"></i> Recent Activities History (Latest 10)
            </h3>
            
            <?php if (empty($activities)): ?>
                <div class="text-center py-10 text-slate-400 text-xs">
                    No recent updates recorded.
                </div>
            <?php else: ?>
                <div class="space-y-4 max-h-96 overflow-y-auto pr-1">
                    <?php foreach ($activities as $act): ?>
                        <div class="flex items-start gap-3 text-xs leading-relaxed">
                            <span class="w-8 h-8 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center text-xs flex-shrink-0 mt-0.5">
                                <i class="<?= $act['icon'] ?>"></i>
                            </span>
                            <div>
                                <span class="font-semibold text-slate-700 block"><?= $act['text'] ?></span>
                                <span class="text-[9px] text-slate-400 block mt-0.5"><?= date('d M Y, H:i', strtotime($act['date'])) ?></span>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>

        <!-- Upcoming Activities (due tasks, payments, rsvp deadlines) -->
        <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm space-y-4">
            <h3 class="font-black text-slate-800 text-sm border-b border-slate-50 pb-2.5">
                <i class="fa-solid fa-calendar-week text-[#D4A28C]"></i> Upcoming Schedule Deadlines
            </h3>

            <?php if (empty($upcoming_activities)): ?>
                <div class="text-center py-10 text-slate-400 text-xs">
                    No upcoming deadline schedules defined.
                </div>
            <?php else: ?>
                <div class="space-y-3 max-h-96 overflow-y-auto pr-1">
                    <?php foreach ($upcoming_activities as $up): ?>
                        <div class="p-3 rounded-xl border border-slate-100 bg-slate-50 text-xs flex justify-between items-center">
                            <div class="flex items-center gap-2.5">
                                <span class="w-8 h-8 rounded-lg bg-white border border-slate-100 flex items-center justify-center text-sm flex-shrink-0">
                                    <i class="<?= $up['icon'] ?>"></i>
                                </span>
                                <div>
                                    <span class="font-bold text-slate-700 block"><?= escape_html($up['title']) ?></span>
                                    <span class="text-[9px] text-slate-400 uppercase font-extrabold mt-0.5 block"><?= $up['type'] ?></span>
                                </div>
                            </div>
                            <span class="badge badge-neutral text-[9px] whitespace-nowrap">
                                Due: <?= date('d M Y', strtotime($up['date'])) ?>
                            </span>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>

    </div>

</div>
