@if (session('pagamento_pix_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_pix_pending') }}</div>
        @if (session('sub_pagamento_pix_pending'))
            <div class="w-full text-sm font-normal">{{ session('sub_pagamento_pix_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">

            <div class="w-full md:w-3/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-5/12">

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

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


                <div class="w-full mb-2">
                    <div class="text-xs text-gray-500 font-extralight mb-0">Instruções</div>
                    @if (in_array($pagamento_transacao->status, ['pix_expired']))
                        <div class="text-sm">Gere outra chave abaixo ou altere a forma de doação clicando em 'ALTERAR' ao lado.</div>
                    @else
                        <div class="text-sm">Efetue a doação via PIX no App do seu banco apontando para esse QRCODE ou através do PIX Copia/Cola, copiando a chave PIX abaixo e colando no seu App.</div>
                    @endif
                </div>

            </div>

            <div class="w-full md:w-4/12 flex justify-center md:justify-end items-center">
                <div>
                    @if (!in_array($pagamento_transacao->status, ['pix_expired']))
                        <img class="mt-0 md:-mt-4" src="{{ $pagamento_transacao->pix_qr_code_url }}" alt="{{ $pagamento_transacao->boleto_codigo ?? 'CÓDIGO PIX NÃO LOCALIZADO' }}">
                        <div class="w-full text-center font-bold -mt-2 mb-2">PIX QRCODE</div>
                    @endif
                </div>
            </div>

        </div>

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

        @if (in_array($pagamento_transacao->status, ['pix_expired']))

            <div class="w-full">
                <x-button rounded dark label="GERAR NOVA CHAVE" right-icon="refresh" class="btn_copy w-full mt-4 px-4" wire:click.prevent="alterarFormaPagamento('pix')" />
            </div>

        @elseif ($pagamento_transacao->pix_qr_code ?? false)

            <div class="w-full text-center bg-gray-100 rounded shadow border border-gray-200 p-2 my-2">
                <div class="font-bold text-sm">CHAVE PIX</div>
                <div id="pix_qr_code" class="w-full text-2xs md:text-sm break-all p-0 m-0">{{ $pagamento_transacao->pix_qr_code }}</div>
            </div>

            <div class="flex flex-col md:flex-row justify-center items-center gap-x-4 gap-y-2">
                <div class="w-full">
                    <x-button rounded dark label="COPIAR CHAVE" right-icon="clipboard-copy" class="btn_copy w-full mt-4 px-4" data-clipboard-target="#pix_qr_code" />
                </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 }}')" />
                </div>
            </div>

            <div class="w-full text-xs font-medium uppercase text-center text-red-700 mt-2">O PROCESSADOR DE PAGAMENTOS VIA PIX PODE DEMORAR ALGUNS MINUTOS PARA SER IDENTIFICADO</div>

        @endif

    @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>

{{-- <div class="w-full mb-4 bg-red-500 p-2">
    {!! viewByGrid($pagamento_transacao) !!}
</div>

<div class="w-full mb-4 bg-blue-400 p-2">
    {!! viewByGrid($pagamento) !!}
</div> --}}

{{-- LOADER --}}
<div class="flex justify-between -mt-2 mx-4">
    <div>
    </div>
    <div class="flex items-center -mt-2">
        <x-button.circle flat spinner />
        @if (!$pagamento_paid ?? false)
            <div wire:poll.30s="consultaStatus('{{ $pagamento_transacao->id }}')" class="text-xs text-gray-500">
                @if (session('pagamento_transacao_footer_notificacao'))
                    <span class="text-gray-400 uppercase text-xs font-normal">{{ session('pagamento_transacao_footer_notificacao') }}</span>
                @endif
                <span>{{ now()->format('H:i:s') }}</span>
            </div>
        @endif
    </div>
</div>