@props(['auditor'])

<div class="bg-white rounded-lg shadow p-4 text-sm">
    <h3 class="text-base font-semibold mb-4 text-center text-indigo-700">👤 Detalles del Usuario</h3>

    <img src="https://ui-avatars.com/api/?name={{ urlencode($auditor->nombre) }}&background=4f46e5&color=fff&rounded=true&size=96"
        alt="Avatar" class="w-20 h-20 rounded-full border-2 border-indigo-500 mb-3 mx-auto">

    <p class="text-center font-medium">{{ $auditor->nombre }}</p>
    <p class="text-center text-xs text-gray-500 italic">Persona {{ $auditor->tipo }}</p>

    <x-auditor-estado-badge :estado="$auditor->estado" />

    <ul class="mt-4 space-y-1">
        <li>📞 <strong>Teléfono:</strong> {{ $auditor->telefono ?? 'N/A' }}</li>
        <li>📱 <strong>Celular:</strong> {{ $auditor->celular ?? 'N/A' }}</li>
        <li>📧 <strong>Correo:</strong> {{ $auditor->correo }}</li>
        <li>📍 <strong>Dirección:</strong> {{ $auditor->direccion ?? 'N/A' }}</li>

        @if ($auditor->tipo === 'Juridico' && $auditor->juridico)
            <li>📄 <strong>RUC:</strong> {{ $auditor->juridico->ruc }}</li>
        @endif

        @if ($auditor->tipo === 'Natural' && $auditor->natural)
            <li>🆔 <strong>Cédula:</strong> {{ $auditor->natural->cedula }}</li>
        @endif
    </ul>

    @if ($auditor->resolucion_numero)
        <div class="mt-4 bg-indigo-50 border border-indigo-100 rounded p-3 text-xs text-indigo-800">
            <p>✅ <strong>Resolución:</strong> {{ $auditor->resolucion_numero }}</p>

            <p>🔔 <strong>Notificada:</strong> {{ $auditor->fecha_notificado_formateada_larga }}</p>
            <p>⏳ <strong>Vigencia:</strong> {{ $auditor->tiempo_vigencia_texto }}</p>
        </div>
    @endif

    <!-- Nota de Cotejo -->
    <div class="mt-4 p-4 border rounded-lg shadow-sm bg-gray-50 text-xs text-gray-800">
        <p class="font-semibold mb-2 text-gray-700 flex items-center gap-1">📑 Nota de Cotejo</p>

        @if (!$auditor->cotejo_url)
            <p class="text-red-600 font-medium">❌ No ha subido la nota de cotejo aún.</p>
        @else
            <p class="text-green-600 font-medium">✔️ Nota de cotejo subida correctamente.</p>
            <a href="{{ Storage::url($auditor->cotejo_url) }}" target="_blank"
                class="mt-2 inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-white bg-green-600 rounded-lg shadow hover:bg-green-700 transition">
                <x-heroicon-o-document-text class="w-4 h-4" />
                Ver Nota de Cotejo
            </a>
        @endif
    </div>

    <!-- Resolución -->
    <div class="mt-4 p-4 border rounded-lg shadow-sm bg-indigo-50 text-xs text-indigo-900">
        <p class="font-semibold mb-2 flex items-center gap-1">📄 Resolución</p>

        @if ($auditor->resolucion_url)
            <a href="{{ Storage::url($auditor->resolucion_url) }}" target="_blank"
                class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-white bg-indigo-600 rounded-lg shadow hover:bg-indigo-700 transition">
                <x-heroicon-o-document-text class="w-4 h-4" />
                Ver Resolución
            </a>
        @endif
    </div>


</div>