@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">

            <!-- Input -->
            <div class="relative">
                  <!-- <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
                     🔍
                  </span> -->
                  <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>

            <!-- Search Button -->
            <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>

            <!-- Reset 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>
      <!-- Visible only on Mobile/Tablet -->
        <div class="block lg:hidden">
            <p>You are on a Mobile device.</p>
        </div>

        <!-- Visible only on Desktop -->
        <div class="hidden lg:block">
            <p>You are on a Desktop device.</p>
        </div>
   </div>

   <!-- Table -->
   <div class="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="flex justify-end mb-3 mt-2" style="margin-right:10px">
         <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-9 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>
      </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">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>
                  
               </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">#{{ $key + 1 }}</span> -->
                      <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 }}
                                             </span>
                  </td>
                  <td class="p-4 whitespace-nowrap">
                                            <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>
                                          </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">
                     <div class="flex gap-2">

                        <a href="{{ route('contacts.edit', $template->template_id) }}"
                           class="text-blue-600 hover:underline">
                           Edit
                        </a>

                        <form action="{{ route('contacts.destroy', $template->template_id) }}" method="POST"
                              onsubmit="return confirm('Delete this contact?')">
                            @csrf
                            @method('DELETE')

                            <button class="text-red-600 hover:underline">
                                Delete
                            </button>
                        </form>

                     </div>

                     
                  </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"
                        >
                           <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/"
                              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>
                                                         <a href="/save_as_draft/"
                                 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>
                                                         

                           <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>
                           <!-- <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> -->
                        </div>
                    </div>
                </td>

               </tr>
               @empty
               <tr>
                  <td colspan="4" class="text-center p-4 text-gray-500">
                     No contacts found
                  </td>
               </tr>
               @endforelse
            </tbody>
         </table>
         
      </div>
      <div class="p-4 flex justify-center">
            {{ $templates->links('vendor.pagination.tailwind') }}
      </div>
   </div>

</div>
@endsection