@extends('layouts.app')
@section('title', __('My team'))
@section('content')
<section class="mb-6">
  <p class="text-sm text-slate-500">{{ __('See the members placed directly on each side of your network.') }}</p>
</section>
<section class="mb-5 grid gap-4 sm:grid-cols-2">
  <div class="metric-card flex items-center justify-between">
    <div><p class="text-sm font-medium text-slate-500">{{ __('Left team') }}</p><p class="mt-2 text-3xl font-extrabold text-slate-900">{{ $left->count() }}</p><p class="mt-1 text-xs text-slate-400">{{ __('Direct placements') }}</p></div>
    <span class="rounded-2xl bg-sky-50 p-3 text-sky-700"><x-nav-icon name="users" class="h-6 w-6" /></span>
  </div>
  <div class="metric-card flex items-center justify-between">
    <div><p class="text-sm font-medium text-slate-500">{{ __('Right team') }}</p><p class="mt-2 text-3xl font-extrabold text-slate-900">{{ $right->count() }}</p><p class="mt-1 text-xs text-slate-400">{{ __('Direct placements') }}</p></div>
    <span class="rounded-2xl bg-violet-50 p-3 text-violet-700"><x-nav-icon name="users" class="h-6 w-6" /></span>
  </div>
</section>
<section class="grid gap-5 xl:grid-cols-2">
  @foreach([['label' => __('Left team'), 'members' => $left, 'tone' => 'sky'], ['label' => __('Right team'), 'members' => $right, 'tone' => 'violet']] as $group)
    <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">{{ $group['label'] }}</h2><p class="mt-1 text-xs text-slate-400">{{ __('Directly placed members') }}</p></div>
        <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-600">{{ $group['members']->count() }}</span>
      </div>
      @forelse($group['members'] as $placement)
        <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-11 w-11 shrink-0 items-center justify-center rounded-full {{ $group['tone'] === 'sky' ? 'bg-sky-100 text-sky-800' : 'bg-violet-100 text-violet-800' }} font-extrabold">{{ strtoupper(substr($placement->user->name ?? '?', 0, 1)) }}</span>
          <div class="min-w-0 flex-1"><p class="truncate text-sm font-bold text-slate-800">{{ $placement->user->name ?? __('Account unavailable') }}</p><p class="mt-1 text-xs text-slate-400">{{ __('ID') }} {{ $placement->user->member_id ?? '—' }} · {{ __('Joined') }} {{ $placement->created_at->format('M d, Y') }}</p></div>
          <span class="rounded-lg px-2.5 py-1 text-[10px] font-extrabold uppercase {{ $group['tone'] === 'sky' ? 'bg-sky-50 text-sky-700' : 'bg-violet-50 text-violet-700' }}">{{ __($placement->side ?: 'Placed') }}</span>
        </div>
      @empty
        <div class="px-6 py-10 text-center"><p class="text-sm font-semibold text-slate-600">{{ __('No members on this side yet') }}</p><p class="mt-1 text-xs text-slate-400">{{ __('New placements will appear here.') }}</p></div>
      @endforelse
    </div>
  @endforeach
</section>
@endsection