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

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

   <!-- Breadcrumb & Header -->
   <nav class="mb-4 flex text-sm text-gray-500 dark:text-gray-400">
      <a href="{{ url()->previous() }}" class="hover:text-brand-500 flex items-center gap-1 transition-colors">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
         </svg>
         Back to List
      </a>
   </nav>

   <div class="flex flex-wrap items-center justify-between gap-4 pb-8">
      <div>
         <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
            Package Detail
         </h2>
         <p class="text-sm text-gray-500 mt-1">ID: <span class="font-mono text-brand-500">{{ $package->package_guid }}</span></p>
      </div>

      <div class="flex items-center gap-3">
         @php
            $isAllCompleted = $email_templates->every(function($item) {
                return $item->email_template_status == 'Completed';
            });
         @endphp
         
         @if($isAllCompleted && $email_templates->count() > 0)
            <span class="inline-flex items-center gap-1.5 rounded-lg bg-success-50 px-3 py-1.5 text-sm font-semibold text-success-700 dark:bg-success-500/10 dark:text-success-500">
               <span class="h-2 w-2 rounded-full bg-success-600"></span>
               Fully Executed
            </span>
         @else
            <span class="inline-flex items-center gap-1.5 rounded-lg bg-warning-50 px-3 py-1.5 text-sm font-semibold text-warning-700 dark:bg-warning-500/10 dark:text-warning-500">
               <span class="h-2 w-2 rounded-full bg-warning-600 animate-pulse"></span>
               In Progress
            </span>
         @endif
      </div>
   </div>

   <!-- Stats Summary Cards -->
   <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 md:gap-6 xl:gap-7.5 mb-6">
      <div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
         <p class="text-sm text-gray-500 font-medium">Total Signers</p>
         <h4 class="text-2xl font-bold mt-1 text-gray-800 dark:text-white">{{ $email_templates->count() }}</h4>
      </div>
      <div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
         <p class="text-sm text-gray-500 font-medium">Completed</p>
         <h4 class="text-2xl font-bold mt-1 text-success-600">{{ $email_templates->where('email_template_status', 'Completed')->count() }}</h4>
      </div>
      <div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
         <p class="text-sm text-gray-500 font-medium">Pending</p>
         <h4 class="text-2xl font-bold mt-1 text-red-500">{{ $email_templates->where('email_template_status', 'Pending')->count() }}</h4>
      </div>
   </div>


   <!-- Main Table -->
   <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
         <h3 class="font-bold text-gray-800 dark:text-white/90">Recipient Status</h3>
      </div>

      <div class="overflow-x-auto">
         <table class="w-full table-auto">
            <thead>
               <tr class="bg-gray-50/50 dark:bg-gray-900/50">
                  <th class="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">Signer Info</th>
                  <th class="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">Status</th>
                  <th class="p-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500">Documents</th>
                  <th class="p-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500">Actions</th>
               </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
               @forelse($email_templates as $email_template)
               <tr class="group hover:bg-gray-50/80 dark:hover:bg-gray-900/40 transition-colors">
                  
                  <td class="p-4">
                     <div class="flex items-center gap-3">
                        <div class="h-10 w-10 flex-shrink-0 rounded-full bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center text-blue-600 font-bold">
                           {{ substr($email_template->email_name, 0, 1) }}
                        </div>
                        <div>
                           <div class="text-sm font-semibold text-gray-800 dark:text-white">
                              {{ $email_template->email_name }}
                           </div>
                           <div class="text-xs text-gray-500">
                              {{ $email_template->email_id }}
                           </div>
                        </div>
                     </div>
                  </td>

                  <td class="p-4">
                     @if($email_template->email_template_status == "Completed")
                        <span class="inline-flex items-center gap-1 rounded-full bg-success-50 px-2.5 py-1 text-xs font-medium text-success-700 dark:bg-success-500/10 dark:text-success-500 border border-success-200 dark:border-success-500/20">
                           <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                           Completed
                        </span>
                     @else
                        <span class="inline-flex items-center gap-1 rounded-full bg-warning-50 px-2.5 py-1 text-xs font-medium text-warning-700 dark:bg-warning-500/10 dark:text-warning-500 border border-warning-200 dark:border-warning-500/20">
                           <svg class="h-3 w-3 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 2m6-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                           Pending
                        </span>
                     @endif
                  </td>

                  <td class="p-4">
                     @if($email_template->email_template_status == "Completed")
                        <div class="flex flex-col gap-1.5">
                           @php
                              $data = json_decode($email_template->email_template_json);
                           @endphp
                           @if($data)
                              @foreach($data as $doc_details)
                                 @php
                                    $file_name = $package->package_id."_".$doc_details->template_id.".pdf";
                                    $file_url = config('app.url').'/signed_documents/'.$file_name;
                                 @endphp
                                 <a href="{{ $file_url }}" target="_blank" class="inline-flex items-center gap-1.5 text-xs font-medium text-blue-600 hover:text-blue-700 underline decoration-blue-200 transition-all">
                                    <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                                    {{ $doc_details->title }}
                                 </a>
                              @endforeach
                           @endif
                        </div>
                     @else
                        <span class="text-xs text-gray-400 italic">Waiting...</span>
                     @endif
                  </td>

                  <td class="p-4 text-right space-x-2">
                    @if($email_template->email_template_status == "Pending")
                        <a href="/sign/{{ $email_template->email_template_guid }}" target="_blank" 
                           class="inline-flex items-center gap-1 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700 transition-colors shadow-sm">
                           Sign Now
                        </a>
                    @else
                        <a target="_blank" href="{{ config('app.url') }}/certificate/{{ $package->package_id }}.pdf" 
                           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 dark:hover:bg-white/10 transition-colors">
                           <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                           Certificate
                        </a>
                    @endif
                  </td>
                
               </tr>
               @empty
               <tr>
                  <td colspan="4" class="p-12 text-center text-gray-500">No signers found.</td>
               </tr>
               @endforelse
            </tbody>
         </table>
      </div>
   </div>
</div>
@endsection