<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Recharge</title>
  <style>
  :root {
    --bg:#0b0b0e;
    --card:#16161b;
    --soft:#1d1d24;
    --text:#e9e9ef;
    --muted:#a7a7b3;
    --gold:#d9b872;
    --gold-2:#f5d293;
    --radius:14px;
  }
  body {
    margin:0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    /* 👇 Half background */
    background: linear-gradient(to bottom, var(--bg) 50%, var(--card) 50%);
    color:var(--text);
    min-height:100vh;
  }
  .page {
    max-width:480px;
    margin:0 auto;
    padding:20px;
    position:relative;
    z-index:2;
  }
    h2 {
      text-align:center;
      color:var(--gold-2);
      margin-bottom:20px;
    }
    /* Back button */
    .back-btn {
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:var(--gold);
      text-decoration:none;
      font-weight:600;
      margin-bottom:15px;
    }
    .back-btn svg {
      width:18px;height:18px;
      fill:var(--gold);
    }

    .form-container {
      background:var(--card);
      padding:20px;
      border-radius:var(--radius);
      box-shadow:0 6px 18px rgba(0,0,0,.35);
    }
    .form-group {
      margin-bottom:20px;
    }
    .form-label {
      display:block;
      font-weight:600;
      margin-bottom:8px;
      color:var(--gold);
    }
    .form-select, .form-input {
      width:100%;
      padding:10px 12px;
      border-radius:8px;
      font-size:16px;
      border:1px solid #333;
      background:var(--soft);
      color:var(--text);
      transition:border .3s, box-shadow .3s;
    }
    .form-select:focus, .form-input:focus {
      border-color:var(--gold);
      outline:none;
      box-shadow:0 0 0 2px rgba(217,184,114,.3);
    }
    .amount-options {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .amountItem {
      flex:1 1 30%;
      padding:10px;
      text-align:center;
      background:var(--soft);
      border-radius:8px;
      cursor:pointer;
      border:1px solid #333;
      transition:all .2s;
    }
    .amountItem.ui-active {
      background:var(--gold-2);
      color:#1c1c1c;
      font-weight:600;
    }
    .recharge-btn {
      margin-top:20px;
    }
    .recharge-btn button {
      width:100%;
      padding:14px;
      background:linear-gradient(90deg,var(--gold),var(--gold-2));
      color:#1c1c1c;
      font-size:16px;
      font-weight:700;
      border:none;
      border-radius:var(--radius);
      cursor:pointer;
      transition:transform .2s;
    }
    .recharge-btn button:hover {
      transform:translateY(-2px);
    }
    .recharge-desc {
      margin-top:20px;
      font-size:13px;
      color:var(--muted);
    }
    .recharge-desc-list {
      display:flex;
      align-items:flex-start;
      gap:8px;
      margin-bottom:10px;
    }
    .dot {
      width:6px;
      height:6px;
      background:var(--gold);
      border-radius:50%;
      margin-top:6px;
    }
    /* Loader */
    .loader {
      display:none;
      position:fixed;
      top:0;left:0;right:0;bottom:0;
      background:rgba(0,0,0,.6);
      z-index:9999;
      align-items:center;
      justify-content:center;
    }
    .loader div {
      width:40px;height:40px;
      border:4px solid #ccc;
      border-top:4px solid var(--gold);
      border-radius:50%;
      animation:spin 1s linear infinite;
    }
    @keyframes spin {
      0%{transform:rotate(0)}
      100%{transform:rotate(360deg)}
    }
  </style>
</head>
<body>
  <div class="page">
    <!-- Back Button -->
    <a href="<?php echo e(url()->previous()); ?>" class="back-btn">
      <svg viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
      Back
    </a>

    <h2>Recharge</h2>

    <form class="form-container">
      <!-- Payment Method -->
      <div class="form-group">
        <label for="methods" class="form-label">Choose Channel</label>
        <select class="form-select" name="methosd" id="methods">
          <?php $__currentLoopData = \App\Models\PaymentMethod::get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $element): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <option value="<?php echo e($element->id); ?>"><?php echo e($element->name); ?></option>
          <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </select>
      </div>

      <!-- Amount Selection -->
      <div class="form-group">
        <label class="form-label">Select Amount</label>
        <div class="amount-options">
          <div class="amountItem" onclick="getAmount(this,200)">200</div>
          <div class="amountItem" onclick="getAmount(this,480)">480</div>
          <div class="amountItem" onclick="getAmount(this,1500)">1500</div>
          <div class="amountItem" onclick="getAmount(this,4800)">4800</div>
          <div class="amountItem" onclick="getAmount(this,12000)">12000</div>
          <div class="amountItem" onclick="getAmount(this,40000)">4000</div>
        </div>
      </div>

      <!-- Enter Custom Amount -->
      <div class="form-group">
        <label for="customAmount" class="form-label">Or Enter Amount</label>
        <input type="number" id="customAmount" class="form-input" placeholder="Enter custom amount" oninput="setCustomAmount(this.value)">
      </div>

      <input type="hidden" name="amount" value="">

      <!-- Confirm Button -->
      <div class="recharge-btn">
        <button type="button" onclick="submitRecharge()">Confirm Recharge</button>
      </div>
    </form>

    <!-- Recharge Instructions -->
    <div class="recharge-desc">
      <div class="recharge-desc-list">
        <div class="dot"></div>
        <div class="desc-text">Please strictly follow the recharge instructions</div>
      </div>
      <div class="recharge-desc-list">
        <div class="dot"></div>
        <div class="desc-text">If recharge not received, confirm bank card deduction status.</div>
      </div>
      <div class="recharge-desc-list">
        <div class="dot"></div>
        <div class="desc-text">If you have any questions, please contact online customer service</div>
      </div>
    </div>
  </div>

  <!-- Loader -->
  <div class="loader"><div></div></div>

  <?php echo $__env->make('alert-message', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
  <?php echo $__env->make('loading', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
  <?php echo $__env->make('partials.preloader', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

  <script>
    function getAmount(_this, amount) {
      let elements = document.querySelectorAll('.amountItem');
      elements.forEach(el => el.classList.remove('ui-active'));
      _this.classList.add('ui-active');
      document.querySelector('input[name="amount"]').value = amount;
      document.getElementById('customAmount').value = ''; // reset custom input
    }

    function setCustomAmount(value){
      // remove active highlight if custom amount entered
      document.querySelectorAll('.amountItem').forEach(el => el.classList.remove('ui-active'));
      document.querySelector('input[name="amount"]').value = value;
    }

    function message(msg){
      alert(msg); // replace with notify system if needed
    }

    function submitRecharge(){
      document.querySelector('.loader').style.display='flex';
      let amount = document.querySelector('input[name="amount"]').value;
      let methosd = document.querySelector('select[name="methosd"]').value;

      if (methosd === ''){
        document.querySelector('.loader').style.display='none';
        message('Choose Channel');
        return;
      }
      if (amount >= 20){
        window.location.href = '<?php echo e(url('/deposit')); ?>' + "/" + amount + "/" + methosd;
      }else{
        document.querySelector('.loader').style.display='none';
        message('Minimum amount is 20');
      }
    }
  </script>
</body>
</html>
<?php /**PATH /home/ddmkeqvc/public_html/resources/views/app/main/deposit/index.blade.php ENDPATH**/ ?>