@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 / Breadcrumb Start -->
   <div x-data="{ pageName: `Contacts`}">
      <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" x-text="pageName"></h2>
         <nav>
            <ol class="flex items-center gap-1.5">
               <li>
                  <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="/">
                     Home
                     <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
                  </a>
               </li>
               <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
            </ol>
         </nav>
      </div>
   </div>
   <!-- Breadcrumb End -->

   <!-- filter start -->
    <div class="rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex flex-col justify-between gap-5 border-b border-gray-200 px-5 py-4 sm:flex-row sm:items-center dark:border-gray-800">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                    Contacts List
                </h3>
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Track your store's progress to boost your sales.
                </p>
            </div>
            <div class="flex gap-3">
                <a href="{{ route('contacts.create') }}" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm">
                    + Add Contact
                </a>
            </div>
        </div>
        
        <div class="border-gray-200 px-5 py-4 dark:border-gray-800">
            <div class="flex gap-3 sm:justify-between">
            
            {{-- Search Box --}}
            <form method="GET" action="{{ url()->current() }}" class="relative flex-1 sm:flex-auto">
                <span class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                    <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.04199 9.37363C3.04199 5.87693 5.87735 3.04199 9.37533 3.04199C12.8733 3.04199 15.7087 5.87693 15.7087 9.37363C15.7087 12.8703 12.8733 15.7053 9.37533 15.7053C5.87735 15.7053 3.04199 12.8703 3.04199 9.37363ZM9.37533 1.54199C5.04926 1.54199 1.54199 5.04817 1.54199 9.37363C1.54199 13.6991 5.04926 17.2053 9.37533 17.2053C11.2676 17.2053 13.0032 16.5344 14.3572 15.4176L17.1773 18.238C17.4702 18.5309 17.945 18.5309 18.2379 18.238C18.5308 17.9451 18.5309 17.4703 18.238 17.1773L15.4182 14.3573C16.5367 13.0033 17.2087 11.2669 17.2087 9.37363C17.2087 5.04817 13.7014 1.54199 9.37533 1.54199Z" />
                    </svg>
                </span>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search contacts..." class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-2.5 pr-4 pl-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden sm:w-[300px] sm:min-w-[300px] dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30" />
                @if(request('perPage')) <input type="hidden" name="perPage" value="{{ request('perPage') }}"> @endif
            </form>

            <!-- filter -->
            <div class="relative" x-data="{ showFilter: false }">
                <button class="shadow-theme-xs flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 sm:w-auto sm:min-w-[100px] dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400" @click="showFilter = !showFilter" type="button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M14.6537 5.90414C14.6537 4.48433 13.5027 3.33331 12.0829 3.33331C10.6631 3.33331 9.51206 4.48433 9.51204 5.90415M14.6537 5.90414C14.6537 7.32398 13.5027 8.47498 12.0829 8.47498C10.663 8.47498 9.51204 7.32398 9.51204 5.90415M14.6537 5.90414L17.7087 5.90411M9.51204 5.90415L2.29199 5.90411M5.34694 14.0958C5.34694 12.676 6.49794 11.525 7.91777 11.525C9.33761 11.525 10.4886 12.676 10.4886 14.0958M5.34694 14.0958C5.34694 15.5156 6.49794 16.6666 7.91778 16.6666C9.33761 16.6666 10.4886 15.5156 10.4886 14.0958M5.34694 14.0958L2.29199 14.0958M10.4886 14.0958L17.7087 14.0958" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Filter
                </button>
                
                <div x-show="showFilter" x-cloak @click.away="showFilter = false" class="absolute right-0 z-50 mt-2 w-80 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800" style="width: 230px;">
                    <form method="GET" action="{{ url()->current() }}">
                        @if(request('search')) <input type="hidden" name="search" value="{{ request('search') }}"> @endif
                        @if(request('perPage')) <input type="hidden" name="perPage" value="{{ request('perPage') }}"> @endif

                        <div class="mb-6">
                            <label class="mb-2 block text-xs font-medium text-gray-700 dark:text-gray-300">Created Date Range</label>
                            <div class="grid grid-cols-1 gap-3">
                                <div>
                                    <p class="text-[10px] text-gray-400 uppercase mb-1">Start Date</p>
                                    <input type="date" name="start_date" value="{{ request('start_date') }}" x-on:click.stop="$el.showPicker()" class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-2 py-2 text-xs text-gray-800 dark:border-gray-700 dark:text-white/90" />
                                </div>
                                <div>
                                    <p class="text-[10px] text-gray-400 uppercase mb-1">End Date</p>
                                    <input type="date" name="end_date" value="{{ request('end_date') }}" x-on:click.stop="$el.showPicker()" class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 h-10 w-full rounded-lg border border-gray-300 bg-transparent px-2 py-2 text-xs text-gray-800 dark:border-gray-700 dark:text-white/90" />
                                </div>
                            </div>
                        </div>

                        <div class="flex gap-2">
                            <a href="{{ url()->current() }}" class="flex-1 text-center bg-gray-100 hover:bg-gray-200 text-gray-700 h-10 rounded-lg px-3 py-2 text-sm font-medium dark:bg-white/5 dark:text-gray-300">Clear</a>
                            <button type="submit" class="flex-1 bg-brand-500 hover:bg-brand-600 h-10 rounded-lg px-3 py-2 text-sm font-medium text-white">Apply</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- filter end -->

            </div>
        </div>
    </div>
   <!-- filter section end -->

   <!-- Mobile/Tablet View (Expandable List) -->
   <div class="mt-6 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">Name / Email</span>
            <span class="text-xs font-bold uppercase tracking-wider text-gray-500 text-center">Action</span>
        </div>

        @forelse($contacts as $key => $contact)
        <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($contact->contact_name, 0, 2)) }}
                </div>

                <!-- Contact Info -->
                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-bold text-red-800 dark:text-red-500 truncate">
                        {{ $contact->contact_name }}
                    </h4>
                    <p class="text-xs text-gray-500 truncate">{{ $contact->contact_email }}</p>
                </div>

                <!-- Action Dropdown -->
                <div x-data="dropdown()" class="relative flex justify-center">
                    <button @click="toggle" class="p-2 text-gray-400">
                        <!-- Original SVG Restored -->
                        <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 shadow-theme-lg dark:bg-gray-dark space-y-1 rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800">
                        <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 dark:text-gray-400 dark:hover:bg-white/5">
                            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 dark:text-gray-400 dark:hover:bg-white/5">
                                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 ml-4">
                <div class="border-t border-gray-100 dark:border-gray-800 pt-4 space-y-2">
                    <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400">Contact ID</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200">#{{ ($contacts->currentPage() - 1) * $contacts->perPage() + $loop->iteration }}</p>
                    </div>
                    <div>
                        <p class="text-[10px] font-bold uppercase text-gray-400">Full Email</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200">{{ $contact->contact_email }}</p>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="p-8 text-center text-gray-500">No contacts found</div>
        @endforelse
   </div>

   <!-- Desktop Table View -->
   <div class="mt-6 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">Name</th>
                  <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Email</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($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">#{{ ($contacts->currentPage() - 1) * $contacts->perPage() + $loop->iteration }}</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">
                            <!-- Original SVG Restored -->
                            <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="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>

   <!-- Footer Pagination & Per Page Dropdown -->
   <!-- Pagination -->
   <div class="p-4 flex justify-center">
         {{ $contacts->links('vendor.pagination.tailwind') }}
   </div>

</div>
@endsection