@extends('backend.layout.exposcale')

@section('page_title', 'Ad Accounts')

@section('topbar_actions')
  <span class="badge bpend" style="font-size:10px;" id="acct-count-lbl">9 accounts</span>
@endsection

@section('content')
<div class="page-body">

  <!-- AD ACCOUNTS SECTION -->
  <div class="acct-section" style="margin-bottom:14px;overflow:visible;">
    <div class="acct-section-hdr" style="overflow:visible;">
      <div class="acct-section-icon" style="background:var(--pbg);border:1px solid var(--purple);">
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><rect x="1" y="2" width="14" height="3" rx="1" fill="var(--pl)"/><rect x="1" y="7" width="14" height="3" rx="1" fill="var(--pl)" opacity=".6"/><rect x="1" y="12" width="14" height="3" rx="1" fill="var(--pl)" opacity=".4"/></svg>
      </div>
      <span class="acct-section-title">Ad Accounts</span>
      <div class="dd-wrap">
        <div class="acct-filter-pill" onclick="toggleDD('status2',event)">Status: <strong id="dd-status-label2">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-status2-menu">
          <div class="dd-option selected" onclick="setAcctFilter('status','all','All',this)"><span class="dd-dot" style="background:var(--muted2);"></span>All</div>
          <div class="dd-divider"></div>
          <div class="dd-option" onclick="setAcctFilter('status','approved','Approved',this)"><span class="dd-dot" style="background:var(--green);"></span>Approved</div>
          <div class="dd-option" onclick="setAcctFilter('status','processing','Processing',this)"><span class="dd-dot" style="background:var(--amber);"></span>Processing</div>
          <div class="dd-option" onclick="setAcctFilter('status','disabled','Disabled',this)"><span class="dd-dot" style="background:var(--red);"></span>Disabled</div>
          <div class="dd-option" onclick="setAcctFilter('status','deleted','Deleted',this)"><span class="dd-dot" style="background:var(--muted);"></span>Deleted</div>
        </div>
      </div>
      <div class="dd-wrap">
        <div class="acct-filter-pill" onclick="toggleDD('provider',event)">Provider: <strong id="dd-provider-label">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-provider-menu">
          <div class="dd-option selected" onclick="setAcctFilter('provider','all','All',this)"><span class="dd-dot" style="background:var(--muted2);"></span>All</div>
          <div class="dd-divider"></div>
          <div class="dd-option" onclick="setAcctFilter('provider','gradyn','Gradyn',this)"><span class="dd-dot" style="background:var(--gradyn);"></span>Gradyn</div>
          <div class="dd-option" onclick="setAcctFilter('provider','rockads','Rockads',this)"><span class="dd-dot" style="background:var(--rockads);"></span>Rockads</div>
        </div>
      </div>
      <div class="dd-wrap">
        <div class="acct-filter-pill" onclick="toggleDD('account_platform',event)">Platform: <strong id="dd-account_platform-label">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-account_platform-menu">
          <div class="dd-option selected" onclick="setAcctFilter('account_platform','all','All',this)"><span class="dd-dot" style="background:var(--muted2);"></span>All</div>
          <div class="dd-divider"></div>
          <div class="dd-option" onclick="setAcctFilter('account_platform','meta','Meta',this)">Meta</div>
          <div class="dd-option" onclick="setAcctFilter('account_platform','google','Google',this)">Google</div>
          <div class="dd-option" onclick="setAcctFilter('account_platform','tiktok','TikTok',this)">TikTok</div>
          <div class="dd-option" onclick="setAcctFilter('account_platform','snapchat','Snapchat',this)">Snapchat</div>
        </div>
      </div>
      <input class="acct-search" placeholder="Search accounts..." oninput="filterAcctTable(this.value)" id="acct-search-input" value="{{ request('search') }}"/>
      <button class="acct-req-btn" onclick="openModal('req-modal')">+ Request Ad Account</button>
    </div>
    <table id="acct-table-new">
      <thead>
        <tr>
          <th>Account Name</th><th>Platform</th><th>Client Fee</th><th>Fee</th><th>Currency</th><th>Balance ↕</th><th>Status</th><th>Actions</th>
        </tr>
      </thead>
      <tbody id="acct-tbody-new">
        @forelse($accounts as $account)
          @php
            $name = $account->account_name ?? $account->alias_name ?? '';
            $id = $account->external_id ?? '';
            $status = strtolower($account->status ?? 'processing');
            $platformName = $account->account_platform ?? 'Meta Ads';
            
            // Determine Gradyn vs Rockads using the provider column
            $platType = $account->provider ?? 'gradyn';

            $platLetter = $platType === 'rockads' ? 'R' : 'G';
            $mdotLetter = $platType === 'rockads' ? 'R' : 'M';
            $platClass = $platType === 'rockads' ? 'acct-plat-r' : 'acct-plat-g';
            $mdotStyle = $platType === 'rockads' ? 'style="background:linear-gradient(135deg,#3b82f6,#60a5fa);"' : '';
            $feeColor = $platType === 'rockads' ? 'var(--rockads)' : 'var(--gradyn)';
            
            $clientFee = '4.00%'; // fallback / dummy
            $actualFee = $platType === 'rockads' ? '2.5%' : '1.5%'; // fallback / dummy
            $currency = $account->currency ?? 'USD';
            $balance = (float) ($account->balance ?? 0);
            
            $statusClass = 'bpend';
            $statusIcon = '⏳';
            $statusText = 'Processing';
            if (in_array($status, ['approved', 'active', 'ACTIVE', 'accepted'])) {
                $statusClass = 'ba';
                $statusIcon = '✓';
                $statusText = 'Approved';
            } elseif (in_array($status, ['disabled', 'suspended', 'inactive'])) {
                $statusClass = 'br';
                $statusIcon = '✗';
                $statusText = 'Disabled';
            } elseif ($status === 'deleted') {
                $statusClass = 'br';
                $statusIcon = '🗑';
                $statusText = 'Deleted';
            }
          @endphp
          <tr data-plat="{{ $platType }}" data-status="{{ strtolower($statusText) }}" data-name="{{ strtolower($name) }}">
            <td>
              <div class="aname">
                <div class="mdot" {!! $mdotStyle !!}>{{ $mdotLetter }}</div>
                @if(in_array($status, ['disabled', 'suspended', 'deleted']))
                  <span style="color:var(--muted);">{{ $name }}</span>
                @else
                  <a href="{{ route('exposcale.ad-account-detail', $id) }}" class="acct-name-link">{{ $name }}</a>
                @endif
              </div>
            </td>
            <td>
              <div style="display:flex;align-items:center;gap:5px;">
                <span class="acct-plat-badge {{ $platClass }}">{{ $platLetter }}</span>{{ $platformName }}
              </div>
            </td>
            <td style="font-weight:600;">{{ $clientFee }}</td>
            <td style="font-weight:600;color:{{ $feeColor }};">{{ $actualFee }}</td>
            <td>{{ $currency }}</td>
            <td style="font-weight:700;color:{{ $balance > 0 ? 'var(--green)' : 'var(--muted)' }};">
              {{ $currency === 'USD' ? '$' : '€' }}{{ number_format($balance, 2) }}
            </td>
            <td>
              <span class="badge {{ $statusClass }}" style="display:inline-flex;align-items:center;gap:4px;">
                <span style="font-size:8px;">{{ $statusIcon }}</span> {{ $statusText }}
              </span>
            </td>
            <td style="white-space:nowrap;">
              <button class="btn-topup" onclick="openTopUpModal(this)" {{ $statusClass !== 'ba' ? 'disabled' : '' }}>↑ Top Up</button>
              <button class="btn-withdraw" onclick="openWithdrawModal(this)" {{ $statusClass !== 'ba' ? 'disabled' : '' }}>↓ Withdraw</button>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="8" style="text-align:center;padding:20px;color:var(--muted);">No ad accounts found.</td>
          </tr>
        @endforelse
      </tbody>
    </table>

    @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> accounts
        </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(--purple); background: var(--purple); 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>

  <!-- ACCOUNT ACTIVITY SECTION -->
  <div class="acct-section" style="overflow:visible;">
    <div class="acct-section-hdr" style="overflow:visible;">
      <div class="acct-section-icon" style="background:var(--bbg);border:1px solid var(--blue);">
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><rect x="1" y="4" width="14" height="10" rx="2" stroke="var(--blue)" stroke-width="1.3"/><path d="M1 7h14" stroke="var(--blue)" stroke-width="1.3"/><circle cx="12" cy="10.5" r="1" fill="var(--blue)"/></svg>
      </div>
      <span class="acct-section-title">Account Activity</span>
      <span class="acct-section-count" id="act-count-lbl">— entries</span>

      {{-- Account dropdown - built from $allAccounts passed by index() --}}
      <div class="dd-wrap">
        <div class="acct-filter-pill" onclick="toggleDD('act-acct',event)">Account: <strong id="act-acct-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-act-acct-menu" style="max-height:260px;overflow-y:auto;">
          <div class="dd-option selected" onclick="setActAcct('all','all','All','',this)">All</div>
          <div class="dd-divider"></div>
          @foreach($allAccounts as $acctItem)
            @php
              $aStatus   = strtolower($acctItem->status ?? '');
              if ($aStatus === 'deleted') continue;

              $aId       = $acctItem->external_id ?? '';
              $aName     = $acctItem->account_name ?? $acctItem->alias_name ?? $aId;
              $aPlatform = $acctItem->provider ?? 'gradyn';
              $aShort    = mb_strlen($aName) > 45 ? mb_substr($aName, 0, 45) . '…' : $aName;
            @endphp
            <div class="dd-option"
                 onclick="setActAcct('{{ $aId }}','{{ $aPlatform }}','{{ addslashes($aShort) }}','{{ $acctItem->wallet_id ?? '' }}',this)">
              <span class="dd-dot" style="background:{{ $aPlatform === 'rockads' ? 'var(--rockads)' : 'var(--gradyn)' }};"></span>{{ $aShort }}
            </div>
          @endforeach
        </div>
      </div>

      {{-- Type dropdown --}}
      <div class="dd-wrap">
        <div class="acct-filter-pill" onclick="toggleDD('act-type',event)">Type: <strong id="act-type-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-act-type-menu">
          <div class="dd-option selected" onclick="setActType('all','All',this)">All</div>
          <div class="dd-divider"></div>
          <div class="dd-option" onclick="setActType('topup','Top-up',this)"><span class="dd-dot" style="background:var(--green);"></span>Top-up</div>
          <div class="dd-option" onclick="setActType('withdrawal','Withdrawal',this)"><span class="dd-dot" style="background:var(--red);"></span>Withdrawal</div>
        </div>
      </div>

      {{-- Currency dropdown - client-side filter over loaded rows --}}
      <div class="dd-wrap">
        <div class="acct-filter-pill" onclick="toggleDD('act-cur',event)">Currency: <strong id="act-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-act-cur-menu">
          <div class="dd-option selected" onclick="setActCur('all','All',this)">All</div>
          <div class="dd-divider"></div>
          <div class="dd-option" onclick="setActCur('eur','EUR',this)">EUR</div>
          <div class="dd-option" onclick="setActCur('usd','USD',this)">USD</div>
        </div>
      </div>

      <input class="acct-search" placeholder="Search activity..." oninput="actSearchFn(this.value)" style="margin-left:auto;"/>
    </div>

    <table id="activity-table">
      <thead>
        <tr><th>Reference</th><th>Account</th><th>Platform</th><th>Type</th><th>Amount</th><th>Fee</th><th>Description</th><th>Date</th></tr>
      </thead>
      <tbody id="activity-tbody">
        <tr id="act-loading-row"><td colspan="8" style="text-align:center;padding:20px;color:var(--muted);">Loading activity...</td></tr>
      </tbody>
    </table>

    {{-- Activity Pagination --}}
    <div id="act-pagination" style="display:none;justify-content:space-between;align-items:center;padding:12px 20px;border-top:1px solid var(--border);font-size:13px;">
      <div id="act-pag-info" style="color:var(--muted);"></div>
      <div id="act-pag-controls" style="display:flex;gap:6px;"></div>
    </div>
  </div>
</div>
@endsection

@section('page_scripts')
<script>
// ── Ad Accounts section (unchanged, server-side filtered) ────────────────────
let _acctSearchTimer = null;

function setAcctFilter(dim, val, label, el) {
  const url = new URL(window.location.href);
  if (dim === 'status') url.searchParams.set('account_status', val);
  else if (dim === 'provider') url.searchParams.set('provider', val);
  else                  url.searchParams.set('account_platform', val);
  url.searchParams.set('page', 1);
  window.location.href = url.toString();
}

// Debounced server-side search — navigates with ?search=… so the
// controller queries the full database, not just the visible page.
function filterAcctTable(q) {
  clearTimeout(_acctSearchTimer);
  _acctSearchTimer = setTimeout(function () {
    const url = new URL(window.location.href);
    if (q.trim() === '') {
      url.searchParams.delete('search');
    } else {
      url.searchParams.set('search', q.trim());
    }
    url.searchParams.set('page', 1);
    window.location.href = url.toString();
  }, 500);
}

function applyAcctFilters() {
  // no-op: filtering is now fully server-side
}

// ── Activity section (fetch-based, fully independent) ────────────────────────
const ACTIVITY_URL = '{{ route("exposcale.ad-accounts.activity-feed") }}';
const ACT_PER_PAGE = 10;
let actAcctId = 'all', actAcctPlat = 'all', actType = 'all', actCurFilter = 'all', actWalletId = '';
let actPage = 1, actLastPage = 1, actTotal = 0;

function setActAcct(id, platform, label, walletId, el) {
  actAcctId = id; actAcctPlat = platform; actWalletId = walletId;
  document.getElementById('act-acct-lbl').textContent = label;
  document.querySelectorAll('#dd-act-acct-menu .dd-option').forEach(o => o.classList.remove('selected'));
  el.classList.add('selected');
  closeAllDD();
  loadActivity(1);
}

function setActType(val, label, el) {
  actType = val;
  document.getElementById('act-type-lbl').textContent = label;
  document.querySelectorAll('#dd-act-type-menu .dd-option').forEach(o => o.classList.remove('selected'));
  el.classList.add('selected');
  closeAllDD();
  loadActivity(1);
}

function setActCur(val, label, el) {
  actCurFilter = val;
  document.getElementById('act-cur-lbl').textContent = label;
  document.querySelectorAll('#dd-act-cur-menu .dd-option').forEach(o => o.classList.remove('selected'));
  el.classList.add('selected');
  closeAllDD();
  loadActivity(1);
}

function actSearchFn(q) {
  const ql = q.toLowerCase();
  document.querySelectorAll('#activity-tbody tr[data-cur]').forEach(r => {
    r.style.display = (!ql || r.textContent.toLowerCase().includes(ql)) ? '' : 'none';
  });
}

function renderActPagination() {
  const wrap    = document.getElementById('act-pagination');
  const info    = document.getElementById('act-pag-info');
  const controls = document.getElementById('act-pag-controls');
  if (actLastPage <= 1 && actTotal <= ACT_PER_PAGE) { wrap.style.display = 'none'; return; }

  wrap.style.display = 'flex';
  const from = actTotal === 0 ? 0 : (actPage - 1) * ACT_PER_PAGE + 1;
  const to   = Math.min(actPage * ACT_PER_PAGE, actTotal);
  info.innerHTML = `Showing <strong style="color:var(--text)">${from}</strong> to <strong style="color:var(--text)">${to}</strong> of <strong style="color:var(--text)">${actTotal}</strong> entries`;

  const btnBase = 'padding:5px 11px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;background:var(--card2);color:var(--text);transition:all 0.15s;';
  const btnActive = 'padding:5px 11px;border:1px solid var(--purple);border-radius:6px;font-size:12px;font-weight:600;background:var(--purple);color:#fff;';
  const btnDisabled = 'padding:5px 11px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;color:var(--muted);opacity:0.5;cursor:not-allowed;background:var(--card2);';

  let html = '';

  // Prev
  if (actPage > 1)
    html += `<button style="${btnBase}" onclick="loadActivity(${actPage - 1})">« Prev</button>`;
  else
    html += `<span style="${btnDisabled}">« Prev</span>`;

  // Page numbers
  for (let i = 1; i <= actLastPage; i++) {
    if (i === actPage)
      html += `<span style="${btnActive}">${i}</span>`;
    else if (i === 1 || i === actLastPage || Math.abs(i - actPage) <= 1)
      html += `<button style="${btnBase}" onclick="loadActivity(${i})">${i}</button>`;
    else if (i === 2 || i === actLastPage - 1)
      html += `<span style="padding:5px 6px;color:var(--muted);font-size:12px;">…</span>`;
  }

  // Next
  if (actPage < actLastPage)
    html += `<button style="${btnBase}" onclick="loadActivity(${actPage + 1})">Next »</button>`;
  else
    html += `<span style="${btnDisabled}">Next »</span>`;

  controls.innerHTML = html;
}

function loadActivity(page) {
  page = page || 1;
  actPage = page;
  const tbody = document.getElementById('activity-tbody');
  tbody.innerHTML = '<tr><td colspan="8" style="text-align:center;padding:20px;color:var(--muted);">Loading...</td></tr>';
  document.getElementById('act-pagination').style.display = 'none';

  const params = new URLSearchParams({
    act_acct_id:   actAcctId,
    act_acct_plat: actAcctPlat,
    act_wallet_id: actWalletId,
    act_type:      actType,
    act_currency:  actCurFilter,
    per_page:      ACT_PER_PAGE,
    page:          actPage,
  });

  fetch(ACTIVITY_URL + '?' + params.toString())
    .then(r => r.json())
    .then(data => {
      const txs = data.transactions || [];
      actTotal    = data.total     || 0;
      actLastPage = data.last_page || 1;

      if (!txs.length) {
        tbody.innerHTML = '<tr><td colspan="8" style="text-align:center;padding:20px;color:var(--muted);">No transactions found.</td></tr>';
        const lbl = document.getElementById('act-count-lbl');
        if (lbl) lbl.textContent = '0 entries';
        renderActPagination();
        return;
      }

      let html = '';
      txs.forEach(tx => {
        const isTopup    = tx.type === 'topup';
        const absAmount  = Math.abs(tx.amount);
        const sym        = tx.currency === 'USD' ? '$' : '€';
        const amtColor   = isTopup ? 'var(--green)' : 'var(--red)';
        const amtStr     = (isTopup ? '+' : '-') + sym + absAmount.toFixed(2);
        const badgeCls   = isTopup ? 'act-topup' : 'act-withdrawal';
        const badgeTxt   = isTopup ? '↑ Top-up' : '↓ Withdrawal';
        const fee        = tx.commission || 0;
        const feeStr     = fee > 0 ? '-' + sym + fee.toFixed(2) : '—';
        const feeColor   = fee > 0 ? 'var(--red)' : 'var(--muted)';
        const platLabel  = tx.acct_platform === 'rockads' ? 'Rockads' : 'Gradyn';
        const platColor  = tx.acct_platform === 'rockads' ? 'var(--rockads)' : 'var(--gradyn)';
        const cur        = (tx.currency || 'EUR').toLowerCase();

        html += `<tr data-type="${tx.type}" data-acct="${tx.acct_id}" data-cur="${cur}">
          <td class="tx-ref">${tx.reference}</td>
          <td>${tx.acct_name}</td>
          <td><span style="font-size:11px;font-weight:600;color:${platColor};">${platLabel}</span></td>
          <td><span class="activity-type-badge ${badgeCls}">${badgeTxt}</span></td>
          <td style="font-weight:700;color:${amtColor};">${amtStr}</td>
          <td style="color:${feeColor};">${feeStr}</td>
          <td class="tx-det">${tx.description}</td>
          <td class="tx-date">${tx.tx_date}</td>
        </tr>`;
      });

      tbody.innerHTML = html;

      const from = (actPage - 1) * ACT_PER_PAGE + 1;
      const to   = Math.min(actPage * ACT_PER_PAGE, actTotal);
      const lbl = document.getElementById('act-count-lbl');
      if (lbl) lbl.textContent = `${from}–${to} of ${actTotal} entries`;

      renderActPagination();
    })
    .catch(err => {
      console.error('Activity feed error:', err);
      tbody.innerHTML = '<tr><td colspan="8" style="text-align:center;padding:20px;color:var(--red);">Failed to load activity.</td></tr>';
    });
}

// ── Restore Ad Accounts URL param state on load ───────────────────────────────
const urlParams  = new URLSearchParams(window.location.search);
const initStatus = urlParams.get('account_status') || urlParams.get('status');
const initProvider = urlParams.get('provider');
const initAccountPlatform = urlParams.get('account_platform');
if (initStatus && initStatus !== 'all') {
  const lbl = document.getElementById('dd-status-label2');
  if (lbl) lbl.textContent = initStatus.charAt(0).toUpperCase() + initStatus.slice(1);
}
if (initProvider && initProvider !== 'all') {
  const lbl = document.getElementById('dd-provider-label');
  if (lbl) lbl.textContent = initProvider.charAt(0).toUpperCase() + initProvider.slice(1);
}
if (initAccountPlatform && initAccountPlatform !== 'all') {
  const lbl = document.getElementById('dd-account_platform-label');
  if (lbl) lbl.textContent = initAccountPlatform.charAt(0).toUpperCase() + initAccountPlatform.slice(1);
}
applyAcctFilters();

// If the page reloaded due to a search, re-focus the input with cursor at end
const _initSearch = urlParams.get('search');
if (_initSearch) {
  const _si = document.getElementById('acct-search-input');
  if (_si) {
    _si.focus();
    // Move cursor to end of the pre-populated value
    const _len = _si.value.length;
    _si.setSelectionRange(_len, _len);
  }
}

// Load activity on page ready
loadActivity();
</script>
@endsection