@extends('layouts.app')
@section('title', 'Package Details')

@section('content')
<!-- Include PDF-LIB for merging and DownloadJS for saving files -->
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>

<!-- Wrap everything in an Alpine.js scope for the Offcanvas -->
<div x-data="{ showOffcanvas: false, offcanvasPdfUrl: '', offcanvasTitle: '' }" class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6">

   <!-- Breadcrumb & Header -->
   <div class="flex flex-wrap items-center justify-between gap-4 pb-4 ml-2">
      <div>
         <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
            Package Detail
         </h2>
         <p class="text-sm text-gray-500 mt-1">PACKAGE ID : <span class="font-mono text-brand-500">{{ $package->package_guid }}</span></p>
      </div>

      <div class="flex items-center gap-3">
         @php
            $isAllCompleted = $email_templates->every(function($item) {
                return $item->email_template_status == 'Completed';
            });

            // Prepare unique document list for the JS merger
            $all_signed_urls = [];
            $certificate_url = config('app.url') . "/certificate/" . $package->package_id . ".pdf";

            if($isAllCompleted) {
                foreach($email_templates as $template) {
                    $data = json_decode($template->email_template_json);
                    if($data) {
                        foreach($data as $doc) {
                            $url = config('app.url').'/signed_documents/'.$package->package_id."_".$doc->template_id.".pdf";
                            // Avoid duplicates if multiple signers have the same doc
                            if(!in_array($url, $all_signed_urls)) {
                                $all_signed_urls[] = $url;
                            }
                        }
                    }
                }
            }
         @endphp
         
         @if($isAllCompleted && $email_templates->count() > 0)
            <span class="inline-flex items-center gap-1.5 rounded-lg bg-success-50 px-3 py-1.5 text-sm font-semibold text-success-700 dark:bg-success-500/10 dark:text-success-500">
               <span class="h-2 w-2 rounded-full bg-success-600"></span>
               Fully Executed
            </span>

            <div x-data="{ open: false, processing: false }" class="relative inline-block text-left">
               <button @click="open = !open" @click.away="open = false" type="button" :disabled="processing"
                  class="inline-flex items-center gap-1.5 rounded-lg bg-gray-100 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-300 dark:hover:bg-white/10 transition-colors border border-gray-200 dark:border-gray-700 disabled:opacity-50">
                  
                  <!-- Show spinner when processing -->
                  <template x-if="!processing">
                     <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                     </svg>
                  </template>
                  <template x-if="processing">
                     <svg class="animate-spin h-4 w-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                  </template>

                  <span x-text="processing ? 'Merging...' : 'Download Documents'"></span>
                  <svg class="w-4 h-4 ml-1 transition-transform" :class="{'rotate-180': open}" 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>

               <!-- Dropdown Menu -->
               <div x-show="open" 
                    x-transition:enter="transition ease-out duration-100"
                    x-transition:enter-start="transform opacity-0 scale-95"
                    x-transition:enter-end="transform opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-75"
                    x-transition:leave-start="transform opacity-100 scale-100"
                    x-transition:leave-end="transform opacity-0 scale-95"
                    class="absolute right-0 z-50 mt-2 w-80 origin-top-right rounded-xl bg-white p-2 shadow-xl border border-gray-200 dark:border-gray-700 dark:bg-gray-900 focus:outline-none" 
                    style="display: none;">
                  
                  <!-- 1. All Signed Documents (Merged without certificate) -->
                  <button type="button" @click="open = false; processing = true; await mergeAllPDFs(false); processing = false;"
                     class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-white/5 rounded-lg transition-colors text-left">
                     <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" /></svg>
                     <span>All Signed Documents</span>
                  </button>

                  <!-- 2. Signing Certificate Only -->
                  <a href="{{ $certificate_url }}" target="_blank"
                     class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-white/5 rounded-lg transition-colors">
                     <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                     <span>Certificate Only</span>
                  </a>

                  <div class="my-1 border-t border-gray-100 dark:border-gray-800"></div>

                  <!-- 3. All Documents with Certificate (Merged) -->
                  <button type="button" @click="open = false; processing = true; await mergeAllPDFs(true); processing = false;"
                     class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-white/5 rounded-lg transition-colors text-left">
                     <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                     <span>Documents&nbsp;with&nbsp;Certificate</span>
                  </button>
               </div>
            </div>
         @else
            <span class="inline-flex items-center gap-1.5 rounded-lg bg-warning-50 px-3 py-1.5 text-sm font-semibold text-warning-700 dark:bg-warning-500/10 dark:text-warning-500">
               <span class="h-2 w-2 rounded-full bg-warning-600 animate-pulse"></span>
               In Progress
            </span>
         @endif
      </div>
   </div>

   <!-- NEW SECTION: PACKAGE PREFERENCES & MODE -->
   <div class="mb-6 ml-2 flex flex-wrap gap-4">
      <div class="flex items-center gap-6 rounded-xl border border-gray-200 bg-white px-5 py-3 dark:border-gray-800 dark:bg-white/[0.03]">
         <!-- Signing Mode -->
         <div class="flex flex-col">
            <span class="text-[10px] font-bold uppercase text-gray-400">Signing Mode</span>
            @if($package->package_sent_mode == 'Local')
            <span class="text-sm font-semibold text-gray-800 dark:text-white flex items-center">
               <i class="bi bi-envelope-paper text-primary"></i> 
                In-Person
            </span>
            @elseif($package->package_sent_mode == 'Email')
            <span class="text-sm font-semibold text-gray-800 dark:text-white flex items-center">
               <i class="bi bi-envelope-paper text-primary"></i> 
               Remote via Email
            </span>
            @endif
         </div>
         
         <div class="h-8 w-px bg-gray-200 dark:bg-gray-700"></div>

         <!-- Sequential Preference -->
         <div class="flex flex-col">
            <span class="text-[10px] font-bold uppercase text-gray-400">Sequential Signing</span>
            @if($package->package_sort_order == 'Yes')
               <span class="text-sm font-semibold text-success-600 flex items-center">
                  <i class="bi bi-check-circle-fill"></i> Enabled
               </span>
            @else
               <span class="text-sm font-semibold text-gray-500 flex items-center">
                  <i class="bi bi-dash-circle"></i> Disabled
               </span>
            @endif
         </div>

         <div class="h-8 w-px bg-gray-200 dark:bg-gray-700"></div>

         <!-- Visibility Preference -->
         <div class="flex flex-col">
            <span class="text-[10px] font-bold uppercase text-gray-400">Field Visibility</span>
            @if($package->package_field_visibility == 'Yes')
               <span class="text-sm font-semibold text-success-600 flex items-center">
                  <i class="bi bi-eye-fill"></i> Visible to all
               </span>
            @else
               <span class="text-sm font-semibold text-gray-500 flex items-center">
                  <i class="bi bi-eye-slash"></i> Private
               </span>
            @endif
         </div>
      </div>
   </div>

   <!-- Stats Summary Cards -->
   <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 md:gap-6 xl:gap-7.5 mb-6 mt-2">
      <div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
         <p class="text-sm text-gray-500 font-medium">Total Signers</p>
         <h4 class="text-2xl font-bold mt-1 text-gray-800 dark:text-white">{{ $email_templates->count() }}</h4>
      </div>
      <div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
         <p class="text-sm text-gray-500 font-medium">Completed</p>
         <h4 class="text-2xl font-bold mt-1 text-success-600">{{ $email_templates->where('email_template_status', 'Completed')->count() }}</h4>
      </div>
      <div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
         <p class="text-sm text-gray-500 font-medium">Pending</p>
         <h4 class="text-2xl font-bold mt-1 text-red-500">{{ $email_templates->where('email_template_status', 'Pending')->count() }}</h4>
      </div>
   </div>


   <!-- Main Table Container -->
   <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
         <h3 class="font-bold text-gray-800 dark:text-white/90">Recipient Status</h3>
      </div>

      <!-- Mobile View (Expandable List) -->
      <div class="block lg:hidden divide-y divide-gray-100 dark:divide-gray-800">
         @forelse($email_templates as $email_template)
            <div x-data="{ expanded: false }" class="p-4">
               <div class="flex items-center 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 -->
                  <div class="h-10 w-10 flex-shrink-0 rounded-full bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center text-blue-600 font-bold">
                     {{ substr($email_template->email_name, 0, 1) }}
                  </div>

                  <!-- Name/Info -->
                  <div class="flex-1 min-w-0">
                     <div class="text-sm font-semibold text-gray-800 dark:text-white truncate">
                        {{ $email_template->email_name }}
                     </div>
                     <div class="text-xs text-gray-500 truncate">
                        {{ $email_template->email_id }}
                     </div>
                  </div>

                  <!-- Status Badge -->
                  <div>
                     @if($email_template->email_template_status == "Completed")
                        <span class="inline-flex items-center gap-1 rounded-full bg-success-50 px-2 py-0.5 text-[10px] font-medium text-success-700 dark:bg-success-500/10 dark:text-success-500 border border-success-200">
                           Completed
                        </span>
                     @else
                        <span class="inline-flex items-center gap-1 rounded-full bg-warning-50 px-2 py-0.5 text-[10px] font-medium text-warning-700 dark:bg-warning-500/10 dark:text-warning-500 border border-warning-200">
                           Pending
                        </span>
                     @endif
                  </div>
               </div>

               <!-- Expanded Mobile Content -->
               <div x-show="expanded" x-collapse x-cloak class="mt-4 pl-12 space-y-4">
                  <!-- Signer Activity -->
                  @if($email_template->email_template_status == "Completed")
                  <div class="space-y-1">
                     <p class="text-[10px] font-bold uppercase text-gray-400">Activity</p>
                     <div class="text-[11px] text-gray-600 dark:text-gray-400">
                        <div><span class="font-medium">Viewed:</span> {{ $email_template->email_template_viewed_date ?? 'N/A' }}</div>
                        <div><span class="font-medium">Signed:</span> {{ $email_template->email_template_signed_date ?? 'N/A' }}</div>
                        <div><span class="font-medium font-mono uppercase">IP:</span> {{ $email_template->email_template_signed_ip ?? 'N/A' }}</div>
                     </div>
                  </div>
                  @endif

                  <!-- Documents -->
                  <div>
                     <p class="text-[10px] font-bold uppercase text-gray-400 mb-2">Documents</p>
                     <div class="flex flex-col gap-2">
                        @php $data = json_decode($email_template->email_template_json); @endphp
                        @if($data)
                           @foreach($data as $doc_details)
                              @if($email_template->email_template_status == "Completed")
                                 @php
                                    $file_name = $package->package_id."_".$doc_details->template_id.".pdf";
                                    $file_url = config('app.url').'/signed_documents/'.$file_name;
                                 @endphp
                                 <button @click="offcanvasPdfUrl = '{{ $file_url }}'; offcanvasTitle = '{{ $doc_details->title }}'; showOffcanvas = true" class="text-xs font-medium text-blue-600 underline text-left">
                                    {{ $doc_details->title }}
                                 </button>
                              @else
                                 <a href="/sign/{{ $email_template->email_template_guid }}" target="_blank" class="text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-blue-600">
                                    {{ $doc_details->title }} (Click to Sign)
                                 </a>
                              @endif
                           @endforeach
                        @endif
                     </div>
                  </div>

                  <!-- Mobile Action Button -->
                  @if($email_template->email_template_status == "Pending")
                  <div class="pt-2">
                     <a href="/sign/{{ $email_template->email_template_guid }}" target="_blank" 
                        class="inline-flex w-full justify-center items-center gap-1 rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold  hover:bg-blue-700 ">
                        Sign Now
                     </a>
                  </div>
                  @endif
               </div>
            </div>
         @empty
            <div class="p-8 text-center text-gray-500">No signers found.</div>
         @endforelse
      </div>

      <!-- Desktop View (Original Table) -->
      <div class="hidden lg:block overflow-x-auto">
         <table class="w-full table-auto">
            <thead>
               <tr class="bg-gray-50/50 dark:bg-gray-900/50">
                  <th class="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">Signer Info</th>
                  <th class="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">Status</th>
                  <th class="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">Documents</th>
                  <th class="p-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500">Actions</th>
               </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
               @forelse($email_templates as $email_template)
               <tr class="group hover:bg-gray-50/80 dark:hover:bg-gray-900/40 transition-colors">
                  
                  <td class="p-4">
                     <div class="flex items-center gap-3">
                        <div class="h-10 w-10 flex-shrink-0 rounded-full bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center text-blue-600 font-bold">
                           {{ substr($email_template->email_name, 0, 1) }}
                        </div>
                        <div>
                           <div class="text-sm font-semibold text-gray-800 dark:text-white">
                              {{ $email_template->email_name }}
                           </div>
                           <div class="text-xs text-gray-500">
                              {{ $email_template->email_id }}
                           </div>

                           <!-- Signer Activity Info (Viewed, Signed, IP) -->
                           @if($email_template->email_template_status == "Completed")
                           <div class="mt-2 flex flex-wrap gap-x-3 gap-y-1">
                              <div class="text-[10px] text-gray-500 flex items-center gap-1">
                                 <span class="font-bold uppercase">Viewed:</span> {{ $email_template->email_template_viewed_date ?? 'N/A' }}
                              </div>
                              <div class="ml-2 text-[10px] text-gray-500 flex items-center gap-1">
                                 <span class="font-bold uppercase">Signed:</span> {{ $email_template->email_template_signed_date ?? 'N/A' }}
                              </div>
                              <div class="ml-2 text-[10px] text-gray-400 font-mono flex items-center gap-1">
                                 <span class="font-bold uppercase">IP:</span> {{ $email_template->email_template_signed_ip ?? 'N/A' }}
                              </div>
                           </div>
                           @endif
                        </div>
                     </div>
                  </td>

                  <td class="p-4">
                     @if($email_template->email_template_status == "Completed")
                        <span class="inline-flex items-center gap-1 rounded-full bg-success-50 px-2.5 py-1 text-xs font-medium text-success-700 dark:bg-success-500/10 dark:text-success-500 border border-success-200 dark:border-success-500/20">
                           <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                           Completed
                        </span>
                     @else
                        <span class="inline-flex items-center gap-1 rounded-full bg-warning-50 px-2.5 py-1 text-xs font-medium text-warning-700 dark:bg-warning-500/10 dark:text-warning-500 border border-warning-200 dark:border-warning-500/20">
                           <svg class="h-3 w-3 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 2m6-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                           Pending
                        </span>
                     @endif
                  </td>

                  <td class="p-4">
                     <div class="flex flex-col gap-1.5">
                        @php
                           $data = json_decode($email_template->email_template_json);
                        @endphp
                        @if($data)
                           @foreach($data as $doc_details)
                              @if($email_template->email_template_status == "Completed")
                                 @php
                                    $file_name = $package->package_id."_".$doc_details->template_id.".pdf";
                                    $file_url = config('app.url').'/signed_documents/'.$file_name;
                                 @endphp
                                 <button @click="offcanvasPdfUrl = '{{ $file_url }}'; offcanvasTitle = '{{ $doc_details->title }}'; showOffcanvas = true" class="inline-flex items-center gap-1.5 text-xs font-medium text-blue-600 hover:text-blue-700 underline decoration-blue-200 transition-all text-left">
                                    <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                    {{ $doc_details->title }}
                                 </button>
                              @else
                                 <a href="/sign/{{ $email_template->email_template_guid }}" target="_blank" class="inline-flex items-center gap-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-blue-600 transition-all">
                                    <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                    {{ $doc_details->title }} (Click to Sign)
                                 </a>
                              @endif
                           @endforeach
                        @else
                           <span class="text-xs text-gray-400 italic">No documents found.</span>
                        @endif
                     </div>
                  </td>

                  <td class="p-4 text-right space-x-2">
                    @if($email_template->email_template_status == "Pending")
                        <a href="/sign/{{ $email_template->email_template_guid }}" target="_blank" 
                           class="inline-flex items-center gap-1 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold hover:bg-blue-700 transition-colors shadow-sm ">
                           Sign Now
                        </a>
                    @else
                        @php 
                           $firstDoc = $data ? $data[0] : null;
                           $viewUrl = $firstDoc ? config('app.url').'/signed_documents/'.$package->package_id."_".$firstDoc->template_id.".pdf" : '#';
                        @endphp
                        <button @click="offcanvasPdfUrl = '{{ $viewUrl }}'; offcanvasTitle = '{{ $email_template->email_name }}\'s Document'; showOffcanvas = true" class="inline-flex items-center gap-1 rounded-lg bg-gray-100 dark:bg-white/5 px-3 py-1.5 text-xs font-semibold text-gray-600 dark:text-gray-300 hover:bg-gray-200 transition-colors">
                           View Signed
                        </button>
                    @endif
                  </td>
                
               </tr>
               @empty
               <tr>
                  <td colspan="4" class="p-12 text-center text-gray-500">No signers found.</td>
               </tr>
               @endforelse
            </tbody>
         </table>
      </div>
   </div>

   <!-- PDF Offcanvas Viewer -->
   <div x-show="showOffcanvas" 
        class="fixed inset-0 z-9999 overflow-hidden" 
        aria-labelledby="slide-over-title" role="dialog" aria-modal="true" 
        x-cloak>
      <div class="absolute inset-0 overflow-hidden">
         <!-- Background backdrop -->
         <div x-show="showOffcanvas" 
              x-transition:enter="ease-in-out duration-300" 
              x-transition:enter-start="opacity-0" 
              x-transition:enter-end="opacity-100" 
              x-transition:leave="ease-in-out duration-300" 
              x-transition:leave-start="opacity-100" 
              x-transition:leave-end="opacity-0" 
              @click="showOffcanvas = false"
              class="absolute inset-0 bg-gray-900/60 transition-opacity"></div>

         <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
            <div x-show="showOffcanvas" 
                 x-transition:enter="transform transition ease-in-out duration-300 sm: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-300 sm:duration-500" 
                 x-transition:leave-start="translate-x-0" 
                 x-transition:leave-end="translate-x-full" 
                 class="pointer-events-auto w-screen max-w-4xl">
               <div class="flex h-full flex-col overflow-y-hidden bg-white shadow-xl dark:bg-gray-900">
                  <!-- Offcanvas Header -->
                  <div class="bg-gray-50 px-4 py-4 dark:bg-gray-800 sm:px-6">
                     <div class="flex items-center justify-between">
                        <h2 class="text-base font-semibold leading-6 text-gray-900 dark:text-white" id="slide-over-title" x-text="offcanvasTitle">
                           Document Viewer
                        </h2>
                        <div class="ml-3 flex h-7 items-center">
                           <button type="button" @click="showOffcanvas = false" class="relative rounded-md bg-transparent 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"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                           </button>
                        </div>
                     </div>
                  </div>
                  <!-- Offcanvas Content (PDF Iframe) -->
                  <div class="relative flex-1">
                     <template x-if="showOffcanvas">
                        <iframe :src="offcanvasPdfUrl" class="h-full w-full border-none" allow="autoplay"></iframe>
                     </template>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<script>
    /**
     * Merge PDFs using PDF-LIB
     */
    async function mergeAllPDFs(includeCert) {
        const { PDFDocument } = PDFLib;
        const mergedPdf = await PDFDocument.create();
        
        // 1. Get the list of signed document URLs (from the Blade PHP block above)
        let urls = @json($all_signed_urls);
        
        // 2. If certificate requested, add it to the list
        if (includeCert) {
            urls.push("{{ $certificate_url }}");
        }

        if (urls.length === 0) {
            alert("No documents found to merge.");
            return;
        }

        try {
            for (const url of urls) {
                // Fetch the PDF file
                const response = await fetch(url);
                if (!response.ok) {
                    console.error("Could not fetch " + url);
                    continue;
                }
                const bytes = await response.arrayBuffer();
                
                // Load the PDF
                const pdf = await PDFDocument.load(bytes);
                
                // Copy pages from the PDF to the merged PDF
                const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
                copiedPages.forEach((page) => mergedPdf.addPage(page));
            }

            // Save the merged PDF as a blob
            const mergedPdfBytes = await mergedPdf.save();
            const blob = new Blob([mergedPdfBytes], { type: "application/pdf" });
            
            // Create a temporary link and trigger download
            const downloadUrl = URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = downloadUrl;
            link.download = includeCert ? "Package_{{ $package->package_id }}_Signed_With_Certificate.pdf" : "Package_{{ $package->package_id }}_Signed_Merged.pdf";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
        } catch (error) {
            console.error("Error merging PDFs:", error);
            alert("An error occurred while merging the PDF files.");
        }
    }
</script>
@endsection