@php
    $itemDirectos = isset($referidosAgrupados[$item['ID']]) ? count($referidosAgrupados[$item['ID']]) : 0;
    $tieneRed     = $itemDirectos > 0;
@endphp

<li>
    <a href="{{ route('moretree', $item['ID']) }}{{ request()->user ? '?user='.request()->user : '' }}"
       class="node-child {{ $tieneRed ? 'has-children' : 'no-children' }}"
       data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true"
       title='<div class="tooltip-header">
            <img src="{{ asset("/fondo/".$item["avatar"]) }}" class="dimensiones-img">
        </div>
        <div class="tooltip-body">
            <div class="row g-0">
                <div class="col-12 text-center mb-2">
                    <span class="badge bg-info text-white rounded-pill px-2 py-1">
                        <i class="fa-solid fa-trophy me-1"></i> {{ $item["rol"] }}
                    </span>
                </div>

                <div class="col-6 label-text text-start">ID</div>
                <div class="col-6 value-text text-end">#{{ $item["ID"] }}</div>

                <div class="col-6 label-text text-start">Nombre</div>
                <div class="col-6 value-text text-end text-truncate">{{ ucwords($item["nombre"]) }}</div>

                <div class="col-12"><hr></div>

                <div class="col-6 label-text text-start">
                    <i class="fa-solid fa-user text-success"></i> P. Personales
                </div>
                <div class="col-6 value-text text-end fw-bold">{{ number_format($item["personales"]) }}</div>

                <div class="col-6 label-text text-start">
                    <i class="fa-solid fa-network-wired text-info"></i> P. de Red
                </div>
                <div class="col-6 value-text text-end fw-bold">{{ number_format($item["red"]) }}</div>

                <div class="col-6 label-text text-start">
                    <i class="fa-solid fa-users text-warning"></i> Directos
                </div>
                <div class="col-6 value-text text-end fw-bold">{{ $itemDirectos }}</div>

                <div class="col-12 mt-2 text-center">
                    <small class="text-info">
                        <i class="fa-solid fa-hand-pointer me-1"></i>
                        Toca para ver más
                    </small>
                </div>
            </div>
        </div>'>
        <div class="member-view-box">
            <div class="member-image position-relative">
                <img src="{{ asset('/arbol/'.$item['picture']) }}">

               
                @if($itemDirectos > 0)
                <span class="position-absolute bottom-0 end-0 badge rounded-circle bg-info text-white border border-2 border-white"
                      style="font-size:.55rem;padding:3px 5px;"
                      title="{{ $itemDirectos }} directos">
                    {{ $itemDirectos }}
                </span>
                @endif
            </div>
            <div class="member-details">
                <h6 class="mb-0 small fw-semibold text-truncate">{{ ucwords(\Str::limit($item['nombre'], 12)) }}</h6>
                <small class="text-muted" style="font-size:.7rem;">ID #{{ $item['ID'] }}</small>
            </div>
        </div>
    </a>

    {{-- RECURSIÓN --}}
    @if(isset($referidosAgrupados[$item['ID']]))
        <ul class="active">
            @foreach($referidosAgrupados[$item['ID']] as $hijo)
                @include('referraltree.referraltree_item', ['item' => $hijo, 'referidosAgrupados' => $referidosAgrupados])
            @endforeach
        </ul>
    @endif
</li>