@php
    $selected = collect(old('service_ids', $selectedServices))->map(fn ($id) => (int) $id)->all();
@endphp

<x-layouts.tenant pageTitle="Mis servicios">
    <x-page-header
        title="Mis servicios"
        subtitle="Selecciona los servicios que puedes atender. Estos servicios aparecerán disponibles para ti en la reserva online."
    />

    @if (session('success'))
        <div class="mb-5 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-800">
            {{ session('success') }}
        </div>
    @endif

    @if (! $employee)
        <x-card>
            <x-empty-state title="Perfil de empleado no vinculado" message="Pide al administrador que vincule tu usuario con un empleado." />
        </x-card>
    @else
        <form method="POST" action="{{ route('employee.services.update') }}" class="space-y-6">
            @csrf
            @method('PUT')

            <x-card title="Servicios que realizo" subtitle="Marca solo los servicios que realmente puedes atender.">
                @if ($services->isEmpty())
                    <x-empty-state title="No hay servicios activos" message="El administrador debe crear servicios activos primero." />
                @else
                    <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
                        @foreach ($services as $service)
                            <label class="group flex cursor-pointer gap-3 rounded-2xl border border-ink-100 bg-white p-3 shadow-sm transition hover:-translate-y-0.5 hover:border-brand-300 hover:shadow-soft">
                                <input
                                    type="checkbox"
                                    name="service_ids[]"
                                    value="{{ $service->id }}"
                                    @checked(in_array($service->id, $selected, true))
                                    class="mt-1 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
                                >
                                <div class="h-16 w-20 shrink-0 overflow-hidden rounded-xl bg-ink-100">
                                    @if ($service->imageUrl())
                                        <img src="{{ $service->imageUrl() }}" alt="{{ $service->name }}" class="h-full w-full object-cover">
                                    @else
                                        <div class="flex h-full w-full items-center justify-center bg-brand-50 text-lg font-black text-brand-600">
                                            {{ strtoupper(substr($service->name, 0, 1)) }}
                                        </div>
                                    @endif
                                </div>
                                <div class="min-w-0 flex-1">
                                    <p class="font-black text-ink-900">{{ $service->name }}</p>
                                    <p class="mt-1 text-xs text-ink-500">
                                        {{ $service->category?->name ?? 'Sin categoría' }} · {{ $service->duration_minutes }} min
                                    </p>
                                    <p class="mt-2 text-sm font-black text-brand-600">$ {{ number_format($service->price, 0, ',', '.') }}</p>
                                </div>
                            </label>
                        @endforeach
                    </div>
                    @error('service_ids.*') <p class="mt-3 text-xs text-rose-600">{{ $message }}</p> @enderror
                @endif
            </x-card>

            <div class="flex justify-end">
                <x-btn type="submit" variant="primary">Guardar mis servicios</x-btn>
            </div>
        </form>
    @endif
</x-layouts.tenant>