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

@section('styles')
{{-- Added Tree View Styles --}}
<link href="{{ asset('user/tree_view.css') }}" rel="stylesheet">
<style>
	/* ═══════════════════════════════════════════════
       FIX: REMOVE DOUBLE SCROLLBAR
    ═══════════════════════════════════════════════ */
    /* Prevents the outer browser window from scrolling concurrently with the inner content */
    html, body {
        overflow: hidden !important;
        height: 100% !important;
    }

    /* Tree view overrides for the off-canvas */
    #tree_edit {
        margin-top: 10px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 10px;
        max-height: 400px;
        overflow-y: auto;
    }
    .dark #tree_edit {
        border-color: #1f2937;
    }
    /* Restoring required styles from create page */
    .tree-row.active { background-color: rgba(60, 80, 224, 0.1); border-radius: 6px; }
    .dark .tree-row.active { background-color: rgba(60, 80, 224, 0.2); }

    /* ═══════════════════════════════════════════════
       OFFCANVAS STYLES FOR CATEGORY CRUD
    ═══════════════════════════════════════════════ */
    .offcanvas-backdrop-cat {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2px);
        z-index: 1000001; display: none; opacity: 0; transition: opacity 0.3s ease;
    }
    .offcanvas-backdrop-cat.show { display: block; opacity: 1; }
    
    .offcanvas-cat {
        position: fixed; top: 0; right: -450px; width: 400px; max-width: 90vw;
        height: 100%; background: #fff; box-shadow: -5px 0 25px rgba(0,0,0,0.1);
        z-index: 1000002; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex; flex-direction: column; padding: 24px; overflow-y: auto;
    }
    .offcanvas-cat.show { right: 0; }
    .btn-submit-cat { background: #3c50e0; color: white; padding: 10px 20px; border-radius: 6px; font-weight: 500; }
    .form-row-cat { margin-bottom: 15px; }
    .form-row-cat label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: #334155; }
    .form-row-cat input, .form-row-cat select, .form-row-cat textarea {
        width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px;
    }
</style>
@endsection

@section('content')
{{-- Added editCategoryId to x-data --}}
<div class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6" x-data="{ openPreview: false, previewUrl: '', openEdit: false, editId: '', editTitle: '', editCategoryId: '' }">

   <!-- Header -->
   <!-- Breadcrumb Start -->
   <div x-data="{ pageName: `Templates`}">
      <div class="flex flex-wrap items-center justify-between gap-3 pb-6">
        <div>
            <!-- Breadcrumbs placed above Document Templates -->
            <nav class="mb-2">
                <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="{{ route('dashboard') }}"
                         >
                         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"  style="margin-top:4px"
                      ></li>
                </ol>
            </nav>

            <!-- NEW HEADING, SUBHEADING AND POPOVER PLACEMENT -->
            <!--
			<h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
               
                @if($is_delete == 'Yes')
                    Trash Document Templates
                @elseif($draft == 'Yes')
                    Draft Document Templates
                @else
                    Document Templates
                @endif
               <span class="help-icon-wrapper">
                  <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                  <span class="help-popover-text" style="bottom: 100%;width:460px">
                        <span class="popover-header">Document Templates</span>
                        <span class="popover-body">Add PDF documents you use regularly, then edit their details or customize fields and signature areas. Once prepared, you can use them to send documents for signature. Learn More</span>
                  </span>
               </span>
            </h2>
           	
            <p class="text-sm text-gray-500 dark:text-gray-400">Manage and prepare documents you send for signature.</p>-->
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
                @if($is_delete == 'Yes')
                    Deleted Document Templates
                @elseif($draft == 'Yes')
                    Draft Document Templates
                @else
                    Document Templates
                @endif

                <span class="help-icon-wrapper">
                    <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="help-popover-text" style="bottom: 100%;width:460px">
                        <span class="popover-header">
                            @if($is_delete == 'Yes')
                                Deleted Document Templates
                            @elseif($draft == 'Yes')
                                Draft Document Templates
                            @else
                                Document Templates
                            @endif
                        </span>
                        <span class="popover-body">
                            @if($is_delete == 'Yes')
                                View templates that have been moved to the trash. You can restore them to make them available again, or delete them permanently from your workspace.
                            @elseif($draft == 'Yes')
                                Templates that are still being set up or edited. Complete field placements, configure signer roles, and finalize them before they can be used for signing.
                            @else
                                Add PDF documents you use regularly, then edit their details or customize fields and signature areas. Once prepared, you can use them to send documents for signature. Learn More
                            @endif
                        </span>
                    </span>
                </span>
            </h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                @if($is_delete == 'Yes')
                    View, restore, or permanently remove deleted document templates.
                @elseif($draft == 'Yes')
                    Review and finish setting up your draft templates before sending.
                @else
                    Manage and prepare documents you send for signature.
                @endif
            </p>
        </div>

        <!-- Add Template Button placed where Breadcrumbs were -->
        <div class="flex gap-3">
            @php
                $canAdd = session('can_add_more_template') === 'Yes';
                $hasStorage = session('is_plan_has_storage') === 'Yes';
                
                // Determine if we should allow the link or show the popover
                $isAllowed = $canAdd && $hasStorage;

                // Set the specific error message
                $errorMessage = '';
                if (!$canAdd) {
                    $errorMessage = 'You reached your template limit';
                } elseif (!$hasStorage) {
                    $errorMessage = 'You reached plan storage limit';
                }
            @endphp

            <div class="relative inline-block" x-data="{ open: false }">
                @if($isAllowed && !request()->has('trash'))
                    <a
                        href="{{ route('template.create') }}"
                        class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm"
                    >
                        + Add Template
                    </a>
                @elseif(!request()->has('trash'))
                    <!-- DISABLED BUTTON (Shows Popover) -->
                    <button
                        type="button"
                        @click="open = !open"
                        class="bg-gray-400 text-white px-4 py-2 rounded-lg text-sm cursor-pointer opacity-80"
                    >
                        + Add Template
                    </button>

                    <!-- ALPHINE POPOVER -->
                    <div 
                        x-show="open" 
                        x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0 translate-y-1"
                        x-transition:enter-end="opacity-100 translate-y-0"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="opacity-100 translate-y-0"
                        x-transition:leave-end="opacity-0 translate-y-1"
                        @click.away="open = false"
                        class="absolute z-10 bottom-full mb-3 left-1/2 -translate-x-1/2 w-48 p-2 bg-gray-900 text-white text-center text-xs rounded-lg shadow-xl"
                        style="display: none;width:150px"
                    >
                        <!-- Popover Arrow -->
                        <div class="absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent border-t-gray-900"></div>
                        
                        {{ $errorMessage }}
                    </div>
                @endif
            </div>
        </div>
      </div>
   </div>
   <!-- Breadcrumb End -->

   <!-- filter start -->
    {{-- Removed overflow-hidden below so the dropdown isn't clipped --}}
    <div class="rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    
        
        @if(isset($templates) && count($templates) > 0)
        <div class=" border-gray-200 px-5 py-4 dark:border-gray-800">
            <div class="flex gap-3 sm:justify-between">
            
            {{-- Second Search Box wrapped in form to match the first search box functionality --}}
            <form method="GET" action="{{ route('tmplts.index') }}" class="relative flex-1 sm:flex-auto">
                <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"
                name="search"
                value="{{ request('search') }}"
                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 sm:w-[300px] sm:min-w-[300px] dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                />
            </form>

            <!-- filter -->
            <div class="relative" x-data="{ showFilter: false }">
                <button
                    class="shadow-theme-xs flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 sm:w-auto sm:min-w-[100px] dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
                    @click="showFilter = !showFilter"
                    type="button"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M14.6537 5.90414C14.6537 4.48433 13.5027 3.33331 12.0829 3.33331C10.6631 3.33331 9.51206 4.48433 9.51204 5.90415M14.6537 5.90414C14.6537 7.32398 13.5027 8.47498 12.0829 8.47498C10.663 8.47498 9.51204 7.32398 9.51204 5.90415M14.6537 5.90414L17.7087 5.90411M9.51204 5.90415L2.29199 5.90411M5.34694 14.0958C5.34694 12.676 6.49794 11.525 7.91777 11.525C9.33761 11.525 10.4886 12.676 10.4886 14.0958M5.34694 14.0958C5.34694 15.5156 6.49794 16.6666 7.91778 16.6666C9.33761 16.6666 10.4886 15.5156 10.4886 14.0958M5.34694 14.0958L2.29199 14.0958M10.4886 14.0958L17.7087 14.0958" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Filter
                </button>
                
                <!-- Filter Dropdown - Increased width to w-80 -->
                <div
                    x-show="showFilter"
                    x-cloak
                    @click.away="showFilter = false"
                    class="absolute right-0 z-50 mt-2 w-80 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800"
                    style="width: 230px;"
                >
                    <form method="GET" action="{{ route('tmplts.index') }}">
                        {{-- Keep search and draft params if they exist --}}
                        @if(request('search'))
                            <input type="hidden" name="search" value="{{ request('search') }}">
                        @endif
                        @if(request('draft'))
                            <input type="hidden" name="draft" value="Yes">
                        @endif

                        {{-- Date Range in one row --}}
                        <div class="mb-6">
                            <label class="mb-2 block text-xs font-medium text-gray-700 dark:text-gray-300">
                                Created Date Range
                            </label>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <p class="text-[10px] text-gray-400 uppercase mb-1">Start Date</p>
                                    <input
                                        type="date"
                                        name="start_date"
                                        value="{{ request('start_date') }}"
                                        x-on:click.stop="$el.showPicker()"
                                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-2 py-2 text-xs text-gray-800 dark:border-gray-700 dark:text-white/90"
                                    />
                                </div>
                                <div>
                                    <p class="text-[10px] text-gray-400 uppercase mb-1">End Date</p>
                                    <input
                                        type="date"
                                        name="end_date"
                                        value="{{ request('end_date') }}"
                                        x-on:click.stop="$el.showPicker()"
                                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-2 py-2 text-xs text-gray-800 dark:border-gray-700 dark:text-white/90"
                                    />
                                </div>
                            </div>
                        </div>

                        <div class="flex gap-2">
                            <a href="{{ route('tmplts.index', request()->only(['search', 'draft'])) }}" class="flex-1 text-center bg-gray-100 hover:bg-gray-200 text-gray-700 h-10 rounded-lg px-3 py-2 text-sm font-medium dark:bg-white/5 dark:text-gray-300">
                                Clear
                            </a>
                            <button type="submit" class="flex-1 bg-brand-500 hover:bg-brand-600 h-10 rounded-lg px-3 py-2 text-sm font-medium text-white">
                                Apply
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- filter -->

            </div>
        </div>
        @endif
    </div>
   <!-- filter end -->

   <!-- Mobile/Tablet View (Expandable List) -->
   <div class="mt-6 block lg:hidden space-y-px bg-white dark:bg-white/[0.03] rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden">
        <div class="grid grid-cols-[auto_1fr_auto] items-center p-4 bg-gray-50/50 dark:bg-white/5 border-b border-gray-200 dark:border-gray-800">
            <div class="w-10"></div>
            <span class="text-xs font-bold uppercase tracking-wider text-gray-500">Name</span>
            <span class="text-xs font-bold uppercase tracking-wider text-gray-500"><!--Action--></span>
        </div>

        @forelse($templates as $key => $template)
        <div x-data="{ expanded: false }" class="border-b last:border-b-0 border-gray-200 dark:border-gray-800">
            <!-- Row Header -->
            <div class="flex items-center p-4 gap-3">
                <!-- Toggle Button -->
                <button @click="expanded = !expanded" class="p-1 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-500">
                    <svg :class="expanded ? 'rotate-180' : ''" class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>

                <!-- Avatar/Initials -->
                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-brand-50 text-brand-600 font-bold dark:bg-brand-500/10 dark:text-brand-500">
                    {{ strtoupper(substr($template->template_title, 0, 2)) }}
                </div>

                <!-- Title & Info -->
                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-bold text-red-800 dark:text-red-500 truncate">
                        {{ $template->template_title }}
                        @if($template->template_draft=="Yes")
                            <span class="ml-1 inline-flex items-center rounded-full bg-error-500 px-1.5 py-0.5 text-[10px] font-medium text-white">Draft</span>
                        @endif
                    </h4>
                    <p class="text-xs text-gray-500 truncate">{{ $template->category_id == 0 ? 'Uncategorized' : $template->category_name }}</p>
                </div>

                <!-- Action Dropdown -->
                <div x-data="dropdown()" class="relative">
                    <button @click="toggle" class="p-2 text-gray-400"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg></button>
                    <div x-show="open" @click.outside="open = false" class="absolute right-0 z-20 w-40 mt-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl shadow-lg p-2">
                        @if($template->is_delete == 'Yes')
                                {{-- RESTORE LINK --}}
                                <a href="{{ route('templates.restore', $template->template_uuid) }}" 
                                class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg">
                                Restore
                                </a>

                                {{-- PERMANENT DELETE FORM --}}
                                <form action="{{ route('templates.permanent_delete', $template->template_uuid) }}" method="POST" onsubmit="return confirm('Do you really want to delete this template?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg">
                                        Permanently Delete
                                    </button>
                                </form>
                        @else
                            <button @click="openEdit = true; editId = '{{ $template->template_id }}'; editTitle = '{{ addslashes($template->template_title) }}'.replace(/\.[^/.]+$/, ''); editCategoryId = '{{ $template->category_id }}'; open = false" class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg text-left">Edit Properties</button>
                            
                            <a href="/customize/{{ $template->template_uuid }}" class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg text-left">Edit Fields</a>
                            @if(session('can_add_more_template') === 'Yes' && session('is_plan_has_storage') === 'Yes')
                            <form action="{{ route('tmplts.copy', $template->template_id) }}" method="POST"  onsubmit="return confirm('Copy this template?')">
                                @csrf
                                <button type="submit" class="text-xs flex w-full rounded-lg px-3 py-2 text-left text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5">
                                    Make a copy
                                </button>
                            </form>
                            @endif

                            @if($template->template_draft=="Yes")
                                <a href="/save_as_template/{{ $template->template_uuid }}" class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg">Save as Template</a>
                            @else 
                                <a href="/save_as_draft/{{ $template->template_uuid }}" class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg">Save as Draft</a>
                            @endif

                            {{-- 🚀 MOBILE PREVIEW --}}
                            <button @click="previewUrl = '{{ $baseUrl }}/{{ $template->template_file }}'; openPreview = true; open = false" class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg text-left">Preview</button>

                            {{-- 🚀 MOBILE DOWNLOAD --}}
                            <a target="_blank"  href="{{ $baseUrl }}/{{ $template->template_file }}" download="{{ $template->template_title }}" class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg text-left">Download</a>

                            <form action="{{ route('tmplts.destroy', $template->template_id) }}" method="POST" onsubmit="return confirm('Delete this Template?')">
                                @csrf @method('DELETE')
                                <button class="text-xs flex w-full px-3 py-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg text-left">Delete</button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Expanded Content -->
            <div x-show="expanded" x-collapse x-cloak class="bg-gray-50/50 dark:bg-white/[0.01] px-14 pb-4">
                <div class="grid grid-cols-2 gap-4 border-t border-gray-100 dark:border-gray-800 pt-4 ml-4">
                    <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400">Template Type</p>
                        @if($template->template_type=="Fillable")
                            <span class="text-xs font-semibold text-green-600">Fillable</span>
                        @else
                            <span class="text-xs font-semibold text-red-600">Raw</span>
                        @endif
                    </div>
                    <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400">Signers</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200">{{ $template->template_no_of_signers }}</p>
                    </div>
                    <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400">Date Added</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200">{{ \Carbon\Carbon::parse($template->template_created_at)->format('d M Y') }}</p>
                    </div>
                    <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400">ID</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200">#{{ ($templates->currentPage() - 1) * $templates->perPage() + $loop->iteration }}</p>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="p-8 text-center text-gray-500">No templates available</div>
        @endforelse
   </div>

   <!-- Desktop Table View -->
   <div class="mt-6 hidden lg:block overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="overflow-x-auto">
         <table class="w-full table-auto">
            <thead>
               @if(isset($templates) && count($templates) > 0)
               <tr class="border-b dark:border-gray-800">
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">#</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Template</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Type</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Signers</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Category</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Date Added</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400"><!--Action--></th>
               </tr>
               @endif
            </thead>

            <tbody class="divide-y dark:divide-gray-800">
               @forelse($templates as $key => $template)
               <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
                  <td class="p-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-400">
                      {{ ($templates->currentPage() - 1) * $templates->perPage() + $loop->iteration }}
                  </td>
                  <td  class="p-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-400">
                     {{ $template->template_title }}
                     @if($template->template_draft=="Yes")
                        <span style="font-size:9px" class="inline-flex items-center justify-center gap-1 rounded-full bg-error-500 px-2.5 py-0.5 font-medium text-white">Draft</span>
                     @endif
                  </td>
                  <td class="p-4 whitespace-nowrap">
                    @if($template->template_type=="Fillable")
                        <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">Fillable</span>
                    @else
                        <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">Raw</span>
                    @endif
                  </td>
                  <td class="p-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-400">
                    {{ $template->template_no_of_signers}}
                  </td>
                  <td class="p-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-400">
                     {{ $template->category_id == 0 ? 'Uncategorized' : $template->category_name }}
                  </td>
                  <td class="p-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-400">
                    {{ \Carbon\Carbon::parse($template->template_created_at)->format('d M Y') }}
                  </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 width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
                        </button>
                        <div x-show="open" @click.outside="open = false" class="shadow-theme-lg fixed z-20 w-40 space-y-1 rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900" x-ref="dropdown">
                            @if($template->is_delete == 'Yes')
                                {{-- RESTORE LINK --}}
                                <a href="{{ route('templates.restore', $template->template_uuid) }}" 
                                class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg">
                                Restore
                                </a>

                                {{-- PERMANENT DELETE FORM --}}
                                <form action="{{ route('templates.permanent_delete', $template->template_uuid) }}" method="POST" onsubmit="return confirm('This will permanently delete the PDF and all data. Are you sure?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg">
                                        Permanently Delete
                                    </button>
                                </form>
                            @else
                                <button @click="openEdit = true; editId = '{{ $template->template_id }}'; editTitle = '{{ addslashes($template->template_title) }}'.replace(/\.[^/.]+$/, ''); editCategoryId = '{{ $template->category_id }}'; open = false" 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">Edit Properties</button>
                                
                                <a href="/customize/{{ $template->template_uuid }}" 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">Edit Fields</a>

                                    @if(session('can_add_more_template') === 'Yes' && session('is_plan_has_storage') === 'Yes')
                                    <form action="{{ route('tmplts.copy', $template->template_id) }}" method="POST"  onsubmit="return confirm('Copy this template?')">
                                        @csrf
                                        <button type="submit" class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg text-left">
                                            Make a copy
                                        </button>
                                    </form>
                                    @endif


                                @if($template->template_draft=="Yes")
                                    <a href="/save_as_template/{{ $template->template_uuid }}" 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">Save as Template</a>
                                @else 
                                    <a href="/save_as_draft/{{ $template->template_uuid }}" 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">Save as Draft</a>
                                @endif

                                {{-- 🚀 DESKTOP PREVIEW --}}
                                <button @click="previewUrl = '{{ $baseUrl }}/{{ $template->template_file }}'; openPreview = true; open = false" 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">Preview</button>

                                {{-- 🚀 DESKTOP DOWNLOAD --}}
                                <a  target="_blank" href="{{ $baseUrl }}/{{ $template->template_file }}" download="{{ $template->template_title }}" 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">Download</a>

                                <form action="{{ route('tmplts.destroy', $template->template_id) }}" method="POST" onsubmit="return confirm('Delete this Template?')">
                                    @csrf @method('DELETE')
                                    <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>
                                </form>
                            @endif
                        </div>
                    </div>
                </td>
               </tr>
               @empty
               <tr><td colspan="7" class="text-center p-4 text-gray-500">No templates available</td></tr>
               @endforelse
            </tbody>
         </table>
      </div>
   </div>

   <!-- Pagination -->
   <div class="p-4 flex justify-center">
         {{ $templates->links('vendor.pagination.tailwind') }}
   </div>

   <!-- Edit Template Off-Canvas -->
   <div 
        x-show="openEdit" 
        x-cloak 
        x-init="$watch('openEdit', value => { if(value) { activeId = parseInt(editCategoryId); renderTree(); } })"
        class="fixed inset-0 overflow-hidden" 
        style="z-index: 99999;"
        aria-labelledby="edit-panel-title" 
        role="dialog" 
        aria-modal="true"
    >
        <div x-show="openEdit" x-transition.opacity @click="openEdit = false" class="fixed inset-0 bg-black/50"></div>

        <div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
            <div 
                x-show="openEdit" 
                x-transition:enter="transform transition ease-in-out duration-500" 
                x-transition:enter-start="translate-x-full" 
                x-transition:enter-end="translate-x-0" 
                x-transition:leave="transform transition ease-in-out duration-500" 
                class="w-screen max-w-md"
            >
                <form 
                    :action="'{{ url('tmplts') }}/' + editId" 
                    method="POST" 
                    class="flex h-full flex-col bg-white shadow-xl dark:bg-gray-900"
                >
                    @csrf
                    @method('PUT')
                    
                    <div class="px-4 py-6 sm:px-6 border-b border-gray-200 dark:border-gray-800">
                        <div class="flex items-start justify-between">
                            <h2 class="text-base font-semibold leading-6 text-gray-900 dark:text-white" id="edit-panel-title">Edit Template</h2>
                            <div class="ml-3 flex h-7 items-center">
                                <button type="button" @click="openEdit = false" class="relative rounded-md text-gray-400 hover:text-gray-500 focus:outline-none">
                                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path d="M6 18L18 6M6 6l12 12" /></svg>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="relative flex-1 p-6 overflow-y-auto">
                        <div class="space-y-6">
                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Template Title</label>
                                <input type="text" name="template_title" x-model="editTitle" class="dark:bg-dark-900 h-11 w-full rounded-lg border border-gray-300 px-4 text-sm dark:border-gray-700 dark:text-white/90" required/>
                            </div>

                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Select Category</label>
                                <input type="hidden" name="category_id" id="edit_category_id_input" x-model="editCategoryId">
                                <div id="tree_edit"></div>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 dark:border-gray-800 p-4 bg-gray-50 dark:bg-white/5 flex gap-3">
                        <button type="button" @click="openEdit = false" class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700">Cancel</button>
                        <button type="submit" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-brand-500 rounded-lg">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Category CRUD Off-Canvases -->
    <div class="offcanvas-backdrop-cat" id="add-backdrop-cat" onclick="closeAddModalCat()"></div>
    <div class="offcanvas-cat" id="add-modal-cat">
        <h3 id="add-modal-title-cat" class="text-lg font-bold mb-6">Add Category</h3>
        <form method="POST" action="{{ route('categories.store') }}">
            @csrf
            <input type="hidden" name="parent_id" id="add-parent-id-cat" value="0"/>
            <div class="form-row-cat"><label>Category Name *</label><input type="text" name="category_name" required maxlength="100"/></div>
            <div class="grid grid-cols-2 gap-4">
                <div class="form-row-cat"><label>Status *</label><select name="category_status"><option value="1">Active</option><option value="0">Inactive</option></select></div>
                <div class="form-row-cat"><label>Sort Order</label><input type="number" name="category_sort_order" value="0"/></div>
            </div>
            <div class="form-row-cat"><label>Description</label><textarea name="category_description" rows="3"></textarea></div>
            <div class="mt-auto flex gap-3 pt-6"><button type="button" class="flex-1 border rounded-lg" onclick="closeAddModalCat()">Cancel</button><button type="submit" class="flex-1 btn-submit-cat">Save</button></div>
        </form>
    </div>

    <div class="offcanvas-backdrop-cat" id="edit-backdrop-cat" onclick="closeEditModalCat()"></div>
    <div class="offcanvas-cat" id="edit-modal-cat">
        <h3 class="text-lg font-bold mb-6">Edit Category</h3>
        <form method="POST" id="edit-form-cat" action="">
            @csrf @method('PUT')
            <div class="form-row-cat"><label>Category Name *</label><input type="text" name="category_name" id="edit-name-cat" required/></div>
            <div class="grid grid-cols-2 gap-4">
                <div class="form-row-cat"><label>Status *</label><select name="category_status" id="edit-status-cat"><option value="1">Active</option><option value="0">Inactive</option></select></div>
                <div class="form-row-cat"><label>Sort Order</label><input type="number" name="category_sort_order" id="edit-sort-cat"/></div>
            </div>
            <div class="form-row-cat"><label>Description</label><textarea name="category_description" id="edit-desc-cat"></textarea></div>
            <div class="form-row-cat">
                <label>Parent Category</label>
                <select name="parent_id" id="edit-parent-cat">
                    <option value="0">— None —</option>
                    @foreach($categories as $cat) <option value="{{ $cat->category_id }}">{{ $cat->category_name }}</option> @endforeach
                </select>
            </div>
            <div class="mt-auto flex gap-3 pt-6"><button type="button" class="flex-1 border rounded-lg" onclick="closeEditModalCat()">Cancel</button><button type="submit" class="flex-1 btn-submit-cat">Update</button></div>
        </form>
    </div>

    <!-- Delete Category Modal -->
    <div class="offcanvas-backdrop-cat" id="del-backdrop-cat" style="display:none; z-index:10000003;" onclick="closeDelModalCat()"></div>
    <div class="fixed inset-0 items-center justify-center" id="del-modal-cat" style="display:none; z-index:10000004;">
        <div class="bg-white p-8 rounded-2xl max-w-sm w-full text-center shadow-2xl border">
            <h3 class="text-xl font-bold mb-2">Delete Category?</h3>
            <p class="text-gray-500 text-sm mb-6">Confirm deleting <strong id="del-name-cat"></strong>?</p>
            <form method="POST" id="del-form-cat" action="">@csrf @method('DELETE')
                <div class="flex gap-3 justify-center"><button type="button" class="px-6 py-2 border rounded-lg text-sm" onclick="closeDelModalCat()">Cancel</button><button type="submit" class="px-6 py-2 bg-red-500 text-white rounded-lg text-sm font-medium">Yes, Delete</button></div>
            </form>
        </div>
    </div>

    <!-- Preview Backdrop Logic -->
    <div x-show="openPreview" x-cloak class="fixed inset-0 overflow-hidden" style="z-index: 99999;">
        <div x-show="openPreview" x-transition.opacity @click="openPreview = false" class="fixed inset-0 bg-black/50"></div>
        <div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
            <div x-show="openPreview" x-transition:enter="transform transition ease-in-out duration-500" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" class="w-screen" style="max-width: 750px;">
                <div class="flex h-full flex-col bg-white shadow-xl dark:bg-gray-900">
                    <div class="px-4 py-6 sm:px-6 border-b border-gray-200 dark:border-gray-800 flex items-start justify-between">
                        <h2 class="text-base font-semibold">PDF Preview</h2>
                        <button type="button" @click="openPreview = false" class="text-gray-400 hover:text-gray-500"><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M6 18L18 6M6 6l12 12" /></svg></button>
                    </div>
                    <div class="relative flex-1 overflow-hidden">
                        {{-- 🚀 THE FIX: Wrap iframe in x-if to force refresh and use dynamic previewUrl --}}
                        <template x-if="openPreview">
                            <iframe :src="previewUrl + '#toolbar=0&navpanes=0&view=FitH'" class="w-full h-full border-none" style="display: block;"></iframe>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
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: `<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"/><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>`
};

/* ════════════════════════════════════════════════
   CATEGORY CRUD HELPERS
════════════════════════════════════════════════ */
function openAddModalCat(parentId) {
  document.getElementById('add-parent-id-cat').value = parentId;
  document.getElementById('add-modal-title-cat').textContent = (parentId == 0) ? 'Add Category' : 'Add Sub-Category';
  document.getElementById('add-backdrop-cat').classList.add('show');
  document.getElementById('add-modal-cat').classList.add('show');
}
function closeAddModalCat() { 
  document.getElementById('add-backdrop-cat').classList.remove('show');
  document.getElementById('add-modal-cat').classList.remove('show'); 
}
function openEditModalCat(id) {
  const cat = rawCategories.find(c => parseInt(c.category_id) === parseInt(id));
  if (!cat) return;
  document.getElementById('edit-form-cat').action = `/categories/${id}`;
  document.getElementById('edit-name-cat').value = cat.category_name;
  document.getElementById('edit-status-cat').value = cat.category_status;
  document.getElementById('edit-sort-cat').value = cat.category_sort_order;
  document.getElementById('edit-desc-cat').value = cat.category_description;
  document.getElementById('edit-parent-cat').value = cat.parent_id;
  document.getElementById('edit-backdrop-cat').classList.add('show');
  document.getElementById('edit-modal-cat').classList.add('show');
}
function closeEditModalCat() { 
  document.getElementById('edit-backdrop-cat').classList.remove('show');
  document.getElementById('edit-modal-cat').classList.remove('show'); 
}
function openDelModalCat(id, name) {
  document.getElementById('del-name-cat').textContent = name;
  document.getElementById('del-form-cat').action = `/categories/${id}`;
  document.getElementById('del-backdrop-cat').style.display = 'block';
  document.getElementById('del-modal-cat').style.display = 'flex';
}
function closeDelModalCat() { 
  document.getElementById('del-backdrop-cat').style.display = 'none';
  document.getElementById('del-modal-cat').style.display = 'none'; 
}

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

function renderNode(node) {
  const isVirtualRoot = (parseInt(node.category_id) === 0);
  const hasChildren = node.children && node.children.length > 0;
  const isFolder = isVirtualRoot || hasChildren || parseInt(node.parent_id) === 0;

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

  if (hasChildren) {
    const ch = document.createElement('div'); ch.className = 'chevron'; ch.innerHTML = S.chev;
    ch.addEventListener('click', e => { e.stopPropagation(); const cw = wrap.querySelector(':scope > .children-wrap'); if (cw) { cw.classList.toggle('closed'); ch.classList.toggle('closed'); } });
    row.appendChild(ch);
  } else { row.appendChild(Object.assign(document.createElement('div'), {className: 'chevron-ph'})); }

  const ico = document.createElement('div'); ico.className = 'icon'; ico.innerHTML = S.folder;
  row.appendChild(ico);

  const lbl = document.createElement('span'); lbl.className = 'lbl'; lbl.textContent = node.category_name;
  if(isVirtualRoot) lbl.style.fontWeight = '600';
  row.appendChild(lbl);

  const acts = document.createElement('div'); acts.className = 'actions';
  acts.appendChild(mkBtn('b-subfolder', 'Add sub-category', S.plus, () => openAddModalCat(node.category_id)));
  if (!isVirtualRoot) {
      acts.appendChild(mkBtn('b-edit', 'Edit', S.edit, () => openEditModalCat(node.category_id)));
      acts.appendChild(mkBtn('b-del', 'Delete', S.trash, () => openDelModalCat(node.category_id, node.category_name)));
  }
  row.appendChild(acts);

  row.addEventListener('click', () => {
    activeId = parseInt(node.category_id);
    const input = document.getElementById('edit_category_id_input');
    if(input) { input.value = activeId; input.dispatchEvent(new Event('input')); }
    document.querySelectorAll('#tree_edit .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_edit');
  if (!el) return;
  el.innerHTML = '';
  const root = { category_id: 0, category_name: 'Uncategorized', children: treeData };
  el.appendChild(renderNode(root));
}
</script>
@endsection