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

@section('content')
<style type="text/css">
    .text-red-600 {
      color:#ff6666 !important;
    }
    .bg-red-500 {
        background-color:#ff6666;
    }
    .bg-green-500 
    {
        background-color:#1a7a6e;
    }
    .bg-amber-500
    {
        background-color:#f59e0b;
    }
</style>
<div class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6">

    <div x-data="{ pageName: `{{ $page_title }} Docs`}">
      <!-- <div class="flex flex-wrap items-center justify-between gap-3 pb-6"> -->
      <div class="flex-wrap items-center justify-between gap-3 pb-6">
         <div>
            <!-- Breadcrumbs placed on top -->
            <nav class="mb-2">
               <ol class="flex items-center gap-1.5">
                  <li>
                     <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="/">
                        Home
                        <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                     </a>
                  </li>
                  <li class=" text-sm text-gray-800 dark:text-white/90" x-text="pageName" style="margin-top:4px"></li>
               </ol>
            </nav>

            

            @php
                $title = strtolower(trim($page_title));
                // Fetch batch details if we are in bulk view mode
                $currentBatch = null;
                if(request('bulk_guid')) {
                    $currentBatch = DB::table('bulk_batches')->where('bulk_guid', request('bulk_guid'))->first();
                }
            @endphp

            @if($currentBatch)
                <!-- NEW: Bulk Batch Header Style with Popover -->
                <div class="flex flex-col">
                    <h2 class="text-xl font-black text-gray-900 dark:text-white tracking-tight flex items-center">
                        {{ $currentBatch->batch_name ?? 'Bulk Signature Batch' }}
                        <span class="help-icon-wrapper">
                            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                            <span class="help-popover-text" style="bottom: 100%;width:460px">
                                <span class="popover-header">Bulk Signature Batch</span>
                                <span class="popover-body">View all independent signature requests generated as part of this bulk batch. Track individual recipient signing progress and access signed documents.</span>
                            </span>
                        </span>
                    </h2>
                    <p class="text-[10px] font-mono text-primary uppercase tracking-widest mt-1 italic">
                        Batch ID : {{ $currentBatch->bulk_guid }}
                    </p>
                </div>
                
            @else
                <!-- EXISTING: Standard List Header Style with Popover -->
                <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
                    @if(str_contains($title, 'deleted'))
                        Trashed Documents
                    @else
                        {{ $page_title }} Documents
                    @endif
                    <span class="help-icon-wrapper">
                        <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                        <span class="help-popover-text" style="bottom: 100%;width:460px">
                            <span class="popover-header">{{ str_contains($title, 'deleted') ? 'Deleted Documents' : $page_title . ' Documents' }}</span>
                            <!-- <span class="popover-body">Track status, monitor signing progress, view details, or follow up with recipients on documents sent out for electronic signature.</span> -->
                            <span class="popover-body">
                                @if(str_contains($title, 'sent'))
                                    View and manage documents you have sent for signature. Track their signing status, review recipient activity, and access the documents and related details.
                                @elseif(str_contains($title, 'completed'))
                                    View documents where all required signers have completed their signing. Access the completed documents and review their signing details.
                                @elseif(str_contains($title, 'deleted'))
                                    Documents you delete are moved to the trash. You can review trashed documents and restore them when needed.
                                @endif
                            </span>
                        </span>
                    </span>
                </h2>
            @endif

            <p class="text-sm text-gray-500 dark:text-gray-400">
                @if($currentBatch)
                    Viewing all independent signature requests created within this specific bulk batch.
                @elseif(str_contains($title, 'sent'))
                    Track documents you have sent for signing.
                @elseif(str_contains($title, 'completed'))
                    View documents that have been completed and signed.
                @elseif(str_contains($title, 'deleted'))
                    View documents that have been moved to the trash.
                @else
                    Track your store's progress to boost your sales.
                @endif
            </p>

                <!-- progress bar -->
                @if(isset($batch) && $batch)
                    @php
                        $total = (int) $batch->total_count;
                        $processed = (int) $batch->processed_count;
                        $success = (int) $batch->success_count;
                        $failed = (int) $batch->failed_count;
                        $percent = $total > 0 ? round(($processed / $total) * 100) : 0;
                        $isProcessing = in_array($batch->status, ['Queued', 'Processing', 'Pending']);
                    @endphp

                    <div id="bulk-progress-container" style="width:100%" class=" mt-2 mb-2 rounded-lg border border-stroke bg-white p-5 shadow-sm dark:border-strokedark dark:bg-boxdark">
                        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-3 border-b border-stroke dark:border-strokedark">
                            <div>
                                <div class="flex items-center gap-2">
                                    <h3 class="text-base font-bold text-gray-900 dark:text-white flex items-center gap-2">
                                        <i class="bi bi-collection text-primary"></i>
                                        Batch: <span class="text-primary">{{ $batch->batch_name }}</span>
                                    </h3>
                                    
                                    <!-- Batch Status Badge -->
                                    <span id="batch-status-badge" class="px-2.5 py-0.5 rounded-full text-xs font-semibold
                                        @if($isProcessing) bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400
                                        @elseif($batch->status == 'Completed') bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400
                                        @elseif($batch->status == 'Partial') bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400
                                        @else bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 @endif">
                                        <span id="batch-status-spinner" class="@if(!$isProcessing) hidden @endif inline-block animate-spin mr-1">
                                            <i class="bi bi-arrow-repeat"></i>
                                        </span>
                                        <span id="batch-status-text">{{ $batch->status }}</span>
                                    </span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">Batch Identifier: <code class="font-mono text-gray-600 dark:text-gray-300">{{ $batch->bulk_guid }}</code></p>
                            </div>

                            <!-- Metric Counters -->
                            <div class="flex items-center gap-4 text-xs font-medium">
                                <div class="text-center px-3 py-1.5 rounded-md bg-gray-50 dark:bg-meta-4">
                                    <span class="text-gray-400 block text-[10px] uppercase font-bold">Total</span>
                                    <span id="stat-total" class="font-bold text-sm text-gray-800 dark:text-white">{{ $total }}</span>
                                </div>
                                <div class="text-center px-3 py-1.5 rounded-md bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300">
                                    <span class="block text-[10px] uppercase font-bold">Processed</span>
                                    <span id="stat-processed" class="font-bold text-sm">{{ $processed }}</span>
                                </div>
                                <div class="text-center px-3 py-1.5 rounded-md bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400">
                                    <span class="block text-[10px] uppercase font-bold">Delivered</span>
                                    <span id="stat-success" class="font-bold text-sm">{{ $success }}</span>
                                </div>
                                @if($failed > 0 || $isProcessing)
                                <div id="stat-failed-box" class="text-center px-3 py-1.5 rounded-md bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 {{ $failed == 0 ? 'hidden' : '' }}">
                                    <span class="block text-[10px] uppercase font-bold">Failed</span>
                                    <span id="stat-failed" class="font-bold text-sm">{{ $failed }}</span>
                                </div>
                                @endif
                            </div>
                        </div>

                        <!-- Progress Bar & Active State Text -->
                        <div class="mt-4 space-y-2">
                            <div class="flex justify-between items-center text-xs">
                                <span id="live-progress-subtitle" class="font-medium text-gray-600 dark:text-gray-300 flex items-center gap-1.5">
                                    @if($isProcessing)
                                        <i class="bi bi-clock-history text-blue-500 animate-pulse"></i>
                                        <span>Processing in background: <strong id="progress-count-text">{{ $processed }}</strong> of <strong>{{ $total }}</strong> generated...</span>
                                    @elseif($batch->status == 'Completed')
                                        <i class="bi bi-check-circle-fill text-green-500"></i>
                                        <span>Batch complete! All {{ $total }} requests have been successfully sent.</span>
                                    @elseif($batch->status == 'Partial')
                                        <i class="bi bi-exclamation-triangle-fill text-amber-500"></i>
                                        <span>Completed with some failures: {{ $success }} sent, {{ $failed }} failed.</span>
                                    @else
                                        <i class="bi bi-info-circle text-gray-400"></i>
                                        <span>Status: {{ $batch->status }}</span>
                                    @endif
                                </span>
                                <span id="progress-percent-label" class="font-bold text-gray-700 dark:text-gray-200">{{ $percent }}%</span>
                            </div>

                            <!-- Progress Bar -->
                            <div class="w-full bg-gray-200 dark:bg-meta-4 h-2.5 rounded-full overflow-hidden">
                                <div id="progress-bar-fill" 
                                    class="h-2.5 rounded-full transition-all duration-500 ease-out 
                                    @if($isProcessing) bg-primary @elseif($batch->status == 'Completed') bg-green-500 @elseif($batch->status == 'Partial') bg-amber-500 @else bg-red-500 @endif" 
                                    style="width: {{ $percent }}%;">
                                </div>
                            </div>

                            <p class="text-[6px] text-gray-700 italic">
                                Emails are sent with automatic rate spacing to protect delivery reputation. You can navigate away at any time—the process continues safely in the background.
                            </p>
                        </div>

                        <!-- Failed Recipients Accordion / Notification (if any) -->
                        <div id="failed-recipients-box" class="mt-4 pt-3 border-t border-stroke dark:border-strokedark {{ count($batch_failed_items) > 0 ? '' : 'hidden' }}">
                            <div class="bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-900/40 rounded-lg p-3">
                                <div class="flex items-center justify-between">
                                    <span class="text-xs font-bold text-red-800 dark:text-red-300 flex items-center gap-1.5">
                                        <i class="bi bi-exclamation-circle-fill"></i>
                                        Undelivered Recipients (<span id="failed-items-count">{{ count($batch_failed_items) }}</span>)
                                    </span>
                                    <button type="button" onclick="toggleFailedDetails()" class="text-xs text-red-700 dark:text-red-400 underline font-medium">View Details</button>
                                </div>
                                <div id="failed-details-list" class="hidden mt-3 space-y-1.5 text-xs text-red-700 dark:text-red-300 max-h-36 overflow-y-auto">
                                    @foreach($batch_failed_items as $fItem)
                                        <div class="p-2 rounded bg-white dark:bg-boxdark border border-red-100 dark:border-red-900/30 flex justify-between items-center">
                                            <div>
                                                <strong>Row {{ $fItem->row_index }}:</strong> {{ $fItem->recipient_name }} &lt;{{ $fItem->recipient_email }}&gt;
                                            </div>
                                            <span class="text-[10px] text-red-500 italic max-w-[240px] truncate" title="{{ $fItem->error_message }}">
                                                {{ $fItem->error_message ?: 'Delivery failed' }}
                                            </span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                <!-- progress bar -->
         </div>

         <!-- + Signature Request Button placed where breadcrumbs were -->
         <!-- <div class="flex gap-3">
             <a href="{{ route('signature_request') }}" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm font-medium ">
                 + Signature Request
             </a>
         </div> -->
        @if(!str_contains(strtolower($title ?? ''), 'deleted'))
            <!--
            <div class="flex gap-3">
                <a href="{{ route('signature_request') }}" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm font-medium">
                    + Signature Request
                </a>
            </div>
            -->
        @endif
      </div>
   </div>
   
   <!-- Breadcrumb End -->

   <!-- filter start -->
    <div class="rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        
        @if(isset($packages) && count($packages) > 0)
        <div class="border-gray-200 px-5 py-4 dark:border-gray-800">
            <div class="flex gap-3 sm:justify-between">
            
            {{-- Search Box --}}
            <form method="GET" action="{{ url()->current() }}" 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" />
                    </svg>
                </span>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search Package ID..." 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>
                
                <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="{{ url()->current() }}">
                        @if(request('search')) <input type="hidden" name="search" value="{{ request('search') }}"> @endif
                        @if(request('perPage')) <input type="hidden" name="perPage" value="{{ request('perPage') }}"> @endif

                        <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-1 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="{{ url()->current() }}" 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 end -->

            </div>
        </div>
        @endif
    </div>
   <!-- filter section 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">Package</span>
            <span class="text-xs font-bold uppercase tracking-wider text-gray-500"><!--Action--></span>
        </div>

        @forelse($packages as $key => $package)
        <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">
                <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 (First 2 of GUID) -->
                <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 text-xs">
                    {{ strtoupper(substr($package->package_guid, 0, 2)) }}
                </div>

                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-bold text-red-800 dark:text-red-500 truncate">{{ $package->package_guid }}</h4>
                    <p class="text-xs text-gray-500 truncate">{{ $package->package_date }}</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">
                        <a href="/signature_request_details/{{ $package->package_guid }}" 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">Details</a>
                        @if($status!="Trash")
                        <form action="{{ route('delete_package', $package->package_id) }}" method="POST" onsubmit="return confirm('Delete this Package?')">
                            @csrf
                            <button class="text-xs flex w-full px-3 py-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg text-left">Delete</button>
                        </form>
                        @endif
                    </div>
                </div> -->
                <!-- 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-48 mt-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl shadow-lg p-2">
                        @if($package->package_is_delete == 'No')
                        <a href="/signature_request_details/{{ $package->package_guid }}" 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">Details</a>
                        @endif

                        @if($package->package_is_delete == 'Yes')
                            <!-- <a href="/signature_request_details/{{ $package->package_guid }}" class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg">Permanently Delete</a> -->
                            <form action="{{ route('permanently_delete_package', $package->package_id) }}" method="POST" onsubmit="return confirm('Do you really want to delete this package and all associated files? This action cannot be undone.')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" 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 font-bold">
                                    Permanently Delete
                                </button>
                            </form>
                        @endif
                        
                        <!-- ADDED: IN-PERSON LINKS -->
                        @if($package->package_sent_mode == 'Local' && $package->package_status == 'Pending' && $package->package_is_delete== 'No' )
                        <a href="{{ url()->current() }}?in_person_links={{ $package->package_guid }}" 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">
                            In-Person Links
                        </a>
                        @endif

                        @if($status!="Trash")
                        <form action="{{ route('delete_package', $package->package_id) }}" method="POST" onsubmit="return confirm('Delete this Package?')">
                            @csrf
                            <button class="text-xs flex w-full px-3 py-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg text-left">Delete</button>
                        </form>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Expanded Content -->
            <div x-show="expanded" x-collapse x-cloak class="bg-gray-50/50 dark:bg-white/[0.01] px-14 pb-4">
                <div class="border-t border-gray-100 dark:border-gray-800 pt-4 space-y-3 ml-4">
                    <!-- Progress Bar for Mobile -->
                    <div>
                        @php
                            $totalSigners = (int)$package->total_signers;
                            $completedSigners = (int)$package->completed_signers;
                            $declinedSigners = (int)($package->declined_signers ?? 0);
                            $completedPercent = $totalSigners > 0 ? ($completedSigners / $totalSigners) * 100 : 0;
                            $declinedPercent = $totalSigners > 0 ? ($declinedSigners / $totalSigners) * 100 : 0;
                        @endphp
                        <div class="flex justify-between items-center mb-1">
                            <p class="text-[10px] font-bold uppercase text-gray-400">Signature Progress</p>
                            <div class="relative group inline-flex items-center gap-1"
                                 title="{{ $declinedSigners > 0 ? $declinedSigners . ' ' . ($declinedSigners === 1 ? 'signer has declined' : 'signers have declined') : '' }}">
                                <span class="text-[10px] font-bold text-brand-600 dark:text-brand-400">
                                    {{ $completedSigners }} of {{ $totalSigners }} signed
                                </span>
                                @if($declinedSigners > 0)
                                    <span class="inline-block h-1.5 w-1.5 rounded-full bg-red-500"></span>
                                    <div class="pointer-events-none absolute bottom-full right-0 mb-1 hidden group-hover:flex flex-col items-end z-30">
                                        <div class="rounded-md bg-gray-900 px-2 py-0.5 text-[10px] font-medium text-white shadow-md dark:bg-gray-800 whitespace-nowrap">
                                            {{ $declinedSigners }} {{ $declinedSigners === 1 ? 'signer has declined' : 'signers have declined' }}
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 dark:bg-gray-700 flex overflow-hidden">
                            @if($completedPercent > 0)
                                <div class="bg-brand-500 h-1.5 transition-all duration-500" style="width: {{ $completedPercent }}%"></div>
                            @endif
                            @if($declinedPercent > 0)
                                <div class="bg-red-500 h-1.5 transition-all duration-500" style="width: {{ $declinedPercent }}%"></div>
                            @endif
                        </div>
                    </div>
                    
                    <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400 mb-2">Templates</p>
                        <div class="flex flex-wrap gap-2">
                            @if(!empty($package->template_titles))
                                @foreach(explode(',', $package->template_titles) as $title)
                                    <span class="inline-flex items-center justify-center gap-1 rounded-lg bg-gray-400 px-2.5 py-0.5 text-xs font-medium text-white dark:bg-white/5 dark:text-white/80">
                                        {{ trim($title) }}
                                    </span>
                                @endforeach
                            @else
                                <span class="text-sm text-gray-400 italic">N/A</span>
                            @endif
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-[10px] font-bold uppercase text-gray-400">Row Number</p>
                            <p class="text-sm font-bold text-gray-800 dark:text-gray-200">#{{ ($packages->currentPage() - 1) * $packages->perPage() + $loop->iteration }}</p>
                        </div>
                        <div>
                            <p class="text-[10px] font-bold uppercase text-gray-400">Signing Mode</p>
                            <p class="text-sm font-bold text-gray-800 dark:text-gray-200">
                                {{-- $package->package_sent_mode == 'Email' ? 'Remote via Email' : ($package->package_sent_mode == 'Local' ? 'In-Person' : '') --}}
                                {{ !empty($package->public_link_id) ? 'Public Link' : ($package->package_sent_mode == 'Email' ? 'Remote via Email' : ($package->package_sent_mode == 'Local' ? 'In-Person' : '')) }}
                            </p>
                        </div>
                        <div>
                            <p class="text-[10px] font-bold uppercase text-gray-400">Status</p>
                            <p class="text-sm font-bold {{ $package->package_status == 'Declined' ? 'text-red-600 dark:text-red-500' : 'text-gray-800 dark:text-gray-200' }}">{{ $package->package_status }}</p>
                        </div>
                        <div>
                            <p class="text-[10px] font-bold uppercase text-gray-400">Date</p>
                            <p class="text-sm font-bold text-gray-800 dark:text-gray-200">{{ $package->package_date }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="p-8 text-center text-gray-500">No Documents available</div>
        @endforelse
   </div>

   <!-- Desktop Table View -->
   <div class="mt-6 hidden lg:block overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="overflow-x-auto">
         <table class="w-full table-auto">
            <thead>
               @if(isset($packages) && count($packages) > 0)
               <tr class="border-b dark:border-gray-800">
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">#</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Package ID</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Templates</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Signing Mode</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Status</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Progress</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">
                    <!-- Date -->
                    @if($page_title == "Sent ")
                        Sent Date
                    @elseif($page_title == "Completed ")
                        Date Signed
                    @elseif($page_title == "Deleted ")
                        Date Deleted
                    @endif
                  </th>
                  <th class="p-4 text-center text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400"><!--Action--></th>
               </tr>
               @endif
            </thead>

            <tbody class="divide-y dark:divide-gray-800">
               @forelse($packages as $key => $package)
               <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">{{ ($packages->currentPage() - 1) * $packages->perPage() + $loop->iteration }}</span>
                  </td>
                  <td class="p-4 whitespace-nowrap">
                     <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $package->package_guid }}</span>
                  </td>
                  <td class="p-4 whitespace-nowrap">
                    <div class="flex flex-wrap gap-2">
                        @if(!empty($package->template_titles))
                            @foreach(explode(',', $package->template_titles) as $title)
                                <span class="inline-flex items-center justify-center gap-1 rounded-lg bg-gray-400 px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white/80">
                                    {{ trim($title) }}
                                </span>
                            @endforeach
                        @else
                            <span class="text-sm text-gray-400 italic">N/A</span>
                        @endif
                    </div>
                  </td>
                  <td class="p-4 whitespace-nowrap">
                     <span class="text-sm font-medium text-gray-700 dark:text-gray-400">
                        {{-- $package->package_sent_mode == 'Email' ? 'Remote via Email' : ($package->package_sent_mode == 'Local' ? 'In-Person' : '') --}}
                        {{ !empty($package->public_link_id) ? 'Public Link' : ($package->package_sent_mode == 'Email' ? 'Remote via Email' : ($package->package_sent_mode == 'Local' ? 'In-Person' : '')) }}
                     </span>
                  </td>
                  <td class="p-4 whitespace-nowrap">
                     <span class="text-sm font-medium {{ $package->package_status == 'Declined' ? 'text-red-600 dark:text-red-500 font-semibold' : 'text-gray-700 dark:text-gray-400' }}">
                        {{ $package->package_status }}
                     </span>
                  </td>
                  <td class="p-4 whitespace-nowrap min-w-[150px]">
                     @php
                         $totalSigners = (int)$package->total_signers;
                         $completedSigners = (int)$package->completed_signers;
                         $declinedSigners = (int)($package->declined_signers ?? 0);
                         $completedPercent = $totalSigners > 0 ? ($completedSigners / $totalSigners) * 100 : 0;
                         $declinedPercent = $totalSigners > 0 ? ($declinedSigners / $totalSigners) * 100 : 0;
                     @endphp
                     <div class="flex flex-col gap-1.5">
                        <div class="flex justify-between items-center">
                            <div class="relative group inline-flex items-center gap-1 cursor-default"
                                 title="{{ $declinedSigners > 0 ? $declinedSigners . ' ' . ($declinedSigners === 1 ? 'signer has declined' : 'signers have declined') : '' }}">
                                <span class="text-xs font-bold text-gray-600 dark:text-gray-400">
                                    {{ $completedSigners }} of {{ $totalSigners }} signed
                                </span>
                                @if($declinedSigners > 0)
                                    <span class="inline-block h-1.5 w-1.5 rounded-full bg-red-500"></span>

                                    <!-- Hover Tooltip -->
                                    <div class="pointer-events-none absolute bottom-full left-0 mb-1.5 hidden group-hover:flex flex-col items-start z-30">
                                        <div class="rounded-md bg-gray-900 px-2 py-1 text-[11px] font-medium text-white shadow-md dark:bg-gray-800 whitespace-nowrap">
                                            {{ $declinedSigners }} {{ $declinedSigners === 1 ? 'signer has declined' : 'signers have declined' }}
                                        </div>
                                        <div class="h-1 w-2 border-x-4 border-t-4 border-x-transparent border-t-gray-900 dark:border-t-gray-800 ml-2"></div>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 dark:bg-gray-700 flex overflow-hidden">
                            @if($completedPercent > 0)
                                <div class="bg-brand-500 h-1.5 transition-all duration-500" style="width: {{ $completedPercent }}%"></div>
                            @endif
                            @if($declinedPercent > 0)
                                <div class="bg-red-500 h-1.5 transition-all duration-500" style="width: {{ $declinedPercent }}%"></div>
                            @endif
                        </div>
                     </div>
                  </td>
                  <td class="p-4 whitespace-nowrap">
                    
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-400">
                        {{-- $package->package_date --}}
                        @if($page_title == "Sent ")
                            {{ $package->package_date }}
                        @elseif($page_title == "Completed ")
                            {{ $package->package_complete_date }}
                        @elseif($page_title == "Deleted ")
                            {{ $package->package_delete_date }}
                        @endif
                    </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="24" height="24" 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">
                            <a href="/signature_request_details/{{ $package->package_guid }}" 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">Details</a>
                            @if($status!="Trash")
                            <form action="{{ route('delete_package', $package->package_id) }}" method="POST" onsubmit="return confirm('Delete this Package?')">
                                @csrf
                                <button class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">Delete</button>
                            </form>
                            @endif
                        </div> -->
                        <div x-show="open" @click.outside="open = false" class="shadow-theme-lg dark:bg-gray-dark fixed z-20 w-48 space-y-1 rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800" x-ref="dropdown">
                            
                            @if($package->package_is_delete == 'No')
                            <a href="/signature_request_details/{{ $package->package_guid }}" 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">Details</a>
                            @endif
                            @if($package->package_is_delete == 'Yes')
                            <!-- <a href="/signature_request_details/{{ $package->package_guid }}" class="text-xs flex w-full px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg">Permanently Delete</a> -->
                                <form action="{{ route('permanently_delete_package', $package->package_id) }}" method="POST" onsubmit="return confirm('Do you really want to delete this package and all associated files? This action cannot be undone.')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 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 font-bold">
                                        Permanently Delete
                                    </button>
                                </form>
                            @endif
                            
                            <!-- ADDED: IN-PERSON LINKS -->
                            @if($package->package_sent_mode == 'Local' && $package->package_status == 'Pending' && $package->package_is_delete== 'No')
                            <a href="{{ url()->current() }}?in_person_links={{ $package->package_guid }}" 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">
                                In-Person Links
                            </a>
                            @endif

                            @if($status!="Trash")
                            <form action="{{ route('delete_package', $package->package_id) }}" method="POST" onsubmit="return confirm('Delete this Package?')">
                                @csrf
                                <button class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">Delete</button>
                            </form>
                            @endif
                        </div>
                    </div>
                </td>
               </tr>
               @empty
               <tr><td colspan="8" class="text-center p-4 text-gray-500">No Documents available</td></tr>
               @endforelse
            </tbody>
         </table>
      </div>
   </div>

  

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

<!-- In-Person Link -->
 
<!-- START: IN-PERSON MODAL LOGIC -->
<!-- <div x-data="{ 
    showInPersonModal: {{ session('recent_local_package') ? 'true' : 'false' }},
    toggleBodyScroll(show) {
        document.body.style.overflow = show ? 'hidden' : '';
    }
}" 
x-init="$watch('showInPersonModal', value => toggleBodyScroll(value))"> -->

<div x-data="{ 
    showInPersonModal: {{ (session('recent_local_package') || request('in_person_links')) ? 'true' : 'false' }},
    toggleBodyScroll(show) {
        document.body.style.overflow = show ? 'hidden' : '';
    },
    closeModal() {
        this.showInPersonModal = false;
        // Optional: Remove the query string from URL without refreshing
        window.history.replaceState({}, document.title, window.location.pathname);
    }
}" 
x-init="$watch('showInPersonModal', value => toggleBodyScroll(value))">


    @if(isset($recent_package_data))
    <!-- IN-PERSON SIGNING OFFCANVAS -->
    <div x-show="showInPersonModal" x-cloak class="fixed inset-0 overflow-hidden" style="z-index: 99999;" role="dialog" aria-modal="true">
        <!-- Backdrop -->
        <div x-show="showInPersonModal" 
             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="showInPersonModal = 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="showInPersonModal" 
                 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="w-screen max-w-md pointer-events-auto">
                
                <div class="flex h-full flex-col bg-white shadow-xl dark:bg-boxdark border-l border-stroke dark:border-strokedark bg-gray-50 dark:bg-meta-4">
                    <!-- Header -->
                    <div class="px-6 py-6 border-b border-stroke dark:border-strokedark bg-gray-50 dark:bg-meta-4">
                        <div class="flex items-start justify-between">
                            <div>
                                <h2 class="text-xl font-bold text-gray-900 dark:text-white">In-Person Signing</h2>
                                <p class="text-xs text-gray-500 mt-1">Package ID: <span class="font-mono text-primary">{{ $recent_package_data->package_guid }}</span></p>
                            </div>
                            <button type="button" @click="showInPersonModal = false" class="text-gray-400 hover:text-gray-500 focus:outline-none text-2xl">
                                &times;
                            </button>
                        </div>
                    </div>

                    <!-- Body -->
                    <div class="flex-1 overflow-y-auto p-6 space-y-6">
                        <div class="bg-blue-50 dark:bg-blue-500/10 p-4 rounded-lg border border-blue-100 dark:border-blue-500/20">
                            <p class="text-sm text-blue-700 dark:text-blue-400 flex gap-2">
                                <i class="bi bi-info-circle-fill"></i>
                                 <strong>In-Person Signing</strong> You can hand the device to the signers listed below to complete the process immediately.
                            </p>
                        </div>

                        <div class="space-y-4">
                            <h3 class="text-xs font-bold uppercase text-gray-400 tracking-wider">Recipients</h3>
                            
                            @if(isset($recent_package_data->signers))
                                @foreach($recent_package_data->signers as $signer)
                                <div class="flex items-center justify-between p-4 rounded-xl border border-stroke dark:border-strokedark bg-white dark:bg-meta-4 shadow-sm">
                                    <div class="flex items-center gap-3">
                                        <div class="h-10 w-10 flex-shrink-0 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">
                                            {{ substr($signer->email_name, 0, 1) }}
                                        </div>
                                        <div>
                                            <div class="text-sm font-semibold text-gray-800 dark:text-white">{{ $signer->email_name }}</div>
                                            <div class="text-xs text-gray-500">{{ $signer->email_id }}</div>
                                        </div>
                                    </div>

                                    <div>
                                        @if($signer->email_template_status == 'Completed')
                                            <span class="inline-flex items-center gap-1 text-green 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 ">
                                                <i class="bi bi-check-circle-fill"></i> Signed
                                            </span>
                                        @else
                                            <a href="/sign/{{ $signer->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 <i class="bi bi-arrow-right-short text-lg"></i>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                                @endforeach
                            @endif
                        </div>
                    </div>

                    <!-- Footer -->
                    <div class="p-6 border-t border-stroke dark:border-strokedark bg-white dark:bg-boxdark">
                        <button type="button" @click="showInPersonModal = false" class="w-full bg-gray-100 dark:bg-meta-4 text-gray-700 dark:text-white px-4 py-3 rounded-lg text-sm font-bold hover:bg-gray-200 dark:hover:bg-opacity-80 transition-colors">
                            Close & View List
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<style>
    [x-cloak] { display: none !important; }
</style>
<!-- END: IN-PERSON MODAL LOGIC -->
<!-- In-Person Link -->
@endsection

@if(isset($batch) && $batch)
<script>
    function toggleFailedDetails() {
        const el = document.getElementById('failed-details-list');
        if (el) el.classList.toggle('hidden');
    }

    (function() {
        const batchId = {{ $batch->id }};
        let currentStatus = "{{ $batch->status }}";
        const isCurrentlyActive = ['Queued', 'Processing', 'Pending'].includes(currentStatus);

        if (!isCurrentlyActive) {
            return; // Already completed or cancelled, no polling needed
        }

        // Poll every 3.5 seconds
        const pollInterval = setInterval(async () => {
            try {
                const response = await fetch(`/bulk/batch-status/${batchId}`);
                if (!response.ok) return;
                
                const data = await response.json();
                
                // Update numerical badges
                document.getElementById('stat-total').innerText = data.total_count;
                document.getElementById('stat-processed').innerText = data.processed_count;
                document.getElementById('stat-success').innerText = data.success_count;
                document.getElementById('progress-count-text').innerText = data.processed_count;

                // Handle Failed count
                if (data.failed_count > 0) {
                    const failedBox = document.getElementById('stat-failed-box');
                    const failedCount = document.getElementById('stat-failed');
                    if (failedBox && failedCount) {
                        failedCount.innerText = data.failed_count;
                        failedBox.classList.remove('hidden');
                    }
                }

                // Update percentage & progress bar
                const percent = data.total_count > 0 ? Math.round((data.processed_count / data.total_count) * 100) : 0;
                document.getElementById('progress-percent-label').innerText = percent + '%';
                
                const barFill = document.getElementById('progress-bar-fill');
                if (barFill) {
                    barFill.style.width = percent + '%';
                }

                // Update status badge
                document.getElementById('batch-status-text').innerText = data.status;

                // If processing finished
                if (!['Queued', 'Processing', 'Pending'].includes(data.status)) {
                    clearInterval(pollInterval);
                    
                    // Hide spinner
                    const spinner = document.getElementById('batch-status-spinner');
                    if (spinner) spinner.classList.add('hidden');

                    // Refresh table quietly so new packages show up in the list
                    setTimeout(() => {
                        window.location.reload();
                    }, 1200);
                }
            } catch (err) {
                console.error("Batch polling error:", err);
            }
        }, 3500);
    })();
</script>
@endif