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

@section('content')
<div class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6">

   <!-- Header -->
   <div class="flex flex-wrap items-center justify-between gap-3 pb-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">
         {{ $page_title }} Docs
      </h2>

      <a href="{{ route('signature_request') }}"
         class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm">
         + Signature Request
      </a>
   </div>

   <!-- Mobile/Tablet View (Expandable List) -->
   <div class="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">
        <!-- Mobile Header Labels -->
        <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 text-center">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">
                <!-- Toggle Button -->
                <button @click="expanded = !expanded" class="p-1 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-500">
                    <svg :class="expanded ? 'rotate-180' : ''" class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>

                <!-- Avatar/Initials (Uses PK for Package or 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>

                <!-- Package Info -->
                <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/" 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>
                                                <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>
                                            </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">
                    <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">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 requests found</div>
        @endforelse
   </div>

   <!-- Desktop Table View -->
   <div class="hidden lg:block overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">

      <!-- <div class="px-5 py-4 border-b dark:border-gray-800">
         <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
            Contact List
         </h3>
      </div> -->

      <div class="overflow-x-auto">
         <table class="w-full table-auto">
            <thead>
               <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">Date</th>
                  <th class="p-4 text-center text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Action</th>
               </tr>
            </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">
                     <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $package->template_titles ?? 'N/A' }}</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 rounded-full bg-primary bg-opacity-10 px-3 py-1 text-xs font-medium text-primary dark:bg-white dark:bg-opacity-10 dark:text-white">
                                    {{ trim($title) }}
                                 </span> -->
                                 <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.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/"
                              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>
                                                      <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>
                                                   </div>
                    </div>
                </td>

               </tr>
               @empty
               <tr>
                  <td colspan="5" class="text-center p-4 text-gray-500">
                     No contacts found
                  </td>
               </tr>
               @endforelse
            </tbody>
         </table>
      </div>
   </div>

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

</div>
@endsection