@extends('layouts.app')
@section('title', 'Dashboard')
@section('content')
<div class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6">
   <!-- Metrics -->
   <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <article class="flex items-center gap-5 rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/3">
         <div class="inline-flex h-16 w-16 items-center justify-center rounded-xl bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-white/90">
            <svg class="h-7 w-7" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
               <path d="M14.0003 24.5898V24.5863M14.0003 12.8684V24.5863M9.06478 16.3657V10.6082M18.9341 5.67497C18.9341 5.67497 12.9204 8.68175 9.06706 10.6084M23.5913 8.27989C23.7686 8.55655 23.8679 8.88278 23.8679 9.2241V18.7779C23.8679 19.4407 23.4934 20.0467 22.9005 20.3431L14.7834 24.4015C14.537 24.5248 14.2686 24.5864 14.0003 24.5863M23.5913 8.27989L14.7834 12.6837C14.2908 12.93 13.7109 12.93 13.2182 12.6837L4.41037 8.27989M23.5913 8.27989C23.4243 8.01927 23.1881 7.80264 22.9005 7.65884L14.7834 3.60044C14.2908 3.35411 13.7109 3.35411 13.2182 3.60044L5.10118 7.65884C4.81359 7.80264 4.57737 8.01927 4.41037 8.27989M4.41037 8.27989C4.23309 8.55655 4.13379 8.88278 4.13379 9.2241V18.7779C4.13379 19.4407 4.5083 20.0467 5.10118 20.3431L13.2182 24.4015C13.4644 24.5246 13.7324 24.5862 14.0003 24.5863" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
         </div>
         <div>
            <h3 class="text-2xl font-semibold text-gray-800 dark:text-white/90">
               {{ $pending_count }}
            </h3>
            <p class="flex items-center gap-3 text-gray-500 dark:text-gray-400">
               Pending Docs
            </p>
         </div>
      </article>
      <article class="flex items-center gap-5 rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/3">
         <div class="inline-flex h-16 w-16 items-center justify-center rounded-xl bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-white/90">
            <svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28" fill="none">
               <path d="M7.04102 4.66667H15.791C16.7575 4.66667 17.541 5.45017 17.541 6.41667V20.4167M17.541 20.4167V8.33004H20.4036C20.9846 8.33004 21.5277 8.61836 21.8532 9.09958L24.8239 13.4917C24.9171 13.6295 24.9897 13.7792 25.0402 13.9359M17.541 20.4167H17.5495M17.541 20.4167H11.5592M3.54102 20.4167H6.17451M25.1243 20.4167V14.4721C25.1243 14.2891 25.0956 14.1082 25.0402 13.9359M25.9993 20.4167H22.9342M12.8743 20.4167H17.5495M17.541 13.9359H25.0402M5.29102 9.04167H10.541M10.541 13.4167H3.54102M17.5495 20.4167C17.6595 19.026 18.8229 17.9317 20.2418 17.9317C21.6608 17.9317 22.8242 19.026 22.9342 20.4167M17.5495 20.4167C17.5439 20.4879 17.541 20.5599 17.541 20.6325C17.541 22.1241 18.7502 23.3333 20.2418 23.3333C21.7335 23.3333 22.9427 22.1241 22.9427 20.6325C22.9427 20.5599 22.9398 20.4879 22.9342 20.4167M11.5592 20.4167C11.5648 20.4879 11.5677 20.5599 11.5677 20.6325C11.5677 22.1241 10.3585 23.3333 8.86685 23.3333C7.37522 23.3333 6.16602 22.1241 6.16602 20.6325C6.16602 20.5599 6.16888 20.4879 6.17451 20.4167M11.5592 20.4167C11.4492 19.026 10.2858 17.9317 8.86685 17.9317C7.44787 17.9317 6.28447 19.026 6.17451 20.4167" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
         </div>
         <div>
            <h3 class="text-2xl font-semibold text-gray-800 dark:text-white/90">
               {{ $signed_count }}
            </h3>
            <p class="flex items-center gap-3 text-gray-500 dark:text-gray-400">
               Completed Docs
            </p>
         </div>
      </article>
   </div>

   <div class="grid grid-cols-12 gap-4 md:gap-6 pt-5">
      <!-- ====== Sent Docs Section ====== -->
      <div class="col-span-12 xl:col-span-12">
         <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white px-4 pt-4 pb-3 sm:px-6 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="flex flex-col gap-2 mb-4 sm:flex-row sm:items-center sm:justify-between">
               <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Sent Docs</h3>
               </div>
               <!-- <div class="flex items-center gap-3">
                  <a href="{{ route('signature_request_list','pending') }}" class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">See all</a>
               </div> -->
               @if(isset($signed_packages) && count($signed_packages) > 0)
               <div class="flex items-center gap-3">
                  <a href="{{ route('signature_request_list','completed') }}" class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">
                     See all
                  </a>
               </div>
               @endif
            </div>

            <!-- Mobile View Sent Docs -->
            <div class="block lg:hidden divide-y divide-gray-100 dark:divide-gray-800 border-t dark:border-gray-800">
               @forelse($sent_packages as $key => $package)
                
               <div x-data="{ expanded: false }" class="py-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 transition-transform" :class="expanded ? 'rotate-180' : ''">
                        <svg class="w-4 h-4" 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="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-[10px] text-gray-500">{{ $package->package_date }}</p>
                     </div>
                     <div x-data="dropdown()" class="relative">
                        <button @click="toggle" class="text-gray-500">
                            <!-- <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.99902 10.245C6.96552 10.245 7.74902 11.0285 7.74902 11.995V12.005C7.74902 12.9715 6.96552 13.755 5.99902 13.755C5.03253 13.755 4.24902 12.9715 4.24902 12.005V11.995C4.24902 11.0285 5.03253 10.245 5.99902 10.245ZM17.999 10.245C18.9655 10.245 19.749 11.0285 19.749 11.995V12.005C19.749 12.9715 18.9655 13.755 17.999 13.755C17.0325 13.755 16.249 12.005V11.995C16.249 11.0285 17.0325 10.245 17.999 10.245ZM13.749 11.995C13.749 11.0285 12.9655 10.245 11.999 10.245C11.0325 10.245 10.249 11.0285 10.249 11.995V12.005C10.249 12.9715 11.0325 13.755 11.999 13.755C12.9655 13.755 13.749 12.005V11.995Z" fill=""/></svg> -->
                             <svg
                            class="fill-current"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M5.99902 10.245C6.96552 10.245 7.74902 11.0285 7.74902 11.995V12.005C7.74902 12.9715 6.96552 13.755 5.99902 13.755C5.03253 13.755 4.24902 12.9715 4.24902 12.005V11.995C4.24902 11.0285 5.03253 10.245 5.99902 10.245ZM17.999 10.245C18.9655 10.245 19.749 11.0285 19.749 11.995V12.005C19.749 12.9715 18.9655 13.755 17.999 13.755C17.0325 13.755 16.249 12.9715 16.249 12.005V11.995C16.249 11.0285 17.0325 10.245 17.999 10.245ZM13.749 11.995C13.749 11.0285 12.9655 10.245 11.999 10.245C11.0325 10.245 10.249 11.0285 10.249 11.995V12.005C10.249 12.9715 11.0325 13.755 11.999 13.755C12.9655 13.755 13.749 12.9715 13.749 12.005V11.995Z"
                            fill=""
                            />
                        </svg>

                        </button>
                        <div x-show="open" @click.outside="open = false" class="absolute right-0 z-20 w-40 mt-1 shadow-theme-lg dark:bg-gray-dark rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800">
                           <a href="/signature_request_details/{{ $package->package_guid }}" class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400">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 text-gray-500 hover:bg-gray-100 dark:text-gray-400">Delete</button>
                           </form>
                           @endif
                        </div>
                     </div>
                  </div>
                  <div x-show="expanded" x-collapse x-cloak class="mt-4 pl-12 space-y-3">
                     <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400 mb-1">Templates</p>
                        <div class="flex flex-wrap gap-1">
                           @if(!empty($package->template_titles))
                              @foreach(explode(',', $package->template_titles) as $title)
                                 <span class="inline-flex items-center rounded-lg bg-gray-400 px-2 py-0.5 text-[10px] font-medium text-white dark:bg-white/5 dark:text-white/80">{{ trim($title) }}</span>
                              @endforeach
                           @else
                              <span class="text-xs text-gray-400 italic">N/A</span>
                           @endif
                        </div>
                     </div>
                  </div>
               </div>
               @empty
               <div class="p-8 text-center text-gray-500">No sent docs found</div>
               @endforelse
            </div>

            <!-- Desktop View Sent Docs -->
            <div class="hidden lg:block max-w-full overflow-x-auto custom-scrollbar">
               <table class="min-w-full">
                  <thead class="border-gray-100 border-y dark:border-gray-800">
                     @if(isset($sent_packages) && count($sent_packages) > 0)
                     <tr>
                        <th class="px-6 py-3 whitespace-nowrap first:pl-0"><div class="flex items-center"><p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">#</p></div></th>
                        <th class="px-6 py-3 whitespace-nowrap"><div class="flex items-center"><p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Package ID</p></div></th>
                        <th class="px-6 py-3 whitespace-nowrap"><div class="flex items-center"><p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Templates</p></div></th>
                        <th class="px-6 py-3 whitespace-nowrap"><div class="flex items-center"><p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Date</p></div></th>
                        <th class="px-6 py-3 whitespace-nowrap"><div class="flex justify-center"><p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"><!--Action--></p></div></th>
                     </tr>
                     @else
                     <tr><td colspan="5" class="text-center p-4 text-gray-500">No sent docs found</td></tr>
                     @endif
                  </thead>
                  <tbody class="divide-y dark:divide-gray-800">
                     @foreach($sent_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">{{ ($sent_packages->currentPage() - 1) * $sent_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_date }}</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 class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.99902 10.245C6.96552 10.245 7.74902 11.0285 7.74902 11.995V12.005C7.74902 12.9715 6.96552 13.755 5.99902 13.755C5.03253 13.755 4.24902 12.9715 4.24902 12.005V11.995C4.24902 11.0285 5.03253 10.245 5.99902 10.245ZM17.999 10.245C18.9655 10.245 19.749 11.0285 19.749 11.995V12.005C19.749 12.9715 18.9655 13.755 17.999 13.755C17.0325 13.755 16.249 12.005V11.995C16.249 11.0285 17.0325 10.245 17.999 10.245ZM13.749 11.995C13.749 11.0285 12.9655 10.245 11.999 10.245C11.0325 10.245 10.249 11.0285 10.249 11.995V12.005C10.249 12.9715 11.0325 13.755 11.999 13.755C12.9655 13.755 13.749 12.005V11.995Z" fill=""/></svg> -->
                                 <svg
                            class="fill-current"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M5.99902 10.245C6.96552 10.245 7.74902 11.0285 7.74902 11.995V12.005C7.74902 12.9715 6.96552 13.755 5.99902 13.755C5.03253 13.755 4.24902 12.9715 4.24902 12.005V11.995C4.24902 11.0285 5.03253 10.245 5.99902 10.245ZM17.999 10.245C18.9655 10.245 19.749 11.0285 19.749 11.995V12.005C19.749 12.9715 18.9655 13.755 17.999 13.755C17.0325 13.755 16.249 12.9715 16.249 12.005V11.995C16.249 11.0285 17.0325 10.245 17.999 10.245ZM13.749 11.995C13.749 11.0285 12.9655 10.245 11.999 10.245C11.0325 10.245 10.249 11.0285 10.249 11.995V12.005C10.249 12.9715 11.0325 13.755 11.999 13.755C12.9655 13.755 13.749 12.9715 13.749 12.005V11.995Z"
                            fill=""
                            />
                        </svg>

                                 </button>
                                 <div x-show="open" @click.outside="open = false" class="shadow-theme-lg dark:bg-gray-dark fixed 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 dark:text-gray-400 dark:hover:bg-white/5">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 dark:text-gray-400 dark:hover:bg-white/5">Delete</button>
                                    </form>
                                    @endif
                                 </div>
                           </div>
                        </td>
                     </tr>
                     @endforeach
                     
                  </tbody>
               </table>
            </div>
         </div>
      </div>

      <!-- ====== Signed Docs Section ====== -->
      <div class="col-span-12 xl:col-span-12">
         <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white px-4 pt-4 pb-3 sm:px-6 dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="flex flex-col gap-2 mb-4 sm:flex-row sm:items-center sm:justify-between">
               <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Signed Docs</h3>
               </div>
               
               <!--
               <div class="flex items-center gap-3">
                  <a href="{{ route('signature_request_list','completed') }}" class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">See all</a>
               </div>-->
               @if(isset($signed_packages) && count($signed_packages) > 0)
               <div class="flex items-center gap-3">
                  <a href="{{ route('signature_request_list','completed') }}" class="text-theme-sm shadow-theme-xs inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">
                     See all
                  </a>
               </div>
               @endif
            </div>

            <!-- Mobile View Signed Docs -->
            <div class="block lg:hidden divide-y divide-gray-100 dark:divide-gray-800 border-t dark:border-gray-800">
               @forelse($signed_packages as $key => $package)
               <div x-data="{ expanded: false }" class="py-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 transition-transform" :class="expanded ? 'rotate-180' : ''">
                        <svg class="w-4 h-4" 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="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-[10px] text-gray-500">{{ $package->package_date }}</p>
                     </div>
                     <div x-data="dropdown()" class="relative">
                        <button @click="toggle" class="text-gray-500">
                           <!-- <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.99902 10.245C6.96552 10.245 7.74902 11.0285 7.74902 11.995V12.005C7.74902 12.9715 6.96552 13.755 5.99902 13.755C5.03253 13.755 4.24902 12.9715 4.24902 12.005V11.995C4.24902 11.0285 5.03253 10.245 5.99902 10.245ZM17.999 10.245C18.9655 10.245 19.749 11.0285 19.749 11.995V12.005C19.749 12.9715 18.9655 13.755 17.999 13.755C17.0325 13.755 16.249 12.005V11.995C16.249 11.0285 17.0325 10.245 17.999 10.245ZM13.749 11.995C13.749 11.0285 12.9655 10.245 11.999 10.245C11.0325 10.245 10.249 11.0285 10.249 11.995V12.005C10.249 12.9715 11.0325 13.755 11.999 13.755C12.9655 13.755 13.749 12.005V11.995Z" fill=""/></svg> -->
                           <svg
                            class="fill-current"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M5.99902 10.245C6.96552 10.245 7.74902 11.0285 7.74902 11.995V12.005C7.74902 12.9715 6.96552 13.755 5.99902 13.755C5.03253 13.755 4.24902 12.9715 4.24902 12.005V11.995C4.24902 11.0285 5.03253 10.245 5.99902 10.245ZM17.999 10.245C18.9655 10.245 19.749 11.0285 19.749 11.995V12.005C19.749 12.9715 18.9655 13.755 17.999 13.755C17.0325 13.755 16.249 12.9715 16.249 12.005V11.995C16.249 11.0285 17.0325 10.245 17.999 10.245ZM13.749 11.995C13.749 11.0285 12.9655 10.245 11.999 10.245C11.0325 10.245 10.249 11.0285 10.249 11.995V12.005C10.249 12.9715 11.0325 13.755 11.999 13.755C12.9655 13.755 13.749 12.9715 13.749 12.005V11.995Z"
                            fill=""
                            />
                        </svg>

                        </button>
                        <div x-show="open" @click.outside="open = false" class="absolute right-0 z-20 w-40 mt-1 shadow-theme-lg dark:bg-gray-dark rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800">
                           <a href="/signature_request_details/{{ $package->package_guid }}" class="text-theme-xs flex w-full rounded-lg px-3 py-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400">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 text-gray-500 hover:bg-gray-100 dark:text-gray-400">Delete</button>
                           </form>
                           @endif
                        </div>
                     </div>
                  </div>
                  <div x-show="expanded" x-collapse x-cloak class="mt-4 pl-12 space-y-3">
                     <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400 mb-1">Templates</p>
                        <div class="flex flex-wrap gap-1">
                           @if(!empty($package->template_titles))
                              @foreach(explode(',', $package->template_titles) as $title)
                                 <span class="inline-flex items-center rounded-lg bg-gray-400 px-2 py-0.5 text-[10px] font-medium text-white dark:bg-white/5 dark:text-white/80">{{ trim($title) }}</span>
                              @endforeach
                           @else
                              <span class="text-xs text-gray-400 italic">N/A</span>
                           @endif
                        </div>
                     </div>
                  </div>
               </div>
               @empty
               <div class="p-8 text-center text-gray-500">No signed docs found</div>
               @endforelse
            </div>

            <!-- Desktop View Signed Docs -->
            <div class="hidden lg:block max-w-full overflow-x-auto custom-scrollbar">
               <table class="min-w-full">
                  <thead class="border-gray-100 border-y dark:border-gray-800">
                     @if(isset($signed_packages) && count($signed_packages) > 0)
                     <tr>
                        <th class="px-6 py-3 whitespace-nowrap first:pl-0"><div class="flex items-center"><p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">#</p></div></th>
                        <th class="px-6 py-3 whitespace-nowrap"><div class="flex items-center"><p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Package ID</p></div></th>
                        <th class="px-6 py-3 whitespace-nowrap"><div class="flex items-center"><p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Templates</p></div></th>
                        <th class="px-6 py-3 whitespace-nowrap"><div class="flex items-center"><p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Date</p></div></th>
                        <th class="px-6 py-3 whitespace-nowrap"><div class="flex justify-center"><p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"><!--Action--></p></div></th>
                     </tr>
                     @else
                     <tr><td colspan="5" class="text-center p-4 text-gray-500">No signed docs found</td></tr>
                     @endif
                  </thead>
                  <tbody class="divide-y dark:divide-gray-800">
                     @foreach($signed_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">{{ ($signed_packages->currentPage() - 1) * $signed_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_date }}</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 class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.99902 10.245C6.96552 10.245 7.74902 11.0285 7.74902 11.995V12.005C7.74902 12.9715 6.96552 13.755 5.99902 13.755C5.03253 13.755 4.24902 12.9715 4.24902 12.005V11.995C4.24902 11.0285 5.03253 10.245 5.99902 10.245ZM17.999 10.245C18.9655 10.245 19.749 11.0285 19.749 11.995V12.005C19.749 12.9715 18.9655 13.755 17.999 13.755C17.0325 13.755 16.249 12.005V11.995C16.249 11.0285 17.0325 10.245 17.999 10.245ZM13.749 11.995C13.749 11.0285 12.9655 10.245 11.999 10.245C11.0325 10.245 10.249 11.0285 10.249 11.995V12.005C10.249 12.9715 11.0325 13.755 11.999 13.755C12.9655 13.755 13.749 12.005V11.995Z" fill=""/></svg> -->
                                  <svg
                            class="fill-current"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M5.99902 10.245C6.96552 10.245 7.74902 11.0285 7.74902 11.995V12.005C7.74902 12.9715 6.96552 13.755 5.99902 13.755C5.03253 13.755 4.24902 12.9715 4.24902 12.005V11.995C4.24902 11.0285 5.03253 10.245 5.99902 10.245ZM17.999 10.245C18.9655 10.245 19.749 11.0285 19.749 11.995V12.005C19.749 12.9715 18.9655 13.755 17.999 13.755C17.0325 13.755 16.249 12.9715 16.249 12.005V11.995C16.249 11.0285 17.0325 10.245 17.999 10.245ZM13.749 11.995C13.749 11.0285 12.9655 10.245 11.999 10.245C11.0325 10.245 10.249 11.0285 10.249 11.995V12.005C10.249 12.9715 11.0325 13.755 11.999 13.755C12.9655 13.755 13.749 12.9715 13.749 12.005V11.995Z"
                            fill=""
                            />
                        </svg>
                                 </button>
                                 <div x-show="open" @click.outside="open = false" class="shadow-theme-lg dark:bg-gray-dark fixed 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 dark:text-gray-400 dark:hover:bg-white/5">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 dark:text-gray-400 dark:hover:bg-white/5">Delete</button>
                                    </form>
                                    @endif
                                 </div>
                           </div>
                        </td>
                     </tr>
                     @endforeach
                    
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection