@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="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6"
   >
   <!-- Breadcrumb Start -->
   <div x-data="{ pageName: `Transactions` }">
      <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 -->
   <!-- Content Start -->
   <!-- Table -->
   <div
      class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
      >
      <div
         class="flex flex-col justify-between gap-5 border-b border-gray-200 px-5 py-4 sm:flex-row lg:items-center dark:border-gray-800"
         >
         <div>
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
               Transactions
            </h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">
               Your most recent transactions list
            </p>
         </div>
         <div class="hidden flex-col gap-3 sm:flex sm:flex-row sm:items-center">
            <div class="relative">
               <span
                  class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-500 dark:text-gray-400"
                  >
                  <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="M3.04199 9.37363C3.04199 5.87693 5.87735 3.04199 9.37533 3.04199C12.8733 3.04199 15.7087 5.87693 15.7087 9.37363C15.7087 12.8703 12.8733 15.7053 9.37533 15.7053C5.87735 15.7053 3.04199 12.8703 3.04199 9.37363ZM9.37533 1.54199C5.04926 1.54199 1.54199 5.04817 1.54199 9.37363C1.54199 13.6991 5.04926 17.2053 9.37533 17.2053C11.2676 17.2053 13.0032 16.5344 14.3572 15.4176L17.1773 18.238C17.4702 18.5309 17.945 18.5309 18.2379 18.238C18.5308 17.9451 18.5309 17.4703 18.238 17.1773L15.4182 14.3573C16.5367 13.0033 17.2087 11.2669 17.2087 9.37363C17.2087 5.04817 13.7014 1.54199 9.37533 1.54199Z"
                        fill=""
                        />
                  </svg>
               </span>
               <input
                  type="text"
                  placeholder="Search..."
                  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 py-2.5 pr-4 pl-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden xl:w-[300px] dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
            </div>
            <div class="hidden lg:block">
               <select
                  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-white px-4 py-2.5 pr-11 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"
                  >
                  <option>Last 7 Days</option>
                  <option>Last 10 Days</option>
                  <option>Last 15 Days</option>
                  <option>Last 30 Days</option>
               </select>
            </div>
            <div>
               <button
                  class="hover:text-dark-900 shadow-theme-xs relative flex h-11 items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-3 whitespace-nowrap text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
                  >
                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="20"
                     height="20"
                     viewBox="0 0 20 20"
                     fill="none"
                     >
                     <path
                        d="M16.6661 13.3333V15.4166C16.6661 16.1069 16.1064 16.6666 15.4161 16.6666H4.58203C3.89168 16.6666 3.33203 16.1069 3.33203 15.4166V13.3333M10.0004 3.33325L10.0004 13.3333M6.14456 7.18708L9.9986 3.33549L13.8529 7.18708"
                        stroke="currentColor"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        />
                  </svg>
                  Export CSV
               </button>
            </div>
         </div>
      </div>
      <div x-data="transactionTableFull()" class="custom-scrollbar overflow-x-auto">
         <table class="w-full table-auto">
            <thead>
               <tr
                  class="border-b border-gray-200 dark:divide-gray-800 dark:border-gray-800"
                  >
                  <th class="p-4 whitespace-nowrap">
                     <div class="flex w-full items-center gap-3">
                        <label
                           class="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400"
                           >
                           <span class="relative">
                              <input
                                 type="checkbox"
                                 class="sr-only"
                                 x-model="selectAll"
                                 @change="toggleSelectAll()"
                                 />
                              <span
                                 :class="selectAll ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'"
                                 class="flex h-4 w-4 items-center justify-center rounded-sm border-[1.25px]"
                                 >
                                 <span :class="selectAll ? '' : 'opacity-0'">
                                    <svg
                                       width="12"
                                       height="12"
                                       viewBox="0 0 12 12"
                                       fill="none"
                                       xmlns="http://www.w3.org/2000/svg"
                                       >
                                       <path
                                          d="M10 3L4.5 8.5L2 6"
                                          stroke="white"
                                          stroke-width="1.6666"
                                          stroke-linecap="round"
                                          stroke-linejoin="round"
                                          />
                                    </svg>
                                 </span>
                              </span>
                           </span>
                        </label>
                        <p
                           class="text-theme-xs font-medium text-gray-500 dark:text-gray-400"
                           >
                           Order ID
                        </p>
                     </div>
                  </th>
                  <th
                     class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400"
                     >
                     <div
                        class="flex cursor-pointer items-center gap-3"
                        @click="sortBy('customer')"
                        >
                        <p
                           class="text-theme-xs font-medium text-gray-500 dark:text-gray-400"
                           >
                           Customer
                        </p>
                        <span class="flex flex-col gap-0.5">
                           <svg
                              :class="sort.key === 'customer' && sort.asc ? 'text-gray-800 dark:text-gray-400' : 'text-gray-300'"
                              width="8"
                              height="5"
                              viewBox="0 0 8 5"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              >
                              <path
                                 d="M4.40962 0.585167C4.21057 0.300808 3.78943 0.300807 3.59038 0.585166L1.05071 4.21327C0.81874 4.54466 1.05582 5 1.46033 5H6.53967C6.94418 5 7.18126 4.54466 6.94929 4.21327L4.40962 0.585167Z"
                                 fill="currentColor"
                                 />
                           </svg>
                           <svg
                              :class="sort.key === 'customer' && !sort.asc ? 'text-gray-800 dark:text-gray-400' : 'text-gray-300'"
                              width="8"
                              height="5"
                              viewBox="0 0 8 5"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              >
                              <path
                                 d="M4.40962 4.41483C4.21057 4.69919 3.78943 4.69919 3.59038 4.41483L1.05071 0.786732C0.81874 0.455343 1.05582 0 1.46033 0H6.53967C6.94418 0 7.18126 0.455342 6.94929 0.786731L4.40962 4.41483Z"
                                 fill="currentColor"
                                 />
                           </svg>
                        </span>
                     </div>
                  </th>
                  <th
                     class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400"
                     >
                     <div
                        class="flex cursor-pointer items-center gap-3"
                        @click="sortBy('email')"
                        >
                        <p
                           class="text-theme-xs font-medium text-gray-500 dark:text-gray-400"
                           >
                           Email
                        </p>
                        <span class="flex flex-col gap-0.5">
                           <svg
                              :class="sort.key === 'email' && sort.asc ? 'text-gray-800 dark:text-gray-400' : 'text-gray-300'"
                              width="8"
                              height="5"
                              viewBox="0 0 8 5"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              >
                              <path
                                 d="M4.40962 0.585167C4.21057 0.300808 3.78943 0.300807 3.59038 0.585166L1.05071 4.21327C0.81874 4.54466 1.05582 5 1.46033 5H6.53967C6.94418 5 7.18126 4.54466 6.94929 4.21327L4.40962 0.585167Z"
                                 fill="currentColor"
                                 />
                           </svg>
                           <svg
                              :class="sort.key === 'email' && !sort.asc ? 'text-gray-800 dark:text-gray-400' : 'text-gray-300'"
                              width="8"
                              height="5"
                              viewBox="0 0 8 5"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              >
                              <path
                                 d="M4.40962 4.41483C4.21057 4.69919 3.78943 4.69919 3.59038 4.41483L1.05071 0.786732C0.81874 0.455343 1.05582 0 1.46033 0H6.53967C6.94418 0 7.18126 0.455342 6.94929 0.786731L4.40962 4.41483Z"
                                 fill="currentColor"
                                 />
                           </svg>
                        </span>
                     </div>
                  </th>
                  <th
                     class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400"
                     >
                     <div
                        class="flex cursor-pointer items-center gap-3"
                        @click="sortBy('amount')"
                        >
                        <p
                           class="text-theme-xs font-medium text-gray-500 dark:text-gray-400"
                           >
                           Total Amount
                        </p>
                        <span class="flex flex-col gap-0.5">
                           <svg
                              :class="sort.key === 'amount' && sort.asc ? 'text-gray-800 dark:text-gray-400' : 'text-gray-300'"
                              width="8"
                              height="5"
                              viewBox="0 0 8 5"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              >
                              <path
                                 d="M4.40962 0.585167C4.21057 0.300808 3.78943 0.300807 3.59038 0.585166L1.05071 4.21327C0.81874 4.54466 1.05582 5 1.46033 5H6.53967C6.94418 5 7.18126 4.54466 6.94929 4.21327L4.40962 0.585167Z"
                                 fill="currentColor"
                                 />
                           </svg>
                           <svg
                              :class="sort.key === 'amount' && !sort.asc ? 'text-gray-800 dark:text-gray-400' : 'text-gray-300'"
                              width="8"
                              height="5"
                              viewBox="0 0 8 5"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              >
                              <path
                                 d="M4.40962 4.41483C4.21057 4.69919 3.78943 4.69919 3.59038 4.41483L1.05071 0.786732C0.81874 0.455343 1.05582 0 1.46033 0H6.53967C6.94418 0 7.18126 0.455342 6.94929 0.786731L4.40962 4.41483Z"
                                 fill="currentColor"
                                 />
                           </svg>
                        </span>
                     </div>
                  </th>
                  <th
                     class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400"
                     >
                     Due Date
                  </th>
                  <th
                     class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400"
                     >
                     Status
                  </th>
                  <th
                     class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400"
                     >
                     <div class="relative">
                        <span class="sr-only">Action</span>
                     </div>
                  </th>
               </tr>
            </thead>
            <tbody class="divide-x divide-y divide-gray-200 dark:divide-gray-800">
               <template x-for="row in paginatedRows" :key="row.id">
                  <tr class="transition hover:bg-gray-50 dark:hover:bg-gray-900">
                     <td class="p-4 whitespace-nowrap">
                        <div class="group flex items-center gap-3">
                           <label
                              class="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400"
                              >
                              <span class="relative">
                                 <input
                                    type="checkbox"
                                    class="sr-only"
                                    :value="row.id"
                                    x-model="selected"
                                    @change="updateSelectAll()"
                                    />
                                 <span
                                    :class="selected.includes(row.id) ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'"
                                    class="flex h-4 w-4 items-center justify-center rounded-sm border-[1.25px]"
                                    >
                                    <span
                                       :class="selected.includes(row.id) ? '' : 'opacity-0'"
                                       >
                                       <svg
                                          width="12"
                                          height="12"
                                          viewBox="0 0 12 12"
                                          fill="none"
                                          xmlns="http://www.w3.org/2000/svg"
                                          >
                                          <path
                                             d="M10 3L4.5 8.5L2 6"
                                             stroke="white"
                                             stroke-width="1.6666"
                                             stroke-linecap="round"
                                             stroke-linejoin="round"
                                             />
                                       </svg>
                                    </span>
                                 </span>
                              </span>
                           </label>
                           <a
                              href="single-transaction.html"
                              class="text-theme-xs font-medium text-gray-700 group-hover:underline dark:text-gray-400"
                              x-text="row.orderId"
                              ></a>
                        </div>
                     </td>
                     <td class="p-4 whitespace-nowrap">
                        <span
                           class="text-sm font-medium text-gray-700 dark:text-gray-400"
                           x-text="row.customer"
                           ></span>
                     </td>
                     <td class="p-4 whitespace-nowrap">
                        <p
                           class="text-sm text-gray-500 dark:text-gray-400"
                           x-text="row.email"
                           ></p>
                     </td>
                     <td class="p-4 whitespace-nowrap">
                        <p
                           class="text-sm text-gray-700 dark:text-gray-400"
                           x-text="row.amountDisplay"
                           ></p>
                     </td>
                     <td class="p-4 whitespace-nowrap">
                        <p class="text-sm text-gray-700 dark:text-gray-400">
                           <span x-text="row.dueDate"></span>
                        </p>
                     </td>
                     <td class="p-4 whitespace-nowrap">
                        <span
                           class="bg-success-50 dark:bg-success-500/15 text-success-700 dark:text-success-500 text-theme-xs rounded-full px-2 py-0.5 font-medium"
                           x-show="row.status === 'Completed'"
                           >Completed</span
                           >
                        <span
                           class="bg-warning-50 dark:bg-warning-500/15 text-warning-700 dark:text-warning-500 text-theme-xs rounded-full px-2 py-0.5 font-medium"
                           x-show="row.status === 'Pending'"
                           >Pending</span
                           >
                        <span
                           class="text-theme-xs rounded-full bg-red-50 px-2 py-0.5 font-medium text-red-700 dark:bg-red-500/15 dark:text-red-500"
                           x-show="row.status === 'Failed'"
                           >Failed</span
                           >
                     </td>
                     <td class="p-4 whitespace-nowrap">
                        <div x-data="dropdown()" class="relative flex justify-center">
                           <button
                              @click="toggle"
                              class="text-gray-500 dark:text-gray-400"
                              >
                              <svg
                                 class="fill-current"
                                 width="24"
                                 height="24"
                                 viewBox="0 0 24 24"
                                 fill="none"
                                 xmlns="http://www.w3.org/2000/svg"
                                 >
                                 <path
                                    fill-rule="evenodd"
                                    clip-rule="evenodd"
                                    d="M5.99902 10.245C6.96552 10.245 7.74902 11.0285 7.74902 11.995V12.005C7.74902 12.9715 6.96552 13.755 5.99902 13.755C5.03253 13.755 4.24902 12.9715 4.24902 12.005V11.995C4.24902 11.0285 5.03253 10.245 5.99902 10.245ZM17.999 10.245C18.9655 10.245 19.749 11.0285 19.749 11.995V12.005C19.749 12.9715 18.9655 13.755 17.999 13.755C17.0325 13.755 16.249 12.9715 16.249 12.005V11.995C16.249 11.0285 17.0325 10.245 17.999 10.245ZM13.749 11.995C13.749 11.0285 12.9655 10.245 11.999 10.245C11.0325 10.245 10.249 11.0285 10.249 11.995V12.005C10.249 12.9715 11.0325 13.755 11.999 13.755C12.9655 13.755 13.749 12.9715 13.749 12.005V11.995Z"
                                    fill=""
                                    />
                              </svg>
                           </button>
                           <div
                              x-show="open"
                              @click.outside="open = false"
                              class="shadow-theme-lg dark:bg-gray-dark fixed w-40 space-y-1 rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800"
                              x-ref="dropdown"
                              >
                              <button
                                 class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
                                 >
                              View More
                              </button>
                              <button
                                 class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
                                 >
                              Delete
                              </button>
                           </div>
                        </div>
                     </td>
                  </tr>
               </template>
            </tbody>
         </table>
      </div>
      <div
         class="border-t border-gray-200 px-5 py-4 dark:border-gray-800"
         x-data="transactionTableFull()"
         >
         <div class="flex justify-center pb-4 sm:hidden">
            <span class="block text-sm font-medium text-gray-500 dark:text-gray-400">
            Showing
            <span
               class="text-gray-800 dark:text-white/90"
               x-text="startEntry"
               ></span>
            to
            <span class="text-gray-800 dark:text-white/90" x-text="endEntry"></span>
            of
            <span
               class="text-gray-800 dark:text-white/90"
               x-text="rows.length"
               ></span>
            </span>
         </div>
         <div class="flex items-center justify-between">
            <div class="hidden sm:block">
               <span
                  class="block text-sm font-medium text-gray-500 dark:text-gray-400"
                  >
               Showing
               <span
                  class="text-gray-800 dark:text-white/90"
                  x-text="startEntry"
                  ></span>
               to
               <span
                  class="text-gray-800 dark:text-white/90"
                  x-text="endEntry"
                  ></span>
               of
               <span
                  class="text-gray-800 dark:text-white/90"
                  x-text="rows.length"
                  ></span>
               </span>
            </div>
            <div
               class="flex w-full items-center justify-between gap-2 rounded-lg bg-gray-50 p-4 sm:w-auto sm:justify-normal sm:rounded-none sm:bg-transparent sm:p-0 dark:bg-gray-900 dark:sm:bg-transparent"
               >
               <button
                  class="shadow-theme-xs flex items-center gap-2 rounded-lg border border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-50 hover:text-gray-800 disabled:cursor-not-allowed disabled:opacity-50 sm:p-2.5 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
                  :disabled="page === 1"
                  @click="page > 1 && page--"
                  >
                  <span>
                     <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="M2.58203 9.99868C2.58174 10.1909 2.6549 10.3833 2.80152 10.53L7.79818 15.5301C8.09097 15.8231 8.56584 15.8233 8.85883 15.5305C9.15183 15.2377 9.152 14.7629 8.85921 14.4699L5.13911 10.7472L16.6665 10.7472C17.0807 10.7472 17.4165 10.4114 17.4165 9.99715C17.4165 9.58294 17.0807 9.24715 16.6665 9.24715L5.14456 9.24715L8.85919 5.53016C9.15199 5.23717 9.15184 4.7623 8.85885 4.4695C8.56587 4.1767 8.09099 4.17685 7.79819 4.46984L2.84069 9.43049C2.68224 9.568 2.58203 9.77087 2.58203 9.99715C2.58203 9.99766 2.58203 9.99817 2.58203 9.99868Z"
                           fill=""
                           />
                     </svg>
                  </span>
               </button>
               <span
                  class="block text-sm font-medium text-gray-700 sm:hidden dark:text-gray-400"
                  >
               Page <span x-text="page"></span> of <span x-text="totalPages"></span>
               </span>
               <ul class="hidden items-center gap-0.5 sm:flex">
                  <template x-for="n in totalPages" :key="n">
                     <li>
                        <a
                           href="#"
                           @click.prevent="goToPage(n)"
                           :class="page === n ? 'bg-brand-500 text-white' : 'hover:bg-brand-500 text-gray-700 dark:text-gray-400 hover:text-white dark:hover:text-white'"
                           class="flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium"
                           >
                        <span x-text="n"></span>
                        </a>
                     </li>
                  </template>
               </ul>
               <button
                  class="shadow-theme-xs flex items-center gap-2 rounded-lg border border-gray-300 bg-white p-2 text-gray-700 hover:bg-gray-50 hover:text-gray-800 disabled:cursor-not-allowed disabled:opacity-50 sm:p-2.5 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
                  :disabled="page === totalPages"
                  @click="page < totalPages && page++"
                  >
                  <span>
                     <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="M17.4165 9.9986C17.4168 10.1909 17.3437 10.3832 17.197 10.53L12.2004 15.5301C11.9076 15.8231 11.4327 15.8233 11.1397 15.5305C10.8467 15.2377 10.8465 14.7629 11.1393 14.4699L14.8594 10.7472L3.33203 10.7472C2.91782 10.7472 2.58203 10.4114 2.58203 9.99715C2.58203 9.58294 2.91782 9.24715 3.33203 9.24715L14.854 9.24715L11.1393 5.53016C10.8465 5.23717 10.8467 4.7623 11.1397 4.4695C11.4327 4.1767 11.9075 4.17685 12.2003 4.46984L17.1578 9.43049C17.3163 9.568 17.4165 9.77087 17.4165 9.99715C17.4165 9.99763 17.4165 9.99812 17.4165 9.9986Z"
                           fill=""
                           />
                     </svg>
                  </span>
               </button>
            </div>
         </div>
      </div>

      
   </div>
   <!-- Tree view -->
   <br>
   <div class="card ">
            <div class="card-header">
                <h2>Document Templates</h2>
                <div class="header-right">
                <span class="badge-count" id="count">0 items</span>
                <button class="btn-root" onclick="openModal(null,'folder')">
                    <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 Folder
                </button>
                </div>
            </div>
            <div class="card-body">
                <div id="tree"></div>
            </div>
            </div>

            <!-- Modal -->
            <div class="modal-backdrop" id="modal">
            <div class="modal">
                <div class="modal-hd">
                <div class="modal-ico folder" id="m-ico"></div>
                <div>
                    <h3 id="m-title">Add Folder</h3>
                    <p id="m-sub">Will be added at root level</p>
                </div>
                </div>
                <label for="m-inp">Name</label>
                <input type="text" id="m-inp" placeholder="Enter name..." autocomplete="off"/>
                <div class="modal-btns">
                <button onclick="closeModal()">Cancel</button>
                <button class="confirm" onclick="confirmAdd()">Add</button>
                </div>
            </div>
   </div>
      <!-- Tree view -->
   <!-- Content End -->
</div>





@endsection

@section('scripts')

<script>
    /* ── SVGs ── */
    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>`,
    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>`,
    folderM:`<svg viewBox="0 0 22 18" fill="none" width="17" height="14"><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>`,
    docM:`<svg viewBox="0 0 17 20" fill="none" width="14" height="17"><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"/></svg>`,
    };

    /* ── Data ── */
    let data = [
    { id:1, label:"Uncategorized", type:"folder", open:true, children:[
        { id:11, label:"Sale Deed", type:"doc" },
        { id:12, label:"Employee Onboarding", type:"doc" },
        { id:13, label:"Waiver of Liability", type:"doc" },
        { id:14, label:"Informed Consent", type:"doc" },
    ]},
    { id:2, label:"HR Documents", type:"folder", open:false, children:[
        { id:21, label:"Offer Letter", type:"doc" },
        { id:22, label:"NDA Template", type:"doc" },
        { id:23, label:"Policies", type:"folder", open:false, children:[
        { id:231, label:"Payroll Policy", type:"doc" },
        { id:232, label:"Leave Policy", type:"doc" },
        { id:233, label:"Benefits", type:"folder", open:false, children:[
            { id:2331, label:"Health Insurance Guide", type:"doc" },
            { id:2332, label:"Retirement Plan", type:"doc" },
        ]},
        ]},
    ]},
    { id:3, label:"Legal", type:"folder", open:false, children:[
        { id:31, label:"Service Agreement", type:"doc" },
        { id:32, label:"Privacy Policy", type:"doc" },
        { id:33, label:"Compliance", type:"folder", open:false, children:[
        { id:331, label:"GDPR Policy", type:"doc" },
        { id:332, label:"Data Retention", type:"doc" },
        ]},
    ]},
    ];

    let nextId  = 9000;
    let activeId = null;
    let mParent  = null;
    let mType    = 'folder';

    /* ── Modal ── */
    function openModal(parentId, type) {
    mParent = parentId;
    mType   = type;
    const isF = type === 'folder';
    document.getElementById('m-title').textContent = isF ? 'Add Folder' : 'Add Document';
    document.getElementById('m-sub').textContent   = parentId === null
        ? 'Will be added at root level'
        : 'Will be nested inside selected item';
    const ico = document.getElementById('m-ico');
    ico.className = 'modal-ico ' + (isF ? 'folder' : 'doc');
    ico.innerHTML = isF ? S.folderM : S.docM;
    document.querySelector('.modal-btns .confirm').textContent = isF ? 'Add Folder' : 'Add Document';
    const inp = document.getElementById('m-inp');
    inp.value = '';
    document.getElementById('modal').classList.add('show');
    setTimeout(() => inp.focus(), 60);
    }

    function closeModal() { document.getElementById('modal').classList.remove('show'); }

    function confirmAdd() {
    const name = document.getElementById('m-inp').value.trim();
    if (!name) { document.getElementById('m-inp').focus(); return; }
    const node = { id: nextId++, label: name, type: mType,
        ...(mType==='folder' ? { open:true, children:[] } : {}) };
    if (mParent === null) {
        data.push(node);
    } else {
        const r = findNode(data, mParent);
        if (r) { if (!r.node.children) r.node.children = []; r.node.children.push(node); r.node.open = true; }
    }
    closeModal();
    renderTree();
    }

    document.getElementById('m-inp').addEventListener('keydown', e => {
    if (e.key==='Enter')  confirmAdd();
    if (e.key==='Escape') closeModal();
    });
    document.getElementById('modal').addEventListener('click', e => {
    if (e.target===document.getElementById('modal')) closeModal();
    });

    /* ── Helpers ── */
    function findNode(nodes, id) {
    for (const n of nodes) {
        if (n.id===id) return { node:n, parent:nodes };
        if (n.children) { const r=findNode(n.children,id); if (r) return r; }
    }
    return null;
    }

    function deleteNode(id) {
    (function rm(nodes) {
        const i = nodes.findIndex(n=>n.id===id);
        if (i>-1) { nodes.splice(i,1); return true; }
        for (const n of nodes) if (n.children && rm(n.children)) return true;
    })(data);
    if (activeId===id) activeId=null;
    renderTree();
    }

    function countAll(nodes) {
    let c=0;
    for (const n of nodes) { c++; if (n.children) c+=countAll(n.children); }
    return c;
    }

    function btn(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 ── */
    function renderNode(node) {
    const isF = node.type === 'folder';
    const wrap = document.createElement('div');
    wrap.className = 'tree-node';

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

    /* chevron */
    if (isF) {
        const ch = document.createElement('div');
        ch.className = 'chevron' + (node.open ? '' : ' closed');
        ch.innerHTML = S.chev;
        ch.addEventListener('click', e => { e.stopPropagation(); node.open=!node.open; renderTree(); });
        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=isF?S.folder:S.doc; row.appendChild(ico);

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

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

    if (isF) {
        acts.appendChild(btn('b-folder', 'Add sub-folder', S.plus, () => openModal(node.id,'folder')));
        acts.appendChild(btn('b-doc',    'Add document',   S.plus, () => openModal(node.id,'doc')));
    } else {
        /* docs can also get a sub-folder added — convert to folder on-the-fly? 
        Instead: clicking + on a doc adds a sibling doc. Keep it simple: 
        show only delete for docs. */
    }
    acts.appendChild(btn('b-del', 'Delete', S.trash, () => deleteNode(node.id)));
    row.appendChild(acts);
    row.addEventListener('click', () => { activeId=node.id; renderTree(); });
    wrap.appendChild(row);

    /* ── children: always render, toggle via CSS class ── */
    if (isF) {
        const cw = document.createElement('div');
        cw.className = 'children-wrap' + (node.open ? '' : ' closed');
        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 (!data.length) {
        el.innerHTML = '<div class="empty">No items yet — click "Add Folder" to get started.</div>';
    } else {
        data.forEach(n => el.appendChild(renderNode(n)));
    }
    document.getElementById('count').textContent = countAll(data) + ' items';
    }

    renderTree();
</script>
@endsection