@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; }
</style>
@endsection
@section('content')

          <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 flattened version.');
                            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>
  <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 -->

            <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">
                          <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
                            <!-- <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M4.98481 2.44399C3.11333 1.57147 1.15325 3.46979 1.96543 5.36824L3.82086 9.70527C3.90146 9.89367 3.90146 10.1069 3.82086 10.2953L1.96543 14.6323C1.15326 16.5307 3.11332 18.4291 4.98481 17.5565L16.8184 12.0395C18.5508 11.2319 18.5508 8.76865 16.8184 7.961L4.98481 2.44399ZM3.34453 4.77824C3.0738 4.14543 3.72716 3.51266 4.35099 3.80349L16.1846 9.32051C16.762 9.58973 16.762 10.4108 16.1846 10.68L4.35098 16.197C3.72716 16.4879 3.0738 15.8551 3.34453 15.2223L5.19996 10.8853C5.21944 10.8397 5.23735 10.7937 5.2537 10.7473L9.11784 10.7473C9.53206 10.7473 9.86784 10.4115 9.86784 9.99726C9.86784 9.58304 9.53206 9.24726 9.11784 9.24726L5.25157 9.24726C5.2358 9.20287 5.2186 9.15885 5.19996 9.11528L3.34453 4.77824Z" fill="" />
                            </svg> -->
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>

            <!-- 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>
@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;

const S = {
  chev:   `<svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>`,
  plus:   ``, edit: ``, trash: ``,
  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>`,
};

function renderNode(node) {
  const hasChildren = node.children && node.children.length > 0;
  const isFolder    = 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;
  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';
  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 = '';
  if (!treeData.length) {
    el.innerHTML = '<div class="empty">No categories yet.</div>';
    return;
  }
  treeData.forEach(n => el.appendChild(renderNode(n)));
}
*/

function renderTree() {
  const el = document.getElementById('tree');
  if (!el) return;
  el.innerHTML = '';

  if (!treeData.length) {
    // We use the same styling as your "No Templates Found" section
    el.innerHTML = `
      <div class="empty">
        <h3 class="">No Categories yet.</h3><br>
        
        <a href="/categories" class="p-2 bg-brand-500 inline-flex items-center justify-center gap-2 rounded-lg px-8 py-3 text-sm font-medium text-white hover:bg-opacity-90 transition-all">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            Add Category
        </a>
      </div>
    `;
    return;
  }

  treeData.forEach(n => el.appendChild(renderNode(n)));
}

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