<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $__env->yieldContent('title', 'Member Dashboard'); ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-[#FAF7F2] text-gray-900">
    <?php
        $member = auth()->user();
        $memberName = $member?->name ?? 'Kasun Perera';
        $memberInitials = collect(explode(' ', trim($memberName)))->map(fn($w) => strtoupper(substr($w, 0, 1)))->take(2)->implode('');
        $hasMembership = request()->boolean('membership', true);
        $membershipParam = ['membership' => $hasMembership ? 1 : 0];
    ?>

    <button id="mobileSidebarOpen" class="sm:hidden fixed top-4 left-4 z-40 p-2 rounded-lg shadow-lg bg-[#0d4a4a] text-white">
        <i data-lucide="menu" class="w-5 h-5"></i>
    </button>

    <div id="mobileSidebarOverlay" class="sm:hidden fixed inset-0 z-40 bg-black/50 hidden"></div>

    <aside id="memberSidebar" class="fixed top-0 left-0 h-full w-64 flex flex-col z-50 sm:z-30 transform -translate-x-full sm:translate-x-0 transition-transform duration-300 bg-[#0d4a4a] sm:flex">
        <div class="sm:hidden absolute top-4 right-4">
            <button id="mobileSidebarClose" class="p-1 rounded text-white/70 hover:text-white">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <div class="px-6 py-5 border-b border-[#0a3a3a]">
            <div class="flex items-center gap-2">
                <div class="w-7 h-7 rounded-lg flex items-center justify-center text-xs font-black bg-[#F5A623] text-[#0d4a4a]">SS</div>
                <span class="font-bold text-white text-lg tracking-tight">SaveSmart<span class="text-[#F5A623]">.lk</span></span>
            </div>
        </div>

        <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto text-sm">
            <a href="<?php echo e(route('member.dashboard', $membershipParam)); ?>" class="flex items-center gap-3 px-3 py-2.5 rounded-lg <?php echo e(request()->routeIs('member.dashboard') ? 'bg-[#F5A623]/20 text-[#F5A623] border-l-2 border-[#F5A623] font-medium' : 'text-teal-100 hover:bg-[#0a3a3a] hover:text-white'); ?>">
                <i data-lucide="house" class="w-4 h-4"></i><span>Dashboard</span>
            </a>
            <a href="<?php echo e(route('member.card', $membershipParam)); ?>" class="flex items-center gap-3 px-3 py-2.5 rounded-lg <?php echo e(request()->routeIs('member.card') ? 'bg-[#F5A623]/20 text-[#F5A623] border-l-2 border-[#F5A623] font-medium' : 'text-teal-100 hover:bg-[#0a3a3a] hover:text-white'); ?>"><i data-lucide="credit-card" class="w-4 h-4"></i><span>My Card</span></a>
            <a href="<?php echo e(route('member.offers', $membershipParam)); ?>" class="flex items-center gap-3 px-3 py-2.5 rounded-lg <?php echo e(request()->routeIs('member.offers') ? 'bg-[#F5A623]/20 text-[#F5A623] border-l-2 border-[#F5A623] font-medium' : 'text-teal-100 hover:bg-[#0a3a3a] hover:text-white'); ?>"><i data-lucide="tag" class="w-4 h-4"></i><span>Offers & Deals</span></a>
            <a href="<?php echo e(route('member.partners', $membershipParam)); ?>" class="flex items-center gap-3 px-3 py-2.5 rounded-lg <?php echo e(request()->routeIs('member.partners') ? 'bg-[#F5A623]/20 text-[#F5A623] border-l-2 border-[#F5A623] font-medium' : 'text-teal-100 hover:bg-[#0a3a3a] hover:text-white'); ?>"><i data-lucide="store" class="w-4 h-4"></i><span>Partners</span></a>
            <a href="<?php echo e(route('member.history', $membershipParam)); ?>" class="flex items-center gap-3 px-3 py-2.5 rounded-lg <?php echo e(request()->routeIs('member.history') ? 'bg-[#F5A623]/20 text-[#F5A623] border-l-2 border-[#F5A623] font-medium' : 'text-teal-100 hover:bg-[#0a3a3a] hover:text-white'); ?>"><i data-lucide="history" class="w-4 h-4"></i><span>Savings History</span></a>
            <a href="<?php echo e(route('member.profile', $membershipParam)); ?>" class="flex items-center gap-3 px-3 py-2.5 rounded-lg <?php echo e(request()->routeIs('member.profile') ? 'bg-[#F5A623]/20 text-[#F5A623] border-l-2 border-[#F5A623] font-medium' : 'text-teal-100 hover:bg-[#0a3a3a] hover:text-white'); ?>"><i data-lucide="user" class="w-4 h-4"></i><span>Profile</span></a>
        </nav>

        <div class="px-4 py-4 border-t border-[#0a3a3a]">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold bg-[#F5A623] text-[#0d4a4a]"><?php echo e($memberInitials); ?></div>
                <div class="min-w-0">
                    <p class="text-sm font-semibold truncate text-white"><?php echo e($memberName); ?></p>
                    <p class="text-xs truncate text-teal-200"><?php echo e($hasMembership ? 'Premium Member' : 'Free User'); ?></p>
                </div>
            </div>
            <form action="<?php echo e(route('logout')); ?>" method="post">
                <?php echo csrf_field(); ?>
                <button type="submit" class="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-teal-300 hover:text-red-300 hover:bg-[#0a3a3a]">
                    <i data-lucide="log-out" class="w-4 h-4"></i>
                    Sign Out
                </button>
            </form>
        </div>
    </aside>

    <main class="p-4 sm:ml-64">
        <div class="max-w-7xl mx-auto py-6 space-y-8">
            <?php echo $__env->yieldContent('content'); ?>
        </div>
    </main>

    <script src="https://unpkg.com/lucide@latest"></script>
    <script>
        if (window.lucide) window.lucide.createIcons();

        const sidebar = document.getElementById('memberSidebar');
        const overlay = document.getElementById('mobileSidebarOverlay');
        const openBtn = document.getElementById('mobileSidebarOpen');
        const closeBtn = document.getElementById('mobileSidebarClose');

        const openSidebar = () => {
            sidebar.classList.remove('-translate-x-full');
            overlay.classList.remove('hidden');
        };

        const closeSidebar = () => {
            if (window.innerWidth < 640) {
                sidebar.classList.add('-translate-x-full');
                overlay.classList.add('hidden');
            }
        };

        openBtn?.addEventListener('click', openSidebar);
        closeBtn?.addEventListener('click', closeSidebar);
        overlay?.addEventListener('click', closeSidebar);
    </script>
</body>
</html>
<?php /**PATH D:\New folder\resources\views/member/layouts/app.blade.php ENDPATH**/ ?>