@props(['equiposPorExpediente'])

<div class="mt-6 border p-4 rounded-md w-full bg-gray-800 border-gray-700 text-gray-300 overflow-auto">
    <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
        <x-heroicon-o-users class="w-6 h-6 text-indigo-400" />
        Equipo Técnico
    </h2>

    @if($equiposPorExpediente->isEmpty())
        <p class="text-center italic text-gray-400">No hay miembros en el equipo técnico.</p>
    @else
        @foreach($equiposPorExpediente as $expedienteId => $equipo)
            {{-- Título del expediente con número --}}
            <h3 class="font-bold mt-6 mb-2 text-indigo-400">
                Expediente {{ $equipo->first()->expediente->numero_expediente ?? $expedienteId }}
            </h3>

            {{-- Tabla Desktop --}}
            <div class="hidden md:block overflow-x-auto rounded-lg border border-gray-700 shadow-sm mb-6">
                <table class="w-full table-auto text-sm text-gray-300 border-collapse">
                    <thead>
                        <tr>
                            <th class="border px-3 py-2 text-left"><x-heroicon-o-user class="inline w-5 h-5" /> Auditor</th>
                            <th class="border px-3 py-2 text-left"><x-heroicon-o-identification class="inline w-5 h-5" /> Cédula</th>
                            <th class="border px-3 py-2 text-left"><x-heroicon-o-document-text class="inline w-5 h-5" /> Resolución</th>
                            <th class="border px-3 py-2 text-left"><x-heroicon-o-clipboard-document class="inline w-5 h-5" /> Carta de Compromiso</th>
                        </tr>
                    </thead>
                    <tbody class="bg-gray-800">
                        @foreach($equipo as $index => $miembro)
                            <tr class="hover:bg-indigo-900 transition">
                                <td class="border px-3 py-2 whitespace-nowrap">
                                    {{ $miembro->auditorNatural->nombre ?? '—' }}
                                </td>
                                <td class="border px-3 py-2 whitespace-nowrap">
                                    {{ $miembro->auditorNatural->cedula ?? '—' }}
                                </td>
                                @foreach(['resolucion', 'carta_compromiso'] as $field)
                                    <td class="border px-3 py-2">
                                        <div x-data>
                                            <button
                                                @click="$dispatch('open-modal', { id: 'modal-{{ $expedienteId }}-{{ $index }}-{{ $field }}' })"
                                                class="text-indigo-400 hover:underline flex items-center gap-1"
                                            >
                                                <x-heroicon-o-eye class="w-5 h-5" /> Ver
                                            </button>
                                            <x-filament::modal
                                                id="modal-{{ $expedienteId }}-{{ $index }}-{{ $field }}"
                                                width="screen"
                                                close-by-clicking-away
                                                close-by-escaping
                                                custom-classes="p-0"
                                            >
                                                <x-slot name="heading">
                                                    <span class="flex items-center gap-1">
                                                        <x-heroicon-o-document-text class="w-5 h-5" /> 
                                                        {{ Str::title(str_replace('_', ' ', $field)) }}
                                                    </span>
                                                </x-slot>
                                                <iframe
                                                    src="{{ asset('storage/' . $miembro->$field) }}"
                                                    class="w-full h-screen"
                                                    frameborder="0"
                                                ></iframe>
                                            </x-filament::modal>
                                        </div>
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- Versión Móvil --}}
            <div class="md:hidden space-y-4 mt-4">
                @foreach($equipo as $index => $miembro)
                    <div class="bg-gray-900 rounded-lg shadow p-4 border border-gray-700 text-gray-300">
                        <p><strong>Auditor:</strong> {{ $miembro->auditor->nombre ?? '—' }}</p>
                        <p><strong>Cédula:</strong> {{ $miembro->auditor->cedula ?? '—' }}</p>
                        @foreach(['resolucion' => 'Resolución', 'carta_compromiso' => 'Carta de Compromiso'] as $field => $label)
                            <button
                                @click="$dispatch('open-modal', { id: 'modal-{{ $expedienteId }}-{{ $index }}-{{ $field }}' })"
                                class="text-indigo-400 hover:underline flex items-center gap-1 mt-2"
                            >
                                <x-heroicon-o-eye class="w-5 h-5" /> Ver {{ $label }}
                            </button>
                            <x-filament::modal
                                id="modal-{{ $expedienteId }}-{{ $index }}-{{ $field }}"
                                width="screen"
                                close-by-clicking-away
                                close-by-escaping
                                custom-classes="p-0"
                            >
                                <x-slot name="heading">
                                    <span class="flex items-center gap-1">
                                        <x-heroicon-o-document-text class="w-5 h-5" /> {{ $label }}
                                    </span>
                                </x-slot>
                                <iframe
                                    src="{{ asset('storage/' . $miembro->$field) }}"
                                    class="w-full h-screen"
                                    frameborder="0"
                                ></iframe>
                            </x-filament::modal>
                        @endforeach
                    </div>
                @endforeach
            </div>
        @endforeach
    @endif
</div>