{{-- ============================================= --}}
{{-- FASE: MATRÍCULA CONCLUÍDA (SUCESSO)          --}}
{{-- ============================================= --}}

<div class="space-y-6">

    {{-- Banner de sucesso --}}
    <div class="bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-950/30 dark:to-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-2xl p-6 md:p-8 text-center">
        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-emerald-500 flex items-center justify-center shadow-lg shadow-emerald-200 dark:shadow-emerald-900/40">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
            </svg>
        </div>
        <h2 class="text-xl md:text-2xl font-bold text-emerald-800 dark:text-emerald-200">Matrícula Realizada com Sucesso!</h2>
        <p class="text-sm text-emerald-600 dark:text-emerald-400 mt-1">Parabéns! Sua matrícula foi efetivada. Confira os dados abaixo.</p>
    </div>

    {{-- Cards de resumo --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Dados do Aluno --}}
        <x-matricula.info-card :aluno="$matricula->aluno ?? null" titulo="Dados do Aluno" icon="user" />

        {{-- Dados da Matrícula --}}
        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden">
            <div class="bg-gradient-to-r from-emerald-600 to-emerald-700 px-5 py-3">
                <div class="flex items-center gap-2">
                    <x-icon name="academic-cap" class="w-5 h-5 text-white/80" />
                    <h3 class="text-sm font-semibold text-white uppercase tracking-wide">Matrícula & Curso</h3>
                </div>
            </div>
            <div class="divide-y divide-gray-100 dark:divide-gray-800">
                <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                    <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Matrícula</div>
                    <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200">
                        <span class="font-semibold">{{ $financeiro->matricula->matricula_num ?? '---' }}</span>
                        <span class="text-gray-400 text-xs ml-1">— {{ dataCarbon($financeiro->matricula->matricula_datahora ?? '', 'd/m/Y H:i') }}</span>
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                    <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Curso</div>
                    <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 capitalize">{{ $turma->curso->nome ?? '---' }}</div>
                </div>
                <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                    <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Turma</div>
                    <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 capitalize">
                        {{ $turma->turma_codigo ?? '---' }} —
                        {{ ($turma->data_inicio ?? false) ? dataData($turma->data_inicio) : '--/--/----' }}
                        até {{ ($turma->data_termino ?? false) ? dataData($turma->data_termino) : '--/--/----' }}
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                    <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Descrição</div>
                    <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 capitalize">{{ $turma->turma_nome ?? '' }} — {{ $turma->descricao_dia ?? '' }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Resumo financeiro --}}
    <x-matricula.payment-summary :carrinho="$forma_pgto_carrinho" titulo="Detalhamento do Pagamento" />

    {{-- Pagamento realizado --}}
    <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden">
        <div class="bg-gradient-to-r from-emerald-600 to-emerald-700 px-5 py-3">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <h3 class="text-sm font-semibold text-white uppercase tracking-wide">Pagamento Realizado</h3>
            </div>
        </div>
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Forma</div>
                <div class="sm:w-3/5 text-sm font-medium text-gray-800 dark:text-gray-200 uppercase">{{ __($financeiro->pagamento_forma ?? '---') }}</div>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Valor</div>
                <div class="sm:w-3/5 text-sm font-medium text-gray-800 dark:text-gray-200">{{ $financeiro->pagamento_valor ? convertMoney($financeiro->pagamento_valor, 'R$ ') : '---' }}</div>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Data</div>
                <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200">{{ $financeiro->pagamento_data ? dataData($financeiro->pagamento_data) : '---' }}</div>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Situação</div>
                <div class="sm:w-3/5">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300">
                        {{ $financeiro->pagamento_situacao ?? '---' }}
                    </span>
                </div>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-2/5 text-xs font-medium text-gray-400 uppercase tracking-wide">Código Transação</div>
                <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 font-mono">{{ $financeiro->transacao->operadora_nsu ?? '---' }}</div>
            </div>
        </div>
    </div>

    {{-- Card de acesso à plataforma --}}
    <div class="bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-950/30 dark:to-emerald-900/20 border-2 border-emerald-300 dark:border-emerald-700 rounded-2xl overflow-hidden shadow-md">
        <div class="px-6 py-5 border-b border-emerald-200 dark:border-emerald-800">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-emerald-500 flex items-center justify-center">
                    <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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-emerald-800 dark:text-emerald-200">Acesso à Plataforma</h3>
                    <p class="text-xs text-emerald-600 dark:text-emerald-400">Use os dados abaixo para fazer login</p>
                </div>
            </div>
        </div>
        <div class="divide-y divide-emerald-200 dark:divide-emerald-800">
            <div class="flex flex-col sm:flex-row sm:items-center px-6 py-3 gap-1 sm:gap-0">
                <div class="sm:w-1/3 text-xs font-medium text-emerald-500 dark:text-emerald-400 uppercase tracking-wide">Usuário</div>
                <div class="sm:w-2/3 text-sm font-bold text-emerald-800 dark:text-emerald-200 lowercase">{{ $aluno->email ?? '' }}</div>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center px-6 py-3 gap-1 sm:gap-0">
                <div class="sm:w-1/3 text-xs font-medium text-emerald-500 dark:text-emerald-400 uppercase tracking-wide">Senha Inicial</div>
                <div class="sm:w-2/3 text-sm font-bold text-emerald-800 dark:text-emerald-200">
                    SEU CPF (11 Dígitos) <span class="font-normal text-emerald-600 dark:text-emerald-400">Ex: 11122233344</span>
                </div>
            </div>
            <div class="flex flex-col sm:flex-row sm:items-center px-6 py-3 gap-1 sm:gap-0">
                <div class="sm:w-1/3 text-xs font-medium text-emerald-500 dark:text-emerald-400 uppercase tracking-wide">URL</div>
                <div class="sm:w-2/3 text-sm font-bold text-emerald-800 dark:text-emerald-200">{{ env('APP_URL_PORTAL', 'https://portal.ibrevayah.com.br') }}</div>
            </div>
        </div>
        <div class="px-6 py-5">
            <a href="{{ route('home') }}"
               class="block w-full py-3 px-4 bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800
                      text-white font-semibold text-sm text-center rounded-xl shadow-md shadow-emerald-200 dark:shadow-emerald-900/40 transition-all duration-200">
                🎓 ACESSAR PLATAFORMA EAD
            </a>
        </div>
    </div>
</div>