@extends('layouts.app')
@section('title', 'List Data')

@section('styles')
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap" rel="stylesheet"/>
<link href="{{ asset('user/tree_view.css') }}" rel="stylesheet">
<style>
  /* ═══════════════════════════════════════════════
     OFFCANVAS STYLES
  ═══════════════════════════════════════════════ */
  .offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .offcanvas-backdrop.show {
    display: block;
    opacity: 1;
  }
  .offcanvas {
    position: fixed;
    top: 0;
    right: -450px; /* Hidden by default */
    width: 400px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    box-shadow: -5px 0 25px rgba(0,0,0,0.1);
    z-index: 1001;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow-y: auto;
  }
  .offcanvas.show {
    right: 0;
  }
  /* Ensure the form takes full height to push buttons to bottom if desired */
  .offcanvas form {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .modal-btns {
    margin-top: auto;
    padding-top: 20px;
  }
</style>
@endsection

@section('content')
<div class="cat-page">

  <!-- Breadcrumb Start -->
   <div x-data="{ pageName: `Categories`}" style="width:100%">
      <div class="flex flex-wrap items-center justify-between gap-3 pb-6">
         <!-- <h2
            class="text-xl font-semibold text-gray-800 dark:text-white/90"
            x-text="pageName"
            ></h2> -->
        <div>
               <!-- NEW HEADING, SUBHEADING AND POPOVER PLACEMENT -->
               <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
                  Template Categories
                  <span class="help-icon-wrapper">
                     <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                     <span class="help-popover-text" style="bottom: 100%;width:460px">
                           <span class="popover-header">API keys Information</span>
                           <span class="popover-body">Create categories to organize your document templates. You can use categories and subcategories to group templates by type, purpose, department, or any other structure that works for your account.</span>
                     </span>
                  </span>
               </h2>
               <p class="text-sm text-gray-500 dark:text-gray-400">Organize your fillable and signable document templates into categories.</p>
        </div>
         <nav>
            <ol class="flex items-center gap-1.5">
               <li>
                  <a
                     class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
                     href="{{ route('dashboard') }}"
                     >
                     Home
                     <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </a>
               </li>
               <li>
                  <a
                     class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400"
                     href="{{ route('account_settings') }}"
                  >
                     Account Settings
                     <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </a>
                  </li>
               <li
                  class="text-sm text-gray-800 dark:text-white/90"
                  x-text="pageName"
                  ></li>
            </ol>
         </nav>
      </div>
   </div>
   <!-- Breadcrumb End -->

  {{-- Flash messages --}}
  @if(session('success'))
    <div class="flash success">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
      {{ session('success') }}
    </div>
  @endif
  @if(session('error'))
    <div class="flash error">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
      {{ session('error') }}
    </div>
  @endif

  <div class="w-full">
              <div class="space-y-6">

                <!-- Tab start -->
                    <div
                        class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
                     >
                        <!-- <div class="px-6 py-5">
                           <h3
                              class="text-base font-medium text-gray-800 dark:text-white/90"
                           >
                              Account Settings
                           </h3>
                        </div> -->
                        <!-- <div
                           class="border-t border-gray-100 p-4 sm:p-6 dark:border-gray-800"
                        > -->
                           <div x-data="{ activeTab: 'smtp_config' }">
                              <div
                                 class="rounded-t-xl border border-gray-200 p-3 dark:border-gray-800"
                              >
                                 
                                  <nav class="flex overflow-x-auto rounded-lg bg-gray-100 p-1 dark:bg-gray-900 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-200 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-white dark:[&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-1.5">
                                    
                                    <!-- SMTP Configuration -->
                                    <a href="/smtp_configs"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('smtp') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       SMTP Configuration
                                    </a>

                                    <!-- Email Settings -->
                                    <a href="/email_settings"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('email') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       Email Settings
                                    </a>

                                    <!-- API Keys -->
                                    <a href="/settings/api-keys"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('api-keys') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       API Keys
                                    </a>

                                    <!-- Categories -->
                                    <a href="/categories"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('categories') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       Categories
                                    </a>

                                    <!-- Timezone Settings -->
                                    <a href="/account_settings"
                                       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out"
                                       x-bind:class="window.location.pathname.includes('timezone') ? 'bg-white text-gray-900 shadow-theme-xs dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'">
                                       Timezone Settings
                                    </a>

                                  </nav>
                              </div>
                              <div
                                 class="rounded-b-xl border border-t-0 border-gray-200 p-6 pt-4 dark:border-gray-800"
                              >
                                 <div x-show="activeTab === 'smtp_config'">
                                    <!-- <h3
                                       class="mb-1 text-xl font-medium text-gray-800 dark:text-white/90"
                                    >
                                       Categories
                                    </h3>
                                    <p
                                       class="text-sm text-gray-500 dark:text-gray-400"
                                    >
                                       Create and manage categories to structure your data for better organization and easy access.
                                    </p> -->

                                    <div class="flex flex-col justify-between gap-5  border-gray-100 sm:flex-row sm:items-center dark:border-gray-800">
                                             <div>
                                                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Categories</h3>
                                                <p class="text-sm text-gray-500 dark:text-gray-400">Create and manage categories to organize your fillable and signable document templates.</p>
                                             </div>
                                             <div>
                                                <!-- <button @click="isOffCanvasOpen = true" class="bg-brand-500 hover:bg-brand-600 inline-flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-white transition">
                                                   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                      <path d="M5 10.0002H15.0006M10.0002 5V15.0006" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                   </svg>
                                                   Add API Key
                                                </button> -->
                                                <button class="btn-root bg-brand-500 hover:bg-brand-600 inline-flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-white transition" onclick="openAddModal(0, 'root')">
                                                  <svg viewBox="0 0 12 12" fill="none"><line x1="6" y1="1" x2="6" y2="11" stroke="white" stroke-width="2" stroke-linecap="round"/><line x1="1" y1="6" x2="11" y2="6" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>
                                                  Add Category
                                                </button>
                                             </div>
                                    </div>

                                    <!-- Form start -->
                                      <div class="card mt-5">
                                        <!-- <div class="card-header">
                                          <h2>Categories</h2>
                                          <div class="header-right">
                                            <span class="badge-count" id="cat-count">{{ $categories->count() }} items</span>
                                            <button class="btn-root" onclick="openAddModal(0, 'root')">
                                              <svg viewBox="0 0 12 12" fill="none"><line x1="6" y1="1" x2="6" y2="11" stroke="white" stroke-width="2" stroke-linecap="round"/><line x1="1" y1="6" x2="11" y2="6" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>
                                              Add Category
                                            </button>
                                          </div>
                                        </div> -->
                                        <div class="card-body" style="border:none">
                                          <div id="tree"></div>
                                        </div>
                                      </div>
                                    <!-- Form end -->
                                 </div>

                                 
                              </div>
                           </div>
                        <!-- </div> -->
                     </div>
                <!-- Tab End -->
                

                

              </div>
            </div>

  

</div>

{{-- ═══════════════════════════════════════════════
     ADD / STORE OFFCANVAS
═══════════════════════════════════════════════ --}}
<div class="offcanvas-backdrop" id="add-backdrop" onclick="closeAddModal()"></div>
<div class="offcanvas" id="add-modal">
    <div class="modal-hd">
      <div class="modal-ico folder" id="add-modal-ico">
        <svg viewBox="0 0 22 18" fill="none"><path d="M1 4A1.5 1.5 0 0 1 2.5 2.5H8.2l1.8 2H20a1.5 1.5 0 0 1 1.5 1.5V15A1.5 1.5 0 0 1 20 16.5H2a1.5 1.5 0 0 1-1.5-1.5V4z" fill="#DEB96A" stroke="#A07840" stroke-width=".9"/><path d="M1 7h20.5v8A1.5 1.5 0 0 1 20 16.5H2A1.5 1.5 0 0 1 .5 15V7z" fill="#EDD08A" stroke="#A07840" stroke-width=".9"/></svg>
      </div>
      <div>
        <h3 id="add-modal-title">Add Category</h3>
        <p class="m-sub" id="add-modal-sub">Will be added at root level</p>
      </div>
    </div>

    <form method="POST" action="{{ route('categories.store') }}">
      @csrf
      <input type="hidden" name="parent_id" id="add-parent-id" value="0"/>

      <div class="form-row">
        <label>Category Name <span style="color:var(--red)">*</span></label>
        <input type="text" name="category_name" placeholder="e.g. HR Documents" required maxlength="100" autocomplete="off"/>
      </div>

      <div class="form-grid">
        <div class="form-row">
          <label>Status <span style="color:var(--red)">*</span></label>
          <select name="category_status" required>
            <option value="1">Active</option>
            <option value="0">Inactive</option>
          </select>
        </div>
        <div class="form-row">
          <label>Sort Order</label>
          <input type="number" name="category_sort_order" placeholder="0" min="0"/>
        </div>
      </div>

      <div class="form-row">
        <label>Description</label>
        <textarea name="category_description" placeholder="Optional description..."></textarea>
      </div>

      <div class="modal-btns">
        <button type="button" onclick="closeAddModal()">Cancel</button>
        <button type="submit" class="btn-submit">Save Category</button>
      </div>
    </form>
</div>

{{-- ═══════════════════════════════════════════════
     EDIT / UPDATE OFFCANVAS
═══════════════════════════════════════════════ --}}
<div class="offcanvas-backdrop" id="edit-backdrop" onclick="closeEditModal()"></div>
<div class="offcanvas" id="edit-modal">
    <div class="modal-hd">
      <div class="modal-ico edit">
        <svg fill="none" viewBox="0 0 24 24" stroke="#3b82f6" stroke-width="1.8" width="17" height="17"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
      </div>
      <div>
        <h3>Edit Category</h3>
        <p class="m-sub" id="edit-modal-sub">Update category details</p>
      </div>
    </div>

    <form method="POST" id="edit-form" action="">
      @csrf
      @method('PUT')

      <div class="form-row">
        <label>Category Name <span style="color:var(--red)">*</span></label>
        <input type="text" name="category_name" id="edit-name" required maxlength="100"/>
      </div>

      <div class="form-grid">
        <div class="form-row">
          <label>Status <span style="color:var(--red)">*</span></label>
          <select name="category_status" id="edit-status" required>
            <option value="1">Active</option>
            <option value="0">Inactive</option>
          </select>
        </div>
        <div class="form-row">
          <label>Sort Order</label>
          <input type="number" name="category_sort_order" id="edit-sort" min="0"/>
        </div>
      </div>

      <div class="form-row">
        <label>Description</label>
        <textarea name="category_description" id="edit-desc"></textarea>
      </div>

      <div class="form-row">
        <label>Parent Category</label>
        <select name="parent_id" id="edit-parent">
          <option value="0">— None (Root) —</option>
          @foreach($categories as $cat)
            <option value="{{ $cat->category_id }}">{{ $cat->category_name }}</option>
          @endforeach
        </select>
      </div>

      <div class="modal-btns">
        <button type="button" onclick="closeEditModal()">Cancel</button>
        <button type="submit" class="btn-submit">Update</button>
      </div>
    </form>
</div>

{{-- ═══════════════════════════════════════════════
     DELETE CONFIRM MODAL (Keep as Modal for UX)
═══════════════════════════════════════════════ --}}
<div class="modal-backdrop" id="del-modal">
  <div class="modal del-modal">
    <div class="del-icon">
      <svg fill="none" viewBox="0 0 24 24" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
    </div>
    <h3>Delete Category?</h3>
    <p>Are you sure you want to delete <strong id="del-name"></strong>? This action cannot be undone.</p>
    <form method="POST" id="del-form" action="">
      @csrf
      @method('DELETE')
      <div class="modal-btns" style="margin-top:20px">
        <button type="button" onclick="closeDelModal()">Cancel</button>
        <button type="submit" class="btn-submit btn-danger">Yes, Delete</button>
      </div>
    </form>
  </div>
</div>
@endsection

<script>
/* ════════════════════════════════════════════════
   Data from Laravel — flat list → build tree in JS
════════════════════════════════════════════════ */
const rawCategories = @json($categories);

// Build nested tree from flat array
function buildTree(items, parentId = 0) {
  return items
    .filter(i => parseInt(i.parent_id) === parseInt(parentId))
    .sort((a, b) => (a.category_sort_order || 0) - (b.category_sort_order || 0))
    .map(i => ({
      ...i,
      children: buildTree(items, i.category_id),
    }));
}

let treeData = buildTree(rawCategories);
let activeId = null;

/* ════════════════════════════════════════════════
   SVG constants
════════════════════════════════════════════════ */
const S = {
  chev:   `<svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>`,
  plus:   `<svg viewBox="0 0 12 12" fill="none"><line x1="6" y1="1" x2="6" y2="11" stroke="white" stroke-width="2.2" stroke-linecap="round"/><line x1="1" y1="6" x2="11" y2="6" stroke="white" stroke-width="2.2" stroke-linecap="round"/></svg>`,
  edit:   `<svg viewBox="0 0 12 12" fill="none"><path d="M1 9.5L1 11h1.5l5-5-1.5-1.5-5 5zm7.1-5.6l1-1a.75.75 0 0 0-1.06-1.06l-1 1 1.06 1.06z" fill="white"/></svg>`,
  trash:  `<svg viewBox="0 0 12 12" fill="none"><line x1="1" y1="3" x2="11" y2="3" stroke="white" stroke-width="1.8" stroke-linecap="round"/><path d="M2 3l.7 7A1 1 0 0 0 3.7 11h4.6a1 1 0 0 0 1-.9L10 3" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><line x1="4.5" y1="1.5" x2="7.5" y2="1.5" stroke="white" stroke-width="1.8" stroke-linecap="round"/></svg>`,
  folder: `<svg viewBox="0 0 22 18" fill="none" width="20" height="16"><path d="M1 4A1.5 1.5 0 0 1 2.5 2.5H8.2l1.8 2H20a1.5 1.5 0 0 1 1.5 1.5V15A1.5 1.5 0 0 1 20 16.5H2a1.5 1.5 0 0 1-1.5-1.5V4z" fill="#DEB96A" stroke="#A07840" stroke-width=".9" stroke-linejoin="round"/><path d="M1 7h20.5v8A1.5 1.5 0 0 1 20 16.5H2A1.5 1.5 0 0 1 .5 15V7z" fill="#EDD08A" stroke="#A07840" stroke-width=".9" stroke-linejoin="round"/></svg>`,
  doc:    `<svg viewBox="0 0 22 18" fill="none" width="20" height="16"><path d="M1 4A1.5 1.5 0 0 1 2.5 2.5H8.2l1.8 2H20a1.5 1.5 0 0 1 1.5 1.5V15A1.5 1.5 0 0 1 20 16.5H2a1.5 1.5 0 0 1-1.5-1.5V4z" fill="#DEB96A" stroke="#A07840" stroke-width=".9" stroke-linejoin="round"/><path d="M1 7h20.5v8A1.5 1.5 0 0 1 20 16.5H2A1.5 1.5 0 0 1 .5 15V7z" fill="#EDD08A" stroke="#A07840" stroke-width=".9" stroke-linejoin="round"/></svg>`,
};

/* ════════════════════════════════════════════════
   ADD OFFCANVAS LOGIC
════════════════════════════════════════════════ */
function openAddModal(parentId, context) {
  const isRoot = (parentId === 0 || parentId === '0');
  document.getElementById('add-parent-id').value = parentId;
  document.getElementById('add-modal-title').textContent = isRoot ? 'Add Category' : 'Add Sub-Category';
  document.getElementById('add-modal-sub').textContent   = isRoot
    ? 'Will be added at root level'
    : 'Will be nested inside selected category';
  
  document.getElementById('add-backdrop').classList.add('show');
  document.getElementById('add-modal').classList.add('show');
}
function closeAddModal() { 
  document.getElementById('add-backdrop').classList.remove('show');
  document.getElementById('add-modal').classList.remove('show'); 
}

/* ════════════════════════════════════════════════
   EDIT OFFCANVAS LOGIC
════════════════════════════════════════════════ */
function openEditModal(id) {
  const cat = rawCategories.find(c => parseInt(c.category_id) === parseInt(id));
  if (!cat) return;

  const form = document.getElementById('edit-form');
  form.action = `/categories/${id}`;

  document.getElementById('edit-name').value   = cat.category_name   || '';
  document.getElementById('edit-status').value = (cat.category_status == 1) ? '1' : '0';
  document.getElementById('edit-sort').value   = cat.category_sort_order || '';
  document.getElementById('edit-desc').value   = cat.category_description || '';
  document.getElementById('edit-parent').value = cat.parent_id || 0;
  document.getElementById('edit-modal-sub').textContent = `Editing: ${cat.category_name}`;

  document.getElementById('edit-backdrop').classList.add('show');
  document.getElementById('edit-modal').classList.add('show');
}
function closeEditModal() { 
  document.getElementById('edit-backdrop').classList.remove('show');
  document.getElementById('edit-modal').classList.remove('show'); 
}

/* ════════════════════════════════════════════════
   DELETE MODAL (Centered)
════════════════════════════════════════════════ */
function openDelModal(id, name) {
  document.getElementById('del-name').textContent = name;
  document.getElementById('del-form').action = `/categories/${id}`;
  document.getElementById('del-modal').classList.add('show');
}
function closeDelModal() { document.getElementById('del-modal').classList.remove('show'); }

/* ════════════════════════════════════════════════
   HELPER: make a button
════════════════════════════════════════════════ */
function mkBtn(cls, title, icon, cb) {
  const b = document.createElement('button');
  b.className = 'btn-act ' + cls;
  b.title = title;
  b.innerHTML = icon;
  b.addEventListener('click', e => { e.stopPropagation(); cb(); });
  return b;
}

/* ════════════════════════════════════════════════
   RENDER
════════════════════════════════════════════════ */
function renderNode(node) {
  const isVirtualRoot = (parseInt(node.category_id) === 0);
  const hasChildren = node.children && node.children.length > 0;
  const isFolder    = isVirtualRoot || hasChildren || parseInt(node.parent_id) === 0;

  const wrap = document.createElement('div');
  wrap.className = 'tree-node';

  const row = document.createElement('div');
  row.className = 'tree-row' + (parseInt(node.category_id) === activeId ? ' active' : '');

  if (hasChildren) {
    const ch = document.createElement('div');
    ch.className = 'chevron';
    ch.innerHTML = S.chev;
    ch.addEventListener('click', e => {
      e.stopPropagation();
      const cw = wrap.querySelector(':scope > .children-wrap');
      if (cw) {
        cw.classList.toggle('closed');
        ch.classList.toggle('closed');
      }
    });
    row.appendChild(ch);
  } else {
    const ph = document.createElement('div'); ph.className = 'chevron-ph'; row.appendChild(ph);
  }

  const ico = document.createElement('div');
  ico.className = 'icon';
  ico.innerHTML = isFolder ? S.folder : S.doc;
  row.appendChild(ico);

  const lbl = document.createElement('span');
  lbl.className = 'lbl';
  lbl.textContent = node.category_name;
  if(isVirtualRoot) lbl.style.fontWeight = '600';
  row.appendChild(lbl);

  const sb = document.createElement('span');
  sb.className = 'status-badge status-' + node.category_status;
  row.appendChild(sb);

  const acts = document.createElement('div');
  acts.className = 'actions';
  
  // All nodes (including virtual root) get the "Add" button
  acts.appendChild(mkBtn('b-subfolder', 'Add sub-category', S.plus, () => openAddModal(node.category_id, 'child')));
  
  // Virtual root doesn't get Edit or Delete
  if (!isVirtualRoot) {
    acts.appendChild(mkBtn('b-edit', 'Edit', S.edit, () => openEditModal(node.category_id)));
    acts.appendChild(mkBtn('b-del', 'Delete', S.trash, () => openDelModal(node.category_id, node.category_name)));
  }

  row.appendChild(acts);
  row.addEventListener('click', () => {
    activeId = parseInt(node.category_id);
    document.querySelectorAll('.tree-row.active').forEach(r => r.classList.remove('active'));
    row.classList.add('active');
  });

  wrap.appendChild(row);

  if (hasChildren) {
    const cw = document.createElement('div');
    cw.className = 'children-wrap';
    const ci = document.createElement('div');
    ci.className = 'children-indent';
    node.children.forEach(c => ci.appendChild(renderNode(c)));
    cw.appendChild(ci);
    wrap.appendChild(cw);
  }
  return wrap;
}

function renderTree() {
  const el = document.getElementById('tree');
  el.innerHTML = '';
  
  // Create a virtual "Uncategorized" root node that contains all root categories
  const uncategorizedRoot = {
    category_id: 0,
    category_name: 'Uncategorized',
    category_status: 1,
    children: treeData // Put all built categories inside this virtual node
  };

  el.appendChild(renderNode(uncategorizedRoot));
  document.getElementById('cat-count').textContent = (rawCategories.length + 1) + ' items';
}

document.addEventListener('DOMContentLoaded', function () {
    renderTree();
});

document.querySelectorAll('.flash').forEach(f => {
  setTimeout(() => f.style.opacity = '0', 3500);
  setTimeout(() => f.remove(), 4000);
});
</script>

<style type="text/css">
    .offcanvas
    {
        z-index:999999 !important;
    }
</style>