{{-- resources/views/dashboard/wallet/swap.blade.php --}}
@extends('layouts.user')
@section('title', 'Swap Balance')
@section('content')

<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

.sw-page {
  --sw-font: 'DM Sans', sans-serif;
  --sw-mono: 'DM Mono', monospace;
  --sw-surface: var(--card-bg, #ffffff);
  --sw-border: var(--border, #e5e7eb);
  --sw-muted: var(--muted, #94a3b8);
  --sw-text: var(--text, #0f172a);
  --sw-accent: var(--primary, #2563eb);
  --sw-success: var(--success, #10b981);
  font-family: var(--sw-font);
}

/* ── Header ──────────────────────────────────────── */
.sw-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.sw-hdr h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--sw-text);
  letter-spacing: -.5px;
  margin: 0 0 3px;
}
.sw-hdr p { font-size: 13px; color: var(--sw-muted); font-weight: 500; margin: 0; }

/* ── Balance card ────────────────────────────────── */
.sw-bal-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.sw-bal-card {
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}
.sw-bal-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.sw-bal-ico--blue   { background: rgba(37,99,235,.10); color: #2563eb; }
.sw-bal-ico--green  { background: rgba(16,185,129,.10); color: #10b981; }
.sw-bal-ico--purple { background: rgba(139,92,246,.10); color: #8b5cf6; }
.sw-bal-body { min-width: 0; }
.sw-bal-lbl  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sw-muted); margin-bottom: 3px; }
.sw-bal-val  { font-size: 20px; font-weight: 800; color: var(--sw-text); letter-spacing: -.4px; }
.sw-bal-sub  { font-size: 11px; color: var(--sw-muted); font-weight: 500; margin-top: 2px; }

/* ── Main layout ─────────────────────────────────── */
.sw-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

/* ── Card shell ──────────────────────────────────── */
.sw-card {
  background: var(--sw-surface);
  border: 1px solid var(--sw-border);
  border-radius: 18px;
  overflow: hidden;
}
.sw-card__head {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--sw-border);
}
.sw-card__title { font-size: 15px; font-weight: 800; color: var(--sw-text); letter-spacing: -.3px; }
.sw-card__sub   { font-size: 12px; color: var(--sw-muted); font-weight: 500; margin-top: 3px; }
.sw-card__body  { padding: 24px; }

/* ── Swap interface ──────────────────────────────── */
.sw-exchange {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

/* "You pay" / "You receive" boxes */
.sw-box {
  background: var(--surface, #f8fafc);
  border: 1.5px solid var(--sw-border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color .15s;
}
.sw-box:focus-within { border-color: var(--sw-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.sw-box__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sw-muted);
  margin-bottom: 10px;
}
.sw-box__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sw-box__input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 26px;
  font-weight: 800;
  color: var(--sw-text);
  font-family: var(--sw-mono);
  letter-spacing: -.5px;
  min-width: 0;
  width: 100%;
}
.sw-box__input::placeholder { color: var(--sw-border); }
.sw-box__asset {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sw-surface);
  border: 1.5px solid var(--sw-border);
  border-radius: 24px;
  padding: 6px 10px 6px 6px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 13px;
  color: var(--sw-text);
}
.sw-box__asset-ico {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(37,99,235,.12);
  color: var(--sw-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
  flex-shrink: 0;
}
.sw-box__asset select {
  border: 0; outline: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--sw-text);
  font-family: var(--sw-font);
  cursor: pointer;
  min-width: 50px;
}
.sw-box__sub {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sw-muted);
}

/* Swap arrow divider */
.sw-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -2px 0;
  position: relative;
  z-index: 1;
}
.sw-divider__btn {
  width: 38px; height: 38px;
  background: var(--sw-surface);
  border: 1.5px solid var(--sw-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--sw-accent);
  cursor: default;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}

/* Rate info box */
.sw-rate-box {
  background: var(--surface, #f8fafc);
  border: 1px solid var(--sw-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sw-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.sw-rate-lbl { color: var(--sw-muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.sw-rate-lbl i { font-size: 14px; }
.sw-rate-val { font-weight: 700; color: var(--sw-text); font-family: var(--sw-mono); font-size: 12.5px; }
.sw-rate-val.highlight { color: var(--sw-success); font-size: 14px; }

/* CTA */
.sw-submit {
  width: 100%;
  padding: 15px;
  background: var(--sw-accent);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--sw-font);
  cursor: pointer;
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 6px 20px rgba(37,99,235,.30);
}
.sw-submit:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(37,99,235,.38);
}
.sw-submit:active { transform: translateY(0); }

/* Flash */
.sw-flash {
  display: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
}
.sw-flash--ok  { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.sw-flash--err { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; }

/* ── Info sidebar ────────────────────────────────── */
.sw-info-list { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sw-info-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface, #f8fafc);
  border: 1px solid var(--sw-border);
  align-items: flex-start;
}
.sw-info-ico {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.sw-info-ico--blue   { background: rgba(37,99,235,.10); color: #2563eb; }
.sw-info-ico--green  { background: rgba(16,185,129,.10); color: #10b981; }
.sw-info-ico--gold   { background: rgba(245,158,11,.10); color: #f59e0b; }
.sw-info-title { font-size: 12px; font-weight: 700; color: var(--sw-text); margin-bottom: 2px; }
.sw-info-desc  { font-size: 11px; color: var(--sw-muted); font-weight: 500; line-height: 1.5; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 820px) {
  .sw-layout { grid-template-columns: 1fr; }
  .sw-bal-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .sw-bal-strip { grid-template-columns: 1fr; }
  .sw-hdr { flex-direction: column; align-items: flex-start; }
  .sw-card__body { padding: 18px 16px; }
  .sw-box__input { font-size: 20px; }
}
</style>

<div class="sw-page">

  {{-- ── Header ────────────────────────────────── --}}
  <div class="sw-hdr">
    <div>
      <h1>Swap Assets</h1>
      <p>Swap between USD and any supported asset using live pair rates.</p>
    </div>
    <a href="{{ route('dashboard.wallet.withdraw') }}" class="btn btn--outline btn--sm">
      <i class="icon ion-md-arrow-up"></i> Withdraw
    </a>
  </div>

  {{-- ── Balance strip ─────────────────────────── --}}
  <div class="sw-bal-strip">
    <div class="sw-bal-card">
      <div class="sw-bal-ico sw-bal-ico--blue"><i class="icon ion-md-wallet"></i></div>
      <div class="sw-bal-body">
        <div class="sw-bal-lbl">USD Balance</div>
        <div class="sw-bal-val">${{ number_format((float)$usdBalance, 2) }}</div>
        <div class="sw-bal-sub">Available to convert</div>
      </div>
    </div>
    <div class="sw-bal-card">
      <div class="sw-bal-ico sw-bal-ico--green"><i class="icon ion-md-swap"></i></div>
      <div class="sw-bal-body">
        <div class="sw-bal-lbl">Pair Rate</div>
        <div class="sw-bal-val" id="swLiveRateDisplay">—</div>
        <div class="sw-bal-sub">Live pair quote</div>
      </div>
    </div>
    <div class="sw-bal-card">
      <div class="sw-bal-ico sw-bal-ico--purple"><i class="icon ion-md-logo-bitcoin"></i></div>
      <div class="sw-bal-body">
        <div class="sw-bal-lbl">You Receive</div>
        <div class="sw-bal-val" id="swReceiveDisplay">—</div>
        <div class="sw-bal-sub" id="swReceiveAsset">Select amount</div>
      </div>
    </div>
  </div>

  {{-- ── Main layout ───────────────────────────── --}}
  <div class="sw-layout">

    {{-- Left: Swap form --}}
    <div class="sw-card">
      <div class="sw-card__head">
      <div class="sw-card__title">Swap Direction</div>
      <div class="sw-card__sub">Choose source and destination asset</div>
      </div>
      <div class="sw-card__body">

        <form method="POST" action="{{ route('dashboard.wallet.swap.store') }}" id="swapForm">
          @csrf

          {{-- Exchange UI --}}
          <div class="sw-exchange">

            {{-- You pay --}}
            <div class="sw-box">
              <div class="sw-box__label">You Pay</div>
              <div class="sw-box__row">
                <input type="number" name="from_amount" id="fromAmount" min="0.00000001" step="0.00000001"
                       value="{{ old('from_amount') }}" required class="sw-box__input"
                       placeholder="0.00" autocomplete="off">
                <div class="sw-box__asset">
                  <div class="sw-box__asset-ico" id="swFromAssetIco">USD</div>
                  <select name="from_asset" id="fromAsset" required>
                    <option value="USD" @selected(old('from_asset', 'USD') === 'USD')>USD</option>
                    @foreach($assets as $asset)
                      <option value="{{ $asset }}" @selected(old('from_asset') === $asset)>{{ $asset }}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="sw-box__sub" id="swFromBalanceLine">Balance available</div>
            </div>

            {{-- Arrow --}}
            <div class="sw-divider">
              <button type="button" class="sw-divider__btn" id="btnSwapDirection" title="Flip pair"><i class="icon ion-md-swap"></i></button>
            </div>

            {{-- You receive --}}
            <div class="sw-box">
              <div class="sw-box__label">You Receive (estimated)</div>
              <div class="sw-box__row">
                <div class="sw-box__input" id="swReceiveQty"
                     style="display:flex;align-items:center;color:var(--sw-success);font-size:26px;font-weight:800;font-family:var(--sw-mono);">
                  —
                </div>
<div class="sw-box__asset">
                   <div class="sw-box__asset-ico" id="swAssetIco">—</div>
                   <select name="to_asset" id="toAsset" required>
                     <option value="USD" @selected(old('to_asset', $defaultAsset) === 'USD')>USD</option>
                     @foreach($assets as $asset)
                       <option value="{{ $asset }}" @selected(old('to_asset', $defaultAsset) === $asset)>{{ $asset }}</option>
                     @endforeach
                   </select>
                 </div>
              </div>
              <div class="sw-box__sub" id="swRateSubline">Rate loading…</div>
            </div>
          </div>

          {{-- Rate breakdown --}}
          <div class="sw-rate-box">
            <div class="sw-rate-row">
              <span class="sw-rate-lbl"><i class="icon ion-md-trending-up"></i> Exchange Rate</span>
              <span class="sw-rate-val" id="swRateDisplay">—</span>
            </div>
            <div class="sw-rate-row">
              <span class="sw-rate-lbl"><i class="icon ion-md-swap"></i> You Receive</span>
              <span class="sw-rate-val highlight" id="swPreviewDisplay">—</span>
            </div>
            <div class="sw-rate-row">
              <span class="sw-rate-lbl"><i class="icon ion-md-wallet"></i> Source Deducted</span>
              <span class="sw-rate-val" id="swUsdDeducted">—</span>
            </div>
          </div>

          {{-- Submit --}}
          <button type="submit" class="sw-submit" id="swSubmitBtn">
            <i class="icon ion-md-swap"></i> Convert Now
          </button>
        </form>

        <div id="swFlash" class="sw-flash"></div>
      </div>
    </div>

    {{-- Right: Info cards --}}
    <div class="sw-card">
      <div class="sw-card__head">
        <div class="sw-card__title">How It Works</div>
        <div class="sw-card__sub">Instant conversion to your wallet</div>
      </div>
      <div class="sw-info-list">
        <div class="sw-info-item">
          <div class="sw-info-ico sw-info-ico--blue"><i class="icon ion-md-cash"></i></div>
          <div>
            <div class="sw-info-title">Enter USD Amount</div>
            <div class="sw-info-desc">Type the USD you want to convert. Minimum $1.00.</div>
          </div>
        </div>
        <div class="sw-info-item">
          <div class="sw-info-ico sw-info-ico--green"><i class="icon ion-md-trending-up"></i></div>
          <div>
            <div class="sw-info-title">Live Rate Applied</div>
            <div class="sw-info-desc">We fetch the real-time USDT pair rate for your chosen asset.</div>
          </div>
        </div>
        <div class="sw-info-item">
          <div class="sw-info-ico sw-info-ico--gold"><i class="icon ion-md-checkmark-circle"></i></div>
          <div>
            <div class="sw-info-title">Instant Credit</div>
            <div class="sw-info-desc">Your crypto balance is credited immediately after conversion.</div>
          </div>
        </div>
        <div style="padding:14px 16px;background:rgba(37,99,235,.05);border-radius:12px;border:1px solid rgba(37,99,235,.15);">
          <div style="font-size:11px;font-weight:700;color:var(--sw-accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;">
            <i class="icon ion-md-information-circle"></i> Note
          </div>
          <div style="font-size:12px;color:var(--sw-muted);font-weight:500;line-height:1.6;">
            Rates are indicative. Final amount may vary slightly due to market movement at execution time.
          </div>
        </div>
      </div>
    </div>

  </div>{{-- /layout --}}
</div>{{-- /page --}}

@endsection
@push('scripts')
<script>
(function(){
  const fromAssetEl     = document.getElementById('fromAsset');
  const toAssetEl       = document.getElementById('toAsset');
  const fromAmountEl    = document.getElementById('fromAmount');
  const rateDisplay     = document.getElementById('swRateDisplay');
  const previewDisplay  = document.getElementById('swPreviewDisplay');
  const usdDeducted     = document.getElementById('swUsdDeducted');
  const receiveQty      = document.getElementById('swReceiveQty');
  const receiveDisplay  = document.getElementById('swReceiveDisplay');
  const receiveAsset    = document.getElementById('swReceiveAsset');
  const liveRateDisplay = document.getElementById('swLiveRateDisplay');
  const rateSubline     = document.getElementById('swRateSubline');
  const assetIco        = document.getElementById('swAssetIco');
  const fromAssetIco    = document.getElementById('swFromAssetIco');
  const fromBalanceLine = document.getElementById('swFromBalanceLine');
  const btnSwapDirection= document.getElementById('btnSwapDirection');
  const form            = document.getElementById('swapForm');
  const flash           = document.getElementById('swFlash');
  const receiveBalStrip = document.querySelector('.sw-bal-strip .sw-bal-card:nth-child(3) .sw-bal-lbl');
  const receiveBalVal = document.querySelector('.sw-bal-strip .sw-bal-card:nth-child(3) .sw-bal-val');
  const receiveBalSub = document.querySelector('.sw-bal-strip .sw-bal-card:nth-child(3) .sw-bal-sub');

  // Set initial to_asset to first available non-USD asset
  if (toAssetEl && fromAssetEl) {
    if (toAssetEl.value === 'USD' && fromAssetEl.value === 'USD') {
      const nonUsdOption = Array.from(toAssetEl.options).find(opt => opt.value !== 'USD');
      if (nonUsdOption) toAssetEl.value = nonUsdOption.value;
      else {
        // No crypto assets in to_asset, try to find non-USD in from_asset
        const nonUsdFrom = Array.from(fromAssetEl.options).find(opt => opt.value !== 'USD');
        if (nonUsdFrom) fromAssetEl.value = nonUsdFrom.value;
      }
    } else if (fromAssetEl.value === toAssetEl.value) {
      // Both are same non-USD asset, change to_asset to USD
      toAssetEl.value = 'USD';
    }
  }

  const usdBalance = Number(@json((float)$usdBalance));
  const assetBalances = @json($assetBalances ?? []);
  let pairRate = 0;

  function showFlash(text, ok) {
    flash.className = 'sw-flash ' + (ok ? 'sw-flash--ok' : 'sw-flash--err');
    flash.style.display = 'block';
    flash.textContent = text;
  }

  function updateAssetIco() {
    if (assetIco && toAssetEl) assetIco.textContent = (toAssetEl.value || '').slice(0, 3).toUpperCase();
    if (fromAssetIco && fromAssetEl) fromAssetIco.textContent = (fromAssetEl.value || '').slice(0, 3).toUpperCase();
    if (!fromBalanceLine || !fromAssetEl) return;
    if (fromAssetEl.value === 'USD') {
      fromBalanceLine.textContent = `Balance: $${usdBalance.toFixed(2)} USD`;
    } else {
      const sym = String(fromAssetEl.value || '').toUpperCase();
      const bal = Number(assetBalances[sym] ?? 0);
      fromBalanceLine.textContent = `Balance: ${bal.toFixed(8)} ${sym}`;
    }
    if (receiveBalStrip && receiveBalVal && receiveBalSub) {
      if (toAssetEl && toAssetEl.value !== 'USD') {
        receiveBalStrip.textContent = String(toAssetEl.value || '').toUpperCase();
        const sym = String(toAssetEl.value || '').toUpperCase();
        const bal = Number(assetBalances[sym] ?? 0);
        receiveBalVal.textContent = `${bal.toFixed(8)} ${sym}`;
        receiveBalSub.textContent = 'Available';
        receiveBalSub.previousElementSibling?.removeAttribute('style');
      } else {
        receiveBalStrip.textContent = 'USD Balance';
        receiveBalVal.textContent = `$${usdBalance.toFixed(2)}`;
        receiveBalSub.textContent = 'Available to convert';
      }
    }
  }

  async function refreshQuote() {
    const fromAsset = fromAssetEl?.value;
    const toAsset = toAssetEl?.value;
    if (!fromAsset || !toAsset) return;
    if (fromAsset === toAsset) {
      pairRate = 0;
      if (rateDisplay) rateDisplay.textContent = 'Select different assets';
      if (liveRateDisplay) liveRateDisplay.textContent = '—';
      if (rateSubline) rateSubline.textContent = 'Source and destination must differ';
      updatePreview();
      return;
    }
    updateAssetIco();
    rateSubline && (rateSubline.textContent = 'Fetching pair rate…');
    try {
      const res  = await fetch(`{{ route('dashboard.wallet.swap.quote') }}?from_asset=${encodeURIComponent(fromAsset)}&to_asset=${encodeURIComponent(toAsset)}`,
        { headers: { 'Accept': 'application/json' } });
      const data = await res.json();
      if (!res.ok) throw new Error(data.message || 'No quote');
      pairRate = Number(data.pair_rate || 0);
      if (rateDisplay) rateDisplay.textContent = `1 ${fromAsset} = ${pairRate.toFixed(8)} ${toAsset}`;
      if (liveRateDisplay) liveRateDisplay.textContent = pairRate.toFixed(6);
      if (rateSubline) rateSubline.textContent = `1 ${fromAsset} = ${pairRate.toFixed(8)} ${toAsset}`;
      updatePreview();
    } catch (e) {
      pairRate = 0;
      if (rateDisplay)     rateDisplay.textContent = 'Rate unavailable';
      if (liveRateDisplay) liveRateDisplay.textContent = '—';
      if (rateSubline)     rateSubline.textContent = 'Rate unavailable';
      if (previewDisplay)  previewDisplay.textContent = '—';
      if (receiveQty)      receiveQty.textContent = '—';
      if (receiveDisplay)  receiveDisplay.textContent = '—';
    }
  }

  function updatePreview() {
    const amount = Number(fromAmountEl?.value || 0);
    const fromAsset = fromAssetEl?.value || '';
    const toAsset  = toAssetEl?.value || '';
    if (!pairRate || !amount || fromAsset === toAsset) {
      [previewDisplay, receiveQty, receiveDisplay].forEach(el => { if (el) el.textContent = '—'; });
      if (usdDeducted) usdDeducted.textContent = '—';
      if (receiveAsset) receiveAsset.textContent = 'Select amount';
      // Show available balance for selected to_asset
      if (receiveBalStrip && receiveBalVal && receiveBalSub && toAssetEl) {
        if (toAssetEl.value !== 'USD') {
          const sym = String(toAssetEl.value || '').toUpperCase();
          const bal = Number(assetBalances[sym] ?? 0);
          receiveBalStrip.textContent = sym;
          receiveBalVal.textContent = `${bal.toFixed(8)} ${sym}`;
          receiveBalSub.textContent = 'Available';
        } else {
          receiveBalStrip.textContent = 'USD Balance';
          receiveBalVal.textContent = `$${usdBalance.toFixed(2)}`;
          receiveBalSub.textContent = 'Available to convert';
        }
      }
      return;
    }
    const qty = amount * pairRate;
    const fmt = qty.toFixed(8);
    if (previewDisplay) previewDisplay.textContent = `${fmt} ${toAsset}`;
    if (receiveQty)     receiveQty.textContent     = fmt;
    if (receiveDisplay) receiveDisplay.textContent = fmt;
    if (receiveAsset)   receiveAsset.textContent   = `${fmt} ${toAsset}`;
    if (usdDeducted)    usdDeducted.textContent    = `${Number(amount).toFixed(8)} ${fromAsset}`;
    // Show receive balance + estimated amount
    if (receiveBalStrip && receiveBalVal && receiveBalSub && toAssetEl) {
      if (toAssetEl.value !== 'USD') {
        const sym = String(toAssetEl.value || '').toUpperCase();
        const bal = Number(assetBalances[sym] ?? 0);
        receiveBalStrip.textContent = sym;
        receiveBalVal.textContent = `${fmt} ${sym}`;
        receiveBalSub.textContent = `Available: ${bal.toFixed(8)} ${sym}`;
      } else {
        receiveBalStrip.textContent = 'USD';
        receiveBalVal.textContent = `$${fmt}`;
        receiveBalSub.textContent = `Available: $${usdBalance.toFixed(2)}`;
      }
    }
  }

  fromAssetEl?.addEventListener('change', refreshQuote);
  toAssetEl?.addEventListener('change', refreshQuote);
  fromAmountEl?.addEventListener('input', updatePreview);
  btnSwapDirection?.addEventListener('click', function() {
    const from = fromAssetEl.value;
    fromAssetEl.value = toAssetEl.value;
    toAssetEl.value = from;
    refreshQuote();
  });

  /* AJAX submit */
  form?.addEventListener('submit', async function(e){
    e.preventDefault();
    flash.style.display = 'none';
    const fd = new FormData(form);
    try {
      const res  = await fetch("{{ route('dashboard.wallet.swap.store') }}", {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': @json(csrf_token()), 'Accept': 'application/json' },
        body: fd
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.message || 'Swap failed.');
      showFlash(data.message || 'Swap completed successfully!', true);
      if (fromAmountEl) fromAmountEl.value = '';
      updatePreview();
      setTimeout(() => window.location.href = "{{ route('dashboard.wallet') }}", 1200);
    } catch(err) { showFlash(err.message || 'Swap failed.', false); }
  });

  refreshQuote();
  updateAssetIco();
})();
</script>
@endpush