@php
    $mode = $mode ?? 'create';
    $isEdit = $mode === 'edit';
    $action = $isEdit ? route('admin.services.update', $service) : route('admin.services.store');
    $selectedStaffIds = collect(old('staff_profile_ids', $selectedStaffIds ?? []))->map(fn ($id) => (int) $id)->all();
@endphp

<form method="POST" action="{{ $action }}" enctype="multipart/form-data" class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
    @csrf
    @if ($isEdit)
        @method('PUT')
    @endif

    <div class="space-y-5">
        <x-ui.card title="Service Information">
            <div class="grid gap-4 sm:grid-cols-2">
                <x-form.input name="name" label="Service Name" :value="$service->name" placeholder="Hair Cut & Style" />
                <x-form.select name="category" label="Category" :value="$service->category" placeholder="Choose category" :options="$categories" />
                <x-form.input name="price" label="Price" type="number" step="0.01" min="0" :value="$service->price" placeholder="65.00" />
                <x-form.input name="duration_minutes" label="Duration" type="number" min="5" :value="$service->duration_minutes" placeholder="60" help="Duration in minutes." />
                <x-form.textarea name="description" label="Description" :value="$service->description" class="sm:col-span-2" placeholder="Describe the service shown on the public booking page..." rows="5" />
            </div>
        </x-ui.card>

        <x-ui.card title="Scheduling Rules">
            <div class="grid gap-4 sm:grid-cols-3">
                <x-form.input name="buffer_before_minutes" label="Buffer Before" type="number" min="0" :value="$service->buffer_before_minutes" placeholder="10" help="Minutes before." />
                <x-form.input name="buffer_after_minutes" label="Buffer After" type="number" min="0" :value="$service->buffer_after_minutes" placeholder="10" help="Minutes after." />
                <x-form.select name="status" label="Status" :value="$service->status ?: \App\Models\Service::STATUS_ACTIVE" :options="\App\Models\Service::STATUSES" />
            </div>
        </x-ui.card>

        <x-ui.card title="Assigned Staff">
            @error('staff_profile_ids')
                <p class="mb-3 text-xs font-semibold text-red-600">{{ $message }}</p>
            @enderror
            @if ($staffProfiles->isNotEmpty())
                <div class="grid gap-3 sm:grid-cols-3">
                    @foreach ($staffProfiles as $staff)
                        <label class="flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-booklio-border bg-white px-4 py-3 transition hover:border-blue-200 hover:bg-blue-50/40">
                            <span class="min-w-0 truncate text-sm font-bold text-booklio-dark">{{ $staff->name }}</span>
                            <input name="staff_profile_ids[]" value="{{ $staff->id }}" type="checkbox" @checked(in_array($staff->id, $selectedStaffIds, true)) class="h-4 w-4 shrink-0 rounded border-booklio-border text-booklio-primary focus:ring-booklio-primary">
                        </label>
                    @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">
                    Add staff profiles before assigning staff to services.
                </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 border border-dashed border-blue-200 bg-blue-50 text-booklio-primary">
                    <div class="text-center">
                        <x-ui.icon name="image" class="mx-auto h-8 w-8" />
                        <p class="mt-3 text-sm font-bold">Upload service image</p>
                        <p class="mt-1 text-xs font-medium text-booklio-muted">PNG or JPG, 1200 x 800 recommended</p>
                    </div>
                </div>
            @endif
            <input name="image" type="file" accept="image/*" class="mt-4 block w-full text-sm font-medium text-slate-600 file:mr-4 file:rounded-lg file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-bold file:text-booklio-primary">
            @error('image')
                <p class="mt-1.5 text-xs font-semibold text-red-600">{{ $message }}</p>
            @enderror
        </x-ui.card>

        <x-ui.card title="Preview">
            <div class="rounded-lg border border-booklio-border p-4">
                <div class="flex items-start gap-3">
                    <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-booklio-primary">
                        <x-ui.icon name="sparkles" class="h-6 w-6" />
                    </div>
                    <div class="min-w-0">
                        <h3 class="truncate text-sm font-extrabold">{{ old('name', $service->name ?: 'Hair Cut & Style') }}</h3>
                        <p class="mt-1 truncate text-xs font-medium text-booklio-muted">{{ old('category', $service->category ?: 'Hair Services') }}</p>
                    </div>
                </div>
                <div class="mt-4 flex items-center justify-between gap-3 text-sm">
                    <span class="font-bold">{{ old('duration_minutes', $service->duration_minutes ?: 60) }} minutes</span>
                    <span class="font-extrabold text-booklio-primary">${{ number_format((float) old('price', $service->price ?: 65), 2) }}</span>
                </div>
            </div>
        </x-ui.card>

        <div class="grid gap-3">
            <x-ui.button type="submit">
                {{ $isEdit ? 'Update Service' : 'Save Service' }}
            </x-ui.button>
            <x-ui.button variant="secondary" href="{{ route('admin.services.index') }}">Cancel</x-ui.button>
        </div>
    </div>
</form>