<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BM Recharge</title>
  <link rel="stylesheet" href="/static/home/css/app.css?v=5.8"> 
  <link rel="stylesheet" href="/static/home/css/iconfont.css"> 
  <link href="https://bm-ph.shop/static/home/js/need/layer.css?2.0" type="text/css" rel="styleSheet" id="layermcss"> 
  <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .cz-index-top {
            margin-top: 0px;
            width: 100%;
            height: 40px;
            background: #303353;
            border-radius: 0;
            margin-left: 0%;
        }

        .tixianlog-index-top-title {
            margin-top: 0.5rem;
        }

        .tixianlog-index-top-mull {
            height: 3rem;
            line-height: 3rem;
            text-align: left;
            padding-left: 1rem;
        }

        .Putforwardbox {
            width: 92%;
            margin-left: 4%;
            background: #fff;
            text-align: left;
            color: #8f8f8f;
            margin-top: 1rem;
            margin-bottom: 70px;
        }

        .exchange {
            padding-top: 1rem;
            background: #303353;
            margin-top: -1px;
        }

        .exchange input {
            height: 3rem;
            line-height: 3rem;
            width: 98%;
            margin-left: 1%;
            border-radius: 0.5rem;
            background: #fff;
            padding-left: 10px;
            color: #39393d;
            outline: none;
            border: 1px #303353 solid;
            box-sizing: border-box;
            font-size: 20px;
        }

        .recharge-price-list {
            width: 98%;
            float: left;
            margin-left: 1%;
            margin-bottom: 1rem;
        }

        .recharge-price-list ul {
            width: 100%;
            list-style: none;
        }

        .recharge-price-list ul li {
            width: 30%;
            height: 2.5rem;
            line-height: 2.5rem;
            margin-top: 1rem;
            font-size: 16px;
            color: #8f8f8f;
            float: left;
            text-align: center;
            border: 1px solid #8f8f8f;
            border-radius: 5px;
            background: #fff;
            cursor: pointer;
        }

        .recharge-price-list .cur {
            color: #fff;
            background: #f8ce38;
            border: 1px solid #f8ce38;
            font-weight: 600;
        }

        .recharge-price-list ul li:nth-child(2),
        .recharge-price-list ul li:nth-child(5),
        .recharge-price-list ul li:nth-child(8) {
            margin-left: 4%;
            margin-right: 4%;
        }

        .Putforwardbtn {
            height: 3rem;
            margin-top: 0.5rem;
        }

        .Putforwardbtn button {
            width: 92%;
            float: left;
            margin-left: 4%;
            height: 3rem;
            appearance: none;
            background: #303353;
            outline: none;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            color: #fff;
            letter-spacing: 1px;
        }

        .recharge-input {
            width: 92%;
            margin-left: 4%;
            border: 1px solid #009654;
            height: 2.5rem;
            line-height: 2.5rem;
            display: inline-flex;
            border-radius: 5px;
            background: #fff;
        }

        .recharge-input span {
            color: #8f8f8f;
            width: 35%;
            margin-left: 0.25rem;
            margin-top: 0.25rem;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
        }

        .recharge-input select {
            color: #009654;
            width: 60%;
            margin: 0.25rem;
            height: 2rem;
            border: none;
            background: #fff;
        }

        .navbar {
            position: absolute;
            top: 0;
            width: 100%;
            line-height: 40px;
            z-index: 20;
        }

        .navbar .left {
            width: 50px;
            height: 40px;
            position: absolute;
            left: 10px;
        }

        .navbar .right {
            width: 50px;
            height: 40px;
            position: absolute;
            right: 10px;
        }

        .recharge-box-div {
            border: 1px solid #303353;
            display: flex;
            flex-direction: row;
            margin: 0 1%;
            border-radius: 5px;
            background: #fff;
            padding: 5px;
            line-height: 2em;
        }

        .recharge-box-div span {
            margin-left: 10px;
        }

        .paytitle {
            width: 33%;
        }

        .Mylist {
            width: 67%;
            display: flex;
            flex-wrap: wrap;
        }

        .mylabel {
            display: inline-block;
            width: 100%;
        }

        .myradio {
            display: none
        }

        .myradioInput {
            background-color: #fff;
            border: 2px solid rgba(0, 0, 0, 0.15);
            border-radius: 100%;
            display: inline-block;
            height: 20px;
            margin-right: 10px;
            margin-top: -1px;
            vertical-align: middle;
            width: 20px;
            line-height: 1
        }

        .myradio:checked+.myradioInput:after {
            background-color: #303353;
            border-radius: 100%;
            content: "";
            display: inline-block;
            height: 14px;
            margin-left: 3px;
            margin-top: 3px;
            width: 14px
        }

        .mycheckbox.myradioInput,
        .myradio:checked+.mycheckbox.myradioInput:after {
            border-radius: 0
        }

        .myradio:checked+.myradioInput {
            border: 2px solid #303353;
        }

        /* chongzhitis */
        .recharge-tips {
            margin-top: 38px;
            width: 100%;
            background: #303353;

        }

        .recharge-tips-title {
            width: 60%;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            margin-left: 10px;
        }

        .recharge-tips-content {
            color: #fff;
            width: 60%;
            height: 80px;
            margin-left: 10px;
            /* line-height: 100px; */
            /* text-align: center; */
        }

        .recharge-tips img {
            width: 70px;
            height: 70px;
            position: absolute;
            right: 10px;
            top: 60px;
        }

        .navbar-inner img {
            width: 25px;
            height: 25px;
            position: absolute;
            right: 0px;
            top: -35px;
        }
    </style> 
 </head> 
 <body> 
  <div class="views">
    <!-- Navbar -->
    <div class="navbar theme-white">
      <div class="navbar-inner">
        <div class="left">
          <a href="javascript:history.back();" class="external link">
            <i class="icon iconfont icon-angleleft"></i>Back
          </a>
        </div>
        <div class="center" style="left: -24px; color: #303353;">Recharge</div>
        <div class="right" onclick="window.location.href='{{route('recharge.history.preview')}}'">
          <img src="/static/home/img/bemine/iconlog.png" alt="">
        </div>
      </div>
    </div>

    <!-- Tips -->
    <div class="recharge-tips">
      <div class="recharge-tips-title"><p>Recharge</p></div>
      <div class="recharge-tips-content">
        <p>Please do not disclose your account password to anyone.</p>
      </div>
      <img src="/static/home/img/bemine/photo.png" alt="">
    </div>

    <!-- Main Form -->
    <div class="page navbar-fixed">
      <div class="cz-index-top">
        <p class="tixianlog-index-top-title">Current Balance: {{price(auth()->user()->balance)}}</p>
      </div>

      <div class="exchange">
        <div style="width:100%">
          <input type="number" name="amount" id="amount" placeholder="Please enter the recharge amount" value="">
          <div class="recharge-price-list">
            <ul>
              <li attr-num="300">₱ 300</li>
              <li attr-num="600">₱ 600</li>
              <li attr-num="1500">₱ 1500</li>
              <li attr-num="3800">₱ 3800</li>
              <li attr-num="7000">₱ 7000</li>
              <li attr-num="15000">₱ 15000</li>
              <li attr-num="30000">₱ 30000</li>
              <li attr-num="70000">₱ 70000</li>
            </ul>
          </div>
        </div>

        <!-- Payment Methods -->
        <div class="recharge-box-div">
          <span class="paytitle">Pay Type:</span>
          <div class="Mylist">
            @foreach(\App\Models\PaymentMethod::get() as $el)
            <label class="mylabel">
              <input class="myradio" type="radio" name="payType" value="{{$el->id}}">
              <span class="myradioInput"></span>{{$el->name}}
            </label>
            @endforeach
          </div>
        </div>
        <div style="height: 10px;"></div>
      </div>

      <!-- Submit Button -->
      <div class="Putforwardbtn">
        <button type="button" class="btn rechargeBtn" onclick="goPayment()">Recharge Now</button>
      </div>

      <!-- Recharge Instructions -->
      <div class="Putforwardbox">
        <p>Recharge instructions:</p>
        <p>1. The minimum recharge amount is ₱300, and the recharge time is 7*24 hours.</p>
        <p>2. If the recharge is not received within 30 minutes, please contact customer service for inquiry.</p>
        <p>3. The recharge amount must be consistent with the actual payment amount.</p>
        <p>4. The recharge process can only be completed on the platform. Please do not transfer the money to individuals to avoid losses.</p>
      </div>

      <div id="payu"></div>
    </div>
  </div>

  <!-- Hidden loading message -->
  <div class="recharging" style="display: none">Processing...</div>

  <!-- Footer -->
  <footer>
    <div class="foot_bo">
      <a onclick="window.location.href='{{route('dashboard')}}'"><img src="/static/home/img/i1.png"><p>Home</p></a>
    </div>
    <div class="foot_bo">
      <a onclick="window.location.href='{{route('vip')}}'"><img src="/static/home/img/i11.png"><p>Products</p></a>
    </div>
    <div class="foot_bo">
      <a onclick="window.location.href='{{route('user.team')}}'"><img src="/static/home/img/i7.png"><p>Share</p></a>
    </div>
    <div class="foot_bo">
      <a onclick="window.location.href='{{route('profile')}}'"><img src="/static/home/img/i10.png"><p class="xz">My</p></a>
    </div>
  </footer>

  <!-- Alert Message Include -->
  @include('alert-message')

  <!-- JS Fixes -->
  <script>
    // Click to auto fill amount
    document.querySelectorAll(".recharge-price-list li").forEach(function(item) {
      item.addEventListener("click", function() {
        document.getElementById("amount").value = this.getAttribute("attr-num");
        document.querySelectorAll(".recharge-price-list li").forEach(function(el) {
          el.classList.remove("cur");
        });
        this.classList.add("cur");
      });
    });

    function message(msg) {
      alert(msg); // You can replace this with layer.open if using Layer.js
    }

    function goPayment() {
      const amount = document.getElementById('amount').value;
      const methodInput = document.querySelector('input[name="payType"]:checked');
      if (!methodInput) {
        message("Select payment channel");
        return;
      }
      if (!amount) {
        message("Enter recharge amount");
        return;
      }

      // Optional: Show loading
      document.querySelector(".recharging").style.display = 'block';

      // Redirect
      window.location.href = '{{ url("user/payment") }}/' + amount + '/' + methodInput.value;
    }
  </script>
</body>
</html>
