<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= e($pageTitle ?? 'Dashboard') ?> - <?= e(appName()) ?></title>
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#0f172a">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"DM Sans"', 'system-ui', 'sans-serif'],
                        display: ['"Cal Sans"', '"DM Sans"', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,300..800&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'DM Sans', system-ui, sans-serif; }
        .sidebar-link.active { background: rgba(255,255,255,0.1); color: #fff; }
        .sidebar-link:hover { background: rgba(255,255,255,0.06); }
        .fade-in { animation: fadeIn 0.3s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        .card-hover { transition: all 0.2s; }
        .card-hover:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
        .toast { animation: slideIn 0.3s ease-out, fadeOut 0.3s ease-in 4.7s; }
        @keyframes slideIn { from { transform: translateX(100%); opacity:0; } to { transform: translateX(0); opacity:1; } }
        @keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
        [x-cloak] { display: none !important; }
    </style>
</head>
<body class="h-full bg-gray-50/80">

<div class="flex h-screen overflow-hidden" id="app">
    <!-- Sidebar -->
    <aside class="hidden lg:flex lg:flex-col lg:w-64 bg-slate-900 text-white" id="sidebar">
        <!-- Logo -->
        <div class="flex items-center gap-3 px-5 py-5 border-b border-white/10">
            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center font-bold text-sm">R</div>
            <span class="text-lg font-semibold tracking-tight"><?= e(appName()) ?></span>
        </div>
        
        <!-- Nav -->
        <nav class="flex-1 overflow-y-auto py-3 px-3 space-y-0.5">
            <div class="px-2 py-2 text-[10px] font-semibold uppercase tracking-widest text-slate-400">Overview</div>
            <?php
            $nav = [
                ['dashboard', 'Dashboard', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1h-2z"/>'],
                
                ['_section', 'Property Operations'],
                ['properties', 'Properties', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>'],
                ['units', 'Units', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>'],
                ['tenants', 'Tenants', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>'],
                ['owners', 'Owners', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>'],
                ['leases', 'Leases', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>'],
                
                ['_section', 'Financials'],
                ['payments', 'Payments', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>'],
                ['rent-collection', 'Rent Collection', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>'],
                
                ['_section', 'Operations'],
                ['maintenance', 'Maintenance', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>'],
                ['vendors', 'Vendors', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/>'],
                ['documents', 'Documents', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>'],
                ['communications', 'Messages', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>'],
                ['leads', 'Leads', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>'],
                
                ['_section', 'Intelligence'],
                ['reports', 'Reports', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>'],
                ['ai-center', 'AI Center', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>'],
                
                ['_section', 'Settings'],
                ['integrations', 'Integrations', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>'],
                ['users', 'Users & Roles', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>'],
                ['settings', 'Settings', '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>'],
            ];
            
            foreach ($nav as $item):
                if ($item[0] === '_section'):
            ?>
                <div class="px-2 pt-5 pb-2 text-[10px] font-semibold uppercase tracking-widest text-slate-400"><?= $item[1] ?></div>
            <?php else:
                $isActive = ($page ?? '') === $item[0];
            ?>
                <a href="?page=<?= $item[0] ?>" class="sidebar-link flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-slate-300 transition-all <?= $isActive ? 'active' : '' ?>">
                    <svg class="w-[18px] h-[18px] flex-shrink-0 <?= $isActive ? 'text-white' : 'text-slate-400' ?>" fill="none" viewBox="0 0 24 24" stroke="currentColor"><?= $item[2] ?></svg>
                    <?= $item[1] ?>
                </a>
            <?php endif; endforeach; ?>
        </nav>
        
        <!-- User -->
        <div class="p-3 border-t border-white/10">
            <a href="?page=profile" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/5 transition">
                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-xs font-semibold text-white">
                    <?= getInitials(($currentUser['first_name'] ?? '') . ' ' . ($currentUser['last_name'] ?? '')) ?>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium text-white truncate"><?= e(($currentUser['first_name'] ?? '') . ' ' . ($currentUser['last_name'] ?? '')) ?></div>
                    <div class="text-[11px] text-slate-400 truncate"><?= e($currentUser['role_name'] ?? '') ?></div>
                </div>
            </a>
        </div>
    </aside>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <!-- Top Bar -->
        <header class="bg-white border-b border-gray-200/80 px-4 lg:px-6 py-3 flex items-center justify-between flex-shrink-0">
            <!-- Mobile menu button -->
            <button onclick="document.getElementById('mobileSidebar').classList.toggle('hidden')" class="lg:hidden p-2 -ml-2 rounded-lg hover:bg-gray-100">
                <svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>
            
            <!-- Search -->
            <div class="hidden md:flex flex-1 max-w-lg">
                <div class="relative w-full">
                    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    <input type="text" placeholder="Search properties, tenants, units..." class="w-full pl-10 pr-4 py-2 text-sm border border-gray-200 rounded-xl bg-gray-50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 transition">
                </div>
            </div>
            
            <!-- Right side -->
            <div class="flex items-center gap-2">
                <!-- Notifications -->
                <button class="relative p-2 rounded-xl hover:bg-gray-100 transition" onclick="toggleNotifications()">
                    <svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                    <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" id="notifDot"></span>
                </button>
                
                <!-- Quick Add -->
                <div class="relative">
                    <button onclick="this.nextElementSibling.classList.toggle('hidden')" class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-white bg-slate-900 rounded-xl hover:bg-slate-800 transition">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                        <span class="hidden sm:inline">Quick Add</span>
                    </button>
                    <div class="hidden absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-xl shadow-lg py-1 z-50">
                        <a href="?page=properties&action=create" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">New Property</a>
                        <a href="?page=units&action=create" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">New Unit</a>
                        <a href="?page=tenants&action=create" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">New Tenant</a>
                        <a href="?page=leases&action=create" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">New Lease</a>
                        <a href="?page=payments&action=create" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Record Payment</a>
                        <a href="?page=maintenance&action=create" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Maintenance Request</a>
                    </div>
                </div>
                
                <!-- User menu -->
                <div class="relative">
                    <button onclick="this.nextElementSibling.classList.toggle('hidden')" class="flex items-center gap-2 pl-3 pr-2 py-1.5 rounded-xl hover:bg-gray-100 transition">
                        <div class="w-7 h-7 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-[11px] font-semibold text-white">
                            <?= getInitials(($currentUser['first_name'] ?? 'U') . ' ' . ($currentUser['last_name'] ?? '')) ?>
                        </div>
                        <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div class="hidden absolute right-0 mt-2 w-56 bg-white border border-gray-200 rounded-xl shadow-lg py-1 z-50">
                        <div class="px-4 py-2 border-b border-gray-100">
                            <div class="text-sm font-medium text-gray-900"><?= e(($currentUser['first_name'] ?? '') . ' ' . ($currentUser['last_name'] ?? '')) ?></div>
                            <div class="text-xs text-gray-500"><?= e($currentUser['email'] ?? '') ?></div>
                        </div>
                        <a href="?page=profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">My Profile</a>
                        <a href="?page=settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Settings</a>
                        <hr class="my-1 border-gray-100">
                        <a href="?page=logout" class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50">Sign Out</a>
                    </div>
                </div>
            </div>
        </header>
        
        <!-- Page Content -->
        <main class="flex-1 overflow-y-auto">
            <div class="fade-in">
                <?php
                // Flash messages
                if ($success = flash('success')): ?>
                    <div class="mx-4 lg:mx-6 mt-4">
                        <div class="flex items-center gap-3 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm">
                            <svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <?= e($success) ?>
                        </div>
                    </div>
                <?php endif; ?>
                
                <?php if ($error = flash('error')): ?>
                    <div class="mx-4 lg:mx-6 mt-4">
                        <div class="flex items-center gap-3 p-4 rounded-xl bg-red-50 border border-red-200 text-red-800 text-sm">
                            <svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <?= e($error) ?>
                        </div>
                    </div>
                <?php endif; ?>
                
                <?= $content ?? '' ?>
            </div>
        </main>
    </div>
</div>

<!-- Mobile Sidebar Overlay -->
<div id="mobileSidebar" class="hidden fixed inset-0 z-50 lg:hidden">
    <div class="absolute inset-0 bg-black/50" onclick="this.parentElement.classList.add('hidden')"></div>
    <aside class="relative w-64 h-full bg-slate-900 text-white overflow-y-auto">
        <!-- Same nav as desktop sidebar -->
        <div class="flex items-center gap-3 px-5 py-5 border-b border-white/10">
            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center font-bold text-sm">R</div>
            <span class="text-lg font-semibold"><?= e(appName()) ?></span>
            <button onclick="document.getElementById('mobileSidebar').classList.add('hidden')" class="ml-auto p-1 hover:bg-white/10 rounded">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <nav class="py-3 px-3 space-y-0.5">
            <?php foreach ($nav as $item):
                if ($item[0] === '_section'): ?>
                    <div class="px-2 pt-5 pb-2 text-[10px] font-semibold uppercase tracking-widest text-slate-400"><?= $item[1] ?></div>
                <?php else:
                    $isActive = ($page ?? '') === $item[0]; ?>
                    <a href="?page=<?= $item[0] ?>" class="sidebar-link flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-slate-300 transition-all <?= $isActive ? 'active' : '' ?>">
                        <svg class="w-[18px] h-[18px] flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><?= $item[2] ?></svg>
                        <?= $item[1] ?>
                    </a>
                <?php endif; endforeach; ?>
        </nav>
    </aside>
</div>

<script>
// Close dropdowns on outside click
document.addEventListener('click', function(e) {
    if (!e.target.closest('.relative')) {
        document.querySelectorAll('.relative > div.absolute').forEach(d => d.classList.add('hidden'));
    }
});

function toggleNotifications() {
    document.getElementById('notifDot')?.classList.add('hidden');
}

// Confirm deletes
document.querySelectorAll('[data-confirm]').forEach(el => {
    el.addEventListener('click', function(e) {
        if (!confirm(this.dataset.confirm || 'Are you sure?')) {
            e.preventDefault();
        }
    });
});
</script>

</body>
</html>
