@extends('layouts/layoutMaster')

@php
  use Carbon\Carbon;

  $pageConfigs = [
    'myLayout' => 'blank',
    'navbarType' => 'hidden',
    'menuFixed' => false,
    'contentLayout' => 'compact',
  ];

  $locale = app()->getLocale();
  $rawBalance = (float) ($wallet['balance'] ?? 0);
  $balanceFormatted = number_format($rawBalance, 2, ',', '.');
  $currency = $wallet['currency'] ?? 'EUR';

  $transactions = collect($wallet['transactions'] ?? [])->map(function ($transaction) use ($locale) {
      $createdAt = $transaction->created_at?->copy()->locale($locale);
      $description = $transaction->description ?: ($transaction->type === 'credit' ? 'Ingreso a monedero' : 'Cargo en monedero');

      return [
          'id' => $transaction->id,
          'type' => $transaction->type,
          'type_label' => $transaction->type === 'credit' ? 'Ingreso' : 'Cargo',
          'amount' => (float) $transaction->amount,
          'amount_formatted' => number_format((float) $transaction->amount, 2, ',', '.'),
          'description' => $description,
          'balance_before' => (float) $transaction->balance_before,
          'balance_after' => (float) $transaction->balance_after,
          'balance_after_formatted' => number_format((float) $transaction->balance_after, 2, ',', '.'),
          'created_at' => $transaction->created_at?->toIsoString(),
          'date_label' => $createdAt ? $createdAt->isoFormat('D MMM YYYY · HH:mm') : '',
          'relative_label' => $createdAt ? $createdAt->diffForHumans(null, null, 2) : '',
      ];
  });

  $lastTransaction = $transactions->first();
  $lastMovementText = $lastTransaction
      ? (($lastTransaction['type'] === 'credit' ? '+' : '-') . $lastTransaction['amount_formatted'] . ' ' . $currency . ' · ' . $lastTransaction['description'])
      : 'Tu monedero registrará aquí tus ingresos y cargos.';
  $lastMovementHint = $lastTransaction
      ? ($lastTransaction['relative_label'] ? 'Último movimiento ' . $lastTransaction['relative_label'] : 'Último movimiento')
      : 'Sin movimientos recientes';
  $lastMovementClass = $lastTransaction
      ? ($lastTransaction['type'] === 'credit' ? 'positive' : 'negative')
      : 'neutral';

  $initialTransactions = $transactions->values();
@endphp

@section('title')
  Monedero
@endsection

@section('page-style')
  <style>
    :root {
      --rider-accent: #e63946;
      --rider-accent-soft: #ffecee;
      --rider-text: #1f2933;
      --rider-muted: #667085;
      --rider-border: rgba(230, 57, 70, 0.18);
      --rider-card-radius: 22px;
      --wallet-shadow: 0 20px 40px rgba(230, 57, 70, 0.1);
      --wallet-gradient: linear-gradient(142deg, rgba(230, 57, 70, 0.95), rgba(230, 57, 70, 0.65));
    }

    body {
      background: #f8f9fb;
      color: var(--rider-text);
    }

    .rider-wallet {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: #fff;
    }

    .rider-wallet.is-loading {
      cursor: progress;
    }

    .rider-wallet__header {
      padding: clamp(1.8rem, 5vw, 3rem) clamp(1.4rem, 5vw, 3rem) clamp(2.4rem, 5vw, 3.2rem);
      background:
        radial-gradient(circle at top right, rgba(230, 57, 70, 0.16), rgba(230, 57, 70, 0)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
      border-bottom: 1px solid rgba(230, 57, 70, 0.12);
      display: grid;
      gap: clamp(1.4rem, 4vw, 2.4rem);
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      align-items: end;
    }

    .wallet-hero__intro {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .wallet-hero__tag {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.35rem 0.85rem;
      border-radius: 999px;
      background: var(--rider-accent-soft);
      color: var(--rider-accent);
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: 0.72rem;
      width: fit-content;
    }

    .wallet-hero__title {
      font-size: clamp(1.9rem, 5vw, 2.7rem);
      font-weight: 700;
      margin: 0;
    }

    .wallet-hero__subtitle {
      margin: 0;
      color: var(--rider-muted);
      font-size: 1rem;
      max-width: 420px;
    }

    .wallet-hero__snapshot {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      padding: clamp(1.4rem, 3vw, 2rem);
      border-radius: var(--rider-card-radius);
      background: #fff;
      border: 1px solid rgba(230, 57, 70, 0.14);
      box-shadow: 0 22px 32px rgba(230, 57, 70, 0.06);
    }

    .wallet-hero__balance-label {
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 0.7rem;
      color: var(--rider-muted);
      font-weight: 600;
    }

    .wallet-hero__balance-value {
      font-size: clamp(2rem, 5vw, 2.6rem);
      font-weight: 700;
      margin: 0;
      color: var(--rider-accent);
    }

    .wallet-hero__activity {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .wallet-hero__activity span {
      font-size: 0.92rem;
      color: var(--rider-muted);
    }

    .wallet-hero__activity strong {
      font-size: 0.98rem;
      font-weight: 600;
    }

    .wallet-hero__activity strong[data-status="positive"] {
      color: #2f8f4e;
    }

    .wallet-hero__activity strong[data-status="negative"] {
      color: #d94841;
    }

    .wallet-hero__activity strong[data-status="neutral"] {
      color: var(--rider-muted);
    }

    .rider-wallet__body {
      padding: clamp(1.8rem, 5vw, 2.8rem) clamp(1.4rem, 5vw, 3rem) clamp(3rem, 6vw, 4rem);
      display: flex;
      flex-direction: column;
      gap: clamp(1.8rem, 4vw, 2.8rem);
    }

    .wallet-summary {
      display: grid;
      gap: clamp(1.4rem, 4vw, 2rem);
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .wallet-summary__card {
      position: relative;
      border-radius: var(--rider-card-radius);
      overflow: hidden;
      color: #fff;
      background: var(--wallet-gradient);
      box-shadow: var(--wallet-shadow);
      padding: clamp(1.6rem, 4vw, 2.2rem);
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
    }

    .wallet-summary__card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.28), transparent 55%);
      pointer-events: none;
    }

    .wallet-summary__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      position: relative;
      z-index: 1;
    }

    .wallet-summary__header h2 {
      margin: 0;
      font-size: 1.6rem;
      font-weight: 700;
    }

    .wallet-summary__balance {
      font-size: clamp(2.4rem, 6vw, 3rem);
      font-weight: 700;
      margin: 0;
    }

    .wallet-summary__meta {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      font-size: 0.95rem;
      color: rgba(255, 255, 255, 0.85);
      position: relative;
      z-index: 1;
    }

    .wallet-summary__actions {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .wallet-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      border-radius: 16px;
      border: 1px solid transparent;
      padding: 0.6rem 1.3rem;
      font-weight: 600;
      font-size: 0.92rem;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .wallet-button--primary {
      background: #fff;
      color: var(--rider-accent);
      box-shadow: 0 12px 22px rgba(12, 25, 43, 0.16);
    }

    .wallet-button--primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 26px rgba(12, 25, 43, 0.18);
    }

    .wallet-button--ghost {
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.35);
    }

    .wallet-button:disabled {
      opacity: 0.7;
      cursor: not-allowed;
      transform: none !important;
      box-shadow: none !important;
    }

    .wallet-info-panel {
      border-radius: var(--rider-card-radius);
      border: 1px solid var(--rider-border);
      background: #fff;
      box-shadow: 0 18px 30px rgba(13, 25, 43, 0.08);
      padding: clamp(1.5rem, 4vw, 2rem);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .wallet-info-panel h3 {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--rider-text);
    }

    .wallet-info-panel p {
      margin: 0;
      color: var(--rider-muted);
      font-size: 0.95rem;
      line-height: 1.5;
    }

    .wallet-transactions {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .wallet-transactions__header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .wallet-transactions__header h2 {
      margin: 0;
      font-size: 1.35rem;
      font-weight: 700;
    }

    .wallet-transactions__filters {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.9rem;
      color: var(--rider-muted);
    }

    .wallet-transactions__body {
      border-radius: var(--rider-card-radius);
      border: 1px solid rgba(230, 57, 70, 0.12);
      background: #fff;
      box-shadow: 0 18px 32px rgba(13, 25, 43, 0.08);
    }

    .wallet-history {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
    }

    .wallet-history__item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.2rem 1.6rem;
      border-bottom: 1px solid rgba(230, 57, 70, 0.12);
    }

    .wallet-history__item:last-child {
      border-bottom: none;
    }

    .wallet-history__meta {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .wallet-history__label {
      font-weight: 600;
      font-size: 1rem;
      color: var(--rider-text);
    }

    .wallet-history__date {
      font-size: 0.85rem;
      color: var(--rider-muted);
    }

    .wallet-history__amount {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      text-align: right;
    }

    .wallet-history__value {
      font-weight: 700;
      font-size: 1.05rem;
    }

    .wallet-history__value--credit {
      color: #2a9368;
    }

    .wallet-history__value--debit {
      color: #d94841;
    }

    .wallet-history__balance {
      font-size: 0.82rem;
      color: var(--rider-muted);
    }

    .wallet-empty {
      padding: 2.2rem 1.8rem;
      text-align: center;
      color: var(--rider-muted);
      font-size: 0.95rem;
    }

    .wallet-transactions__footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      padding: 1.4rem 1.6rem;
      border-top: 1px solid rgba(230, 57, 70, 0.12);
      background: rgba(230, 57, 70, 0.03);
      border-radius: 0 0 var(--rider-card-radius) var(--rider-card-radius);
    }

    .wallet-status {
      font-size: 0.88rem;
      color: var(--rider-muted);
    }

    .rider-nav {
      position: sticky;
      bottom: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      gap: 0.35rem;
      padding: 0.55rem clamp(1rem, 6vw, 1.6rem);
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(14px);
      border-top: 1px solid rgba(230, 57, 70, 0.16);
      box-shadow: 0 -6px 18px rgba(13, 25, 43, 0.08);
      z-index: 9;
    }

    .rider-nav__item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      padding: 0.35rem 0.25rem;
      border-radius: 14px;
      color: var(--rider-muted);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: .02em;
      text-decoration: none;
      transition: all 0.16s ease;
    }

    .rider-nav__item i {
      font-size: 1.35rem;
      color: var(--rider-accent);
    }

    .rider-nav__item.is-active,
    .rider-nav__item:focus,
    .rider-nav__item:hover {
      color: var(--rider-accent);
      background: rgba(230, 57, 70, 0.08);
      outline: none;
    }

    .rider-nav__item:focus {
      box-shadow: 0 0 0 0.2rem rgba(230, 57, 70, 0.2);
    }

    @media (max-width: 720px) {
      .wallet-history__item {
        align-items: flex-start;
      }

      .wallet-history__amount {
        align-items: flex-start;
        text-align: left;
      }

      .wallet-summary__card,
      .wallet-info-panel {
        padding: 1.4rem;
      }

      .wallet-transactions__footer {
        flex-direction: column;
        align-items: stretch;
      }

      .wallet-summary__actions {
        width: 100%;
        flex-direction: column;
      }

      .wallet-button {
        width: 100%;
      }
    }
  </style>
@endsection

@section('content')
  <div
    class="rider-wallet"
    data-wallet-root
    data-endpoint="{{ route('rider.api.wallet.show') }}"
    data-currency="{{ $currency }}"
    data-step="20"
    data-initial-limit="{{ $initialLimit }}"
  >
    <header class="rider-wallet__header">
      <div class="wallet-hero__intro">
        <span class="wallet-hero__tag">Monedero del rider</span>
        <h1 class="wallet-hero__title">Gestiona tus ingresos y cargos</h1>
        <p class="wallet-hero__subtitle">
          Consulta tu saldo disponible, revisa el historial completo de movimientos y mantente al día con los ajustes que impactan tu monedero.
        </p>
        <div class="d-flex gap-2 flex-wrap">
          <a class="btn btn-outline-primary btn-sm" href="{{ route('rider.tips') }}">
            <i class="ti tabler-coins me-1"></i>
            {{ __('Ver propinas') }}
          </a>
        </div>
      </div>
      <div class="wallet-hero__snapshot">
        <span class="wallet-hero__balance-label">Saldo disponible</span>
        <p class="wallet-hero__balance-value" data-wallet-balance>{{ $balanceFormatted }} {{ $currency }}</p>
        <div class="wallet-hero__activity">
          <span data-wallet-last>{{ $lastMovementHint }}</span>
          <strong data-wallet-activity data-status="{{ $lastMovementClass }}">{{ $lastMovementText }}</strong>
        </div>
      </div>
    </header>

    <main class="rider-wallet__body">
      <section class="wallet-summary">
        <div class="wallet-summary__card">
          <div class="wallet-summary__header">
            <h2>Resumen general</h2>
            <div class="wallet-summary__actions">
              <button type="button" class="wallet-button wallet-button--primary" data-wallet-refresh>
                Actualizar
              </button>
              <button type="button" class="wallet-button wallet-button--ghost" data-wallet-load-more>
                Ver más movimientos
              </button>
            </div>
          </div>
          <div class="wallet-summary__meta">
            <span>Saldo actual en moneda base ({{ $currency }}).</span>
            <span>Los movimientos se registran de forma automática cuando se liquidan horas, bonos o ajustes.</span>
          </div>
        </div>
        <aside class="wallet-info-panel">
          <h3>¿Cómo funciona?</h3>
          <p>
            Tu monedero consolida los ingresos (créditos) y cargos (débitos) asociados a tu actividad diaria. Cada vez que haya un ajuste
            recibirás un movimiento detallado con la fecha, concepto y saldo resultante.
          </p>
          <p>
            Si detectas un movimiento inusual, comunícate con soporte e indica la referencia del ajuste para que podamos revisarlo cuanto antes.
          </p>
        </aside>
      </section>

      <section class="wallet-transactions" aria-live="polite">
        <div class="wallet-transactions__header">
          <h2>Historial de movimientos</h2>
          <div class="wallet-transactions__filters">
            <span data-wallet-count>Mostrando {{ $initialTransactions->count() }} movimientos recientes.</span>
          </div>
        </div>
        <div class="wallet-transactions__body">
          <p class="wallet-empty" data-wallet-empty @if($initialTransactions->isNotEmpty()) hidden @endif>
            Aún no registramos movimientos en tu monedero. En cuanto recibas un ajuste o pago aparecerá aquí.
          </p>
          <ul class="wallet-history" data-wallet-history @if($initialTransactions->isEmpty()) hidden @endif>
            @foreach($initialTransactions as $transaction)
              @php
                $modifier = $transaction['type'] === 'credit' ? 'credit' : 'debit';
                $sign = $transaction['type'] === 'credit' ? '+' : '-';
              @endphp
              <li class="wallet-history__item wallet-history__item--{{ $modifier }}" data-transaction-id="{{ $transaction['id'] }}">
                <div class="wallet-history__meta">
                  <span class="wallet-history__label">{{ $transaction['description'] }}</span>
                  <span class="wallet-history__date">{{ $transaction['date_label'] }}</span>
                </div>
                <div class="wallet-history__amount">
                  <span class="wallet-history__value wallet-history__value--{{ $modifier }}">{{ $sign }}{{ $transaction['amount_formatted'] }} {{ $currency }}</span>
                  <span class="wallet-history__balance">Saldo tras movimiento: {{ $transaction['balance_after_formatted'] }} {{ $currency }}</span>
                </div>
              </li>
            @endforeach
          </ul>
          <div class="wallet-transactions__footer">
            <span class="wallet-status" data-wallet-status hidden></span>
            <div class="wallet-summary__actions">
              <button type="button" class="wallet-button wallet-button--ghost" data-wallet-refresh>
                Actualizar listado
              </button>
              <button type="button" class="wallet-button wallet-button--primary" data-wallet-load-more>
                Cargar más
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>
    @include('rider.partials.nav', [
      'navActive' => 'wallet',
      'navItems' => ['home', 'wallet', 'tips', 'profile'],
    ])
  </div>
@endsection

@section('page-script')
  <script>
    window.riderWalletInitial = {
      balance: {{ $rawBalance }},
      balance_formatted: @json($balanceFormatted),
      currency: @json($currency),
      transactions: @json($initialTransactions),
      last_transaction: @json($lastTransaction),
      limit: {{ (int) $initialLimit }}
    };
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const root = document.querySelector('[data-wallet-root]');
      if (!root) return;

      const endpoint = root.dataset.endpoint;
      const currency = root.dataset.currency;
      const step = parseInt(root.dataset.step || '20', 10);
      let limit = parseInt(root.dataset.initialLimit || '20', 10);
      const state = window.riderWalletInitial ? { ...window.riderWalletInitial } : {};

      const historyList = root.querySelector('[data-wallet-history]');
      const countLabel = root.querySelector('[data-wallet-count]');
      const balanceValue = root.querySelector('[data-wallet-balance]');
      const activityLabel = root.querySelector('[data-wallet-activity]');
      const lastMeta = root.querySelector('[data-wallet-last]');
      const emptyState = root.querySelector('[data-wallet-empty]');
      const loadMoreButtons = root.querySelectorAll('[data-wallet-load-more]');
      const refreshButtons = root.querySelectorAll('[data-wallet-refresh]');
      const statusMessage = root.querySelector('[data-wallet-status]');
      let isLoading = false;

      const formatAmount = (amount) => {
        const value = Number.isFinite(amount) ? amount : 0;
        return new Intl.NumberFormat('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
      };

      const toggleLoading = (active, message = '') => {
        if (statusMessage) {
          statusMessage.textContent = message;
          statusMessage.hidden = !message;
        }
        root.classList.toggle('is-loading', active);
        loadMoreButtons.forEach((button) => {
          button.disabled = active;
        });
        refreshButtons.forEach((button) => {
          button.disabled = active;
        });
        if (!active && message && statusMessage) {
          window.setTimeout(() => {
            statusMessage.hidden = true;
          }, 4000);
        }
      };

      const renderTransactions = (items = []) => {
        if (!historyList) {
          return;
        }

        historyList.innerHTML = items.map((item) => {
          const modifier = item.type === 'credit' ? 'credit' : 'debit';
          const sign = item.type === 'credit' ? '+' : '-';
          const amountFormatted = item.amount_formatted ?? formatAmount(item.amount);
          const balanceFormatted = item.balance_after_formatted ?? formatAmount(item.balance_after);

          return `
            <li class="wallet-history__item wallet-history__item--${modifier}" data-transaction-id="${item.id ?? ''}">
              <div class="wallet-history__meta">
                <span class="wallet-history__label">${item.description ?? ''}</span>
                <span class="wallet-history__date">${item.date_label ?? ''}</span>
              </div>
              <div class="wallet-history__amount">
                <span class="wallet-history__value wallet-history__value--${modifier}">${sign}${amountFormatted} ${currency}</span>
                <span class="wallet-history__balance">Saldo tras movimiento: ${balanceFormatted} ${currency}</span>
              </div>
            </li>
          `;
        }).join('');

        if (emptyState) {
          emptyState.hidden = items.length > 0;
        }
        historyList.hidden = items.length === 0;
        if (countLabel) {
          countLabel.textContent = items.length > 0
            ? `Mostrando ${items.length} movimientos recientes.`
            : 'Sin movimientos registrados.';
        }
      };

      const updateSummary = (data) => {
        if (balanceValue && data.balance !== undefined) {
          balanceValue.textContent = `${formatAmount(data.balance)} ${currency}`;
        }

        const tx = data.last_transaction;
        if (activityLabel) {
          if (tx) {
            const sign = tx.type === 'credit' ? '+' : '-';
            const amountFormatted = tx.amount_formatted ?? formatAmount(tx.amount);
            activityLabel.textContent = `${sign}${amountFormatted} ${currency} · ${tx.description ?? ''}`;
            activityLabel.dataset.status = tx.type === 'credit' ? 'positive' : 'negative';
          } else {
            activityLabel.textContent = 'Sin movimientos recientes';
            activityLabel.dataset.status = 'neutral';
          }
        }

        if (lastMeta) {
          if (tx && tx.relative_label) {
            lastMeta.textContent = `Último movimiento ${tx.relative_label}`;
          } else if (tx) {
            lastMeta.textContent = 'Último movimiento';
          } else {
            lastMeta.textContent = 'Aún no registramos movimientos en tu monedero.';
          }
        }
      };

      const applyData = (payload) => {
        const items = payload?.transactions ?? [];
        state.limit = payload?.limit ?? state.limit ?? limit;
        renderTransactions(items);
        updateSummary(payload ?? {});
        state.transactions = items;
        state.balance = payload?.balance;
        state.last_transaction = payload?.last_transaction;
      };

      applyData({
        balance: state.balance ?? root.dataset.balance,
        transactions: state.transactions ?? [],
        last_transaction: state.last_transaction ?? null,
      });

      const fetchWallet = async (desiredLimit) => {
        if (isLoading || !endpoint) {
          return;
        }

        isLoading = true;
        toggleLoading(true, 'Actualizando movimientos…');

        try {
          const response = await fetch(`${endpoint}?limit=${desiredLimit}`, {
            headers: { Accept: 'application/json' },
          });
          const body = await response.json().catch(() => null);

          if (!response.ok || !body?.data) {
            throw new Error(body?.message || 'No pudimos actualizar tu monedero.');
          }

          const payload = body.data;
          limit = payload.limit ?? desiredLimit;
          applyData(payload);
          root.dataset.initialLimit = String(limit);
          toggleLoading(false);
        } catch (error) {
          console.error(error);
          toggleLoading(false, error?.message || 'No pudimos actualizar tu monedero.');
        } finally {
          isLoading = false;
        }
      };

      loadMoreButtons.forEach((button) => {
        button.addEventListener('click', () => {
          const nextLimit = limit + step;
          fetchWallet(nextLimit);
        });
      });

      refreshButtons.forEach((button) => {
        button.addEventListener('click', () => {
          fetchWallet(limit);
        });
      });
    });
  </script>
@endsection