@extends('User.layout')

@section('navlink')
  <a href="{{ route('user.dashboard') }}" class="link-secondary text-decoration-none">Home</a>
  / <span>Online Deposit</span>
@endsection

@section('content')
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

  <style>
    .deposit-page {
      --gold: #c99a3b;
      --gold-hi: #e4be63;
      --card: #1c1710;
      --muted: #a69b83;
      color: #f6f1e4;
    }

    .deposit-tabs {
      display: flex;
      justify-content: center;
      gap: 10px;
      width: fit-content;
      max-width: 100%;
      margin: 0 auto 25px;
      padding: 6px;
      border: 1px solid rgba(201, 154, 59, .25);
      border-radius: 13px;
      background: #17130d;
    }

    .deposit-tab {
      min-width: 145px;
      padding: 11px 22px;
      border: 1px solid transparent;
      border-radius: 9px;
      color: #aaa08d;
      background: transparent;
      text-decoration: none;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      transition: .25s;
    }

    .deposit-tab i {
      margin-right: 6px;
      font-size: 17px;
      vertical-align: -2px;
    }

    .deposit-tab.active {
      color: #17130d;
      background: linear-gradient(135deg, #e4be63, #c99a3b);
      border-color: var(--gold-hi);
    }

    .deposit-tab:not(.active):hover {
      color: var(--gold-hi);
      background: rgba(201, 154, 59, .08);
    }

    .payment-card {
      max-width: 500px;
      margin: 0 auto 30px;
      padding: 22px;
      border: 1px solid var(--gold);
      border-radius: 20px;
      background: linear-gradient(145deg, #262015, #17130d);
      box-shadow: 0 15px 35px rgba(0, 0, 0, .25);
    }

    .payment-title {
      display: flex;
      align-items: center;
      gap: 9px;
      padding-bottom: 13px;
      border-bottom: 1px solid rgba(201, 154, 59, .2);
      color: var(--gold-hi);
      font-size: 14px;
      font-weight: 700;
    }

    .payment-title i {
      font-size: 20px;
    }

    .bank-details {
      display: grid;
      gap: 10px;
      margin-top: 15px;
    }

    .bank-detail {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      padding: 11px 12px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 9px;
      background: rgba(255, 255, 255, .035);
    }

    .bank-detail span {
      color: var(--muted);
      font-size: 12px;
    }

    .bank-detail strong {
      color: #eee;
      font-size: 12px;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .offline-note {
      margin-top: 15px;
      padding: 11px 12px;
      border: 1px solid rgba(201, 154, 59, .2);
      border-radius: 9px;
      background: rgba(201, 154, 59, .06);
      color: #cbbd9f;
      font-size: 11px;
      line-height: 1.7;
    }

    .deposit-form .form-label {
      margin-bottom: 7px;
      color: #dedede;
      font-size: 12px;
      font-weight: 600;
    }

    .deposit-form .form-control {
      min-height: 43px;
      border: 1px solid rgba(201, 154, 59, .65);
      border-radius: 7px;
      background: #121212;
      color: #f3f3f3;
      font-size: 13px;
      box-shadow: none;
    }

    .deposit-form .form-control:focus {
      border-color: var(--gold-hi);
      box-shadow: 0 0 0 3px rgba(201, 154, 59, .1);
    }

    .deposit-form .form-control::placeholder {
      color: #929292;
    }

    .upload-box {
      min-height: 78px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4px;
      padding: 10px;
      border: 1px dashed rgba(201, 154, 59, .7);
      border-radius: 9px;
      color: #aaa;
      background: rgba(255, 255, 255, .015);
      cursor: pointer;
      transition: .2s;
    }

    .upload-box:hover {
      border-color: var(--gold-hi);
      background: rgba(201, 154, 59, .06);
    }

    .upload-box i {
      color: var(--gold-hi);
      font-size: 22px;
    }

    .upload-box span {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
    }

    .upload-input {
      display: none;
    }

    .submit-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 23px;
    }

    .deposit-submit {
      min-width: 170px;
      padding: 12px 25px;
      border: 1px solid var(--gold-hi);
      border-radius: 9px;
      color: #17130d;
      background: linear-gradient(135deg, #e4be63, #c99a3b);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 2px;
      transition: .25s;
    }

    .deposit-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(201, 154, 59, .22);
    }

    @media(max-width: 767px) {
      .deposit-tabs {
        width: 100%;
      }

      .deposit-tab {
        flex: 1;
        min-width: 0;
      }

      .payment-card {
        max-width: 100%;
      }
    }

    @media(max-width: 575px) {
      .deposit-form .row {
        row-gap: 14px;
      }

      .deposit-submit {
        width: 100%;
      }
    }
  </style>

  <div class="deposit-page">
    <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
      <div>
        <h1 class="h3 mb-1">Wallet Deposit</h1>
      </div>
    </div>

    <!-- PAGE TABS -->
    <div class="deposit-tabs">
      <a href="{{ route('user.online_transfer') }}" class="deposit-tab active">
        <i class="ti ti-world"></i> Online
      </a>
      <a href="{{ route('user.offline_transfer') }}" class="deposit-tab">
        <i class="ti ti-building-bank"></i> Offline
      </a>
    </div>

    <form action="{{ route('user.wallet_transfer') }}" method="POST" id="walletTransferForm">
      @csrf

      <div class="payment-card">
        <div class="payment-title">
          <i class="ti ti-building-bank"></i>
          <span>Bank Transfer Details</span>
        </div>

        <div class="bank-details">
          <div class="bank-detail">
            <span>Wallet Address</span>
            <strong>{{ decrypt_value($wallet->address) }}</strong>
          </div>

          <div class="bank-detail">
            <span>Current Wallet Balance</span>
            <strong>{{ $balanceResponse->usdt_balance ?? '0.00' }}</strong>
          </div>

          <div class="bank-detail">
            <span>Current BNB Balance</span>
            <strong>{{ $balanceResponse->bnb_balance ?? '0.00' }}</strong>
          </div>

          <div class="col-md-12">
            <input type="number" class="form-control" id="transactionId" name="amount"
              placeholder="Enter Amount to transfer" min="0.01" step="0.01" required>
          </div>

          <div class="submit-wrapper">
            <button type="submit" class="deposit-submit" id="submitBtn">
              <i class="ti ti-send"></i>
              <span id="submitText">SUBMIT</span>
            </button>
          </div>
        </div>

        <div class="offline-note">
          <i class="ti ti-info-circle me-1"></i>
          Enter the amount you want to transfer.
        </div>
      </div>
    </form>
  </div>
  <script>
    document.getElementById('walletTransferForm').addEventListener('submit', function(e) {
      e.preventDefault();

      const form = this;
      const submitBtn = document.getElementById('submitBtn');
      const submitText = document.getElementById('submitText');

      const usdtBalance = parseFloat(@json($balanceResponse->usdt_balance ?? 0));
      const bnbBalance = parseFloat(@json($balanceResponse->bnb_balance ?? 0));
      const amount = parseFloat(document.getElementById('transactionId').value);

      if (usdtBalance <= 0 || bnbBalance <= 0) {
        alert('Insufficient wallet balance. Both USDT and BNB balance must be greater than 0.');
        return;
      }

      if (isNaN(amount) || amount <= 0) {
        alert('Please enter an amount greater than 0.');
        return;
      }

      if (amount > usdtBalance) {
        alert('Transfer amount cannot be greater than your USDT balance.');
        return;
      }

      // Prevent double click
      submitBtn.disabled = true;
      submitText.textContent = 'PROCESSING...';

      form.submit();
    });
  </script>
@endsection