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

      <a href="{{ route('contacts.create') }}"
         class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm">
         + Add Contact
      </a>
   </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="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">Name</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Email</th>
               </tr>
            </thead>

            <tbody class="divide-y dark:divide-gray-800">
               @forelse($contacts as $key => $contact)
               <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>
                  </td>

                  <td  class="p-4 whitespace-nowrap">
                     <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $contact->contact_name }}</span>
                  </td>
                  <td  class="p-4 whitespace-nowrap">
                     <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $contact->contact_email }}</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"
                        >
                           <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>

                           <form action="{{ route('contacts.destroy', $contact->contact_id) }}" method="POST"
                                 onsubmit="return confirm('Delete this Contact?')">
                              @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="4" class="text-center p-4 text-gray-500">
                     No contacts found
                  </td>
               </tr>
               @endforelse
            </tbody>
         </table>
      </div>
   </div>

</div>
@endsection