@extends('layouts.user', ['heading' => 'Matrix Tree', 'subheading' => 'Matrix structure view for fixed width plans'])

@section('content')
    <div class="user-card p-4">
        <div class="mb-2 text-sm font-semibold">Matrix Plan: {{ strtoupper($matrixPlan) }}</div>
        <div class="mb-4 text-xs text-[var(--user-muted)]">Width {{ $width }} | Levels {{ $maxDepth }}</div>

        <div class="space-y-3">
            @for($level = 1; $level <= $maxDepth; $level++)
                @php
                    $nodes = $levels[$level] ?? collect();
                    $slots = min($width ** $level, 200);
                @endphp
                <div class="rounded-xl border border-[var(--user-border)] p-3">
                    <div class="mb-2 text-sm font-semibold">Level {{ $level }} ({{ $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-lg 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 #{{ $slot }}</div>
                                @endif
                            </div>
                        @endfor
                    </div>
                </div>
            @endfor
        </div>
    </div>
@endsection