@extends('layouts.app')
@section('title', __(auth()->user()->isEmployee() ? 'Operations overview' : 'Admin overview'))
@section('content')
@php
  $isAdmin = auth()->user()->isAdmin();
  $mobileShortcuts = [
    ['label' => __($isAdmin ? 'Accounts' : 'My team'), 'route' => $isAdmin ? 'admin.members.index' : 'team', 'icon' => 'users', 'tone' => 'text-sky-600', 'tile' => 'bg-sky-50'],
    ['label' => __('Network'), 'route' => 'admin.network.index', 'icon' => 'tree', 'tone' => 'text-emerald-600', 'tile' => 'bg-emerald-50'],
    ['label' => __('Sales'), 'route' => 'admin.sales.index', 'icon' => 'receipt', 'tone' => 'text-amber-600', 'tile' => 'bg-amber-50'],
    ['label' => __('Global leaderboard'), 'route' => 'leaderboard', 'icon' => 'chart', 'tone' => 'text-cyan-600', 'tile' => 'bg-cyan-50'],
    ['label' => __('Payments'), 'route' => 'admin.payments.index', 'icon' => 'wallet', 'tone' => 'text-purple-600', 'tile' => 'bg-purple-50'],
    ['label' => __('Withdrawals'), 'route' => 'admin.withdrawals.index', 'icon' => 'transfer', 'tone' => 'text-rose-600', 'tile' => 'bg-rose-50'],
    ['label' => __('Wallet'), 'route' => 'wallet', 'icon' => 'wallet', 'tone' => 'text-teal-600', 'tile' => 'bg-teal-50'],
  ];
  $mobileFeatures = [
    ['label' => __($isAdmin ? 'Accounts' : 'My team'), 'route' => $isAdmin ? 'admin.members.index' : 'team', 'icon' => 'users', 'tone' => 'text-emerald-600'],
    ['label' => __('Network'), 'route' => 'admin.network.index', 'icon' => 'tree', 'tone' => 'text-teal-600'],
    ['label' => __('Sales'), 'route' => 'admin.sales.index', 'icon' => 'receipt', 'tone' => 'text-amber-600'],
    ['label' => __('Global leaderboard'), 'route' => 'leaderboard', 'icon' => 'chart', 'tone' => 'text-cyan-600'],
    ['label' => __('Payment reviews'), 'route' => 'admin.payments.index', 'icon' => 'wallet', 'tone' => 'text-blue-600'],
    ['label' => __('Withdrawal requests'), 'route' => 'admin.withdrawals.index', 'icon' => 'transfer', 'tone' => 'text-cyan-600'],
    ['label' => __('Wallet'), 'route' => 'wallet', 'icon' => 'wallet', 'tone' => 'text-purple-600'],
  ];
  if (! $isAdmin) {
    $mobileShortcuts = array_values(array_filter($mobileShortcuts, fn ($item) => $item['route'] !== 'admin.network.index'));
    $mobileFeatures = array_values(array_filter($mobileFeatures, fn ($item) => $item['route'] !== 'admin.network.index'));
  }
  if (! $isAdmin) {
    $mobileShortcuts = array_merge($mobileShortcuts, [
      ['label' => __('Leads'), 'route' => 'leads.index', 'icon' => 'user', 'tone' => 'text-green-600', 'tile' => 'bg-green-50'],
      ['label' => __('Sales targets'), 'route' => 'targets.index', 'icon' => 'chart', 'tone' => 'text-violet-600', 'tile' => 'bg-violet-50'],
      ['label' => __('Incentives'), 'route' => 'incentives.index', 'icon' => 'sparkles', 'tone' => 'text-pink-600', 'tile' => 'bg-pink-50'],
      ['label' => __('Salary and payroll'), 'route' => 'salary.index', 'icon' => 'transfer', 'tone' => 'text-red-600', 'tile' => 'bg-red-50'],
      ['label' => __('Transfers'), 'route' => 'transfers.index', 'icon' => 'transfer', 'tone' => 'text-orange-600', 'tile' => 'bg-orange-50'],
      ['label' => __('Support'), 'route' => 'support.index', 'icon' => 'user', 'tone' => 'text-yellow-600', 'tile' => 'bg-yellow-50'],
      ['label' => __('Learning room'), 'route' => 'learning.index', 'icon' => 'sparkles', 'tone' => 'text-stone-600', 'tile' => 'bg-stone-50'],
      ['label' => __('Rank guide'), 'route' => 'ranks', 'icon' => 'sparkles', 'tone' => 'text-violet-600', 'tile' => 'bg-violet-50'],
    ]);
    $mobileFeatures = array_merge($mobileFeatures, [
      ['label' => __('Leads'), 'route' => 'leads.index', 'icon' => 'user', 'tone' => 'text-green-600'],
      ['label' => __('Sales targets'), 'route' => 'targets.index', 'icon' => 'chart', 'tone' => 'text-violet-600'],
      ['label' => __('Incentives'), 'route' => 'incentives.index', 'icon' => 'sparkles', 'tone' => 'text-pink-600'],
      ['label' => __('Salary and payroll'), 'route' => 'salary.index', 'icon' => 'transfer', 'tone' => 'text-red-600'],
      ['label' => __('Transfers'), 'route' => 'transfers.index', 'icon' => 'transfer', 'tone' => 'text-orange-600'],
      ['label' => __('Support'), 'route' => 'support.index', 'icon' => 'user', 'tone' => 'text-yellow-600'],
      ['label' => __('Learning room'), 'route' => 'learning.index', 'icon' => 'sparkles', 'tone' => 'text-stone-600'],
      ['label' => __('Rank guide'), 'route' => 'ranks', 'icon' => 'sparkles', 'tone' => 'text-violet-600'],
    ]);
  }
  if ($isAdmin) {
    $mobileShortcuts = array_merge($mobileShortcuts, [
      ['label' => __('Departments'), 'route' => 'admin.departments.index', 'icon' => 'users', 'tone' => 'text-blue-600', 'tile' => 'bg-blue-50'],
      ['label' => __('Ranks'), 'route' => 'admin.ranks.index', 'icon' => 'sparkles', 'tone' => 'text-indigo-600', 'tile' => 'bg-indigo-50'],
      ['label' => __('Rank guide'), 'route' => 'ranks', 'icon' => 'sparkles', 'tone' => 'text-violet-600', 'tile' => 'bg-violet-50'],
      ['label' => __('Bonuses'), 'route' => 'admin.bonuses.index', 'icon' => 'chart', 'tone' => 'text-orange-600', 'tile' => 'bg-orange-50'],
      ['label' => __('Leads'), 'route' => 'leads.index', 'icon' => 'user', 'tone' => 'text-green-600', 'tile' => 'bg-green-50'],
      ['label' => __('Sales targets'), 'route' => 'targets.index', 'icon' => 'chart', 'tone' => 'text-violet-600', 'tile' => 'bg-violet-50'],
      ['label' => __('Incentives'), 'route' => 'admin.incentives.index', 'icon' => 'sparkles', 'tone' => 'text-pink-600', 'tile' => 'bg-pink-50'],
      ['label' => __('Accounting ledger'), 'route' => 'admin.finance.index', 'icon' => 'wallet', 'tone' => 'text-lime-600', 'tile' => 'bg-lime-50'],
      ['label' => __('Salary and payroll'), 'route' => 'salary.index', 'icon' => 'transfer', 'tone' => 'text-red-600', 'tile' => 'bg-red-50'],
      ['label' => __('Transfers'), 'route' => 'transfers.index', 'icon' => 'transfer', 'tone' => 'text-orange-600', 'tile' => 'bg-orange-50'],
      ['label' => __('Learning room'), 'route' => 'admin.learning.index', 'icon' => 'sparkles', 'tone' => 'text-stone-600', 'tile' => 'bg-stone-50'],
      ['label' => __('Support'), 'route' => 'support.index', 'icon' => 'user', 'tone' => 'text-yellow-600', 'tile' => 'bg-yellow-50'],
      ['label' => __('System settings'), 'route' => 'admin.settings.index', 'icon' => 'sparkles', 'tone' => 'text-slate-600', 'tile' => 'bg-slate-100'],
      ['label' => __('System activity'), 'route' => 'admin.activity.index', 'icon' => 'receipt', 'tone' => 'text-slate-600', 'tile' => 'bg-slate-100'],
      ['label' => __('Reports'), 'route' => 'admin.reports', 'icon' => 'chart', 'tone' => 'text-cyan-600', 'tile' => 'bg-cyan-50'],
      ['label' => __('Create account'), 'route' => 'admin.members.create', 'icon' => 'user', 'tone' => 'text-fuchsia-600', 'tile' => 'bg-fuchsia-50'],
    ]);
    $mobileFeatures = array_merge($mobileFeatures, [
      ['label' => __('Departments'), 'route' => 'admin.departments.index', 'icon' => 'users', 'tone' => 'text-blue-600'],
      ['label' => __('Ranks'), 'route' => 'admin.ranks.index', 'icon' => 'sparkles', 'tone' => 'text-indigo-600'],
      ['label' => __('Rank guide'), 'route' => 'ranks', 'icon' => 'sparkles', 'tone' => 'text-violet-600'],
      ['label' => __('Bonuses'), 'route' => 'admin.bonuses.index', 'icon' => 'chart', 'tone' => 'text-orange-600'],
      ['label' => __('Leads'), 'route' => 'leads.index', 'icon' => 'user', 'tone' => 'text-green-600'],
      ['label' => __('Sales targets'), 'route' => 'targets.index', 'icon' => 'chart', 'tone' => 'text-violet-600'],
      ['label' => __('Incentives'), 'route' => 'admin.incentives.index', 'icon' => 'sparkles', 'tone' => 'text-pink-600'],
      ['label' => __('Accounting ledger'), 'route' => 'admin.finance.index', 'icon' => 'wallet', 'tone' => 'text-lime-600'],
      ['label' => __('Salary and payroll'), 'route' => 'salary.index', 'icon' => 'transfer', 'tone' => 'text-red-600'],
      ['label' => __('Transfers'), 'route' => 'transfers.index', 'icon' => 'transfer', 'tone' => 'text-orange-600'],
      ['label' => __('Learning room'), 'route' => 'admin.learning.index', 'icon' => 'sparkles', 'tone' => 'text-stone-600'],
      ['label' => __('Support'), 'route' => 'support.index', 'icon' => 'user', 'tone' => 'text-yellow-600'],
      ['label' => __('System settings'), 'route' => 'admin.settings.index', 'icon' => 'sparkles', 'tone' => 'text-slate-600'],
      ['label' => __('System activity'), 'route' => 'admin.activity.index', 'icon' => 'receipt', 'tone' => 'text-slate-600'],
      ['label' => __('Network reports'), 'route' => 'admin.reports', 'icon' => 'chart', 'tone' => 'text-cyan-600'],
      ['label' => __('Create account'), 'route' => 'admin.members.create', 'icon' => 'user', 'tone' => 'text-fuchsia-600'],
    ]);
  }
  $routeFeatures = [
    'admin.departments.index' => 'departments', 'targets.index' => 'targets', 'leads.index' => 'leads',
    'admin.incentives.index' => 'incentives', 'admin.finance.index' => 'finance', 'salary.index' => 'salary',
    'admin.learning.index' => 'learning', 'learning.index' => 'learning', 'support.index' => 'support',
  ];
  $mobileShortcuts = array_values(array_filter($mobileShortcuts, fn ($item) => ! isset($routeFeatures[$item['route']]) || $featureFlags->get('feature_'.$routeFeatures[$item['route']]) !== '0'));
  $mobileFeatures = array_values(array_filter($mobileFeatures, fn ($item) => ! isset($routeFeatures[$item['route']]) || $featureFlags->get('feature_'.$routeFeatures[$item['route']]) !== '0'));
@endphp
<div class="mobile-home lg:hidden">
  <section class="mobile-member-card">
    <span class="mobile-member-avatar">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</span>
    <div class="min-w-0 flex-1 gap-1">
      @if(! $isAdmin)
      <p class="truncate text-sm font-bold text-slate-900"><span class="text-slate-400">{{ __('Name') }}:</span> {{ auth()->user()->name }}</p>
      <p class="truncate text-xs font-medium text-slate-500"><span class="text-slate-400">{{ __('Employee ID') }}:</span> {{ auth()->user()->member_id }}</p>
      @else
      <p class="truncate text-base font-bold text-slate-900">{{ auth()->user()->name }}</p>
      <p class="mt-1 text-xs text-slate-500">{{ auth()->user()->member_id ?: auth()->user()->email }}</p>
      <p class="mt-1 truncate text-xs font-medium text-slate-500">{{ __('Administrator') }}</p>
      @endif
    </div>
    @if($isAdmin)<span @class(['mobile-member-status', 'mobile-member-status-inactive' => ! auth()->user()->is_active])>{{ auth()->user()->is_active ? __('Active') : __('Inactive') }}</span>@endif
  </section>

  <section class="mobile-shortcut-grid" aria-label="{{ __('Dashboard shortcuts') }}">
    @foreach($mobileShortcuts as $shortcut)
      <a href="{{ route($shortcut['route']) }}" class="mobile-shortcut">
        <span class="mobile-shortcut-icon {{ $shortcut['tile'] }} {{ $shortcut['tone'] }}">
          <x-nav-icon :name="$shortcut['icon']" class="h-6 w-6" />
        </span>
        <span class="mobile-shortcut-label">{{ $shortcut['label'] }}</span>
      </a>
    @endforeach
  </section>

  <section class="mobile-feature-section">
    <h2 class="mobile-feature-heading">{{ __('Explore more features') }}</h2>
    <div class="mobile-feature-grid">
      @foreach($mobileFeatures as $feature)
        <a href="{{ route($feature['route']) }}" class="mobile-feature-link">
          <span class="mobile-feature-icon {{ $feature['tone'] }}">
            <x-nav-icon :name="$feature['icon']" class="h-6 w-6" />
          </span>
          <span class="truncate">{{ $feature['label'] }}</span>
        </a>
      @endforeach
    </div>
  </section>

  @if($isAdmin)
  <section class="mobile-summary-card">
    <div class="grid grid-cols-2 gap-3">
      <div class="mobile-performance-stat">
        <p class="text-xs text-slate-500">{{ __('Total accounts') }}</p>
        <p class="mt-1 text-lg font-extrabold text-slate-900">{{ number_format($stats['members']) }}</p>
      </div>
      <div class="mobile-performance-stat">
        <p class="text-xs text-slate-500">{{ __('Active accounts') }}</p>
        <p class="mt-1 text-lg font-extrabold text-slate-900">{{ number_format($stats['active']) }}</p>
      </div>
      <div class="mobile-performance-stat">
        <p class="text-xs text-slate-500">{{ __('Employees') }}</p>
        <p class="mt-1 text-lg font-extrabold text-slate-900">{{ number_format($stats['employees']) }}</p>
      </div>
      <div class="mobile-performance-stat">
        <p class="text-xs text-slate-500">{{ __('Departments') }}</p>
        <p class="mt-1 text-lg font-extrabold text-slate-900">{{ number_format($stats['departments']) }}</p>
      </div>
      <div class="mobile-performance-stat">
        <p class="text-xs text-slate-500">{{ __('Total sales') }}</p>
        <p class="mt-1 truncate text-lg font-extrabold text-slate-900">৳{{ number_format($stats['sales'], 2) }}</p>
      </div>
      <a href="{{ route('admin.sales.index') }}" class="mobile-performance-stat">
        <p class="text-xs text-slate-500">{{ __('Pending sales') }}</p>
        <p class="mt-1 text-lg font-extrabold text-orange-700">{{ number_format($pendingSales) }}</p>
      </a>
      <div class="mobile-performance-stat col-span-2 flex items-center justify-between gap-3">
        <div>
          <p class="text-xs text-slate-500">{{ __('Commissions') }}</p>
          <p class="mt-1 font-bold text-emerald-700">৳{{ number_format($stats['commissions'], 2) }}</p>
        </div>
        <div class="text-right">
          <p class="text-xs text-slate-500">{{ __('Payment reviews') }} · {{ __('Withdrawal requests') }}</p>
          <p class="mt-1 font-bold text-slate-900">{{ number_format($pendingPayments) }} · {{ number_format($pendingWithdrawals) }}</p>
        </div>
      </div>
    </div>
  </section>
  @else
  @php($targetProgress = $employeeStats['target'] > 0 ? min(100, $employeeStats['monthly_sales'] / $employeeStats['target'] * 100) : 0)
  <section class="employee-stats-panel" aria-label="{{ __('My performance') }}">
    <header class="employee-stats-header">
      <span class="employee-stats-header-icon"><x-nav-icon name="chart" class="h-5 w-5" /></span>
      <div>
        <h2>{{ __('My performance') }}</h2>
        <p>{{ __('A quick look at your personal progress.') }}</p>
      </div>
    </header>
    <div class="employee-stat-grid">
      <article class="employee-stat-tile employee-stat-tile-blue">
        <span class="employee-stat-icon"><x-nav-icon name="users" class="h-5 w-5" /></span>
        <p class="employee-stat-label">{{ __('My leads') }}</p>
        <p class="employee-stat-value">{{ number_format($employeeStats['leads']) }}</p>
      </article>
      <article class="employee-stat-tile employee-stat-tile-violet">
        <span class="employee-stat-icon"><x-nav-icon name="receipt" class="h-5 w-5" /></span>
        <p class="employee-stat-label">{{ __('My total sales') }}</p>
        <p class="employee-stat-value">৳{{ number_format($employeeStats['sales'], 2) }}</p>
      </article>
      <article class="employee-stat-tile employee-stat-tile-cyan">
        <span class="employee-stat-icon"><x-nav-icon name="chart" class="h-5 w-5" /></span>
        <p class="employee-stat-label">{{ __('This month sales') }}</p>
        <p class="employee-stat-value">৳{{ number_format($employeeStats['monthly_sales'], 2) }}</p>
      </article>
      <article class="employee-stat-tile employee-stat-tile-green">
        <span class="employee-stat-icon"><x-nav-icon name="wallet" class="h-5 w-5" /></span>
        <p class="employee-stat-label">{{ __('My total earnings') }}</p>
        <p class="employee-stat-value">৳{{ number_format($employeeStats['earnings'], 2) }}</p>
      </article>
      <article class="employee-stat-tile employee-stat-tile-emerald">
        <span class="employee-stat-icon"><x-nav-icon name="wallet" class="h-5 w-5" /></span>
        <p class="employee-stat-label">{{ __('This month earnings') }}</p>
        <p class="employee-stat-value">৳{{ number_format($employeeStats['monthly_earnings'], 2) }}</p>
      </article>
      <article class="employee-stat-tile employee-stat-tile-orange">
        <span class="employee-stat-icon"><x-nav-icon name="sparkles" class="h-5 w-5" /></span>
        <p class="employee-stat-label">{{ __('My performance rank') }}</p>
        <p class="employee-stat-value">#{{ number_format($employeeStats['rank']) }} <span class="employee-stat-total">/ {{ number_format($employeeStats['employees']) }}</span></p>
      </article>
      <div class="employee-target-tile">
        <div class="employee-target-heading">
          <span class="employee-stat-icon"><x-nav-icon name="chart" class="h-5 w-5" /></span>
          <div class="min-w-0 flex-1">
            <p class="employee-stat-label">{{ __('My monthly target') }}</p>
            <p class="employee-stat-value">৳{{ number_format($employeeStats['target'], 2) }}</p>
          </div>
          <span class="employee-target-percent">{{ $employeeStats['target'] > 0 ? number_format($targetProgress, 1).'%' : __('Not set') }}</span>
        </div>
        <div class="employee-target-track" role="progressbar" aria-label="{{ __('My monthly target') }}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ number_format($targetProgress, 1, '.', '') }}">
          <span style="width: {{ $targetProgress }}%"></span>
        </div>
        <p class="employee-target-caption">৳{{ number_format($employeeStats['monthly_sales'], 2) }} <span>/</span> ৳{{ number_format($employeeStats['target'], 2) }}</p>
      </div>
    </div>
  </section>
  @endif

  @if($isAdmin)
  <section class="mobile-performance-card">
    <div class="flex items-center justify-between gap-3">
      <div>
        <h2 class="text-sm font-bold text-slate-900">{{ __('Needs your attention') }}</h2>
        <p class="mt-1 text-xs text-slate-500">{{ __('Review pending activity from one place.') }}</p>
      </div>
      <x-nav-icon name="sparkles" class="h-5 w-5 text-rose-500" />
    </div>
    <div class="mt-3 grid grid-cols-2 gap-3">
      <a href="{{ route('admin.payments.index') }}" class="mobile-performance-stat">
        <p class="text-xs text-slate-500">{{ __('Payment reviews') }}</p>
        <p class="mt-1 font-bold text-slate-900">{{ number_format($pendingPayments) }}</p>
      </a>
      <a href="{{ route('admin.withdrawals.index') }}" class="mobile-performance-stat">
        <p class="text-xs text-slate-500">{{ __('Withdrawal requests') }}</p>
        <p class="mt-1 font-bold text-slate-900">{{ number_format($pendingWithdrawals) }}</p>
      </a>
    </div>
  </section>
  @endif

  @if($isAdmin)
  <section class="mobile-performance-card">
    <div class="flex items-center justify-between gap-3">
      <div>
        <h2 class="text-sm font-bold text-slate-900">{{ __('Recently joined') }}</h2>
        <p class="mt-1 text-xs text-slate-500">{{ __('Latest member and employee accounts') }}</p>
      </div>
      <a href="{{ route('admin.members.index') }}" class="text-xs font-bold text-rose-600">{{ __('All accounts') }} →</a>
    </div>
    <div class="mt-3 divide-y divide-slate-100">
      @forelse($latestMembers as $member)
        <div class="flex items-center gap-3 py-3 first:pt-0 last:pb-0">
          <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-rose-50 text-sm font-extrabold text-rose-700">{{ strtoupper(substr($member->name, 0, 1)) }}</span>
          <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-bold text-slate-800">{{ $member->name }}</p>
            <p class="mt-1 truncate text-xs text-slate-400">{{ $member->member_id ?: '—' }}</p>
          </div>
          <span class="rounded-full bg-slate-100 px-2 py-1 text-[10px] font-bold text-slate-600">{{ __($member->isEmployee() ? 'Employee' : 'Team Leader') }}</span>
        </div>
      @empty
        <p class="py-5 text-center text-sm text-slate-400">{{ __('No accounts have been created yet.') }}</p>
      @endforelse
    </div>
  </section>
  @endif
</div>

<div class="desktop-dashboard hidden lg:block">
<section class="mb-7 flex flex-wrap items-end justify-between gap-4">
  <div>
    <p class="text-sm font-semibold text-blue-700">{{ now()->format('l, F j, Y') }}</p>
    <h2 class="mt-1 text-2xl font-bold tracking-tight text-slate-950 sm:text-3xl">{{ __(auth()->user()->isEmployee() ? 'Operations at a glance' : 'Welcome to your control center') }}</h2>
    <p class="mt-2 text-sm text-slate-500">{{ $isAdmin ? __('Monitor accounts, payment reviews and withdrawal requests.') : __('Your assigned leads, sales, earnings and target progress.') }}</p>
  </div>
  @if(auth()->user()->isAdmin())
    <a href="{{ route('admin.members.create') }}" class="rounded-xl bg-blue-900 px-4 py-3 text-sm font-bold text-white transition hover:bg-blue-800">+ {{ __('Create account') }}</a>
  @endif
</section>

@if($isAdmin)
<section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-6">
  <div class="metric-card"><div class="flex items-center justify-between"><p class="text-sm font-medium text-slate-500">{{ __('Total accounts') }}</p><span class="rounded-xl bg-blue-50 p-2 text-blue-700"><x-nav-icon name="users" class="h-5 w-5" /></span></div><p class="mt-4 text-3xl font-extrabold text-slate-950">{{ number_format($stats['members']) }}</p><p class="mt-2 text-xs text-slate-400">{{ number_format($stats['employees']) }} {{ __('employees') }}</p></div>
  <div class="metric-card"><div class="flex items-center justify-between"><p class="text-sm font-medium text-slate-500">{{ __('Active accounts') }}</p><span class="rounded-xl bg-emerald-50 p-2 text-emerald-700"><x-nav-icon name="user" class="h-5 w-5" /></span></div><p class="mt-4 text-3xl font-extrabold text-slate-950">{{ number_format($stats['active']) }}</p><p class="mt-2 text-xs text-slate-400">{{ __('Members and employees') }}</p></div>
  <div class="metric-card"><div class="flex items-center justify-between"><p class="text-sm font-medium text-slate-500">{{ __('Total sales') }}</p><span class="rounded-xl bg-violet-50 p-2 text-violet-700"><x-nav-icon name="receipt" class="h-5 w-5" /></span></div><p class="mt-4 text-3xl font-extrabold text-slate-950">৳{{ number_format($stats['sales'], 2) }}</p><p class="mt-2 text-xs text-slate-400">{{ __('Recorded sales volume') }}</p></div>
  <div class="metric-card"><div class="flex items-center justify-between"><p class="text-sm font-medium text-slate-500">{{ __('Commissions') }}</p><span class="rounded-xl bg-amber-50 p-2 text-amber-700"><x-nav-icon name="chart" class="h-5 w-5" /></span></div><p class="mt-4 text-3xl font-extrabold text-slate-950">৳{{ number_format($stats['commissions'], 2) }}</p><p class="mt-2 text-xs text-slate-400">{{ __('Recorded commission total') }}</p></div>
  <a href="{{ route('admin.departments.index') }}" class="metric-card transition hover:-translate-y-0.5"><div class="flex items-center justify-between"><p class="text-sm font-medium text-slate-500">{{ __('Departments') }}</p><span class="rounded-xl bg-sky-50 p-2 text-sky-700"><x-nav-icon name="users" class="h-5 w-5" /></span></div><p class="mt-4 text-3xl font-extrabold text-slate-950">{{ number_format($stats['departments']) }}</p><p class="mt-2 text-xs text-slate-400">{{ number_format($stats['active_departments']) }} {{ __('Active') }}</p></a>
  <a href="{{ route('admin.sales.index') }}" class="metric-card transition hover:-translate-y-0.5"><div class="flex items-center justify-between"><p class="text-sm font-medium text-slate-500">{{ __('Pending sales') }}</p><span class="rounded-xl bg-orange-50 p-2 text-orange-700"><x-nav-icon name="receipt" class="h-5 w-5" /></span></div><p class="mt-4 text-3xl font-extrabold text-slate-950">{{ number_format($pendingSales) }}</p><p class="mt-2 text-xs text-slate-400">{{ __('Awaiting approval') }}</p></a>
</section>
@else
<section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
  <div class="metric-card"><div class="flex items-center justify-between"><p class="text-sm font-medium text-slate-500">{{ __('My leads') }}</p><span class="rounded-xl bg-blue-50 p-2 text-blue-700"><x-nav-icon name="users" class="h-5 w-5" /></span></div><p class="mt-4 text-3xl font-extrabold text-slate-950">{{ number_format($employeeStats['leads']) }}</p></div>
  <div class="metric-card"><div class="flex items-center justify-between"><p class="text-sm font-medium text-slate-500">{{ __('My total sales') }}</p><span class="rounded-xl bg-violet-50 p-2 text-violet-700"><x-nav-icon name="receipt" class="h-5 w-5" /></span></div><p class="mt-4 text-3xl font-extrabold text-slate-950">৳{{ number_format($employeeStats['sales'], 2) }}</p></div>
  <div class="metric-card"><div class="flex items-center justify-between"><p class="text-sm font-medium text-slate-500">{{ __('My total earnings') }}</p><span class="rounded-xl bg-emerald-50 p-2 text-emerald-700"><x-nav-icon name="wallet" class="h-5 w-5" /></span></div><p class="mt-4 text-3xl font-extrabold text-slate-950">৳{{ number_format($employeeStats['earnings'], 2) }}</p></div>
  <div class="metric-card"><div class="flex items-center justify-between"><p class="text-sm font-medium text-slate-500">{{ __('My performance rank') }}</p><span class="rounded-xl bg-orange-50 p-2 text-orange-700"><x-nav-icon name="chart" class="h-5 w-5" /></span></div><p class="mt-4 text-3xl font-extrabold text-slate-950">#{{ number_format($employeeStats['rank']) }} <span class="text-sm font-semibold text-slate-400">/ {{ number_format($employeeStats['employees']) }}</span></p></div>
</section>
@endif

<section class="mt-5 grid gap-5 xl:grid-cols-[1.15fr_.85fr]">
  @if($isAdmin)
  <div class="panel-card overflow-hidden">
    <div class="border-b border-slate-100 px-5 py-5 sm:px-6"><h2 class="font-bold text-slate-900">{{ __('Needs your attention') }}</h2><p class="mt-1 text-xs text-slate-400">{{ __('Review pending activity from one place.') }}</p></div>
    <div class="grid gap-4 p-5 sm:grid-cols-2 sm:p-6">
      <a href="{{ route('admin.payments.index') }}" class="rounded-2xl border border-slate-100 bg-slate-50 p-5 transition hover:border-blue-200 hover:bg-blue-50/60">
        <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-white text-blue-700 shadow-sm"><x-nav-icon name="receipt" class="h-5 w-5" /></span>
        <p class="mt-4 text-2xl font-extrabold text-slate-900">{{ number_format($pendingPayments) }}</p>
        <p class="mt-1 text-sm font-bold text-slate-700">{{ __('Payment reviews') }}</p>
        <p class="mt-2 text-xs text-slate-400">{{ __('Pending submissions') }}</p>
      </a>
      <a href="{{ route('admin.withdrawals.index') }}" class="rounded-2xl border border-slate-100 bg-slate-50 p-5 transition hover:border-violet-200 hover:bg-violet-50/60">
        <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-white text-violet-700 shadow-sm"><x-nav-icon name="transfer" class="h-5 w-5" /></span>
        <p class="mt-4 text-2xl font-extrabold text-slate-900">{{ number_format($pendingWithdrawals) }}</p>
        <p class="mt-1 text-sm font-bold text-slate-700">{{ __('Withdrawal requests') }}</p>
        <p class="mt-2 text-xs text-slate-400">{{ __('Waiting for review') }}</p>
      </a>
    </div>
  </div>
  <div class="panel-card overflow-hidden">
    <div class="flex items-center justify-between border-b border-slate-100 px-5 py-5 sm:px-6"><div><h2 class="font-bold text-slate-900">{{ __('Recently joined') }}</h2><p class="mt-1 text-xs text-slate-400">{{ __('Latest member and employee accounts') }}</p></div><a href="{{ route('admin.members.index') }}" class="text-sm font-bold text-blue-700">{{ __('All accounts') }}</a></div>
    @forelse($latestMembers as $member)
      <div class="flex items-center gap-3 border-b border-slate-100 px-5 py-4 last:border-0 sm:px-6">
        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-50 text-sm font-extrabold text-blue-800">{{ strtoupper(substr($member->name, 0, 1)) }}</span>
        <div class="min-w-0 flex-1"><p class="truncate text-sm font-bold text-slate-800">{{ $member->name }}</p><p class="mt-1 truncate text-xs text-slate-400">{{ $member->member_id ?: $member->email }}</p></div>
        <span class="rounded-full px-2.5 py-1 text-[10px] font-bold {{ $member->isEmployee() ? 'bg-violet-50 text-violet-700' : 'bg-blue-50 text-blue-700' }}">{{ __($member->isEmployee() ? 'Employee' : 'Team Leader') }}</span>
      </div>
    @empty
      <p class="px-6 py-10 text-center text-sm text-slate-400">{{ __('No accounts have been created yet.') }}</p>
    @endforelse
  </div>
  @endif
</section>

<section class="mt-5 grid gap-4 sm:grid-cols-2">
  @if(auth()->user()->isAdmin())
    <a href="{{ route('admin.members.index') }}" class="panel-card flex items-center justify-between gap-4 p-5 transition hover:shadow-lg"><span><span class="block font-bold text-slate-900">{{ __('Accounts') }}</span><span class="mt-1 block text-sm text-slate-500">{{ __('Review member and employee access') }}</span></span><span class="text-xl text-blue-700">→</span></a>
    <a href="{{ route('reports') }}" class="panel-card flex items-center justify-between gap-4 p-5 transition hover:shadow-lg"><span><span class="block font-bold text-slate-900">{{ __('Network reports') }}</span><span class="mt-1 block text-sm text-slate-500">{{ __('See recorded business totals') }}</span></span><span class="text-xl text-blue-700">→</span></a>
  @endif
</section>
</div>
@endsection