<form wire:submit.prevent="save" class="space-y-6">
    @php
        $editingService = $service;
    @endphp

    <x-card title="Información del servicio">
        <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" wire:model.live.debounce.250ms="name" value="{{ $name ?: $editingService?->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 wire:model.live.debounce.250ms="description" rows="3" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">{{ $description ?: $editingService?->description }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Categoría</label>
                <select wire:model.live="service_category_id" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
                    <option value="" @selected(blank($service_category_id ?: $editingService?->service_category_id))>— Sin categoría —</option>
                    @foreach ($categories as $cat)
                        <option value="{{ $cat->id }}" @selected((int) ($service_category_id ?: $editingService?->service_category_id) === $cat->id)>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </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" wire:model.live.debounce.250ms="price" value="{{ $price ?: $editingService?->price }}" step="500" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Duración (min) *</label>
                <input type="number" wire:model.live.debounce.250ms="duration_minutes" value="{{ $duration_minutes ?: $editingService?->duration_minutes }}" step="5" min="5" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Tiempo entre citas (min)</label>
                <input type="number" wire:model.live.debounce.250ms="buffer_minutes" value="{{ $buffer_minutes ?: $editingService?->buffer_minutes }}" step="5" min="0" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </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" wire:model.live="is_active" @checked($is_active || (bool) $editingService?->is_active) 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" wire:model.live="is_public" @checked($is_public || (bool) $editingService?->is_public) 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" wire:model.live="is_home_service" @checked($is_home_service || (bool) $editingService?->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">{{ $service ? 'Actualizar' : 'Crear servicio' }}</x-btn>
    </div>
</form>
