@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: '',
        },
        segments: [], // Current segments for the form
        newSegment: '',
        errors: {},
        validate() {
            this.errors = {};
            let isValid = true;
            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

            // First Name validation
            if (!this.contact.contact_firstname || !this.contact.contact_firstname.trim()) {
                this.errors.contact_firstname = 'First name is required.';
                isValid = false;
            } else if (this.contact.contact_firstname.trim().length > 100) {
                this.errors.contact_firstname = 'First name cannot exceed 100 characters.';
                isValid = false;
            }

            // Last Name validation
            if (this.contact.contact_lastname && this.contact.contact_lastname.trim().length > 100) {
                this.errors.contact_lastname = 'Last name cannot exceed 100 characters.';
                isValid = false;
            }

            // Email validation (Strict cross-browser format check)
            if (!this.contact.contact_email || !this.contact.contact_email.trim()) {
                this.errors.contact_email = 'Email address is required.';
                isValid = false;
            } else if (!emailRegex.test(this.contact.contact_email.trim())) {
                this.errors.contact_email = 'Please enter a valid email address (e.g. name@domain.com).';
                isValid = false;
            }

            return isValid;
        },
        handleSubmit(e) {
            if (!this.validate()) {
                e.preventDefault();
            }
        },
        openAdd() {
            this.isEdit = false;
            this.formAction = '{{ route('contacts.store') }}';
            this.contact = { contact_id: '', contact_firstname: '', contact_lastname: '', contact_phone: '', contact_email: '' };
            this.segments = [];
            this.errors = {};
            this.showCanvas = true;
        },
        openEdit(item) {
            this.isEdit = true;
            this.formAction = `/contacts/${item.contact_id}`;
            this.contact = { ...item };
            // Convert comma separated string from DB to array
            this.segments = item.segment_names ? item.segment_names.split(',') : [];
            this.errors = {};
            this.showCanvas = true;
        },
        addSegment() {
            let val = this.newSegment.trim();
            if (val && !this.segments.includes(val)) {
                this.segments.push(val);
            }
            this.newSegment = '';
        },
        removeSegment(index) {
            this.segments.splice(index, 1);
        }
     }">

   <!-- Header / Breadcrumb (Kept same) -->
   <div x-data="{ pageName: `Contacts`}">
      <div class="flex flex-wrap items-center justify-between gap-3">
         <div>
            <!-- Breadcrumbs placed on top of Contacts heading -->
            <nav class="mb-2">
                <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="{{ route('dashboard') }}"
                         >
                         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"  style="margin-top:4px"
                      ></li>
                </ol>
            </nav>

            <!-- NEW HEADING, SUBHEADING AND POPOVER PLACEMENT -->
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90 flex items-center">
               Contacts
               <span class="help-icon-wrapper">
                  <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                  <span class="help-popover-text" style="bottom: 100%;width:460px">
                        <span class="popover-header">Contacts</span>
                        <span class="popover-body">Save recipient details and quickly select them when adding signers to a signature request. Recipients added while sending a document are automatically saved to your contacts for future use.</span>
                  </span>
               </span>
            </h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Save recipient information for faster signature requests.</p>
         </div>

         <!-- Add Contact Button placed where breadcrumbs were -->
         <div class="flex gap-3">
             <button @click="openAdd()" class="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-brand-600 transition">
                 + Add Contact
             </button>
         </div>
      </div>
   </div>

   <!-- filter start (Kept same) -->
   

   <!-- Mobile View (Updated to show segments) -->
   <div class="mt-2 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">
        @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">
                <!-- ... icon and name logic same as original ... -->
                <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>
                    <div class="flex flex-wrap gap-1 mt-1">
                        @if($contact->segment_names)
                            @foreach(explode(',', $contact->segment_names) as $seg)
                                <span class="text-[10px] bg-gray-100 dark:bg-white/5 px-1.5 rounded text-gray-500">{{ $seg }}</span>
                            @endforeach
                        @endif
                    </div>
                </div>
                <!-- ... dropdown logic same as original ... -->
            </div>
        </div>
        @empty
        <div class="p-8 text-center text-gray-500">No contacts available</div>
        @endforelse
   </div>

   <!-- Desktop Table View (Updated Segment column) -->
   <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 text-gray-500 dark:text-gray-400">#</th>
               <th class="p-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400">First Name</th>
               <th class="p-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Last Name</th>
               <th class="p-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Email</th>
               <th class="p-4 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Segments</th>
               <th class="p-4 text-center text-xs font-medium text-gray-500 dark:text-gray-400"><!--Action--></th>
            </tr>
         </thead>
         <tbody class="divide-y dark:divide-gray-800">
            @forelse($contacts as $contact)
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
               <td class="p-4 text-sm text-gray-700 dark:text-gray-400">{{ ($contacts->currentPage() - 1) * $contacts->perPage() + $loop->iteration }}</td>
               <td class="p-4 text-sm text-gray-700 dark:text-gray-400">{{ $contact->contact_firstname }}</td>
               <td class="p-4 text-sm text-gray-700 dark:text-gray-400">{{ $contact->contact_lastname }}</td>
               <td class="p-4 text-sm text-gray-700 dark:text-gray-400">{{ $contact->contact_email }}</td>
               <td class="p-4">
                  <div class="flex flex-wrap gap-1">
                     @if($contact->segment_names)
                        @foreach(explode(',', $contact->segment_names) as $seg)
                           <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-500">
                              {{ $seg }}
                           </span>
                        @endforeach
                     @else
                        <span class="text-xs text-gray-400 italic">No segments</span>
                     @endif
                  </div>
               </td>
               <td class="p-4">
                  <!-- Action dropdown logic (Kept same) -->
                  <div x-data="dropdown()" class="relative flex justify-center">
                     <button @click="toggle" class="text-gray-500"><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" style="z-index: 99">
                        <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">
                           @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>
               </td>
            </tr>
            @empty
            <tr><td colspan="6" class="text-center p-4">No contacts available</td></tr>
            @endforelse
         </tbody>
      </table>
   </div>
</div>

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

    <!-- OFF-CANVAS SIDEBAR (Updated with Segment tags) -->
    <div x-show="showCanvas" x-transition class="fixed inset-0 flex justify-end bg-black/50 backdrop-blur-sm" style="z-index:99999" x-cloak>
        <div @click.away="showCanvas = false" 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">
                    <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" @submit="handleSubmit($event)" novalidate class="p-6">
                @csrf
                <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 <span class="text-red-500">*</span></label>
                        <input type="text" 
                               name="contact_firstname" 
                               x-model="contact.contact_firstname" 
                               @input="delete errors.contact_firstname"
                               placeholder="Enter first name"
                               :class="errors.contact_firstname ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-gray-300 dark:border-gray-700'"
                               class="w-full rounded-lg border px-4 py-2.5 text-sm dark:bg-gray-800 dark:text-white" />
                        <span x-show="errors.contact_firstname" x-text="errors.contact_firstname" class="mt-1 block text-xs text-red-500" x-cloak></span>
                    </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" 
                               @input="delete errors.contact_lastname"
                               placeholder="Enter last name"
                               :class="errors.contact_lastname ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-gray-300 dark:border-gray-700'"
                               class="w-full rounded-lg border px-4 py-2.5 text-sm dark:bg-gray-800 dark:text-white" />
                        <span x-show="errors.contact_lastname" x-text="errors.contact_lastname" class="mt-1 block text-xs text-red-500" x-cloak></span>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Address <span class="text-red-500">*</span></label>
                        <input type="text" 
                               name="contact_email" 
                               x-model="contact.contact_email" 
                               @input="delete errors.contact_email"
                               placeholder="name@example.com"
                               :class="errors.contact_email ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-gray-300 dark:border-gray-700'"
                               class="w-full rounded-lg border px-4 py-2.5 text-sm dark:bg-gray-800 dark:text-white" />
                        <span x-show="errors.contact_email" x-text="errors.contact_email" class="mt-1 block text-xs text-red-500" x-cloak></span>
                    </div>

                    <!-- Segments Tag Input -->
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Segments (Press Enter to add)
                            <span class="help-icon-wrapper">
                                <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                                <span class="help-popover-text" style="bottom: 100%;width:200px">
                                    <!-- <span class="popover-header">Document Templates</span> -->
                                    <span class="popover-body">Use segments to group contacts for easier organization and management. For example, create a segment for recepients in a particular city and add the relevant contacts.</span>
                                </span>
                            </span>
                        </label>
                        <div class="relative">
                            <input type="text" 
                                   x-model="newSegment" 
                                   @keydown.enter.prevent="addSegment()" 
                                   list="existingSegments"
                                   placeholder="Type and press enter..."
                                   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" />
                            
                            <datalist id="existingSegments">
                                @isset($availableSegments)
                                    @foreach($availableSegments as $seg)
                                        <option value="{{ $seg->segment_name }}">
                                    @endforeach
                                @endisset
                            </datalist>
                        </div>
                        
                        <!-- Hidden input to send data to Controller -->
                        <input type="hidden" name="segments" :value="segments.join(',')">

                        <!-- Display Tag Chips -->
                        <div class="flex flex-wrap gap-2 mt-3">
                            <template x-for="(seg, index) in segments" :key="index">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-brand-500 text-white">
                                    <span x-text="seg"></span>
                                    <button type="button" @click="removeSegment(index)" class="hover:text-gray-200">
                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                    </button>
                                </span>
                            </template>
                        </div>
                    </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

<style type="text/css">
    .text-red-500
    {
        color:red;
    }
</style>