@extends('backend.layout.exposcale')

@section('page_title', 'Wallet & Credits')

@section('content')
<div style="flex:1;display:flex;flex-direction:column;gap:11px;overflow:hidden;padding:14px 18px;height:calc(100vh - 49px);">

  <!-- Balance cards row -->
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:11px;flex-shrink:0;">
    <!-- Gradyn (live) -->
    <div class="w-bal-card" style="padding:0;">
      <div style="display:flex;align-items:center;padding:14px 18px;gap:0;">
        <div style="display:flex;align-items:center;gap:8px;min-width:110px;">
          <div style="width:26px;height:26px;border-radius:6px;background:var(--gbr);border:1px solid var(--gradyn);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--gradyn);">G</div>
          <span style="font-size:13px;font-weight:700;color:var(--gradyn);">Gradyn</span>
        </div>
        <div style="display:flex;align-items:center;gap:28px;flex:1;">
          <!-- USD -->
          <div>
            <div style="font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;">USD Balance</div>
            <div style="font-size:20px;font-weight:700;">${{ number_format($gradynBalance['usd_balance'], 2) }}</div>
            <div style="font-size:9px;color:var(--amber);margin-top:2px;">≥ ${{ number_format($gradynBalance['available_usd'], 2) }} recommended</div>
          </div>
          <!-- EUR -->
          <div>
            <div style="font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;">EUR Balance</div>
            <div style="font-size:20px;font-weight:700;">€{{ number_format($gradynBalance['eur_balance'], 2) }}</div>
            <div style="font-size:9px;color:var(--amber);margin-top:2px;">≥ €{{ number_format($gradynBalance['available_eur'], 2) }} recommended</div>
          </div>
          <!-- Error state -->
          <div id="gd-bal-error" style="display:none;font-size:11px;color:var(--red);">Failed to load</div>
        </div>
        <button class="w-bal-topup-btn" onclick="openFundsModal('gradyn')" style="flex-shrink:0;margin-left:16px;">+ Add Funds</button>
      </div>
    </div>
    <!-- Rockads (live) -->
    <div class="w-bal-card" style="padding:0;">
      <div style="display:flex;align-items:center;padding:14px 18px;gap:0;">
        <div style="display:flex;align-items:center;gap:8px;min-width:110px;">
          <div style="width:26px;height:26px;border-radius:6px;background:var(--rbr);border:1px solid var(--rockads);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--rockads);">R</div>
          <span style="font-size:13px;font-weight:700;color:var(--rockads);">Rockads</span>
        </div>
        <!-- Live balance slots: grouped by currency -->
        <div id="rk-balances" style="display:flex;align-items:center;gap:28px;flex:1;">
          <!-- USD -->
          <div>
            <div style="font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;">USD Balance</div>
            <div style="font-size:20px;font-weight:700;">${{ $rockadsUsdWallet ? number_format($rockadsUsdWallet->balance, 2) : '0.00' }}</div>
            <div style="font-size:9px;color:var(--amber);margin-top:2px;">≥ ${{ $rockadsUsdWallet ? number_format($rockadsUsdWallet->available_balance, 2) : '0.00' }} recommended</div>
          </div>
          <!-- EUR -->
          <div>
            <div style="font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;">EUR Balance</div>
            <div style="font-size:20px;font-weight:700;">€{{ $rockadsEurWallet ? number_format($rockadsEurWallet->balance, 2) : '0.00' }}</div>
            <div style="font-size:9px;color:var(--amber);margin-top:2px;">≥ €{{ $rockadsEurWallet ? number_format($rockadsEurWallet->available_balance, 2) : '0.00' }} recommended</div>
          </div>
        </div>
        <button class="w-bal-topup-btn" onclick="openFundsModal('rockads')" style="flex-shrink:0;margin-left:16px;">+ Add Funds</button>
      </div>
    </div>
  </div>

  <!-- Transaction History -->
  <div style="flex:1;background:var(--card);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;min-height:0;">
    <div style="display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;">
      <div style="font-size:13px;font-weight:700;">Transaction History</div>
      <span id="tx-count-lbl" style="font-size:10px;color:var(--muted);background:var(--card2);border:1px solid var(--border);border-radius:20px;padding:2px 8px;">— transactions</span>
      <div style="margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;align-items:center;">
        <div class="dd-wrap">
          <div class="dd-btn" onclick="toggleDD('txs',event)">Scope: <strong id="tx-scope-lbl">All</strong><svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
          <div class="dd-menu" id="dd-txs-menu">
            <div class="dd-option selected" onclick="setTxF('scope','all','All',this)"><span class="dd-dot" style="background:var(--muted2);"></span>All</div>
            <div class="dd-divider"></div>
            <div class="dd-option" onclick="setTxF('scope','clientdeposit','Client Deposit',this)"><span class="dd-dot" style="background:#10b981;"></span>Client Deposit</div>
            <div class="dd-option" onclick="setTxF('scope','expofund','Platform Funding',this)"><span class="dd-dot" style="background:#a855f7;"></span>Platform Funding</div>
            <div class="dd-option" onclick="setTxF('scope','adtopup','Account Top-up',this)"><span class="dd-dot" style="background:var(--pl);"></span>Account Top-up</div>
            <div class="dd-option" onclick="setTxF('scope','clientwithdrawal','Client Withdrawal',this)"><span class="dd-dot" style="background:#ef4444;"></span>Client Withdrawal</div>
            <div class="dd-option" onclick="setTxF('scope','withdrawal','Ad Account Withdrawal',this)"><span class="dd-dot" style="background:#f97316;"></span>Ad Account Withdrawal</div>
            <div class="dd-option" onclick="setTxF('scope','transfer','Transfer',this)"><span class="dd-dot" style="background:var(--amber);"></span>Transfer</div>
            <div class="dd-option" onclick="setTxF('scope','affiliate','Affiliate Payout',this)"><span class="dd-dot" style="background:#a855f7;"></span>Affiliate Payout</div>
            <div class="dd-option" onclick="setTxF('scope','rockads','Rockads',this)"><span class="dd-dot" style="background:var(--rockads);"></span>Rockads</div>
          </div>
        </div>
        <div class="dd-wrap">
          <div class="dd-btn" onclick="toggleDD('txc',event)">Currency: <strong id="tx-cur-lbl">All</strong><svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
          <div class="dd-menu" id="dd-txc-menu">
            <div class="dd-option selected" onclick="setTxF('cur','all','All',this)">All</div>
            <div class="dd-divider"></div>
            <div class="dd-option" onclick="setTxF('cur','eur','EUR',this)">EUR</div>
            <div class="dd-option" onclick="setTxF('cur','usd','USD',this)">USD</div>
          </div>
        </div>
        <div class="dd-wrap">
          <div class="dd-btn" onclick="toggleDD('txst',event)">Status: <strong id="tx-status-lbl">All</strong><svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
          <div class="dd-menu" id="dd-txst-menu">
            <div class="dd-option selected" onclick="setTxF('status','all','All',this)">All</div>
            <div class="dd-divider"></div>
            <div class="dd-option" onclick="setTxF('status','completed','Completed',this)"><span class="dd-dot" style="background:var(--green);"></span>Completed</div>
            <div class="dd-option" onclick="setTxF('status','processing','Processing',this)"><span class="dd-dot" style="background:var(--amber);"></span>Processing</div>
          </div>
        </div>
        <div class="dd-wrap">
          <div class="dd-btn" onclick="toggleDD('txsrc',event)">Source: <strong id="tx-src-lbl">All</strong><svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></div>
          <div class="dd-menu" id="dd-txsrc-menu">
            <div class="dd-option selected" onclick="setTxF('src','all','All',this)">All</div>
            <div class="dd-divider"></div>
            <div class="dd-option" onclick="setTxF('src','gradyn','Gradyn',this)"><span class="dd-dot" style="background:var(--gradyn);"></span>Gradyn</div>
            <div class="dd-option" onclick="setTxF('src','rockads','Rockads',this)"><span class="dd-dot" style="background:var(--rockads);"></span>Rockads</div>
          </div>
        </div>
        <input style="background:var(--card2);border:1px solid var(--border);border-radius:7px;padding:5px 10px;font-size:11px;color:var(--text);outline:none;width:140px;" placeholder="Search..." value="{{ request('search') }}" oninput="filterTxNew(this.value)"/>
      </div>
    </div>
    <div style="flex:1;overflow-y:auto;">
      <table id="tx-new-table" style="width:100%;">
        <thead><tr><th>Ref / ID</th><th>Type</th><th>Wallet</th><th>Amount</th><th>Details</th><th>Date</th><th>Status</th></tr></thead>
        <tbody id="tx-tbody-new">
          @forelse($transactions as $tx)
            @php
              $source = strtolower($tx->source);
              $isRockads = $source === 'rockads';
              $cur = strtoupper($tx->currency_code);
              $curLow = strtolower($cur);
              $sym = $cur === 'USD' ? '$' : '€';
              
              $isPos = $tx->direction === 'credit';
              $dispAmt = ($isPos ? '+' : '&minus;') . $sym . number_format((float) $tx->amount, 2);
              $amtCls = $isPos ? 'green' : 'red';
              
              $statusRaw = strtolower($tx->status ?? '');
              $isDone = in_array($statusRaw, ['completed', 'done', 'success', 'approved']);
              $statusCls = $isDone ? 'tx-done' : 'tx-proc';
              $statusLbl = $isDone ? 'Completed' : ucfirst($tx->status ?: 'Processing');
              $statusKey = $isDone ? 'completed' : 'processing';
              
              $dateStr = $tx->provider_created_at ? $tx->provider_created_at->format('d.m H:i') : '&mdash;';
              
              $walletName = $tx->providerWallet ? ($tx->providerWallet->name ?: $tx->providerWallet->code) : '&mdash;';
              
              $adAcctName = $tx->adAccount ? ($tx->adAccount->name ?: $tx->adAccount->external_id) : null;
              
              $kind = $tx->kind ?: 'unknown';
              
              if ($isRockads) {
                  $nbCls = 'tx-nb-violet';
                  $nbLbl = '&#8596; ' . ucwords(str_replace('_', ' ', $kind));
                  if ($kind === 'withdraw4adaccount') { $nbLbl = '&#8593; Withdrawal'; $nbCls = 'tx-nb-red'; $scope = 'withdrawal'; }
                  elseif ($kind === 'transfer2adaccount') { $nbLbl = '&#8594; Transfer'; $nbCls = 'tx-nb-amber'; $scope = 'transfer'; }
                  else { $scope = 'rockads'; }
                  
                  $detailHtml = '<span class="tx-muted">Rockads &middot; ' . $walletName . '</span>';
                  if ($adAcctName) {
                      $detailHtml = 'Wallet &harr; <span style="color:var(--rockads);font-weight:600;">' . $adAcctName . '</span>';
                  }
              } else {
                  $scope = 'gradyn';
                  if ($kind === 'topup') {
                      $nbLbl = '&#8593; Account Top-up'; $nbCls = 'tx-nb-purple'; $scope = 'adtopup';
                  } elseif ($kind === 'withdrawal') {
                      $nbLbl = '&#8595; Ad Account Withdrawal'; $nbCls = 'tx-nb-orange'; $scope = 'withdrawal';
                  } else {
                      $nbLbl = '&#8596; ' . ucfirst($kind); $nbCls = 'tx-nb-violet';
                  }
                  
                  if ($adAcctName) {
                      $detailHtml = 'Wallet &rarr; <a href="' . route('exposcale.ad-account-detail', $tx->adAccount->external_id) . '" class="tx-acct-link">' . $adAcctName . '</a>';
                  } else {
                      $detailHtml = $tx->destination ?? 'Wallet';
                  }
              }
              
              $shortRef = strlen((string)$tx->external_id) > 12 ? substr((string)$tx->external_id, 0, 8).'...' : $tx->external_id;
            @endphp
            <tr data-source="{{ $source }}" data-scope="{{ $scope }}" data-cur="{{ $curLow }}" data-status="{{ $statusKey }}">
              <td class="tx-ref" title="{{ $tx->external_id }}">{{ $shortRef }}</td>
              <td><span class="tx-nb {{ $nbCls }}">{!! $nbLbl !!}</span></td>
              <td class="tx-muted">{{ ucfirst($source) }} &middot; {{ $cur }}</td>
              <td class="tx-total {{ $amtCls }}">{!! $dispAmt !!}</td>
              <td class="tx-det">{!! $detailHtml !!}</td>
              <td class="tx-date">{!! $dateStr !!}</td>
              <td><span class="tx-sb {{ $statusCls }}">&#9679; {{ $statusLbl }}</span></td>
            </tr>
          @empty
            <tr><td colspan="7" style="text-align:center;padding:20px;color:var(--muted);font-size:11px;">No transactions found.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
    <!-- Pagination bar -->
    @if($pagination['last_page'] > 1)
    <div class="pagination-wrap" style="display:flex; justify-content:space-between; align-items:center; padding: 14px 20px; border-top: 1px solid var(--border); font-size: 13px;">
        <div class="pag-info" style="color: var(--muted);">
            Showing <span style="font-weight: 600; color: var(--text);">{{ $pagination['from'] }}</span> to <span style="font-weight: 600; color: var(--text);">{{ $pagination['to'] }}</span> of <span style="font-weight: 600; color: var(--text);">{{ $pagination['total'] }}</span> transactions
        </div>
        <div class="pag-controls" style="display:flex; gap:6px;">
            @if($pagination['current_page'] > 1)
                <a href="{{ request()->fullUrlWithQuery(['page' => $pagination['current_page'] - 1]) }}" class="btn-pag" style="padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); text-decoration: none; font-weight: 500; transition: all 0.2s ease;">&laquo; Prev</a>
            @else
                <span class="btn-pag disabled" style="padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: not-allowed; font-weight: 500; opacity: 0.6;">&laquo; Prev</span>
            @endif

            @for($i = 1; $i <= $pagination['last_page']; $i++)
                @if($i == $pagination['current_page'])
                    <span class="btn-pag active" style="padding: 6px 12px; border: 1px solid var(--blue); background: var(--blue); color: white; border-radius: 6px; font-weight: 600;">{{ $i }}</span>
                @elseif($i == 1 || $i == $pagination['last_page'] || abs($i - $pagination['current_page']) <= 2)
                    <a href="{{ request()->fullUrlWithQuery(['page' => $i]) }}" class="btn-pag" style="padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); text-decoration: none; font-weight: 500; transition: all 0.2s ease;">{{ $i }}</a>
                @elseif($i == 2 || $i == $pagination['last_page'] - 1)
                    <span style="padding: 6px 8px; color: var(--muted);">...</span>
                @endif
            @endfor

            @if($pagination['current_page'] < $pagination['last_page'])
                <a href="{{ request()->fullUrlWithQuery(['page' => $pagination['current_page'] + 1]) }}" class="btn-pag" style="padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); text-decoration: none; font-weight: 500; transition: all 0.2s ease;">Next &raquo;</a>
            @else
                <span class="btn-pag disabled" style="padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: not-allowed; font-weight: 500; opacity: 0.6;">Next &raquo;</span>
            @endif
        </div>
    </div>
    @endif
  </div>
</div>


@endsection

@section('page_scripts')
<script>
// Filter state
let txScopeF  = 'all';
let txCurF    = 'all';
let txStatusF = 'all';
let txSrcF    = 'all';
let txSearchQ = '';

// Helpers
function fmt(v, decimals) {
  decimals = decimals === undefined ? 2 : decimals;
  var n = parseFloat(v) || 0;
  return n.toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
}

function currSymbol(code) {
  if (code === 'USD') return '$';
  if (code === 'EUR') return '\u20ac';
  return code + ' ';
}

function fmtDate(iso) {
  if (!iso) return '\u2014';
  try {
    var d   = new Date(iso);
    var dd  = String(d.getDate()).padStart(2,'0');
    var mm  = String(d.getMonth()+1).padStart(2,'0');
    var hh  = String(d.getHours()).padStart(2,'0');
    var min = String(d.getMinutes()).padStart(2,'0');
    return dd + '.' + mm + ' ' + hh + ':' + min;
  } catch(e) { return '\u2014'; }
}

// Map Rockads "kind" to display label + badge class
function rkKindMeta(kind) {
  switch ((kind || '').toLowerCase()) {
    case 'transfer2adaccount':  return { label: '\u2191 Account Top-up',        cls: 'tx-nb-purple', scope: 'adtopup'    };
    case 'withdraw4adaccount':  return { label: '\u2193 Ad Account Withdrawal',  cls: 'tx-nb-orange', scope: 'withdrawal' };
    case 'deposit':             return { label: '\u2191 Platform Funding',       cls: 'tx-nb-violet', scope: 'expofund'   };
    case 'withdrawal':          return { label: '\u2193 Withdrawal',             cls: 'tx-nb-red',    scope: 'withdrawal' };
    case 'transfer':            return { label: '\u2194 Transfer',               cls: 'tx-nb-amber',  scope: 'transfer'   };
    default:                    return { label: kind || 'Transaction',           cls: 'tx-nb-violet', scope: 'rockads'    };
  }
}


// Load Rockads Transactions (Legacy - Removed)


// ── Filter setters ────────────────────────────────────────────────────────────
function setTxF(dim, val, label, el) {
  var url = new URL(window.location.href);
  url.searchParams.set(dim, val);
  url.searchParams.set('page', 1); // Reset page on filter change
  window.location.href = url.toString();
}

let searchTimer;
function filterTxNew(q) {
  clearTimeout(searchTimer);
  searchTimer = setTimeout(function() {
    var url = new URL(window.location.href);
    if (q) {
        url.searchParams.set('search', q);
    } else {
        url.searchParams.delete('search');
    }
    url.searchParams.set('page', 1);
    window.location.href = url.toString();
  }, 600);
}

// ── Boot ──────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', function() {
  // Set initial labels based on query params
  const urlParams = new URLSearchParams(window.location.search);
  const curF = urlParams.get('cur') || 'all';
  const scopeF = urlParams.get('scope') || 'all';
  const statusF = urlParams.get('status') || 'all';
  const srcF = urlParams.get('src') || 'all';

  document.querySelectorAll('.dd-option').forEach(el => el.classList.remove('selected'));
  
  if (curF !== 'all') {
    let el = document.querySelector(`#dd-txc-menu .dd-option[onclick*="'cur','${curF}'"]`);
    if (el) { el.classList.add('selected'); document.getElementById('tx-cur-lbl').textContent = el.textContent.replace('USD', '').replace('EUR', '').trim() || el.textContent.trim(); }
  } else {
    document.querySelector(`#dd-txc-menu .dd-option[onclick*="'cur','all'"]`)?.classList.add('selected');
  }
  
  if (scopeF !== 'all') {
    let el = document.querySelector(`#dd-txs-menu .dd-option[onclick*="'scope','${scopeF}'"]`);
    if (el) { el.classList.add('selected'); document.getElementById('tx-scope-lbl').textContent = el.textContent.trim(); }
  } else {
    document.querySelector(`#dd-txs-menu .dd-option[onclick*="'scope','all'"]`)?.classList.add('selected');
  }

  if (statusF !== 'all') {
    let el = document.querySelector(`#dd-txst-menu .dd-option[onclick*="'status','${statusF}'"]`);
    if (el) { el.classList.add('selected'); document.getElementById('tx-status-lbl').textContent = el.textContent.trim(); }
  } else {
    document.querySelector(`#dd-txst-menu .dd-option[onclick*="'status','all'"]`)?.classList.add('selected');
  }
  
  if (srcF !== 'all') {
    let el = document.querySelector(`#dd-txsrc-menu .dd-option[onclick*="'src','${srcF}'"]`);
    if (el) { el.classList.add('selected'); document.getElementById('tx-src-lbl').textContent = el.textContent.trim(); }
  } else {
    document.querySelector(`#dd-txsrc-menu .dd-option[onclick*="'src','all'"]`)?.classList.add('selected');
  }
});
</script>
@endsection