@extends('theme::layout.layout')

@section('title', ''.env('APP_NAME_DASHBOARD').' | Minha Carteira')

@section('content')
    <div class="section" style="width: 100%;">
        <div class="space-y-12">
            <div class="border-gray-900/10 pb-0">
                <div class="title-drake-fusion-formated">
                    <h2 class="text-base font-semibold leading-4 text-gray-900 inline-flex-aliest" style="text-transform: uppercase;">Sua Carteira 

                        <div class="closeds-mobas">
                            <button style="text-transform: uppercase; margin-left: 0.5em; display: inline-flex;" onclick="nigix('1');" id="openModal" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">Recarregar <i data-feather="dollar-sign" class='mr-0' style="margin-left: 0.5em; width: 1em; margin-top: -0.2em;"></i></button>

                            <button style="text-transform: uppercase; margin-left: 0.5em; display: inline-flex;"  onclick="nigix('2');"id="openModal1" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">Saque <i data-feather="dollar-sign" class='mr-0' style="margin-left: 0.5em; width: 1em; margin-top: -0.2em;"></i></button>
                        </div>
                    </h2>
                    <p style="color: #ffffffc2;" class="mt-0 text-sm leading-0 text-gray-600">Bem-vindo à sua carteira! Aqui, você encontrará recursos e assistência para realizar saques ou depósitos.</p>
                </div>
                <hr style="margin-top: 1em;">
            </div>
        </div>

        <script type="text/javascript">
            function nigix(values) {
                if (values == "1") {
                    document.getElementById('item_row_1').style.display = 'unset';
                    document.getElementById('item_row_2').style.display = 'none';
                } else {
                    document.getElementById('item_row_1').style.display = 'none';
                    document.getElementById('item_row_2').style.display = 'unset';
                }
            }
        </script>

        <style type="text/css">
            #modalBackdrop .bg-white {
                background-color: #131722; border: solid 1px #ffffff17;
            }
            #modalBackdrop { background-color: rgb(0 0 0 / 80%); }
            #modalBackdrop .border-gray-200 { border-color: #ffffff17; }
            #modalBackdrop h2 { color: #fff; }
            #modalBackdrop label { 
                color: #ffffffb5!important; font-size: 0.8em; margin-bottom: 0.5em; 
            }
        </style>

        <!-- Modal Background -->
        <div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex  hidden z-50" id="modalBackdrop">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-lg transform transition-all duration-300 scale-95 opacity-0" id="modalContent">

                <div style="display: none;" id="item_row_1">
                    <div class="flex justify-between items-center p-5 border-b border-gray-200">
                        <h2 class="text-xl font-semibold text-gray-800" style="text-transform: uppercase; font-size: 1em;">Realizar recarga da sua carteira</h2>
                        <button class="text-gray-500 hover:text-gray-800" id="closeModal1">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <!-- Modal Body -->
                    <div class="p-5">
                        <div id="step_1" style="display: unset;">
                            <p class="text-gray-700">
                              
                                <ul class="grid w-full gap-6 md:grid-cols-2">
                                    <li style="cursor: pointer;">
                                        <input type="radio" id="hosting-small" name="hosting" value="hosting-small" class="hidden peer" required />
                                        <label onclick="add_value('50,00')" for="hosting-small" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">                           
                                            <div class="block">
                                                <div class="w-full text-lg font-semibold">R$50,00</div>
                                                <div class="w-full">Recarga mínima</div>
                                            </div>
                                            <svg class="w-5 h-5 ms-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                                            </svg>
                                        </label>
                                    </li>
                                    <li style="cursor: pointer;">
                                        <input type="radio" id="hosting-big" name="hosting" value="hosting-big" class="hidden peer">
                                        <label onclick="add_value('100,00')" for="hosting-big" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
                                            <div class="block">
                                                <div class="w-full text-lg font-semibold">R$100,00</div>
                                                <div class="w-full">Recarga recomendada</div>
                                            </div>
                                            <svg class="w-5 h-5 ms-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                                            </svg>
                                        </label>
                                    </li>
                                    <li style="cursor: pointer;">
                                        <input type="radio" id="hosting-big" name="hosting" value="hosting-big" class="hidden peer">
                                        <label onclick="add_value('200,00')" for="hosting-big" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
                                            <div class="block">
                                                <div class="w-full text-lg font-semibold">R$200,00</div>
                                                <div class="w-full">Recarga mais usada</div>
                                            </div>
                                            <svg class="w-5 h-5 ms-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                                            </svg>
                                        </label>
                                    </li>
                                    <li style="cursor: pointer;">
                                        <input type="radio" id="hosting-big" name="hosting" value="hosting-big" class="hidden peer">
                                        <label onclick="add_value('300,00')" for="hosting-big" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
                                            <div class="block">
                                                <div class="w-full text-lg font-semibold">R$300,00</div>
                                                <div class="w-full">Outras recargas</div>
                                            </div>
                                            <svg class="w-5 h-5 ms-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                                            </svg>
                                        </label>
                                    </li>
                                </ul>

                                <div>
                                    <div class="mt-2.5">
                                        <label for="last-name" class="block text-sm font-semibold leading-6 text-gray-900" style="color: #333;">Digite o valor</label>
                                        <div>
                                          <input type="text" name="last-value" id="deposit-value" autocomplete="last-value" class="block w-full rounded-md border-0 px-3.5 py-2 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required="" placeholder="0,00">
                                        </div>
                                    </div>
                                </div>
                                <div style="margin-top: 1em;">
                                    <div class="mt-2.5">
                                        <label for="last-name" class="block text-sm font-semibold leading-6 text-gray-900" style="color: #333;">Digite seu CPF</label>
                                        <div>
                                          <input type="text" name="last-cpf" id="cpf" autocomplete="last-cpf" class="block w-full rounded-md border-0 px-3.5 py-2 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required="" placeholder="000.000.000-00">
                                        </div>
                                    </div>
                                </div>
                            </p>
                        </div>

                        <div id="step_2" style="display: none;">
                            <div class="flex flex-col items-center p-6 rounded-lg">
                              <!-- QR Code -->
                              <div class="mb-4">
                                <img src="" id="qrcode-img" alt="QR Code" class="w-30 h-30 rounded-md">
                              </div>

                              <!-- Textarea with copyable code -->
                              <div class="mb-4 w-full" style="text-align: center;">
                                <label for="qrcode-code" class="block text-sm font-medium text-gray-700 mb-1">Código para copiar:</label>
                                <textarea id="qrcode-code" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-gray-700" rows="2" readonly>Seu código aqui</textarea>
                              </div>

                              <!-- Copy button -->
                              <button style="text-transform: uppercase; display: inline-flex;"
                                class="px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                                onclick="copyCode()">
                                Copiar <i data-feather="copy" class='mr-0' style="margin-left: 0.5em;"></i>
                              </button>
                            </div>

                            <script>
                              function copyCode() {
                                const textarea = document.getElementById('qrcode-code');
                                textarea.select();
                                document.execCommand('copy');
                              }
                            </script>
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="flex justify-end items-center p-5 border-t border-gray-200">
                        <button id="step_3" style="text-transform: uppercase; display: inline-flex;" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded" onclick="add_Pix();">
                            Realizar recarga <i data-feather="dollar-sign" class='mr-0' style="margin-left: 0.5em;"></i>
                        </button>

                        <div id="step_4" style="display: none;">
                            <button onclick="gerar_novo_pix()" style="display: inline-flex; text-transform: uppercase;" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded" onclick="add_Pix();">
                               Nova recarga <i data-feather="dollar-sign" class='mr-0' style="margin-left: 0.5em;"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div style="display: none;" id="item_row_2">
                    <div class="flex justify-between items-center p-5 border-b border-gray-200">
                        <h2 class="text-xl font-semibold text-gray-800" style="text-transform: uppercase; font-size: 1em;">Realizar saque da sua carteira</h2>
                        <button class="text-gray-500 hover:text-gray-800" id="closeModal2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <!-- Modal Body -->
                    <div class="p-5">
                        <div id="step_155" style="display: unset;">
                            <p class="text-gray-700">
                                <div>
                                    <div class="mt-2.5">
                                        <label for="last-name" class="block text-sm font-semibold leading-6 text-gray-900" style="color: #333;">Digite o valor</label>
                                        <div>
                                          <input type="text" name="last-value1" id="deposit-value1" autocomplete="last-value" class="block w-full rounded-md border-0 px-3.5 py-2 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required="" placeholder="0,00">
                                        </div>
                                    </div>
                                </div>
                                <div style="margin-top: 1em;">
                                    <div class="mt-2.5">
                                        <label for="last-name" class="block text-sm font-semibold leading-6 text-gray-900" style="color: #333;">Digite seu CPF</label>
                                        <div>
                                          <input type="text" name="last-cpf1" id="cpf1" autocomplete="last-cpf" class="block w-full rounded-md border-0 px-3.5 py-2 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" required="" placeholder="000.000.000-00">
                                        </div>
                                    </div>
                                </div>
                            </p>
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="flex justify-end items-center p-5 border-t border-gray-200">
                        <button id="step_3s" style="text-transform: uppercase; display: inline-flex;" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded" onclick="add_Saque();">
                            Realizar Saque <i data-feather="dollar-sign" class='mr-0' style="margin-left: 0.5em;"></i>
                        </button>
                    </div>
                </div>


            </div>
        </div>

        <div class="py-0">
            @if($Logs->count() > 0)
              <form action="" method="POST" id="massDeleteForm" style="margin-top: 0.5em;">
                @csrf
                @method('POST')
                <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
                  <div class="inline-block min-w-full shadow-md rounded-lg overflow-hidden" style="background-color: #fff!important;">
                    <table class="min-w-full leading-normal">
                      <thead>
                        <tr>
                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">CPF</th>
                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Valor</th>
                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Status</th>
                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Tipo de Transação</th>
                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Data</th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach ($Logs as $page)
                            @php
                            $dateTime = $page->created_at;

                            // Crie um objeto DateTime a partir da string
                            $date = new DateTime($dateTime);

                            // Separe a data e a hora
                            $onlyDate = $date->format('d/m/Y');
                            $onlyTime = $date->format('H:i:s');
                            @endphp
                            <tr>
                              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <div class="flex">
                                  <div class="ml-1">
                                    <p class="text-gray-600 whitespace-no-wrap" style="color: #333; margin-bottom: 0.3em;">{{ $page->status_viewn }}</p>
                                  </div>
                                </div>
                              </td>
                              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <div class="flex">
                                  <div class="ml-1">
                                    <p class="text-gray-900 whitespace-no-wrap" style="color: #333;"> R${{ $page->investment }}</p>
                                  </div>
                                </div>
                              </td>

                              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <div class="flex">
                                  <div class="ml-1">
                                    @if ($page->status == "2")
                                        <span style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em;" class="bg-green-500 text-white text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                            Pago
                                        </span>
                                    @else
                                        @if ($page->status == '1')
                                            <span style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em;" class="bg-blue-500 text-white text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                                PROCESSANDO
                                            </span>
                                        @else
                                            <span style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em;" class="bg-red-500 text-white text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                                Cancelado
                                            </span>
                                        @endif
                                    @endif
                                  </div>
                                </div>
                              </td>

                              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <div class="flex">
                                  <div class="ml-1">
                                    @if ($page->cripto == "deposit")
                                        <span style="color: green;">Recarga de Saldo</span>
                                    @else
                                        <span style="color: red;">Saque de Saldo</span>
                                    @endif
                                  </div>
                                </div>
                              </td>

                              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <p class="text-gray-900 whitespace-no-wrap" style="color: #333;">{{ $onlyDate }}, {{ $onlyTime }}</p>
                              </td>
                            </tr>
                        @endforeach
                      </tbody>
                    </table>
                    <!-- Links de paginação -->
                    <div style="padding: 1em 1em;">
                      {{ $Logs->links() }}
                    </div>
                  </div>
                </div>
              </form>
            @else
              <div style="margin-top: 1.5em;" id="alert-additional-content-2" class="p-4 mb-4 text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800" role="alert">
                <div class="flex items-center">
                  <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                  </svg>
                  <span class="sr-only">Info</span>
                  <h3 class="text-lg font-medium">Atenção</h3>
                </div>
                <div class="mt-2 mb-4 text-sm">
                  Não foram encontrados itens disponíveis em nosso banco de dados.
                </div>
                <div class="flex">
                  <button style="text-transform: uppercase;" type="button" class="text-red-800 bg-transparent border border-red-800 hover:bg-red-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-red-600 dark:border-red-600 dark:text-red-500 dark:hover:text-white dark:focus:ring-red-800" data-dismiss-target="#alert-additional-content-2" aria-label="Close">
                    Fechar
                  </button>
                </div>
              </div>
            @endif
        </div>


        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", () => {
                const modalBackdrop = document.getElementById("modalBackdrop");
                const modalContent = document.getElementById("modalContent");
                const openModalButton = document.getElementById("openModal");
                const openModalButton1 = document.getElementById("openModal1");
                const closeModalButtons = [document.getElementById("closeModal1")];
                const closeModalButtons2 = [document.getElementById("closeModal2")];

                // Exibir o modal
                function showModal() {
                    modalBackdrop.classList.remove("hidden");
                    modalContent.classList.remove("scale-95", "opacity-0");
                    modalContent.classList.add("scale-100", "opacity-100");
                }

                // Ocultar o modal
                function hideModal() {
                    modalContent.classList.add("scale-95", "opacity-0");
                    setTimeout(() => modalBackdrop.classList.add("hidden"), 300);
                }

                // Evento para abrir o modal
                openModalButton.addEventListener("click", showModal);
                openModalButton1.addEventListener("click", showModal);

                // Eventos para fechar o modal
                closeModalButtons.forEach(button => button.addEventListener("click", hideModal));
                closeModalButtons2.forEach(button => button.addEventListener("click", hideModal));

                // Fechar o modal ao clicar fora dele
                modalBackdrop.addEventListener("click", (event) => {
                    if (event.target === modalBackdrop) hideModal();
                });
            });

            function add_Pix() {
                const cpf = $("#cpf").val();
                const depositValue = $("#deposit-value").val();

                if (!cpf || !depositValue) {
                    alert("Por favor, preencha todos os campos.");
                    return;
                }

                $.ajax({
                    url: "{{env('APP_URL')}}user/trader/creater/pix",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({
                        cpf: cpf,
                        value: depositValue,
                        _token: '{{ csrf_token() }}' 
                    }),
                    success: function (response) {
                        console.log(response);
                        if (response.paymentCode) {
                            document.getElementById('step_1').style.display = 'none';
                            document.getElementById('step_2').style.display = 'unset';
                            document.getElementById('step_3').style.display = 'none';
                            document.getElementById('step_4').style.display = 'unset';

                            document.getElementById('qrcode-code').value = response.paymentCode;
                            const qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="+response.paymentCode+"";

                            // Seleciona a tag <img> pelo ID
                            const qrImage = document.getElementById('qrcode-img');
                            qrImage.src = qrCodeUrl;

                        } else {
                            alert("Erro ao realizar recarga. Tente novamente.");
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("Erro:", error);
                        alert("Erro ao realizar recarga. Tente novamente.");
                    }
                });
            }

            function add_Saque() {
                const cpf = $("#cpf1").val();
                const depositValue = $("#deposit-value1").val();

                if (!cpf || !depositValue) {
                    alert("Por favor, preencha todos os campos.");
                    return;
                }

                $.ajax({
                    url: "{{env('APP_URL')}}user/trader/creater/saque",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({
                        cpf: cpf,
                        value: depositValue,
                        _token: '{{ csrf_token() }}' 
                    }),
                    success: function (response) {
                        alert("Saque realizado com sucesso");
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                        console.error("Erro:", error);
                        alert("Erro ao realizar o saque. Tente novamente.");
                    }
                });
            }

            function gerar_novo_pix() {
                document.getElementById('step_1').style.display = 'unset';
                document.getElementById('step_2').style.display = 'none';
                document.getElementById('step_3').style.display = 'inline-flex';
                document.getElementById('step_4').style.display = 'none';

                document.getElementById('qrcode-code').value = '';
                const qrCodeUrl = '';

                // Seleciona a tag <img> pelo ID
                const qrImage = document.getElementById('qrcode-img');
                qrImage.src = qrCodeUrl;
            }

            // Selecionando os inputs
            const depositValueInput = document.getElementById('deposit-value');
            const cpfInput = document.getElementById('cpf');

            // Formatação de valor em reais
            depositValueInput.addEventListener('input', (e) => {
                let value = e.target.value.replace(/\D/g, ''); // Remove caracteres não numéricos
                value = (value / 100).toFixed(2);             // Divide por 100 para ajustar os centavos
                value = value.replace('.', ',');              // Troca ponto por vírgula
                e.target.value = value.replace(/\B(?=(\d{3})+(?!\d))/g, '.'); // Adiciona os pontos separadores
            });

            // Formatação de CPF
            cpfInput.addEventListener('input', (e) => {
                let value = e.target.value.replace(/\D/g, ''); // Remove caracteres não numéricos
                value = value.replace(/(\d{3})(\d)/, '$1.$2'); // Adiciona o primeiro ponto
                value = value.replace(/(\d{3})(\d)/, '$1.$2'); // Adiciona o segundo ponto
                value = value.replace(/(\d{3})(\d{1,2})$/, '$1-$2'); // Adiciona o traço
                e.target.value = value;
            });


            // Selecionando os inputs
            const depositValueInput1 = document.getElementById('deposit-value1');
            const cpfInput1 = document.getElementById('cpf1');

            // Formatação de valor em reais
            depositValueInput1.addEventListener('input', (e) => {
                let value = e.target.value.replace(/\D/g, ''); // Remove caracteres não numéricos
                value = (value / 100).toFixed(2);             // Divide por 100 para ajustar os centavos
                value = value.replace('.', ',');              // Troca ponto por vírgula
                e.target.value = value.replace(/\B(?=(\d{3})+(?!\d))/g, '.'); // Adiciona os pontos separadores
            });

            // Formatação de CPF
            cpfInput1.addEventListener('input', (e) => {
                let value = e.target.value.replace(/\D/g, ''); // Remove caracteres não numéricos
                value = value.replace(/(\d{3})(\d)/, '$1.$2'); // Adiciona o primeiro ponto
                value = value.replace(/(\d{3})(\d)/, '$1.$2'); // Adiciona o segundo ponto
                value = value.replace(/(\d{3})(\d{1,2})$/, '$1-$2'); // Adiciona o traço
                e.target.value = value;
            });

            // Função para verificar os parâmetros da URL e simular o clique
            (function() {
                // Aguarda 5 segundos antes de executar a lógica
                setTimeout(() => {
                    // Obtém os parâmetros da URL
                    const params = new URLSearchParams(window.location.search);
                    //console.log(params);

                    // Verifica se o parâmetro 'add' existe e se é igual a 'wallet'
                    if (params.get('add') === 'wallet') {
                        // Localiza o botão pelo ID, classe ou outro seletor
                        const botao = document.querySelector("#openModal"); // Substitua pelo seletor correto
                        //console.error("Botão!");

                        // Simula o clique no botão, caso ele exista
                        if (botao) {
                            botao.click();
                            //console.error("Achou e clicou!");
                        } else {
                            //console.error("Botão não encontrado!");
                        }
                    }
                }, 2000); // 5000ms = 5 segundos
            })();
        </script>


        @if(request()->has('mensagem'))
        <div style="margin-top: 1em;" id="alert-border-3" class="flex items-center p-4 mb-4 text-green-800 border-t-4 border-green-300 bg-green-50 dark:text-green-400 dark:bg-gray-800 dark:border-green-800" role="alert">
            <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
            </svg>
            <div class="ms-3 text-sm font-medium">
              Sua mensagem foi enviada com sucesso, aguarde alguns minutos.
            </div>
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700"  data-dismiss-target="#alert-border-3" aria-label="Close">
              <span class="sr-only">Fechar</span>
              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
              </svg>
            </button>
        </div>
        @endif

        <style type="text/css">
            @media (max-width: 768px) {
                #step_1 > ul > li:nth-child(3) { display: none!important; }
                #step_1 > ul > li:nth-child(4) { display: none!important; }
                #step_1 .gap-6 {  gap: 0.2rem; }
                #openModal { margin-left: 0em!important; margin-bottom: 1em!important; }
                table > thead > tr > th:nth-child(1) { display: revert-layer; }
            }

            #step_1 .gap-6 {  gap: 0.5rem; }
        </style>

        <script type="text/javascript">
          function add_value(value) {
            $("#deposit-value").val(''+value+'');
          }
        </script>

    </div>
@endsection