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

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

    <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 ($employee->photoUrl())
                    <img src="{{ $employee->photoUrl() }}" 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: {{ old('color', $employee->color ?: '#4f46e5') }};">
                        {{ strtoupper(substr(old('first_name', $employee->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" name="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>
                @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" name="first_name" value="{{ old('first_name', $employee->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" name="last_name" value="{{ old('last_name', $employee->last_name) }}" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
                @error('last_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">Email</label>
                <input type="email" name="email" value="{{ old('email', $employee->email) }}" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
                @error('email') <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">Celular</label>
                <input type="text" name="phone" value="{{ old('phone', $employee->phone) }}" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
                @error('phone') <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">Cargo</label>
                <input type="text" name="position" value="{{ old('position', $employee->position) }}" placeholder="Ej: Barbero, Estilista…" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">
                @error('position') <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">Color en agenda</label>
                <input type="color" name="color" value="{{ old('color', $employee->color ?: '#4f46e5') }}" class="h-10 w-20 border border-gray-300 rounded-lg">
                @error('color') <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">Bio</label>
                <textarea name="bio" rows="2" class="w-full text-sm border border-gray-300 rounded-lg px-3 py-2">{{ old('bio', $employee->bio) }}</textarea>
                @error('bio') <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', $employee->exists ? $employee->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_bookable" value="1" @checked(old('is_bookable', $employee->exists ? $employee->is_bookable : true)) 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
            <p class="text-sm text-ink-500 mb-4">Selecciona solo los servicios que este profesional puede atender.</p>
            <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" name="service_ids[]" value="{{ $service->id }}" @checked(in_array($service->id, $selected, 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">{{ $isEdit ? 'Actualizar empleado' : 'Crear empleado' }}</x-btn>
    </div>
</form>