<?php

/**
 * Modern Couple Portal Layout (RC-005)
 *
 * Layout Architecture:
 * - Desktop: CSS flexbox row — sidebar is a normal flex child (no fixed positioning)
 * - Mobile: sidebar becomes a fixed overlay drawer controlled by Alpine.js
 */

$flash = $flash ?? [];
$title = isset($title) && is_string($title) ? $title . ' • INVEETAIRE' : 'INVEETAIRE';

// Fetch current user details
$db = \App\Core\Database::getConnection();
$stmt = $db->prepare('SELECT username, display_name, r.name AS role_title 
                       FROM users u 
                       JOIN roles r ON r.id = u.role_id 
                      WHERE u.id = ?');
$stmt->execute([$_SESSION['auth_user_id'] ?? 0]);
$userObj = $stmt->fetch();
$displayName = $userObj ? ($userObj['display_name'] ?: $userObj['username']) : 'User';
$roleName = $userObj ? $userObj['role_title'] : 'Couple';
$workspaceName = $_SESSION['active_workspace_name'] ?? 'My Wedding';
$currentUri = $_SERVER['REQUEST_URI'] ?? '';
$isOperationActive = (strpos($currentUri, '/operation/') !== false);
$isEngagementActive = (strpos($currentUri, '/engagement/') !== false);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= escape_html($title) ?></title>
    <meta name="robots" content="noindex, nofollow">
    <link rel="stylesheet" href="<?= asset('/assets/css/all.min.css') ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/app.css') ?>?v=<?= time() ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/design_system.css') ?>?v=<?= time() ?>">
    <link rel="apple-touch-icon" sizes="180x180" href="<?= asset('/assets/branding/favicon/apple-touch-icon.png') ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= asset('/assets/branding/favicon/favicon-32x32.png') ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= asset('/assets/branding/favicon/favicon-16x16.png') ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= asset('/assets/branding/favicon/light-bg/favicon-32x32.png') ?>" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= asset('/assets/branding/favicon/light-bg/favicon-16x16.png') ?>" media="(prefers-color-scheme: dark)">
    <link rel="manifest" href="<?= asset('/assets/branding/favicon/site.webmanifest') ?>">
    <style>
        /* ── Couple Portal Layout Shell ── */
        html, body { height: 100%; margin: 0; }

        .portal-shell {
            display: flex;
            height: 100vh;
            overflow: hidden;
            background-color: #FAF8F3; /* DS001: Ivory brand background */
            font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
            color: #232323; /* DS001: Charcoal */
        }

        /* ── Sidebar: always visible on desktop as a flex child ── */
        .portal-sidebar {
            width: 256px;
            min-width: 256px;
            background-color: #232323; /* DS001: Charcoal brand sidebar */
            border-right: 1px solid #1a1a1a;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            overflow-y: auto;
            flex-shrink: 0;
            z-index: 10;
        }

        /* ── Main content column ── */
        .portal-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
        }

        /* ── Top navigation bar ── */
        .portal-topbar {
            height: 64px;
            min-height: 64px;
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5rem;
            z-index: 20;
        }

        /* ── Scrollable content area ── */
        .portal-content {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
            background-color: #FAF8F3; /* DS001: Ivory */
        }

        .sidebar-nav-link {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.8125rem;
            font-weight: 500;
            text-decoration: none;
            transition: background-color 0.15s, color 0.15s;
            border-left: 3px solid transparent;
            color: #cbd5e1;
        }
        .sidebar-nav-link:hover {
            background-color: rgba(255, 255, 255, 0.06);
            color: #ffffff;
        }
        .sidebar-nav-link.active {
            background-color: rgba(212, 162, 140, 0.14); /* DS001: Rose Gold tint */
            color: #ffffff;
            border-left-color: #D4A28C; /* DS001: Rose Gold active indicator */
        }
        .sidebar-nav-link.disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }

        /* ── Sidebar footer ── */
        .sidebar-footer-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-decoration: none;
            color: #94a3b8;
            transition: background-color 0.15s, color 0.15s;
        }
        .sidebar-footer-link:hover { background-color: rgba(255,255,255,0.06); color: #ffffff; }
        .sidebar-footer-btn {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            width: 100%;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            background: none;
            border: none;
            color: #f87171;
            cursor: pointer;
            text-align: left;
            transition: background-color 0.15s;
        }
        .sidebar-footer-btn:hover { background-color: rgba(239,68,68,0.1); }

        /* ── Profile dropdown ── */
        .profile-dropdown {
            position: absolute;
            right: 0;
            top: calc(100% + 0.5rem);
            width: 12rem;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 0.75rem;
            box-shadow: 0 10px 25px rgba(0,0,0,0.12);
            padding: 0.5rem 0;
            z-index: 50;
        }
        .profile-dropdown a {
            display: block;
            padding: 0.5rem 1rem;
            font-size: 0.75rem;
            color: #374151;
            text-decoration: none;
            transition: background-color 0.1s;
        }
        .profile-dropdown a:hover { background-color: #f8fafc; color: #111827; }

        /* ── Mobile: sidebar becomes fixed overlay ── */
        @media (max-width: 1023px) {
            .portal-sidebar {
                position: fixed;
                top: 0; left: 0;
                height: 100%;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
                z-index: 50;
            }
            .portal-sidebar.mobile-open {
                transform: translateX(0);
            }
            .sidebar-overlay { display: block; }
        }
        @media (min-width: 1024px) {
            .sidebar-overlay { display: none !important; }
            .mobile-hamburger { display: none; }
        }

        /* ── Animations ── */
        .fade-in { animation: fadeIn 0.2s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
    </style>
</head>
<body>

<?php if (\App\Core\Session::get('super_admin_workspace_mode') === true): ?>
    <div style="background-color:#f59e0b; color:#ffffff; font-size:0.75rem; font-weight:700; padding:0.625rem 1rem; display:flex; align-items:center; justify-content:between; z-index:9999; border-bottom:1px solid #d97706; position:relative; width:100%;">
        <div style="display:flex; align-items:center; gap:0.375rem;">
            <i class="fa-solid fa-triangle-exclamation"></i>
            Viewing Workspace: <strong><?= escape_html($workspaceName) ?></strong> | Mode: <strong>Super Admin</strong>
        </div>
        <a href="<?= url('/app/admin/dashboard') ?>" style="background-color:#d97706; border-radius:0.25rem; color:#ffffff; font-weight:700; padding:0.25rem 0.625rem; font-size:0.625rem; text-decoration:none; display:flex; align-items:center; gap:0.25rem; margin-left:auto;">
            <i class="fa-solid fa-arrow-left"></i> Return to Admin
        </a>
    </div>
<?php endif; ?>

    <div class="portal-shell" x-data="{ mobileOpen: false, profileOpen: false, logoutModalOpen: false }">

        <!-- Mobile sidebar overlay -->
        <div class="sidebar-overlay fixed inset-0 bg-slate-900/80 backdrop-blur-sm z-40"
             style="display:none"
             x-show="mobileOpen"
             x-transition:enter="transition-opacity ease-linear duration-200"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-linear duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             @click="mobileOpen = false">
        </div>

        <!-- ── Sidebar ── -->
        <aside class="portal-sidebar" :class="mobileOpen ? 'mobile-open' : ''" id="couple-sidebar">
            
            <div>
                <div style="height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; border-bottom:1px solid #1a1a1a;">
                    <img src="<?= asset('/assets/branding/logo/Primary-Logo-Dark-TransparentBG.png') ?>" alt="INVEETAIRE Logo" style="height:76px; width:auto; object-fit:contain;">
                    <button @click="mobileOpen = false" class="mobile-hamburger" style="background:none; border:none; cursor:pointer; color:#9E9690; font-size:1rem;">
                        ✕
                    </button>
                </div>

                <!-- Workspace badge -->
                <div style="padding:1rem 1.5rem; border-bottom:1px solid #1a1a1a; background:rgba(0,0,0,0.20);"><!-- DS001: warm charcoal -->
                    <span style="display:block; font-size:0.625rem; text-transform:uppercase; letter-spacing:0.1em; color:#6E6860; font-weight:700;">Workspace</span>
                    <span style="display:block; font-size:0.875rem; font-weight:600; color:#e8ddd0; margin-top:0.125rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
                        <?= escape_html($workspaceName) ?>
                    </span>
                </div>

                <!-- Nav Menu Links -->
                <nav style="padding:1.5rem 1rem; display:flex; flex-direction:column; gap:0.375rem;" role="navigation">
                    <a href="<?= url('/app/couple/dashboard') ?>" class="sidebar-nav-link <?= (strpos($currentUri, '/app/couple/dashboard') !== false) ? 'active' : '' ?>">
                        <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                            <i class="fa-solid fa-gauge-high text-inherit"></i>
                        </div>
                        <span>Dashboard</span>
                    </a>
                    
                    <!-- Invitation parent menu with submenu items -->
                    <div x-data="{ expanded: <?= (strpos($currentUri, '/app/couple/invitation') !== false || strpos($currentUri, '/app/couple/messaging') !== false || strpos($currentUri, '/app/couple/media/') !== false) ? 'true' : 'false' ?> }">
                        <button @click="expanded = !expanded" class="sidebar-nav-link w-full text-left flex justify-between items-center <?= (strpos($currentUri, '/app/couple/invitation') !== false || strpos($currentUri, '/app/couple/messaging') !== false || strpos($currentUri, '/app/couple/media/') !== false) ? 'active' : '' ?>">
                            <div class="flex items-center gap-3">
                                <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                                    <i class="fa-solid fa-envelope-open-text text-inherit"></i>
                                </div>
                                <span>Invitation</span>
                            </div>
                            <i class="fa-solid fa-chevron-right text-slate-400 transition-transform duration-200 text-[10px]" :class="expanded ? 'rotate-90' : ''"></i>
                        </button>
                        <div x-show="expanded" 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             x-transition:leave="transition ease-in duration-100"
                             x-transition:leave-start="opacity-100 translate-y-0"
                             x-transition:leave-end="opacity-0 -translate-y-1"
                             style="display: none; padding-left: 1.5rem; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem;" class="flex">
                            <a href="<?= url('/app/couple/invitation/edit') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/app/couple/invitation/edit') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>General</span>
                            </a>
                            <a href="<?= url('/app/couple/invitation/gift') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/app/couple/invitation/gift') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>Wedding Gift</span>
                            </a>
                            <a href="<?= url('/app/couple/invitation/media') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/app/couple/invitation/media') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>Media</span>
                            </a>
                            <a href="<?= url('/app/couple/invitation/design') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/app/couple/invitation/design') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>Design</span>
                            </a>
                            <a href="<?= url('/app/couple/messaging/template') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/app/couple/messaging/template') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>Message Template</span>
                            </a>
                        </div>
                    </div>

                    <!-- Guests parent menu with submenu items -->
                    <div x-data="{ expanded: <?= (strpos($currentUri, '/app/couple/guests') !== false) ? 'true' : 'false' ?> }">
                        <button @click="expanded = !expanded" class="sidebar-nav-link w-full text-left flex justify-between items-center <?= (strpos($currentUri, '/app/couple/guests') !== false) ? 'active' : '' ?>">
                            <div class="flex items-center gap-3">
                                <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                                    <i class="fa-solid fa-users text-inherit"></i>
                                </div>
                                <span>Guests</span>
                            </div>
                            <i class="fa-solid fa-chevron-right text-slate-400 transition-transform duration-200 text-[10px]" :class="expanded ? 'rotate-90' : ''"></i>
                        </button>
                        <div x-show="expanded" 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             x-transition:leave="transition ease-in duration-100"
                             x-transition:leave-start="opacity-100 translate-y-0"
                             x-transition:leave-end="opacity-0 -translate-y-1"
                             style="display: none; padding-left: 1.5rem; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem;" class="flex">
                            <a href="<?= url('/app/couple/guests') ?>" class="sidebar-nav-link py-1.5 text-xs <?= ($currentUri === '/app/couple/guests' || (strpos($currentUri, '/guests/import') === false && strpos($currentUri, '/guests/create') === false && strpos($currentUri, '/guests/edit') === false && strpos($currentUri, '/app/couple/guests') !== false)) ? 'active' : '' ?>">
                                <span>•</span> <span>Guest List</span>
                            </a>
                            <a href="<?= url('/app/couple/guests/create') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/app/couple/guests/create') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>Add Guest</span>
                            </a>
                            <a href="<?= url('/app/couple/guests/import') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/app/couple/guests/import') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>Import Excel</span>
                            </a>
                        </div>
                    </div>

                    <!-- Guest Engagement Menu (RC-014) -->
                    <div x-data="{ expanded: <?= $isEngagementActive ? 'true' : 'false' ?> }">
                        <button @click="expanded = !expanded" class="sidebar-nav-link w-full text-left flex justify-between items-center <?= $isEngagementActive ? 'active' : '' ?>">
                            <div class="flex items-center gap-3">
                                <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                                    <i class="fa-solid fa-comments text-inherit"></i>
                                </div>
                                <span>Guest Engagement</span>
                            </div>
                            <i class="fa-solid fa-chevron-right text-slate-400 transition-transform duration-200 text-[10px]" :class="expanded ? 'rotate-90' : ''"></i>
                        </button>
                        <div x-show="expanded" 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             x-transition:leave="transition ease-in duration-100"
                             x-transition:leave-start="opacity-100 translate-y-0"
                             x-transition:leave-end="opacity-0 -translate-y-1"
                             style="display: none; padding-left: 1.5rem; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem;" class="flex">
                            <a href="<?= url('/app/couple/engagement/rsvp') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/engagement/rsvp') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>RSVP Center</span>
                            </a>
                            <a href="<?= url('/app/couple/engagement/wishes') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/engagement/wishes') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>Guest Wishes</span>
                            </a>
                            <a href="<?= url('/app/couple/engagement/whatsapp-queue') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/engagement/whatsapp-queue') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>WhatsApp Queue</span>
                            </a>
                        </div>
                    </div>
                    
                    <!-- Planning Menu (RC-017) -->
                    <?php 
                    $isPlanningActive = (strpos($currentUri, '/budget') !== false || strpos($currentUri, '/timeline') !== false || strpos($currentUri, '/insights') !== false); 
                    ?>
                    <div x-data="{ expanded: <?= $isPlanningActive ? 'true' : 'false' ?> }">
                        <button @click="expanded = !expanded" class="sidebar-nav-link w-full text-left flex justify-between items-center <?= $isPlanningActive ? 'active' : '' ?>">
                            <div class="flex items-center gap-3">
                                <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                                    <i class="fa-solid fa-wallet text-inherit"></i>
                                </div>
                                <span>Planning</span>
                            </div>
                            <i class="fa-solid fa-chevron-right text-slate-400 transition-transform duration-200 text-[10px]" :class="expanded ? 'rotate-90' : ''"></i>
                        </button>
                        <div x-show="expanded" 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             x-transition:leave="transition ease-in duration-100"
                             x-transition:leave-start="opacity-100 translate-y-0"
                             x-transition:leave-end="opacity-0 -translate-y-1"
                             style="display: none; padding-left: 1.5rem; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem;" class="flex">
                            <a href="<?= url('/app/couple/budget') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/app/couple/budget') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>Budget Planner</span>
                            </a>
                            <a href="<?= url('/app/couple/timeline') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/app/couple/timeline') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>Timeline Planner</span>
                            </a>
                            <a href="<?= url('/app/couple/insights') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/app/couple/insights') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>Wedding Insights</span>
                            </a>
                        </div>
                    </div>

                    <!-- Wedding Day Menu (RC-013) -->
                    <?php
                    $workspaceId = (int) ($_SESSION['active_workspace_id'] ?? 0);
                    $sidebarEvents = [];
                    if ($workspaceId > 0) {
                        $opModel = new \App\Modules\Operation\OperationModel();
                        $opModel->ensurePilotEventsExist($workspaceId);
                        $opModel->migrateExistingGuestsEvents($workspaceId);
                        
                        $db = \App\Core\Database::getConnection();
                        $stmt = $db->prepare('SELECT id, event_name FROM wedding_events WHERE workspace_id = :workspace_id AND is_deleted = 0 ORDER BY sort_order ASC');
                        $stmt->execute(['workspace_id' => $workspaceId]);
                        $sidebarEvents = $stmt->fetchAll(\PDO::FETCH_ASSOC);
                    }
                    $isOperationActive = (strpos($currentUri, '/operation/') !== false);
                    ?>
                    <div x-data="{ expanded: <?= $isOperationActive ? 'true' : 'false' ?> }">
                        <button @click="expanded = !expanded" class="sidebar-nav-link w-full text-left flex justify-between items-center <?= $isOperationActive ? 'active' : '' ?>">
                            <div class="flex items-center gap-3">
                                <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                                    <i class="fa-solid fa-calendar-check text-inherit"></i>
                                </div>
                                <span>Wedding Day</span>
                            </div>
                            <i class="fa-solid fa-chevron-right text-slate-400 transition-transform duration-200 text-[10px]" :class="expanded ? 'rotate-90' : ''"></i>
                        </button>
                        <div x-show="expanded" 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             x-transition:leave="transition ease-in duration-100"
                             x-transition:leave-start="opacity-100 translate-y-0"
                             x-transition:leave-end="opacity-0 -translate-y-1"
                             style="display: none; padding-left: 1.5rem; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem;" class="flex">
                            <?php foreach ($sidebarEvents as $se):
                                $role = \App\Core\Session::get('role_snapshot') === 'crew' ? 'crew' : 'couple';
                                $isActive = (strpos($currentUri, "/operation/event/{$se['id']}/") !== false || strpos($currentUri, "/operation/event/{$se['id']}?") !== false || substr($currentUri, -strlen("/operation/event/{$se['id']}")) === "/operation/event/{$se['id']}");
                            ?>
                                <a href="<?= url("/app/{$role}/operation/event/{$se['id']}/checkin") ?>" class="sidebar-nav-link py-1.5 text-xs <?= $isActive ? 'active' : '' ?>">
                                    <span>•</span> <span><?= escape_html($se['event_name']) ?></span>
                                </a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    
                    <!-- Wedding Report Link (RC-022) -->
                    <?php
                    $dbReport = \App\Core\Database::getConnection();
                    $stmtReportW = $dbReport->prepare('SELECT wedding_date, workspace_status FROM workspaces WHERE id = :id LIMIT 1');
                    $stmtReportW->execute(['id' => $workspaceId]);
                    $wReportData = $stmtReportW->fetch(\PDO::FETCH_ASSOC);
                    $weddingDatePassed = ($wReportData && strtotime($wReportData['wedding_date']) <= strtotime(date('Y-m-d')));
                    $isReportCompleted = ($wReportData && $wReportData['workspace_status'] === 'post_event');
                    if ($weddingDatePassed || $isReportCompleted):
                    ?>
                        <a href="<?= url('/app/couple/report') ?>" class="sidebar-nav-link <?= (strpos($currentUri, '/app/couple/report') !== false) ? 'active' : '' ?>">
                            <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                                <i class="fa-solid fa-file-invoice text-inherit"></i>
                            </div>
                            <span>Wedding Report</span>
                        </a>
                    <?php endif; ?>

                    <a href="<?= url('/app/couple/users') ?>" class="sidebar-nav-link <?= (strpos($currentUri, '/app/couple/users') !== false) ? 'active' : '' ?>">
                        <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                            <i class="fa-solid fa-user-group text-inherit"></i>
                        </div>
                        <span>Workspace Users</span>
                    </a>

                    <div x-data="{ expanded: <?= (strpos($currentUri, '/app/couple/settings') !== false || strpos($currentUri, '/budget/settings') !== false) ? 'true' : 'false' ?> }">
                        <button @click="expanded = !expanded" class="sidebar-nav-link w-full text-left flex justify-between items-center <?= (strpos($currentUri, '/app/couple/settings') !== false || strpos($currentUri, '/budget/settings') !== false) ? 'active' : '' ?>">
                            <div class="flex items-center gap-3">
                                <div class="w-5 h-5 flex items-center justify-center flex-shrink-0 text-slate-400">
                                    <i class="fa-solid fa-gear text-inherit"></i>
                                </div>
                                <span>Settings</span>
                            </div>
                            <i class="fa-solid fa-chevron-right text-slate-400 transition-transform duration-200 text-[10px]" :class="expanded ? 'rotate-90' : ''"></i>
                        </button>
                        <div x-show="expanded" 
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 -translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             x-transition:leave="transition ease-in duration-100"
                             x-transition:leave-start="opacity-100 translate-y-0"
                             x-transition:leave-end="opacity-0 -translate-y-1"
                             style="display: none; padding-left: 1.5rem; flex-direction: column; gap: 0.25rem; margin-top: 0.25rem;" class="flex">
                            <a href="<?= url('/app/couple/budget/settings') ?>" class="sidebar-nav-link py-1.5 text-xs <?= (strpos($currentUri, '/budget/settings') !== false) ? 'active' : '' ?>">
                                <span>•</span> <span>Planning Settings</span>
                            </a>
                            <a href="<?= url('/app/couple/settings') ?>" class="sidebar-nav-link py-1.5 text-xs <?= ($currentUri === '/app/couple/settings') ? 'active' : '' ?>">
                                <span>•</span> <span>Change Password</span>
                            </a>
                        </div>
                    </div>
                </nav>
            </div>

            <!-- Footer / Logout area -->
            <div style="padding:1rem; border-top:1px solid #1a1a1a; background:rgba(0,0,0,0.15); display:flex; flex-direction:column; gap:0.5rem;">
                <a href="<?= url('/app/couple/settings') ?>" class="sidebar-footer-link flex items-center gap-2">
                    <i class="fa-solid fa-key"></i> <span>Change Password</span>
                </a>
                <button type="button" @click="logoutModalOpen = true" class="sidebar-footer-btn w-full text-left flex items-center gap-2">
                    <i class="fa-solid fa-right-from-bracket"></i> <span>Logout</span>
                </button>
            </div>

        </aside>

        <!-- ── Main Content Area ── -->
        <div class="portal-main">
            
            <!-- Top Navigation Bar -->
            <header class="portal-topbar" role="banner">
                <!-- Hamburger for mobile -->
                <button @click="mobileOpen = true" class="mobile-hamburger" style="background:none; border:none; cursor:pointer; font-size:1.25rem; color:#64748b; padding:0.5rem; border-radius:0.5rem;">
                    <i class="fa-solid fa-bars"></i>
                </button>
                
                <!-- Workspace breadcrumb -->
                <div class="truncate select-none text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500 flex items-center gap-1 sm:gap-2 min-w-0 mr-4">
                    <span class="truncate max-w-[85px] sm:max-w-[150px]"><?= escape_html($workspaceName) ?></span>
                    <span class="text-slate-300">/</span>
                    <span class="font-semibold truncate" style="color:#D4A28C;"><?= escape_html($roleName) ?> Portal</span><!-- DS001: Rose Gold -->
                </div>

                <!-- Right: Profile dropdown -->
                <div style="position:relative;" class="flex-shrink-0">
                    <button @click="profileOpen = !profileOpen"
                            class="flex items-center gap-2 sm:gap-3 focus:outline-none"
                            style="background:none; border:none; cursor:pointer;">
                        <div class="hidden sm:block text-right">
                            <div style="font-size:0.75rem; font-weight:700; color:#1e293b; line-height:1.2;"><?= escape_html($displayName) ?></div>
                            <div style="font-size:0.625rem; color:#94a3b8; font-weight:600; margin-top:1px;"><?= escape_html($roleName) ?></div>
                        </div>
                        <div style="width:2rem; height:2rem; border-radius:50%; background-color:#232323; color:#ffffff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.875rem; border: 1px solid rgba(212,162,140,0.4);"><!-- DS001: Charcoal avatar -->
                            <?= strtoupper(substr($displayName, 0, 1)) ?>
                        </div>
                    </button>

                    <!-- Dropdown -->
                    <div class="profile-dropdown" x-show="profileOpen" @click.away="profileOpen = false"
                         x-transition:enter="transition ease-out duration-150"
                         x-transition:enter-start="opacity-0 translate-y-1"
                         x-transition:enter-end="opacity-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-100"
                         x-transition:leave-start="opacity-100"
                         x-transition:leave-end="opacity-0"
                         style="display:none;">
                        <div style="padding:0.5rem 1rem; border-bottom:1px solid #f1f5f9; margin-bottom:0.25rem;">
                            <p style="font-size:0.625rem; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:0.075em; margin:0;">Signed in as</p>
                            <p style="font-size:0.75rem; font-weight:600; color:#1e293b; margin:0.125rem 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"><?= escape_html($displayName) ?></p>
                        </div>
                        <a href="<?= url('/app/couple/settings') ?>">Change Password</a>
                        <hr style="margin:0.25rem 0; border:none; border-top:1px solid #f1f5f9;">
                        <button type="button" @click="logoutModalOpen = true; profileOpen = false" style="display:block; width:100%; padding:0.5rem 1rem; font-size:0.75rem; color:#dc2626; font-weight:600; background:none; border:none; cursor:pointer; text-align:left;" onmouseover="this.style.backgroundColor='#fef2f2'" onmouseout="this.style.backgroundColor='transparent'">
                            Logout
                        </button>
                    </div>
                </div>
            </header>

            <!-- Scrollable page contents -->
            <main class="portal-content" id="main-content" role="main">
                <?php include ROOT_PATH . '/app/views/components/flash.php'; ?>
                <div class="fade-in">
                    <?= $content ?>
                </div>
            </main>

        <!-- Standardized Logout Confirmation Modal (RC-015) -->
        <div 
            class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4" 
            style="display: none;" 
            x-show="logoutModalOpen"
            @keydown.escape.window="logoutModalOpen = false"
            @click.self="logoutModalOpen = false"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            role="dialog"
            aria-modal="true"
            aria-labelledby="modal-title-logout"
        >
            <div class="bg-white rounded-2xl max-w-sm w-full p-6 shadow-2xl space-y-6">
                <div class="text-center space-y-2">
                    <span class="text-4xl block">👋</span>
                    <h3 id="modal-title-logout" class="text-sm font-bold text-slate-800">Confirm Logout</h3>
                    <p class="text-xs text-slate-500 leading-relaxed">Are you sure you want to end your current session and exit the workspace?</p>
                </div>
                
                <form action="<?= url('/logout') ?>" method="POST" class="flex gap-3 m-0">
                    <input type="hidden" name="_csrf" value="<?= escape_html(\App\Core\Csrf::getToken()) ?>">
                    <button type="button" @click="logoutModalOpen = false" class="btn btn-secondary flex-1 py-2 text-xs font-bold">
                        <i class="fa-solid fa-xmark mr-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary flex-1 py-2 text-xs font-bold text-white">
                        <i class="fa-solid fa-right-from-bracket mr-1"></i> Logout
                    </button>
                </form>
            </div>
        </div>

    </div>

    <!-- Alpine.js -->
    <script src="/assets/js/app.js" defer></script>

</body>
</html>
