@php
    $today = now()->startOfDay();
@endphp

<section class="space-y-4">
    <x-card class="!p-4">
        <div class="mb-1">
            <a href="{{ route('leaves.create') }}"
               class="inline-flex w-full items-center justify-center gap-1.5 rounded bg-primary px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:opacity-95">
                Request Leave
            </a>
        </div>
        <div class="mt-3 space-y-1.5 text-sm">
            @if(auth()->user()->hasPermission('leave_types_create'))
                <a href="{{ route('leave-types.manage') }}" class="block text-primary hover:underline">Leave Policy / Rules</a>
            @endif
            <a href="{{ route('leaves.index') }}" class="block text-primary hover:underline">Leave History</a>
        </div>
    </x-card>

    <x-card class="!p-4">
        <div class="mb-3 flex items-center justify-between">
            <h2 class="text-base font-semibold text-slate-900">Pending leave requests</h2>
            <a href="{{ route('leaves.index', ['status' => 'pending']) }}" class="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline">
                View all <i class="bi bi-chevron-right text-[10px]"></i>
            </a>
        </div>

        @if($pendingLeaves->isEmpty())
            <p class="text-sm text-slate-500">No pending leave requests.</p>
        @else
            <div class="space-y-3">
                @foreach($pendingLeaves as $leave)
                    @php
                        $end = $leave->end_date ? $leave->end_date->copy()->startOfDay() : null;
                        $timing = ($end && $end->lt($today)) ? 'PAST LEAVE' : 'UPCOMING LEAVE';
                        $daysLabel = rtrim(rtrim(number_format((float) $leave->total_days, 2, '.', ''), '0'), '.');
                    @endphp
                    <div class="rounded border border-slate-200 p-3">
                        <div class="flex gap-3">
                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-50 text-sky-600">
                                <i class="bi bi-airplane"></i>
                            </div>
                            <div class="min-w-0 flex-1 space-y-2">
                                <div class="grid gap-2 sm:grid-cols-2">
                                    <div>
                                        <p class="text-[10px] font-semibold uppercase tracking-wide text-slate-400">{{ $timing }}</p>
                                        <p class="text-sm font-medium text-slate-900">
                                            {{ $leave->start_date?->format('d M') }}
                                            @if($leave->end_date && ! $leave->start_date?->isSameDay($leave->end_date))
                                                – {{ $leave->end_date->format('d M Y') }}
                                            @else
                                                {{ $leave->start_date?->format('Y') }}
                                            @endif
                                            <span class="font-normal text-slate-500">({{ $daysLabel }} {{ abs((float)$leave->total_days) == 1 ? 'day' : 'days' }})</span>
                                        </p>
                                        <p class="text-xs text-slate-500">{{ $leave->user?->name }}</p>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2 text-xs">
                                        <div>
                                            <p class="text-[10px] font-semibold uppercase tracking-wide text-slate-400">Leave type</p>
                                            <p class="font-medium text-slate-800">{{ $leave->leaveType?->name ?? '—' }}</p>
                                        </div>
                                        <div>
                                            <p class="text-[10px] font-semibold uppercase tracking-wide text-slate-400">Requested on</p>
                                            <p class="font-medium text-slate-800">{{ $leave->created_at?->format('d M Y') ?? '—' }}</p>
                                        </div>
                                        <div class="col-span-2">
                                            <p class="text-[10px] font-semibold uppercase tracking-wide text-slate-400">Status</p>
                                            <p class="font-semibold text-amber-700">Pending</p>
                                        </div>
                                    </div>
                                </div>
                                @if($leave->reason)
                                    <p class="truncate text-xs text-slate-500">
                                        <span class="font-medium text-slate-600">Leave Note:</span> {{ $leave->reason }}
                                    </p>
                                @endif
                                <div class="flex items-center gap-1">
                                    <a href="{{ route('leave.popup') }}?leave_id={{ $leave->id }}" class="btn-icon-action btn-icon-action--view" title="View" aria-label="View"><i class="bi bi-eye"></i></a>
                                    @if((int) $leave->user_id === (int) auth()->id() && $leave->status === 'pending')
                                        <a href="{{ route('leaves.edit', $leave) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                                        <form method="POST" action="{{ route('leaves.destroy', $leave) }}" class="inline" onsubmit="return confirm('Cancel this leave request?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn-icon-action btn-icon-action--delete" title="Delete" aria-label="Delete"><i class="bi bi-trash3"></i></button>
                                        </form>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </x-card>

    <x-card class="!p-4">
        <div class="mb-3 flex items-center justify-between">
            <h2 class="text-base font-semibold text-slate-900">My recent requests</h2>
            <a href="{{ route('leaves.index') }}" class="text-xs font-medium text-primary hover:underline">History</a>
        </div>
        @if($recentLeaves->isEmpty())
            <p class="text-sm text-slate-500">No leave requests yet.</p>
        @else
            <ul class="divide-y divide-slate-100 text-sm">
                @foreach($recentLeaves as $leave)
                    @php
                        $statusClass = match ($leave->status) {
                            'approved' => 'text-emerald-700',
                            'rejected' => 'text-red-600',
                            default => 'text-amber-700',
                        };
                    @endphp
                    <li class="flex items-start justify-between gap-2 py-2">
                        <div class="min-w-0">
                            <p class="truncate font-medium text-slate-900">{{ $leave->leaveType?->name }}</p>
                            <p class="text-xs text-slate-500">
                                {{ $leave->start_date?->format('d M Y') }}
                                · {{ rtrim(rtrim(number_format((float) $leave->total_days, 2, '.', ''), '0'), '.') }} day(s)
                            </p>
                        </div>
                        <div class="flex shrink-0 items-center gap-1">
                            <a href="{{ route('leave.popup') }}?leave_id={{ $leave->id }}" class="btn-icon-action btn-icon-action--view" title="View" aria-label="View"><i class="bi bi-eye"></i></a>
                            @if((int) $leave->user_id === (int) auth()->id() && $leave->status === 'pending')
                                <a href="{{ route('leaves.edit', $leave) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                                <form method="POST" action="{{ route('leaves.destroy', $leave) }}" class="inline" onsubmit="return confirm('Cancel this leave request?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-icon-action btn-icon-action--delete" title="Delete" aria-label="Delete"><i class="bi bi-trash3"></i></button>
                                </form>
                            @endif
                            <span class="text-xs font-semibold capitalize {{ $statusClass }}">{{ $leave->status }}</span>
                        </div>
                    </li>
                @endforeach
            </ul>
        @endif
    </x-card>
</section>