@extends('layouts.app')
@section('title', 'Upload Template PDF')
@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">
<!-- Load PDF.js for fallback conversion -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<style>
/* Indeterminate Progress Bar Animation */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}
.progress-bar-moving {
    width: 40%;
    height: 100%;
    background-color: #3c50e0; /* TailAdmin Brand Primary */
    position: absolute;
    border-radius: 9999px;
    animation: indeterminate 1.5s infinite linear;
}
@keyframes indeterminate {
    0% { left: -40%; }
    100% { left: 100%; }
}

/* Force the background to be gray/faded when modal is open */
.custom-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6) !important; /* Semi-transparent black/gray */
    backdrop-filter: blur(4px); /* Optional: blurs the background */
    z-index: 999999; /* Ensure it stays above everything */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure x-cloak works to prevent flicker */
[x-cloak] { display: none !important; }

/* ═══════════════════════════════════════════════
     OFFCANVAS STYLES (Restored from Category Page)
  ═══════════════════════════════════════════════ */
  .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: 999999;
    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: 1000000;
    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;
  }
  .offcanvas form {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .modal-btns {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    gap: 10px;
  }
  .modal-hd {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
  }
  .m-sub {
    font-size: 13px;
    color: #64748b;
  }
  .form-row { margin-bottom: 15px; }
  .form-row label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: #334155; }
  .form-row input, .form-row select, .form-row textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
  }
  .btn-submit {
    background: #3c50e0;
    padding: 10px 20px;
    border-radius: 6px;
    color: white;
    font-weight: 500;
  }
</style>
@endsection
@section('content')
@php
    $canAdd = session('can_add_more_template') === 'Yes';
    $hasStorage = session('is_plan_has_storage') === 'Yes';
    $isAllowed = $canAdd && $hasStorage;

    $errorMessage = '';
    if (!$canAdd) {
        $errorMessage = 'You have reached your template limit. Please upgrade your plan to add more.';
    } elseif (!$hasStorage) {
        $errorMessage = 'Your plan storage limit has been reached. Please upgrade to upload more files.';
    }
@endphp

          <div
            class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6"
            x-data="{ 
                uploading: false,
                gsAvailable: {{ $gs_available ? 'true' : 'false' }},
                async handleUpload() {
                    if(document.getElementById('category_id').value === '') { 
                        alert('Please select a category.'); 
                        return; 
                    } 
                    
                    const fileInput = document.getElementById('template_file');
                    const file = fileInput.files[0];
                    if (!file) return;

                    this.uploading = true;
                    const formData = new FormData(document.getElementById('uploadForm'));
                    const pdfData = await file.arrayBuffer();
                    
                    // Initialize PDF.js
                    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

                    try {
                        const loadingTask = pdfjsLib.getDocument({data: pdfData});
                        
                        // Handle Password Protection
                        loadingTask.onPassword = (updatePassword, reason) => {
                            alert('This PDF is password protected. Please upload an unprotected file.');
                            this.uploading = false;
                            throw new Error('Password Protected');
                        };

                        const pdf = await loadingTask.promise;

                        // ✅ Check for Digital Signatures
                        const fieldObjects = await pdf.getFieldObjects();
                        const hasSignatures = fieldObjects && Object.values(fieldObjects).some(f => f.type === 'Sig');
                        if (hasSignatures) {
                            alert('This document is digitally signed. Signed PDFs cannot be uploaded. Please upload a proper PDF.');
                            this.uploading = false;
                            return;
                        }

                        // ✅ Check for Limited Permissions (Restrictions)
                        const permissions = await pdf.getPermissions();
                        if (permissions) {
                            alert('This file has limited permissions. You may not have access to some features. Please upload a proper PDF.');
                            this.uploading = false;
                            return;
                        }

                        // If Ghostscript is NOT on server, perform conversion now
                        if (!this.gsAvailable) {
                            for (let i = 1; i <= pdf.numPages; i++) {
                                const page = await pdf.getPage(i);
                                const viewport = page.getViewport({scale: 2.0});
                                const canvas = document.createElement('canvas');
                                const context = canvas.getContext('2d');
                                canvas.height = viewport.height;
                                canvas.width = viewport.width;
                                await page.render({canvasContext: context, viewport: viewport}).promise;
                                const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.8));
                                formData.append('manual_images[]', blob, `page_${i}.jpg`);
                            }
                            
                            fetch(document.getElementById('uploadForm').action, {
                                method: 'POST',
                                body: formData,
                                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                            }).then(res => {
                                if (res.redirected) window.location.href = res.url;
                                else window.location.reload();
                            });
                            return;
                        }

                        // If GS exists, submit the form normally
                        document.getElementById('uploadForm').submit();

                    } catch (err) {
                        if (err.message !== 'Password Protected') {
                            //alert('Error processing PDF: ' + err.message);
                        }
                        this.uploading = false;
                    }
                }
            }"
          >
            <!-- Breadcrumb Start -->
            <div x-data="{ pageName: `Upload Template`}">
              <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">
                          Add Document Template
                          <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">Add Document Template</span>
                                  <span class="popover-body">Upload a PDF you want to use as a reusable template. Choose a category to keep your templates organized. If you don't select a category, the template will be added automatically to Uncategorized. Learn More</span>
                            </span>
                          </span>
                      </h2>
                      <p class="text-sm text-gray-500 dark:text-gray-400">Upload a PDF and organize it for future use.</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="#"
                      >
                        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
                      class="text-sm text-gray-800 dark:text-white/90"
                      x-text="pageName"
                    ></li>
                  </ol>
                </nav>
              </div>
            </div>
            <!-- Breadcrumb End -->

            @if(!$isAllowed)
                <!-- LIMIT REACHED MESSAGE -->
                <div class="rounded-2xl border border-red-200 bg-red-50 p-8 text-center dark:border-red-900/30 dark:bg-red-900/10">
                    <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
                        <svg class="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-red-800 dark:text-red-500">Access Restricted</h3>
                    <p class="mt-2 text-gray-600 dark:text-gray-400">{{ $errorMessage }}</p>
                    <div class="mt-6">
                        <a href="#" class="inline-flex items-center justify-center rounded-lg bg-brand-500 px-5 py-2.5 text-sm font-medium text-white ">
                            Upgrade Plan
                        </a>
                    </div>
                </div>
            @else

            <div class="grid grid-cols-1 gap-6 ">
              <div class="space-y-6">
                <div
                  class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
                >
                  <div
                    class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800"
                  >
                    <form method="POST" action="{{ route('tmplts.store') }}" enctype="multipart/form-data" id="uploadForm" 
                      @submit.prevent="handleUpload">
                      @csrf
                      <div class="-mx-2.5 flex flex-wrap gap-y-5">
                        <div class="w-full px-2.5">
                          <label
                            class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
                          >
                            Upload Template (PDF)
                           </label>
                          <input type="file"
                                name="template_file"
                                id="template_file"
                                accept="application/pdf"
                                required
                                class="focus:border-ring-brand-300 shadow-theme-xs focus:file:ring-brand-300 h-11 w-full overflow-hidden rounded-lg border border-gray-300 bg-transparent text-sm text-gray-500 transition-colors file:mr-5 file:border-collapse file:cursor-pointer file:rounded-l-lg file:border-0 file:border-r file:border-solid file:border-gray-200 file:bg-gray-50 file:py-3 file:pr-3 file:pl-3.5 file:text-sm file:text-gray-700 placeholder:text-gray-400 hover:file:bg-gray-100 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:text-white/90 dark:file:border-gray-800 dark:file:bg-white/[0.03] dark:file:text-gray-400 dark:placeholder:text-gray-400">
                        </div>

                        <div class="w-full px-2.5">
                          <label
                            class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400"
                          >
                            Select Category
                          </label>
                          <input type="hidden" id="category_id" name="category_id" value="0">
                          <div class="card-body">
                            <div id="tree"></div>
                          </div>
                        </div>

                        <div class="w-full px-2.5">
                          <button
                            type="submit"
                            class="bg-brand-500  flex w-lg items-center justify-center gap-2 rounded-lg p-3 text-sm font-medium text-white "
                          >
                            Upload Template
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>

            @endif

            <!-- Progress Modal Popup -->
            <div x-show="uploading" class="custom-modal-backdrop" x-cloak>
              <div class="w-full max-w-md rounded-2xl bg-white p-8 shadow-2xl dark:bg-gray-900">
                <div class="text-center">
                  <div class="mb-4 flex justify-center">
                    <svg class="h-12 w-12 animate-spin text-brand-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                  </div>
                  <h3 class="mb-2 text-xl font-bold text-gray-800 dark:text-white">Uploading Template</h3>
                  <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Please do not close this window or refresh the page while the file is being processed.</p>
                  <div class="progress-bar-container">
                    <div class="progress-bar-moving"></div>
                  </div>
                </div>
              </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" width="24" height="24"><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" class="font-bold text-lg">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:red">*</span></label>
        <input type="text" name="category_name" placeholder="e.g. HR Documents" required maxlength="100" autocomplete="off"/>
      </div>

      <div class="form-grid grid grid-cols-2 gap-4">
        <div class="form-row">
          <label>Status <span style="color: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" rows="3" placeholder="Optional description..."></textarea>
      </div>

      <div class="modal-btns">
        <button type="button" class="px-4 py-2 border rounded-lg" 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="22" height="22"><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 class="font-bold text-lg">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:red">*</span></label>
        <input type="text" name="category_name" id="edit-name" required maxlength="100"/>
      </div>

      <div class="form-grid grid grid-cols-2 gap-4">
        <div class="form-row">
          <label>Status <span style="color: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" rows="3"></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" class="px-4 py-2 border rounded-lg" onclick="closeEditModal()">Cancel</button>
        <button type="submit" class="btn-submit">Update</button>
      </div>
    </form>
</div>

{{-- ═══════════════════════════════════════════════
     DELETE CONFIRM MODAL
═══════════════════════════════════════════════ --}}
<div class="offcanvas-backdrop" id="del-backdrop" style="display:none; z-index:9999999;" onclick="closeDelModal()"></div>
<div class="custom-modal-backdrop" id="del-modal" style="display:none; z-index:99999999;">
  <div class="bg-white p-8 rounded-2xl max-w-sm  text-center shadow-2xl">
    <div class="text-red-500 mb-4 flex justify-center">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="48" height="48"><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 class="text-xl font-bold mb-2">Delete Category?</h3>
    <p class="text-gray-500 text-sm mb-6">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="flex gap-3 justify-center">
        <button type="button" class="px-6 py-2 border rounded-lg text-sm" onclick="closeDelModal()">Cancel</button>
        <button type="submit" class="px-6 py-2 bg-red-500 text-white rounded-lg text-sm font-medium">Yes, Delete</button>
      </div>
    </form>
  </div>
</div>

@endsection

<script>
/* ════════════════════════════════════════════════
   RESTORED FULL TREE LOGIC
════════════════════════════════════════════════ */
const rawCategories = @json($categories);

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;
let activeId = 0;

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>`,
};

/* ════════════════════════════════════════════════
   MODAL CONTROL 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'); 
}

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-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'); 
}

function openDelModal(id, name) {
  document.getElementById('del-name').textContent = name;
  document.getElementById('del-form').action = `/categories/${id}`;
  document.getElementById('del-backdrop').style.display = 'block';
  document.getElementById('del-modal').style.display = 'flex';
}
function closeDelModal() { 
  document.getElementById('del-backdrop').style.display = 'none';
  document.getElementById('del-modal').style.display = 'none'; 
}

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

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';
  
  // Plus icon for everyone
  acts.appendChild(mkBtn('b-subfolder', 'Add sub-category', S.plus, () => openAddModal(node.category_id, 'child')));
  
  // Edit and Delete only for real categories
  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.getElementById('category_id').value = activeId;
    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');
  if (!el) return;
  el.innerHTML = '';

  // Create virtual "Uncategorized" root node
  const uncategorizedRoot = {
    category_id: 0,
    category_name: 'Uncategorized',
    category_status: 1,
    children: treeData
  };

  el.appendChild(renderNode(uncategorizedRoot));
}

document.addEventListener('DOMContentLoaded', function () {
    renderTree();
});
</script>