@extends('layouts.app')
@section('title', __('Team performance'))
@section('content')
<div class="space-y-6">
    <section class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-blue-950 via-blue-900 to-indigo-800 p-6 text-white shadow-xl shadow-blue-950/15 sm:p-8">
        <div class="relative z-10 flex flex-wrap items-end justify-between gap-5">
            <div class="max-w-2xl">
                <p class="text-xs font-bold uppercase tracking-[.2em] text-blue-200">{{ __('Your network') }}</p>
                <h2 class="mt-2 text-2xl font-extrabold sm:text-3xl">{{ __('Team performance') }}</h2>
                <p class="mt-2 text-sm leading-6 text-blue-100/80">{{ __('A clear view of your left and right team volume, sales, and matching progress.') }}</p>
            </div>
            <a href="{{ route('tree') }}" class="inline-flex items-center gap-2 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm font-bold text-white transition hover:bg-white/15">
                <x-nav-icon name="tree" class="h-5 w-5" /> {{ __('View binary tree') }}
            </a>
        </div>
        <div class="pointer-events-none absolute -right-10 -top-20 h-64 w-64 rounded-full border border-white/10"></div>
        <div class="pointer-events-none absolute -right-2 -top-12 h-48 w-48 rounded-full border border-white/10"></div>
    </section>

    <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @foreach([
            ['label' => __('Left volume'), 'value' => number_format($leftVolume, 2), 'icon' => 'chart', 'tone' => 'bg-sky-50 text-sky-700'],
            ['label' => __('Right volume'), 'value' => number_format($rightVolume, 2), 'icon' => 'chart', 'tone' => 'bg-violet-50 text-violet-700'],
            ['label' => __('Matched volume'), 'value' => number_format(min($leftVolume, $rightVolume), 2), 'icon' => 'transfer', 'tone' => 'bg-emerald-50 text-emerald-700'],
            ['label' => __('Personal sales'), 'value' => '৳'.number_format($personalSales, 2), 'icon' => 'receipt', 'tone' => 'bg-orange-50 text-orange-700'],
        ] as $stat)
            <article class="panel-card flex items-center gap-4 p-5">
                <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl {{ $stat['tone'] }}">
                    <x-nav-icon :name="$stat['icon']" class="h-6 w-6" />
                </span>
                <div class="min-w-0">
                    <p class="text-xs font-semibold text-slate-500">{{ $stat['label'] }}</p>
                    <p class="mt-1 truncate text-xl font-extrabold text-slate-900">{{ $stat['value'] }}</p>
                </div>
            </article>
        @endforeach
    </section>

    <section class="grid gap-5 xl:grid-cols-[1.2fr_.8fr]">
        <article class="panel-card p-5 sm:p-6">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <h3 class="font-extrabold text-slate-900">{{ __('Binary team volume') }}</h3>
                    <p class="mt-1 text-sm text-slate-500">{{ __('Your current left and right organization volume.') }}</p>
                </div>
                <a href="{{ route('matching-bonus') }}" class="text-sm font-bold text-emerald-700 hover:text-emerald-900">{{ __('View matching bonus') }} →</a>
            </div>
            @php($maxVolume = max($leftVolume, $rightVolume, 1))
            <div class="mt-6 space-y-5">
                @foreach([
                    ['label' => __('Left team'), 'value' => $leftVolume, 'style' => 'from-sky-500 to-blue-700'],
                    ['label' => __('Right team'), 'value' => $rightVolume, 'style' => 'from-violet-500 to-indigo-700'],
                ] as $volume)
                    <div>
                        <div class="mb-2 flex items-center justify-between gap-3 text-sm">
                            <span class="font-semibold text-slate-700">{{ $volume['label'] }}</span>
                            <span class="font-extrabold text-slate-900">{{ number_format($volume['value'], 2) }}</span>
                        </div>
                        <div class="h-3 overflow-hidden rounded-full bg-slate-100">
                            <div class="h-full rounded-full bg-gradient-to-r {{ $volume['style'] }}" style="width: {{ min(100, ($volume['value'] / $maxVolume) * 100) }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="mt-6 grid gap-3 sm:grid-cols-2">
                <a href="{{ route('matching-bonus') }}" class="rounded-2xl border border-emerald-100 bg-emerald-50/70 p-4 transition hover:bg-emerald-50">
                    <p class="text-xs font-semibold text-emerald-700">{{ __('Matching bonus') }}</p>
                    <p class="mt-1 text-lg font-extrabold text-emerald-900">৳{{ number_format($totalMatchingBonus, 2) }}</p>
                    <span class="mt-2 inline-flex text-xs font-bold text-emerald-800">{{ __('See payout history') }} →</span>
                </a>
                <a href="{{ route('rank.progress') }}" class="rounded-2xl border border-blue-100 bg-blue-50/70 p-4 transition hover:bg-blue-50">
                    <p class="text-xs font-semibold text-blue-700">{{ __('Rank progress') }}</p>
                    <p class="mt-1 text-lg font-extrabold text-blue-900">{{ __('Your next milestone') }}</p>
                    <span class="mt-2 inline-flex text-xs font-bold text-blue-800">{{ __('View rank progress') }} →</span>
                </a>
            </div>
        </article>

        <article class="panel-card overflow-hidden">
            <div class="border-b border-slate-100 px-5 py-5">
                <h3 class="font-extrabold text-slate-900">{{ __('Direct binary team') }}</h3>
                <p class="mt-1 text-sm text-slate-500">{{ __('Members placed directly on each side.') }}</p>
            </div>
            @if($children->isEmpty())
                <div class="px-5 py-10 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="users" class="h-6 w-6" /></span>
                    <p class="mt-4 text-sm font-bold text-slate-700">{{ __('No members on this side yet') }}</p>
                    <p class="mt-1 text-xs text-slate-500">{{ __('Your binary team placements will appear here.') }}</p>
                </div>
            @else
                <div class="divide-y divide-slate-100">
                    @foreach($children as $placement)
                        <div class="flex items-center gap-3 px-5 py-4">
                            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full {{ $placement->side === 'left' ? 'bg-sky-50 text-sky-700' : 'bg-violet-50 text-violet-700' }}">
                                <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-900">{{ $placement->user?->name ?? __('Unknown member') }}</p>
                                <p class="mt-1 text-xs text-slate-500">{{ $placement->user?->member_id }}</p>
                            </div>
                            <span class="rounded-full px-3 py-1 text-xs font-bold {{ $placement->side === 'left' ? 'bg-sky-50 text-sky-700' : 'bg-violet-50 text-violet-700' }}">{{ __($placement->side === 'left' ? 'Left team' : 'Right team') }}</span>
                        </div>
                    @endforeach
                </div>
            @endif
            <a href="{{ route('tree') }}" class="flex items-center justify-between border-t border-slate-100 px-5 py-4 text-sm font-bold text-blue-700 hover:bg-blue-50/60">
                {{ __('Explore full binary tree') }} <span aria-hidden="true">→</span>
            </a>
        </article>
    </section>
</div>
@endsection