<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Recharge Confirmation</title>
  <style>
    :root{
      --bg:#0a0d1a;
      --card:#11172b;
      --soft:#1a223a;
      --text:#fdfdfd;
      --muted:#9aa7c2;
      --primary:#4fa3ff;
      --primary-2:#70b8ff;
      --radius:14px;
    }
    *{box-sizing:border-box}
    
    body{
      margin:0;
      font-family:"Segoe UI",sans-serif;
      background:var(--bg);
      color:var(--text);
      min-height:100vh;
      overflow-y:auto; /* allows scrolling */
    }

    .recharge-container{ 
      max-width:520px; 
      margin:0 auto; 
      padding:20px; 
      overflow:visible; 
    }

    /* Header */
    .recharge-header{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
    .back-btn{ background:none; border:none; color:var(--primary-2); font-size:22px; cursor:pointer; }
    .recharge-header h2{ flex:1; margin:0; text-align:center; color:var(--primary-2); }

    /* Info Card */
    .recharge-info{ background:var(--card); padding:18px; border-radius:var(--radius); text-align:center; margin-bottom:20px; }
    .recharge-label{ font-size:14px; color:var(--muted); margin:0 }
    .recharge-amount{ font-size:22px; font-weight:700; color:var(--primary-2); margin:5px 0; }
    .recharge-method{ font-size:15px; }
    .recharge-timer{ margin-top:6px; font-size:14px; color:#f87171 }

    /* Copyable Fields */
    .copy-field{ display:flex; gap:8px; margin-bottom:12px; }
    .copy-field input{ flex:1; padding:10px; border-radius:8px; border:1px solid #2a3350; background:var(--soft); color:var(--text); }
    .copy-btn{ padding:10px 14px; border:none; border-radius:8px; cursor:pointer; background:var(--primary); color:#fff; font-weight:600; }

    /* Main Confirm Button */
    .main-btn{ width:100%; padding:14px; border:none; border-radius:var(--radius); cursor:pointer;
      background:linear-gradient(90deg,var(--primary),var(--primary-2));
      color:#fff; font-size:16px; font-weight:700; }

    /* Modal */
    .modal{ display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.65); justify-content:center; align-items:center; z-index:999; overflow-y:auto; }
    .modal-content{ 
      background:var(--card); 
      padding:20px; 
      border-radius:var(--radius); 
      width:90%; 
      max-width:480px; 
      max-height:90vh; /* prevents modal from exceeding viewport height */
      overflow-y:auto; /* scroll inside modal */
    }
    .modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
    .modal-header h3{ margin:0; color:var(--primary-2); }
    .close{ background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; }

    .form-row{ margin-bottom:14px; }
    .form-row label{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:var(--primary-2); }
    .form-row input[type="text"], .form-row input[type="file"]{
      width:100%; padding:10px; border-radius:8px; border:1px solid #2a3350; background:var(--soft); color:var(--text);
    }

    .modal-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:16px; }
    .secondary-btn{ padding:10px 16px; background:#2a3350; border:none; border-radius:8px; color:#fff; cursor:pointer; }
    .submit-btn{ padding:10px 16px; background:var(--primary); border:none; border-radius:8px; color:#fff; cursor:pointer; font-weight:700; }

    /* File Preview */
    #filePreview{ margin-top:8px; }
    #filePreview img{ max-width:100%; border-radius:8px; margin-top:8px; }
  </style>
</head>
<body>
  <div class="recharge-container">
    <!-- Header -->
    <div class="recharge-header">
      <button onclick="window.location.href='{{ route('user.deposit') }}'" class="back-btn">&larr;</button>
      <h2>Recharge</h2>
    </div>

    <!-- Recharge Info -->
    <div class="recharge-info">
      <p class="recharge-label">Requested Amount</p>
      <p class="recharge-amount">{{ price($amount) }}</p>
      <p class="recharge-method">{{ $payment_method->name }}</p>
      <p class="recharge-timer"><span id="timer">30:00</span> remaining</p>
    </div>

    <!-- Copyable Fields -->
    <div class="copy-field">
      <input type="text" value="{{ $payment_method->address }}" id="address" readonly>
      <button type="button" class="copy-btn" onclick="copyField('address')">Copy</button>
    </div>
    <div class="copy-field">
      <input type="text" id="refNum" readonly>
      <button type="button" class="copy-btn" onclick="copyField('refNum')">Copy</button>
    </div>
    <div class="copy-field">
      <input type="text" id="bankName" value="Bank Transfer" readonly>
      <button type="button" class="copy-btn" onclick="copyField('bankName')">Copy</button>
    </div>
    <div class="copy-field">
      <input type="text" id="accTitle" value="Prime Videos" readonly>
      <button type="button" class="copy-btn" onclick="copyField('accTitle')">Copy</button>
    </div>

    <button class="main-btn" id="openModal">Confirm Recharge</button>
  </div>

  <!-- Modal -->
  <div class="modal" id="confirmModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>Payment Confirmation</h3>
        <button class="close" id="closeModal">&times;</button>
      </div>
      <form id="confirmForm" action="{{ route('payment_confirmation') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="amount" value="{{ $amount }}">
        <input type="hidden" name="payment_method" value="{{ $payment_method->name }}">
        <input type="hidden" name="address" value="{{ $payment_method->address }}">
        <input type="hidden" name="reference" id="refHidden">

        <!-- Transaction ID -->
        <div class="form-row">
          <label for="txid">Transaction ID</label>
          <div class="copy-field">
            <input id="txid" name="transaction_id" type="text" placeholder="Enter Your Phone number" required />
            <button type="button" class="copy-btn" onclick="copyField('txid')">Copy</button>
          </div>
        </div>

        <!-- Upload Proof -->
        <div class="form-row">
          <label for="screenshot">Upload Screenshot / Proof</label>
          <input id="screenshot" name="photo" type="file" accept="image/*" required />
          <div id="filePreview" style="display:none;">
            <img id="previewImg" src="" alt="Preview"/>
          </div>
        </div>

        <div class="modal-actions">
          <button type="button" class="secondary-btn" id="cancelModal">Cancel</button>
          <button type="submit" class="submit-btn">Submit</button>
        </div>
      </form>
    </div>
  </div>

  <script>
    // Random Reference Number
    function generateRef() {
      let chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
      let ref = "";
      for (let i = 0; i < 8; i++) {
        ref += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      return "REF-" + ref;
    }
    let refVal = generateRef();
    document.getElementById("refNum").value = refVal;
    document.getElementById("refHidden").value = refVal;

    // Copy Function
    function copyField(id) {
      let el = document.getElementById(id);
      let text = el.value || el.textContent;
      navigator.clipboard.writeText(text).then(() => {
        alert("Copied: " + text);
      });
    }

    // File Preview
    document.getElementById("screenshot").addEventListener("change", function(){
      const file = this.files[0];
      if(file){
        const reader = new FileReader();
        reader.onload = function(e){
          document.getElementById("filePreview").style.display="block";
          document.getElementById("previewImg").src = e.target.result;
        }
        reader.readAsDataURL(file);
      }
    });

    // Timer 30:00 countdown
    let timerElement = document.getElementById("timer");
    let time = 30 * 60;
    function updateTimer() {
      let minutes = Math.floor(time / 60);
      let seconds = time % 60;
      timerElement.textContent =
        String(minutes).padStart(2,'0') + ":" + String(seconds).padStart(2,'0');
      if (time > 0) {
        time--;
      } else {
        clearInterval(timerInterval);
        timerElement.textContent = "Expired";
      }
    }
    updateTimer();
    let timerInterval = setInterval(updateTimer, 1000);

    // Modal Logic
    let modal = document.getElementById("confirmModal");
    document.getElementById("openModal").onclick = () => modal.style.display = "flex";
    document.getElementById("closeModal").onclick = () => modal.style.display = "none";
    document.getElementById("cancelModal").onclick = () => modal.style.display = "none";
    window.onclick = (e) => { if(e.target == modal) modal.style.display="none"; }
  </script>
</body>
</html>
