@php
    $hasChildren = isset($item->children) && $item->children->isNotEmpty();
    $panelId = 'navPanel-' . $item->id;
@endphp
<div class="nav-panel" data-id="{{ $item->id }}" id="{{ $panelId }}">
    <div class="panel-header">
        <i class="bi bi-grip-vertical drag-handle"></i>
        <div class="panel-icon bg-primary bg-opacity-10 text-primary">
            <i class="bi {{ $item->icon ?: 'bi-link-45deg' }}"></i>
        </div>
        <div class="panel-info">
            <div class="panel-label d-flex align-items-center gap-2">
                {{ $item->label }}
                @if($item->type === 'button')
                    <span class="badge-btn-style">Boton</span>
                @endif
                @if($hasChildren)
                    <span class="badge-children">{{ $item->children->count() }} sub</span>
                @endif
            </div>
            <div class="panel-url text-truncate">{{ $item->url }}</div>
        </div>
        <div class="panel-actions">
            <div class="form-check form-switch m-0">
                <input class="form-check-input toggle-active" type="checkbox" data-id="{{ $item->id }}" {{ $item->active ? 'checked' : '' }} style="cursor:pointer;">
            </div>
            <button type="button" class="btn btn-sm btn-light btn-action" title="Editar" onclick="openEdit({{ $item }})">
                <i class="bi bi-pencil"></i>
            </button>
            <form action="{{ route('nav-items.destroy', $item) }}" method="POST" class="d-inline" data-confirm="Eliminar este menu?">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-sm btn-light btn-action text-danger" title="Eliminar">
                    <i class="bi bi-trash"></i>
                </button>
            </form>
        </div>
    </div>
    <div class="children-body{{ $hasChildren ? ' expanded' : '' }}">
        <ul class="children-sortable{{ $hasChildren ? '' : ' empty-list' }}" data-parent="{{ $item->id }}">
            @if($hasChildren)
                @foreach($item->children as $child)
                    <li class="nav-child-item" data-id="{{ $child->id }}">
                        <i class="bi bi-grip-vertical drag-handle-child"></i>
                        <div class="child-icon bg-primary bg-opacity-10 text-primary">
                            <i class="bi {{ $child->icon ?: 'bi-link-45deg' }}"></i>
                        </div>
                        <div class="flex-grow-1" style="min-width:0;">
                            <div class="fw-semibold d-flex align-items-center gap-2">
                                {{ $child->label }}
                                @if($child->type === 'button')
                                    <span class="badge-btn-style">Boton</span>
                                @endif
                            </div>
                            <div class="text-muted small text-truncate">{{ $child->url }}</div>
                        </div>
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input toggle-active" type="checkbox" data-id="{{ $child->id }}" {{ $child->active ? 'checked' : '' }} style="cursor:pointer;">
                        </div>
                        <button type="button" class="btn btn-sm btn-light btn-action" title="Editar" onclick="openEdit({{ $child }})">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <form action="{{ route('nav-items.destroy', $child) }}" method="POST" class="d-inline" data-confirm="Eliminar este sub menu?">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-light btn-action text-danger" title="Eliminar">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </li>
                @endforeach
            @endif
        </ul>
    </div>
</div>