@extends('layouts.admin', [
    'title' => 'Service Detail',
    'pageTitle' => 'Service Detail',
    'active' => 'services',
])

@php
    $statusVariants = [
        'active' => 'success',
        'inactive' => 'muted',
        'draft' => 'warning',
    ];
@endphp

@section('content')
    <div class="space-y-5">
        @if (session('status'))
            <div class="rounded-lg border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-700">
                {{ session('status') }}
            </div>
        @endif

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <x-ui.button variant="secondary" href="{{ route('admin.services.index') }}">
                <x-ui.icon name="arrow-left" class="h-4 w-4" />
                Back to Services
            </x-ui.button>
            <div class="flex flex-col gap-3 sm:flex-row">
                <x-ui.button variant="secondary" href="{{ route('admin.services.edit', $service) }}">
                    <x-ui.icon name="edit" class="h-4 w-4" />
                    Edit Service
                </x-ui.button>
                <x-ui.button variant="danger" data-modal-open="#delete-service-modal-{{ $service->id }}">
                    <x-ui.icon name="trash" class="h-4 w-4" />
                    Delete
                </x-ui.button>
            </div>
        </div>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <div class="space-y-5">
                <x-ui.card>
                    <div class="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
                        <div class="flex min-w-0 items-center gap-4">
                            <div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-booklio-primary">
                                <x-ui.icon name="sparkles" class="h-8 w-8" />
                            </div>
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-2">
                                    <h2 class="break-words text-xl font-extrabold">{{ $service->name }}</h2>
                                    <x-ui.badge :variant="$statusVariants[$service->status] ?? 'muted'">{{ $service->status_label }}</x-ui.badge>
                                </div>
                                <p class="mt-1 text-sm font-medium text-booklio-muted">{{ $service->category ?: 'Uncategorized' }}</p>
                            </div>
                        </div>
                        <div class="text-left sm:text-right">
                            <p class="text-sm font-bold text-booklio-muted">Public Price</p>
                            <p class="mt-1 text-2xl font-extrabold">${{ number_format($service->price, 2) }}</p>
                        </div>
                    </div>

                    <div class="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                            <p class="text-xs font-bold uppercase text-booklio-muted">Duration</p>
                            <p class="mt-2 text-sm font-extrabold">{{ $service->duration_minutes }} minutes</p>
                        </div>
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                            <p class="text-xs font-bold uppercase text-booklio-muted">Buffer Before</p>
                            <p class="mt-2 text-sm font-extrabold">{{ $service->buffer_before_minutes }} minutes</p>
                        </div>
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                            <p class="text-xs font-bold uppercase text-booklio-muted">Buffer After</p>
                            <p class="mt-2 text-sm font-extrabold">{{ $service->buffer_after_minutes }} minutes</p>
                        </div>
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                            <p class="text-xs font-bold uppercase text-booklio-muted">Bookings</p>
                            <p class="mt-2 text-sm font-extrabold">{{ $service->appointments_count }}</p>
                        </div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Description">
                    <p class="text-sm leading-6 text-slate-700">{{ $service->description ?: 'No service description added yet.' }}</p>
                </x-ui.card>

                <x-ui.card title="Assigned Staff">
                    @if ($service->staffProfiles->isNotEmpty())
                        <div class="grid gap-3 sm:grid-cols-2">
                            @foreach ($service->staffProfiles as $staff)
                                <div class="flex min-w-0 items-center gap-3 rounded-lg border border-booklio-border p-4">
                                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xs font-extrabold text-booklio-primary">{{ collect(explode(' ', $staff->name))->map(fn ($part) => str($part)->substr(0, 1))->join('') }}</div>
                                    <div class="min-w-0">
                                        <p class="truncate text-sm font-extrabold">{{ $staff->name }}</p>
                                        <p class="text-xs font-medium text-booklio-muted">Available for this service</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-5 text-sm font-medium text-booklio-muted">
                            No staff members are assigned yet.
                        </div>
                    @endif
                </x-ui.card>
            </div>

            <div class="space-y-5">
                <x-ui.card title="Service Image">
                    @if ($service->image_url)
                        <img src="{{ $service->image_url }}" alt="{{ $service->name }} image" class="aspect-[4/3] w-full rounded-lg object-cover">
                    @else
                        <div class="flex aspect-[4/3] items-center justify-center rounded-lg bg-gradient-to-br from-blue-50 to-sky-50 text-booklio-primary">
                            <x-ui.icon name="image" class="h-10 w-10" />
                        </div>
                    @endif
                </x-ui.card>

                <x-ui.card title="Performance">
                    <div class="grid gap-4">
                        <div class="flex items-center justify-between gap-3">
                            <span class="text-sm font-bold text-booklio-muted">Total bookings</span>
                            <span class="text-sm font-extrabold">{{ $service->appointments_count }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-3">
                            <span class="text-sm font-bold text-booklio-muted">Revenue</span>
                            <span class="text-sm font-extrabold">${{ number_format($revenue, 2) }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-3">
                            <span class="text-sm font-bold text-booklio-muted">Booking visibility</span>
                            <x-ui.badge :variant="$service->status === 'active' ? 'success' : 'muted'">{{ $service->status === 'active' ? 'Public' : 'Hidden' }}</x-ui.badge>
                        </div>
                    </div>
                </x-ui.card>
            </div>
        </section>
    </div>

    @push('modals')
        @include('admin.services.partials.delete-modal', ['service' => $service, 'modalId' => 'delete-service-modal-' . $service->id])
    @endpush
@endsection