@extends('theme::layout.layout')
@section('title', ''.env('APP_NAME_DASHBOARD').' | Investimentos')

@section('content')
<script src="https://s3.tradingview.com/tv.js"></script>
<style type="text/css">
  .max-w-screen-xl {
      max-width: 1450px;
  }
  .flow-light-ex { display: inline-flex; width: 100%; }
  .left-you-grid-1 { width: 85%; margin-right: 1%; }
  .left-you-grid-2 { width: 17%; }
  .line-grid-invest { width: 100%; }
  .line-grid-invest label { color: #fff; text-transform: uppercase; font-size: 0.8em; }
  .left-you-grid-2 button { 
    width: 100% !important; background-color: #131722; color: #fff; text-align: center; display: grid; 
    border: solid 1px #4c4c4c47;  font-size: 0.9em; cursor: pointer; opacity: 0.8; transition: 1s;
    padding: 1em 1em; border-radius: 5px; margin-bottom: 1em; text-transform: uppercase; font-weight: bold;
  }

  .left-you-grid-2 button:hover { opacity: 1; transition: 1s; border: solid 1px #4c4c4c7a; background-color: #0f131c; }
  #lastCandlePrice1 { color: #089981; font-size: 1.3em; letter-spacing: 0.1em; font-weight: 400; }
  #lastCandlePrice2 { color: #f23645; font-size: 1.3em; letter-spacing: 0.1em; font-weight: 400; }
  #lastCandlePrice3 { color: #089981; font-size: 3em; font-weight: 600; }
  .border-gray-300 { border: solid 1px #222630 !important; background-color: #171b26 !important;}

  .invest-bg-soft {
    width: 100% !important; background-color: #131722!important; color: #fff; text-align: center; display: grid; 
    border: solid 1px #4c4c4c47; font-weight: 400!important; font-size: 0.8em; cursor: pointer; transition: 1s; margin-top: 1.1em;
    padding: 1em 1em; border-radius: 5px; margin-bottom: 1em; text-transform: uppercase; font-weight: bold;
  }

  .space-green div { cursor: pointer; }
  .space-green label { cursor: pointer; }

  .liners-ups { margin-bottom: 1em; margin-top: -0.3em; }
  .liners-ups .bg-white { background-color: #131722 !important; border: solid 1px #4c4c4c47; text-transform: uppercase; }
</style>

<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<style>
  /* Estilos para a barra de rolagem no dropdown */
  #dropdownUsers {
      /* Caso a barra de rolagem seja visível */
      scrollbar-width: thin; /* Para navegadores Firefox */
      scrollbar-color: #4b5563 #1f2937; /* cor da barra e cor de fundo */

      /* Para navegadores WebKit (Chrome, Safari) */
  }

  #dropdownUsers::-webkit-scrollbar {
      width: 8px; /* Largura da barra de rolagem */
  }

  #dropdownUsers::-webkit-scrollbar-track {
      background: #1f2937; /* Cor de fundo da barra de rolagem */
  }

  #dropdownUsers::-webkit-scrollbar-thumb {
      background-color: #4b5563; /* Cor da barra de rolagem */
      border-radius: 10px; /* Arredondamento da barra */
  }

  #dropdownUsers::-webkit-scrollbar-thumb:hover {
      background-color: #6b7280; /* Cor da barra ao passar o mouse */
  }

  #dropdownUsers li { color: #fff; transition: 0.2s; }
  #dropdownUsers li:hover{ color: #fff; background-color: {{config('colors.primary_color_user')}}!important; }
  #dropdownUsers li a:hover{ color: #fff; background-color: {{config('colors.primary_color_user')}}!important; }
  .liners-upsx .w-full { transition: 0.2s; font-size: 0.95em; }
  .liners-upsx .w-full:hover{ color: {{config('colors.primary_color_user')}} }
  .liners-ups .solars { padding: 0.7em 1em; }
</style>

<div class="section" style="width: 100%; margin-top: -0.8em; margin-bottom: 0.5em;">

  <div class="liners-upsx ">
    <ul class="grid w-full gap-6 md:grid-cols-5 liners-ups">
        <li>
          <a id="dropdownUsersButton" data-dropdown-toggle="dropdownUsers" data-dropdown-placement="bottom">
            <label for="hosting-1" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white solars 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">0-50 MB</div> -->
                    <div class="w-full" style="text-transform: uppercase;">Criptos</div>
                </div>
                <img src="{{ asset('images/9041216.png') }}" style="width: 2em;">
            </label>
          </a>

          <!-- Dropdown menu -->
          <div id="dropdownUsers" class="z-10 hidden bg-white rounded-lg shadow w-60 dark:bg-gray-700">
            <ul class="h-48 py-2 overflow-y-auto text-gray-700 dark:text-gray-200" aria-labelledby="dropdownUsersButton">
                                <li>
                      <a href="/user/trader/start?filter=btcusdt" class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                          <img class="w-6 h-6 me-2 rounded-full" src="{{ asset($item['imgSrc']) }}" alt="BTC USDT image">
                          BTC USDT                      </a>
                  </li>
                                <li>
                      <a href="/user/trader/start?filter=ethusdt" class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                          <img class="w-6 h-6 me-2 rounded-full" src="{{ asset($item['imgSrc']) }}" alt="Ethereum image">
                          Ethereum                      </a>
                  </li>
                                <li>
                      <a href="/user/trader/start?filter=suiusdt" class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                          <img class="w-6 h-6 me-2 rounded-full" src="{{ asset($item['imgSrc']) }}" alt="SUI USDT image">
                          SUI USDT                      </a>
                  </li>
                                <li>
                      <a href="/user/trader/start?filter=avaxusdt" class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                          <img class="w-6 h-6 me-2 rounded-full" src="{{ asset($item['imgSrc']) }}" alt="AVAX USDT image">
                          AVAX USDT                      </a>
                  </li>
                                <li>
                      <a href="/user/trader/start?filter=solusdt" class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                          <img class="w-6 h-6 me-2 rounded-full" src="{{ asset($item['imgSrc']) }}" alt="Solana image">
                          Solana                      </a>
                  </li>
                                <li>
                      <a href="/user/trader/start?filter=injusdt" class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                          <img class="w-6 h-6 me-2 rounded-full" src="{{ asset($item['imgSrc']) }}" alt="Injective USDT image">
                          Injective USDT                      </a>
                  </li>
                                <li>
                      <a href="/user/trader/start?filter=dotusdt" class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                          <img class="w-6 h-6 me-2 rounded-full" src="{{ asset($item['imgSrc']) }}" alt="Polkadot USDT image">
                          Polkadot USDT                      </a>
                  </li>
                                <li>
                      <a href="/user/trader/start?filter=ltcusdt" class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                          <img class="w-6 h-6 me-2 rounded-full" src="{{ asset($item['imgSrc']) }}" alt="Litecoin USDT image">
                          Litecoin USDT                      </a>
                  </li>
                          </ul>
          </div>
        </li>

                    <li>
                <a href="/user/trader/start?filter=btcusdt">
                    <label for="hosting" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white solars 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">BTC USDT</div>
                        </div>
                        <img src="{{ asset($item_2['imgSrc']) }}" style="width: 2em;">
                    </label>
                </a>
            </li>
                    <li>
                <a href="/user/trader/start?filter=ethusdt">
                    <label for="hosting" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white solars 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">Ethereum</div>
                        </div>
                        <img src="{{ asset($item_2['imgSrc']) }}" style="width: 2em;">
                    </label>
                </a>
            </li>
                    <li>
                <a href="/user/trader/start?filter=suiusdt">
                    <label for="hosting" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white solars 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">SUI USDT</div>
                        </div>
                        <img src="{{ asset($item_2['imgSrc']) }}" style="width: 2em;">
                    </label>
                </a>
            </li>
                    <li>
                <a href="/user/trader/start?filter=avaxusdt">
                    <label for="hosting" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white solars 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">AVAX USDT</div>
                        </div>
                        <img src="{{ asset($item_2['imgSrc']) }}" style="width: 2em;">
                    </label>
                </a>
            </li>
                    <li>
                <a href="/user/trader/start?filter=solusdt">
                    <label for="hosting" class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white solars 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">Solana</div>
                        </div>
                        <img src="{{ asset($item_2['imgSrc']) }}" style="width: 2em;">
                    </label>
                </a>
            </li>
            </ul>
  </div>

  <div class="flow-light-ex">
    <div class="left-you-grid-1">
      <main style="width: 100%;">
          <div id="tradingview_0b60e" style="width: 100%; height: 500px; border: solid 0px;"></div>
      </main>
    </div>

    <div id="logs-alerts">
    </div>
  
    <div class="left-you-grid-2">
        <div class="line-grid-invest" style="margin-bottom: 0.7em;">
          <div class="max-w-sm mx-auto">

            <button style="display: inline-flex; justify-content: space-between;" id="dropdownRadioHelperButton" data-dropdown-toggle="dropdownRadioHelper" class="text-white bg-blue-700 hover:bg-blue-800  focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
              <span id="timer-oldx"><span id="selected-value">00:01:00</span></span>
              <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
              </svg>
            </button>

            <!-- Dropdown menu -->
            <div id="dropdownRadioHelper" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-60 dark:bg-gray-700 dark:divide-gray-600">
                <ul class="p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200 space-green" aria-labelledby="dropdownRadioHelperButton">

                 <!--  <li>
                    <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                      <div class="flex items-center h-5">
                          <input value="0:00:10" id="helper-radio-4s" checked name="helper-radio" type="radio" value="" class="w-4 h-4 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">
                      </div>
                      <div class="ms-2 text-sm">
                          <label for="helper-radio-4s" class="font-medium text-gray-900 dark:text-gray-300">
                            <div style="color: #333;">10 segundos - TESTE</div>
                            <p style="color: #333;" id="helper-radio-text-5" class="text-xs font-normal text-gray-500 dark:text-gray-300">Expiração em 00:00:10</p>
                          </label>
                      </div>
                    </div>
                  </li> -->

                  <li>
                    <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                      <div class="flex items-center h-5">
                          <input value="00:01:00" id="helper-radio-4" checked name="helper-radio" type="radio" value="" class="w-4 h-4 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">
                      </div>
                      <div class="ms-2 text-sm">
                          <label for="helper-radio-4" class="font-medium text-gray-900 dark:text-gray-300">
                            <div style="color: #333;">1 minuto</div>
                            <p style="color: #333;" id="helper-radio-text-5" class="text-xs font-normal text-gray-500 dark:text-gray-300">Expiração em 00:01:00</p>
                          </label>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                      <div class="flex items-center h-5">
                          <input id="helper-radio-5" value="00:02:00" name="helper-radio" type="radio" value="" class="w-4 h-4 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">
                      </div>
                      <div class="ms-2 text-sm">
                          <label for="helper-radio-5" class="font-medium text-gray-900 dark:text-gray-300">
                            <div style="color: #333;">2 minutos</div>
                            <p style="color: #333;" id="helper-radio-text-5" class="text-xs font-normal text-gray-500 dark:text-gray-300">Expiração em 00:02:00</p>
                          </label>
                      </div>
                    </div>
                  </li>
                  <li>
                    <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                      <div class="flex items-center h-5">
                          <input id="helper-radio-7" name="helper-radio" value="00:03:00" type="radio" value="" class="w-4 h-4 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">
                      </div>
                      <div class="ms-2 text-sm">
                          <label for="helper-radio-7" class="font-medium text-gray-900 dark:text-gray-300">
                            <div style="color: #333;">3 minutos</div>
                            <p style="color: #333;" id="helper-radio-text-7" class="text-xs font-normal text-gray-500 dark:text-gray-300">Expiração em 00:03:00</p>
                          </label>
                      </div>
                    </div>
                  </li>

                  <li>
                    <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                      <div class="flex items-center h-5">
                          <input id="helper-radio-8" name="helper-radio" value="00:04:00" type="radio" value="" class="w-4 h-4 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">
                      </div>
                      <div class="ms-2 text-sm">
                          <label for="helper-radio-8" class="font-medium text-gray-900 dark:text-gray-300">
                            <div style="color: #333;">4 minutos</div>
                            <p style="color: #333;" id="helper-radio-text-8" class="text-xs font-normal text-gray-500 dark:text-gray-300">Expiração em 00:04:00</p>
                          </label>
                      </div>
                    </div>
                  </li>


                  <li>
                    <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                      <div class="flex items-center h-5">
                          <input id="helper-radio-9" name="helper-radio" value="00:05:00" type="radio" value="" class="w-4 h-4 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">
                      </div>
                      <div class="ms-2 text-sm">
                          <label for="helper-radio-9" class="font-medium text-gray-900 dark:text-gray-300">
                            <div style="color: #333;">5 minutos</div>
                            <p style="color: #333;" id="helper-radio-text-9" class="text-xs font-normal text-gray-500 dark:text-gray-300">Expiração em 00:05:00</p>
                          </label>
                      </div>
                    </div>
                  </li>


                  <li>
                    <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                      <div class="flex items-center h-5">
                          <input id="helper-radio-10" name="helper-radio" value="00:06:00" type="radio" value="" class="w-4 h-4 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">
                      </div>
                      <div class="ms-2 text-sm">
                          <label for="helper-radio-10" class="font-medium text-gray-900 dark:text-gray-300">
                            <div style="color: #333;">6 minutos</div>
                            <p style="color: #333;" id="helper-radio-text-10" class="text-xs font-normal text-gray-500 dark:text-gray-300">Expiração em 00:06:00</p>
                          </label>
                      </div>
                    </div>
                  </li>

                  <li>
                    <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                      <div class="flex items-center h-5">
                          <input id="helper-radio-11" name="helper-radio" value="00:07:00" type="radio" value="" class="w-4 h-4 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">
                      </div>
                      <div class="ms-2 text-sm">
                          <label for="helper-radio-11" class="font-medium text-gray-900 dark:text-gray-300">
                            <div style="color: #333;">7 minutos</div>
                            <p style="color: #333;" id="helper-radio-text-11" class="text-xs font-normal text-gray-500 dark:text-gray-300">Expiração em 00:07:00</p>
                          </label>
                      </div>
                    </div>
                  </li>


                  <li>
                    <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                      <div class="flex items-center h-5">
                          <input id="helper-radio-12" name="helper-radio" value="00:08:00" type="radio" value="" class="w-4 h-4 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">
                      </div>
                      <div class="ms-2 text-sm">
                          <label for="helper-radio-12" class="font-medium text-gray-900 dark:text-gray-300">
                            <div style="color: #333;">8 minutos</div>
                            <p style="color: #333;" id="helper-radio-text-12" class="text-xs font-normal text-gray-500 dark:text-gray-300">Expiração em 00:08:00</p>
                          </label>
                      </div>
                    </div>
                  </li>

                </ul>
            </div>


            <script>
              // Função que puxa o valor do radio selecionado
              function updateSelectedValue() {
                  // Pega o valor do radio selecionado
                  var selectedValue = document.querySelector('input[name="helper-radio"]:checked').value;
                  // Exibe o valor selecionado no parágrafo
                  document.getElementById('selected-value').textContent = selectedValue;
              }

              // Adiciona um listener de evento "change" em todos os radio buttons
              document.querySelectorAll('input[name="helper-radio"]').forEach(function(radio) {
                  radio.addEventListener('change', updateSelectedValue);
              });
            </script>


            <div class="flex flex-row gap-x-4">
                <div onclick="function_option('bordered-radio-1');" style="margin-bottom: 0.7em; text-align: center; border: solid 1px #4c4c4c47; cursor: pointer!important; width: 100%; display: inline-flex; align-items: center; justify-content: center; padding-top: 0.7em; padding-bottom: 0.7em; background-color: #089981;" class="flex items-center ps-4 border border-gray-200 rounded dark:border-gray-700">
                    <input style="cursor: pointer!important; border: solid 1px #ffffff87 !important; background-color: #ffffff30!important;" id="bordered-radio-1" type="radio" value="Crescimento" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-0 dark:bg-gray-700 dark:border-gray-600">
                   <!--  <label style="cursor: pointer!important;" for="bordered-radio-1" class="w-full py-4 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"></label> -->
                    <i data-feather="trending-up" style='width: 4em; margin-right: 0em; color: #fff;'></i>
                </div>

                <div onclick="function_option('bordered-radio-2');" style="margin-bottom: 0.7em; text-align: center; border: solid 1px #4c4c4c47; cursor: pointer!important; width: 100%; display: inline-flex; align-items: center; justify-content: center; padding-top: 0.7em; padding-bottom: 0.7em; background-color: #f23645;" class="flex items-center ps-4 border border-gray-200 rounded dark:border-gray-700">
                    <input style="cursor: pointer!important; border: solid 1px #ffffff87 !important; background-color: #ffffff30!important;" checked id="bordered-radio-2" type="radio" value="Diminuição" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-0 dark:bg-gray-700 dark:border-gray-600">
                  <!--   <label style="cursor: pointer!important;" for="bordered-radio-2" class="w-full py-4 ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"></label> -->
                    <i data-feather="trending-down" style='width: 4em; margin-right: 0em; color: #fff;'></i>
                </div>
            </div>


            <style type="text/css">
              .focus\:ring-0:focus {
                  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) #ffffff00;
                  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) rgb(59 130 246 / 0%);
                  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
              }
            </style>

            <script type="text/javascript">
              function function_option(id) {
                // Seleciona o input pelo ID e dá um clique programaticamente
                var radioInput = document.getElementById(id);
                if (radioInput) {
                    radioInput.click();
                }
              }
            </script>


            <div class="flex" style="margin-top: 0.25em; margin-bottom: 0em;">
              <span class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
                <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" stroke-width="3" stroke="#ffffff" fill="none"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M55.47,31.14A23.51,23.51,0,0,1,12.69,45.6" stroke-linecap="round"></path><path d="M8.46,32.74a24,24,0,0,1,.42-5,23.51,23.51,0,0,1,42.29-9.14" stroke-linecap="round"></path><polyline points="40.6 17.6 51.45 18.87 52.53 8.69" stroke-linecap="round"></polyline><polyline points="23.05 46.33 12.21 45.06 11.12 55.24" stroke-linecap="round"></polyline><path d="M39,25.57a7.09,7.09,0,0,0-6.65-4.29c-6,0-6.21,4.29-6.21,4.29s-.9,5.28,6.43,5.85C40.18,32,39,37.26,39,37.26s-.78,4.58-6.43,4.87-7.41-5.65-7.41-5.65"></path><line x1="32.33" y1="17.48" x2="32.33" y2="46.52"></line></g></svg>
              </span>
              <input onkeyup="formatCurrency(this)" type="text" id="investment" class="rounded-none rounded-e-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Investimento" style="color: #fff!important;" autocomplete="off">
            </div>

            <div class="invest-bg-soft" style="margin-top: 1em;">
              <p>LUCRO</p>
              <span id="lastCandlePrice3" style="display: flex; width: 100%; text-align: center; justify-content: center;">+88% <i data-feather="trending-up" class='mr-0'></i></span>
            </div>

          </div>
        </div>
        <button id="buyBtn">Comprar <span id="lastCandlePrice1">Carregando...</span></button>
        <button style="display: none;" id="sellBtn" disabled>Vender <span id="lastCandlePrice2">Carregando...</span></button>

        <!-- Adicione esta div em algum lugar no seu código HTML -->
        <div class="div-loa" style="margin-top: -0.2em; display: unset!important">
          <div style="display: inline-flex; width: 100%; justify-content: space-between;">
            <p style="color: #ffffffad; text-align: left; display: unset; font-weight: 400; font-size: 0.7em;" class="text-center mt-2">RESTAM: <span id="timer-display" style="font-weight: bold; color: #fff;">00:00:00</span></p>
          </div>
          <div style="margin-top: 0.2em; transition: 3s!important; background-color: #fdfeff1a; border-radius: 3px;" class="w-full bg-gray-200 rounded-full h-3 overflow-hidden mt-4">
              <div id="progress-bar" style="transition: 3s!important;" class="bg-red-500 h-3 w-0"></div>
          </div>
          <p style="color: #ffffffad; text-align: left; display: unset; font-weight: 400; font-size: 0.7em; text-transform: uppercase;" class="text-center mt-2">Para realizar a venda do ativo</p>
        </div>

    </div>
  </div>

  <script type="text/javascript">
      // Função para converter "0:01:00" (horas:minutos:segundos) em segundos
      function timeToSeconds(time) {
          const parts = time.split(':');
          const hours = parseInt(parts[0], 10);   // Primeira parte é horas
          const minutes = parseInt(parts[1], 10); // Segunda parte é minutos
          const seconds = parseInt(parts[2], 10); // Terceira parte é segundos
          return (hours * 3600) + (minutes * 60) + seconds;
      }

      let countdownInterval = null; // Variável global para armazenar o intervalo

      // Função de contagem regressiva com barra de progresso
      function startCountdownWithProgress(value_radio) {
          const progressBar = document.getElementById('progress-bar');
          const timerDisplay = document.getElementById('timer-display');

          let totalTime = timeToSeconds(value_radio); // Total de segundos
          let currentTime = totalTime;

          const step = 100 / totalTime; // Calcula a porcentagem de progresso por segundo

          countdownInterval = setInterval(() => {
              // Atualiza o display de tempo (horas:minutos:segundos)
              const hours = Math.floor(currentTime / 3600);
              const minutes = Math.floor((currentTime % 3600) / 60);
              const seconds = currentTime % 60;
              timerDisplay.textContent = `0${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
            
              // Atualiza a barra de progresso
              const progress = ((totalTime - currentTime) / totalTime) * 100;
              progressBar.style.width = `${progress}%`;

              // Se o tempo acabar, para o intervalo
              if (currentTime <= 0) {
                  progressBar.style.width = `0%`;
                  clearInterval(countdownInterval);
                  end();
              }

              currentTime--; // Reduz o tempo em 1 segundo a cada iteração
          }, 1000); // Intervalo de 1 segundo
      }

      // Função para parar a contagem regressiva
      function stopCountdown() {
          if (countdownInterval) {
              clearInterval(countdownInterval); // Para o intervalo
              countdownInterval = null; // Reseta o intervalo
          }
      }

      function formatCurrency(input) {
        let value = input.value.replace(/\D/g, '');
        value = (value / 100).toFixed(2) + ''; 
        value = value.replace(".", ",");
        value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        input.value = '' + value; 
      }

      let buyPrice = 0;
      let investment = 0;
      let tradeActive = false;
      let balance = '';
      let lastCandle = null; 

      widget = // Certifique-se de que este script seja executado após o carregamento da biblioteca
      new TradingView.widget({
          "width": "100%",
          "height": "500",
          "debug": true,
          "symbol": "{{$symbol_value}}", // Use um símbolo válido aqui
          "interval": "1",
          "timezone": "America/Sao_Paulo",
          "theme": "dark",
          "style": "10",
          "locale": "pt-BR",
          "toolbar_bg": "#f1f3f6",
          "enable_publishing": false,
          "hide_side_toolbar": true,
          "allow_symbol_change": false,
          "hide_top_toolbar": true,
          "hide_logo": true,
          "hide_date_ranges": false,
          "allow_symbol_change": true,
          "withdateranges": false,
          "studies": ["VWAP@tv-basicstudies"],
          "container_id": "tradingview_0b60e",
          "onReady": function() {
              console.log('Widget is ready');
          }
      });

      // Binance para obter velas BTCUSDT
      const binanceSocket = new WebSocket('wss://stream.binance.com:9443/ws/{{$symbol_fetch}}@kline_1m');
      binanceSocket.onmessage = function(event) {
          const message = JSON.parse(event.data);

          lastCandle = {
              close: parseFloat(message.k.c).toFixed(2) 
          };

          // Atualizamos o texto no HTML com o preço de fechamento da última vela
          document.getElementById('lastCandlePrice1').innerText = lastCandle.close;
          document.getElementById('lastCandlePrice2').innerText = lastCandle.close;
      };

      // Função para atualizar o saldo na tela
      function updateBalanceDisplay() {
          const formattedBalance = new Intl.NumberFormat('pt-BR', {
              style: 'currency',
              currency: 'BRL'
          }).format(balance); // Formata o saldo como moeda em BRL

          $('#wallet-1').text('R$'+formattedBalance+'');
          console.log(formattedBalance);
      }

      function AlertSuccess(log) {
        document.getElementById('logs-alerts').innerHTML = "";
        var html = `<div id="toast-success" class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert" style="position: absolute; bottom: 0em; left: 1em;">
            <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
                <svg class="w-5 h-5" 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 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
                </svg>
                <span class="sr-only">Check icon</span>
            </div>
            <div class="ms-3 text-sm font-normal" style="color: #333;">${log}</div>
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" aria-label="Close">
                <span class="sr-only">Close</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>`;

        const toastElement = document.createElement('div');
        toastElement.innerHTML = html.replace('$log', log);
        document.getElementById('logs-alerts').appendChild(toastElement);

        // Adiciona o evento de clique ao botão de fechar
        const closeButton = toastElement.querySelector('button');
        closeButton.addEventListener('click', function() {
            toastElement.remove();
        });
      }

      function AlertError(log) {
        document.getElementById('logs-alerts').innerHTML = "";
        var html = `
          <div id="toast-danger" class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert" style="position: fixed; bottom: 0em; left: 1em;">
            <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
                <svg class="w-5 h-5" 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 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
                </svg>
                <span class="sr-only">Error icon</span>
            </div>
            <div class="ms-3 text-sm font-normal" style="color: #333;">${log}</div>
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-danger" aria-label="Close">
                <span class="sr-only">Close</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>`;

          const toastElement = document.createElement('div');
          toastElement.innerHTML = html.replace('$log', log);
          document.getElementById('logs-alerts').appendChild(toastElement);

          // Adiciona o evento de clique ao botão de fechar
          const closeButton = toastElement.querySelector('button');
          closeButton.addEventListener('click', function() {
              toastElement.remove();
          });
      }

      // Função para comprar
      document.getElementById('buyBtn').addEventListener('click', function() {
          //Validation trade
          if (tradeActive) {
            AlertError('Já existe um investimento ativo, finalize para poder continuar.');
          }


          // Captura o valor do investimento, removendo a formatação
          let investmentInput = document.getElementById('investment').value;
          investmentInput = investmentInput.replace(/[R$.\s]/g, '').replace(',', '.'); 
          investment = parseFloat(investmentInput);

          // Verifica se o valor é válido
          if (isNaN(investment) || investment <= 0) {
            AlertError('Por favor, insira um valor válido para o investimento.');
            tradeActive = false;
            return;
          }

          // Seleciona o radio com name 'helper-radio' que está marcado
          const selectedRadio = document.querySelector('input[name="helper-radio"]:checked');

          // Verifica se algum radio foi selecionado e exibe o valor
          if (selectedRadio) {
            value_radio = selectedRadio.value;
          } else {
            AlertError('Selecione uma opção para continuar.');
            tradeActive = false;
            value_radio = null;
            return;
          }

          // Captura o preço de fechamento da última vela
          const lastCandle = getLastCandle();
          buyPrice = lastCandle.close; // preço de fechamento da vela
          tradeActive = true;

          // Seleciona todos os radio buttons
          let radios = document.getElementsByName('bordered-radio');
          let selectedValue = '';

          // Percorre os radios para encontrar o selecionado
          radios.forEach(function(radio) {
              if (radio.checked) {
                  selectedValue = radio.value; // Captura o value do input selecionado
              }
          });

          $.ajax({
              url: '/user/trader/wallet/log',
              type: 'POST',
              data: {
                 investment: investment,
                 buyPrice: buyPrice,
                 selectedLabel: selectedValue,
                 value_radio: value_radio,
                  _token: '{{ csrf_token() }}' 
              },
              success: function(response) {

                if (response.status == "false") {
                  // balance -= investment;
                  AlertError('Você não tem saldo suficiente para realizar essa compra.');
                  tradeActive = false;

                  // Redirecionar após 3 segundos (3000 milissegundos)
                  setTimeout(() => {
                    window.location.href = "{{env('APP_URL')}}user/trader/manage/wallet?add=wallet";
                  }, 1000);
                } else {
                  // Inicia a contagem regressiva com a barra de progresso
                  startCountdownWithProgress(value_radio);

                  // balance -= investment;
                  document.getElementById('buyBtn').disabled = true;
                  document.getElementById('sellBtn').disabled = false;
                  AlertSuccess('Compra realizada, valor do investimento: R$'+response.investment+'');
                }
              },
              error: function(xhr, status, error) { }
          });  
      });

      function end() {
          if (!tradeActive) {
              AlertError('Nenhum investimento ativo para vender!');
              return;
          }

          // Get values
          const lastCandle = getLastCandle();
          const sellPrice = lastCandle.close; // preço de fechamento da próxima vela

          $.ajax({
              url: '/user/trader/wallet/log/end',
              type: 'POST',
              data: {
                 sellPrice: sellPrice,
                  _token: '{{ csrf_token() }}' 
              },
              success: function(response) {
                if (response.status_viewn == "true") {
                  AlertSuccess(response.profit_log);
                } else {
                  AlertError(response.profit_log);
                }
              },
              error: function(xhr, status, error) { }
          });  

          // Resetando o estado do trade
          tradeActive = false;
          document.getElementById('sellBtn').disabled = true;
          document.getElementById('buyBtn').disabled = false;
          document.getElementById('investment').value = ''; // Limpa o campo de investimento

          const progressBar = document.getElementById('progress-bar');
          progressBar.style.width = `0%`;
          currentTime = 0;

          const timerDisplay = document.getElementById('timer-display');
          timerDisplay.textContent = `00:00:00`;
          stopCountdown();
      }

      function getLastCandle() { return lastCandle; }
  </script>
</div>

<style type="text/css">
  @media (max-width: 700px) {
      #dropdownUsers li { height: 2.5em; display: grid; }
      .liners-upsx li a { margin-top: 0em!important; }
      .liners-upsx li a { margin-bottom: 0em; margin-top: 0em!important; }
      .liners-upsx .gap-6 { gap: 0.5rem!important; }
  }

  #dropdownRadioHelper > ul { max-height: 15em; overflow-x: auto; }
</style>
@endsection