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

@section('content')
{{-- Added x-data variables here to manage the Off-Canvas state globally --}}
<div class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6" x-data="{ openPreview: false, previewUrl: '' }">

   <!-- Header -->
   <!-- Breadcrumb Start -->
   <div x-data="{ pageName: `Templates`}">
      <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 -->

   <!-- 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]">
    
        <div
        class="flex flex-col justify-between gap-5 border-b border-gray-200 px-5 py-4 sm:flex-row sm:items-center dark:border-gray-800">
            <div>
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                Templates List
            </h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                Track your store's progress to boost your sales.
            </p>
            </div>
            <div class="flex gap-3">
            <a
                href="{{ route('tmplts.create') }}"
                class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm"
            >
                
                + Add Template
            </a>
            </div>
        </div>
        <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

                        <!-- <div class="mb-4">
                            <label class="mb-2 block text-xs font-medium text-gray-700 dark:text-gray-300">
                                Category
                            </label>
                            <input type="text" name="category_filter" value="{{ request('category_filter') }}" class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 dark:border-gray-700 dark:text-white/90" placeholder="Search category..." />
                        </div> -->

                        {{-- 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>
    </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_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">
                        <button 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">Edit</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">Customize</a>
                        <!-- <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">Copy Template</a> -->
                        <form action="{{ route('tmplts.copy', $template->template_id) }}" method="POST"  onsubmit="return confirm('Copy this template?')">
                            @csrf
                            <button type="submit" 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">
                                Copy Template
                            </button>
                        </form>

                        @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

                        {{-- Preview Option - Mobile --}}
                        <button @click="openPreview = true; previewUrl = '{{ asset('templates') }}/' + '{{ $template->template_file }}'; 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>

                        <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>
                    </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 found</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>
               <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>
            </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">
                      <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ ($templates->currentPage() - 1) * $templates->perPage() + $loop->iteration }}</span>
                  </td>
                  <td  class="p-4 whitespace-nowrap">
                     <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $template->template_title }}
                        @if($template->template_draft=="Yes")
                        <sup><span style="font-size:10px" class="inline-flex items-center justify-center gap-1 rounded-full bg-error-500 px-2.5 py-0.5 text-sm font-medium text-white">Draft</span></sup>
                        @endif
                     </span>
                  </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">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $template->template_no_of_signers}}</span>
                  </td>
                  <td class="p-4 whitespace-nowrap">
                     <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $template->category_name }}</span>
                  </td>
                  <td class="p-4 whitespace-nowrap">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ \Carbon\Carbon::parse($template->template_created_at)->format('d M Y') }}</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 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 dark:bg-gray-dark fixed z-20 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">Edit</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">Customize</a>
                           <!-- <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">Copy Template</a> -->
                           <!-- Copy Template Option -->
                            <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">
                                    Copy Template
                                </button>
                            </form>

                           @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

                           {{-- Preview Option - Desktop --}}
                           <button @click="openPreview = true; previewUrl = '{{ asset('templates') }}/' + '{{ $template->template_file }}'; 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>

                           <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>
                        </div>
                    </div>
                </td>
               </tr>
               @empty
               <tr><td colspan="7" class="text-center p-4 text-gray-500">No templates found</td></tr>
               @endforelse
            </tbody>
         </table>
      </div>
   </div>

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

   <!-- PDF Preview Off-Canvas -->
   <div 
        x-show="openPreview" 
        x-cloak 
        class="fixed inset-0 overflow-hidden" 
        style="z-index: 99999;"
        aria-labelledby="slide-over-title" 
        role="dialog" 
        aria-modal="true"
    >
        <!-- Background backdrop (Fades everything else to gray) -->
        <div 
            x-show="openPreview" 
            x-transition:enter="ease-in-out duration-500" 
            x-transition:enter-start="opacity-0" 
            x-transition:enter-end="opacity-100" 
            x-transition:leave="ease-in-out duration-500" 
            x-transition:leave-start="opacity-100" 
            x-transition:leave-end="opacity-0" 
            @click="openPreview = false"
            class="fixed inset-0 bg-black/50 transition-opacity"
            style="background-color: rgba(0, 0, 0, 0.5);"
        ></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 sm:duration-700" 
                x-transition:enter-start="translate-x-full" 
                x-transition:enter-end="translate-x-0" 
                x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" 
                x-transition:leave-start="translate-x-0" 
                x-transition:leave-end="translate-x-full"
                class="w-screen max-w-2xl"
            >
                <div class="flex h-full flex-col overflow-y-hidden 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">
                        <div class="flex items-start justify-between">
                            <h2 class="text-base font-semibold leading-6 text-gray-900 dark:text-white" id="slide-over-title">PDF Preview</h2>
                            <div class="ml-3 flex h-7 items-center">
                                <button type="button" @click="openPreview = false" class="relative rounded-md bg-white dark:bg-gray-800 text-gray-400 hover:text-gray-500 focus:outline-none">
                                    <span class="sr-only">Close panel</span>
                                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="relative flex-1 overflow-hidden">
                        {{-- PDF Iframe --}}
                        <iframe :src="previewUrl" class="w-full h-full border-none"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End PDF Preview Off-Canvas -->

</div>
@endsection