@php
    use Illuminate\Support\Facades\Storage;
    use Illuminate\Support\Str;

    /** @var \App\Models\MenuItem $item */
    $depth = isset($depth) ? (int)$depth : 0;
    $path  = $path  ?? [$item->title];

    $kids = $item->children;
    $hasKids = $kids->count() > 0;

    // payload pentru modal
    $editPayload = [
      'id'          => $item->id,
      'type'        => $item->type,
      'title'       => $item->title ?? $item->label ?? '',
      'label'       => $item->label ?? $item->title ?? '',
      'url'         => $item->url ?? '',
      'target'      => $item->target ?? '_self',
      'css_class'   => $item->css_class ?? '',
      'is_active'   => (bool) ($item->is_active ?? $item->active ?? false),
      'button_text' => $item->button_text ?? '',
      'button_url'  => $item->button_url  ?? '',
      'category_id' => $item->category_id ?? '',
      'image_url'   => $item->image_path ? Storage::disk('public')->url($item->image_path) : null,
      'parent_id'   => $item->parent_id,
      'position'    => $item->position,
    ];

    // atribute pentru filtrare/căutare
    $dataTitle = Str::lower($item->title ?? '');
    $dataType  = $item->type;
    $dataCat   = $item->type==='category' ? ('cat#'.$item->category_id) : '';
@endphp

<div class="node mb-2" style="--depth: {{ $depth }};"
     data-node-id="{{ $item->id }}"
     data-parent-id="{{ $item->parent_id ?? '' }}"
     data-depth="{{ $depth }}"
     data-title="{{ e($dataTitle) }}"
     data-type="{{ e($dataType) }}"
     data-cat="{{ e($dataCat) }}">

    {{-- Head (rândul principal) --}}
    <div class="d-flex align-items-center justify-content-between item-row py-2 head">
        <div class="d-flex align-items-center gap-2">
            {{-- Toggle doar dacă are copii --}}
            @if($hasKids)
                <button type="button" class="tree-toggle btn btn-sm" title="Deschide/Închide">
                    <i class="bi bi-chevron-down"></i>
                </button>
            @else
                <span class="opacity-0" style="width:24px;display:inline-block"></span>
            @endif

            <span class="badge text-bg-light text-uppercase">{{ $item->type }}</span>

            <span class="title">
        <strong>{{ $item->title }}</strong>
      </span>

            {{-- Breadcrumb (context) --}}
            @php $trail = $path; @endphp
            @if(count($trail) > 1)
                @php array_pop($trail); @endphp
                <span class="crumb">în: {{ implode(' › ', $trail) }}</span>
            @endif

            {{-- Info suplimentar --}}
            @if($item->type==='category' && $item->category_id)
                <span class="badge text-bg-info">cat #{{ $item->category_id }}</span>
            @endif
            @if($item->url && $item->type==='link')
                <a href="{{ $item->url }}" target="{{ $item->target }}" class="small ms-2">{{ $item->url }}</a>
            @endif
            @if(!$item->is_active)
                <span class="badge text-bg-secondary ms-2">inactiv</span>
            @endif
            @if($item->type==='mega_card' && $item->image_path)
                <span class="ms-2 small text-secondary">[img]</span>
            @endif>
        </div>

        <div class="item-actions btn-group">
            <form action="{{ route('admin.menus.items.move', $item) }}?dir=up" method="post" class="d-inline">@csrf
                <button class="btn btn-outline-secondary" title="Sus"><i class="bi bi-arrow-up"></i></button>
            </form>
            <form action="{{ route('admin.menus.items.move', $item) }}?dir=down" method="post" class="d-inline">@csrf
                <button class="btn btn-outline-secondary" title="Jos"><i class="bi bi-arrow-down"></i></button>
            </form>

            <button type="button"
                    class="btn btn-outline-primary js-edit"
                    data-edit='@json($editPayload)'
                    data-action="{{ route('admin.menus.items.update', $item) }}">
                <i class="bi bi-pencil-square me-1"></i> Editează
            </button>

            <form action="{{ route('admin.menus.items.toggle', $item) }}" method="post" class="d-inline">@csrf
                <button class="btn btn-outline-warning" title="Activează/Dezactivează">
                    <i class="bi bi-power"></i>
                </button>
            </form>

            <form action="{{ route('admin.menus.items.destroy', $item) }}" method="post" class="d-inline"
                  onsubmit="return confirm('Ștergi elementul și toți copiii?');">
                @csrf @method('DELETE')
                <button class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
            </form>
        </div>
    </div>

    {{-- Formular „Adaugă copil” --}}
    <div class="ps-3">
        <form action="{{ route('admin.menus.items.store', $menu) }}" method="post" enctype="multipart/form-data" class="row g-2 align-items-end">
            @csrf
            <input type="hidden" name="parent_id" value="{{ $item->id }}">

            <div class="col-md-3">
                <label class="form-label small">Tip</label>
                <select class="form-select form-select-sm" name="type"
                        onchange="this.closest('form').querySelectorAll('[data-if]').forEach(el=>{
                  const t=this.value; const ok=(el.dataset.if||'').split(',').includes(t);
                  el.style.display= ok ? '' : 'none';
                })">
                    <option value="link">Link</option>
                    @if($item->type==='megamenu') <option value="mega_card">Mega card</option> @endif
                    <option value="category">Category</option>
                    <option value="dropdown">Dropdown</option>
                    <option value="label">Label</option>
                    <option value="divider">Divider</option>
                </select>
            </div>

            <div class="col-md-3" data-if="link,dropdown,label,category">
                <label class="form-label small">Titlu *</label>
                <input class="form-control form-control-sm" name="title">
            </div>

            <div class="col-md-3" data-if="link">
                <label class="form-label small">URL *</label>
                <input class="form-control form-control-sm" name="url">
            </div>

            <div class="col-md-3" data-if="category" style="display:none">
                <label class="form-label small">Categorie *</label>
                <select class="form-select form-select-sm" name="category_id">
                    <option value="">—</option>
                    @foreach(($categories ?? collect()) as $c)
                        <option value="{{ $c->id }}">{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-3" data-if="mega_card" style="display:none">
                <label class="form-label small">Imagine *</label>
                <input type="file" class="form-control form-control-sm" name="image" accept="image/*">
            </div>

            <div class="col-12" data-if="mega_card" style="display:none">
                <div class="row g-2">
                    <div class="col-md-4">
                        <label class="form-label small">Button text</label>
                        <input class="form-control form-control-sm" name="button_text">
                    </div>
                    <div class="col-md-8">
                        <label class="form-label small">Button URL</label>
                        <input class="form-control form-control-sm" name="button_url">
                    </div>
                </div>
            </div>

            <div class="col-auto">
                <div class="form-check form-switch">
                    <input type="hidden" name="is_active" value="0">
                    <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                    <label class="form-check-label small">Activ</label>
                </div>
            </div>

            <div class="col-auto">
                <button class="btn btn-sm btn-primary"><i class="bi bi-plus"></i></button>
            </div>
        </form>
    </div>

    {{-- Copii (recursiv) --}}
    @if($hasKids)
        <div class="children ps-3 mt-2">
            @foreach($kids as $child)
                @include('admin.menus.partials.item', [
                  'item' => $child,
                  'menu' => $menu,
                  'categories' => ($categories ?? collect()),
                  'depth' => $depth + 1,
                  'path'  => array_merge($path, [$child->title])
                ])
            @endforeach
        </div>
    @endif

    {{-- Previzualizare carduri mega --}}
    @if($item->type==='megamenu' && $hasKids)
        <div class="ps-3 mt-2">
            <div class="row g-3">
                @foreach($item->children as $card)
                    @if($card->type==='mega_card')
                        <div class="col-md-4">
                            <div class="preview-card">
                                <img src="{{ $card->image_path ? Storage::disk('public')->url($card->image_path) : asset('assets/img/header/home-1.jpg') }}">
                                <div class="p-2">
                                    <div class="fw-semibold">{{ $card->title }}</div>
                                    @if($card->button_text && $card->button_url)
                                        <a href="{{ $card->button_url }}" class="btn btn-sm btn-outline-primary mt-1">{{ $card->button_text }}</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    @endif
</div>