<div x-data="{
    showModal: @entangle('showModal'),
    isEdit: @entangle('isEdit'),
    showPass: false,
    showPassConfirm: false
}">
    <div class="space-y-6">
        <div class="flex items-center justify-between border-b border-slate-200 pb-4">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center text-indigo-600">
                    <i data-lucide="truck" class="w-6 h-6"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-black tracking-tight text-slate-800">Manajemen Kurir</h1>
                    <p class="text-sm text-slate-500 font-medium">Tambah dan kelola akun kurir (Kurir) untuk pengiriman.</p>
                </div>
            </div>
            <button wire:click="openCreateModal" class="px-4 py-2 bg-indigo-600 text-white rounded-xl font-bold text-sm shadow-md shadow-indigo-600/20 hover:bg-indigo-700 transition-all flex items-center gap-2">
                <i data-lucide="plus" class="w-4 h-4"></i> Tambah Kurir
            </button>
        </div>

        <div class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="p-6 border-b border-slate-100 flex items-center justify-between gap-4">
                <div class="relative flex-1 max-w-sm">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                    <input type="text" wire:model.live.debounce.300ms="search" placeholder="Cari nama, email, atau telepon..." class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-0 focus:border-indigo-400 font-medium">
                </div>
                <div class="text-sm text-slate-500 font-bold">
                    Total Kurir: <span class="text-slate-800">{{ $kurirs->count() }}</span>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50 text-slate-500 border-b border-slate-200 text-xs uppercase tracking-wider font-bold">
                            <th class="p-4">ID Kurir</th>
                            <th class="p-4">Nama Lengkap</th>
                            <th class="p-4">Email</th>
                            <th class="p-4">Telepon</th>
                            <th class="p-4 text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($kurirs as $kurir)
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="p-4 text-sm font-black text-slate-400 uppercase tracking-tighter">{{ $kurir->id }}</td>
                                <td class="p-4">
                                    <div class="font-bold text-slate-800">{{ $kurir->name }}</div>
                                </td>
                                <td class="p-4 text-sm text-slate-600 font-medium">{{ $kurir->email }}</td>
                                <td class="p-4 text-sm text-slate-600 font-medium">{{ $kurir->phone ?? '-' }}</td>
                                <td class="p-4 text-right flex justify-end gap-2">
                                    <button wire:click="openEditModal('{{ $kurir->id }}')" class="p-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors">
                                        <i data-lucide="edit-2" class="w-4 h-4"></i>
                                    </button>
                                    <button type="button"
                                            x-on:click="
                                                Swal.fire({
                                                    title: 'Hapus Kurir?',
                                                    text: 'Hapus data kurir ini beserta akun login terkait?',
                                                    icon: 'warning',
                                                    showCancelButton: true,
                                                    confirmButtonColor: '#ef4444',
                                                    cancelButtonColor: '#94a3b8',
                                                    confirmButtonText: 'Ya, Hapus!',
                                                    cancelButtonText: 'Batal'
                                                }).then((result) => {
                                                    if (result.isConfirmed) {
                                                        $wire.delete('{{ $kurir->id }}')
                                                    }
                                                })
                                            "
                                            class="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="p-12 text-center text-slate-500">
                                    <div class="flex flex-col items-center justify-center">
                                        <i data-lucide="user-plus" class="w-16 h-16 text-slate-200 mb-4 text-indigo-600/20"></i>
                                        <p class="font-bold text-slate-600">Belum ada kurir yang terdaftar</p>
                                        <p class="text-xs text-slate-400 mt-1">Gunakan tombol di atas untuk menambahkan kurir baru.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Kurir (Add/Edit) -->
    <div x-show="showModal" x-cloak class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
        <div class="bg-white w-full max-w-md rounded-3xl shadow-2xl p-8 transform transition-transform duration-300 ease-out" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100" @click.away="showModal = false">
            <div class="flex justify-between items-center mb-8">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center shadow-inner">
                        <i data-lucide="user-plus" class="w-6 h-6"></i>
                    </div>
                    <h3 class="font-black text-slate-800 text-xl tracking-tight" x-text="isEdit ? 'Edit Data Kurir' : 'Tambah Kurir Baru'"></h3>
                </div>
                <button type="button" @click="showModal = false" class="text-slate-400 hover:text-slate-600 focus:outline-none bg-slate-50 p-2 rounded-xl">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>
            
            <form wire:submit.prevent="save">
                <div class="space-y-5">
                    <div>
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Nama Lengkap</label>
                        <input type="text" wire:model.blur="name" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" placeholder="Masukkan nama kurir" required>
                        @error('name') <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Email</label>
                        <input type="email" wire:model.blur="email" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" placeholder="kurir@example.com" required>
                        @error('email') <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Telepon</label>
                        <input type="text" wire:model.blur="phone" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all" placeholder="08123xxx" required>
                        @error('phone') <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Password</label>
                            <div class="relative">
                                <input :type="showPass ? 'text' : 'password'" wire:model.blur="password" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all pr-12" placeholder="••••••••">
                                <button type="button" @click="showPass = !showPass" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-indigo-600 focus:outline-none transition-colors">
                                    <i data-lucide="eye" x-show="!showPass" class="w-5 h-5"></i>
                                    <i data-lucide="eye-off" x-show="showPass" class="w-5 h-5" x-cloak></i>
                                </button>
                            </div>
                            @error('password') <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p> @enderror
                            <p class="text-[10px] text-slate-400 mt-1" x-show="isEdit" x-cloak>*Biarkan kosong jika tidak diubah</p>
                        </div>
                        <div>
                            <label class="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">Konfirmasi</label>
                            <div class="relative">
                                <input :type="showPassConfirm ? 'text' : 'password'" wire:model.blur="password_confirmation" class="w-full border-slate-200 rounded-2xl px-5 py-3.5 bg-slate-50 font-bold focus:ring-0 focus:border-indigo-400 transition-all pr-12" placeholder="••••••••">
                                <button type="button" @click="showPassConfirm = !showPassConfirm" class="absolute inset-y-0 right-0 pr-4 flex items-center text-slate-400 hover:text-indigo-600 focus:outline-none transition-colors">
                                    <i data-lucide="eye" x-show="!showPassConfirm" class="w-5 h-5"></i>
                                    <i data-lucide="eye-off" x-show="showPassConfirm" class="w-5 h-5" x-cloak></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-10 flex gap-4">
                    <button type="button" @click="showModal = false" class="flex-1 py-4 px-6 bg-slate-100 text-slate-600 rounded-2xl font-bold hover:bg-slate-200 transition-all">Batal</button>
                    <button type="submit"
                        wire:loading.attr="disabled"
                        wire:target="save"
                        class="flex-1 py-4 px-6 bg-indigo-600 text-white rounded-2xl font-bold shadow-xl shadow-indigo-600/20 hover:bg-indigo-700 transition-all disabled:opacity-60 flex items-center justify-center gap-2">
                        <span wire:loading.remove wire:target="save" x-text="isEdit ? 'Simpan Perubahan' : 'Simpan Akun'"></span>
                        <span wire:loading wire:target="save" class="flex items-center gap-2">
                            <svg class="animate-spin w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                            Menyimpan...
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@script
<script>
    $wire.on('refresh-lucide', () => {
        setTimeout(() => {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }, 100);
    });
</script>
@endscript
