{{-- Incluido por tasks.create y tasks.edit — espera $form (TaskForm), $checklistItems,
$this->companies y $this->usuarios --}}

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <div class="sm:col-span-2">
        <x-input-label for="titulo" value="Título *" />
        <x-text-input wire:model="form.titulo" id="titulo" class="mt-1.5 block w-full" placeholder="¿Qué hay que hacer?" />
        <x-input-error :messages="$errors->get('form.titulo')" class="mt-2" />
    </div>

    <div class="sm:col-span-2">
        <x-input-label value="Subtareas (opcional)" />
        <p class="mt-1 text-xs text-gray-400">Checklist rápido dentro de la tarea — se muestra como barra de progreso en el tablero.</p>
        <div class="mt-2 space-y-2">
            @foreach ($checklistItems as $index => $item)
                <div class="flex gap-2">
                    <x-text-input wire:model="checklistItems.{{ $index }}.texto" placeholder="Ej. Levantar información" class="w-full" />
                    <button type="button" wire:click="quitarItemChecklist({{ $index }})" class="shrink-0 rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-rose-600">
                        <x-icon name="x" class="h-4 w-4" />
                    </button>
                </div>
                <x-input-error :messages="$errors->get('checklistItems.'.$index.'.texto')" class="mt-1" />
            @endforeach
        </div>
        <button type="button" wire:click="agregarItemChecklist" class="mt-2 inline-flex items-center gap-1.5 text-sm font-medium text-cck-600 hover:text-cck-700">
            <x-icon name="plus" class="h-3.5 w-3.5" />
            Agregar subtarea
        </button>
    </div>

    <div class="sm:col-span-2">
        <x-input-label for="descripcion" value="Descripción" />
        <textarea wire:model="form.descripcion" id="descripcion" rows="3" placeholder="Contexto, pasos o detalles adicionales (opcional)"
                  class="mt-1.5 w-full rounded-lg border-gray-300 text-sm text-gray-900 placeholder:text-gray-400 shadow-sm transition focus:border-cck-400 focus:ring-cck-400"></textarea>
    </div>

    <div>
        <x-input-label for="urgency_type" value="Tipo de urgencia *" />
        <x-select-input wire:model.live="form.urgency_type" id="urgency_type" class="mt-1.5 w-full">
            <option value="">— Selecciona —</option>
            @foreach ($form->urgencyTypeOptions() as $tipo)
                <option value="{{ $tipo->value }}">{{ $tipo->label() }}</option>
            @endforeach
        </x-select-input>
        <x-input-error :messages="$errors->get('form.urgency_type')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="prioridad" value="Prioridad *" />
        <x-select-input wire:model.live="form.prioridad" id="prioridad" class="mt-1.5 w-full">
            @foreach ($form->prioridadOptions() as $opcion)
                <option value="{{ $opcion }}">{{ $opcion }}</option>
            @endforeach
        </x-select-input>
        <x-input-error :messages="$errors->get('form.prioridad')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="fecha_limite" value="Fecha y hora límite *" />
        @php $esSoporte = $form->urgency_type === \App\Enums\UrgencyType::Soporte->value; @endphp
        <x-text-input type="datetime-local" wire:model="form.fecha_limite" id="fecha_limite"
                      :readonly="$esSoporte"
                      @class(['mt-1.5 block w-full', 'bg-gray-50 text-gray-500' => $esSoporte]) />
        @if ($esSoporte)
            <p class="mt-1.5 text-xs text-gray-400">
                Calculada automáticamente — SLA {{ $form->prioridad ?: '—' }}:
                {{ $form->prioridad ? \App\Models\SlaConfig::horasPara(\App\Enums\Prioridad::from($form->prioridad)) : '—' }}h desde ahora.
            </p>
        @endif
        <x-input-error :messages="$errors->get('form.fecha_limite')" class="mt-2" />
    </div>

    <div>
        <x-input-label for="company_id" value="Empresa cliente" />
        <x-select-input wire:model.live="form.company_id" id="company_id" class="mt-1.5 w-full">
            <option value="">— Sin cliente (tarea interna) —</option>
            @foreach ($this->companies as $company)
                <option value="{{ $company->id }}">{{ $company->nombre }}</option>
            @endforeach
        </x-select-input>
    </div>

    @if ($form->company_id)
        <div class="flex items-end">
            <label class="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-gray-200 px-3.5 py-2.5 text-sm text-gray-600 transition hover:bg-gray-50">
                <input type="checkbox" wire:model="form.requiere_accion_cliente" class="rounded border-gray-300 text-cck-500 shadow-sm focus:ring-cck-400">
                Requiere acción del cliente (visible en el Portal)
            </label>
        </div>
    @endif

    <div class="sm:col-span-2">
        <x-input-label value="Responsables (equipo CCK) *" />
        <div class="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($this->usuarios as $usuario)
                <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-gray-200 px-3.5 py-2.5 transition hover:border-cck-300 hover:bg-cck-50/40 has-[:checked]:border-cck-400 has-[:checked]:bg-cck-50">
                    <input type="checkbox" wire:model="form.assignee_ids" value="{{ $usuario->id }}"
                           class="rounded border-gray-300 text-cck-500 shadow-sm focus:ring-cck-400">
                    <x-avatar :name="$usuario->name" size="xs" />
                    <span class="text-sm font-medium text-gray-700">{{ $usuario->name }}</span>
                </label>
            @endforeach
        </div>
        <x-input-error :messages="$errors->get('form.assignee_ids')" class="mt-2" />
    </div>
</div>