@props(['pendientes'])

@if ($pendientes && count($pendientes) > 0)
    <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4 rounded">
        <p class="font-semibold mb-4">Tienes cambios solicitados pendientes:</p>
        <ul class="space-y-6 text-sm">
            @foreach ($pendientes as $cambio)
                @php
                    $campos = json_decode($cambio->campos ?? '[]', true);
                    $documentosIds = json_decode($cambio->documentos ?? '[]', true);
                    $documentosNombres = \App\Models\NombreDocumento::whereIn('id', $documentosIds)->pluck('nombre_documento')->toArray();
                @endphp
                <li class="flex justify-between items-start bg-yellow-50 border border-yellow-400 rounded p-4 shadow-sm">
                    <div>
                        <p><strong>Campos:</strong> {{ implode(', ', $campos) ?: '—' }}</p>
                        <p><strong>Documentos:</strong> {{ implode(', ', $documentosNombres) ?: 'Ninguno' }}</p>
                        <p><strong>Observaciones:</strong> {{ $cambio->observaciones ?? 'Ninguna' }}</p>
                    </div>
                    <a href="{{ route('auditor.correcciones') }}" 
                       class="ml-4 inline-block px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600 transition">
                        Corregir Cambios
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
@endif