--- START OF FILE Paste July 10, 2026 - 3:45PM ---

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

@section('content')
<!-- Force Width Styles to override Tailwind breakpoint issues -->
<style>
    .force-panel-width {
        /*width: 100% !important;*/
        width: 350px !important;
        
    }
    /*
    @media (min-width: 768px) {
        .force-panel-width {
            width: 30% !important;
        }
    }
        */
</style>

<!-- 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: '',
        toggleBodyScroll(show) {
            if (show) {
                document.body.style.overflow = 'hidden';
            } else {
                document.body.style.overflow = '';
            }
        }
    }" 
    x-init="$watch('showOffcanvas', value => toggleBodyScroll(value))"
    x-on:open-pdf-preview.window="offcanvasPdfUrl = $event.detail.url; offcanvasTitle = $event.detail.title; showOffcanvas = true"
    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="flex items-center gap-2">
               
               <!-- (1) Preview Button (Eye Icon) -->
               <button type="button" @click="processing = true; await mergeAllPDFs(true, true, 'Full Package Preview'); processing = false;" :disabled="processing"
                  class="inline-flex items-center justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 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"
                  title="Preview Merged Document">
                  <template x-if="!processing">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                  </template>
                  <template x-if="processing">
                     <svg class="animate-spin h-5 w-5 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>
               </button>

               <!-- (2) Download Button (Download Icon) -->
               <div 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'"></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>
            </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 -->
      <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">
                  <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>
                  <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 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>
                  <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>
               <div x-show="expanded" x-collapse x-cloak class="mt-4 pl-12 space-y-4">
                  @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
                  <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="#"  class="text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-blue-600">
                                    {{ $doc_details->title }}
                                 </a>
                              @endif
                           @endforeach
                        @endif
                     </div>
                  </div>
                  @if($email_template->email_template_status == "Pending")
                  <div class="pt-2 flex gap-2">
                     @if($package->package_sent_mode == 'Email')
                     <a href="/resend/{{ $email_template->email_template_guid }}" class="inline-flex w-full justify-center items-center gap-1 rounded-lg bg-gray-100 px-3 py-2 text-xs font-semibold text-gray-700 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-300">Resend</a>
                     @endif
                     @if($package->package_sent_mode == 'Local')
                     <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>
                     @endif
                     
                  </div>
                  @endif
               </div>
            </div>
         @empty
            <div class="p-8 text-center text-gray-500">No signers found.</div>
         @endforelse
      </div>

      <!-- Desktop View -->
      <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>
                           @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"><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"><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"><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">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">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")
                                 <button @click="offcanvasPdfUrl = '{{ config('app.url').'/signed_documents/'.$package->package_id.'_'.$doc_details->template_id.'.pdf' }}'; offcanvasTitle = '{{ $doc_details->title }}'; showOffcanvas = true" class="inline-flex items-center gap-1.5 text-xs font-medium text-blue-600 underline text-left">{{ $doc_details->title }}</button>
                              @else
                                 <a href="#"  class="inline-flex items-center gap-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-blue-600">{{ $doc_details->title }}</a>
                              @endif
                           @endforeach
                        @endif
                     </div>
                  </td>
                  <td class="p-4 text-right space-x-2">
                    @if($email_template->email_template_status == "Pending")
                        @if($package->package_sent_mode == 'Email')
                           <a href="/resend/{{ $email_template->email_template_guid }}" class="inline-flex items-center gap-1 rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-300 border border-gray-200 dark:border-gray-700">Resend</a>
                        @endif
                        @if($package->package_sent_mode == 'Local')
                           <a href="/sign/{{ $email_template->email_template_guid }}" target="_blank" class="inline-flex items-center gap-1 rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-300 border border-gray-200 dark:border-gray-700 ">Sign Now</a> 
                        @endif
                    @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>

   <!-- FORCEFUL PDF PREVIEW OFF-CANVAS -->
   <div x-show="showOffcanvas" x-cloak class="fixed inset-0 overflow-hidden" style="z-index: 99999999;" role="dialog" aria-modal="true">
        <!-- Backdrop -->
        <div x-show="showOffcanvas" 
            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="showOffcanvas = false"
            class="fixed inset-0 bg-black/50 transition-opacity"></div>

        <div class="fixed inset-y-0 right-0 flex max-w-full">
            <!-- Force width strictly using the CSS class defined at top -->
            <div x-show="showOffcanvas" 
                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" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
                @click.stop
                class="force-panel-width pointer-events-auto h-screen">
                
                <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 shrink-0">
                        <div class="flex items-start justify-between">
                            <h2 class="text-base font-semibold text-gray-900 dark:text-white truncate pr-4" x-text="offcanvasTitle">PDF Preview</h2>
                            <button type="button" @click="showOffcanvas = false" class="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 stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                            </button>
                        </div>
                    </div>
                    <div class="relative flex-1 bg-gray-100 dark:bg-gray-800 overflow-hidden">
                        <template x-if="showOffcanvas">
                           <iframe :src="offcanvasPdfUrl" class="w-full h-full border-none" style="display: block;"></iframe>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    /**
     * Merges PDFs and either downloads them or dispatches an event to the Alpine offcanvas preview.
     * @param {boolean} includeCert - Whether to append the signing certificate.
     * @param {boolean} isPreview - If true, displays in offcanvas instead of downloading.
     * @param {string} title - The title to show in the offcanvas header.
     */
    async function mergeAllPDFs(includeCert, isPreview = false, title = "Document Preview") {
        const { PDFDocument } = PDFLib;
        const mergedPdf = await PDFDocument.create();
        let urls = @json($all_signed_urls);
        if (includeCert) urls.push("{{ $certificate_url }}");
        if (urls.length === 0) { alert("No documents found to process."); return; }
        
        try {
            for (const url of urls) {
                const response = await fetch(url);
                if (!response.ok) continue;
                const bytes = await response.arrayBuffer();
                const pdf = await PDFDocument.load(bytes);
                const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
                copiedPages.forEach((page) => mergedPdf.addPage(page));
            }
            const mergedPdfBytes = await mergedPdf.save();
            const blob = new Blob([mergedPdfBytes], { type: "application/pdf" });
            const downloadUrl = URL.createObjectURL(blob);

            if (isPreview) {
                // Dispatch event to Alpine component to show the offcanvas
                window.dispatchEvent(new CustomEvent('open-pdf-preview', { 
                    detail: { url: downloadUrl, title: title } 
                }));
            } else {
                // Standard download flow
                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 processing PDFs:", error); 
            alert("An error occurred while processing the PDF files."); 
        }
    }
</script>
@endsection