@extends('layouts.app')
@section('title', __('Binary tree'))
@section('content')
<section class="mb-6 flex flex-wrap items-end justify-between gap-4">
  <div><p class="text-sm text-slate-500">{{ __('A live view of the placements connected to your account.') }}</p></div>
  <a href="{{ route('team') }}" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50">{{ __('View team list') }}</a>
</section>

<section class="panel-card overflow-hidden">
  <div class="border-b border-slate-100 px-5 py-5 sm:px-7">
    <p class="text-xs font-bold uppercase tracking-[.15em] text-blue-700">{{ __('Your placement') }}</p>
    <div class="mt-4 flex items-center justify-center">
      <div class="rounded-2xl bg-blue-950 px-6 py-4 text-center text-white shadow-lg shadow-blue-950/15">
        <span class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-white/15 text-sm font-extrabold">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
        <p class="mt-2 text-sm font-bold">{{ $user->name }}</p>
        <p class="mt-1 text-[11px] text-blue-200">{{ $user->member_id ?: __('Member') }} · {{ __('You') }}</p>
      </div>
    </div>
  </div>

  @forelse($treeLevels as $levelIndex => $positions)
    <div class="border-b border-slate-100 px-5 py-5 last:border-0 sm:px-7">
      <div class="mb-4 flex items-center justify-between">
        <h2 class="text-sm font-bold text-slate-800">{{ __('Level :level', ['level' => $levelIndex + 1]) }}</h2>
        <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-bold text-slate-500">{{ $positions->count() }} {{ \Illuminate\Support\Str::plural('member', $positions->count()) }}</span>
      </div>
      <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        @foreach($positions as $position)
          <div class="flex items-center gap-3 rounded-2xl border border-slate-100 bg-slate-50/80 p-4">
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $position->side === 'left' ? 'bg-sky-100 text-sky-800' : 'bg-violet-100 text-violet-800' }}">
              <x-nav-icon name="user" class="h-5 w-5" />
            </span>
            <div class="min-w-0 flex-1">
              <p class="truncate text-sm font-bold text-slate-800">{{ $position->user->name ?? __('Account unavailable') }}</p>
              <p class="mt-1 truncate text-xs text-slate-400">{{ $position->user->member_id ?? '—' }}</p>
            </div>
            <span class="rounded-lg px-2 py-1 text-[10px] font-extrabold uppercase {{ $position->side === 'left' ? 'bg-sky-100 text-sky-800' : 'bg-violet-100 text-violet-800' }}">{{ __($position->side ?: 'Root') }}</span>
          </div>
        @endforeach
      </div>
    </div>
  @empty
    <div class="px-6 py-14 text-center">
      <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-50 text-blue-700"><x-nav-icon name="tree" class="h-6 w-6" /></span>
      <p class="mt-4 font-semibold text-slate-700">{{ __('Your tree is ready to grow') }}</p>
      <p class="mt-1 text-sm text-slate-400">{{ __('There are no placed team members connected to your account yet.') }}</p>
      <a href="{{ route('team') }}" class="mt-4 inline-flex text-sm font-bold text-blue-700 hover:text-blue-900">{{ __('Explore your team') }} <span class="ml-1">→</span></a>
    </div>
  @endforelse
  @if(count($treeLevels) === 4 && $treeLevels[3]->isNotEmpty())
    <p class="border-t border-slate-100 px-5 py-4 text-center text-xs text-slate-400">{{ __('Showing the first four levels of your network.') }}</p>
  @endif
</section>
@endsection