@php
    $isEdit = $service->exists;
@endphp

<form method="POST" action="{{ $isEdit ? route('tenant.services.update', $service) : route('tenant.services.store') }}" enctype="multipart/form-data" class="space-y-6">
    @csrf
    @if ($isEdit)
        @method('PUT')
    @endif

    <x-card title="Información del servicio">
        <div class="flex flex-col gap-5 border-b border-ink-100 pb-6 mb-6 sm:flex-row sm:items-center">
            <div class="relative h-32 w-full overflow-hidden rounded-2xl border border-ink-200 bg-ink-100 sm:h-28 sm:w-44 sm:shrink-0">
                @if ($service->imageUrl())
                    <img src="{{ $service->imageUrl() }}" class="h-full w-full object-cover" alt="Foto actual del servicio">
                @else
                    <div class="flex h-full w-full items-center justify-center bg-gradient-to-br from-indigo-500 to-cyan-500 text-sm font-black text-white">
                        Servicio
                    </div>
                @endif
            </div>

            <div class="min-w-0 flex-1">
                <label class="block text-sm font-semibold text-ink-800 mb-1.5">Foto del servicio</label>
                <input type="file" name="image" accept="image/jpeg,image/png,image/webp" class="input">
                <p class="mt-2 text-xs text-ink-500">Sube una imagen JPG, PNG o WebP. Recomendado: foto horizontal. Tamaño máximo: 4 MB.</p>
                @if ($service->image_path)
                    <label class="mt-3 inline-flex items-center gap-2 text-sm text-ink-600">
                        <input type="checkbox" name="remove_image" value="1" @checked(old('remove_image')) class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        Quitar foto actual
                    </label>
                @endif
                @error('image') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nombre *</label>
                <input type="text" name="name" value="{{ old('name', $service->name) }}" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500" required>
                @error('name') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Descripción</label>
                <textarea name="description" rows="3" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">{{ old('description', $service->description) }}</textarea>
                @error('description') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Categoría</label>
                <select name="service_category_id" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
                    <option value="">— Sin categoría —</option>
                    @foreach ($categories as $cat)
                        <option value="{{ $cat->id }}" @selected((int) old('service_category_id', $service->service_category_id) === $cat->id)>{{ $cat->name }}</option>
                    @endforeach
                </select>
                @error('service_category_id') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
        </div>
    </x-card>

    <x-card title="Precio y duración">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Precio (COP) *</label>
                <input type="number" name="price" value="{{ old('price', $service->price ?? 0) }}" step="500" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2" required>
                @error('price') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Duración (min) *</label>
                <input type="number" name="duration_minutes" value="{{ old('duration_minutes', $service->duration_minutes ?? 30) }}" step="5" min="5" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2" required>
                @error('duration_minutes') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Tiempo entre citas (min)</label>
                <input type="number" name="buffer_minutes" value="{{ old('buffer_minutes', $service->buffer_minutes ?? 0) }}" step="5" min="0" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
                @error('buffer_minutes') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div class="md:col-span-3">
                <label class="block text-sm font-medium text-gray-700 mb-1">Cancelación permitida hasta</label>
                <div class="grid grid-cols-1 md:grid-cols-[minmax(0,18rem)_1fr] gap-3 md:items-center">
                    <input type="number" name="cancellation_min_notice_minutes" value="{{ old('cancellation_min_notice_minutes', $service->cancellation_min_notice_minutes) }}" step="5" min="0" max="10080" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2" placeholder="Ej: 60">
                    <p class="text-xs text-gray-500">
                        Minutos antes de la cita. Ej: 15 min o 60 min. Déjalo vacío para usar la regla general del negocio.
                    </p>
                </div>
                @error('cancellation_min_notice_minutes') <p class="text-rose-600 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
        </div>
        <div class="mt-4 flex flex-wrap gap-4">
            <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $service->exists ? $service->is_active : true)) class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> Activo
            </label>
            <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                <input type="checkbox" name="is_public" value="1" @checked(old('is_public', $service->exists ? $service->is_public : true)) class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> Visible en página pública
            </label>
            <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                <input type="checkbox" name="is_home_service" value="1" @checked(old('is_home_service', $service->is_home_service)) class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> A domicilio
            </label>
        </div>
    </x-card>

    <div class="flex items-center justify-end gap-2">
        <x-btn href="{{ route('tenant.services.index') }}" variant="secondary">Cancelar</x-btn>
        <x-btn type="submit" variant="primary">{{ $isEdit ? 'Actualizar servicio' : 'Crear servicio' }}</x-btn>
    </div>
</form>