{{-- Formulario de una actividad (crear y editar, impo y expo). Envía lo mismo que antes y en el mismo orden:
     [_method], _token, id_po, {campo de la orden}, cboEtapa, fecha, hora, descripcion. Parámetros:
       $accion, $metodo (null o 'PUT'), $idPo, $orden ['name', 'etiqueta', 'valor'], $etapas, $etapaSeleccionada,
       $etapaReadonly (atributo readonly del select, como estaba en editar), $fecha, $hora, $descripcion,
       $etiquetaDescripcion, $placeholderDescripcion, $conLimpiar, $puedeGuardar, $textoGuardar, $rutaCancelar. --}}
@php
    $cTexto = 'form-textarea block w-full rounded-md text-[13px] shadow-sm border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] placeholder:text-[var(--texto-tenue)] focus:border-[var(--acento)] focus:ring-[var(--acento)]';
@endphp
<form method="post" action="{{ $accion }}" class="space-y-5">
    @if ($metodo)
        @method($metodo)
    @endif
    @csrf

    <input type="hidden" name="id_po" value="{{ $idPo }}" />

    <x-tarjeta titulo="Registro de actividad">
        <div class="grid gap-x-4 gap-y-3.5 sm:grid-cols-2">
            <x-campo :etiqueta="$orden['etiqueta']" :para="$orden['name']">
                <x-input type="text" :name="$orden['name']" :id="$orden['name']" readonly="readonly" :value="$orden['valor']"
                         class="read-only:bg-[var(--superficie-2)] read-only:text-[var(--texto-suave)]" />
            </x-campo>

            <x-campo etiqueta="Etapa" para="cboEtapa">
                <x-select name="cboEtapa" id="cboEtapa" :readonly="$etapaReadonly">
                    <option value="0">Seleccione una Opción</option>
                    @foreach ($etapas as $fil)
                        <option value="{{ $fil->id }}" @selected($etapaSeleccionada !== null && $fil->id == $etapaSeleccionada)>{{ $fil->descripcion }}</option>
                    @endforeach
                </x-select>
            </x-campo>

            <x-campo etiqueta="Fecha" para="fecha">
                <x-input type="date" id="fecha" name="fecha" :value="$fecha" />
            </x-campo>

            <x-campo etiqueta="Hora" para="hora">
                <x-input type="time" id="hora" name="hora" :value="$hora" />
            </x-campo>

            <x-campo :etiqueta="$etiquetaDescripcion" para="descripcion" class="sm:col-span-2">
                <textarea id="descripcion" name="descripcion" rows="3" @if ($placeholderDescripcion) placeholder="{{ $placeholderDescripcion }}" @endif class="{{ $cTexto }}">{{ $descripcion }}</textarea>
            </x-campo>
        </div>

        <x-slot name="pie">
            <div class="flex flex-wrap items-center justify-end gap-2">
                <x-enlace-boton href="{{ $rutaCancelar }}">Cancelar</x-enlace-boton>
                @if ($conLimpiar)
                    <x-secondary-button type="reset"><x-icono nombre="arrow-uturn-left" /> Limpiar</x-secondary-button>
                @endif
                @if ($puedeGuardar)
                    <x-button><x-icono nombre="check" /> {{ $textoGuardar }}</x-button>
                @endif
            </div>
        </x-slot>
    </x-tarjeta>
</form>