@extends('layouts.admin', ['heading' => 'Matrix Tree View', 'subheading' => 'Fixed width matrix network structure'])

@section('content')
    <form method="GET" class="admin-card p-4">
        <div class="flex flex-wrap gap-2">
            <input name="q" value="{{ $search }}" placeholder="Search member code / mobile / email" class="w-full rounded border p-2 md:w-96">
            <button class="rounded bg-slate-900 px-4 py-2 text-white">Load Matrix</button>
        </div>
    </form>

    @if($member)
        <div class="mt-4 admin-card p-4">
            <div class="mb-2 text-sm font-semibold">Root: {{ $member->member_code }} - {{ $member->name }}</div>
            <div class="mb-3 text-xs text-slate-500">Plan {{ strtoupper($plan) }} | Width {{ $width }} | Levels {{ $maxDepth }}</div>
            <div class="space-y-3">
                @for($depth = 1; $depth <= $maxDepth; $depth++)
                    @php
                        $nodes = $levels[$depth] ?? collect();
                        $slots = min($width ** $depth, 200);
                    @endphp
                    <div class="rounded-lg border border-slate-200 p-3">
                        <div class="mb-2 text-sm font-semibold">Level {{ $depth }} ({{ $nodes->count() }}/{{ $slots }} filled)</div>
                        <div class="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-6">
                            @for($slot = 1; $slot <= $slots; $slot++)
                                @php $node = $nodes->get($slot - 1); @endphp
                                <div class="rounded border p-2 {{ $node ? 'bg-white' : 'bg-slate-50 text-slate-400' }}">
                                    @if($node)
                                        <div class="text-xs font-semibold">{{ $node->member_code }}</div>
                                        <div class="text-xs">{{ $node->name }}</div>
                                        <div class="text-[11px]">{{ ucfirst($node->status) }}</div>
                                    @else
                                        <div class="text-xs">Empty #{{ $slot }}</div>
                                    @endif
                                </div>
                            @endfor
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    @else
        <div class="mt-4 admin-card p-4 text-slate-600">Search a member to view matrix structure.</div>
    @endif
@endsection