@php
    $sidebarBalances = $sidebarBalances ?? [];
    $recentLeaves = $recentLeaves ?? collect();
    $upcomingHolidays = $upcomingHolidays ?? collect();
    $balanceAsOf = $balanceAsOf ?? now()->format('d M Y');
    $tilePalette = [
        'casual' => [
            'bg' => 'bg-emerald-50',
            'border' => 'border-emerald-200',
            'text' => 'text-emerald-800',
            'muted' => 'text-emerald-600/80',
            'icon' => 'bi-sun',
            'iconBg' => 'bg-emerald-500',
            'iconText' => 'text-white',
        ],
        'sick' => [
            'bg' => 'bg-sky-50',
            'border' => 'border-sky-200',
            'text' => 'text-sky-800',
            'muted' => 'text-sky-600/80',
            'icon' => 'bi-heart-pulse',
            'iconBg' => 'bg-sky-500',
            'iconText' => 'text-white',
        ],
        'earned' => [
            'bg' => 'bg-amber-50',
            'border' => 'border-amber-200',
            'text' => 'text-amber-900',
            'muted' => 'text-amber-700/80',
            'icon' => 'bi-airplane',
            'iconBg' => 'bg-amber-500',
            'iconText' => 'text-white',
        ],
        'comp' => [
            'bg' => 'bg-rose-50',
            'border' => 'border-rose-200',
            'text' => 'text-rose-800',
            'muted' => 'text-rose-600/80',
            'icon' => 'bi-calendar2-check',
            'iconBg' => 'bg-rose-500',
            'iconText' => 'text-white',
        ],
        'maternity' => [
            'bg' => 'bg-fuchsia-50',
            'border' => 'border-fuchsia-200',
            'text' => 'text-fuchsia-800',
            'muted' => 'text-fuchsia-600/80',
            'icon' => 'bi-heart-fill',
            'iconBg' => 'bg-fuchsia-500',
            'iconText' => 'text-white',
        ],
        'paternity' => [
            'bg' => 'bg-indigo-50',
            'border' => 'border-indigo-200',
            'text' => 'text-indigo-800',
            'muted' => 'text-indigo-600/80',
            'icon' => 'bi-people-fill',
            'iconBg' => 'bg-indigo-500',
            'iconText' => 'text-white',
        ],
        'unpaid' => [
            'bg' => 'bg-slate-100',
            'border' => 'border-slate-200',
            'text' => 'text-slate-800',
            'muted' => 'text-slate-500',
            'icon' => 'bi-dash-circle-fill',
            'iconBg' => 'bg-slate-500',
            'iconText' => 'text-white',
        ],
        'paid' => [
            'bg' => 'bg-violet-50',
            'border' => 'border-violet-200',
            'text' => 'text-violet-800',
            'muted' => 'text-violet-600/80',
            'icon' => 'bi-wallet2',
            'iconBg' => 'bg-violet-500',
            'iconText' => 'text-white',
        ],
        'default' => [
            'bg' => 'bg-teal-50',
            'border' => 'border-teal-200',
            'text' => 'text-teal-800',
            'muted' => 'text-teal-600/80',
            'icon' => 'bi-calendar3',
            'iconBg' => 'bg-teal-500',
            'iconText' => 'text-white',
        ],
    ];
    $fallbackOrder = ['casual', 'sick', 'earned', 'comp', 'paid', 'maternity', 'paternity', 'unpaid', 'default'];
@endphp

<aside class="space-y-4 xl:sticky xl:top-20">
    {{-- Leave balance tiles --}}
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
        <div class="mb-3 flex items-start justify-between gap-2">
            <div class="flex items-center gap-2">
                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <i class="bi bi-pie-chart-fill"></i>
                </span>
                <div>
                    <h3 class="text-sm font-semibold text-slate-900">Leave balance</h3>
                    <p class="text-xs text-slate-500">As on {{ $balanceAsOf }}</p>
                </div>
            </div>
        </div>

        @if(empty($sidebarBalances))
            <p class="text-sm text-slate-500">No leave types configured.</p>
        @else
            <div class="flex flex-nowrap gap-2.5 overflow-x-auto pb-0.5">
                @foreach(collect($sidebarBalances)->take(4) as $index => $row)
                    @php
                        $name = strtolower((string) ($row['name'] ?? ''));
                        $code = strtolower((string) ($row['short_code'] ?? ''));
                        $key = 'default';
                        if (str_contains($name, 'casual') || $code === 'cl') {
                            $key = 'casual';
                        } elseif (str_contains($name, 'sick') || str_contains($name, 'medical') || $code === 'sl') {
                            $key = 'sick';
                        } elseif (str_contains($name, 'comp') || str_contains($name, 'coff') || $code === 'co') {
                            $key = 'comp';
                        } elseif (str_contains($name, 'maternity') || $code === 'ml') {
                            $key = 'maternity';
                        } elseif (str_contains($name, 'paternity')) {
                            $key = 'paternity';
                        } elseif (str_contains($name, 'unpaid') || str_contains($name, 'lop')) {
                            $key = 'unpaid';
                        } elseif (str_contains($name, 'paid') || $code === 'paid') {
                            $key = 'paid';
                        } elseif (str_contains($name, 'earned') || str_contains($name, 'privilege') || str_contains($name, 'annual') || in_array($code, ['el', 'pl', 'al'], true)) {
                            $key = 'earned';
                        } else {
                            $key = $fallbackOrder[$index % count($fallbackOrder)];
                        }
                        $style = $tilePalette[$key] ?? $tilePalette['default'];
                        $isUnlimited = ! empty($row['is_unlimited']);
                        $available = $isUnlimited ? null : (float) ($row['available'] ?? 0);
                        $entitlement = $isUnlimited ? null : (float) ($row['entitlement'] ?? $row['allocated'] ?? 0);
                        $availableLabel = $isUnlimited
                            ? '∞'
                            : (abs($available - (int) $available) < 0.001
                                ? (string) (int) $available
                                : rtrim(rtrim(number_format($available, 1, '.', ''), '0'), '.'));
                        $quotaLabel = $isUnlimited
                            ? 'Unlimited'
                            : (abs($entitlement - (int) $entitlement) < 0.001
                                ? (string) (int) $entitlement
                                : rtrim(rtrim(number_format($entitlement, 1, '.', ''), '0'), '.')).' days';
                    @endphp
                    <div class="min-w-[6.5rem] flex-1 rounded-xl border {{ $style['border'] }} {{ $style['bg'] }} p-3 shadow-sm">
                        <div class="mb-2.5 flex items-center justify-between gap-1">
                            <p class="truncate text-[11px] font-bold leading-tight {{ $style['text'] }}">{{ $row['name'] ?? 'Leave' }}</p>
                            <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg {{ $style['iconBg'] }} {{ $style['iconText'] }} shadow-sm">
                                <i class="bi {{ $style['icon'] }} text-xs"></i>
                            </span>
                        </div>
                        <p class="text-xl font-bold leading-none tracking-tight text-slate-900">{{ $availableLabel }}</p>
                        <p class="mt-1 text-[10px] font-medium {{ $style['muted'] }}">/ {{ $quotaLabel }}</p>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Recent leave history --}}
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
        <div class="mb-3 flex items-center justify-between gap-2">
            <div class="flex items-center gap-2">
                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100 text-slate-600">
                    <i class="bi bi-clipboard2-check"></i>
                </span>
                <h3 class="text-sm font-semibold text-slate-900">Recent leave history</h3>
            </div>
            <a href="{{ route('leaves.index') }}" class="inline-flex items-center gap-1 text-xs font-semibold text-primary hover:underline">
                View all <i class="bi bi-chevron-right text-[10px]"></i>
            </a>
        </div>

        @if($recentLeaves->isEmpty())
            <p class="text-sm text-slate-500">No leave requests yet.</p>
        @else
            <ul class="space-y-2.5">
                @foreach($recentLeaves->take(3) as $item)
                    @php
                        $status = strtolower((string) $item->status);
                        $statusClass = match ($status) {
                            'approved' => 'bg-emerald-100 text-emerald-700',
                            'pending' => 'bg-amber-100 text-amber-800',
                            'rejected' => 'bg-rose-100 text-rose-700',
                            'cancelled' => 'bg-slate-100 text-slate-600',
                            'withdrawal_pending' => 'bg-violet-100 text-violet-700',
                            default => 'bg-slate-100 text-slate-600',
                        };
                        $dateLabel = optional($item->start_date)->format('d M');
                        if ($item->end_date && ! optional($item->start_date)->isSameDay($item->end_date)) {
                            $dateLabel .= ' – '.optional($item->end_date)->format('d M');
                        }
                        if ($item->is_half_day) {
                            $typeLabel = ($item->leaveType?->name ?? 'Leave').' (Half Day)';
                        } else {
                            $typeLabel = $item->leaveType?->name ?? 'Leave';
                        }
                    @endphp
                    <li class="flex items-center justify-between gap-3 rounded-xl border border-slate-100 px-3 py-2.5">
                        <div class="flex min-w-0 items-start gap-2.5">
                            <span class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-slate-50 text-slate-500">
                                <i class="bi bi-calendar3 text-sm"></i>
                            </span>
                            <div class="min-w-0">
                                <p class="text-xs font-medium text-slate-500">{{ $dateLabel }}</p>
                                <p class="truncate text-sm font-semibold text-slate-800">{{ $typeLabel }}</p>
                            </div>
                        </div>
                        <span class="shrink-0 rounded-full px-2.5 py-0.5 text-[11px] font-semibold capitalize {{ $statusClass }}">
                            {{ $item->status }}
                        </span>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>

    {{-- Upcoming holidays --}}
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
        <div class="mb-3 flex items-center justify-between gap-2">
            <div class="flex items-center gap-2">
                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50 text-sky-600">
                    <i class="bi bi-calendar-event"></i>
                </span>
                <h3 class="text-sm font-semibold text-slate-900">Upcoming holidays</h3>
            </div>
            <a href="{{ route('holidays.index') }}" class="inline-flex items-center gap-1 text-xs font-semibold text-primary hover:underline">
                View all <i class="bi bi-chevron-right text-[10px]"></i>
            </a>
        </div>

        @if(($upcomingHolidays ?? collect())->isEmpty())
            <p class="text-sm text-slate-500">No upcoming holidays.</p>
        @else
            <ul class="space-y-2.5">
                @foreach($upcomingHolidays as $holiday)
                    <li class="flex items-center gap-3 rounded-xl border border-slate-100 px-3 py-2.5">
                        <div class="flex h-11 w-11 shrink-0 flex-col items-center justify-center rounded-xl bg-sky-50 text-sky-700">
                            <span class="text-[10px] font-bold uppercase leading-none">{{ optional($holiday->date)->format('M') }}</span>
                            <span class="text-base font-bold leading-tight">{{ optional($holiday->date)->format('d') }}</span>
                        </div>
                        <div class="min-w-0">
                            <p class="truncate text-sm font-semibold text-slate-800">{{ $holiday->name }}</p>
                            <p class="mt-0.5 text-xs text-slate-500">{{ optional($holiday->date)->format('l, d M Y') }}</p>
                        </div>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
</aside>