@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>
/* ── Upload Progress Popup (Determinate) ── */
.upload-overlay{
    position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(15,23,42,0.55);backdrop-filter:blur(6px);z-index:999999;
}
.upload-modal{
    width:92%;max-width:520px;background:#fff;border-radius:20px;padding:28px 28px 24px;
    box-shadow:0 24px 64px rgba(0,0,0,0.18);border:1px solid #e2e8f0;
}
.upload-modal h3{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 4px}
.upload-sub{font-size:13px;color:#64748b;margin-bottom:18px}
.upload-track{height:10px;background:#e2e8f0;border-radius:9999px;overflow:hidden;position:relative}
.upload-fill{height:100%;background:linear-gradient(90deg,#1a7a6e,#1a7a6e);border-radius:9999px;transition:width .25s ease;width:0%}
.upload-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;color:#475569}
.upload-pct{font-weight:700;color:#1a7a6e}
.upload-stage{font-size:12px;color:#334155;margin-top:8px;display:flex;align-items:center;gap:8px}
.upload-stage .dot{width:8px;height:8px;border-radius:50%;background:#1a7a6e;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.upload-stats{font-size:12px;color:#64748b;margin-top:6px}
.upload-actions{margin-top:18px;display:flex;gap:10px;justify-content:flex-end}
.upload-btn{padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid #e2e8f0;background:#fff;color:#334155}
.upload-btn.primary{background:#1a7a6e;border-color:#1a7a6e;color:#fff}
.upload-btn:disabled{opacity:.5;cursor:not-allowed}
.upload-error{margin-top:14px;padding:12px 14px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;color:#991b1b;font-size:13px}
.upload-icon-wrap{width:56px;height:56px;border-radius:16px;background:#eef2ff;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.upload-icon-wrap.error{background:#fef2f2}
.upload-icon-wrap.success{background:#ecfdf5}
[x-cloak]{display:none !important}
.custom-modal-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);z-index:999999}

/* ═══════════════════════════════════════════════
     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: #1a7a6e;
    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,
                progress: 0,
                stage: '',
                pageCurrent: 0,
                pageTotal: 0,
                bytesDone: 0,
                bytesTotal: 0,
                error: false,
                errorMsg: '',
                success: false,
                _xhr: null,
                gsAvailable: {{ $gs_available ? 'true' : 'false' }},
                formatBytes(b){ if(!b) return '0 B'; const u=['B','KB','MB','GB']; let i=0, n=b; while(n>=1024 && i<u.length-1){n/=1024;i++;} return n.toFixed(i===0?0:1)+' '+u[i]; },
                cancelUpload(){
                    if(this._xhr){ this._xhr.abort(); }
                    this.uploading=false; this.progress=0; this.stage=''; this.error=false;
                },
                retryUpload(){
                    this.error=false; this.errorMsg=''; this.handleUpload();
                },
                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) { alert('Please select a PDF.'); return; }
                    if (file.size > 25*1024*1024) { alert('File exceeds 25 MB limit.'); return; }
                    this.error=false; this.errorMsg=''; this.success=false;
                    this.uploading=true; this.progress=2; this.stage='Validating PDF…'; this.pageCurrent=0; this.pageTotal=0;
                    this.bytesDone=0; this.bytesTotal=file.size;
                    const formData = new FormData(document.getElementById('uploadForm'));
                    // Remove any stale manual_images
                    // pdf.js validation
                    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
                    try {
                        const pdfData = await file.arrayBuffer();
                        this.stage='Checking document security…'; this.progress=5;
                        const loadingTask = pdfjsLib.getDocument({data: pdfData});
                        loadingTask.onPassword = (upd, reason) => { throw new Error('Password protected PDFs are not allowed.'); };
                        const pdf = await loadingTask.promise;
                        const fieldObjects = await pdf.getFieldObjects();
                        const hasSig = fieldObjects && Object.values(fieldObjects).some(f=>f.type==='Sig');
                        if(hasSig) throw new Error('Digitally signed PDFs are not allowed. Please upload a flattened PDF.');
                        const perms = await pdf.getPermissions();
                        if(perms) throw new Error('This PDF has restricted permissions. Please upload an unrestricted PDF.');
                        this.pageTotal = pdf.numPages;
                        // Client rendering phase - always render because GS disabled
                        this.stage = this.pageTotal>1 ? `Preparing ${this.pageTotal} pages…` : 'Preparing page…';
                        this.progress=10;
                        for(let i=1;i<=pdf.numPages;i++){
                            this.pageCurrent=i;
                            this.stage=`Rendering page ${i} of ${pdf.numPages}…`;
                            this.progress = 10 + Math.round((i/pdf.numPages)*35);
                            const page = await pdf.getPage(i);
                            const viewport = page.getViewport({scale:1.5});
                            const canvas = document.createElement('canvas');
                            const ctx = canvas.getContext('2d');
                            canvas.height=viewport.height; canvas.width=viewport.width;
                            await page.render({canvasContext:ctx, viewport}).promise;
                            const blob = await new Promise(r=> canvas.toBlob(r,'image/jpeg',0.75));
                            formData.append('manual_images[]', blob, `page_${i}.jpg`);
                            // free
                            canvas.width=0; canvas.height=0;
                        }
                        this.stage='Uploading to server…'; this.progress=50;
                        // XHR with real progress
                        await new Promise((resolve, reject)=>{
                            const xhr = new XMLHttpRequest();
                            this._xhr = xhr;
                            xhr.open('POST', document.getElementById('uploadForm').action, true);
                            xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
                            xhr.setRequestHeader('X-CSRF-TOKEN','{{ csrf_token() }}');
                            xhr.upload.onprogress = (e)=>{
                                if(e.lengthComputable){
                                    this.bytesDone=e.loaded; this.bytesTotal=e.total;
                                    const pct = Math.round((e.loaded/e.total)*30);
                                    this.progress = 50 + pct;
                                    this.stage = `Uploading… ${this.formatBytes(e.loaded)} / ${this.formatBytes(e.total)}`;
                                }
                            };
                            xhr.onload = ()=>{
                                this._xhr=null;
                                let data=null;
                                try{ data = JSON.parse(xhr.responseText); }catch(e){ data=null; }
                                if(xhr.status>=200 && xhr.status<300 && data && data.status){
                                    this.progress=92; this.stage='Finalizing on server…';
                                    setTimeout(()=>{ this.progress=100; this.stage='Done — redirecting…'; this.success=true; }, 300);
                                    setTimeout(()=>{ window.location.href = data.redirect || '{{ route('template.index') }}'; resolve(); }, 800);
                                } else {
                                    let msg = (data && data.message) || (data && data.errors && Object.values(data.errors).flat().join(' ')) || 'Upload failed. Error has been logged. Please try again.';
                                    if(xhr.status===422 && data && data.errors){ msg = Object.values(data.errors).flat().join(' '); }
                                    this.error=true; this.errorMsg=msg;
                                    this.stage='Upload failed'; reject(new Error(msg));
                                }
                            };
                            xhr.onerror = ()=>{ this._xhr=null; this.error=true; this.errorMsg='Network error. Error has been logged. Please try again.'; this.stage='Network error'; reject(new Error('Network error')); };
                            xhr.onabort = ()=>{ this._xhr=null; this.stage='Cancelled'; reject(new Error('Aborted')); };
                            xhr.ontimeout = ()=>{ this._xhr=null; this.error=true; this.errorMsg='Upload timed out (300s). Error has been logged. Please try again.'; reject(new Error('Timeout')); };
                            xhr.timeout = 300000;
                            xhr.send(formData);
                        });
                    } catch(err){
                        if(err.message==='Aborted') { this.uploading=false; return; }
                        // Password/other validation errors already thrown
                        console.error(err);
                        this.error=true;
                        this.errorMsg = err.message || 'Upload failed. Error has been logged. Please try again.';
                        this.stage='Failed';
                        this.progress = Math.max(this.progress, 15);
                    }
                }
            }"
          >
            <!-- 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

            <!-- Upload Progress Popup — Determinate -->
            <div x-show="uploading" x-cloak class="upload-overlay" @click.self="/* block close while uploading */">
              <div class="upload-modal">
                <div class="upload-icon-wrap" :class="error ? 'error' : (success ? 'success' : '')">
                  <template x-if="!error && !success">
                    <svg class="h-7 w-7 animate-spin text-[#1a7a6e]" 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 12h4z"></path></svg>
                  </template>
                  <template x-if="error">
                    <svg class="h-7 w-7 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.75m9.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>
                  </template>
                  <template x-if="success">
                    <svg class="h-7 w-7 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                  </template>
                </div>
                <h3 class="text-center" x-text="error ? 'Upload failed' : (success ? 'Upload complete' : 'Uploading Template')"></h3>
                <p class="upload-sub text-center" x-text="error ? errorMsg : (success ? 'Redirecting to templates…' : 'Please don\'t close this window — we\'re preparing your PDF.')"></p>
                <div x-show="!error">
                  <div class="upload-track"><div class="upload-fill" :style="`width:${progress}%`"></div></div>
                  <div class="upload-meta"><span x-text="stage"></span><span class="upload-pct" x-text="progress + '%'"></span></div>
                  <div class="upload-stats">
                    <span x-show="pageTotal>0" x-text="`Page ${pageCurrent} of ${pageTotal}`"></span>
                    <span x-show="pageTotal>0 && bytesTotal>0"> • </span>
                    <span x-show="bytesTotal>0" x-text="formatBytes(bytesDone) + ' / ' + formatBytes(bytesTotal)"></span>
                  </div>
                  <div class="upload-stage" x-show="!success"><span class="dot"></span><span x-text="stage"></span></div>
                </div>
                <div x-show="error" class="upload-error" x-text="errorMsg"></div>
                <div class="upload-actions">
                  <template x-if="!error && !success">
                    <button type="button" class="upload-btn" @click="cancelUpload()">Cancel</button>
                  </template>
                  <template x-if="error">
                    <div style="display:flex;gap:10px">
                      <button type="button" class="upload-btn" @click="cancelUpload()">Close</button>
                      <button type="button" class="upload-btn primary" @click="retryUpload()">Retry again</button>
                    </div>
                  </template>
                </div>
                <p x-show="error" style="margin-top:10px;font-size:11px;color:#94a3b8;text-align:center">Error has been logged. If this persists, contact support with your file name.</p>
              </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>