@extends('layouts.admin')
@section('content')
@php use App\Support\Ui; @endphp
<div class="hero">
  <div class="hero-left">
    <div class="eyebrow"><span class="live-dot"></span> MONTHLY RECURRING REVENUE</div>
    <div class="hero-metric" id="heroMRR">$0<span class="unit">USD / mo</span></div>
    <div class="hero-label">Across subscriptions, e-commerce, adverts &amp; course fees</div>
    <div class="hero-delta">{!! Ui::icon($mom >= 0 ? 'arrowUp' : 'arrowDown') !!} {{ sprintf('%+.1f%%', $mom) }} month-on-month</div>
  </div>
  <div class="hero-right">
    <div class="hero-stat-row">
      <div class="hero-stat"><div class="v" id="statEngineers">0</div><div class="l">Verified engineers &amp; technicians</div></div>
      <div class="hero-stat"><div class="v" id="statCountries">0</div><div class="l">Countries live</div></div>
      <div class="hero-stat"><div class="v" id="statJobs">0</div><div class="l">Jobs matched this month</div></div>
      <div class="hero-stat"><div class="v" id="statUptime">0%</div><div class="l">Platform uptime (90 days)</div></div>
    </div>
  </div>
</div>

<div class="grid g-kpi" style="margin-bottom:20px;">
  @foreach($kpis as $k)@include('admin.partials.kpi', ['k' => $k])@endforeach
</div>

<div class="grid g-2-1" style="margin-bottom:20px;align-items:stretch;">
  <div class="card card-pad">
    <div class="chart-head">
      <div><div class="section-title">Revenue growth</div><div class="section-sub" style="margin-bottom:0;">Last 12 months, all revenue streams combined</div></div>
      <div class="chart-tabs"><button class="chart-tab active" data-range="12M">12M</button><button class="chart-tab" data-range="6M">6M</button><button class="chart-tab" data-range="30D">30D</button></div>
    </div>
    <svg id="revenueChart" style="width:100%;height:220px;display:block;"></svg>
    <div class="legend" style="margin-top:10px;"><div class="legend-item"><span class="legend-dot" style="background:#0073CF"></span>Total monthly revenue (USD)</div></div>
  </div>
  <div class="card card-pad">
    <div class="section-title">Platform module map</div>
    <div class="section-sub">Live status across all 22 modules — click any node</div>
    <div class="ring-wrap"><svg id="moduleRing" style="width:100%;max-width:280px;height:auto;"></svg></div>
    <div class="legend" style="justify-content:center;margin-top:4px;">
      <div class="legend-item"><span class="legend-dot" style="background:#18A870;border-radius:50%;"></span>Live</div>
      <div class="legend-item"><span class="legend-dot" style="background:#F5A623;border-radius:50%;"></span>Beta</div>
      <div class="legend-item"><span class="legend-dot" style="background:#8695AA;border-radius:50%;"></span>Planned</div>
    </div>
  </div>
</div>

<div class="grid g-2-1" style="align-items:stretch;">
  <div class="card">
    <div class="card-pad" style="padding-bottom:0;">
      <div class="card-head">
        <div><div class="section-title">Recent transactions</div><div class="section-sub" style="margin-bottom:0;">Payments, subscriptions &amp; orders across the platform</div></div>
        <a class="btn btn-ghost btn-sm" href="{{ route('admin.module.export', 'payments') }}">{!! Ui::icon('download') !!} Export</a>
      </div>
    </div>
    <div class="table-scroll">
      <table>
        <thead><tr><th>User</th><th>Detail</th><th>Amount</th><th>Status</th><th>Time</th></tr></thead>
        <tbody>
        @forelse($transactions as $t)
          @php $name = $t->payer_name ?: 'Guest'; [$c1,$c2] = Ui::colors($name); @endphp
          <tr>
            <td>{!! Ui::person($name, $t->payer_role ?: strtoupper($t->gateway), $c1, $c2) !!}</td>
            <td>{{ ucfirst($t->type) }} · {{ $t->description ?: $t->reference }}</td>
            <td class="mono cell-main">{{ Ui::money($t->amount, $t->currency) }}</td>
            <td>{!! Ui::status($t->status) !!}</td>
            <td class="cell-sub">{{ Ui::ago($t->created_at) }}</td>
          </tr>
        @empty
          <tr><td colspan="5" class="empty">No transactions yet. Payments will appear here as soon as the first M-PESA or card payment completes.</td></tr>
        @endforelse
        </tbody>
      </table>
    </div>
    <div style="height:6px;"></div>
  </div>

  <div class="card card-pad">
    <div class="card-head" style="margin-bottom:12px;">
      <div class="section-title" style="margin-bottom:0;">Verification queue</div>
      <span class="badge amber">{{ number_format($queueCount) }} pending</span>
    </div>
    @forelse($verificationQueue as $v)
      <div style="display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft);">
        <div class="avatar-sm" style="background:linear-gradient(135deg,#2E86D6,#00366B);">{{ collect(explode(' ', $v->applicant_name ?: 'A'))->map(fn($w)=>mb_strtoupper(mb_substr($w,0,1)))->take(2)->implode('') }}</div>
        <div style="flex:1;min-width:0;">
          <div class="cell-main" style="font-size:13px;">{{ $v->applicant_name ?: 'Applicant' }}</div>
          <div class="cell-sub">{{ $v->discipline_label ?: 'Professional' }} · {{ $v->registering_body }} · {{ $v->registering_body === 'ERB' ? 'Tanzania' : 'Kenya' }}</div>
        </div>
        {!! Ui::priority($v->priority) !!}
      </div>
    @empty
      <div class="empty">The verification queue is clear.</div>
    @endforelse
    <a class="btn btn-ghost btn-sm" href="{{ route('admin.verification') }}" style="width:100%;justify-content:center;margin-top:14px;">Review all submissions</a>
  </div>
</div>

<div class="grid g-1-1" style="margin-top:20px;">
  <div class="card card-pad">
    <div class="section-title">Regional expansion</div>
    <div class="section-sub">Registered engineers &amp; technicians by city</div>
    <svg id="regionChart" style="width:100%;height:170px;display:block;"></svg>
  </div>
  <div class="card card-pad">
    <div class="section-title">Module adoption vs. plan</div>
    <div class="section-sub">Share of the 22-module roadmap now live</div>
    @foreach($adoption as $a)
    <div style="margin-bottom:14px;">
      <div style="display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px;"><span style="color:var(--text-2);font-weight:500;">{{ $a['label'] }}</span><span class="mono" style="color:var(--text-1);font-weight:600;">{{ $a['pct'] }}%</span></div>
      <div class="bar-track"><div class="bar-fill" style="width:{{ $a['pct'] }}%;"></div></div>
    </div>
    @endforeach
    <div style="margin-top:6px;font-size:12px;color:var(--text-3);">{{ $live }} of 22 modules live · {{ $beta }} in beta · {{ $planned }} planned for next release</div>
  </div>
</div>
@endsection