@extends('layouts.user', ['heading' => 'Binary Tree / बायनरी ट्री'])

@section('content')
    <div class="rounded-2xl bg-white p-4 shadow">
        <div class="mb-2 text-sm text-slate-500">Weak Leg: {{ ucfirst($weakLeg) }}</div>
        <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
            <div class="rounded-xl border p-3 text-center">
                <div class="text-xs text-slate-500">You</div>
                <div class="font-semibold">{{ $user->member_code }}</div>
                <div class="text-xs text-slate-500">{{ $user->name }}</div>
            </div>
            <div class="rounded-xl border p-3 text-center {{ $weakLeg === 'left' ? 'bg-amber-50' : '' }}">
                <div class="text-xs text-slate-500">Left</div>
                @if($left)
                    <div class="font-semibold">{{ $left->member_code }}</div>
                    <div class="text-xs text-slate-500">{{ $left->name }}</div>
                    <div class="mt-1 text-xs">{{ $left->status }}</div>
                @else
                    <div class="text-xs text-slate-400">Empty</div>
                @endif
                <div class="mt-2 text-xs text-slate-500">Business: {{ number_format($leftBusiness, 2) }}</div>
            </div>
            <div class="rounded-xl border p-3 text-center {{ $weakLeg === 'right' ? 'bg-amber-50' : '' }}">
                <div class="text-xs text-slate-500">Right</div>
                @if($right)
                    <div class="font-semibold">{{ $right->member_code }}</div>
                    <div class="text-xs text-slate-500">{{ $right->name }}</div>
                    <div class="mt-1 text-xs">{{ $right->status }}</div>
                @else
                    <div class="text-xs text-slate-400">Empty</div>
                @endif
                <div class="mt-2 text-xs text-slate-500">Business: {{ number_format($rightBusiness, 2) }}</div>
            </div>
        </div>
        <div class="mt-4 text-xs text-slate-500">
            Tip: Zoomable full tree view will be available in the advanced tree module.
        </div>
    </div>
@endsection