@extends('layouts.app')
@section('title', 'Templates 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">
         Templates
      </h2>

      <form method="GET" class="flex items-center gap-2">
            <div class="relative">
                  <input type="text"
                     name="search"
                     value="{{ request('search') }}"
                     placeholder="Search template..."
                     class="pl-1 pr-3 py-2 text-sm border border-gray-300 rounded-lg w-64
                           focus:ring-2 focus:ring-brand-500 focus:border-brand-500
                           dark:bg-gray-800 dark:border-gray-700 dark:text-white">
            </div>

            <button type="submit"
                  class="px-4 py-2 text-sm font-medium text-white bg-brand-500 rounded-lg hover:bg-brand-600">
                  Search
            </button>

            @if(request('search'))
                  <a href="{{ route('tmplts.index') }}"
                     class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300
                           dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">
                     Reset
                  </a>
            @endif
         </form>

      <a href="{{ route('tmplts.create') }}"
         class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm">
         + Add Template
      </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">
        <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">Name</span>
            <span class="text-xs font-bold uppercase tracking-wider text-gray-500">Action</span>
        </div>

        @forelse($templates as $key => $template)
        <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 -->
                <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">
                    {{ strtoupper(substr($template->template_title, 0, 2)) }}
                </div>

                <!-- Title & Info -->
                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-bold text-red-800 dark:text-red-500 truncate">
                        {{ $template->template_title }}
                        @if($template->template_draft=="Yes")
                            <span class="ml-1 inline-flex items-center rounded-full bg-error-500 px-1.5 py-0.5 text-[10px] font-medium text-white">Draft</span>
                        @endif
                    </h4>
                    <p class="text-xs text-gray-500 truncate">{{ $template->category_name }}</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">
                        <button 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">Edit</button>
                        <a href="/customize/{{ $template->template_uuid }}" 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">Customize</a>
                        @if($template->template_draft=="Yes")
                            <a href="/save_as_template/{{ $template->template_uuid }}" 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">Save as Template</a>
                        @else 
                            <a href="/save_as_draft/{{ $template->template_uuid }}" 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">Save as Draft</a>
                        @endif
                        <form action="{{ route('tmplts.destroy', $template->template_id) }}" method="POST" onsubmit="return confirm('Delete this Template?')">
                            @csrf @method('DELETE')
                            <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="grid grid-cols-2 gap-4 border-t border-gray-100 dark:border-gray-800 pt-4 ml-4">
                    <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400">Template Type</p>
                        @if($template->template_type=="Fillable")
                            <span class="text-xs font-semibold text-green-600">Fillable</span>
                        @else
                            <span class="text-xs font-semibold text-red-600">Raw</span>
                        @endif
                    </div>
                    <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400">Signers</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200">{{ $template->template_no_of_signers }}</p>
                    </div>
                    <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400">Date Added</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200">{{ \Carbon\Carbon::parse($template->template_created_at)->format('d M Y') }}</p>
                    </div>
                    <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400">ID</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200">#{{ ($templates->currentPage() - 1) * $templates->perPage() + $loop->iteration }}</p>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="p-8 text-center text-gray-500">No templates 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="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">Template</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Type</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Signers</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Category</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Date Added</th>
                  <th class="p-4 text-left 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($templates as $key => $template)
               <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">{{ ($templates->currentPage() - 1) * $templates->perPage() + $loop->iteration }}</span>
                  </td>
                  <td  class="p-4 whitespace-nowrap">
                     <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $template->template_title }}
                        @if($template->template_draft=="Yes")
                        <sup><span style="font-size:10px" class="inline-flex items-center justify-center gap-1 rounded-full bg-error-500 px-2.5 py-0.5 text-sm font-medium text-white">Draft</span></sup>
                        @endif
                     </span>
                  </td>
                  <td class="p-4 whitespace-nowrap">
                    @if($template->template_type=="Fillable")
                        <span class="bg-success-50 dark:bg-success-500/15 text-success-700 dark:text-success-500 text-theme-xs rounded-full px-2 py-0.5 font-medium">Fillable</span>
                    @else
                        <span class="text-theme-xs rounded-full bg-red-50 px-2 py-0.5 font-medium text-red-700 dark:bg-red-500/15 dark:text-red-500">Raw</span>
                    @endif
                  </td>
                  <td class="p-4 whitespace-nowrap">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $template->template_no_of_signers}}</span>
                  </td>
                  <td class="p-4 whitespace-nowrap">
                     <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $template->category_name }}</span>
                  </td>
                  <td class="p-4 whitespace-nowrap">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ \Carbon\Carbon::parse($template->template_created_at)->format('d M Y') }}</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"><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.005V11.995Z"/></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">
                           <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">Edit</button>
                           <a href="/customize/{{ $template->template_uuid }}" 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">Customize</a>
                           @if($template->template_draft=="Yes")
                              <a href="/save_as_template/{{ $template->template_uuid }}" 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">Save as Template</a>
                           @else 
                              <a href="/save_as_draft/{{ $template->template_uuid }}" 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">Save as Draft</a>
                           @endif
                           <form action="{{ route('tmplts.destroy', $template->template_id) }}" method="POST" onsubmit="return confirm('Delete this Template?')">
                              @csrf @method('DELETE')
                              <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="7" class="text-center p-4 text-gray-500">No templates found</td></tr>
               @endforelse
            </tbody>
         </table>
      </div>
   </div>

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