@extends('layouts.front')
@section('content')
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <div class="alert alert-danger alert-danger-page fade in" style="display:none;margin-top:10px;"
            tabindex="-1">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <p id="pageDanger"></p>
        </div>
      <div class="alert alert-block alert-info fade in" style='margin-top:10px;' tabindex="-1">
        <p> Your account is inactive. For activation you need <a href="#">to top up your balance</a>. <br> Attention: Not activated accounts for more than 5 days will be deleted automatically.<br>
    Contact us on telegram: <a href="https://t.me/BrianclubSupport">@briansclubsupport</a></p> </p>
    </div>


<div class="panel panel-default" style="margin-top: 15px;min-height: 400px;">
<div class="panel-body">
<div class="col-sm-16">

<center>
<table class="table" style="width:800px;">
<tr align="center">
<td style="vertical-align: middle; text-align:left; border-top: none; font-weight: bold;" colspan="3">
<span style="color: #2a79bd;">- Minimum amount to deposit:</span> <span style="font-weight: bold; color: red;">20 USD</span><br>
<span style="color: #2a79bd;">- Processing fee:</span> 4%<br>
</td>
<td style="font-size: 30px; font-weight: bold; vertical-align: middle;text-align: center; border-top: none;" colspan="2">
<span>Important</span>
</td>
</tr>
<tr align="center">
<td style="vertical-align: middle; border-top: none; font-weight: bold;" colspan="5">
<span style="color: #2a79bd;">Never pay twice to the same crypto address.</span> Always get a new address. <span style="color: #2a79bd;">One address - one deposit!</span><br>

</td>
</tr>
<tr align="center">

                <table class="table" style="width:800px;">
                  <tr align="center">
                       <td style="vertical-align: bottom;border-top: none;">
                      <img src="/images/bitcoin.gif" alt="Bitcoin">
                      <button class="btn btn-default" style="width: 100%;margin-top: 10px;" onclick="updateAddress('Bitcoin')">Deposit</button>
                    </td>
                    <td style="vertical-align: bottom;border-top: none;">
                      <img src="/images/usdt1.png" alt="USDT TRC20">
                      <button class="btn btn-default" style="width: 100%;margin-top: 10px;" onclick="showDepositModal('USDT'); updateAddress('USDT')">Deposit</button>
                    </td>
                    <td style="vertical-align: bottom;border-top: none;">
                      <img src="/images/litecoin.png" alt="Litecoin">
                      <button class="btn btn-default" style="width: 100%;margin-top: 10px;" onclick="updateAddress('Litecoin')">Deposit</button>
                    </td>
                    <td style="vertical-align: bottom;border-top: none;">
                      <img src="/images/dash_logo.png" alt="Dash">
                      <button class="btn btn-default" style="width: 100%;margin-top: 10px;" onclick="updateAddress('Dash')">Deposit</button>
                    </td>
                  
                   
                  </tr>
                  <tr>
                    <td style="vertical-align: middle;text-align: center; border-top: none;" colspan="4">
                      <div id="divBtcAddresses" style="display: none;">
                        <div style="display: flex; align-items: center; justify-content: center;">
                          <div id="qrCode"></div>
                          <span id="cryptoAddress" style="margin-left: 10px; vertical-align: middle; font-size:1.2em;"></span>
                        </div>
                      </div>
                    </td>
                  </tr>
                </table>
              </center>
              <div class="modal fade" id="modalDepositRequest" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">Close</span>
                      </button>
                      <h4 class="modal-title" id="modalDepositRequestTitle">Request an address</h4>
                    </div>
                    <div class="modal-body">
                      <div class="alert alert-danger alert-danger-modal fade in" style='display:none;'>
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <p class='modalDanger'></p>
                      </div>
                      <div id="divDepositRequestContent"> - only USDT ( <b>TRC20</b>) is accepted. If you send ERC20 or BEP20 It will be lost forever. <br> - minimum amount is $50 <br> - deposits below $50 will not be posted to your account balance and will be lost forever <br>
                        <br> By pressing <b>"I understand"</b> button, you confirm reading these terms and agree with them.
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button class="btn btn-success" onclick="updateAddress('USDT'); $('#modalDepositRequest').modal('hide');">I understand</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
              <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
              <script>
                function showDepositModal(crypto) {
                  if (crypto === 'USDT TRC20') {
                    // Update modal content
                    var modalTitle = document.getElementById('modalDepositRequestTitle');
                    var modalContent = document.getElementById('divDepositRequestContent');
                    modalTitle.innerHTML = 'Deposit ' + crypto;
                    modalContent.innerHTML = `
                
                        <div class="alert alert-danger alert-danger-modal fade in" style='display:none;'>
                          <button type="button" class="close" data-dismiss="alert">×</button>
                          <p class='modalDanger'></p>
                        </div>
                        - only ${crypto} is accepted. If you send ERC20 or BEP20 It will be lost forever.
                        <br>
                        - minimum amount is $50
                        <br>
                        - deposits below $50 will not be posted to your account balance and will be lost forever
                        <br>
                        <br>
                        By pressing 
                        <b>"I understand"</b> button, you confirm reading these terms and agree with them.
                    `;
                    // Show the modal for USDT TRC20
                    $('#modalDepositRequest').modal('show');
                  } else {
                    // Handle other cryptocurrencies
                    // ...
                  }
                }

                function updateAddress(crypto) {
  var addresses = {
    'USDT': 'TRDDW19bEH3v2XNMdPN3UeTEzFdhCWSTzy',
    'Litecoin': 'MGFh5D6uak1qb7YKoQ2RdmcAmkqEyTDx99',
    'Dash': 'XrTWdA6wyPgbqXhS88hQ83HjMkCna4x4kw',
    'Monero': '42LRZAs8sFmiWF761zw7XUL3v3ZitKPgX4WnyRsiWFNtQtXxX5iEGctC7wXcXL6uFMG6x5hV5x6BdVctiywU6xSJ3Qxqw',
    'Bitcoin': 'bc1q9836tc42ppemg9svjd8sheej94cf5tc4rneyq6',
  };

  var qrCodeDiv = document.getElementById('qrCode');
  var cryptoAddress = document.getElementById('cryptoAddress');
  var divBtcAddresses = document.getElementById('divBtcAddresses');

  qrCodeDiv.innerHTML = '';

  new QRCode(qrCodeDiv, {
    text: addresses[crypto],
    width: 180,
    height: 180
  });

  cryptoAddress.textContent = addresses[crypto];
  divBtcAddresses.style.display = 'block';

  var tableBody = document.querySelector('#dataTable tbody');

  tableBody.innerHTML = `
    <tr>
      <th>System</th>
      <th>Amount</th>
      <th>Status</th>
      <th>Date</th>
    </tr>
  `;

  // ✅ Format: Just now, 5.11.2025
  var currentDate = new Date();
  var day = currentDate.getDate();
  var month = currentDate.getMonth() + 1;
  var year = currentDate.getFullYear();
  var formattedDate = `Just now, ${day}.${month}.${year}`;

  tableBody.innerHTML += `
    <tr>
      <td>${crypto}</td>
      <td>0 USD</td>
      <td><font color="grey">  <i> Unconfirmed Transaction </i>  </font> (  ${addresses[crypto]} ) </td>
      <td>${formattedDate}</td>
    </tr>
  `;
}

              </script>
             
              <span>
                Bitcoin/Litecoin transaction awaiting for 2 confirmations on Bitcoin/Litecoin network. Confirmations on the Bitcoin network can take from 20 minutes up to 1 day if you send it without fee. </span>
              <br>
              <br>
              <div id="dataTable">
                <table class="table table-responsive table-hover">
                  <tbody>
                    <tr>
                      <th>System</th>
                      <th>Amount</th>
                      <th>Status</th>
                      <th>Date</th>
                    </tr>
                  </tbody>
                </table>
                <nav class="pull-right">
                  <ul class="pagination">
                    <li class="disabled">
                      <a href="#">
                        <span aria-hidden="true">«</span>
                        <span class="sr-only">previous</span>
                      </a>
                    </li>
                    <li class="active">
                      <a href="?page=1">1</a>
                    </li>
                    <li>
                      <a href="?page=2">2</a>
                    </li>
                    <li>
                      <a href="?page=2">
                        <span aria-hidden="true">»</span>
                        <span class="sr-only">next</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                <script>
                  var btc_course = 6841.4584;
                  if (window.jQuery) {
                    $('#user_balance').html('0.00');
                    $('.btc_course').html('6841.4584');
                  }
                </script>
              </div>
              <!-- Modal -->
              <div class="modal fade" id="modalDetails" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">Close</span>
                      </button>
                      <h4 class="modal-title" id="modalDepositTitle">Payment Details</h4>
                    </div>
                    <div class="modal-body">
                      <div class="alert alert-danger alert-danger-modal fade in" style="display:none;">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <p class="modalDanger"></p>
                      </div>
                      <div id="divDetailsContent">
                        <table class="table table-bordered table-responsive">
                          <tbody>
                            <tr>
                              <th>Payment System</th>
                              <td>Bitcoin Merchant</td>
                            </tr>
                            <tr>
                              <th>Amount</th>
                              <td> 0 USD</td>
                            </tr>
                            <tr>
                              <th>Total Amount</th>
                              <td>0 USD</td>
                            </tr>
                            <tr>
                              <th>Rate</th>
                              <td>0 USD</td>
                            </tr>
                            <tr>
                              <th>Fee</th>
                              <td>0%</td>
                            </tr>
                            <tr>
                              <th>Status</th>
                              <td>
                                <font color="grey">
                                  <i>Unconfirmed Transaction</i>
                                </font>
                              </td>
                            </tr>
                            <tr>
                              <th>Date</th>
                              <td>2024-01-01 19:20</td>
                            </tr>
                            <tr>
                              <th>Changes in the balance</th>
                              <td>0.00 => 0.00</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endsection