@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">
@endsection
@section('content')

          <div
            class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6"
          >
            <!-- 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="index.html"
        >
          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 -->

            <!-- ====== Form Layouts Section Start -->
            <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="px-5 py-4 sm:px-6 sm:py-5">
                    <h3
                      class="text-base font-medium text-gray-800 dark:text-white/90"
                    >
                      Example Form
                    </h3>
                  </div> -->
                  <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">
                      @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="text"
                            placeholder="Enter Name" name="name" value="{{ old('name') }}"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                          /> -->
                          <!-- <input 
                                type="file" 
                                name="template_file"
                                accept="application/pdf"
                                required
                                class="w-full rounded-lg border border-stroke bg-transparent py-3 px-5 text-black outline-none focus:border-primary dark:border-form-strokedark dark:bg-form-input dark:text-white"
                            > -->
                          <input type="file"
                                name="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="email"
                            placeholder="Enter email address"  name="email" value="{{ old('email') }}"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                          /> -->
                          <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 hover:bg-brand-600 flex w-full items-center justify-center gap-2 rounded-lg p-3 text-sm font-medium text-white transition-colors"
                          >
                            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>
            <!-- ====== Form Layouts Section End -->
          </div>
 
          
        
@endsection



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

// 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:   ``,
  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>`,
  
  //doc:    `<svg viewBox="0 0 17 20" fill="none" width="15" height="18"><path d="M2 1h9.5l4 4V19a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z" fill="#FEF3C7" stroke="#D97706" stroke-width=".9" stroke-linejoin="round"/><path d="M11.5 1v3.5H15.5" stroke="#D97706" stroke-width=".9" stroke-linecap="round" stroke-linejoin="round"/><line x1="4" y1="9" x2="12" y2="9" stroke="#D97706" stroke-width=".9" stroke-linecap="round"/><line x1="4" y1="12" x2="10" y2="12" stroke="#D97706" stroke-width=".9" stroke-linecap="round"/><line x1="4" y1="15" x2="9" y2="15" stroke="#D97706" stroke-width=".9" stroke-linecap="round"/></svg>`,
};

/* ════════════════════════════════════════════════
   RENDER — fully recursive, n-level deep
════════════════════════════════════════════════ */
function renderNode(node) {
  const hasChildren = node.children && node.children.length > 0;
  const isFolder    = hasChildren || parseInt(node.parent_id) === 0; // root items = folder style

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

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

  /* chevron or placeholder */
  if (hasChildren) {
    const ch = document.createElement('div');
    ch.className = 'chevron'; // default open
    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);
  }

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

  /* label */
  const lbl = document.createElement('span');
  lbl.className = 'lbl';
  lbl.textContent = node.category_name;
  row.appendChild(lbl);

  /* status badge */
  const sb = document.createElement('span');
  sb.className = 'status-badge status-' + node.category_status;
  //sb.textContent = parseInt(node.category_status) === 1 ? 'Active' : 'Inactive';
  row.appendChild(sb);

  /* actions */
  const acts = document.createElement('div');
  acts.className = 'actions';

  /*
  // Add sub-category (blue +)
  acts.appendChild(mkBtn('b-subfolder', 'Add sub-category', S.plus,
    () => openAddModal(node.category_id, 'child')));

  // Edit (amber)
  acts.appendChild(mkBtn('b-edit', 'Edit', S.edit,
    () => openEditModal(node.category_id)));

  // Delete (red)
  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);
    //alert(activeId);
    document.getElementById('category_id').value=activeId;
    document.querySelectorAll('.tree-row.active').forEach(r => r.classList.remove('active'));
    row.classList.add('active');
  });

  wrap.appendChild(row);

  /* children — recurse */
  if (hasChildren) {
    const cw = document.createElement('div');
    cw.className = 'children-wrap'; // open by default
    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 = '<h1>helow</h1>';
  el.innerHTML = '';
  if (!treeData.length) {
    el.innerHTML = '<div class="empty">No categories yet — click "Add Category" to get started.</div>';
    return;
  }
  treeData.forEach(n => el.appendChild(renderNode(n)));

  // update count
  document.getElementById('cat-count').textContent = rawCategories.length + ' items';
}

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

/* ════════════════════════════════════════════════
   Auto-dismiss flash after 4s
════════════════════════════════════════════════ */
document.querySelectorAll('.flash').forEach(f => {
  setTimeout(() => f.style.opacity = '0', 3500);
  setTimeout(() => f.remove(), 4000);
});
</script>