@php
  $sidebarCats    = $allCategories ?? $categories ?? collect();
  $activeCatId    = isset($category) ? $category->id : null;
  $activeParentId = isset($category) ? ($category->parent_id ?? null) : null;
  $isRootPage     = !isset($category);
@endphp
<div class="drive-sidebar">

  {{-- 上傳按鈕（僅管理員）--}}
  @if($isAdmin)
  <div style="padding:12px 10px 8px;">
    <div class="dropdown">
      <button class="btn d-flex align-items-center gap-2 shadow-sm" data-bs-toggle="dropdown"
              style="border-radius:24px;padding:10px 18px 10px 12px;font-size:.88rem;font-weight:500;border:1px solid var(--bs-border-color);background:var(--bs-body-bg);color:var(--bs-body-color);white-space:nowrap;min-width:130px;">
        <span style="width:28px;height:28px;border-radius:8px;background:rgba(26,115,232,.12);color:#1a73e8;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;">
          <i class="bi bi-plus-lg"></i>
        </span>
        新增
      </button>
      <ul class="dropdown-menu shadow" style="font-size:.85rem;min-width:170px;border-radius:12px;padding:6px;">
        <li>
          <a class="dropdown-item rounded-2 py-2"
             href="{{ route($routePrefix . '.create') }}{{ isset($category) ? '?category=' . $category->id : '' }}">
            <i class="bi bi-file-earmark-plus me-2" style="color:#0ea5e9;"></i>新增文件
          </a>
        </li>
        <li><hr class="dropdown-divider my-1"></li>
        <li>
          <a class="dropdown-item rounded-2 py-2" href="#"
             data-bs-toggle="modal" data-bs-target="#newCatModal">
            <i class="bi bi-folder-plus me-2" style="color:#f9ab00;"></i>新增目錄
          </a>
        </li>
        <li><hr class="dropdown-divider my-1"></li>
        <li>
          <button class="dropdown-item rounded-2 py-2"
                  onclick="document.getElementById('ismsUploadInput').click()">
            <i class="bi bi-upload me-2" style="color:#8ab4f8;"></i>上傳檔案
          </button>
        </li>
      </ul>
    </div>
  </div>
  @endif

  {{-- 根目錄 --}}
  <a href="{{ route($routePrefix . '.index') }}"
     class="tree-item tree-root {{ $isRootPage ? 'active' : '' }}">
    <i class="bi bi-shield-lock" style="color:#0ea5e9;font-size:1rem;flex-shrink:0;"></i>
    <span style="overflow:hidden;text-overflow:ellipsis;">{{ $systemName }}</span>
  </a>

  {{-- 目錄樹 --}}
  @foreach($sidebarCats as $rootCat)
    <a href="{{ route($routePrefix . '.category', $rootCat) }}"
       class="tree-item {{ $activeCatId === $rootCat->id ? 'active' : '' }}"
       style="padding-left:22px;">
      <i class="bi bi-folder-fill tree-folder-ico"></i>
      <span style="overflow:hidden;text-overflow:ellipsis;">{{ $rootCat->name }}</span>
    </a>
    @foreach($rootCat->children as $child)
      <a href="{{ route($routePrefix . '.category', $child) }}"
         class="tree-item {{ $activeCatId === $child->id ? 'active' : '' }}"
         style="padding-left:36px;">
        <i class="bi bi-folder-fill tree-folder-ico" style="font-size:.9rem;"></i>
        <span style="overflow:hidden;text-overflow:ellipsis;">{{ $child->name }}</span>
      </a>
    @endforeach
  @endforeach

</div>

{{-- ── 新增目錄 Modal（僅管理員）── --}}
@if($isAdmin)
<div class="modal fade" id="newCatModal" tabindex="-1" aria-labelledby="newCatModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content" style="border-radius:16px;overflow:hidden;">
      <form method="POST" action="{{ route($routePrefix . '.categories.store') }}">
        @csrf
        <div class="modal-header border-0 pb-1">
          <h5 class="modal-title" id="newCatModalLabel" style="font-size:1rem;font-weight:600;">
            <i class="bi bi-folder-plus me-2" style="color:#f9ab00;"></i>新增目錄
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body pt-2">

          {{-- Emoji + Name --}}
          <div class="d-flex gap-3 align-items-start mb-3">
            <div>
              <label for="newCatEmoji" class="form-label" style="font-size:.78rem;color:var(--bs-secondary-color);">圖示</label>
              <input type="text" name="icon_emoji" id="newCatEmoji"
                     class="form-control text-center"
                     style="font-size:1.5rem;padding:6px 4px;width:56px;cursor:pointer;"
                     value="📁" maxlength="2" title="點擊輸入 Emoji">
            </div>
            <div class="flex-grow-1">
              <label for="newCatName" class="form-label" style="font-size:.78rem;color:var(--bs-secondary-color);">目錄名稱 <span class="text-danger">*</span></label>
              <input type="text" name="name" id="newCatName" class="form-control" required maxlength="100"
                     placeholder="例：資安政策" autocomplete="off">
            </div>
          </div>

          {{-- Parent --}}
          <div class="mb-3">
            <label for="newCatParent" class="form-label" style="font-size:.78rem;color:var(--bs-secondary-color);">父目錄（留空表示頂層）</label>
            <select name="parent_id" id="newCatParent" class="form-select" style="font-size:.875rem;">
              <option value="">— 頂層目錄 —</option>
              @foreach($sidebarCats as $cat)
                <option value="{{ $cat->id }}"
                  {{ (isset($category) && $category->id === $cat->id && !$category->parent_id) ? 'selected' : '' }}>
                  {{ $cat->icon_emoji }} {{ $cat->name }}
                </option>
              @endforeach
            </select>
          </div>

          {{-- Description --}}
          <div>
            <label for="newCatDesc" class="form-label" style="font-size:.78rem;color:var(--bs-secondary-color);">說明（選填）</label>
            <input type="text" name="description" id="newCatDesc" class="form-control" maxlength="500"
                   placeholder="目錄說明" style="font-size:.875rem;">
          </div>

        </div>
        <div class="modal-footer border-0 pt-1">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-folder-plus me-1"></i>建立目錄
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endif