{{-- Información personalizada del DO (dinamicos-imp/{do}, dinamicos-exp/{do}): los campos que el cliente define en
     definicion_campos_po / ex_definicion_campos_po. Parámetros: $info, $camposDinamicos, $opciones ([índice => [valor =>
     texto]] para los campos de tipo lista), $editable (bool: muestra Guardar). Kit ui-ctc. --}}
@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="space-y-5">
    @include('livewire.partials.seguimiento-do.info-pedido')

    <x-tarjeta titulo="Información personalizada del pedido">
        @if (session()->has('message'))<x-alerta tipo="exito" class="mb-4">{{ session('message') }}</x-alerta>@endif
        @if (count($camposDinamicos))
            <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                @foreach ($camposDinamicos as $index => $cd)
                    @php $tipo = strtolower($cd->tipo_campo); $id = 'campo-' . $index; @endphp
                    <x-campo :etiqueta="$cd->descripcion" :para="$id" :class="$tipo == 'comentario' ? 'sm:col-span-2 xl:col-span-3' : ''" wire:key="cd-{{ $cd->id }}">
                        @switch($tipo)
                            @case('texto')
                                <x-input type="text" :id="$id" wire:model="camposDinamicos.{{ $index }}.value" />
                            @break
                            @case('numerico')
                                <x-input type="number" :id="$id" wire:model="camposDinamicos.{{ $index }}.value" />
                            @break
                            @case('fecha')
                                <x-input type="date" :id="$id" wire:model="camposDinamicos.{{ $index }}.value" />
                            @break
                            @case('lista')
                                <x-select :id="$id" class="uppercase" wire:model="camposDinamicos.{{ $index }}.value">
                                    <option>- Seleccione Valor -</option>
                                    @foreach ($opciones[$index] ?? [] as $valor => $texto)<option value="{{ $valor }}">{{ $texto }}</option>@endforeach
                                </x-select>
                            @break
                            @case('comentario')
                                <textarea id="{{ $id }}" rows="3" wire:model="camposDinamicos.{{ $index }}.value" class="{{ $areaClases }}"></textarea>
                            @break
                        @endswitch
                    </x-campo>
                @endforeach
            </div>
        @else
            <p class="py-4 text-center text-[13px] text-[var(--texto-suave)]">El cliente no tiene campos personalizados definidos.</p>
        @endif
        @if ($editable && count($camposDinamicos))
            <x-slot name="pie">
                <div class="flex justify-end">
                    <x-button type="button" wire:click="grabarCamposDinamicos" wire:loading.attr="disabled" wire:target="grabarCamposDinamicos">Guardar</x-button>
                </div>
            </x-slot>
        @endif
    </x-tarjeta>
</div>