{{-- Pendientes de la operación de un DO (impo/seguimiento-pendiente/{do}): registrar un pendiente con su comentario,
     agregar comentarios y finalizarlo. Los comentarios los ve el cliente como trazabilidad. Kit ui-ctc (MigracionLayout.MD
     L3, pantallas de L2a). --}}
@php
    $areaClases = 'form-textarea block w-full rounded-md border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[13px] text-[var(--texto)] shadow-sm placeholder:text-[var(--texto-tenue)] focus:border-[var(--acento)] focus:ring-[var(--acento)]';
@endphp
<div class="grid items-start gap-5 lg:grid-cols-2">
    <x-tarjeta titulo="Reportar pendiente" descripcion="Seleccione para adicionar la causal o pendiente activo en el proceso.">
        <div class="space-y-4">
            <x-campo etiqueta="Pendientes en el proceso" para="idPendiente" error="idPendiente">
                <x-select id="idPendiente" wire:model="idPendiente">
                    <option value="">- Seleccione una opción -</option>
                    @foreach ($lstPendientes as $id => $item)<option value="{{ $id }}">{{ $item }}</option>@endforeach
                </x-select>
            </x-campo>
            <x-campo etiqueta="Comentarios / observaciones" para="observacion" error="observacion"
                     ayuda="Estos comentarios u observaciones los verá el cliente como trazabilidad.">
                <textarea id="observacion" rows="4" wire:model="observacion" class="{{ $areaClases }}"></textarea>
            </x-campo>
        </div>
        <x-slot name="pie">
            <div class="flex justify-end">
                <x-button type="button" wire:click="save" wire:loading.attr="disabled" wire:target="save">Guardar</x-button>
            </div>
        </x-slot>
    </x-tarjeta>

    <x-tarjeta titulo="Pendientes del DO" :relleno="false">
        @if (count($pendientes))
            <x-slot name="acciones"><x-etiqueta>{{ count($pendientes) }}</x-etiqueta></x-slot>
            <ul role="list" class="divide-y divide-[var(--borde)]">
                @foreach ($pendientes as $item)
                    <li wire:key="pend-{{ $item->id }}" class="flex gap-3 px-4 py-4">
                        <img class="h-9 w-9 flex-none rounded-full bg-[var(--superficie-2)] object-cover" alt=""
                             src="{{ ! is_null($item->usuario->avatar) ? $item->usuario->avatar->foto : Avatar::create($item->usuario->nombre1)->toBase64() }}">
                        <div class="min-w-0 flex-1 space-y-2">
                            <div class="flex flex-wrap items-center gap-2">
                                <span class="text-[13px] font-semibold capitalize text-[var(--texto)]">{{ strtolower($item->usuario->nombre1) }} {{ strtolower($item->usuario->apellido1) }}</span>
                                <x-etiqueta variante="acento" class="capitalize">{{ strtolower($item->pendiente->descripcion) }}</x-etiqueta>
                                @if ($item->status)<x-etiqueta variante="exito">Finalizado</x-etiqueta>@else<x-etiqueta variante="aviso">Abierto</x-etiqueta>@endif
                            </div>
                            <p class="text-[12px] tabular-nums text-[var(--texto-suave)]">Creado {{ $item->created_at }}</p>
                            @if (count($item->detalle))
                                <ul class="space-y-1.5 rounded-lg border border-[var(--borde)] bg-[var(--superficie-2)] p-3">
                                    @foreach ($item->detalle as $det)
                                        <li class="flex gap-2 text-[12.5px] text-[var(--texto)]">
                                            <x-icono nombre="chat-bubble-left-ellipsis" class="mt-0.5 h-4 w-4 text-[var(--texto-tenue)]" />
                                            <p class="min-w-0">{{ $det->observacion }} <span class="whitespace-nowrap text-[11px] italic text-[var(--texto-tenue)]">· {{ $det->created_at }}</span></p>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                            <div class="flex flex-wrap gap-2">
                                <x-secondary-button class="!h-8 !px-3" :disabled="(bool) $item->status"
                                                    wire:click="agregarComentario({{ (int) $item->id_pendiente_operacion }})" x-on:click="$nextTick(() => document.getElementById('observacion').focus())">
                                    <x-icono nombre="chat-bubble-left" class="h-4 w-4" /> Agregar comentario
                                </x-secondary-button>
                                <x-secondary-button class="!h-8 !px-3 text-emerald-700 dark:text-emerald-300" :disabled="(bool) $item->status"
                                                    wire:click="finalizarPendiente({{ (int) $item->id_pendiente_operacion }})">
                                    <x-icono nombre="check-circle" class="h-4 w-4" /> Finalizar pendiente
                                </x-secondary-button>
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>
        @else
            <p class="px-4 py-10 text-center text-[13px] text-[var(--texto-suave)]">Este DO no tiene pendientes registrados.</p>
        @endif
    </x-tarjeta>
</div>