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

@section('content')
<!-- Force Width Styles to override Tailwind breakpoint issues -->
<style>
    .force-panel-width { width: 750px !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))"
    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';
            });

            // 🚀 DYNAMIC URL PREFIX
            $base_file_path = $baseUrl . "/tenant_user/" . session("company_uuid");

            $all_signed_urls = [];
            $certificate_url = $base_file_path . "/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 = $base_file_path . "/signed_documents/" . $package->package_id . "_" . $doc->template_id . ".pdf";
                            if(!in_array($url, $all_signed_urls)) { $all_signed_urls[] = $url; }
                        }
                    }
                }
            }

            $minPendingId = 0;
            if($package->package_sort_order == 'Yes') {
                $minPendingId = $email_templates->where('email_template_status', 'Pending')->min('email_template_id');
            }
         @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">
                  <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 ? 'Processing...' : '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>

               <div x-show="open" x-transition 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;width:275px">
                  <div class="flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-white/5 rounded-lg transition-colors group">
                     <div class="flex items-center gap-3"><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 class="text-sm text-gray-700 dark:text-gray-300">All Signed Documents</span></div>
                     <div class="flex items-center gap-2">
                        <button type="button" @click="open = false; processing = true; const url = await mergeAllPDFs(false, false); if(url) { offcanvasPdfUrl = url; offcanvasTitle = 'All Signed Documents'; showOffcanvas = true; } processing = false;" class="p-1.5 hover:bg-blue-100 rounded text-blue-600"><svg class="w-4 h-4" 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></button>
                        <button type="button" @click="open = false; processing = true; await mergeAllPDFs(false, true); processing = false;" class="p-1.5 hover:bg-gray-200 rounded text-gray-600"><svg class="w-4 h-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></button>
                     </div>
                  </div>
                  <div class="flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-white/5 rounded-lg transition-colors group">
                     <div class="flex items-center gap-3"><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 class="text-sm text-gray-700 dark:text-gray-300">Certificate Only</span></div>
                     <div class="flex items-center gap-2">
                        <button type="button" @click="open = false; offcanvasPdfUrl = '{{ $certificate_url }}'; offcanvasTitle = 'Signing Certificate'; showOffcanvas = true" class="p-1.5 hover:bg-blue-100 rounded text-blue-600"><svg class="w-4 h-4" 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></button>
                        <a href="{{ $certificate_url }}" download="Certificate_{{ $package->package_id }}.pdf" class="p-1.5 hover:bg-gray-200 rounded text-gray-600"><svg class="w-4 h-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></a>
                     </div>
                  </div>
                  <div class="my-1 border-t border-gray-100 dark:border-gray-800"></div>
                  <div class="flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-white/5 rounded-lg transition-colors group">
                     <div class="flex items-center gap-3"><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 class="text-sm text-gray-700 dark:text-gray-300">Docs with Certificate</span></div>
                     <div class="flex items-center gap-2">
                        <button type="button" @click="open = false; processing = true; const url = await mergeAllPDFs(true, false); if(url) { offcanvasPdfUrl = url; offcanvasTitle = 'Documents with Certificate'; showOffcanvas = true; } processing = false;" class="p-1.5 hover:bg-blue-100 rounded text-blue-600"><svg class="w-4 h-4" 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></button>
                        <button type="button" @click="open = false; processing = true; await mergeAllPDFs(true, true); processing = false;" class="p-1.5 hover:bg-gray-200 rounded text-gray-600"><svg class="w-4 h-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></button>
                     </div>
                  </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>

   <!-- Preferences section remains same... -->
   <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]">
         <div class="flex flex-col"><span class="text-[10px] font-bold uppercase text-gray-400">Signing Mode</span><span class="text-sm font-semibold text-gray-800 dark:text-white flex items-center"><i class="bi bi-envelope-paper text-primary"></i> {{ $package->package_sent_mode == 'Local' ? 'In-Person' : 'Remote via Email' }}</span></div>
         <div class="h-8 w-px bg-gray-200 dark:bg-gray-700"></div>
         <div class="flex flex-col"><span class="text-[10px] font-bold uppercase text-gray-400">Sequential Signing</span><span class="text-sm font-semibold {{ $package->package_sort_order == 'Yes' ? 'text-success-600' : 'text-gray-500' }} flex items-center"><i class="bi bi-check-circle-fill"></i> {{ $package->package_sort_order == 'Yes' ? 'Enabled' : 'Disabled' }}</span></div>
         <div class="h-8 w-px bg-gray-200 dark:bg-gray-700"></div>
         <div class="flex flex-col"><span class="text-[10px] font-bold uppercase text-gray-400">Field Visibility</span><span class="text-sm font-semibold {{ $package->package_field_visibility == 'Yes' ? 'text-success-600' : 'text-gray-500' }} flex items-center"><i class="bi bi-eye-fill"></i> {{ $package->package_field_visibility == 'Yes' ? 'Visible to all' : 'Private' }}</span></div>

         @if(isset($batch))
         <!-- Vertical Separator -->
         <div class="h-8 w-px bg-gray-200 dark:bg-gray-700"></div>
         
         <!-- Batch Info Block -->
         <div class="flex flex-col">
            <span class="text-[10px] font-bold uppercase text-gray-400">Part of Bulk Batch</span>
            <div class="flex items-center gap-2">
                  <span class="text-sm font-semibold text-gray-800 dark:text-white flex items-center">
                     <i class="bi bi-layers-fill text-primary mr-1"></i> 
                     {{ $batch->batch_name ?? 'Unnamed Batch' }}
                  </span>
                  <!--<a href="{{ route('bulk.show', $batch->bulk_guid) }}" class="inline-flex items-center rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-mono font-bold text-primary hover:bg-primary">-->
                  <a href="/signature_request_list/all?bulk_guid={{ $batch->bulk_guid }}" class="inline-flex items-center rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-mono font-bold text-primary hover:bg-primary">
                     {{-- substr($batch->bulk_guid, 0, 15) --}}
                     ({{ $batch->bulk_guid }})
                  </a>
            </div>
         </div>
      @endif
                  
      @if(isset($public_link))
            <!-- Vertical Separator -->
            <div class="h-8 w-px bg-gray-200 dark:bg-gray-700"></div>
            
            <!-- Link Info Block -->
            <div class="flex flex-col">
                  <span class="text-[10px] font-bold uppercase text-gray-400">Public Signing Link</span>
                  <div class="flex items-center gap-2">
                     <span class="text-sm font-semibold text-gray-800 dark:text-white flex items-center">
                        <a href="{{ route('public_links.show', $public_link->link_guid) }}" class="inline-flex items-center rounded bg-primary/10 px-1.5 py-0.5   font-bold text-primary hover:bg-primary">
                           <i class="bi bi-link-45deg text-primary text-base mr-1"></i> 
                           {{ $public_link->link_name ?? 'Unnamed Link' }}
                        </a>
                     </span>
                     <!-- <a href="{{ route('public_links.show', $public_link->id) }}" class="inline-flex items-center rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-mono font-bold text-primary hover:bg-primary hover:text-white transition-colors">
                        ({{ $public_link->short_token ?? $public_link->link_guid }})
                     </a> -->
                  </div>
            </div>
      @endif
      </div>
   </div>

   <!-- Stats summary remain same... -->
   <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 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>

   <!-- 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)
            @php $isTurn = ($package->package_sort_order == 'No') || ($email_template->email_template_id == $minPendingId); @endphp
            <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 text-gray-500"><svg :class="expanded ? 'rotate-180' : ''" class="w-4 h-4 transition-transform" 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 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 truncate">{{ $email_template->email_name }}</div><div class="text-xs text-gray-500 truncate">{{ $email_template->email_id }}</div></div>
                  <div><span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium {{ $email_template->email_template_status == 'Completed' ? 'bg-success-50 text-success-700' : 'bg-warning-50 text-warning-700' }} border">{{ $email_template->email_template_status }}</span></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"><div><span class="font-medium">Signed:</span> {{ $email_template->email_template_signed_date ?? '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_url = $base_file_path . "/signed_documents/" . $package->package_id . "_" . $doc_details->template_id . ".pdf"; @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
                                 <span class="text-xs font-medium text-gray-400">{{ $doc_details->title }}</span>
                              @endif
                           @endforeach
                        @endif
                     </div>
                  </div>
               </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)
               @php $isTurn = ($package->package_sort_order == 'No') || ($email_template->email_template_id == $minPendingId); @endphp
               <tr class="group hover:bg-gray-50/80 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 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></div>
                     </div>
                  </td>
                  <!-- <td class="p-4"><span class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium border {{ $email_template->email_template_status == 'Completed' ? 'bg-success-50 text-success-700 border-success-200' : 'bg-warning-50 text-warning-700 border-warning-200' }}">{{ $email_template->email_template_status }}</span></td> -->
                  <!-- <td class="p-4">
                     <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium border {{ 
                        $email_template->email_template_status == 'Completed' ? 'bg-success-50 text-success-700 border-success-200' : 
                        ($email_template->email_template_status == 'Declined' ? 'bg-black text-white border-black' : 'bg-warning-50 text-warning-700 border-warning-200') 
                     }}">{{ $email_template->email_template_status }}</span>
                  </td> -->
                  <td class="p-4">
                     <div class="inline-flex items-center gap-1.5">
                        <!-- Status Badge -->
                        <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium border {{ 
                              $email_template->email_template_status == 'Completed' ? 'bg-success-50 text-success-700 border-success-200' : 
                              ($email_template->email_template_status == 'Declined' ? 'bg-black text-white border-black' : 'bg-warning-50 text-warning-700 border-warning-200') 
                        }}">
                              {{ $email_template->email_template_status }}
                        </span>

                        <!-- Theme Popover for Decline Reason -->
                        @if($email_template->email_template_status == 'Declined')
                              <span class="help-icon-wrapper">
                                 <svg class="w-4 h-4 text-gray-400 hover:text-gray-600 cursor-pointer" 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: 280px;">
                                    <span class="popover-header">Decline Reason</span>
                                    <span class="popover-body">
                                          {{ !empty($email_template->decline_reason) ? $email_template->decline_reason : 'No reason provided' }}
                                    </span>
                                 </span>
                              </span>
                        @endif
                     </div>
                  </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_url = $base_file_path . "/signed_documents/" . $package->package_id . "_" . $doc_details->template_id . ".pdf"; @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 <span class="text-xs font-medium text-gray-400">{{ $doc_details->title }}</span> @endif
                           @endforeach
                        @endif
                     </div>
                  </td>
                  <td class="p-4 text-right space-x-2">
                    @if($email_template->email_template_status == "Pending")
                        @if($isTurn)
                           @if($package->package_sent_mode == 'Email') <a href="/resend/{{ $email_template->email_template_guid }}" class="bg-gray-100 px-3 py-1.5 text-xs font-semibold rounded-lg">Resend</a> @endif
                           @if($package->package_sent_mode == 'Local') <a href="/sign/{{ $email_template->email_template_guid }}" target="_blank" class="bg-gray-100 px-3 py-1.5 text-xs font-semibold rounded-lg">Sign Now</a> @endif
                        @else <span class="text-xs italic text-gray-400">Waiting...</span> @endif
                    @else
                        @php 
                           $firstDoc = $data ? $data[0] : null;
                           $viewUrl = $firstDoc ? $base_file_path . "/signed_documents/" . $package->package_id . "_" . $firstDoc->template_id . ".pdf" : '#';
                        @endphp
                        <!--<button @click="offcanvasPdfUrl = '{{ $viewUrl }}'; offcanvasTitle = '{{ $email_template->email_name }}\'s Document'; showOffcanvas = true" class="bg-gray-100 px-3 py-1.5 text-xs font-semibold rounded-lg">View Signed</button>-->
                        @if($email_template->email_template_status != 'Declined')
                           <button @click="offcanvasPdfUrl = '{{ $viewUrl }}'; offcanvasTitle = '{{ $email_template->email_name }}\'s Document'; showOffcanvas = true" class="bg-gray-100 px-3 py-1.5 text-xs font-semibold rounded-lg">View Signed</button>
                        @endif
                    @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">
        <div x-show="showOffcanvas" x-transition.opacity @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">
            <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" 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 border-b border-gray-200 dark:border-gray-800 shrink-0 flex items-start justify-between">
                        <h2 class="text-base font-semibold 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 d="M6 18L18 6M6 6l12 12" /></svg></button>
                    </div>
                    <div class="relative flex-1 bg-gray-100 dark:bg-gray-800 overflow-hidden">
                        <template x-if="showOffcanvas">
                            <iframe :src="offcanvasPdfUrl + '#view=FitH'" class="w-full h-full border-none" style="display: block;"></iframe>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    async function mergeAllPDFs(includeCert, shouldDownload = true) {
        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 merge."); return null; }

        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 finalUrl = URL.createObjectURL(blob);

            if (shouldDownload) {
                const link = document.createElement("a");
                link.href = finalUrl;
                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);
                return null;
            } else { return finalUrl; }
        } catch (error) { console.error("Error merging PDFs:", error); alert("An error occurred processing the PDF files."); return null; }
    }
</script>
@endsection

<style type="text/css">
  .border-black
  {
   background:black;
  }
</style>