@php
  $badgeClass = match ($p->status) {
      'On Track' => 'g',
      'At Risk' => 'r',
      'Completed' => 's',
      'On Hold' => 'v',
      default => 'a',
  };
  $barClass = match ($p->status) {
      'At Risk' => 'bg-red-400',
      'Completed' => 'bg-slate-400',
      'On Hold' => 'bg-violet-400',
      default => 'bg-emerald-500',
  };
  $inc = (float) ($p->agg_income ?? 0);
  $exp = (float) ($p->agg_expense ?? 0);
  $pl = $inc - $exp;
  $margin = $inc > 0 ? round(($pl / $inc) * 100, 1) : 0;
  $budgetUsed = (float) ($p->budget ?? 0) > 0 ? round(($exp / (float) $p->budget) * 100, 1) : 0;
  $tc = ['bg-blue-100 text-blue-700','bg-purple-100 text-purple-700','bg-amber-100 text-amber-700','bg-rose-100 text-rose-700','bg-teal-100 text-teal-700','bg-pink-100 text-pink-700'];
@endphp
<a class="pcard p-5 no-underline" href="{{ route('projects.show', $p) }}">
  <div class="flex items-center justify-between mb-3">
    <span class="badge {{ $badgeClass }}">{{ $p->status }}</span>
    <span class="text-[11px] text-slate-400"><i class="fa-regular fa-calendar mr-1"></i>{{ $p->due_date?->format('M Y') ?? 'TBD' }}</span>
  </div>
  <p class="font-bold text-slate-900 text-[14px]">{{ $p->name }}</p>
  @if($p->location)
    <p class="text-[11px] text-slate-500 mt-0.5"><i class="fa-solid fa-location-dot mr-1"></i>{{ $p->location }}</p>
  @endif
  <p class="text-slate-400 text-[12px] mt-1 line-clamp-2">{{ $p->description }}</p>
  <p class="text-[11px] text-slate-500 mt-1"><i class="fa-solid fa-building-user mr-1"></i>{{ $p->client?->company_name ?? 'TBD' }}</p>
  <div class="mt-4">
    <div class="flex justify-between text-[11px] mb-1.5"><span class="text-slate-500">Progress</span><span class="font-bold text-slate-700">{{ $p->progress_percentage }}%</span></div>
    <div class="pb"><div class="pf {{ $barClass }}" style="width:{{ min(100, max(0, (int) $p->progress_percentage)) }}%"></div></div>
    <p class="text-[10px] text-slate-400 mt-1">Budget used {{ $budgetUsed }}%</p>
  </div>
  <div class="flex items-center justify-between mt-4 pt-3 border-t border-slate-50">
    <div><p class="text-[10px] text-slate-400 uppercase font-bold">Budget</p><p class="text-[13px] font-bold text-slate-800 mt-0.5">{{ \App\Support\Format::mwk($p->budget) }}</p></div>
    <div class="text-right"><p class="text-[10px] text-slate-400 uppercase font-bold">P/L</p><p class="text-[13px] font-bold mt-0.5 {{ $pl < 0 ? 'text-red-500' : 'text-emerald-600' }}">{{ \App\Support\Format::mwk($pl, true) }}</p></div>
    <div class="text-right"><p class="text-[10px] text-slate-400 uppercase font-bold">Margin</p><p class="text-[13px] font-bold text-slate-700 mt-0.5">{{ $margin }}%</p></div>
  </div>
  <div class="flex -space-x-1.5 mt-3 items-center">
    @php $teamMembers = $p->team->take(3); @endphp
    @forelse($teamMembers as $emp)
      <div class="w-6 h-6 rounded-full {{ $tc[$emp->id % count($tc)] }} flex items-center justify-center text-[9px] font-bold border-2 border-white">{{ $emp->initials }}</div>
    @empty
      <span class="text-[11px] text-slate-400">No team assigned</span>
    @endforelse
    @if($p->team->count() > 3)
      <div class="w-6 h-6 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center text-[9px] font-bold border-2 border-white">+{{ $p->team->count() - 3 }}</div>
    @endif
  </div>
</a>