@foreach($items as $cat)
<tr class="cat-row"
    data-id="{{ $cat->id }}"
    data-parent="{{ $cat->parent_id ?? 'null' }}"
    data-level="{{ $level }}"
    style="{{ $level > 0 ? 'display:none' : '' }}">
    <td style="padding-left:{{ $level * 20 + 12 }}px">
        <div class="d-flex align-items-center gap-1">
            @if(count($cat->children_tree) > 0)
            <button class="cat-toggle btn btn-link p-0 border-0 lh-1 flex-shrink-0"
                    data-id="{{ $cat->id }}" style="width:20px;color:#6c757d">
                <i class="bi bi-chevron-right cat-icon" style="font-size:11px"></i>
            </button>
            @else
            <span style="display:inline-block;width:20px"></span>
            @endif
            <i class="bi bi-{{ count($cat->children_tree) > 0 ? 'folder2 text-warning' : 'tag text-muted' }} flex-shrink-0" style="font-size:14px"></i>
            <span class="{{ count($cat->children_tree) > 0 ? 'fw-semibold' : '' }}" style="font-size:13.5px;margin-left:4px">
                {{ $cat->name }}
            </span>
        </div>
    </td>
    <td class="d-none d-sm-table-cell"><code style="font-size:12px">{{ $cat->code ?? '—' }}</code></td>
    <td class="text-center d-none d-md-table-cell">
        <span class="badge bg-light text-dark border" style="font-size:12px">
            {{ $cat->items_count ?? 0 }}
        </span>
    </td>
    <td>
        <span class="badge" style="background:{{ $cat->is_active ? '#d1e7dd':'#f8d7da' }};color:{{ $cat->is_active ? '#0a3622':'#842029' }};font-size:11px">
            {{ $cat->is_active ? 'Active' : 'Inactive' }}
        </span>
    </td>
    <td class="text-end pe-2">
        <div class="d-flex justify-content-end gap-1">
            @if(auth()->user()->hasPermission('inventory','edit'))
            <button class="btn btn-outline-primary btn-sm btn-edit-cat"
                data-url="{{ route('inventory.categories.update', $cat) }}"
                data-name="{{ $cat->name }}" data-code="{{ $cat->code }}"
                data-active="{{ $cat->is_active ? '1':'0' }}"
                title="Edit">
                <i class="bi bi-pencil"></i>
            </button>
            @if(count($cat->children_tree) === 0 && ($cat->items_count ?? 0) === 0)
            <form method="POST" action="{{ route('inventory.categories.destroy', $cat) }}" id="dc-{{ $cat->id }}">
                @csrf @method('DELETE')
                <button type="button" class="btn btn-outline-danger btn-sm"
                    data-confirm data-form="#dc-{{ $cat->id }}"
                    data-confirm-title="Delete Category?"
                    data-confirm-text="Delete '{{ $cat->name }}'?"
                    data-confirm-icon="warning" data-confirm-color="#E74C3C" data-confirm-btn="Delete"
                    title="Delete">
                    <i class="bi bi-trash"></i>
                </button>
            </form>
            @endif
            @endif
        </div>
    </td>
</tr>
@if(count($cat->children_tree) > 0)
    @include('inventory.categories._tree', ['items' => $cat->children_tree, 'level' => $level + 1])
@endif
@endforeach

@once
@push('scripts')
<script>
const catState = {};
function catToggle(id) {
    const isOpen = catState[id];
    catState[id] = !isOpen;
    const icon = document.querySelector(`.cat-toggle[data-id="${id}"] .cat-icon`);
    document.querySelectorAll(`.cat-row[data-parent="${id}"]`).forEach(r => {
        if (isOpen) { r.style.display = 'none'; catCollapseAll(r.dataset.id); }
        else { r.style.display = ''; }
    });
    if (icon) { icon.classList.toggle('bi-chevron-down', !isOpen); icon.classList.toggle('bi-chevron-right', isOpen); }
}
function catCollapseAll(id) {
    if (!id || id === 'null') return;
    catState[id] = false;
    const icon = document.querySelector(`.cat-toggle[data-id="${id}"] .cat-icon`);
    if (icon) { icon.classList.remove('bi-chevron-down'); icon.classList.add('bi-chevron-right'); }
    document.querySelectorAll(`.cat-row[data-parent="${id}"]`).forEach(r => { r.style.display = 'none'; catCollapseAll(r.dataset.id); });
}
document.addEventListener('click', e => { const b = e.target.closest('.cat-toggle'); if (b) catToggle(b.dataset.id); });
</script>
@endpush
@endonce
