@extends('layouts.app')

@section('title', 'Leave Management')
@section('heading', 'Leave Management')

@section('content')
@include('leaves.top-submenu')
    <div
        x-data="{
            drawerOpen: false,
            drawerHtml: '',
            drawerLoading: false,
            drawerError: '',
            async openDrawer(url) {
                this.drawerOpen = true;
                this.drawerLoading = true;
                this.drawerError = '';
                this.drawerHtml = '';
                try {
                    const response = await fetch(url, { credentials: 'same-origin', headers: { 'Accept': 'text/html' } });
                    if (!response.ok) {
                        throw new Error('Failed to load leave details');
                    }
                    const html = await response.text();
                    const doc = new DOMParser().parseFromString(html, 'text/html');
                    this.drawerHtml = doc.body ? doc.body.innerHTML : html;
                } catch (e) {
                    this.drawerError = 'Unable to load leave details. Please try again.';
                } finally {
                    this.drawerLoading = false;
                }
            },
            closeDrawer() {
                this.drawerOpen = false;
                this.drawerHtml = '';
                this.drawerError = '';
                this.drawerLoading = false;
            }
        }"
        class="relative"
    >
    <x-card>
        <div class="mb-4 flex flex-wrap items-start justify-between gap-3">
            <div>
                <p class="text-sm text-slate-500">Review and manage leave requests</p>
            </div>
            <a href="{{ route('leaves.create') }}" class="inline-flex items-center rounded-lg bg-teal-700 px-4 py-2 text-sm font-medium text-white hover:bg-teal-600"><i class="bi bi-plus-lg me-1"></i>New Request</a>
        </div>

        <div class="mb-5 grid gap-3 md:grid-cols-2 xl:grid-cols-4">

    {{-- Pending --}}
    <div class="relative flex items-center justify-between overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 pl-5 shadow-sm transition hover:shadow-md">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-amber-500" aria-hidden="true"></span>
        <div>
            <p class="text-xl font-semibold text-slate-900">{{ $stats['pending'] }}</p>
            <p class="text-sm text-slate-500">Pending Requests</p>
        </div>
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-100 text-amber-600">
            <i class="bi bi-hourglass-split text-lg"></i>
        </div>
    </div>

    {{-- Approved --}}
    <div class="relative flex items-center justify-between overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 pl-5 shadow-sm transition hover:shadow-md">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-emerald-500" aria-hidden="true"></span>
        <div>
            <p class="text-xl font-semibold text-slate-900">{{ $stats['approved_today'] }}</p>
            <p class="text-sm text-slate-500">Approved Today</p>
        </div>
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-green-100 text-green-600">
            <i class="bi bi-check-circle text-lg"></i>
        </div>
    </div>

    {{-- Rejected --}}
    <div class="relative flex items-center justify-between overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 pl-5 shadow-sm transition hover:shadow-md">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-rose-500" aria-hidden="true"></span>
        <div>
            <p class="text-xl font-semibold text-slate-900">{{ $stats['rejected'] }}</p>
            <p class="text-sm text-slate-500">Rejected</p>
        </div>
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-red-100 text-red-600">
            <i class="bi bi-x-circle text-lg"></i>
        </div>
    </div>

    {{-- On Leave --}}
    <div class="relative flex items-center justify-between overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 pl-5 shadow-sm transition hover:shadow-md">
        <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-sky-500" aria-hidden="true"></span>
        <div>
            <p class="text-xl font-semibold text-slate-900">{{ $stats['on_leave_today'] }}</p>
            <p class="text-sm text-slate-500">On Leave Today</p>
        </div>
        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
            <i class="bi bi-calendar-x text-lg"></i>
        </div>
    </div>

</div>

        <div class="mb-5 flex flex-nowrap items-end justify-between gap-3 overflow-x-auto rounded-lg border border-slate-200 bg-slate-50 p-3">
            <div class="inline-flex shrink-0 rounded-lg border border-slate-300 bg-white p-1 text-sm">
                <a href="{{ route('leaves.index', array_merge(request()->except('status', 'page'), ['status' => null])) }}" class="rounded-md px-2 md:px-3 py-1.5 whitespace-nowrap {{ request('status') ? 'text-slate-600 hover:text-slate-900' : 'bg-teal-700 text-white' }}">All</a>
                <a href="{{ route('leaves.index', array_merge(request()->except('page'), ['status' => 'pending'])) }}" class="rounded-md px-2 md:px-3 py-1.5 whitespace-nowrap {{ request('status') === 'pending' ? 'bg-teal-700 text-white' : 'text-slate-600 hover:text-slate-900' }}">Pending</a>
                <a href="{{ route('leaves.index', array_merge(request()->except('page'), ['status' => 'approved'])) }}" class="rounded-md px-2 md:px-3 py-1.5 whitespace-nowrap {{ request('status') === 'approved' ? 'bg-teal-700 text-white' : 'text-slate-600 hover:text-slate-900' }}">Approved</a>
                <a href="{{ route('leaves.index', array_merge(request()->except('page'), ['status' => 'withdrawal_pending'])) }}" class="rounded-md px-2 md:px-3 py-1.5 whitespace-nowrap {{ request('status') === 'withdrawal_pending' ? 'bg-teal-700 text-white' : 'text-slate-600 hover:text-slate-900' }}">Withdrawals</a>
                <a href="{{ route('leaves.index', array_merge(request()->except('page'), ['status' => 'rejected'])) }}" class="rounded-md px-2 md:px-3 py-1.5 whitespace-nowrap {{ request('status') === 'rejected' ? 'bg-teal-700 text-white' : 'text-slate-600 hover:text-slate-900' }}">Rejected</a>
                <a href="{{ route('leaves.index', array_merge(request()->except('page'), ['status' => 'cancelled'])) }}" class="rounded-md px-2 md:px-3 py-1.5 whitespace-nowrap {{ request('status') === 'cancelled' ? 'bg-teal-700 text-white' : 'text-slate-600 hover:text-slate-900' }}">Cancelled</a>
            </div>

            <form method="GET" action="{{ route('leaves.index') }}" class="flex flex-nowrap items-end gap-2">
                @if(request()->filled('status'))
                    <input type="hidden" name="status" value="{{ request('status') }}">
                @endif
                <div class="min-w-[10rem]">
                    <label class="mb-1 block text-xs font-medium text-slate-500">Leave type</label>
                    <select name="leave_type_id" class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-800 js-select2">
                        <option value="">All types</option>
                        @foreach(($leaveTypes ?? []) as $type)
                            <option value="{{ $type->id }}" @selected((string) request('leave_type_id') === (string) $type->id)>{{ $type->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="min-w-[12rem]">
                    <label class="mb-1 block text-xs font-medium text-slate-500">Search</label>
                    <input type="search" name="q" value="{{ request('q') }}" placeholder="Employee, type, note…"
                           class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400">
                </div>
                <div class="flex shrink-0 gap-2 pb-px">
                    <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white whitespace-nowrap hover:bg-slate-900">Apply</button>
                    <a href="{{ route('leaves.index', request()->only('status')) }}" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 whitespace-nowrap">Reset</a>
                </div>
                <p class="shrink-0 pb-2 text-sm text-slate-500 whitespace-nowrap">Total: {{ $leaves->total() }}</p>
            </form>
        </div>

        <x-table>
            <x-slot name="head">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Leave dates</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Leave type</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Requested by</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Leave note</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($leaves as $leave)
                <tr
                    class="cursor-pointer transition hover:bg-slate-50"
                    @click="openDrawer('{{ route('leave.popup') }}?leave_id={{ $leave->id }}')"
                >
                    <td class="px-4 py-3">
                        <p class="whitespace-nowrap font-medium text-slate-900">{{ $leave->start_date?->format('d M Y') ?? '—' }}</p>
                        <p class="text-xs text-slate-500">
                            {{ $leave->total_days !== null ? rtrim(rtrim(number_format((float) $leave->total_days, 1, '.', ''), '0'), '.') : '—' }}
                            {{ abs((float) ($leave->total_days ?? 0)) == 1 ? 'Day' : 'Days' }}
                            @if($leave->end_date && ! $leave->start_date?->isSameDay($leave->end_date))
                                · until {{ $leave->end_date->format('d M Y') }}
                            @endif
                        </p>
                    </td>
                    <td class="px-4 py-3">
                        <p class="whitespace-nowrap font-medium text-slate-800">{{ $leave->leaveType?->name ?? '—' }}</p>
                        <p class="text-xs text-slate-500">Requested on {{ $leave->created_at?->format('d M Y') ?? '—' }}</p>
                    </td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">
                        <span class="rounded-full px-2 py-0.5 text-xs
                            @if($leave->status === 'approved') bg-emerald-100 text-emerald-700
                            @elseif($leave->status === 'rejected') bg-red-100 text-red-700
                            @elseif($leave->status === 'cancelled') bg-slate-100 text-slate-600
                            @elseif($leave->status === 'withdrawal_pending') bg-violet-100 text-violet-700
                            @else bg-amber-100 text-amber-700 @endif">
                            {{ ucfirst(str_replace('_', ' ', $leave->status)) }}
                        </span>
                    </td>
                    <td class="px-4 py-3">
                        <p class="whitespace-nowrap font-medium text-slate-900">{{ $leave->user?->name ?? '—' }}</p>
                        <p class="whitespace-nowrap text-xs text-slate-500">{{ $leave->user?->department?->name ?? '—' }}</p>
                    </td>
                    <td class="max-w-[14rem] truncate px-4 py-3 text-sm text-slate-500" title="{{ $leave->reason }}">{{ $leave->reason ?: '—' }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm" @click.stop>
                        <a
                            href="{{ route('leave.popup') }}?leave_id={{ $leave->id }}"
                            @click.prevent="openDrawer('{{ 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>
                        @elseif(auth()->user()?->can('withdraw', $leave))
                            <a
                                href="{{ route('leave.popup') }}?leave_id={{ $leave->id }}"
                                @click.prevent="openDrawer('{{ route('leave.popup') }}?leave_id={{ $leave->id }}')"
                                class="btn-icon-action btn-icon-action--delete"
                                title="Withdraw"
                                aria-label="Withdraw"
                            ><i class="bi bi-arrow-return-left"></i></a>
                        @elseif($leave->status === 'withdrawal_pending' && auth()->user()?->can('approve', $leave))
                            <a
                                href="{{ route('leave.popup') }}?leave_id={{ $leave->id }}"
                                @click.prevent="openDrawer('{{ route('leave.popup') }}?leave_id={{ $leave->id }}')"
                                class="btn-icon-action btn-icon-action--view"
                                title="Review withdraw"
                                aria-label="Review withdraw"
                            ><i class="bi bi-clipboard-check"></i></a>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" class="px-4 py-8 text-center text-sm text-slate-500">No leave requests.</td></tr>
            @endforelse
        </x-table>
        @if($leaves->hasPages())<div class="mt-4">{{ $leaves->links() }}</div>@endif
    </x-card>
        <div
            x-show="drawerOpen"
            x-cloak
            class="fixed inset-0 z-[70]"
            aria-labelledby="leave-drawer-title"
            role="dialog"
            aria-modal="true"
        >
            <div class="absolute inset-0 bg-slate-900/35" @click="closeDrawer()"></div>
            <div
                x-show="drawerOpen"
                x-transition:enter="transform transition ease-out duration-250"
                x-transition:enter-start="translate-x-full"
                x-transition:enter-end="translate-x-0"
                x-transition:leave="transform transition ease-in duration-200"
                x-transition:leave-start="translate-x-0"
                x-transition:leave-end="translate-x-full"
                class="absolute right-0 top-0 h-full w-full max-w-2xl overflow-hidden border-l border-slate-200 bg-white shadow-2xl"
            >
                <div class="flex items-center justify-between border-b border-slate-200 px-4 py-3">
                    <h3 id="leave-drawer-title" class="font-semibold text-slate-900">Leave Details</h3>
                    <button
                        type="button"
                        class="rounded-md p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-700"
                        @click="closeDrawer()"
                    >
                        <span class="sr-only">Close</span>
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
                <div class="leave-popup-page h-[calc(100%-57px)] overflow-y-auto bg-white p-4">
                    <template x-if="drawerLoading">
                        <p class="text-sm text-slate-500">Loading leave details…</p>
                    </template>
                    <template x-if="!drawerLoading && drawerError">
                        <p class="text-sm text-red-600" x-text="drawerError"></p>
                    </template>
                    <div x-show="!drawerLoading && !drawerError" x-html="drawerHtml"></div>
                </div>
            </div>
        </div>
    </div>
@endsection