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

@section('styles')
<style>
    /*
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    */

    :root {
      --bg-page:      #f1f5f9;
      --bg-card:      #ffffff;
      --border:       #e2e8f0;
      --text-primary: #1e293b;
      --text-muted:   #94a3b8;
      --accent:       #3b82f6;
      --accent-light: #eff6ff;
      --green:        #16a34a;
      --green-h:      #15803d;
      --red:          #dc2626;
      --red-h:        #b91c1c;
      --blue:         #3b82f6;
      --blue-h:       #2563eb;
      --row-hover:    #f8fafc;
      --shadow:       0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    }

    /*
    body {
      font-family: 'Outfit', sans-serif;
      background: var(--bg-page);
      color: var(--text-primary);
      min-height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 40px 20px;
    }
    */

    .card {
      background: var(--bg-card);
      border-radius: 12px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
      width: 100%;
      /*max-width: 540px;*/
      overflow: hidden;
    }

    .card-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .card-header h2 { font-size: 15px; font-weight: 600; }
    .header-right { display: flex; align-items: center; gap: 8px; }

    .badge-count {
      font-size: 11.5px; color: var(--text-muted);
      background: #f1f5f9; padding: 3px 10px;
      border-radius: 20px; border: 1px solid var(--border);
    }

    .btn-root {
      display: flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 500; font-family: inherit;
      color: #fff; background: var(--green);
      border: none; border-radius: 6px;
      padding: 5px 12px; cursor: pointer;
      transition: background .12s;
    }
    .btn-root:hover { background: var(--green-h); }
    .btn-root svg { width: 10px; height: 10px; }

    .card-body { padding: 10px 8px 14px; }

    /* ── tooltip wrapper for action buttons ── */
    .tip { position: relative; display: inline-flex; }
    .tip::after {
      content: attr(data-tip);
      position: absolute; bottom: calc(100% + 5px); left: 50%;
      transform: translateX(-50%);
      background: #1e293b; color: #fff;
      font-size: 10.5px; white-space: nowrap;
      padding: 3px 7px; border-radius: 4px;
      pointer-events: none; opacity: 0;
      transition: opacity .12s;
    }
    .tip:hover::after { opacity: 1; }

    /* ── tree rows ── */
    .tree-node { user-select: none; }

    .tree-row {
      display: flex; align-items: center; gap: 4px;
      padding: 4px 6px; border-radius: 6px;
      cursor: pointer; transition: background .1s; min-height: 32px;
    }
    .tree-row:hover { background: var(--row-hover); }
    .tree-row:hover .actions { opacity: 1; }
    .tree-row.active { background: var(--accent-light); }
    .tree-row.active .lbl { color: var(--accent); font-weight: 500; }

    .chevron {
      width: 16px; height: 16px; flex-shrink: 0;
      color: var(--text-muted);
      display: flex; align-items: center; justify-content: center;
      transition: transform .16s;
      border-radius: 3px;
    }
    .chevron svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .chevron.closed { transform: rotate(-90deg); }
    .chevron-ph { width: 16px; height: 16px; flex-shrink: 0; }

    .icon { width: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

    .lbl {
      font-size: 13.5px; color: var(--text-primary);
      flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .actions {
      display: flex; gap: 3px; align-items: center;
      opacity: 0; transition: opacity .1s; flex-shrink: 0;
    }

    .btn-act {
      width: 22px; height: 22px; border: none; border-radius: 4px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background .1s, transform .1s; flex-shrink: 0;
    }
    .btn-act:active { transform: scale(.9); }
    .btn-act svg { width: 11px; height: 11px; }

    .b-folder { background: #3b82f6; }
    .b-folder:hover { background: #2563eb; }
    .b-doc    { background: var(--green); }
    .b-doc:hover    { background: var(--green-h); }
    .b-del    { background: var(--red); }
    .b-del:hover    { background: var(--red-h); }

    /* ── n-level children — use large max-height trick ── */
    .children-wrap {
      overflow: hidden;
      max-height: 9999px;
      transition: max-height .25s ease, opacity .2s ease;
      opacity: 1;
    }
    .children-wrap.closed {
      max-height: 0 !important;
      opacity: 0;
      pointer-events: none;
    }

    .children-indent {
      margin-left: 14px;
      padding-left: 12px;
      border-left: 1.5px solid var(--border);
    }

    /* empty */
    .empty {
      text-align: center; padding: 28px 16px;
      color: var(--text-muted); font-size: 13px;
    }

    /* ── modal ── */
    .modal-backdrop {
      display: none; position: fixed; inset: 0;
      background: rgba(15,23,42,.3);
      z-index: 200;
      align-items: center; justify-content: center;
    }
    .modal-backdrop.show { display: flex; }

    .modal {
      background: #fff; border-radius: 10px; padding: 22px 24px;
      width: 340px; max-width: 92vw;
      box-shadow: 0 8px 32px rgba(0,0,0,.15);
      border: 1px solid var(--border);
    }
    .modal-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
    .modal-ico {
      width: 34px; height: 34px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .modal-ico.folder { background: #fef3c7; }
    .modal-ico.doc    { background: #dcfce7; }
    .modal-ico svg { width: 17px; height: 17px; }
    .modal h3 { font-size: 14px; font-weight: 600; line-height: 1.3; }
    .modal p  { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

    .modal label { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
    .modal input {
      width: 100%; border: 1px solid var(--border); border-radius: 7px;
      padding: 9px 12px; font-size: 13.5px; font-family: inherit;
      color: var(--text-primary); outline: none; transition: border .15s, box-shadow .15s;
    }
    .modal input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
    .modal-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
    .modal-btns button {
      padding: 7px 18px; border-radius: 7px; font-size: 13px;
      font-family: inherit; font-weight: 500; cursor: pointer;
      border: 1px solid var(--border); background: #fff;
      color: var(--text-primary); transition: background .12s;
    }
    .modal-btns .confirm { background: var(--accent); color: #fff; border-color: var(--accent); }
    .modal-btns .confirm:hover { background: #2563eb; }
    .modal-btns button:not(.confirm):hover { background: var(--row-hover); }
  </style>
@endsection

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

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

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

</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@endsection

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

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

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

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

/* ════════════════════════════════════════════════
   ADD MODAL
════════════════════════════════════════════════ */
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-modal').classList.add('show');
}
function closeAddModal() { document.getElementById('add-modal').classList.remove('show'); }

/* ════════════════════════════════════════════════
   EDIT MODAL — pre-fill from raw data
════════════════════════════════════════════════ */
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}`;   // adjust prefix if needed

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

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

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

/* close modals on backdrop click */
['add-modal','edit-modal','del-modal'].forEach(id => {
  document.getElementById(id).addEventListener('click', function(e) {
    if (e.target === this) this.classList.remove('show');
  });
});

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

/* ════════════════════════════════════════════════
   RENDER — 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);
    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 = '';
  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();

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