@php
$typeColors = ['warehouse'=>'#1B4F8A|#EBF3FB','zone'=>'#664d03|#fff3cd','rack'=>'#0a3622|#d1e7dd','bin'=>'#495057|#e9ecef'];
@endphp
@foreach($items as $wh)
@php [$tfg,$tbg] = explode('|', $typeColors[$wh->type] ?? '#495057|#e9ecef'); @endphp
<tr class="wh-row"
    data-id="{{ $wh->id }}"
    data-parent="{{ $wh->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($wh->children_tree) > 0)
            <button class="wh-toggle btn btn-link p-0 border-0 lh-1 flex-shrink-0"
                    data-id="{{ $wh->id }}" style="width:20px;color:#6c757d">
                <i class="bi bi-chevron-right wh-icon" style="font-size:11px"></i>
            </button>
            @else
            <span style="display:inline-block;width:20px"></span>
            @endif
            <i class="bi bi-{{ $wh->type === 'warehouse' ? 'building' : ($wh->type === 'zone' ? 'grid' : ($wh->type === 'rack' ? 'layout-three-columns' : 'inbox')) }} flex-shrink-0" style="font-size:14px;color:{{ $tfg }}"></i>
            <span class="{{ count($wh->children_tree) > 0 ? 'fw-semibold' : '' }}" style="font-size:13.5px;margin-left:4px">
                {{ $wh->name }}
            </span>
        </div>
    </td>
    <td class="d-none d-sm-table-cell"><code style="font-size:12px">{{ $wh->code ?? '—' }}</code></td>
    <td>
        <span class="badge" style="background:{{ $tbg }};color:{{ $tfg }};font-size:11px">
            {{ ucfirst($wh->type) }}
        </span>
    </td>
    <td>
        <span class="badge" style="background:{{ $wh->is_active ? '#d1e7dd':'#f8d7da' }};color:{{ $wh->is_active ? '#0a3622':'#842029' }};font-size:11px">
            {{ $wh->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-wh"
                data-url="{{ route('inventory.warehouses.update', $wh) }}"
                data-name="{{ $wh->name }}" data-code="{{ $wh->code }}"
                data-type="{{ $wh->type }}" data-address="{{ e(str_replace(["\n","\r"], ' ', $wh->address ?? '')) }}"
                data-active="{{ $wh->is_active ? '1':'0' }}"
                title="Edit"><i class="bi bi-pencil"></i>
            </button>
            @if(count($wh->children_tree) === 0)
            <form method="POST" action="{{ route('inventory.warehouses.destroy', $wh) }}" id="dw-{{ $wh->id }}">
                @csrf @method('DELETE')
                <button type="button" class="btn btn-outline-danger btn-sm"
                    data-confirm data-form="#dw-{{ $wh->id }}"
                    data-confirm-title="Delete Location?"
                    data-confirm-text="Delete '{{ $wh->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($wh->children_tree) > 0)
    @include('inventory.warehouses._tree', ['items' => $wh->children_tree, 'level' => $level + 1])
@endif
@endforeach

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