@if (session('pagamento_boleto_pending'))

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

@endif

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

    @if ($pagamento_transacao ?? false)

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

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

                <div class="text-xs font-light -mb-1">FORMA PAGAMENTO</div>
                <div class="text-3xl font-bold uppercase">{{ __($pagamento_transacao->tipo ?? false) }}</div>

                <div class="w-full">
                    <button onclick="return confirm('Então, deseja realmente alterar a forma de pagamento das doações?') || event.stopImmediatePropagation()" wire:click="alterarFormaPagamento" class="text-blue-600 hover:text-blue-400 mb-4">Alterar</button>
                </div>

            </div>

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

                <div class="w-full mb-2">
                    <div class="text-xs text-gray-500 font-extralight mb-0">Controle</div>
                    {{ $pagamento_transacao->nsu ?? false }}:::{{ $pagamento->controle ?? false }}
                </div>

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

                <div class="w-full mb-2">
                    <div class="text-xs text-gray-500 font-extralight mb-0">Pagar impreterivelmente até</div>
                    {{-- <div>{{ convertToDateTime($pagamento_transacao->transacao_datahora ?? false) }}</div> --}}
                    <div>{{ convertToDate($pagamento_transacao->boleto_vencimento ?? false) }}</div>
                </div>

            </div>

        </div>

        <div class="w-full flex flex-col items-center text-center bg-gray-100 rounded shadow border border-gray-200 p-4 my-2">

            @if ($pagamento_transacao->boleto_url_barcode ?? false)

                <div id="boleto_codigo" class="text-sm md:text-base mb-2">
                    {{ $pagamento_transacao->boleto_codigo ?? 'CÓDIGO NÃO LOCALIZADO' }}
                </div>

                <div class="w-full flex justify-center text-center">
                    <img class="w-full mx-6 h-14" src="{{ $pagamento_transacao->boleto_url_barcode }}" alt="{{ $pagamento_transacao->boleto_codigo ?? 'CÓDIGO NÃO LOCALIZADO' }}">
                </div>

            @endif

        </div>

        <script src="{{ asset('js/clipboard.min.js') }}"></script>
        <script>
            new ClipboardJS('.btn_copy');
        </script>

        <div class="flex flex-col md:flex-row justify-center items-center gap-x-4 gap-y-2">

            {{-- @if ($pagamento_transacao->boleto_url_pdf ?? false)
                <div class="w-full">
                    <x-button rounded dark label="IMPRIMIR BOLETO" href="{{ $pagamento_transacao->boleto_url_pdf }}" target="_blank" class="mt-4 px-4" />
                </div>
            @endif --}}

            <div class="w-full">
                <x-button rounded dark label="COPIAR CÓDIGO" right-icon="clipboard-copy" class="btn_copy w-full mt-4 px-4" data-clipboard-target="#boleto_codigo" />
            </div>

            <div 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 }}',registrador_tipo:'api')" />
            </div>

        </div>

    @else

        <div>
            TRANSAÇÃO NÃO LOCALIZADA
        </div>

    @endif

    <div class="w-full flex justify-center mt-4">
        <x-button href="{{ route('doacao-adesao',['adesao_id' => $adesao->id]) }}" wire:click="$set('pagamento_id',false)" flat primary label="voltar" />
    </div>

</div>

{{-- LOADER --}}
<div class="flex justify-end">
    <x-button.circle flat spinner />
</div>