@extends('layouts.admin', [
    'title' => 'Staff Performance Report',
    'pageTitle' => 'Staff Performance',
    'active' => 'reports',
])

@section('content')
    <div class="space-y-5">
        <div class="flex min-w-0 flex-col gap-3 2xl:flex-row 2xl:items-center 2xl:justify-between">
            <p class="text-sm font-medium leading-6 text-booklio-muted">Compare staff utilization, completed appointments, revenue contribution, and rating placeholders.</p>
            @include('admin.reports.partials.nav', ['activeTab' => 'staff'])
        </div>

        @include('admin.reports.partials.filters')

        <x-ui.card title="Staff Performance Table" padding="p-0">
            <div class="hidden overflow-x-auto md:block booklio-scrollbar">
                <table class="min-w-[1240px] w-full divide-y divide-booklio-border">
                    <thead class="bg-slate-50"><tr>@foreach (['Staff Name', 'Total Appointments', 'Completed', 'Cancelled', 'Revenue Generated', 'Avg Rating', 'Performance'] as $heading)<th class="px-5 py-4 text-left text-xs font-bold uppercase tracking-wide text-booklio-muted">{{ $heading }}</th>@endforeach</tr></thead>
                    <tbody class="divide-y divide-booklio-border">
                        @forelse ($staff as $member)
                            <tr class="hover:bg-slate-50/80">
                                <td class="px-5 py-4 text-sm font-extrabold">{{ $member['name'] }}</td>
                                <td class="px-5 py-4 text-sm font-semibold">{{ $member['appointments'] }}</td>
                                <td class="px-5 py-4 text-sm font-extrabold text-emerald-600">{{ $member['completed'] }}</td>
                                <td class="px-5 py-4 text-sm font-extrabold text-red-600">{{ $member['cancelled'] }}</td>
                                <td class="px-5 py-4 text-sm font-extrabold text-booklio-primary">{{ $member['revenue'] }}</td>
                                <td class="px-5 py-4 text-sm font-extrabold">{{ $member['rating'] }} / 5</td>
                                <td class="px-5 py-4"><x-ui.badge :variant="$member['variant']">{{ $member['badge'] }}</x-ui.badge></td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="px-5 py-4 text-center text-sm font-semibold text-booklio-muted">No staff found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="grid gap-4 p-5 md:hidden">
                @forelse ($staff as $member)
                    <div class="rounded-lg border border-booklio-border p-4">
                        <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                            <div><p class="text-sm font-extrabold">{{ $member['name'] }}</p><p class="text-xs text-booklio-muted">{{ $member['appointments'] }} total appointments</p></div>
                            <x-ui.badge :variant="$member['variant']">{{ $member['badge'] }}</x-ui.badge>
                        </div>
                        <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                            <div><p class="text-xs font-bold text-booklio-muted">Completed</p><p class="font-extrabold text-emerald-600">{{ $member['completed'] }}</p></div>
                            <div><p class="text-xs font-bold text-booklio-muted">Revenue</p><p class="font-extrabold text-booklio-primary">{{ $member['revenue'] }}</p></div>
                            <div><p class="text-xs font-bold text-booklio-muted">Cancelled</p><p class="font-extrabold text-red-600">{{ $member['cancelled'] }}</p></div>
                            <div><p class="text-xs font-bold text-booklio-muted">Rating</p><p class="font-extrabold">{{ $member['rating'] }} / 5</p></div>
                        </div>
                    </div>
                @empty
                    <div class="rounded-lg border border-dashed border-booklio-border p-6 text-center text-sm font-semibold text-booklio-muted">No staff found.</div>
                @endforelse
            </div>
        </x-ui.card>
    </div>
@endsection