{{-- ============================================= --}}
{{-- PÁGINA DE PAGAMENTO (MODERNIZADA)           --}}
{{-- Layout: Hero + Card Central Full             --}}
{{-- Padrão: Similar à matrícula                  --}}
{{-- ============================================= --}}

<div id="div_top" class="{{ ($size ?? false) ? 'w-full' : 'max-w-5xl mx-auto pt-0 md:pt-8 px-2 md:px-0' }}" style="--bg-override: #fff;">

    {{-- Background azul claro na página --}}
    <style>body { background-color: #f0f4fb !important; }</style>

    <script type="text/javascript" src="{{asset('js/global.js')}}"></script>

    {{-- Hero Header (padrão matrícula) --}}
    @php
        $heroVariant = ($financeiro_sucesso ?? false) ? 'success' : 'default';
        $heroSubtitle = ($financeiro_sucesso ?? false)
            ? 'Seu pagamento foi processado com sucesso!'
            : 'Finalize seu pagamento de forma rápida e segura';
    @endphp

    <div class="flex flex-col md:flex-row items-stretch gap-4">
        {{-- Logo Card (destacado, fundo branco) --}}
        <div class="flex-shrink-0 bg-white border border-gray-200 dark:border-gray-700 rounded-2xl shadow-sm p-5 md:p-6 flex items-center justify-center">
            <x-application-mark class="block h-12 md:h-16 w-auto" />
        </div>

        {{-- Card Gradient (título + info) --}}
        <div class="flex-1 relative rounded-2xl overflow-hidden shadow-lg">
            <div class="bg-gradient-to-br {{ $heroVariant === 'success' ? 'from-emerald-900 via-emerald-700 to-emerald-500' : 'from-indigo-950 via-indigo-800 to-indigo-600' }}">
                {{-- Decoração --}}
                <div class="absolute inset-0 pointer-events-none overflow-hidden">
                    <div class="absolute -top-16 -right-16 w-[250px] h-[250px] bg-white/[0.06] rounded-full"></div>
                    <div class="absolute -bottom-12 -left-12 w-[200px] h-[200px] bg-white/[0.04] rounded-full"></div>
                    <div class="absolute top-1/2 right-1/4 w-[100px] h-[100px] bg-white/[0.03] rounded-full"></div>
                </div>

                <div class="relative z-10 px-6 py-5 md:px-8 md:py-6">
                    <div class="flex flex-col md:flex-row items-center md:items-start justify-between gap-3">
                        {{-- Título + Subtítulo --}}
                        <div class="flex items-center gap-3">
                            <div class="text-center md:text-left">
                                <h1 class="text-lg md:text-xl font-bold text-white tracking-wide">PAGAMENTO</h1>
                                <p class="text-sm text-white/70 mt-0.5">{{ $heroSubtitle }}</p>
                            </div>
                            @if ($sandbox ?? false)
                                <span class="inline-block mt-1 px-2.5 py-0.5 bg-amber-400/90 text-amber-950 text-[10px] font-bold rounded-full uppercase tracking-wider">
                                    Sandbox
                                </span>
                            @endif
                        </div>
                    </div>

                    {{-- Informações de Suporte --}}
                    <div class="my-2 border-t border-white/20"></div>
                    <div class="flex flex-col md:flex-row items-center gap-2">
                        <div class="flex justify-center items-center gap-2">
                            <div class="text-sm font-bold text-white uppercase tracking-wider">Suporte</div>
                            <div class="text-sm text-white uppercase">Seg a Sex · 10h às 18h</div>
                        </div>
                        <div class="flex justify-center items-center gap-2">
                            <a href="tel:5521988543282" class="flex items-center gap-1.5 text-white hover:text-white/80 transition-colors">
                                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.57.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1.02l-2.2 2.2z"/></svg>
                                <span class="text-sm font-semibold">(21) 98854-3282</span>
                            </a>
                            <a href="https://wa.me/5521988543282" class="flex items-center gap-1 text-white hover:text-white/80 transition-colors" title="WhatsApp">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.832-1.438A9.955 9.955 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2zm0 18a8 8 0 01-4.29-1.24l-.28-.17-3.06.8.82-3-.18-.29A8 8 0 1112 20z"/></svg>
                                <span class="text-sm font-semibold">(21) 98854-3282</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ========== CARD CENTRAL FULL ========== --}}
    <div class="w-full bg-white dark:bg-dark-card border border-gray-200 dark:border-gray-700 rounded-2xl shadow-sm mt-5 overflow-hidden">

        {{-- Conteúdo principal --}}
        <div class="px-5 md:px-8 py-5 md:py-6">

            @if ($this->financeiro ?? false)

                {{-- Botão Voltar (apenas se veio do financeiro e não for sucesso) --}}
                @if ($vem_do_financeiro && !($financeiro_sucesso ?? false))
                    <div class="mb-6">
                        <a href="{{ route('aluno-financeiro') }}"
                        class="inline-flex items-center gap-2 px-4 py-2
                                text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400
                                font-medium text-sm transition-colors duration-200">
                            <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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                            </svg>
                            Voltar ao Financeiro
                        </a>
                    </div>
                @endif

                {{-- Cards superiores em grid --}}
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">

                    {{-- Card: Informações do Pagamento --}}
                    <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-indigo-600 to-indigo-700 px-5 py-3">
                            <div class="flex items-center gap-2">
                                <x-icon name="document-text" class="w-5 h-5 text-white/80" />
                                <h3 class="text-sm font-semibold text-white uppercase tracking-wide">Informações do Pagamento</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 font-semibold text-gray-800 dark:text-gray-200 capitalize">
                                    {{ $financeiro->matricula->matricula_num ?? 'NÃO POSSUI' }}
                                </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</div>
                                <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 uppercase">
                                    {{ $financeiro->codigo ?? '---' }}
                                </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">
                                    {{ $financeiro->descricao ?? '---' }}
                                </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 text-sm font-semibold uppercase
                                    {{ $financeiro_sucesso ? 'text-emerald-600 dark:text-emerald-400' : 'text-gray-800 dark:text-gray-200' }}">
                                    {{ $financeiro->pagamento_situacao ? __($financeiro->pagamento_situacao) : '---' }}
                                </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">Vencimento</div>
                                <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200">
                                    @if ($financeiro_sucesso ?? false)
                                        {{ $financeiro->vencimento_data ? dataData($financeiro->vencimento_data) : '---' }}
                                    @else
                                        {{ $financeiro->vencimento_data ? dataData($financeiro->vencimento_data,ago:true) : '---' }}
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Card: 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-indigo-600 to-indigo-700 px-5 py-3">
                            <div class="flex items-center gap-2">
                                <x-icon name="clipboard-check" class="w-5 h-5 text-white/80" />
                                <h3 class="text-sm font-semibold text-white uppercase tracking-wide">Matrícula</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">Aluno</div>
                                <div class="sm:w-3/5 text-sm font-semibold text-gray-800 dark:text-gray-200 capitalize">
                                    {{ $this->financeiro->matricula->aluno->nome ?? '---' }}
                                    {{ $this->financeiro->matricula->aluno->sobrenome ?? null }}
                                </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">Email</div>
                                <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 lowercase">
                                    {{ $this->financeiro->matricula->aluno->email ?? '---' }}
                                </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">Documento</div>
                                <div class="sm:w-3/5 text-sm text-gray-800 dark:text-gray-200 uppercase">
                                    {{ $this->financeiro->matricula->aluno->doc_tipo }}
                                    {{ putMask($this->financeiro->matricula->aluno->doc_num,$this->financeiro->matricula->aluno->doc_tipo) }}
                                </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 uppercase">
                                    {{ $financeiro->matricula->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 uppercase">
                                    {{ $financeiro->matricula->turma->turma_codigo ?? '---' }} — {{ $financeiro->matricula->turma->turma_nome ?? '' }}
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- Card: Detalhamento do Pagamento --}}
                <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden mb-6">
                    <div class="bg-gradient-to-r from-indigo-600 to-indigo-700 px-5 py-3">
                        <div class="flex items-center gap-2">
                            <x-icon name="currency-dollar" class="w-5 h-5 text-white/80" />
                            <h3 class="text-sm font-semibold text-white uppercase tracking-wide">Detalhamento do Pagamento</h3>
                        </div>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-gray-800">
                        <div class="flex items-center justify-between px-5 py-3">
                            <div class="flex-1 min-w-0">
                                <p class="text-sm text-gray-600 dark:text-gray-300 capitalize">
                                    {{ $financeiro->descricao ?? 'Matrícula • Turma ' . ($financeiro->matricula->turma->turma_codigo ?? '---') }}
                                </p>
                            </div>
                            <div class="ml-4 text-sm font-medium text-gray-800 dark:text-gray-200">
                                {{ convertMoney($financeiro->vencimento_valor,'R$ ') }}
                            </div>
                        </div>
                        @if($financeiro->vencimento_valor_desconto > 0)
                        <div class="flex items-center justify-between px-5 py-3">
                            <div class="flex-1 min-w-0">
                                <p class="text-sm text-gray-600 dark:text-gray-300">Desconto aplicado</p>
                            </div>
                            <div class="ml-4 text-sm font-medium text-emerald-600 dark:text-emerald-400">
                                - {{ convertMoney($financeiro->vencimento_valor_desconto,'R$ ') }}
                            </div>
                        </div>
                        @endif
                        <div class="flex items-center justify-between px-5 py-4 bg-indigo-50 dark:bg-indigo-950/30">
                            <div class="text-sm font-bold text-indigo-900 dark:text-indigo-200 uppercase">
                                Valor Total
                            </div>
                            <div class="text-lg font-bold text-indigo-700 dark:text-indigo-300">
                                {{ convertMoney($financeiro->vencimento_valor_pagamento,'R$ ') }}
                            </div>
                        </div>
                    </div>
                </div>

            @if ($financeiro_sucesso ?? false)

                {{-- Card: Pagamento Realizado --}}
                <div class="bg-white dark:bg-gray-900 border border-emerald-200 dark:border-emerald-700 rounded-xl shadow-sm overflow-hidden mb-6">
                    <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">Data do Pagamento</div>
                            <div class="sm:w-3/5 text-sm font-semibold text-gray-800 dark:text-gray-200">
                                {{ $financeiro->vencimento_data ? dataData($financeiro->vencimento_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">Método Usado</div>
                            <div class="sm:w-3/5 text-sm font-semibold text-gray-800 dark:text-gray-200 uppercase">
                                {{ __($financeiro->forma_pgto ?? '---') }}
                            </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">Nº. Transação</div>
                            <div class="sm:w-3/5 text-sm font-semibold text-gray-800 dark:text-gray-200 uppercase">
                                {{ $financeiro->forma_pgto_transacao_nsu ?? '---' }}
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Botões de Navegação --}}
                <div class="flex flex-col md:flex-row gap-3">
                    <a href="{{ route('aluno-financeiro') }}"
                    class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3
                            bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600
                            text-white font-semibold rounded-xl transition-colors duration-200 shadow-sm">
                        <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Voltar ao Financeiro
                    </a>
                    <a href="{{ route('aluno') }}"
                    class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3
                            bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600
                            text-white font-semibold rounded-xl transition-colors duration-200 shadow-sm">
                        <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                        </svg>
                        Ir para Dashboard
                    </a>
                </div>

            @else

                @if (($sandbox ?? false) || ($recaptcha ?? false))

                    {{-- Card: Forma de Pagamento --}}
                    <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-sm overflow-hidden">

                        {{-- Header do card --}}
                        <div class="flex justify-between items-center">
                            <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-700">
                                <h3 class="text-base font-semibold text-gray-800 dark:text-gray-200">Forma de Pagamento</h3>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Escolha como deseja efetuar o pagamento</p>
                            </div>

                            {{-- Botão Voltar (apenas se veio do financeiro e não for sucesso) --}}
                            @if ($vem_do_financeiro && !($financeiro_sucesso ?? false))
                                <div class="px-4">
                                    <a href="{{ route('aluno-financeiro') }}"
                                    class="inline-flex items-center gap-2 px-4 py-1
                                            text-indigo-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400
                                            font-medium text-sm transition-colors duration-200 rounded border border-indigo-600 shadow hover:bg-indigo-50 p-2">
                                        Voltar ao Financeiro
                                    </a>
                                </div>
                            @endif
                        </div>

                        {{-- Tabs de forma de pagamento --}}
                        <div class="flex border-b border-gray-200 dark:border-gray-700">
                            @foreach (listFormasPagamento() as $forma_item)
                                <button wire:click="$set('forma_pgto','{{ $forma_item->slug }}')"
                                    class="flex-1 py-3 px-4 text-center text-sm font-semibold transition-all duration-200 border-b-2
                                        {{ ($forma_pgto == $forma_item->slug)
                                            ? 'border-indigo-600 text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-950/20'
                                            : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800' }}">
                                    <span class="block uppercase text-xs md:text-sm">{{ $forma_item->label }}</span>
                                    <span class="hidden md:block text-2xs text-gray-400 dark:text-gray-500 mt-0.5">{{ $forma_item->descricao }}</span>
                                </button>
                            @endforeach
                        </div>

                        {{-- Conteúdo da forma selecionada --}}
                        <div class="p-5 md:p-6">
                            @if ($forma_pgto ?? false)

                                {{-- FORMA - BOLETO --}}
                                @if ($forma_pgto == 'boleto')

                                    @if (($financeiro->forma_pgto == $forma_pgto) && ($pagamento['ResponseDetail'] ?? false) && dataCarbon($financeiro->forma_pgto_validade,'YmdHis') > now()->format('YmdHis'))

                                        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-5 mb-4 space-y-3">
                                            <div class="flex justify-between items-center">
                                                <span class="text-sm text-gray-600 dark:text-gray-400">Vencimento</span>
                                                <span class="text-sm font-semibold text-gray-900 dark:text-white">
                                                    {{ $pagamento['ResponseDetail']['DueDate'] ?? 'No DueDate' }}
                                                </span>
                                            </div>
                                            <div class="flex justify-between items-center">
                                                <span class="text-sm text-gray-600 dark:text-gray-400">Situação</span>
                                                <span class="text-sm font-semibold text-gray-900 dark:text-white capitalize">
                                                    {{ $pagamento['ResponseDetail']['Message'] ?? 'No Message' }}
                                                </span>
                                            </div>
                                            <div class="flex justify-between items-center">
                                                <span class="text-sm text-gray-600 dark:text-gray-400">Nº Documento</span>
                                                <span class="text-sm font-medium text-gray-900 dark:text-white">
                                                    {{ $pagamento['ResponseDetail']['IdTransaction'] ?? 'No IdTransaction' }} /
                                                    {{ $pagamento['ResponseDetail']['GuarantorIdentity'] ?? 'No GuarantorIdentity' }}
                                                </span>
                                            </div>
                                        </div>

                                        <div class="mb-4">
                                            <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 text-center">
                                                Código de barras para pagamento
                                            </p>

                                            @php
                                                $DigitableLine = $pagamento['ResponseDetail']['DigitableLine'] ?? '00000000000000000000000000000000000000000000000000';
                                            @endphp

                                            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 p-4">
                                                <div class="text-center text-sm font-mono tracking-wider text-gray-900 dark:text-white break-all">
                                                    {{putMask($DigitableLine,'boleto')}}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="flex flex-col md:flex-row gap-3">
                                            <button onclick="copiarParaClipboard('{{$DigitableLine}}','Código Boleto Copiado')" type="button"
                                                class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3
                                                    bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-600
                                                    text-white font-semibold rounded-xl transition-colors duration-200">
                                                <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="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
                                                </svg>
                                                Copiar Código
                                            </button>
                                            <a href="{{ $pagamento['ResponseDetail']['BankSlipUrl']}}" target="_blank"
                                            class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3
                                                    bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600
                                                    text-white font-semibold rounded-xl transition-colors duration-200">
                                                <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="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>
                                                Acessar Boleto
                                            </a>
                                        </div>

                                    @else

                                        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-5 mb-4">
                                            <div class="flex justify-between items-center">
                                                @if (dataDiferenca($financeiro->vencimento_data) > 0)
                                                    <span class="text-sm text-gray-600 dark:text-gray-400">Vencimento</span>
                                                    <span class="text-sm font-semibold text-blue-600 dark:text-blue-400">
                                                        {{dataData($financeiro->vencimento_data,ago:true)}}
                                                    </span>
                                                @else
                                                    <span class="text-sm text-gray-600 dark:text-gray-400">Data Boleto</span>
                                                    <span class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">
                                                        <span class="font-light text-gray-600 pr-1">pagamento até</span>{{ now()->addDays(1)->format('d/m/Y') }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>

                                        {{-- @dump($this->financeiro->matricula->aluno->user->toArray())
                                        @dump($this->pagamento) --}}

                                        {{-- Alertas de Sessão --}}
                                        @include('components.ead-alerts-pgto', [
                                            'user_admin_pep' => ($this->financeiro->matricula->aluno?->user->user_admin_pep ?? false),
                                            'pagamento'      => $this->pagamento ?? null,
                                            'transacao'      => $this->transacao ?? null
                                        ])
                                        <x-ead-alerts class="my-4" />

                                        <button wire:click.prevent="processarPagamento('boleto')" type="button"
                                            class="w-full flex items-center justify-center gap-2 px-6 py-3
                                                bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600
                                                text-white font-semibold rounded-xl transition-colors duration-200
                                                disabled:opacity-50 disabled:cursor-not-allowed">
                                            <svg wire:loading.remove wire:target="processarPagamento"
                                                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="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>
                                            <svg wire:loading wire:target="processarPagamento"
                                                class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                                            </svg>
                                            <span wire:loading.remove wire:target="processarPagamento">Gerar Boleto</span>
                                            <span wire:loading wire:target="processarPagamento">Gerando...</span>
                                        </button>

                                    @endif

                                    <div class="mt-6 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800
                                                rounded-xl px-5 py-4 flex items-start gap-3">
                                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0"
                                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        <div>
                                            <p class="text-sm font-medium text-blue-900 dark:text-blue-300 mb-1">
                                                Atenção
                                            </p>
                                            <p class="text-sm text-blue-800 dark:text-blue-400">
                                                A efetivação do pagamento ocorre somente após a compensação do boleto em até 3 dias úteis.
                                            </p>
                                        </div>
                                    </div>

                                @endif

                                {{-- FORMA - PIX --}}
                                @if ($forma_pgto == 'pix')

                                    @if (($financeiro->forma_pgto == $forma_pgto) && ($financeiro->forma_pgto_transacao_nsu))

                                        @if (($financeiro->forma_pgto_json ?? false) && dataCarbon($financeiro->forma_pgto_validade,'YmdHis') > now()->format('YmdHis'))
                                            @php
                                                $decode = json_decode($financeiro->forma_pgto_json,true);
                                            @endphp

                                            <div class="bg-purple-50 dark:bg-purple-900/20 rounded-xl p-5 mb-4">
                                                <div class="flex justify-between items-center">
                                                    <span class="text-sm text-gray-600 dark:text-gray-400">Situação</span>
                                                    <span class="text-sm font-bold text-indigo-600 dark:text-indigo-400 capitalize">
                                                        {{$decode['ResponseDetail']['Message'] ?? 'Aguardando'}}
                                                    </span>
                                                </div>
                                            </div>

                                            @if ($decode['ResponseDetail']['Key'] ?? false)

                                                <div class="mb-4">
                                                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 text-center">
                                                        Código PIX Copia e Cola
                                                    </p>

                                                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 p-4 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
                                                        onclick="copiarParaClipboard('{{$decode['ResponseDetail']['Key']??null}}','Chave PIX Copiada')">
                                                        <span class="text-center text-sm font-mono text-gray-900 dark:text-white break-all block">
                                                            {{$decode['ResponseDetail']['Key']}}
                                                        </span>
                                                    </div>
                                                </div>

                                                <div class="flex flex-col md:flex-row gap-3 mb-4">
                                                    <button onclick="copiarParaClipboard('{{$decode['ResponseDetail']['Key']??'--'}}','Chave PIX Copiada')" type="button"
                                                        class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3
                                                            bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-600
                                                            text-white font-semibold rounded-xl transition-colors duration-200">
                                                        <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="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
                                                        </svg>
                                                        Copiar Código PIX
                                                    </button>
                                                    <button wire:click="validaPagamento('{{$financeiro->id}}')" type="button"
                                                        class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-3
                                                            bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600
                                                            text-white font-semibold rounded-xl transition-colors duration-200">
                                                        <svg wire:loading.remove wire:target="validaPagamento" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                                        </svg>
                                                        <svg wire:loading wire:target="validaPagamento" class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                                                        </svg>
                                                        <span wire:loading.remove wire:target="validaPagamento">Validar PIX</span>
                                                        <span wire:loading wire:target="validaPagamento">Validando...</span>
                                                    </button>
                                                </div>

                                                <div wire:poll.60s="validaPagamento('{{$financeiro->id}}')">
                                                    <p class="text-center text-gray-400 dark:text-gray-500 text-xs">
                                                        Última Verificação: {{ now()->format('H:i:s') }}
                                                    </p>
                                                </div>

                                                <div class="mt-6 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800
                                                            rounded-xl px-5 py-4 flex items-start gap-3">
                                                    <svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0"
                                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                                    </svg>
                                                    <div>
                                                        <p class="text-sm font-medium text-amber-900 dark:text-amber-300 mb-1">
                                                            Atenção
                                                        </p>
                                                        <p class="text-sm text-amber-800 dark:text-amber-400">
                                                            Aguardando a realização do PIX usando o código Copia e Cola acima. Após efetuado, o pagamento pode levar até 5 minutos para ser identificado.
                                                        </p>
                                                    </div>
                                                </div>

                                            @endif

                                        @else

                                            <div class="mb-6 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800
                                                        rounded-xl px-5 py-4 flex items-start gap-3">
                                                <svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0"
                                                    fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-1.964-1.333-2.732 0L3.082 16c-.77 1.333.192 3 1.732 3z"/>
                                                </svg>
                                                <div>
                                                    <p class="text-sm font-medium text-amber-900 dark:text-amber-300 mb-1">
                                                        Código Vencido
                                                    </p>
                                                    <p class="text-sm text-amber-800 dark:text-amber-400">
                                                        O código gerado anteriormente venceu. Clique no botão abaixo para gerar um novo código PIX.
                                                    </p>
                                                </div>
                                            </div>

                                            {{-- Alertas de Sessão --}}
                                            @include('components.ead-alerts-pgto', [
                                            'admin_pep' => ($this->financeiro->matricula->aluno?->user->user_admin_pep ?? false),
                                            'pagamento' => $this->pagamento ?? null,
                                            'transacao' => $this->transacao ?? null
                                        ])
                                            <x-ead-alerts class="my-4" />

                                            <button wire:click.prevent="processarPagamento('{{$forma_pgto}}')" type="button"
                                                class="w-full flex items-center justify-center gap-2 px-6 py-3
                                                    bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600
                                                    text-white font-semibold rounded-xl transition-colors duration-200">
                                                <svg wire:loading.remove wire:target="processarPagamento" class="w-5 h-5" fill="currentColor" viewBox="0 0 512 512">
                                                    <path d="M242.4 292.5C247.8 287.1 257.1 287.1 262.5 292.5L339.5 369.5C353.7 383.7 372.6 391.5 392.6 391.5H407.7L310.6 488.6C280.3 518.1 231.1 518.1 200.8 488.6L103.3 391.2H112.6C132.6 391.2 151.5 383.4 165.7 369.2L242.4 292.5zM262.5 218.9C257.1 224.3 247.8 224.3 242.4 218.9L165.7 142.2C151.5 127.1 132.6 120.2 112.6 120.2H103.3L200.7 22.7C231.1-7.6 280.3-7.6 310.6 22.7L407.8 119.9H392.6C372.6 119.9 353.7 127.7 339.5 141.9L262.5 218.9zM112.6 142.7C126.4 142.7 139.1 148.3 149.7 158.1L226.4 234.8C233.6 241.1 242 245.6 251.1 247.9V264.1C242 266.4 233.6 270.9 226.4 277.2L149.7 353.9C139.1 363.7 126.4 369.3 112.6 369.3H32.5L2.2 339C-7.1 329.7-7.1 314.3 2.2 304.1L112.6 142.7zM480.8 339L450.5 369.3H392.6C378.8 369.3 366.1 363.7 355.5 353.9L278.8 277.2C271.6 270.9 263.2 266.4 254.1 264.1V247.9C263.2 245.6 271.6 241.1 278.8 234.8L355.5 158.1C366.1 148.3 378.8 142.7 392.6 142.7H450.5L480.8 173C490.1 182.3 490.1 197.7 480.8 207L480.8 339z"/>
                                                </svg>
                                                <svg wire:loading wire:target="processarPagamento" class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                                                </svg>
                                                <span wire:loading.remove wire:target="processarPagamento">Gerar Novo PIX</span>
                                                <span wire:loading wire:target="processarPagamento">Gerando...</span>
                                            </button>
                                        @endif
                                    @else

                                        {{-- Alertas de Sessão --}}
                                        @include('components.ead-alerts-pgto', [
                                            'admin_pep' => ($this->financeiro->matricula->aluno?->user->user_admin_pep ?? false),
                                            'pagamento' => $this->pagamento ?? null,
                                            'transacao' => $this->transacao ?? null
                                        ])
                                        <x-ead-alerts class="my-4" />

                                        <button wire:click.prevent="processarPagamento('pix')" type="button"
                                            class="w-full flex items-center justify-center gap-2 px-6 py-3
                                                bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600
                                                text-white font-semibold rounded-xl transition-colors duration-200 mb-6">
                                            <svg wire:loading.remove wire:target="processarPagamento" class="w-5 h-5" fill="currentColor" viewBox="0 0 512 512">
                                                <path d="M242.4 292.5C247.8 287.1 257.1 287.1 262.5 292.5L339.5 369.5C353.7 383.7 372.6 391.5 392.6 391.5H407.7L310.6 488.6C280.3 518.1 231.1 518.1 200.8 488.6L103.3 391.2H112.6C132.6 391.2 151.5 383.4 165.7 369.2L242.4 292.5zM262.5 218.9C257.1 224.3 247.8 224.3 242.4 218.9L165.7 142.2C151.5 127.1 132.6 120.2 112.6 120.2H103.3L200.7 22.7C231.1-7.6 280.3-7.6 310.6 22.7L407.8 119.9H392.6C372.6 119.9 353.7 127.7 339.5 141.9L262.5 218.9zM112.6 142.7C126.4 142.7 139.1 148.3 149.7 158.1L226.4 234.8C233.6 241.1 242 245.6 251.1 247.9V264.1C242 266.4 233.6 270.9 226.4 277.2L149.7 353.9C139.1 363.7 126.4 369.3 112.6 369.3H32.5L2.2 339C-7.1 329.7-7.1 314.3 2.2 304.1L112.6 142.7zM480.8 339L450.5 369.3H392.6C378.8 369.3 366.1 363.7 355.5 353.9L278.8 277.2C271.6 270.9 263.2 266.4 254.1 264.1V247.9C263.2 245.6 271.6 241.1 278.8 234.8L355.5 158.1C366.1 148.3 378.8 142.7 392.6 142.7H450.5L480.8 173C490.1 182.3 490.1 197.7 480.8 207L480.8 339z"/>
                                            </svg>
                                            <svg wire:loading wire:target="processarPagamento" class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                                            </svg>
                                            <span wire:loading.remove wire:target="processarPagamento">Gerar PIX Copia e Cola</span>
                                            <span wire:loading wire:target="processarPagamento">Gerando...</span>
                                        </button>

                                        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800
                                                    rounded-xl px-5 py-4 flex items-start gap-3">
                                            <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0"
                                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            </svg>
                                            <div>
                                                <p class="text-sm font-medium text-blue-900 dark:text-blue-300 mb-1">
                                                    Pagamento Instantâneo
                                                </p>
                                                <p class="text-sm text-blue-800 dark:text-blue-400">
                                                    A efetivação acontece somente após realizar o pagamento do PIX gerado.
                                                </p>
                                            </div>
                                        </div>
                                    @endif

                                @endif

                                {{-- FORMA - CREDITO --}}
                                @if ($forma_pgto == 'cartao-credito')

                                    <div class="space-y-4">
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <div>
                                                <x-inputs.maskable
                                                    label="Número do Cartão"
                                                    hint="Somente números"
                                                    wire:model="CardNumber"
                                                    mask="['#### ###### ####','#### ###### #####','#### #### #### ####']"
                                                    placeholder="_ _ _ _  _ _ _ _  _ _ _ _  _ _ _ _"
                                                    class="w-full"
                                                    inputmode="numeric" pattern="[0-9]*"
                                                />
                                            </div>

                                            <div>
                                                <x-input label="Nome Impresso no Cartão" hint="Como impresso no cartão" wire:model="Holder" />
                                            </div>

                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Validade</label>
                                                <div class="flex gap-2">
                                                    <div class="flex-1">
                                                        <x-native-select
                                                            :options="geraRange(12)"
                                                            placeholder="MM"
                                                            wire:model="ExpirationDateMM"
                                                            option-value="num"
                                                            option-label="num"
                                                        />
                                                    </div>
                                                    <div class="flex-1">
                                                        <x-native-select
                                                            :options="geraRange(rangeMin:now()->format('Y'),rangeMax:now()->addYears(10)->format('Y'))"
                                                            placeholder="AAAA"
                                                            wire:model="ExpirationDateAAAA"
                                                            option-value="num"
                                                            option-label="num"
                                                        />
                                                    </div>
                                                </div>
                                            </div>

                                            <div>
                                                <x-inputs.maskable
                                                    label="CVV"
                                                    hint="Código de segurança"
                                                    wire:model="SecurityCode"
                                                    mask="['###','####']"
                                                    placeholder="_ _ _"
                                                    inputmode="numeric" pattern="[0-9]*"
                                                />
                                            </div>
                                        </div>

                                        {{-- Alertas de Sessão --}}
                                        @include('components.ead-alerts-pgto', [
                                            'admin_pep' => ($this->financeiro->matricula->aluno?->user->user_admin_pep ?? false),
                                            'pagamento' => $this->pagamento ?? null,
                                            'transacao' => $this->transacao ?? null
                                        ])
                                        <x-ead-alerts class="my-4" />

                                        <button wire:click.prevent="processarPagamento('{{$forma_pgto}}')" type="button"
                                            class="w-full flex items-center justify-center gap-2 px-6 py-3
                                                bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600
                                                text-white font-semibold rounded-xl transition-colors duration-200
                                                disabled:opacity-50 disabled:cursor-not-allowed">
                                            <svg wire:loading.remove wire:target="processarPagamento" 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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                                            </svg>
                                            <svg wire:loading wire:target="processarPagamento" class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                                            </svg>
                                            <span wire:loading.remove wire:target="processarPagamento">Realizar Pagamento</span>
                                            <span wire:loading wire:target="processarPagamento">Processando...</span>
                                        </button>
                                    </div>

                                @endif

                            @else
                                <div class="flex flex-col items-center justify-center py-8 text-gray-400 dark:text-gray-500">
                                    <svg class="w-12 h-12 mb-3 opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                                    </svg>
                                    <p class="text-sm">Selecione uma das formas de pagamento acima</p>
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Sandbox button --}}
                    @if ($sandbox ?? false)
                        <div class="flex justify-center mt-6">
                            <button wire:click.prevent="processarPagamento('pgto-teste')" type="button"
                                class="inline-flex items-center gap-2 px-6 py-2.5
                                    bg-amber-500 hover:bg-amber-600 text-white text-xs font-bold rounded-xl shadow-sm transition-all uppercase">
                                ⚡ SANDBOX — EFETIVA PAGAMENTO
                            </button>
                        </div>
                    @endif

                    {{-- Rodapé gateway --}}
                    <div class="text-center pt-6 mt-4">
                        <p class="text-xs text-gray-400 dark:text-gray-500 mb-2">Pagamentos processados via</p>
                        <div class="flex justify-center">
                            <img src="{{ asset('assets/images/safe2pay-logo.png') }}" alt="SAFE2PAY" class="h-8 opacity-60">
                        </div>
                    </div>

                @endif

                @if ((!$sandbox ?? false) && (!$this->forma_pgto ?? false))
                    <div class="flex justify-center mt-6">
                        <div class="text-center">
                            <div wire:ignore class="mb-1 {{ ($recaptcha ?? false) ? 'hidden' : 'block'}}">
                                <!-- reCAPTCHA v2 -->
                                {!! NoCaptcha::renderJs() !!}
                                {!! NoCaptcha::display(['data-callback' => 'onCallBack']) !!}
                            </div>
                            @error('recaptcha')
                                <span class="text-sm text-red-600 dark:text-red-400">{{ __($message) }}</span>
                            @enderror
                        </div>
                    </div>

                    <script type="text/javascript">
                        var onCallBack = function () {
                            @this.set('recaptcha',grecaptcha.getResponse());
                        }
                    </script>
                @endif

                {{-- Referência --}}
                <div class="text-center mt-8">
                    <p class="text-xs text-gray-400 dark:text-gray-500">Ref: {{$financeiro->id}}</p>
                </div>

            @endif

            @else
            <x-ead-alerts class="mb-4" />
            @endif

        {{-- Fim do conteúdo principal --}}
        </div>

    {{-- Fim do card central --}}
    </div>

    @include('page-footer')

</div>