@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" 
     x-data="{ 
        showCanvas: false, 
        isEdit: false, 
        formAction: '{{ route('contacts.store') }}',
        contact: {
            contact_id: '',
            contact_firstname: '',
            contact_lastname: '',
            contact_phone: '',
            contact_email: '',
            category_id: ''
        },
        openAdd() {
            this.isEdit = false;
            this.formAction = '{{ route('contacts.store') }}';
            this.contact = { contact_id: '', contact_firstname: '', contact_lastname: '', contact_phone: '', contact_email: '', category_id: '' };
            this.showCanvas = true;
        },
        openEdit(item) {
            this.isEdit = true;
            this.formAction = `/contacts/${item.contact_id}`;
            this.contact = { ...item }; // This maps all DB columns to the Alpine object
            this.showCanvas = true;
        }
     }">

   <!-- 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">
                <button @click="openAdd()" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm">
                    + Add Contact
                </button>
            </div>
        </div>
        @if(isset($contacts) && count($contacts) > 0)
        <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>

            <!-- <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> -->
            
            </div>
        </div>
        @endif
    </div>
   <!-- filter section end -->

   <!-- Mobile View -->
   <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">
        <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">
            <div class="flex items-center p-4 gap-3">
                <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>

                <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_firstname, 0, 2)) }}
                </div>

                <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-bold text-gray-800 dark:text-white truncate">
                        {{ $contact->contact_firstname }} {{ $contact->contact_lastname }}
                    </h4>
                    <p class="text-xs text-gray-500 truncate">{{ $contact->contact_email }}</p>
                </div>

                <div x-data="dropdown()" class="relative flex justify-center">
                    <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 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 @click="openEdit({{ json_encode($contact) }})" 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>

            <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">Phone</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200">{{ $contact->contact_phone ?? 'N/A' }}</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>
            @if(isset($contacts) && count($contacts) > 0)
            <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">First Name</th>
               <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Last Name</th>
               <th class="p-4 text-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Phone</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-left text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Category</th>
               <th class="p-4 text-center text-xs font-medium whitespace-nowrap text-gray-500 dark:text-gray-400">Action</th>
            </tr>
            @endif
         </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_firstname }}</span>
               </td>
               <td class="p-4 whitespace-nowrap">
                  <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $contact->contact_lastname }}</span>
               </td>
               <td class="p-4 whitespace-nowrap">
                  <span class="text-sm font-medium text-gray-700 dark:text-gray-400">{{ $contact->contact_phone }}</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">
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-lg text-xs font-medium bg-gray-100 text-gray-800 dark:bg-white/5 dark:text-gray-400">
                     {{ $contact->category_name ?? 'Uncategorized' }}
                  </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 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 @click="openEdit({{ json_encode($contact) }})" 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="6" class="text-center p-4 text-gray-500">
                  No contacts found
               </td>
            </tr>
            @endforelse
         </tbody>
      </table>
   </div>
</div>

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

    <!-- OFF-CANVAS SIDEBAR -->
    <div x-show="showCanvas" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 flex justify-end bg-black/50 backdrop-blur-sm" style="z-index:99999" x-cloak>
        
        <div @click.away="showCanvas = false" 
             x-show="showCanvas"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full"
             x-transition:enter-end="translate-x-0"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0"
             x-transition:leave-end="translate-x-full"
             class="h-full w-full max-w-md bg-white shadow-xl dark:bg-gray-900 overflow-y-auto">
            
            <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-800">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white" x-text="isEdit ? 'Edit Contact' : 'Add New Contact'"></h3>
                <button @click="showCanvas = false" class="text-gray-500 hover:text-gray-700 dark:text-gray-400">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>

            <form :action="formAction" method="POST" class="p-6">
                @csrf
                <!-- Dynamic Method Spoofer for Update -->
                <template x-if="isEdit">
                    <input type="hidden" name="_method" value="PUT">
                </template>

                <div class="space-y-4">
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">First Name</label>
                        <input type="text" name="contact_firstname" x-model="contact.contact_firstname" required class="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-white" />
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Last Name</label>
                        <input type="text" name="contact_lastname" x-model="contact.contact_lastname" class="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-white" />
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Address</label>
                        <input type="email" name="contact_email" x-model="contact.contact_email" required class="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-white" />
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Phone Number</label>
                        <input type="text" name="contact_phone" x-model="contact.contact_phone" class="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-white" />
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Category</label>
                        <select name="category_id" x-model="contact.category_id" class="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-white">
                            <option value="">Select Category</option>
                            @isset($categories)
                                @foreach($categories as $category)
                                    <option value="{{ $category->category_id }}">{{ $category->category_name }}</option>
                                @endforeach
                            @endisset
                        </select>
                    </div>
                </div>

                <div class="mt-8 flex gap-3">
                    <button type="button" @click="showCanvas = false" class="flex-1 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:text-gray-300">
                        Cancel
                    </button>
                    <button type="submit" class="flex-1 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white ">
                        Save Contact
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection