@extends('frontend::deposit.index')

@section('deposit_content')

@push('styles')
<style>
/* =========================================================================
   Deposit Content — Blue & White (matches the parent deposit index theme)
   Fully scoped; no global bleed. Uses the same --dp-* tokens.
   ========================================================================= */

/* Ensure tokens exist (same as parent). Safe to redeclare. */
.site-card{
  --dp-blue:#0b6cff;
  --dp-blue-700:#0a5ae3;
  --dp-ink:#0a1930;
  --dp-muted:#6b7b93;
  --dp-bg:#f6f9ff;
  --dp-card:#ffffff;
  --dp-line:rgba(11,108,255,.18);
  --dp-shadow:0 12px 34px rgba(11,108,255,.12), 0 4px 12px rgba(0,0,0,.04);
  --dp-ring:0 0 0 3px rgba(11,108,255,.18) inset;
}

/* ================== STEPS (inherits base layout from parent) ================== */
.progress-steps{
  position:relative;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
  padding-top:10px;
  margin-bottom:16px;
}
.progress-steps::before{
  content:'';
  position:absolute; left:12px; right:12px; top:33px; height:2px;
  background:linear-gradient(90deg, rgba(11,108,255,.22), rgba(16,32,63,.08), rgba(11,108,255,.22));
  border-radius:999px;
}
@media (max-width:575.98px){ .progress-steps::before{ display:none; } }

.single-step{
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1px solid var(--dp-line);
  border-radius:14px; padding:10px 12px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:0 2px 6px rgba(11,108,255,.06);
}
.single-step:hover{
  transform: translateY(-1px);
  border-color: rgba(11,108,255,.35);
  background:#f8fbff;
  box-shadow:0 10px 22px rgba(11,108,255,.12);
}
.single-step .number{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:10px; font-weight:900; color:#fff;
  background: linear-gradient(180deg, var(--dp-blue), var(--dp-blue-700));
  box-shadow: 0 6px 14px rgba(11,108,255,.22);
  flex:0 0 auto;
}
.single-step .content h4{ margin:0; font-weight:900; color:var(--dp-ink); font-size:.98rem; letter-spacing:.2px; }
.single-step .content p{ margin:2px 0 0; color:var(--dp-muted); font-weight:700; font-size:.88rem; }

.single-step.active,
.single-step.current{
  background:#f7fbff;
  border-color: rgba(11,108,255,.45);
  box-shadow:0 10px 24px rgba(11,108,255,.14);
}
.single-step.active .content h4,
.single-step.current .content h4{ color:var(--dp-blue-700); }

/* ================== FORM (Blue inputs & focus ring) ================== */
.progress-steps-form .form-label{ color:var(--dp-muted); font-weight:800; margin-bottom:6px; }
.progress-steps-form .input-group{
  display:flex; align-items:stretch; border:1px solid var(--dp-line);
  border-radius:12px; background:#ffffff; overflow:visible;
  box-shadow:inset 0 0 0 1px rgba(10,25,48,.02);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.progress-steps-form .input-group:focus-within{
  border-color:rgba(11,108,255,.45);
  box-shadow:0 0 0 4px rgba(11,108,255,.15);
  background:#f9fbff;
}
.progress-steps-form .form-control{
  background:transparent; color:var(--dp-ink); border:none; border-radius:0; padding:10px 12px; outline:none;
}
.progress-steps-form .form-control::placeholder{ color:#92a2ba; }
.progress-steps-form .input-group-text{
  background:#f3f7ff; color:var(--dp-ink); border:none; border-left:1px solid var(--dp-line);
  padding:10px 12px; font-weight:900;
}

/* Native select (blue chevron) */
.progress-steps-form .site-nice-select{
  width:100%; appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent; color:var(--dp-ink); border:none; padding:10px 36px 10px 12px; font-weight:800; cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="%230b6cff" fill="none" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
}
.site-nice-select:focus{ outline:none; }
.progress-steps-form .input-info-text{ margin-top:6px; color:var(--dp-muted); font-weight:700; font-size:.88rem; }
.progress-steps-form .input-info-text.ok{ color:#0f8f68; }
.progress-steps-form .input-info-text.error{ color:#b42323; }

/* ================== REVIEW TABLE ================== */
.transaction-list{
  margin-top:16px; border:1px solid var(--dp-line); border-radius:16px; background:#ffffff;
  overflow:hidden; box-shadow:var(--dp-shadow);
}
.transaction-list .user-panel-title{
  padding:12px 14px; border-bottom:1px solid var(--dp-line);
  background:
    radial-gradient(500px 200px at -20% -40%, rgba(11,108,255,.14), transparent 60%),
    linear-gradient(135deg, rgba(11,108,255,.10), transparent 40%, rgba(11,108,255,.06));
}
.transaction-list .user-panel-title h3{ margin:0; color:var(--dp-ink); font-weight:900; font-size:1.02rem; }
.transaction-list .table{ margin:0; color:var(--dp-ink); }
.transaction-list .table td{ vertical-align:middle; padding:12px 14px; }
.transaction-list .table tbody tr + tr td{ border-top:1px solid rgba(10,25,48,.06); }
.transaction-list .table td strong{ color:var(--dp-ink); font-weight:900; }
.payment-method{ height:26px; width:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.15)); }

/* ================== CTA (blue) ================== */
.progress-steps-form .buttons{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.progress-steps-form .site-btn.blue-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--dp-blue); color:#ffffff; border:none;
  font-weight:900; border-radius:12px; padding:10px 16px; cursor:pointer;
  transition:transform .15s, background .2s, box-shadow .2s, opacity .2s;
}
.progress-steps-form .site-btn.blue-btn:hover{
  background:var(--dp-blue-700);
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(11,108,255,0.22);
}
.progress-steps-form .site-btn.blue-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

/* ================== PENDING CARD (blue) ================== */
.pending-card{
  margin-top:16px; border:1px solid var(--dp-line); border-radius:18px;
  background:#ffffff; box-shadow: var(--dp-shadow); overflow:hidden;
}
.pending-card .pc-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--dp-line);
  background:
    radial-gradient(520px 220px at 0% -40%, rgba(11,108,255,.14), transparent 60%),
    linear-gradient(135deg, rgba(11,108,255,.10), transparent 40%, rgba(11,108,255,.06));
}
.pending-card .pc-title{ display:flex; align-items:center; gap:10px; }
.pending-card h3{ margin:0; color:var(--dp-ink); font-weight:900; font-size:1.02rem; }
.status-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  font-weight:900; font-size:.78rem; letter-spacing:.02em; border:1px solid var(--dp-line);
}
.status-chip.pending{ color:#7a5e00; background:#fff7d6; }
.status-chip.success{ color:#0f8f68; background:#e9fbf3; }
.status-chip.failed{  color:#b42323; background:#feecec; }
.pc-count{ display:inline-flex; align-items:center; gap:8px; color:var(--dp-muted); font-weight:800; }
.pc-count svg{ width:18px; height:18px; stroke:var(--dp-muted); }
.pending-card .pc-body{ padding:16px; }
.pc-help{ margin:0 0 10px; color:var(--dp-muted); font-weight:700; }

/* ================== PAYMENT METHOD DETAILS ================== */
.gw-cred{
  margin-top:14px;
  border:1px solid var(--dp-line);
  border-radius:16px;
  background:#ffffff;
  box-shadow: var(--dp-shadow);
  overflow:hidden;
}
.gw-cred .gw-title{
  margin:0; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  color:var(--dp-ink); font-weight:900; font-size:1rem;
  border-bottom:1px solid var(--dp-line);
  background:
    radial-gradient(420px 200px at 0% -40%, rgba(11,108,255,.14), transparent 60%),
    linear-gradient(135deg, rgba(11,108,255,.10), transparent 40%, rgba(11,108,255,.06));
  cursor:pointer;
}
.gw-cred .gw-title .caret{ width:18px; height:18px; transition: transform .2s ease; }
.gw-cred:not(.open) .gw-title .caret{ transform: rotate(-90deg); }
.gw-cred .gw-inner{ padding:16px; }

.gw-cred .gw-inner h1,
.gw-cred .gw-inner h2,
.gw-cred .gw-inner h3,
.gw-cred .gw-inner h4,
.gw-cred .gw-inner h5{
  color:var(--dp-ink); margin:.3rem 0 .4rem; font-weight:900;
}
.gw-cred .gw-inner h4,
.gw-cred .gw-inner h5{
  display:inline-flex; align-items:center; gap:8px;
  padding-left:10px; border-left:3px solid var(--dp-blue);
}
.gw-cred .gw-inner p{ color:var(--dp-muted); font-weight:700; line-height:1.5; margin:.35rem 0; }
.gw-cred .gw-inner .pm-note{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; border-radius:12px; margin:.5rem 0;
  background: rgba(11,108,255,0.08);
  border:1px solid var(--dp-line);
  color:var(--dp-ink); font-weight:800;
}

/* Lists */
.gw-cred .gw-inner ul{ margin:.4rem 0 .6rem 1.25rem; }
.gw-cred .gw-inner ol{ margin:.4rem 0 .6rem 1.25rem; }
.gw-cred .gw-inner li{ color:var(--dp-ink); font-weight:800; margin:.25rem 0; }
.gw-cred .gw-inner ul li{ list-style: disc; }
.gw-cred .gw-inner ol li{ list-style: decimal; }

/* Tables coming from gateway */
.gw-cred .gw-inner table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#ffffff;
  border:1px solid var(--dp-line);
  border-radius:14px; overflow:hidden;
}
.gw-cred .gw-inner table thead th{
  color:var(--dp-ink); font-weight:900; padding:10px 12px;
  background:rgba(11,108,255,.10); border-bottom:1px solid var(--dp-line);
}
.gw-cred .gw-inner table tbody td{
  color:var(--dp-ink); padding:10px 12px; border-top:1px solid rgba(10,25,48,.06);
}
.gw-cred .gw-inner table tbody tr:first-child td{ border-top:none; }

/* Inline code & blocks */
.gw-cred .gw-inner code{
  background:rgba(11,108,255,0.08);
  border:1px solid rgba(11,108,255,0.18);
  padding:2px 6px; border-radius:8px; color:#0a1930; font-weight:800;
}
.gw-cred .gw-inner pre{
  background:#f2f6ff;
  border:1px solid var(--dp-line);
  color:#0a1930; border-radius:12px; padding:12px; overflow:auto;
}

/* Images / QR */
.gw-cred .gw-inner img{
  max-width:100%; height:auto; display:block; border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.10);
}
.gw-cred .gw-inner img[alt*="qr"],
.gw-cred .gw-inner img[alt*="QR"],
.gw-cred .gw-inner [data-qr]{
  margin:10px auto; max-width:220px; border:1px solid var(--dp-line); background:#fff;
}

/* Chips from gateway */
.gw-cred .gw-inner .badge,
.gw-cred .gw-inner .chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-weight:900; font-size:.8rem; margin:.2rem .25rem .2rem 0;
  background:rgba(11,108,255,0.10); border:1px solid var(--dp-line); color:var(--dp-ink);
}

/* Copy strip */
.wallet-copy{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; margin:12px 0 0;
  border:1px dashed rgba(11,108,255,0.45);
  background:#ffffff; border-radius:12px; word-break:break-all;
}
.wallet-copy .wallet-text{
  color:#0a1930; font-weight:800;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  line-height:1.35;
}
.copy-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border:none; border-radius:10px;
  background:var(--dp-blue); color:#ffffff; font-weight:900; cursor:pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.copy-btn:hover{ background:var(--dp-blue-700); transform: translateY(-1px); box-shadow:0 10px 20px rgba(11,108,255,0.22); }
.copy-btn:focus-visible{ outline:2px solid #0ea5e9; outline-offset:2px; }
.copy-btn svg{ width:18px; height:18px; }

/* File drop */
.file-drop{
  margin-top:14px; padding:16px; border-radius:12px;
  border:1px dashed rgba(11,108,255,0.45);
  background:#ffffff;
  display:flex; align-items:center; gap:12px; cursor:pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.file-drop.drag{ border-color: rgba(11,108,255,0.75); box-shadow: 0 0 0 4px rgba(11,108,255,0.15); }
.file-drop.has-file{ border-style:solid; }
.file-drop .fd-icon svg{ width:22px; height:22px; stroke: var(--dp-blue); }
.file-drop .fd-text{ color:#0a1930; font-weight:800; }
.file-drop .fd-text .hint{ display:block; margin-top:2px; color:#475569; font-weight:700; font-size:.88rem; }

/* Spinner */
.inline-spinner{
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(11,108,255,0.20);
  border-top-color: var(--dp-blue);
  animation: spin .7s linear infinite;
  display:inline-block; vertical-align:middle;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.is-hidden{ display:none !important; }

/* Mobile niceties */
@media (max-width: 575.98px){
  .transaction-list .table td{ padding:10px 12px; }
}
</style>
@endpush

<div class="progress-steps-form">
  <form action="{{ route('user.deposit.now') }}" method="post" enctype="multipart/form-data">
    @csrf

    <div class="row">
      <!-- Gateway -->
      <div class="col-xl-6 col-md-12 mb-3">
        <label class="form-label">{{ __('Payment Method:') }}</label>
        <div class="input-group">
          <select name="gateway_code" id="gatewaySelect" class="site-nice-select">
            <option value="" selected disabled>-- {{ __('Select Gateway') }} --</option>
            @foreach($gateways as $gateway)
              <option value="{{ $gateway->gateway_code }}">{{ $gateway->name }}</option>
            @endforeach
          </select>
        </div>
        <div class="input-info-text charge"></div>
      </div>

      <!-- Amount -->
      <div class="col-xl-6 col-md-12 mb-3">
        <label class="form-label">{{ __('Enter Amount:') }}</label>
        <div class="input-group">
          <input
            type="number"
            name="amount"
            class="form-control"
            id="amount"
            aria-label="Amount"
            oninput="this.value = validateDouble(this.value)"
          >
          <span class="input-group-text" id="basic-addon1">{{ $currency }}</span>
        </div>
        <div class="input-info-text min-max"></div>
      </div>
    </div>

    <div class="row manual-row"></div>

    <!-- Review -->
    <div class="transaction-list table-responsive">
      <div class="user-panel-title">
        <h3>{{ __('Review Details:') }}</h3>
      </div>
      <table class="table">
        <tbody>
          <tr>
            <td><strong>{{ __('Amount') }}</strong></td>
            <td><span class="amount"></span> <span class="currency"></span></td>
          </tr>
          <tr>
            <td><strong>{{ __('Charge') }}</strong></td>
            <td class="charge2"></td>
          </tr>
          <tr>
            <td><strong>{{ __('Payment Method') }}</strong></td>
            <td id="logo"><img src="" class="payment-method" alt=""></td>
          </tr>
          <tr>
            <td><strong>{{ __('Total') }}</strong></td>
            <td class="total"></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="buttons">
      <button type="submit" class="site-btn blue-btn">
        {{ __('Proceed to Payment') }}<i class="anticon anticon-double-right"></i>
      </button>
    </div>
  </form>
</div>

@push('scripts')
<script>
(function(){
  "use strict";
  const $ = window.jQuery || null;

  const form      = document.querySelector('.progress-steps-form form');
  const elSelect  = document.getElementById('gatewaySelect');
  const elAmount  = document.getElementById('amount');
  const elManual  = document.querySelector('.manual-row');
  const elCharge  = document.querySelector('.input-info-text.charge');
  const elMinMax  = document.querySelector('.input-info-text.min-max');
  const elLogoCell= document.getElementById('logo');
  const btnSubmit = document.querySelector('.site-btn.blue-btn');

  const currency = @json($currency);
  let globalData = null;

  // helpers
  window.validateDouble = window.validateDouble || function(v){
    v = (v || '').replace(/[^\d.]/g, '');
    const parts = v.split('.');
    if (parts.length > 2) v = parts[0] + '.' + parts.slice(1).join('');
    return v;
  };
  const fmt  = n => (isFinite(Number(n)) ? Number(n).toLocaleString(undefined,{maximumFractionDigits:2}) : '0');
  const pct  = (a,p) => (Number(a||0) * Number(p||0)) / 100;
  const html = (el, s) => el && (el.innerHTML = s);
  const text = (el, s, cls) => { if(!el) return; el.textContent = s; el.classList.remove('ok','error'); if (cls) el.classList.add(cls); };

  function setLoading(){
    html(elCharge, '<span class="inline-spinner"></span> {{ __("Loading fees…") }}');
    html(elMinMax, '<span class="inline-spinner"></span> {{ __("Loading limits…") }}');
    html(elLogoCell, '<span class="inline-spinner"></span>');
  }

  function setCtaState(){
    const hasGateway = !!(elSelect && elSelect.value);
    const amount = Number(elAmount && elAmount.value || 0);
    if (btnSubmit) btnSubmit.disabled = !(hasGateway && amount > 0);

    if (globalData && elMinMax){
      const min = Number(globalData.minimum_deposit || 0);
      const max = Number(globalData.maximum_deposit || 0);
      if (min && max){
        const ok = amount >= min && amount <= max;
        text(elMinMax, `{{ __("Minimum") }} ${fmt(min)} ${currency} {{ __("and") }} {{ __("Maximum") }} ${fmt(max)} ${currency}`, ok ? 'ok' : 'error');
      }
    }
  }

  function evaluate(){
    const amount = Number(elAmount && elAmount.value || 0);
    const amountSpan = document.querySelector('.amount');
    const currSpan   = document.querySelector('.currency');
    if (amountSpan) amountSpan.textContent = fmt(amount);
    if (currSpan)   currSpan.textContent   = currency;

    if (globalData){
      const fee = (globalData.charge_type === 'percentage') ? (Number(amount||0) * Number(globalData.charge||0))/100 : Number(globalData.charge||0);
      const charge2 = document.querySelector('.charge2');
      const total   = document.querySelector('.total');
      if (charge2) charge2.textContent = `${fmt(fee)} ${currency}`;
      if (total)   total.textContent   = `${fmt(amount + fee)} ${currency}`;

      if (globalData.charge_type === 'percentage'){
        text(elCharge, `{{ __("Charge") }} ${fmt(globalData.charge)} %`, 'ok');
      } else {
        text(elCharge, `{{ __("Charge") }} ${fmt(globalData.charge)} ${currency}`, 'ok');
      }
    }
    setCtaState();
  }

  /* ---------- Enhance gateway credentials HTML ---------- */
  function enhanceCredentials(wrapper){
    if (!wrapper.querySelector('.gw-inner')){
      const inner = document.createElement('div');
      inner.className = 'gw-inner';
      inner.innerHTML = wrapper.innerHTML;
      wrapper.innerHTML = '';
      wrapper.appendChild(inner);
    }
    const body = wrapper.querySelector('.gw-inner');

    // title + caret
    let title = wrapper.querySelector('h3, h4, h5');
    if (!title){
      title = document.createElement('h4');
      title.textContent = '{{ __("Payment Method Details") }}';
      body.parentNode.insertBefore(title, body);
    }
    const head = document.createElement('div');
    head.className = 'gw-title';
    head.innerHTML = `<span>${title.textContent}</span>
      <svg class="caret" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>`;
    wrapper.insertBefore(head, body);
    title.remove();
    wrapper.classList.add('open');
    head.addEventListener('click', ()=> wrapper.classList.toggle('open'));

    // helper
    if (!body.querySelector('.gw-help')){
      const help = document.createElement('p');
      help.className = 'gw-help';
      help.textContent = '{{ __("Follow the steps below and upload your payment proof to continue.") }}';
      body.insertBefore(help, body.firstChild);
    }

    // copyable wallet address
    let walletText = '';
    let walletEl = body.querySelector('.wallet-address, [data-wallet], [data-address], code, pre, kbd, .address');
    if (walletEl) walletText = (walletEl.dataset.wallet || walletEl.dataset.address || walletEl.textContent || '').trim();
    if (!walletText || walletText.length < 20){
      const m = (body.textContent || '').match(/[A-Za-z0-9]{24,}/);
      if (m) walletText = m[0];
    }
    if (walletText && !body.querySelector('.wallet-copy')){
      const strip = document.createElement('div');
      strip.className = 'wallet-copy';
      strip.innerHTML =
        `<span class="wallet-text" title="${walletText}">${walletText}</span>
         <button type="button" class="copy-btn" aria-label="{{ __('Copy address') }}">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
             <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
             <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
           </svg>
           <span>{{ __('Copy') }}</span>
         </button>`;
      body.insertBefore(strip, body.firstChild.nextSibling);
      if (walletEl) walletEl.classList.add('is-hidden');

      const btn = strip.querySelector('button.copy-btn');
      btn.addEventListener('click', async ()=>{
        try{
          await navigator.clipboard.writeText(walletText);
          btn.querySelector('span').textContent = '{{ __("Copied!") }}';
          setTimeout(()=> btn.querySelector('span').textContent = '{{ __("Copy") }}', 1500);
        }catch(e){
          const ta = document.createElement('textarea');
          ta.value = walletText; document.body.appendChild(ta);
          ta.select(); document.execCommand('copy'); ta.remove();
        }
      });
    }

    // upgrade file input to white drop
    const nativeFile = body.querySelector('input[type="file"]');
    if (nativeFile && !body.querySelector('.file-drop')){
      const drop = document.createElement('label');
      drop.className = 'file-drop';

      const hidden = document.createElement('input');
      hidden.type = 'file';
      hidden.name     = nativeFile.name || 'proof';
      hidden.required = nativeFile.required;
      hidden.accept   = nativeFile.accept || '';
      hidden.multiple = nativeFile.multiple;
      hidden.id       = nativeFile.id || '';
      if (nativeFile.getAttribute('form')) hidden.setAttribute('form', nativeFile.getAttribute('form'));
      hidden.style.cssText = 'position:absolute;left:-9999px;width:1px;height:1px;opacity:0;';
      drop.appendChild(hidden);

      drop.insertAdjacentHTML('beforeend', `
        <div class="fd-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M12 21v-8M8 13l4-4 4 4"></path>
            <path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path>
          </svg>
        </div>
        <div class="fd-text">
          <strong>{{ __('Upload payment proof') }}</strong>
          <span class="hint">{{ __('JPG, PNG or PDF') }}</span>
        </div>
      `);

      const prev = nativeFile.previousElementSibling;
      if (prev && prev.tagName.toLowerCase()==='label') prev.classList.add('is-hidden');
      const next = nativeFile.nextElementSibling;
      if (next && next.tagName.toLowerCase()==='label') next.classList.add('is-hidden');

      nativeFile.replaceWith(drop);

      const updateHint = () => {
        const f = hidden.files && hidden.files[0];
        drop.querySelector('.hint').textContent = f ? f.name : '{{ __("Select file") }}';
        drop.classList.toggle('has-file', !!f);
      };
      hidden.addEventListener('change', updateHint);

      ['dragover','dragleave','drop'].forEach(evt=>{
        drop.addEventListener(evt, e=>{
          e.preventDefault();
          if (evt === 'dragover') drop.classList.add('drag');
          if (evt === 'dragleave' || evt === 'drop') drop.classList.remove('drag');
          if (evt === 'drop' && e.dataTransfer && e.dataTransfer.files){
            hidden.files = e.dataTransfer.files;
            updateHint();
          }
        });
      });
    }
  }

  /* ---------- Load gateway data ---------- */
  function loadGateway(code){
    globalData = null;
    if (elManual) elManual.innerHTML = '';
    setLoading();

    const url = '{{ route("user.deposit.gateway",":code") }}'.replace(':code', encodeURIComponent(code));

    const onSuccess = (data) => {
      if (!data || typeof data !== 'object'){
        text(elCharge, '{{ __("Could not load gateway details.") }}', 'error');
        text(elMinMax, ''); html(elLogoCell, ''); setCtaState(); return;
      }

      globalData = data;

      if (data.charge_type === 'percentage'){
        text(elCharge, `{{ __("Charge") }} ${fmt(data.charge)} %`, 'ok');
      } else {
        text(elCharge, `{{ __("Charge") }} ${fmt(data.charge)} ${currency}`, 'ok');
      }
      text(elMinMax, `{{ __("Minimum") }} ${fmt(data.minimum_deposit)} ${currency} {{ __("and") }} {{ __("Maximum") }} ${fmt(data.maximum_deposit)} ${currency}`);

      if (data.gateway_logo){
        const src = `${location.origin}/assets/${data.gateway_logo}`;
        html(elLogoCell, `<img class="payment-method" src="${src}" alt="">`);
      } else { html(elLogoCell, ''); }

      if (typeof data.credentials !== 'undefined' && elManual){
        const wrap = document.createElement('div');
        wrap.className = 'gw-cred';
        wrap.innerHTML = `<div class="gw-inner">${data.credentials}</div>`;
        elManual.appendChild(wrap);
        enhanceCredentials(wrap);
      }

      evaluate();
    };

    const onFail = (status, sample) => {
      console.error('[gateway] FAIL', status, sample || '');
      text(elCharge, '{{ __("Could not load gateway details.") }}', 'error');
      text(elMinMax, ''); html(elLogoCell, ''); setCtaState();
    };

    if ($){
      $.ajax({ url, method:'GET', dataType:'json', headers:{'Accept':'application/json'} })
        .done(onSuccess)
        .fail(x => onFail(x && x.status, (x && x.responseText || '').slice(0,300)));
    } else {
      fetch(url, { headers:{'Accept':'application/json','X-Requested-With':'XMLHttpRequest'}, credentials:'same-origin' })
        .then(async r=>{
          const ct = r.headers.get('content-type') || '';
          if (!r.ok){ const t = await r.text().catch(()=> ''); return onFail(r.status, t.slice(0,300)); }
          if (!ct.includes('application/json')){ const t = await r.text().catch(()=> ''); return onFail('non-json', t.slice(0,300)); }
          return r.json().then(onSuccess).catch(err => onFail('json-parse', String(err)));
        })
        .catch(err => onFail('network', String(err)));
    }
  }

  /* ---------- Submit guard ---------- */
  if (form){
    form.addEventListener('submit', function(e){
      const amount = Number(elAmount && elAmount.value || 0);
      const hasGateway = !!(elSelect && elSelect.value);
      const reqFiles = elManual ? elManual.querySelectorAll('input[type="file"][name][required]') : [];
      const fileOk  = !reqFiles.length || Array.from(reqFiles).every(i => i.files && i.files.length > 0);

      let inRange = true;
      if (globalData){
        const min = Number(globalData.minimum_deposit || 0);
        const max = Number(globalData.maximum_deposit || 0);
        if (min && max) inRange = amount >= min && amount <= max;
      }

      if (!hasGateway || amount <= 0 || !inRange || !fileOk){
        e.preventDefault();
        if (!hasGateway) alert("{{ __('Please select a payment method.') }}");
        else if (amount <= 0) alert("{{ __('Please enter a valid amount.') }}");
        else if (!inRange) alert("{{ __('Amount is outside the allowed range.') }}");
        else if (!fileOk) alert("{{ __('Please upload your payment proof.') }}");
      }
    });
  }

  // Events
  if (elSelect){
    const onChange = function(e){ e && e.preventDefault(); if (this.value) loadGateway(this.value); };
    if ($) $(elSelect).on('change', onChange); else elSelect.addEventListener('change', onChange);
  }
  if (elAmount){
    const onAmt = function(){ this.value = window.validateDouble(this.value); evaluate(); };
    ['input','keyup','change'].forEach(evt => elAmount.addEventListener(evt, onAmt));
  }

  // Init
  if (window.feather) feather.replace();
  if (elSelect && elSelect.value) loadGateway(elSelect.value);
  else setCtaState();

})();
</script>
@endpush

@endsection