@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Riders')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss'
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.js',
  'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.js'
])
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', () => {
  const baseProfileUrl = @json(url('/admin/usuarios'));
  const profileSuffix = '?from=riders';
  const searchInput = document.getElementById('filter_search');
  const chipGroups = document.querySelectorAll('[data-chip-group]');
  const exportSlot = document.getElementById('riders-export-slot');
  const filtersOffcanvas = document.getElementById('ridersFiltersOffcanvas');
  const applyFiltersBtn = document.getElementById('apply-riders-filters');
  const clearFiltersBtn = document.getElementById('clear-riders-filters');
  const selectCompany = document.getElementById('filter_company');
  const selectCity = document.getElementById('filter_city');
  const selectZone = document.getElementById('filter_zone');
  const selectVehicle = document.getElementById('filter_vehicle');
  const kpiTotal = document.getElementById('kpi-riders-total');
  const kpiActive = document.getElementById('kpi-riders-active');
  const kpiInactive = document.getElementById('kpi-riders-inactive');
  const kpiCred = document.getElementById('kpi-riders-cred');

  const state = {
    status: '',
    credential: '',
    company: '',
    city: '',
    zone: '',
    vehicle: '',
    search: ''
  };

  const avatarColors = ['bg-label-primary', 'bg-label-success', 'bg-label-warning', 'bg-label-info', 'bg-label-danger', 'bg-label-secondary'];

  const escapeHtml = (value = '') => String(value)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');

  const getInitials = (name = '') => {
    const parts = name.trim().split(/\s+/).filter(Boolean).slice(0, 2);
    if (!parts.length) return 'R';
    return parts.map(part => part[0]?.toUpperCase() || '').join('') || 'R';
  };

  const pickAvatarColor = (seed) => {
    const value = typeof seed === 'number' ? seed : (seed || '').length;
    return avatarColors[value % avatarColors.length] || avatarColors[0];
  };

  const walletApiBase = @json(url('/admin/api/users'));
  const walletOffcanvasEl = document.getElementById('walletOffcanvas');
  const walletElements = walletOffcanvasEl ? {
    offcanvas: walletOffcanvasEl,
    userName: document.getElementById('walletUserName'),
    userEmail: document.getElementById('walletUserEmail'),
    userIdInput: document.getElementById('walletUserId'),
    loading: document.getElementById('walletLoading'),
    feedback: document.getElementById('walletFeedback'),
    summary: document.getElementById('walletSummary'),
    balance: document.getElementById('walletBalance'),
    currency: document.getElementById('walletCurrency'),
    updatedAt: document.getElementById('walletUpdatedAt'),
    transactionsCount: document.getElementById('walletTransactionsCount'),
    history: document.getElementById('walletHistory'),
    empty: document.getElementById('walletEmpty'),
    form: document.getElementById('walletTransactionForm'),
    amount: document.getElementById('walletAmount'),
    type: document.getElementById('walletType'),
    reference: document.getElementById('walletReference'),
    description: document.getElementById('walletDescription'),
    submitBtn: document.getElementById('walletSubmitBtn'),
    submitSpinner: document.querySelector('#walletSubmitBtn .spinner-border'),
    submitLabel: document.querySelector('#walletSubmitBtn .wallet-submit-label')
  } : null;
  const walletState = { userId: null };

  const getCsrfToken = () => document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

  const formatAmount = (value) => {
    const normalized = typeof value === 'number'
      ? value
      : parseFloat(String(value ?? '0').replace(',', '.'));
    if (!Number.isFinite(normalized)) return '0,00';
    return normalized.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  };

  const formatCountLabel = (count) => count === 1 ? '1 movimiento' : `${count} movimientos`;

  const clearWalletBody = () => {
    if (!walletElements) return;
    walletElements.summary?.classList.add('d-none');
    walletElements.history?.classList.add('d-none');
    if (walletElements.history) walletElements.history.innerHTML = '';
    walletElements.empty?.classList.add('d-none');
  };

  const setWalletLoading = (isLoading) => {
    if (!walletElements?.loading) return;
    walletElements.loading.classList.toggle('d-none', !isLoading);
  };

  const hideWalletFeedback = () => {
    if (!walletElements?.feedback) return;
    walletElements.feedback.classList.add('d-none');
  };

  const showWalletFeedback = (message, type = 'error') => {
    if (!walletElements?.feedback) return;
    walletElements.feedback.textContent = message;
    walletElements.feedback.classList.remove('d-none', 'wallet-error', 'wallet-success');
    walletElements.feedback.classList.add(type === 'success' ? 'wallet-success' : 'wallet-error');
  };

  const toggleSubmitSpinner = (isSubmitting) => {
    if (!walletElements?.submitBtn) return;
    walletElements.submitBtn.disabled = isSubmitting;
    walletElements.submitSpinner?.classList.toggle('d-none', !isSubmitting);
    walletElements.submitLabel?.classList.toggle('d-none', isSubmitting);
  };

  const resetWalletUI = () => {
    if (!walletElements) return;
    clearWalletBody();
    hideWalletFeedback();
    setWalletLoading(false);
    walletState.userId = null;
    if (walletElements.userName) walletElements.userName.textContent = '—';
    if (walletElements.userEmail) walletElements.userEmail.textContent = '—';
    if (walletElements.userIdInput) walletElements.userIdInput.value = '';
    if (walletElements.form) {
      walletElements.form.reset();
      if (walletElements.type) walletElements.type.value = 'credit';
    }
    toggleSubmitSpinner(false);
  };

  const renderWallet = (data) => {
    if (!walletElements) return;
    clearWalletBody();
    const currency = data?.currency || 'EUR';
    const currencySafe = escapeHtml(currency);

    walletElements.summary?.classList.remove('d-none');
    if (walletElements.balance) walletElements.balance.textContent = data?.balance_formatted || formatAmount(data?.balance || 0);
    if (walletElements.currency) walletElements.currency.textContent = currency;
    if (walletElements.updatedAt) walletElements.updatedAt.textContent = `Actualizado ${new Date().toLocaleString('es-ES')}`;

    const transactions = Array.isArray(data?.transactions) ? data.transactions : [];
    if (walletElements.transactionsCount) walletElements.transactionsCount.textContent = formatCountLabel(transactions.length);

    if (!transactions.length) {
      walletElements.empty?.classList.remove('d-none');
      return;
    }

    const historyHtml = transactions.map(transaction => {
      const type = transaction?.type === 'debit' ? 'debit' : 'credit';
      const sign = type === 'debit' ? '-' : '+';
      const description = escapeHtml(transaction?.description || (type === 'credit' ? 'Ingreso a monedero' : 'Cargo en monedero'));
      const dateLabel = escapeHtml(transaction?.created_at_label || 'Fecha no disponible');
      const reference = transaction?.reference ? `<div class="wallet-history__date">Ref: ${escapeHtml(transaction.reference)}</div>` : '';
      const authorName = transaction?.author?.name || transaction?.author?.email;
      const author = authorName ? `<div class="wallet-history__date">Autor: ${escapeHtml(authorName)}</div>` : '';
      const amountLabel = escapeHtml(transaction?.amount_formatted || formatAmount(transaction?.amount || 0));
      const balanceAfter = escapeHtml(formatAmount(transaction?.balance_after ?? 0));
      return `
        <li class="wallet-history__item">
          <div class="wallet-history__meta">
            <div class="wallet-history__title">${description}</div>
            <div class="wallet-history__date">${dateLabel}</div>
            ${reference}
            ${author}
          </div>
          <div class="wallet-history__amount ${type}">
            ${sign}${amountLabel} ${currencySafe}
            <div class="text-muted small">Saldo: ${balanceAfter} ${currencySafe}</div>
          </div>
        </li>`;
    }).join('');

    if (walletElements.history) {
      walletElements.history.innerHTML = historyHtml;
      walletElements.history.classList.remove('d-none');
    }
  };

  const fetchWalletData = async (userId) => {
    if (!walletElements) return;
    clearWalletBody();
    hideWalletFeedback();
    setWalletLoading(true);
    try {
      const response = await fetch(`${walletApiBase}/${userId}/wallet`);
      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(errorText || 'No se pudo cargar el monedero.');
      }
      const json = await response.json();
      renderWallet(json?.data || {});
    } catch (error) {
      showWalletFeedback(error?.message || 'Ha ocurrido un error al cargar el monedero.', 'error');
    } finally {
      setWalletLoading(false);
    }
  };

  const openWalletOffcanvas = (trigger) => {
    if (!walletElements || !trigger) return;
    const userId = trigger.dataset.walletUserId;
    if (!userId) return;
    walletState.userId = userId;
    if (walletElements.userIdInput) walletElements.userIdInput.value = userId;
    if (walletElements.userName) walletElements.userName.innerHTML = trigger.dataset.walletUserName || '—';
    if (walletElements.userEmail) walletElements.userEmail.innerHTML = trigger.dataset.walletUserEmail || '—';
    fetchWalletData(userId);
    bootstrap.Offcanvas.getOrCreateInstance(walletOffcanvasEl)?.show();
  };

  if (walletOffcanvasEl && walletElements) {
    walletOffcanvasEl.addEventListener('hidden.bs.offcanvas', resetWalletUI);

    document.addEventListener('click', event => {
      const trigger = event.target.closest('.js-wallet-open');
      if (!trigger) return;
      event.preventDefault();
      openWalletOffcanvas(trigger);
    });

    walletElements.form?.addEventListener('submit', async event => {
      event.preventDefault();
      if (!walletState.userId) return;
      hideWalletFeedback();

      const rawAmount = walletElements.amount?.value ?? '';
      const normalizedAmount = parseFloat(String(rawAmount).replace(',', '.'));
      if (!Number.isFinite(normalizedAmount) || normalizedAmount <= 0) {
        showWalletFeedback('Introduce un importe válido mayor a 0.', 'error');
        walletElements.amount?.focus();
        return;
      }

      const payload = {
        amount: normalizedAmount,
        type: walletElements.type?.value || 'credit',
        description: walletElements.description?.value?.trim() || null,
        reference: walletElements.reference?.value?.trim() || null
      };

      toggleSubmitSpinner(true);
      try {
        const response = await fetch(`${walletApiBase}/${walletState.userId}/wallet/transactions`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': getCsrfToken()
          },
          body: JSON.stringify(payload)
        });

        const json = await response.json().catch(() => null);
        if (!response.ok) {
          const message = json?.message || 'No se pudo registrar el movimiento.';
          showWalletFeedback(message, 'error');
          return;
        }

        renderWallet(json?.data || {});
        showWalletFeedback('Movimiento registrado correctamente.', 'success');
        if (walletElements.form) {
          const currentType = walletElements.type?.value || 'credit';
          walletElements.form.reset();
          if (walletElements.type) walletElements.type.value = currentType;
          if (walletElements.userIdInput) walletElements.userIdInput.value = walletState.userId;
        }
      } catch (_) {
        showWalletFeedback('Ha ocurrido un error al guardar el movimiento.', 'error');
      } finally {
        toggleSubmitSpinner(false);
      }
    });
  }

  const updateChipStyles = (type) => {
    document.querySelectorAll(`[data-chip-group="${type}"] [data-chip-type]`).forEach(button => {
      const isActive = (state[type] || '') === button.dataset.chipValue;
      button.classList.toggle('btn-primary', isActive);
      button.classList.toggle('btn-outline-secondary', !isActive);
      button.classList.toggle('text-white', isActive);
    });
  };

  const fetchJSON = async (url) => {
    const response = await fetch(url);
    return await response.json();
  };

  const loadCompanies = async (selected = '') => {
    if (!selectCompany) return;
    selectCompany.innerHTML = '<option value="">Todas</option>';
    try {
      const { data = [] } = await fetchJSON(@json(url('/admin/api/companies')));
      data.forEach(company => {
        const option = document.createElement('option');
        option.value = company.id;
        option.textContent = company.name;
        selectCompany.appendChild(option);
      });
      selectCompany.value = data.some(item => String(item.id) === String(selected)) ? selected : '';
    } catch (_) {}
  };

  const loadCities = async (selected = '') => {
    if (!selectCity) return;
    selectCity.innerHTML = '<option value="">Todas</option>';
    try {
      const url = new URL(@json(url('/admin/api/cities')));
      if (selectCompany?.value) url.searchParams.set('company_id', selectCompany.value);
      const { data = [] } = await fetchJSON(url);
      data.forEach(city => {
        const option = document.createElement('option');
        option.value = city.id;
        option.textContent = city.name;
        selectCity.appendChild(option);
      });
      selectCity.value = data.some(item => String(item.id) === String(selected)) ? selected : '';
    } catch (_) {}
  };

  const loadZones = async (selected = '') => {
    if (!selectZone) return;
    selectZone.innerHTML = '<option value="">Todas</option>';
    try {
      const url = new URL(@json(url('/admin/api/zones')));
      if (selectCompany?.value) url.searchParams.set('company_id', selectCompany.value);
      if (selectCity?.value) url.searchParams.set('city_id', selectCity.value);
      const { data = [] } = await fetchJSON(url);
      data.forEach(zone => {
        const option = document.createElement('option');
        option.value = zone.id;
        option.textContent = zone.city ? `${zone.name} (${zone.city})` : zone.name;
        selectZone.appendChild(option);
      });
      selectZone.value = data.some(item => String(item.id) === String(selected)) ? selected : '';
    } catch (_) {}
  };

  const loadVehicles = async (selected = '') => {
    if (!selectVehicle) return;
    selectVehicle.innerHTML = '<option value="">Todos</option>';
    try {
      const url = new URL(@json(url('/admin/api/glovo-vehicles')));
      url.searchParams.set('active', '1');
      if (selectCompany?.value) url.searchParams.set('company_id', selectCompany.value);
      const { data = [] } = await fetchJSON(url);
      data.forEach(vehicle => {
        const option = document.createElement('option');
        option.value = vehicle.id;
        option.textContent = vehicle.name;
        selectVehicle.appendChild(option);
      });
      selectVehicle.value = data.some(item => String(item.id) === String(selected)) ? selected : '';
    } catch (_) {}
  };

  const bootstrapFilters = async () => {
    await loadCompanies(state.company);
    await loadCities(state.city);
    await loadZones(state.zone);
    await loadVehicles(state.vehicle);
  };

  bootstrapFilters();

  const tableElement = document.querySelector('.dt-riders');
  if (!tableElement) return;

  const dataTable = new DataTable(tableElement, {
    ajax: {
      url: @json(url('/admin/api/riders')),
      data: params => {
        params.company_id = state.company || '';
        params.city_id = state.city || '';
        params.zone_id = state.zone || '';
        params.vehicle_id = state.vehicle || '';
        params.active = state.status || '';
        params.has_credential = state.credential || '';
        params.q = state.search || '';
      },
      dataSrc: json => {
        const rows = json?.data || [];
        const total = rows.length;
        const activeCount = rows.filter(row => !!row.active).length;
        const inactiveCount = total - activeCount;
        const credentialCount = rows.filter(row => !!row.has_credential).length;
        if (kpiTotal) kpiTotal.textContent = total;
        if (kpiActive) kpiActive.textContent = activeCount;
        if (kpiInactive) kpiInactive.textContent = inactiveCount;
        if (kpiCred) kpiCred.textContent = credentialCount;
        return rows;
      }
    },
    responsive: {
      details: {
        type: 'column',
        target: 0
      }
    },
    dom: "<'table-responsive border-top't><'d-flex flex-column flex-md-row justify-content-between align-items-center gap-3 mt-3'lp>",
    language: {
      lengthMenu: 'Mostrar _MENU_',
      search: ''
    },
    columns: [
      { data: null },
      { data: null },
      { data: 'email' },
      { data: 'companies' },
      { data: 'cities' },
      { data: 'zones' },
      { data: null },
      { data: 'active' },
      { data: 'id' }
    ],
    columnDefs: [
      {
        className: 'control',
        orderable: false,
        searchable: false,
        targets: 0,
        defaultContent: ''
      },
      {
        targets: 1,
        orderable: true,
        render: (_, __, row) => {
          const name = escapeHtml(row?.name || 'Sin nombre');
          const email = escapeHtml(row?.email || '—');
          const initials = getInitials(row?.name);
          const avatarClass = pickAvatarColor(row?.id || row?.name);
          const profileUrl = `${baseProfileUrl}/${row.id}${profileSuffix}`;
          const riderIdLine = row?.rider_id ? `<small class="text-muted">Rider ID: ${escapeHtml(String(row.rider_id))}</small>` : '';
          return `
            <div class="d-flex align-items-center">
              <div class="avatar avatar-sm flex-shrink-0 me-3 ${avatarClass} text-heading fw-semibold">
                ${initials}
              </div>
              <div class="d-flex flex-column">
                <a href="${profileUrl}" class="fw-semibold text-heading text-decoration-none">${name}</a>
                <small class="text-muted">${email}</small>
                ${riderIdLine}
              </div>
            </div>`;
        }
      },
      {
        targets: 2,
        visible: false
      },
      {
        targets: [3, 4, 5],
        orderable: false,
        render: data => {
          if (!Array.isArray(data) || !data.length) return '<span class="text-muted">—</span>';
          return data.map(label => `<span class="badge rounded-pill bg-label-secondary me-1 mb-1">${escapeHtml(label)}</span>`).join('');
        }
      },
      {
        targets: 6,
        orderable: false,
        searchable: false,
        render: (_, __, row) => {
          const hasCredential = !!row?.has_credential;
          const credential = hasCredential
            ? '<span class="badge rounded-pill bg-label-success">Con credencial</span>'
            : '<span class="badge rounded-pill bg-label-secondary">Sin credencial</span>';
          const vehicle = row?.vehicle
            ? `<span class="badge rounded-pill bg-label-info ms-1">${escapeHtml(row.vehicle)}</span>`
            : '';
          return credential + vehicle;
        }
      },
      {
        targets: 7,
        orderable: false,
        searchable: false,
        render: value => value
          ? '<span class="badge rounded-pill bg-label-success">Activo</span>'
          : '<span class="badge rounded-pill bg-label-danger">Inactivo</span>'
      },
      {
        targets: 8,
        orderable: false,
        searchable: false,
        render: (_, __, row) => {
          const id = row?.id;
          if (!id) return '';
          const viewUrl = `${baseProfileUrl}/${id}?from=riders`;
          const editUrl = `${baseProfileUrl}/${id}/edit${profileSuffix}`;
          const nameAttr = escapeHtml(row?.name || 'Sin nombre');
          const emailAttr = escapeHtml(row?.email || '—');
          return `
            <div class="d-flex gap-1">
              <a href="${viewUrl}" class="btn btn-text-secondary btn-icon rounded-pill" title="Ver ficha">
                <i class="icon-base ti tabler-eye"></i>
              </a>
              <a href="${editUrl}" class="btn btn-text-primary btn-icon rounded-pill" title="Editar">
                <i class="icon-base ti tabler-pencil"></i>
              </a>
              <button type="button"
                class="btn btn-text-warning btn-icon rounded-pill js-wallet-open"
                title="Monedero"
                data-wallet-user-id="${id}"
                data-wallet-user-name="${nameAttr}"
                data-wallet-user-email="${emailAttr}">
                <i class="icon-base ti tabler-wallet"></i>
              </button>
            </div>`;
        }
      }
    ],
    order: [[1, 'asc']]
  });

  if (exportSlot && DataTable.Buttons) {
    const buttons = new DataTable.Buttons(dataTable, {
      buttons: [
        {
          extend: 'collection',
          className: 'btn btn-label-secondary dropdown-toggle',
          text: '<span class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-upload"></i><span class="d-none d-sm-inline">Exportar</span></span>',
          autoClose: true,
          buttons: [
            { extend: 'print', className: 'dropdown-item', text: '<i class="ti tabler-printer me-2"></i>Imprimir', exportOptions: { columns: [1,3,4,5,6,7] } },
            { extend: 'csv', className: 'dropdown-item', text: '<i class="ti tabler-file-text me-2"></i>CSV', exportOptions: { columns: [1,3,4,5,6,7] } },
            { extend: 'excel', className: 'dropdown-item', text: '<i class="ti tabler-file-spreadsheet me-2"></i>Excel', exportOptions: { columns: [1,3,4,5,6,7] } },
            { extend: 'pdf', className: 'dropdown-item', text: '<i class="ti tabler-file-description me-2"></i>PDF', exportOptions: { columns: [1,3,4,5,6,7] } },
            { extend: 'copy', className: 'dropdown-item', text: '<i class="ti tabler-copy me-2"></i>Copiar', exportOptions: { columns: [1,3,4,5,6,7] } }
          ]
        }
      ]
    });
    exportSlot.innerHTML = '';
    const container = buttons.container();
    const node = typeof container?.node === 'function'
      ? container.node()
      : (container?.jquery ? container[0] : container);
    if (node instanceof Node) exportSlot.appendChild(node);
  } else if (exportSlot) {
    exportSlot.classList.add('d-none');
  }

  chipGroups.forEach(group => {
    const type = group.dataset.chipGroup;
    updateChipStyles(type);
    group.addEventListener('click', event => {
      const button = event.target.closest('[data-chip-type]');
      if (!button) return;
      state[type] = button.dataset.chipValue ?? '';
      updateChipStyles(type);
      dataTable.ajax.reload(null, false);
    });
  });

  if (searchInput) {
    searchInput.value = state.search;
    searchInput.addEventListener('input', () => {
      clearTimeout(searchInput._debounce);
      searchInput._debounce = setTimeout(() => {
        state.search = searchInput.value.trim();
        dataTable.ajax.reload(null, false);
      }, 250);
    });
  }

  filtersOffcanvas?.addEventListener('show.bs.offcanvas', bootstrapFilters);

  selectCompany?.addEventListener('change', async () => {
    await loadCities('');
    await loadZones('');
    await loadVehicles('');
  });

  selectCity?.addEventListener('change', async () => {
    await loadZones('');
  });

  applyFiltersBtn?.addEventListener('click', () => {
    state.company = selectCompany?.value || '';
    state.city = selectCity?.value || '';
    state.zone = selectZone?.value || '';
    state.vehicle = selectVehicle?.value || '';
    dataTable.ajax.reload(null, false);
    bootstrap.Offcanvas.getInstance(filtersOffcanvas)?.hide();
  });

  clearFiltersBtn?.addEventListener('click', async () => {
    state.company = '';
    state.city = '';
    state.zone = '';
    state.vehicle = '';
    await bootstrapFilters();
    updateChipStyles('status');
    updateChipStyles('credential');
    dataTable.ajax.reload(null, false);
  });
});
</script>
@endsection

@section('content')
<style>
  .riders-metric-card .avatar {
    width: 44px;
    height: 44px;
  }
  .filter-chip-group .btn {
    min-width: 80px;
  }
  .avatar-sm {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .wallet-offcanvas .wallet-summary-card {
    background: linear-gradient(135deg, #1f497d, #3f6cb3);
    color: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 18px 40px rgba(31, 73, 125, 0.25);
    margin-bottom: 1.5rem;
  }
  .wallet-offcanvas .wallet-summary-card h3 {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 0.75rem;
  }
  .wallet-offcanvas .wallet-summary-card .wallet-balance {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  .wallet-offcanvas .wallet-summary-card small {
    opacity: 0.85;
  }
  .wallet-offcanvas .wallet-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }
  .wallet-offcanvas .wallet-meta .badge {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .wallet-offcanvas .wallet-history {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .wallet-offcanvas .wallet-history__item {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(105, 108, 255, 0.08);
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .wallet-offcanvas .wallet-history__item:last-child {
    border-bottom: none;
  }
  .wallet-offcanvas .wallet-history__meta {
    flex: 1;
  }
  .wallet-offcanvas .wallet-history__title {
    font-weight: 600;
    color: #233044;
    margin-bottom: 0.25rem;
  }
  .wallet-offcanvas .wallet-history__date {
    font-size: 0.8rem;
    color: #656f7d;
  }
  .wallet-offcanvas .wallet-history__amount {
    min-width: 120px;
    text-align: right;
    font-weight: 600;
  }
  .wallet-offcanvas .wallet-history__amount.credit {
    color: #188351;
  }
  .wallet-offcanvas .wallet-history__amount.debit {
    color: #c9342f;
  }
  .wallet-offcanvas .wallet-empty,
  .wallet-offcanvas .wallet-loading,
  .wallet-offcanvas .wallet-error,
  .wallet-offcanvas .wallet-success {
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
  }
  .wallet-offcanvas .wallet-empty {
    background: rgba(105, 108, 255, 0.08);
    color: #4f566b;
  }
  .wallet-offcanvas .wallet-loading {
    background: rgba(105, 108, 255, 0.08);
    color: #1f497d;
  }
  .wallet-offcanvas .wallet-error {
    background: rgba(217, 48, 37, 0.12);
    color: #c9342f;
  }
  .wallet-offcanvas .wallet-success {
    background: rgba(34, 197, 94, 0.12);
    color: #188351;
  }
  .wallet-offcanvas .wallet-form .form-label {
    font-weight: 600;
    color: #233044;
  }
  .wallet-offcanvas .wallet-form .form-text {
    font-size: 0.75rem;
  }
  .wallet-offcanvas .wallet-form button[type="submit"] {
    min-width: 140px;
  }
</style>

<div class="row g-4 mb-5">
  <div class="col-sm-6 col-xl-3">
    <div class="card h-100 riders-metric-card border-0 shadow-sm">
      <div class="card-body d-flex align-items-center justify-content-between">
        <div>
          <span class="text-muted small text-uppercase fw-semibold">Riders totales</span>
          <h4 class="mb-0 mt-1" id="kpi-riders-total">--</h4>
          <small class="text-muted">Personas activas en la flota</small>
        </div>
        <span class="avatar bg-label-primary text-primary"><i class="icon-base ti tabler-users"></i></span>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card h-100 riders-metric-card border-0 shadow-sm">
      <div class="card-body d-flex align-items-center justify-content-between">
        <div>
          <span class="text-muted small text-uppercase fw-semibold">Activos</span>
          <h4 class="mb-0 mt-1" id="kpi-riders-active">--</h4>
          <small class="text-muted">Disponibles para operar</small>
        </div>
        <span class="avatar bg-label-success text-success"><i class="icon-base ti tabler-user-check"></i></span>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card h-100 riders-metric-card border-0 shadow-sm">
      <div class="card-body d-flex align-items-center justify-content-between">
        <div>
          <span class="text-muted small text-uppercase fw-semibold">Inactivos</span>
          <h4 class="mb-0 mt-1" id="kpi-riders-inactive">--</h4>
          <small class="text-muted">En revisión o baja</small>
        </div>
        <span class="avatar bg-label-warning text-warning"><i class="icon-base ti tabler-user-exclamation"></i></span>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card h-100 riders-metric-card border-0 shadow-sm">
      <div class="card-body d-flex align-items-center justify-content-between">
        <div>
          <span class="text-muted small text-uppercase fw-semibold">Credenciales</span>
          <h4 class="mb-0 mt-1" id="kpi-riders-cred">--</h4>
          <small class="text-muted">Riders con credencial asignada</small>
        </div>
        <span class="avatar bg-label-info text-info"><i class="icon-base ti tabler-id"></i></span>
      </div>
    </div>
  </div>
</div>

<div class="card shadow-sm mb-4">
  <div class="card-header border-bottom-0 pb-0">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
      <div>
        <h5 class="mb-1">Listado de riders</h5>
        <p class="text-muted mb-0">Supervisa tu flota y accede al detalle de cada rider con un clic.</p>
      </div>
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <a href="{{ route('admin.users.create', ['from' => 'riders', 'role' => 'rider']) }}" class="btn btn-primary">
          <i class="icon-base ti tabler-user-plus me-1"></i>
          Nuevo rider
        </a>
        <div id="riders-export-slot"></div>
        <button type="button" class="btn btn-outline-secondary" data-bs-toggle="offcanvas" data-bs-target="#ridersFiltersOffcanvas">
          <i class="icon-base ti tabler-adjustments-horizontal me-1"></i>
          Filtros avanzados
        </button>
      </div>
    </div>
  </div>
  <div class="card-body pt-3">
    <div class="row g-3 align-items-center mb-4">
      <div class="col-lg-5">
        <div class="input-group input-group-merge">
          <span class="input-group-text"><i class="ti tabler-search"></i></span>
          <input id="filter_search" type="search" class="form-control" placeholder="Buscar por nombre o email">
        </div>
      </div>
      <div class="col-lg-7">
        <div class="row g-3 align-items-center">
          <div class="col-sm-6">
            <div class="filter-chip-group d-flex flex-wrap gap-2 align-items-center" data-chip-group="status">
              <span class="text-muted small fw-semibold text-uppercase">Estado</span>
              <button type="button" class="btn btn-sm btn-primary text-white" data-chip-type="status" data-chip-value="">Todos</button>
              <button type="button" class="btn btn-sm btn-outline-secondary" data-chip-type="status" data-chip-value="1">Activos</button>
              <button type="button" class="btn btn-sm btn-outline-secondary" data-chip-type="status" data-chip-value="0">Inactivos</button>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="filter-chip-group d-flex flex-wrap gap-2 align-items-center" data-chip-group="credential">
              <span class="text-muted small fw-semibold text-uppercase">Credencial</span>
              <button type="button" class="btn btn-sm btn-primary text-white" data-chip-type="credential" data-chip-value="">Todos</button>
              <button type="button" class="btn btn-sm btn-outline-secondary" data-chip-type="credential" data-chip-value="1">Con</button>
              <button type="button" class="btn btn-sm btn-outline-secondary" data-chip-type="credential" data-chip-value="0">Sin</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card-datatable table-responsive">
      <table class="table dt-riders align-middle">
        <thead class="border-top">
          <tr>
            <th></th>
            <th>Rider</th>
            <th>Email</th>
            <th>Empresas</th>
            <th>Ciudades</th>
            <th>Zonas</th>
            <th>Credencial</th>
            <th>Estado</th>
            <th>Acciones</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

<div class="offcanvas offcanvas-end wallet-offcanvas" tabindex="-1" id="walletOffcanvas" aria-labelledby="walletOffcanvasLabel">
  <div class="offcanvas-header border-bottom">
    <div>
      <h5 id="walletOffcanvasLabel" class="offcanvas-title mb-1">Monedero de <span id="walletUserName">—</span></h5>
      <p class="text-muted mb-0 small">Consulta el historial de movimientos y registra recargas o cargos manuales.</p>
      <p class="text-muted mb-0 small"><span id="walletUserEmail">—</span></p>
    </div>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body p-5">
    <div id="walletLoading" class="wallet-loading">Cargando datos del monedero...</div>
    <div id="walletFeedback" class="wallet-error d-none"></div>

    <div id="walletSummary" class="wallet-summary-card d-none">
      <h3 class="text-uppercase">Saldo actual</h3>
      <div class="wallet-balance"><span id="walletBalance">0,00</span> <span id="walletCurrency">EUR</span></div>
      <small id="walletUpdatedAt">Actualizado justo ahora</small>
      <div class="wallet-meta mt-3">
        <span class="badge bg-label-light" id="walletTransactionsCount">0 movimientos</span>
      </div>
    </div>

    <div id="walletEmpty" class="wallet-empty d-none">
      Aún no hay transacciones registradas en el monedero de este rider.
    </div>

    <ul id="walletHistory" class="wallet-history d-none"></ul>

    <div class="card border shadow-sm wallet-form mt-4">
      <div class="card-body">
        <h6 class="mb-3">Registrar movimiento manual</h6>
        <form id="walletTransactionForm" autocomplete="off">
          @csrf
          <input type="hidden" id="walletUserId" name="user_id" value="">
          <div class="row g-3">
            <div class="col-md-4">
              <label for="walletAmount" class="form-label">Importe</label>
              <div class="input-group">
                <span class="input-group-text"><i class="ti tabler-currency-euro"></i></span>
                <input type="number" min="0.01" step="0.01" class="form-control" id="walletAmount" name="amount" placeholder="0,00" required>
              </div>
              <div class="form-text">Indica el importe en euros.</div>
            </div>
            <div class="col-md-4">
              <label for="walletType" class="form-label">Tipo de movimiento</label>
              <select class="form-select" id="walletType" name="type" required>
                <option value="credit" selected>Recarga (crédito)</option>
                <option value="debit">Cargo (débito)</option>
              </select>
            </div>
            <div class="col-md-4">
              <label for="walletReference" class="form-label">Referencia</label>
              <input type="text" class="form-control" id="walletReference" name="reference" maxlength="120" placeholder="Ej: Ajuste manual">
            </div>
            <div class="col-12">
              <label for="walletDescription" class="form-label">Descripción</label>
              <textarea class="form-control" id="walletDescription" name="description" rows="2" maxlength="255" placeholder="Motivo del movimiento"></textarea>
            </div>
          </div>
          <div class="d-flex justify-content-end align-items-center gap-3 mt-4">
            <button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancelar</button>
            <button type="submit" class="btn btn-primary" id="walletSubmitBtn">
              <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
              <span class="wallet-submit-label">Guardar movimiento</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="ridersFiltersOffcanvas" aria-labelledby="ridersFiltersOffcanvasLabel">
  <div class="offcanvas-header border-bottom">
    <h5 id="ridersFiltersOffcanvasLabel" class="offcanvas-title">Filtros avanzados</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body p-5">
    <p class="text-muted small mb-4">Refina la búsqueda combinando empresa, ciudad, zona y vehículo asignado.</p>
    <div class="mb-4">
      <label class="form-label">Empresa</label>
      <select id="filter_company" class="form-select">
        <option value="">Todas</option>
      </select>
    </div>
    <div class="mb-4">
      <label class="form-label">Ciudad</label>
      <select id="filter_city" class="form-select">
        <option value="">Todas</option>
      </select>
    </div>
    <div class="mb-4">
      <label class="form-label">Zona</label>
      <select id="filter_zone" class="form-select">
        <option value="">Todas</option>
      </select>
    </div>
    <div class="mb-4">
      <label class="form-label">Vehículo asignado</label>
      <select id="filter_vehicle" class="form-select">
        <option value="">Todos</option>
      </select>
    </div>
    <div class="d-flex justify-content-between align-items-center mt-4">
      <button type="button" class="btn btn-label-secondary" id="clear-riders-filters">Limpiar</button>
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Cerrar</button>
        <button type="button" class="btn btn-primary" id="apply-riders-filters">Aplicar filtros</button>
      </div>
    </div>
  </div>
</div>
@endsection