<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Donate</title>
  <link rel="stylesheet" href="style-donate.css" />
  <script src="qwebchannel.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
  <script defer src="script-donate.js"></script>
</head>
<body>
  <div class="content">
    <!-- Top Bar -->
    <div class="top-bar">
      <div class="status">
        <img id="status-icon" src="../images/icon_on0.png" alt="Status Icon" />
        <div class="status-container">
          <span id="online-label"><span id="online-text">Online:</span> <span id="online-count">?</span>/500</span>
          <div class="online-bar">
            <div id="online-fill" style="width: 0%"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Center -->
    <div class="center">
      <h1 id="donate-title">Donate to Support the Server</h1>
	  <p id="donate-description">Choose currency, enter character name and amount. Prices update automatically for PayPal, USDT, and Stripe.</p>
	  
      <!-- Donate Panel -->
      <div class="donate-columns">
        <!-- Left -->
        <div class="donate-left">
          <select id="currency" style="width: 103%;">
            <option value="WCoinC">WCoinC</option>
          </select>
          <input type="text" id="charname" placeholder="Enter your character name" style="width: 96%;" />
          <input type="number" id="amount" placeholder="100" min="1" style="width: 96%;" />
        </div>

        <!-- Right -->
		<div class="donate-right">
          <div class="payment-buttons">
            <button class="btn-paypal" id="pay-paypal" title="+5% PayPal fee">
              <img src="../images/paypal.png" alt="PayPal" />
              <span id="btn-paypal-text">Pay with PayPal</span> <span id="paypal-amount">0.00 EUR</span>
            </button>

          </div>
		</div>
      </div>

		<!-- Payment Section (обертка для переключения) -->
		<div id="payment-section">
		<!-- Payment Info -->
			<div id="payment-info" class="payment-info">
			<div class="method">
				<img src="../images/paypal.png" alt="PayPal" />
				<span id="fee-paypal">+5% fee</span>
			</div>
			<div class="separator">•</div>
			<div class="method">
				<img src="../images/tether.png" alt="USDT" />
				<span id="fee-usdt">+10% fee</span>
			</div>
			<div class="separator">•</div>
			<div class="method">
				<img src="../images/stripe.png" alt="Stripe" />
				<span id="fee-stripe">no additional fees</span>
			</div>
			</div>
		
		
		<!-- Error Message (временно заменяет payment-info) -->
			<div id="error-message" class="payment-error">Minimum purchase amount is equivalent to 1.00 EUR.</div>
		</div>

      <!-- Discount Bar -->
      <div class="discount-bar">
        <div class="discount-labels">
          <span>0€</span>
          <span>50€ (10%)</span>
          <span>100€ (15%)</span>
          <span>200€+ (20%)</span>
        </div>
        <div class="progress-track">
          <div id="discount-progress"></div>
        </div>
		<div class="discount-footer">
		<div id="discount-info" title="Spend more to unlock bigger discounts">No discount</div>
		<div id="raw-eur-preview">Approx. base value: 0.00 EUR</div>
		</div>
      </div>
    </div>


  </div>

  <!-- QR Modal -->
  <div id="qr-modal" class="qr-modal">
    <div class="qr-modal-content">
      <span class="qr-close">&times;</span>
      <h3 id="qr-title">Payment</h3>

      <div id="trc20-input-container">
        <input type="text" id="trc20-input" placeholder="Your TRC20 Wallet Address" style="width: 93%; padding: 8px; font-size: 14px; text-align: center;" />
        <button id="trc20-confirm" style="margin-top: 10px; width: 100%; padding: 10px; font-weight: bold; cursor: pointer;">Confirm</button>
      </div>

      <canvas id="qr-code" style="display:none; margin: 15px auto;"></canvas>
      <button id="copy-button" class="copy-btn" style="display:none; margin: 0 auto; cursor: pointer;">Copy Wallet Address</button>
    </div>
  </div>

</body>
</html>
