{{-- Modal: Detalhes da Fatura + Transações --}}
{{-- Controlado via Alpine: showDetalhe (bool), detalheItem (object com dados da fatura) --}}
{{-- x-teleport="body" move o modal para fora de qualquer stacking context (sidebar z-50, etc.) --}}
<template x-teleport="body">
<div x-show="showDetalhe" x-cloak
     x-effect="document.body.classList.toggle('overflow-hidden', showDetalhe)"
     class="fixed inset-0 z-[99999] overflow-y-auto"
     style="isolation: isolate;"
     @keydown.escape.window="showDetalhe = false">
    {{-- Backdrop --}}
    <div x-show="showDetalhe"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="showDetalhe = false"
         class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[99999]">
    </div>

    {{-- Centralizador --}}
    <div class="relative z-[100000] flex items-start sm:items-center justify-center min-h-full p-4">

    {{-- Modal content --}}
    <div x-show="showDetalhe" @click.stop
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95 translate-y-4"
         x-transition:enter-end="opacity-100 scale-100 translate-y-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100 translate-y-0"
         x-transition:leave-end="opacity-0 scale-95 translate-y-4"
         class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] flex flex-col overflow-hidden">

            {{-- Header --}}
            <div class="shrink-0" style="background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 100%);">
                <div class="px-6 py-4 flex items-center justify-between">
                    <div class="flex items-center gap-3 min-w-0">
                        <div class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center shrink-0">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        </div>
                        <div class="min-w-0">
                            <h3 class="text-base font-semibold text-white truncate" x-text="detalheItem.titulo"></h3>
                            <p class="text-xs text-white/60" x-text="'Matrícula Nº ' + detalheItem.matriculaNum"></p>
                        </div>
                    </div>
                    <button @click="showDetalhe = false" class="text-white/60 hover:text-white transition p-1 shrink-0">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
            </div>
            {{-- Barra de situação com cor sólida --}}
            <div class="px-6 py-2 flex items-center gap-2 shrink-0"
                 :class="{
                     'bg-emerald-500': detalheItem.situacaoClass.includes('emerald'),
                     'bg-red-500': detalheItem.situacaoClass.includes('red'),
                     'bg-amber-500': detalheItem.situacaoClass.includes('amber'),
                     'bg-gray-500': !detalheItem.situacaoClass.includes('emerald') && !detalheItem.situacaoClass.includes('red') && !detalheItem.situacaoClass.includes('amber')
                 }">
                <span class="w-2 h-2 rounded-full bg-white/40 shrink-0"></span>
                <span class="text-xs font-bold tracking-wide uppercase text-white"
                      x-text="detalheItem.situacao"></span>
            </div>

            {{-- Body (scrollável) --}}
            <div class="overflow-y-auto flex-1">
                {{-- Dados da fatura --}}
                <div class="px-6 py-5">
                    {{-- Curso + Turma --}}
                    <div class="mb-4">
                        <p class="text-sm font-semibold text-gray-900 dark:text-white" x-text="detalheItem.curso"></p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5" x-show="detalheItem.turma" x-text="detalheItem.turma"></p>
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5" x-text="'Matrícula Nº ' + detalheItem.matriculaNum"></p>
                    </div>

                    {{-- Grid de informações --}}
                    <div class="space-y-3 text-sm">
                        {{-- Vencimento + Valor (sempre visíveis) --}}
                        <div class="flex items-start justify-between">
                            <div>
                                <span class="block text-xs text-gray-400 dark:text-gray-500">Vencimento</span>
                                <span class="font-medium text-gray-700 dark:text-gray-300 uppercase" x-text="detalheItem.vencimento"></span>
                            </div>
                            <div class="text-right">
                                <span class="block text-xs text-gray-400 dark:text-gray-500">Valor</span>
                                <span class="font-bold text-gray-900 dark:text-white" x-text="detalheItem.valor"></span>
                            </div>
                        </div>
                        {{-- Pago em + Valor pago --}}
                        <div x-show="detalheItem.pagamentoData || detalheItem.pagamentoValor" class="flex items-start justify-between">
                            <div x-show="detalheItem.pagamentoData">
                                <span class="block text-xs text-gray-400 dark:text-gray-500">Pago em</span>
                                <span class="font-medium text-gray-700 dark:text-gray-300 uppercase" x-text="detalheItem.pagamentoData"></span>
                            </div>
                            <div x-show="detalheItem.pagamentoValor" class="text-right">
                                <span class="block text-xs text-gray-400 dark:text-gray-500">Valor pago</span>
                                <span class="font-semibold text-emerald-600 dark:text-emerald-400" x-text="detalheItem.pagamentoValor"></span>
                            </div>
                        </div>
                        {{-- Desconto + Forma --}}
                        <div x-show="detalheItem.desconto || detalheItem.forma" class="flex items-start justify-between">
                            <div x-show="detalheItem.desconto">
                                <span class="block text-xs text-gray-400 dark:text-gray-500">Desconto</span>
                                <span class="font-medium text-gray-700 dark:text-gray-300" x-text="detalheItem.desconto"></span>
                            </div>
                            <div x-show="detalheItem.forma" class="text-right" :class="{ 'ml-auto': !detalheItem.desconto }">
                                <span class="block text-xs text-gray-400 dark:text-gray-500">Forma</span>
                                <span class="font-medium text-gray-700 dark:text-gray-300 uppercase" x-text="detalheItem.forma"></span>
                            </div>
                        </div>
                    </div>

                    {{-- Descrição completa --}}
                    <template x-if="detalheItem.descricao">
                        <div class="mt-3 px-3 py-2 bg-gray-50 dark:bg-gray-700/30 rounded-lg">
                            <p class="text-xs text-gray-500 dark:text-gray-400" x-text="detalheItem.descricao"></p>
                        </div>
                    </template>
                </div>

                {{-- Transações (server-rendered via inner HTML) --}}
                <div x-show="detalheItem.temTransacoes" x-html="detalheItem.transacoesHtml"></div>

                {{-- Sem transações --}}
                <div x-show="!detalheItem.temTransacoes" class="px-6 py-8 text-center border-t border-gray-100 dark:border-gray-700">
                    <svg class="w-10 h-10 text-gray-200 dark:text-gray-700 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                    <p class="text-sm font-medium text-gray-400 dark:text-gray-500">Nenhuma transação registrada</p>
                    <p class="text-xs text-gray-300 dark:text-gray-600 mt-1">Ainda não há movimentação para esta fatura</p>
                </div>
            </div>

            {{-- Footer --}}
            <div class="px-6 py-3 border-t border-gray-100 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/50 flex items-center justify-end shrink-0">
                <button @click="showDetalhe = false"
                        class="px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition">
                    Fechar
                </button>
        </div>
    </div>

    </div>{{-- /centralizador --}}
</div>
</template>