@extends('layouts.admin', [
    'title' => 'Service Performance Report',
    'pageTitle' => 'Service 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">Measure service demand, revenue, average duration, and booking mix.</p>
            @include('admin.reports.partials.nav', ['activeTab' => 'services'])
        </div>

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

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <x-ui.card title="Service Revenue & Bookings">
                <div class="space-y-4">
                    @forelse ($services as $service)
                        <div>
                            <div class="mb-2 flex items-center justify-between gap-3">
                                <span class="truncate text-sm font-bold">{{ $service['name'] }}</span>
                                <span class="text-sm font-extrabold text-booklio-primary">{{ $service['revenue'] }}</span>
                            </div>
                            <div class="h-3 rounded-full bg-slate-100">
                                <div class="h-3 rounded-full bg-booklio-primary" style="width: {{ $service['percent'] }}%"></div>
                            </div>
                            <p class="mt-1 text-xs font-semibold text-booklio-muted">{{ $service['bookings'] }} total bookings</p>
                        </div>
                    @empty
                        <p class="text-sm font-semibold text-booklio-muted">No services found.</p>
                    @endforelse
                </div>
            </x-ui.card>

            <div class="space-y-5">
                <x-ui.card title="Most Booked Services">
                    <div class="space-y-3">
                        @forelse ($mostBooked as $service)
                            <div class="flex items-center justify-between gap-3 rounded-lg bg-slate-50 p-3">
                                <span class="truncate text-sm font-bold">{{ $service['name'] }}</span>
                                <span class="text-sm font-extrabold text-booklio-primary">{{ $service['bookings'] }}</span>
                            </div>
                        @empty
                            <p class="text-sm font-semibold text-booklio-muted">No service bookings yet.</p>
                        @endforelse
                    </div>
                </x-ui.card>

                <x-ui.card title="Least Booked Services">
                    <div class="space-y-3">
                        @forelse ($leastBooked as $service)
                            <div class="flex items-center justify-between gap-3 rounded-lg bg-slate-50 p-3">
                                <span class="truncate text-sm font-bold">{{ $service['name'] }}</span>
                                <span class="text-sm font-extrabold text-amber-600">{{ $service['bookings'] }}</span>
                            </div>
                        @empty
                            <p class="text-sm font-semibold text-booklio-muted">No services found.</p>
                        @endforelse
                    </div>
                </x-ui.card>
            </div>
        </section>

        <x-ui.card title="Service Performance Table" padding="p-0">
            <x-ui.table :headers="['Service Name', 'Total Bookings', 'Revenue', 'Average Duration', 'Performance']">
                @forelse ($services as $service)
                    <tr class="hover:bg-slate-50/80">
                        <td class="text-sm font-extrabold">{{ $service['name'] }}</td>
                        <td class="text-sm font-semibold">{{ $service['bookings'] }}</td>
                        <td class="text-sm font-extrabold text-booklio-primary">{{ $service['revenue'] }}</td>
                        <td class="text-sm font-semibold">{{ $service['duration'] }}</td>
                        <td><x-ui.badge :variant="$service['variant']">{{ $service['rank'] }}</x-ui.badge></td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-center text-booklio-muted">No services found.</td></tr>
                @endforelse
            </x-ui.table>
        </x-ui.card>
    </div>
@endsection