@extends('User.layout')

@section('navlink')
  <a href="{{ route('user.dashboard') }}" class="link-secondary text-decoration-none">Home</a>
  / <span>Offline 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: 450px;
      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;
    }

    .wallet-address {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 13px;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 9px;
      background: rgba(255, 255, 255, .04);
    }

    .wallet-address code {
      flex: 1;
      min-width: 0;
      color: #eee;
      font-family: inherit;
      font-size: 12px;
      overflow-wrap: anywhere;
    }

    .copy-btn {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(201, 154, 59, .4);
      border-radius: 7px;
      color: var(--gold-hi);
      background: rgba(201, 154, 59, .08);
    }

    .copy-btn:hover {
      color: #17130d;
      background: var(--gold-hi);
    }

    .network-label {
      margin: 13px 0 7px;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    .network-badge {
      display: inline-block;
      padding: 6px 17px;
      border-radius: 30px;
      color: #17130d;
      background: linear-gradient(135deg, #e4be63, #c99a3b);
      font-size: 12px;
      font-weight: 800;
    }

    .qr-wrapper {
      display: grid;
      place-items: center;
      width: 108px;
      height: 108px;
      margin: 15px auto 0;
      padding: 7px;
      border-radius: 11px;
      background: #fff;
      color: #111;
    }

    .qr-wrapper i {
      font-size: 85px;
    }

    .qr-note {
      margin-top: 9px;
      color: var(--muted);
      font-size: 11px;
      text-align: center;
    }

    .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;
    }

    .currency-options {
      display: flex;
      justify-content: center;
      gap: 28px;
      margin-bottom: 25px;
    }

    .currency-options .form-check {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 0;
      padding: 0;
    }

    .currency-options .form-check-input {
      float: none;
      margin: 0;
      background-color: #171717;
      border-color: #777;
    }

    .currency-options .form-check-input:checked {
      background-color: var(--gold);
      border-color: var(--gold);
    }

    .currency-options .form-check-label {
      color: #ddd;
      font-size: 13px;
    }

    .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">
        <i class="ti ti-world"></i> Online
      </a>
      <a href="{{ route('user.offline_transfer') }}" class="deposit-tab active">
        <i class="ti ti-building-bank"></i> Offline
      </a>
    </div>

    <div class="card p-4">
     <form class="deposit-form" id="depositForm" method="POST"
      action="{{ route('user.deposit_request') }}" enctype="multipart/form-data" novalidate>
    @csrf

    <input type="hidden" name="payment_type" value="online">

    {{-- ... currency / payment card sections stay the same ... --}}

    <div class="row g-3">
        <div class="col-md-4">
            <label for="amount" class="form-label" id="amountLabel">USDT Amount</label>
            <input type="number" class="form-control @error('amount') is-invalid @enderror"
                   id="amount" name="amount" placeholder="0.00" min="0.01" step="0.01"
                   value="{{ old('amount') }}" required>
            <div class="invalid-feedback" id="amountError">@error('amount') {{ $message }} @enderror</div>
        </div>

        <div class="col-md-4">
            <label for="transactionId" class="form-label">Enter Transaction ID</label>
            <input type="text" class="form-control @error('transaction_id') is-invalid @enderror"
                   id="transactionId" name="transaction_id" placeholder="Enter Transaction ID"
                   value="{{ old('transaction_id') }}" required>
            <div class="invalid-feedback" id="transactionIdError">@error('transaction_id') {{ $message }} @enderror</div>
        </div>

        <div class="col-md-4">
            <label for="receipt" class="form-label">Upload Your Advance Receipt</label>
            <label class="upload-box" for="receipt">
                <i class="ti ti-cloud-upload"></i>
                <span id="fileName">Upload receipt</span>
            </label>
            <input type="file" class="upload-input @error('receipt') is-invalid @enderror"
                   id="receipt" name="receipt" accept="image/*,.pdf" required>
            <div class="invalid-feedback d-block" id="receiptError">@error('receipt') {{ $message }} @enderror</div>
        </div>
    </div>

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


  <script>
    document.querySelectorAll('input[name="currency"]').forEach(input => {
      input.addEventListener('change', function() {
        const isUsdt = this.value === 'USDT';

        document.getElementById('walletTitle').textContent =
          isUsdt ? 'USDT Wallet Address' : 'INR Payment Details';

        document.getElementById('networkName').textContent =
          isUsdt ? 'BEP20' : 'INR';

        document.getElementById('amountLabel').textContent =
          this.value + ' Amount';

        document.getElementById('amount').placeholder =
          isUsdt ? '0.00 USDT' : '0.00 INR';
      });
    });

    function copyWalletAddress() {
      const address = document.getElementById('walletAddress').textContent.trim();

      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(address)
          .then(() => alert('Wallet address copied!'))
          .catch(() => fallbackCopy(address));
      } else {
        fallbackCopy(address);
      }
    }

    function fallbackCopy(text) {
      const input = document.createElement('textarea');
      input.value = text;
      input.style.position = 'fixed';
      input.style.opacity = '0';
      document.body.appendChild(input);
      input.select();

      try {
        document.execCommand('copy');
        alert('Wallet address copied!');
      } catch (error) {
        alert('Unable to copy. Please copy manually.');
      }

      input.remove();
    }

    document.getElementById('receipt').addEventListener('change', function() {
      document.getElementById('fileName').textContent =
        this.files.length ? this.files[0].name : 'Upload receipt';
    });
  </script>
  <script>
document.addEventListener('DOMContentLoaded', function () {
    const form      = document.getElementById('depositForm');
    const btn       = document.getElementById('depositSubmitBtn');
    const btnText   = document.getElementById('submitText');
    const amount    = document.getElementById('amount');
    const txnId     = document.getElementById('transactionId');
    const receipt   = document.getElementById('receipt');
    const fileName  = document.getElementById('fileName');

    const MAX_SIZE = 2 * 1024 * 1024; // 2 MB
    const ALLOWED  = ['image/jpeg', 'image/png', 'image/webp', 'application/pdf'];

    function setError(input, errorId, message) {
        const el = document.getElementById(errorId);
        el.textContent = message;
        input.classList.add('is-invalid');
    }

    function clearError(input, errorId) {
        document.getElementById(errorId).textContent = '';
        input.classList.remove('is-invalid');
    }

    function validate() {
        let valid = true;

        // Amount
        const amt = parseFloat(amount.value);
        if (!amount.value || isNaN(amt) || amt < 0.01) {
            setError(amount, 'amountError', 'Enter a valid amount (minimum 0.01).');
            valid = false;
        } else {
            clearError(amount, 'amountError');
        }

        // Transaction ID
        const tx = txnId.value.trim();
        if (!tx) {
            setError(txnId, 'transactionIdError', 'Transaction ID is required.');
            valid = false;
        } else if (tx.length < 6 || tx.length > 100) {
            setError(txnId, 'transactionIdError', 'Transaction ID must be 6–100 characters.');
            valid = false;
        } else if (!/^[A-Za-z0-9_\-]+$/.test(tx)) {
            setError(txnId, 'transactionIdError', 'Only letters, numbers, "-" and "_" are allowed.');
            valid = false;
        } else {
            clearError(txnId, 'transactionIdError');
        }

        // Receipt
        const file = receipt.files[0];
        if (!file) {
            setError(receipt, 'receiptError', 'Please upload your receipt.');
            valid = false;
        } else if (!ALLOWED.includes(file.type)) {
            setError(receipt, 'receiptError', 'Only JPG, PNG, WEBP or PDF files are allowed.');
            valid = false;
        } else if (file.size > MAX_SIZE) {
            setError(receipt, 'receiptError', 'File size must be 2 MB or less.');
            valid = false;
        } else {
            clearError(receipt, 'receiptError');
        }

        return valid;
    }

    receipt.addEventListener('change', function () {
        fileName.textContent = this.files[0] ? this.files[0].name : 'Upload receipt';
    });

    form.addEventListener('submit', function (e) {
        if (btn.disabled) { e.preventDefault(); return; } // block double submit

        if (!validate()) {
            e.preventDefault();
            return;
        }

        btn.disabled = true;
        btnText.textContent = 'SUBMITTING...';
    });

    // Re-enable if the user returns via the back button (bfcache)
    window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            btn.disabled = false;
            btnText.textContent = 'SUBMIT';
        }
    });
});
</script>
@endsection