@props(['auditor'])
@php $equipo = $auditor->juridico->equipoTecnico ?? collect(); @endphp

<section class="space-y-6 text-gray-900 dark:text-gray-100 font-sans text-sm">

    {{-- Fila 1: Datos Generales --}}
    <div class="bg-white dark:bg-gray-900 shadow rounded-md p-4 border border-gray-200 dark:border-gray-700">
        <h3
            class="flex items-center text-base font-semibold mb-3 border-b border-gray-300 dark:border-gray-700 pb-1 gap-2">
            🧾 Datos Generales
        </h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
            <x-info-item label="Tipo" :value="$auditor->tipo" icon="heroicon-o-user-circle" />
            <x-info-item label="Nombre" :value="$auditor->nombre" icon="heroicon-o-user" />
            <x-info-item label="Correo" :value="$auditor->correo" icon="heroicon-o-envelope" />
            <x-info-item label="Teléfono" :value="$auditor->telefono" icon="heroicon-o-phone" />
            <x-info-item label="Celular" :value="$auditor->celular" icon="heroicon-o-phone" />
            <x-info-item label="Estado" :value="$auditor->estado" icon="heroicon-o-check-circle" />
        </div>
    </div>

    {{-- Fila 2: Resolución + Info Específica --}}
    <div class="flex flex-col lg:flex-row gap-6">
        {{-- Resolución --}}
        @if ($auditor->estado !== 'Solicitud')
            <div
                class="flex-1 bg-white dark:bg-gray-900 shadow rounded-md p-4 border border-gray-200 dark:border-gray-700">
                <h3
                    class="flex items-center text-base font-semibold mb-3 border-b border-gray-300 dark:border-gray-700 pb-1 gap-2">
                    📄 Resolución
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                    <x-info-item label="Número" :value="$auditor->resolucion_numero" icon="heroicon-o-document-text" />

                    <x-info-item label="Notificado" :value="$auditor->notificado_fecha ? 'Sí' : 'No'" icon="heroicon-o-bell" />
                    <x-info-item label="Fecha notif." :value="$auditor->fecha_notificado_formateada_larga" icon="heroicon-o-calendar-days" />
                    <x-info-item label="Vence" :value="$auditor->fecha_vencimiento_formateada_larga" icon="heroicon-o-clock" />
                    <x-info-item label="Vigencia" :value="$auditor->tiempo_vigencia_texto" icon="heroicon-o-clock" />
                </div>
            </div>
        @endif

        {{-- Info Específica --}}
        <div class="flex-1 bg-white dark:bg-gray-900 shadow rounded-md p-4 border border-gray-200 dark:border-gray-700">
            <h3
                class="flex items-center text-base font-semibold mb-3 border-b border-gray-300 dark:border-gray-700 pb-1 gap-2">
                🔍 Info Específica
            </h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                @if ($auditor->tipo === 'Natural' && $auditor->natural)
                    <x-info-item label="Cédula" :value="$auditor->natural->cedula" icon="heroicon-o-identification" />
                    <x-info-item label="Título" :value="$auditor->natural->titulo" icon="heroicon-o-academic-cap" />
                    <x-info-item label="Idoneidad" :value="$auditor->natural->ideonidad" icon="heroicon-o-briefcase" />
                @elseif($auditor->tipo === 'Juridico' && $auditor->juridico)
                    <x-info-item label="Empresa" :value="$auditor->juridico->empresa" icon="heroicon-o-building-office-2" />
                    <x-info-item label="RUC" :value="$auditor->juridico->ruc" icon="heroicon-o-identification" />
                    <x-info-item label="Web" :value="$auditor->juridico->web" icon="heroicon-o-globe-alt" />
                    <x-info-item label="Resp. Nombre" :value="$auditor->juridico->responsable_nombre" icon="heroicon-o-user-group" colspan=2 />
                    <x-info-item label="Resp. Cédula" :value="$auditor->juridico->responsable_cedula" icon="heroicon-o-identification" />
                    <x-info-item label="Resp. Cargo" :value="$auditor->juridico->responsable_cargo" icon="heroicon-o-briefcase" />
                @else
                    <p class="italic text-gray-500 dark:text-gray-400">No hay información específica.</p>
                @endif
            </div>
        </div>
    </div>

    {{-- Fila 3: Ubicación + Fechas --}}
    <div class="flex flex-col lg:flex-row gap-6">
        {{-- Ubicación --}}
        <div class="flex-1 bg-white dark:bg-gray-900 shadow rounded-md p-4 border border-gray-200 dark:border-gray-700">
            <h3
                class="flex items-center text-base font-semibold mb-3 border-b border-gray-300 dark:border-gray-700 pb-1 gap-2">
                📍 Ubicación
            </h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                <x-info-item label="País" :value="$auditor->pais" icon="heroicon-o-globe-alt" />
                <x-info-item label="Provincia" :value="$auditor->provincia" icon="heroicon-o-map" />
                <x-info-item label="Distrito" :value="$auditor->distrito" icon="heroicon-o-map-pin" />
                <x-info-item label="Corregimiento" :value="$auditor->corregimiento" icon="heroicon-o-map-pin" />
                <x-info-item label="Dirección" :value="$auditor->direccion" icon="heroicon-o-home"
                    class="col-span-3 md:col-span-3" />
            </div>
        </div>

        {{-- Fechas --}}
        @if ($auditor->estado !== 'Solicitud')
            <div
                class="flex-1 bg-white dark:bg-gray-900 shadow rounded-md p-4 border border-gray-200 dark:border-gray-700">
                <h3
                    class="flex items-center text-base font-semibold mb-3 border-b border-gray-300 dark:border-gray-700 pb-1 gap-2">
                    🕒 Fechas Registro
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">

                </div>
            </div>
        @endif
    </div>

    {{-- Fila 4: Equipo Técnico --}}
    @if ($auditor->tipo === 'Juridico' && $equipo->isNotEmpty())
        <div class="bg-white dark:bg-gray-900 shadow rounded-md p-4 border border-gray-200 dark:border-gray-700">
            <h3
                class="flex items-center text-base font-semibold mb-3 border-b border-gray-300 dark:border-gray-700 pb-1 gap-2">
                👥 Equipo Técnico
            </h3>
            <br>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                @foreach ($equipo as $miembro)
                    <div class="border rounded-md p-3 bg-gray-50 dark:bg-gray-800 text-xs space-y-2">
                        <p><strong>Resolución:</strong>
                            @if ($miembro->resolucion)
                                <a href="{{ asset('storage/' . ltrim($miembro->resolucion, '/')) }}"
                                    class="text-blue-600 hover:underline" target="_blank">Ver</a>
                            @else
                                <span class="text-red-600">N/A</span>
                            @endif
                        </p>
                        <p><strong>Carta comp.:</strong>
                            @if ($miembro->carta_compromiso)
                                <a href="{{ asset('storage/' . ltrim($miembro->resolucion, '/')) }}"
                                    class="text-blue-600 hover:underline" target="_blank">Ver</a>
                            @else
                                <span class="text-red-600">N/A</span>
                            @endif
                        </p>
                        <p class="font-semibold text-right text-gray-700 dark:text-gray-200 truncate">
                            {{ $miembro->auditor->nombre }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    @endif


</section>