@csrf
@if (isset($activityCategory))
    @method('PUT')
@endif

<div>
    <label for="name" class="mb-2 block text-sm font-semibold text-slate-700 dark:text-slate-200">Nombre <span class="text-red-500">*</span></label>
    <input id="name" name="name" type="text" maxlength="255" required autofocus
        value="{{ old('name', $activityCategory->name ?? '') }}"
        class="w-full rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm text-slate-900 focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-800 dark:text-white"
        placeholder="Ej. Llamada de seguimiento">
    @error('name')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>

<div>
    <label for="description" class="mb-2 block text-sm font-semibold text-slate-700 dark:text-slate-200">Descripción</label>
    <textarea id="description" name="description" rows="4" maxlength="255"
        class="w-full rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm text-slate-900 focus:border-primary focus:ring-primary dark:border-slate-700 dark:bg-slate-800 dark:text-white"
        placeholder="Indica cuándo debe usarse esta actividad">{{ old('description', $activityCategory->description ?? '') }}</textarea>
    @error('description')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
    <p class="mt-1 text-xs text-slate-500">Máximo 255 caracteres.</p>
</div>

<div class="flex flex-col-reverse gap-3 border-t border-slate-200 pt-5 dark:border-slate-800 sm:flex-row sm:justify-end">
    <a href="{{ route('realEstate.settings.activityCategories') }}"
        class="rounded-lg border border-slate-300 px-5 py-2.5 text-center text-sm font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">
        Cancelar
    </a>
    <button type="submit"
        class="rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-600">
        {{ isset($activityCategory) ? 'Guardar cambios' : 'Crear actividad' }}
    </button>
</div>