Add search filter to group participants tab

Client-side Alpine.js search that filters enrollments by name (Arabic/English)
or phone number instantly without server round-trips.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

resources/views/livewire/groups/group-show.blade.php

@@ -404,10 +404,17 @@ class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm
         </div>
 
         {{-- Enrollments Tab --}}
-        <div x-show="activeTab === 'enrollments'" x-cloak>
+        <div x-show="activeTab === 'enrollments'" x-cloak x-data="{ enrollSearch: '' }">
             <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-                <div class="p-4 border-b border-gray-100 flex items-center justify-between">
+                <div class="p-4 border-b border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                     <h3 class="text-base font-semibold text-gray-800">{{ __('المشتركون النشطون') }} ({{ $activeEnrollments->count() }})</h3>
+                    <div class="relative w-full sm:w-72">
+                        <svg class="absolute start-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                        </svg>
+                        <input type="text" x-model="enrollSearch" placeholder="{{ __('بحث بالاسم أو الهاتف...') }}"
+                               class="w-full ps-9 pe-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-gray-400">
+                    </div>
                 </div>
 
                 @if($activeEnrollments->isNotEmpty())
@@ -453,7 +460,8 @@ class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm
                         <tbody class="divide-y divide-gray-100">
                             @foreach($activeEnrollments as $enrollment)
                             @php $isUnpaid = in_array($enrollment->participant_id, $notPaidParticipantIds); @endphp
-                            <tr class="{{ $isUnpaid ? 'bg-red-50 hover:bg-red-100' : 'hover:bg-gray-50' }} transition">
+                            <tr x-show="!enrollSearch || '{{ str_replace("'", "", $enrollment->participant?->person?->name_ar ?? '') }} {{ $enrollment->participant?->person?->name ?? '' }} {{ $enrollment->participant?->person?->phone ?? '' }}'.toLowerCase().includes(enrollSearch.toLowerCase())"
+                                class="{{ $isUnpaid ? 'bg-red-50 hover:bg-red-100' : 'hover:bg-gray-50' }} transition">
                                 <td class="px-4 py-3">
                                     <div class="flex items-center gap-3">
                                         <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">