@if($isBulkSending)
    @teleport('body')
    <div class="fixed inset-0 flex items-center justify-center z-9999 bg-black/70 backdrop-blur-sm animate-in fade-in duration-300">
        <div class="bg-white dark:bg-zinc-900 rounded-3xl shadow-2xl p-8 w-full max-w-md relative border border-zinc-200 dark:border-zinc-700 mx-4">
            <div class="flex flex-col items-center text-center">
                {{-- Icono Animado o Progreso Circular --}}
                <div class="relative mb-6">
                    <svg class="w-24 h-24 transform -rotate-90">
                        <circle cx="48" cy="48" r="40" stroke="currentColor" stroke-width="8" fill="transparent"
                            class="text-zinc-100 dark:text-zinc-800" />
                        <circle cx="48" cy="48" r="40" stroke="currentColor" stroke-width="8" fill="transparent"
                            stroke-dasharray="251.2"
                            stroke-dashoffset="{{ 251.2 - (251.2 * ($processedCount / ($totalToProcess ?: 1))) }}"
                            class="text-primary-800 transition-all duration-500 ease-out"
                            stroke-linecap="round" />
                    </svg>
                    <div class="absolute inset-0 flex items-center justify-center font-bold text-lg text-zinc-900 dark:text-zinc-100">
                        {{ round(($processedCount / ($totalToProcess ?: 1)) * 100) }}%
                    </div>
                </div>
                
                <h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
                    {{ $isBulkSendingFinished ? '¡Proceso Completado!' : 'Enviando Carnets...' }}
                </h3>
                
                <p class="text-zinc-500 dark:text-zinc-400 text-sm mb-6">
                    @if($isBulkSendingFinished)
                        {{ session('bulk-message') }}
                    @else
                        Procesando {{ $processedCount }} de {{ $totalToProcess }} miembros.
                    @endif
                    
                    @if($failedCount > 0)
                        <br><span class="text-red-500 font-semibold">{{ $failedCount }} errores detectados.</span>
                    @endif
                </p>
                
                <div class="w-full bg-zinc-100 dark:bg-zinc-800 rounded-full h-3 mb-2 overflow-hidden shadow-inner">
                    <div class="bg-primary-800 h-full transition-all duration-300 shadow-[0_0_10px_rgba(159,40,66,0.5)]" style="width: {{ ($processedCount / ($totalToProcess ?: 1)) * 100 }}%"></div>
                </div>
                
                @if($isBulkSendingFinished)
                    <button 
                        type="button"
                        wire:click="closeBulkModal"
                        class="mt-6 w-full py-3 px-4 bg-primary-800 hover:bg-primary-900 text-white font-bold rounded-xl transition-all shadow-lg hover:shadow-primary-900/20 active:scale-95"
                    >
                        Cerrar y Continuar
                    </button>
                @else
                    <p class="text-[10px] uppercase tracking-widest text-zinc-400 mt-4 font-semibold animate-pulse">No cierre esta ventana hasta completar</p>
                @endif
            </div>
        </div>
    </div>
    @endteleport

    @script
    <script>
        $wire.on('process-next-bulk', () => {
            // Un pequeño delay para permitir que el DOM respire y evitar colisiones
            setTimeout(() => {
                $wire.processNextInBulk();
            }, 100);
        });
    </script>
    @endscript
@endif