@props(['user'])

@php
    $activePackage = $user?->activePackage();
@endphp

<input type="checkbox" id="app-drawer-toggle" class="peer sr-only">

<div class="sticky top-0 z-40 border-b border-line bg-bg-deep">
    <header class="mx-auto flex w-full max-w-lg items-center gap-2 px-4 py-3">
        <label for="app-drawer-toggle" class="-ml-2 flex h-11 w-11 cursor-pointer items-center justify-center rounded-full text-ink-muted hover:text-ink" aria-label="মেনু খুলুন">
            <x-icon name="menu" class="h-6 w-6"/>
        </label>

        <div class="ml-1 min-w-0 flex-1">
            <p class="truncate text-[13px] leading-snug text-ink-muted">আসসালামু আলাইকুম</p>
            <p class="truncate text-lg font-bold leading-tight">{{ $user->name }}</p>
        </div>

        <a href="{{ route('home') }}#notices" class="flex h-11 w-11 items-center justify-center rounded-full text-ink-muted transition-colors hover:text-ink" aria-label="নোটিশ দেখুন">
            <x-icon name="bell" class="h-6 w-6"/>
        </a>

        <span class="relative flex h-9 w-9 shrink-0 items-center justify-center">
            <span class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border border-panel-border bg-panel text-sm font-semibold uppercase text-gold" aria-hidden="true">
                @if ($activePackage?->package?->image)
                    <img src="{{ asset($activePackage->package->image) }}" alt="" class="h-full w-full object-cover" width="36" height="36">
                @elseif ($activePackage)
                    <x-icon name="package" class="h-4 w-4"/>
                @else
                    {{ mb_strtoupper(mb_substr($user->name, 0, 1)) }}
                @endif
            </span>
            @if ($activePackage)
                <span class="absolute -bottom-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full border-2 border-bg-deep bg-gold text-bg" data-active-package>
                    <x-icon name="check" class="h-2.5 w-2.5"/>
                    <span class="sr-only">{{ $activePackage->package?->name }} প্যাকেজ সক্রিয়</span>
                </span>
            @endif
        </span>
    </header>
</div>

<label for="app-drawer-toggle" class="fixed inset-0 z-50 hidden bg-black/60 peer-checked:block" aria-label="মেনু বন্ধ করুন"></label>

<aside class="fixed inset-y-0 left-0 z-50 w-72 -translate-x-full transform border-r border-line bg-bg-deep transition-transform duration-200 peer-checked:translate-x-0" aria-label="সাইড মেনু">
    <div class="flex items-center gap-3 border-b border-line px-5 py-4">
        <span class="relative flex h-10 w-10 shrink-0 items-center justify-center">
            <span class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border border-panel-border bg-panel font-bold uppercase text-gold" aria-hidden="true">
                @if ($activePackage?->package?->image)
                    <img src="{{ asset($activePackage->package->image) }}" alt="" class="h-full w-full object-cover" width="40" height="40">
                @elseif ($activePackage)
                    <x-icon name="package" class="h-4 w-4"/>
                @else
                    {{ mb_strtoupper(mb_substr($user->name, 0, 1)) }}
                @endif
            </span>
            @if ($activePackage)
                <span class="absolute -bottom-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full border-2 border-bg-deep bg-gold text-bg" data-active-package>
                    <x-icon name="check" class="h-2.5 w-2.5"/>
                    <span class="sr-only">{{ $activePackage->package?->name }} প্যাকেজ সক্রিয়</span>
                </span>
            @endif
        </span>
        <div class="min-w-0">
            <p class="truncate font-bold">{{ $user->name }}</p>
            <p class="truncate text-sm text-ink-muted">{{ $user->username }}</p>
        </div>
    </div>

    <nav class="flex flex-col gap-1 px-3 py-3">
        <a href="{{ route('home') }}" class="flex items-center gap-3 rounded-xl px-3 py-2.5 font-medium text-ink hover:bg-surface-raised {{ request()->routeIs('home') ? 'bg-surface-raised text-gold' : '' }}">
            <x-icon name="home" class="h-5 w-5"/> হোম
        </a>
        <a href="{{ route('tasks.index') }}" class="flex items-center gap-3 rounded-xl px-3 py-2.5 font-medium text-ink hover:bg-surface-raised {{ request()->routeIs('tasks.*') ? 'bg-surface-raised text-gold' : '' }}">
            <x-icon name="tasks" class="h-5 w-5"/> কাজ
        </a>
        <a href="{{ route('team.index') }}" class="flex items-center gap-3 rounded-xl px-3 py-2.5 font-medium text-ink hover:bg-surface-raised {{ request()->routeIs('team.*') ? 'bg-surface-raised text-gold' : '' }}">
            <x-icon name="team" class="h-5 w-5"/> রেফারেল টিম
        </a>
        <a href="{{ route('packages.index') }}" class="flex items-center gap-3 rounded-xl px-3 py-2.5 font-medium text-ink hover:bg-surface-raised {{ request()->routeIs('packages.*') ? 'bg-surface-raised text-gold' : '' }}">
            <x-icon name="package" class="h-5 w-5"/> প্যাকেজ
        </a>
        <a href="{{ route('transactions.index') }}" class="flex items-center gap-3 rounded-xl px-3 py-2.5 font-medium text-ink hover:bg-surface-raised {{ request()->routeIs('transactions.*') ? 'bg-surface-raised text-gold' : '' }}">
            <x-icon name="receipt" class="h-5 w-5"/> লেনদেনের ইতিহাস
        </a>
        <a href="{{ route('wallet.index') }}" class="flex items-center gap-3 rounded-xl px-3 py-2.5 font-medium text-ink hover:bg-surface-raised {{ request()->routeIs('wallet.*') ? 'bg-surface-raised text-gold' : '' }}">
            <x-icon name="wallet" class="h-5 w-5"/> ওয়ালেট
        </a>
        <a href="{{ route('withdrawals.create') }}" class="flex items-center gap-3 rounded-xl px-3 py-2.5 font-medium text-ink hover:bg-surface-raised {{ request()->routeIs('withdrawals.*') ? 'bg-surface-raised text-gold' : '' }}">
            <x-icon name="wallet" class="h-5 w-5"/> টাকা উত্তোলন
        </a>
        <a href="{{ route('account.index') }}" class="flex items-center gap-3 rounded-xl px-3 py-2.5 font-medium text-ink hover:bg-surface-raised {{ request()->routeIs('account.*') ? 'bg-surface-raised text-gold' : '' }}">
            <x-icon name="account" class="h-5 w-5"/> অ্যাকাউন্ট
        </a>
        @if ($user->isAdmin())
            <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-3 rounded-xl px-3 py-2.5 font-medium text-gold hover:bg-surface-raised {{ request()->routeIs('admin.*') ? 'bg-surface-raised' : '' }}">
                <x-icon name="shield" class="h-5 w-5"/> অ্যাডমিন প্যানেল
            </a>
        @endif
    </nav>

    <div class="mt-auto border-t border-line px-3 py-3">
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 font-medium text-danger hover:bg-danger/10">
                <x-icon name="logout" class="h-5 w-5"/> লগ আউট
            </button>
        </form>
    </div>
</aside>