@if (session('pagamento_ok_obrigado'))

    <x-modal blur align="center" wire:model.defer="pagamento_paid" class="bg-red-700" style="background-color: white;">

        <div class="flex flex-col justify-center items-center bg-gray-100 border rounded-lg shadow m-2 p-6 w-full z-50">
            <img src="{{ asset('asset/icones/icone-ok.png') }}" alt="Pagamento Recebido" class="h-40" />
            <div class="text-center text-green-600 text-4xl font-bold mb-2">Obrigado</div>
            <div class="text-center text-gray-600 text-xl font-normal mb-4 uppercase">Recebemos a sua doação</div>
            <div class="text-center text-gray-600 text-4xl font-bold mb-6 px-10"><span class="capitalize">{{ $mantenedor->nome ?? 'Doador' }}</span>, obrigado pela sua doação. Você faz a diferença!</div>
            <x-button flat label="FECHAR" x-on:click="close" />
        </div>

    </x-modal>

    <script src="{{ asset('js/confetti.min.js') }}"></script>
    <script>confetti.start()</script>
    <script>setTimeout(function(){confetti.stop();},3000)</script>

    <div class="w-full text-center border-2 border-green-800 text-green-50 bg-green-700 py-2 px-4 rounded uppercase">
        <div class="w-full text-lg font-medium">{{ session('pagamento_ok_obrigado') }}</div>
        @if (session('sub_pagamento_ok_obrigado'))
            <div class="w-full text-sm font-normal">{{ session('sub_pagamento_ok_obrigado') }}</div>
        @endif
    </div>

@endif

<div class="w-full p-6 flex flex-col bg-white rounded-lg shadow-2xl shadow-gray-500/20 gap-4">

    <div class="w-full flex-none md:flex gap-4">

        @if ($pagamento_transacao ?? false)

            <div class="w-full md:w-4/12">
                <div class="text-xs font-light -mb-1">PAGAMENTO</div>
                <div class="text-xl font-bold mb-4 uppercase">{{ __($pagamento_transacao->tipo ?? false) }}</div>
                {{-- SANDBOX --}}
                @if ($pagamento->transacao->gateway_ambiente && ($pagamento->transacao->gateway_ambiente == 'sandbox'))
                    <span class="text-gray-200">sandbox</span>
                @endif
            </div>

            <div class="w-full md:w-8/12">

                @if (in_array($pagamento_transacao->tipo, ['credit_card','cartao_credito']))

                    <div class="w-full mb-2">
                        <div class="text-xs text-gray-500 font-extralight -mb-1">Cartão</div>
                        <div>{{ $pagamento_transacao->cartao_bandeira ?? false }} - Final {{ $pagamento_transacao->cartao_final ?? false }}</div>
                    </div>

                @endif

                <div class="w-full mb-2">
                    <div class="text-xs text-gray-500 font-extralight -mb-1">Autorização</div>
                    {{ $pagamento_transacao->nsu ?? false }}
                </div>

                <div class="w-full mb-2">
                    <div class="text-xs text-gray-500 font-extralight -mb-1">Situação</div>
                    {{ __($pagamento_transacao->status_descricao ?? false) }}
                </div>

                <div class="w-full mb-2">
                    <div class="text-xs text-gray-500 font-extralight -mb-1">Data Hora</div>
                    <div>{{ convertToDateTime($pagamento_transacao->transacao_datahora ?? false) }}</div>
                </div>

            </div>

        @else
            <div>
                TRANSAÇÃO NÃO LOCALIZADA
            </div>
        @endif

    </div>

    <div class="w-full">
        <x-button rounded outline dark md label="VER MINHAS DOAÇÕES" href="{{ route('doacao-adesao',['adesao_id' => $adesao->id]) }}" class="w-full" />
            {{-- <x-button rounded dark spinner outline label="VALIDAR PAGAMENTO" right-icon="refresh" class="w-full mt-4 px-4" wire:click.prevent="consultaStatus('{{ $pagamento_transacao->id }}')" /> --}}

    </div>

</div>