@extends('layouts.app')

@section('title', 'Kelola Therapist')

@section('content')
<div class="space-y-3 sm:space-y-4 md:space-y-6 animate-fade-in">
    
    <!-- Header - Full Width, Compact on Mobile -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-3 w-full">
        <div class="flex-1 min-w-0 max-w-full">
            <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900 dark:text-white break-words">Kelola Therapist</h1>
            <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-0.5 sm:mt-1 break-words">Manajemen data therapist dan informasi profil</p>
        </div>
        <button onclick="openModal('add')" 
                class="inline-flex items-center justify-center px-3 py-2 sm:px-4 sm:py-2.5 md:px-5 md:py-3 text-xs sm:text-sm md:text-base bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white font-medium rounded-lg sm:rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5 whitespace-nowrap flex-shrink-0">
            <i data-lucide="plus" class="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5 mr-1.5 sm:mr-2 flex-shrink-0"></i>
            <span>Tambah Therapist</span>
        </button>
    </div>

    <!-- Search & Filter - Full Width, Compact on Mobile -->
    <div class="bg-white dark:bg-gray-800 rounded-lg sm:rounded-xl md:rounded-2xl shadow-soft p-2.5 sm:p-3 md:p-4 w-full">
        <div class="flex flex-col sm:flex-row gap-2 sm:gap-3 w-full">
            <div class="flex-1 relative min-w-0">
                <i data-lucide="search" class="absolute left-2.5 sm:left-3 md:left-4 top-1/2 transform -translate-y-1/2 w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5 text-gray-400 pointer-events-none"></i>
                <input type="text" 
                       id="searchInput"
                       placeholder="Cari nama atau username..." 
                       class="w-full pl-8 sm:pl-10 md:pl-12 pr-2.5 sm:pr-3 md:pr-4 py-1.5 sm:py-2 md:py-2.5 bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-xs sm:text-sm text-gray-900 dark:text-white placeholder:text-gray-400 focus:ring-2 focus:ring-primary-500 transition-all">
            </div>
            <div class="relative w-full sm:w-48 min-w-0">
                <i data-lucide="filter" class="absolute left-2.5 sm:left-3 md:left-4 top-1/2 transform -translate-y-1/2 w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5 text-gray-400 pointer-events-none"></i>
                <select id="domicileFilter" 
                        class="w-full pl-8 sm:pl-10 md:pl-12 pr-7 sm:pr-8 md:pr-10 py-1.5 sm:py-2 md:py-2.5 bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-xs sm:text-sm text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all appearance-none cursor-pointer">
                    <option value="">Semua Domisili</option>
                    @foreach($domiciles as $domicile)
                        <option value="{{ $domicile }}">{{ $domicile }}</option>
                    @endforeach
                </select>
                <i data-lucide="chevron-down" class="absolute right-2.5 sm:right-3 md:right-4 top-1/2 transform -translate-y-1/2 w-3 h-3 sm:w-3.5 sm:h-3.5 md:w-4 md:h-4 text-gray-400 pointer-events-none"></i>
            </div>
        </div>
    </div>

    <!-- Data Display - Table for Desktop, Cards for Mobile -->
    <div class="bg-white dark:bg-gray-800 rounded-lg sm:rounded-xl md:rounded-2xl shadow-soft">
        <!-- Header -->
        <div class="px-3 sm:px-4 md:px-6 py-2.5 sm:py-3 md:py-4 border-b border-gray-200 dark:border-gray-700">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1.5 sm:gap-2">
                <h2 class="text-sm sm:text-base md:text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                    <i data-lucide="users" class="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5 mr-1.5 sm:mr-2 text-primary-600 dark:text-primary-400 flex-shrink-0"></i>
                    <span>Daftar Therapist</span>
                </h2>
                <span class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">
                    <span class="hidden sm:inline">Menampilkan </span><span class="font-semibold">{{ $therapists->firstItem() ?? 0 }}</span> - <span class="font-semibold">{{ $therapists->lastItem() ?? 0 }}</span> dari <span class="font-semibold text-primary-600 dark:text-primary-400">{{ $therapists->total() }}</span>
                </span>
            </div>
        </div>

        <!-- Desktop Table View (hidden on mobile) -->
        <div class="hidden sm:block overflow-x-auto" style="-webkit-overflow-scrolling: touch;">
            <table class="w-full" style="min-width: 800px;">
                <thead class="bg-gray-50 dark:bg-gray-900/50">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">No</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Username</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Nama</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Domisili</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Email</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Status</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700" id="therapistTable">
                    @forelse($therapists as $index => $therapist)
                        <tr class="therapist-item hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors" data-name="{{ strtolower($therapist->name) }}" data-username="{{ strtolower($therapist->username) }}" data-domicile="{{ $therapist->domicile }}">
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{ ($therapists->currentPage() - 1) * $therapists->perPage() + $index + 1 }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white font-semibold text-sm shadow-md">
                                        {{ strtoupper(substr($therapist->name, 0, 1)) }}
                                    </div>
                                    <span class="font-medium text-sm text-gray-900 dark:text-white">{{ $therapist->username }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 font-medium text-sm text-gray-900 dark:text-white">{{ $therapist->name }}</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300">
                                    <i data-lucide="map-pin" class="w-3 h-3 mr-1"></i>
                                    {{ $therapist->domicile }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{{ $therapist->email ?: '-' }}</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300">
                                    <span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5"></span>
                                    Aktif
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <button onclick='openModal("edit", {{ json_encode($therapist) }})' class="p-2 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20 rounded-lg transition-all" title="Edit">
                                        <i data-lucide="edit-2" class="w-4 h-4"></i>
                                    </button>
                                    <button onclick="deleteTherapist({{ $therapist->id }})" class="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all" title="Hapus">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr id="emptyRow">
                            <td colspan="7" class="px-6 py-12 text-center">
                                <div class="flex flex-col items-center">
                                    <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mb-4">
                                        <i data-lucide="users" class="w-8 h-8 text-gray-400"></i>
                                    </div>
                                    <p class="text-base text-gray-500 dark:text-gray-400 font-medium">Belum ada data therapist</p>
                                    <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">Klik tombol "Tambah Therapist" untuk menambahkan</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Mobile Card View (visible only on mobile) -->
        <div class="sm:hidden divide-y divide-gray-200 dark:divide-gray-700" id="therapistCards">
            @forelse($therapists as $index => $therapist)
                <div class="therapist-item p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors" data-name="{{ strtolower($therapist->name) }}" data-username="{{ strtolower($therapist->username) }}" data-domicile="{{ $therapist->domicile }}">
                    <div class="flex items-start gap-3">
                        <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white font-bold text-sm shadow-md flex-shrink-0">
                            {{ strtoupper(substr($therapist->name, 0, 1)) }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-start justify-between gap-2 mb-1">
                                <div class="flex-1 min-w-0">
                                    <h3 class="font-semibold text-sm text-gray-900 dark:text-white truncate">{{ $therapist->name }}</h3>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $therapist->username }}</p>
                                </div>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 flex-shrink-0">
                                    <span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1"></span>
                                    Aktif
                                </span>
                            </div>
                            <div class="flex flex-wrap items-center gap-2 mt-2 text-xs">
                                <span class="inline-flex items-center px-2 py-1 rounded-md bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300">
                                    <i data-lucide="map-pin" class="w-3 h-3 mr-1"></i>
                                    {{ $therapist->domicile }}
                                </span>
                                @if($therapist->email)
                                <span class="inline-flex items-center px-2 py-1 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 truncate max-w-[150px]">
                                    <i data-lucide="mail" class="w-3 h-3 mr-1 flex-shrink-0"></i>
                                    <span class="truncate">{{ $therapist->email }}</span>
                                </span>
                                @endif
                            </div>
                            <div class="flex gap-2 mt-3">
                                <button onclick='openModal("edit", {{ json_encode($therapist) }})' class="flex-1 inline-flex items-center justify-center px-3 py-1.5 text-xs font-medium text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 hover:bg-primary-100 dark:hover:bg-primary-900/30 rounded-lg transition-all">
                                    <i data-lucide="edit-2" class="w-3 h-3 mr-1"></i>
                                    Edit
                                </button>
                                <button onclick="deleteTherapist({{ $therapist->id }})" class="flex-1 inline-flex items-center justify-center px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-lg transition-all">
                                    <i data-lucide="trash-2" class="w-3 h-3 mr-1"></i>
                                    Hapus
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div id="emptyCard" class="p-8 text-center">
                    <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i data-lucide="users" class="w-6 h-6 text-gray-400"></i>
                    </div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 font-medium">Belum ada data therapist</p>
                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Klik tombol "Tambah Therapist"</p>
                </div>
            @endforelse
        </div>
    </div>

    <!-- Pagination - Full Width, Compact on Mobile -->
    @if($therapists->hasPages())
    <div class="flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-3 w-full">
        <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap">
            Halaman {{ $therapists->currentPage() }} dari {{ $therapists->lastPage() }}
        </div>
        <div class="w-full sm:w-auto flex justify-center overflow-x-auto">
            {{ $therapists->withQueryString()->links('vendor.pagination.tailwind-therapist') }}
        </div>
    </div>
    @endif
</div>

<!-- Modal -->
<div id="therapistModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4" onclick="if (event.target === this) closeModal();">
    <div class="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto transform transition-all">
        
        <!-- Modal Header -->
        <div class="sticky top-0 bg-white dark:bg-gray-800 z-10 flex items-center justify-between p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
            <h3 id="modalTitle" class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white flex items-center">
                <i data-lucide="user-plus" class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-primary-600 dark:text-primary-400 flex-shrink-0"></i>
                <span class="truncate">Tambah Therapist</span>
            </h3>
            <button onclick="closeModal()" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors flex-shrink-0">
                <i data-lucide="x" class="w-5 h-5 text-gray-400"></i>
            </button>
        </div>
        
        <!-- Modal Body -->
        <form id="therapistForm" method="POST" class="p-4 sm:p-6 space-y-4">
            @csrf
            <input type="hidden" id="method" name="_method" value="POST">
            
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Username</label>
                    <input type="text" 
                           name="username" 
                           id="username" 
                           required 
                           class="w-full px-3 sm:px-4 py-2 sm:py-3 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all">
                </div>

                <div>
                    <label class="block text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Nama Lengkap</label>
                    <input type="text" 
                           name="name" 
                           id="name" 
                           required 
                           class="w-full px-3 sm:px-4 py-2 sm:py-3 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all">
                </div>
            </div>

            <div>
                <label class="block text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Domisili</label>
                <div class="relative">
                    <i data-lucide="map-pin" class="absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 pointer-events-none"></i>
                    <select name="domicile" 
                            id="domicile" 
                            required 
                            class="w-full pl-10 sm:pl-12 pr-8 sm:pr-10 py-2 sm:py-3 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all appearance-none cursor-pointer">
                        <option value="">Pilih Domisili</option>
                        @foreach($domiciles as $domicile)
                            <option value="{{ $domicile }}">{{ $domicile }}</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="absolute right-3 sm:right-4 top-1/2 transform -translate-y-1/2 w-3 h-3 sm:w-4 sm:h-4 text-gray-400 pointer-events-none"></i>
                </div>
            </div>

            <div>
                <label class="block text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Email <span class="text-gray-400 text-xs">(Opsional)</span></label>
                <div class="relative">
                    <i data-lucide="mail" class="absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 pointer-events-none"></i>
                    <input type="email" 
                           name="email" 
                           id="email" 
                           class="w-full pl-10 sm:pl-12 pr-3 sm:pr-4 py-2 sm:py-3 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all">
                </div>
            </div>

            <div>
                <label class="block text-xs sm:text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                    Password <span id="passwordLabel" class="text-red-500 text-xs">(Wajib)</span>
                </label>
                <div class="relative">
                    <i data-lucide="lock" class="absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 pointer-events-none"></i>
                    <input type="password" 
                           name="password" 
                           id="password" 
                           class="w-full pl-10 sm:pl-12 pr-3 sm:pr-4 py-2 sm:py-3 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg sm:rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 transition-all">
                </div>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2" id="passwordHint">Minimal 6 karakter</p>
            </div>

            <!-- Modal Footer -->
            <div class="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                <button type="button" 
                        onclick="closeModal()" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2.5 sm:py-3 text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg sm:rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all font-medium">
                    Batal
                </button>
                <button type="submit" 
                        class="w-full sm:w-auto px-4 sm:px-6 py-2.5 sm:py-3 text-sm bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white rounded-lg sm:rounded-xl transition-all font-medium shadow-lg hover:shadow-xl">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Delete Form -->
<form id="deleteForm" method="POST" class="hidden">
    @csrf
    @method('DELETE')
</form>

@push('scripts')
<script>
// Initialize Lucide icons
lucide.createIcons();

function openModal(mode, data = null) {
    const modal = document.getElementById('therapistModal');
    const form = document.getElementById('therapistForm');
    const title = document.getElementById('modalTitle');
    const method = document.getElementById('method');
    const passwordInput = document.getElementById('password');
    const passwordLabel = document.getElementById('passwordLabel');
    const passwordHint = document.getElementById('passwordHint');
    
    if (mode === 'add') {
        title.innerHTML = '<i data-lucide="user-plus" class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-primary-600 dark:text-primary-400 flex-shrink-0"></i><span class="truncate">Tambah Therapist</span>';
        form.action = '{{ route("therapist.store") }}';
        method.value = 'POST';
        form.reset();
        passwordInput.required = true;
        passwordLabel.innerHTML = '<span class="text-red-500 text-xs">(Wajib)</span>';
        passwordHint.textContent = 'Minimal 6 karakter';
    } else {
        title.innerHTML = '<i data-lucide="edit-2" class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-primary-600 dark:text-primary-400 flex-shrink-0"></i><span class="truncate">Edit Therapist</span>';
        form.action = `/therapist/${data.id}`;
        method.value = 'PUT';
        document.getElementById('username').value = data.username;
        document.getElementById('name').value = data.name;
        document.getElementById('domicile').value = data.domicile;
        document.getElementById('email').value = data.email || '';
        passwordInput.value = '';
        passwordInput.required = false;
        passwordLabel.innerHTML = '<span class="text-gray-400 text-xs">(Opsional)</span>';
        passwordHint.textContent = 'Kosongkan jika tidak ingin mengubah password';
    }
    
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    setTimeout(() => lucide.createIcons(), 100);
}

function closeModal() {
    const modal = document.getElementById('therapistModal');
    modal.classList.add('hidden');
    document.body.style.overflow = '';
}

function deleteTherapist(id) {
    if (confirm('Yakin ingin menghapus therapist ini? Data yang terkait akan ikut terhapus.')) {
        const form = document.getElementById('deleteForm');
        form.action = `/therapist/${id}`;
        form.submit();
    }
}

// Search and Filter
const searchInput = document.getElementById('searchInput');
const domicileFilter = document.getElementById('domicileFilter');

function applyFilter() {
    const searchTerm = searchInput.value.toLowerCase().trim();
    const domicileValue = domicileFilter.value.trim();
    const items = document.querySelectorAll('.therapist-item');
    let visibleCount = 0;
    
    items.forEach(item => {
        const name = item.dataset.name || '';
        const username = item.dataset.username || '';
        const domicile = item.dataset.domicile || '';
        
        const matchSearch = !searchTerm || name.includes(searchTerm) || username.includes(searchTerm);
        const matchDomicile = !domicileValue || domicile === domicileValue;
        
        if (matchSearch && matchDomicile) {
            item.classList.remove('hidden');
            visibleCount++;
        } else {
            item.classList.add('hidden');
        }
    });
    
    // Show/hide empty state for desktop table
    const emptyRow = document.getElementById('emptyRow');
    const tbody = document.getElementById('therapistTable');
    let noResultRow = document.getElementById('noResultRow');
    
    if (emptyRow) emptyRow.classList.add('hidden');
    
    if (visibleCount === 0 && items.length > 0) {
        // Desktop table
        if (tbody && !noResultRow) {
            noResultRow = document.createElement('tr');
            noResultRow.id = 'noResultRow';
            noResultRow.innerHTML = '<td colspan="7" class="px-6 py-8 text-center text-sm text-gray-500 dark:text-gray-400">Tidak ada hasil yang cocok</td>';
            tbody.appendChild(noResultRow);
        }
        if (noResultRow) noResultRow.classList.remove('hidden');
        
        // Mobile cards
        const cardsContainer = document.getElementById('therapistCards');
        let noResultCard = document.getElementById('noResultCard');
        if (cardsContainer && !noResultCard) {
            noResultCard = document.createElement('div');
            noResultCard.id = 'noResultCard';
            noResultCard.className = 'p-8 text-center';
            noResultCard.innerHTML = '<div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-3"><i data-lucide="users" class="w-6 h-6 text-gray-400"></i></div><p class="text-sm text-gray-500 dark:text-gray-400">Tidak ada hasil yang cocok</p>';
            cardsContainer.appendChild(noResultCard);
            lucide.createIcons();
        }
        if (noResultCard) noResultCard.classList.remove('hidden');
    } else {
        if (noResultRow) noResultRow.classList.add('hidden');
        const noResultCard = document.getElementById('noResultCard');
        if (noResultCard) noResultCard.classList.add('hidden');
    }
}

searchInput?.addEventListener('input', applyFilter);
domicileFilter?.addEventListener('change', applyFilter);

// Re-initialize icons
setTimeout(() => {
    lucide.createIcons();
}, 100);
</script>
@endpush
@endsection