<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Payment</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link rel="stylesheet" href="../css/page5.css" />
</head>

<body>
   <?php
    include('connection.php');
      $sql = "SELECT * FROM `payment`";
      $res = mysqli_query($con,$sql);
      $row = mysqli_fetch_assoc($res);
            
    ?>
  <div class="container">
    <div class="back">
      <i class="fa-solid fa-arrow-left"></i>
    </div>
    <h2>Select Payment Method</h2>

    <div class="payment-methods">

      <label class="method">
        <input type="radio" name="payment" />
        <span>📱 UPI Payment</span>
      </label>

      <div class="upi-box">
        <div class="upi-display">
          <span id="adminUpi"><?php echo $row['upi'];?></span>
          <button class="copy-btn" onclick="copyUpi()">
            <i class="fa-regular fa-copy"></i>
          </button>
        </div>

        <p class="upi-hint">Copy this UPI ID and pay via any UPI app</p>
        <p class="copy-msg" id="copyMsg">UPI ID copied to clipboard</p>
      </div>

      <!-- <label class="method">
          <input type="radio" name="payment" />
          <span>🏦 Net Banking</span>
        </label> -->
      <p class="or">OR</p>
    </div>
    <h3>Scan QR to Pay</h3>

    <div class="qr-box">
      <div id="qrcode"></div>
      <p style="font-size: 13px">Scan with any UPI app</p>
    </div>

    <button class="pay-btn">Pay Now</button>
  </div>

  <script src="../js/page5.js"></script>
</body>

</html>