<form wire:submit.prevent="save" class="space-y-6">
    @php $editingEmployee = $employee; @endphp
    <x-card title="Datos personales">
        <div class="flex flex-col sm:flex-row sm:items-center gap-5 mb-6 pb-6 border-b border-ink-100">
            <div class="relative w-24 h-24 rounded-2xl overflow-hidden bg-ink-100 border border-ink-200 flex items-center justify-center shrink-0">
                @if ($photo)
                    <img src="{{ $photo->temporaryUrl() }}" class="w-full h-full object-cover" alt="Vista previa de la foto">
                @elseif ($current_photo_url)
                    <img src="{{ $current_photo_url }}" class="w-full h-full object-cover" alt="Foto actual del empleado">
                @else
                    <span class="text-3xl font-bold text-white w-full h-full flex items-center justify-center" style="background: {{ $color }};">
                        {{ strtoupper(substr($first_name ?: 'E', 0, 1)) }}
                    </span>
                @endif
            </div>

            <div class="min-w-0 flex-1">
                <label class="block text-sm font-semibold text-ink-800 mb-1.5">Foto del empleado</label>
                <input type="file" wire:model="photo" accept="image/*" class="input">
                <p class="mt-2 text-xs text-ink-500">Sube una imagen JPG, PNG o WebP. Tamaño máximo: 2 MB.</p>
                <div wire:loading wire:target="photo" class="mt-2 text-xs font-medium text-brand-600">Cargando foto...</div>
                @error('photo') <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>
                <label class="block text-sm font-medium text-gray-700 mb-1">Nombre *</label>
                <input type="text" wire:model.live.debounce.250ms="first_name" value="{{ $first_name ?: $editingEmployee?->first_name }}" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2" required>
                @error('first_name') <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">Apellido</label>
                <input type="text" wire:model.live.debounce.250ms="last_name" value="{{ $last_name ?: $editingEmployee?->last_name }}" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                <input type="email" wire:model.live.debounce.250ms="email" value="{{ $email ?: $editingEmployee?->email }}" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Celular</label>
                <input type="text" wire:model.live.debounce.250ms="phone" value="{{ $phone ?: $editingEmployee?->phone }}" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Cargo</label>
                <input type="text" wire:model.live.debounce.250ms="position" value="{{ $position ?: $editingEmployee?->position }}" placeholder="Ej: Barbero, Estilista…" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Color en agenda</label>
                <input type="color" wire:model.live="color" value="{{ $color ?: $editingEmployee?->color ?: '#4f46e5' }}" class="h-10 w-20 border border-gray-300 rounded-lg">
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
                <textarea wire:model.live.debounce.250ms="bio" rows="2" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">{{ $bio ?: $editingEmployee?->bio }}</textarea>
            </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) $editingEmployee?->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_bookable" @checked($is_bookable || (bool) $editingEmployee?->is_bookable) class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"> Recibe reservas
            </label>
        </div>
    </x-card>

    <x-card title="Servicios que realiza">
        @if ($services->isEmpty())
            <p class="text-sm text-gray-500">Aún no tienes servicios. Crea servicios primero.</p>
        @else
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
                <p class="text-sm text-ink-500">
                    Selecciona solo los servicios que este profesional puede atender.
                    <strong class="text-ink-900">{{ count($service_ids) }}</strong> seleccionados.
                </p>
                <div class="flex items-center gap-2">
                    <button type="button" wire:click="selectAllServices" class="px-3 py-1.5 rounded-full border border-ink-200 text-xs font-bold text-ink-700 hover:bg-ink-50">Todos</button>
                    <button type="button" wire:click="clearServices" class="px-3 py-1.5 rounded-full border border-ink-200 text-xs font-bold text-ink-700 hover:bg-ink-50">Limpiar</button>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                @foreach ($services as $service)
                    <label class="flex items-center gap-2 p-2 rounded-lg border border-gray-200 hover:bg-gray-50 cursor-pointer">
                        <input type="checkbox" wire:model.live="service_ids" value="{{ $service->id }}" @checked(in_array($service->id, $service_ids, true)) class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <span class="text-sm">{{ $service->name }}</span>
                    </label>
                @endforeach
            </div>
            @error('service_ids.*') <p class="text-rose-600 text-xs mt-2">{{ $message }}</p> @enderror
        @endif
    </x-card>

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