{{-- Línea de tiempo del DO de importación (seguimiento-imp/{do}). Los usuarios con operación E registran, editan y
     eliminan las actividades del cliente. Kit ui-ctc (MigracionLayout.MD L3, pantallas de L2a). --}}
@php $editable = Auth::user()->operacion == 'E'; @endphp
<div x-data="{ modalActividad: false }" x-on:abrir-actividad="modalActividad = true" x-on:keydown.escape.window="if (modalActividad) { modalActividad = false; $wire.limpiarFeed() }">
    <x-tarjeta titulo="Línea de tiempo del pedido" :relleno="false">
        @if ($editable)
            <x-slot name="acciones">
                <x-secondary-button class="!h-8 !px-3" wire:click="limpiarFeed" x-on:click="modalActividad = true">
                    <x-icono nombre="plus-circle" class="h-4 w-4" /> Nueva actividad
                </x-secondary-button>
            </x-slot>
        @endif
        <div class="p-3">
            @if (count($feeds) > 0)
                @include('livewire.partials.seguimiento-do.linea-tiempo', ['feeds' => $feeds, 'editable' => $editable])
            @else
                <p class="px-2 py-6 text-center text-[13px] text-[var(--texto-suave)]">No se han registrado actividades para este pedido.</p>
            @endif
        </div>
    </x-tarjeta>

    @if ($editable)
        {{-- Registrar o editar una actividad --}}
        <template x-teleport="body">
            <div x-show="modalActividad" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="actividad-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="modalActividad = false; $wire.limpiarFeed()"></div>
                <div class="relative w-full max-w-lg overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                    <header class="flex items-center gap-3 border-b border-[var(--borde)] px-5 py-4">
                        <h2 id="actividad-titulo" class="flex-1 text-[15px] font-bold text-[var(--texto)]">Actividad de seguimiento</h2>
                        <x-boton-icono etiqueta="Cerrar" x-on:click="modalActividad = false; $wire.limpiarFeed()"><x-icono nombre="x-mark" class="h-5 w-5" /></x-boton-icono>
                    </header>
                    <div class="space-y-4 px-5 py-4">
                        @if ($errors->any())
                            <x-alerta tipo="error">
                                <p class="font-semibold">Se han presentado los siguientes errores.</p>
                                <ul class="mt-1 list-disc pl-5">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                            </x-alerta>
                        @endif
                        @if (session()->has('message'))<x-alerta tipo="exito">{{ session('message') }}</x-alerta>@endif
                        <x-campo etiqueta="Etapa" para="idActividad">
                            <x-select id="idActividad" wire:model="idActividad" :disabled="! empty($idEtapa)">
                                <option value="">- Seleccione una opción -</option>
                                @foreach ($etapas as $tipo => $nombre)<option value="{{ $tipo }}">{{ $nombre }}</option>@endforeach
                            </x-select>
                        </x-campo>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <x-campo etiqueta="Fecha actividad" para="fechaActividad"><x-input type="date" id="fechaActividad" wire:model="fechaActividad" /></x-campo>
                            <x-campo etiqueta="Hora actividad" para="horaActividad"><x-input type="time" id="horaActividad" wire:model="horaActividad" /></x-campo>
                        </div>
                        <x-campo etiqueta="Observaciones" para="observaciones">
                            <textarea id="observaciones" wire:model="observaciones" rows="4"
                                      class="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)]"></textarea>
                        </x-campo>
                    </div>
                    <footer class="flex flex-row-reverse flex-wrap gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-button type="button" wire:click="grabarActividad" wire:loading.attr="disabled" wire:target="grabarActividad">Guardar</x-button>
                        <x-secondary-button wire:click="limpiarFeed" x-on:click="modalActividad = false">Cerrar</x-secondary-button>
                    </footer>
                </div>
            </div>
        </template>
    @endif
</div>