@extends('layouts.app')
@section('title','Dashboard')
@section('content')
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="p-4 bg-white rounded shadow">
    <div class="text-sm text-gray-500">Wallet</div>
    <div class="text-2xl font-bold">N${{ number_format($user->wallet,2) }}</div>
  </div>
  <div class="p-4 bg-white rounded shadow">
    <div class="text-sm text-gray-500">Referrals</div>
    <div class="text-2xl font-bold">{{ $user->referrals()->count() }}</div>
  </div>
  <div class="p-4 bg-white rounded shadow">
    <div class="text-sm text-gray-500">Placement</div>
    <div class="text-2xl font-bold">#{{ $user->placement_id ?? '—' }}</div>
  </div>
</div>

<div class="mt-6 bg-white p-4 rounded shadow">
  <h3 class="font-semibold mb-3">Stage Progress</h3>
  <div class="space-y-3">
    @foreach($stages as $stage)
      @php $sp = $progress->get($stage->id); $pairs = $sp ? $sp->pairs_completed : 0; @endphp
      <div>
        <div class="flex justify-between">
          <div>Stage {{ $stage->stage_number }} (need {{ $stage->pairs_required }} pairs)</div>
          <div class="font-medium">{{ $pairs }} pairs</div>
        </div>
        <div class="w-full bg-gray-200 rounded h-3 mt-2">
          <div class="bg-green-500 h-3 rounded" style="width: {{ min(100, intdiv($pairs * 100, max(1,$stage->pairs_required))) }}%"></div>
        </div>
      </div>
    @endforeach
  </div>
</div>
@endsection