{{-- resources/views/livewire/user-management.blade.php --}}
<div class="p-6 bg-white rounded-lg shadow">
    <!-- Header -->
    <div class="mb-6 lg:flex-row lg:items-center">

        <!-- Header -->
        <div class="w-[70%] mb-6 sm:flex sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Manajemen User</h1>
                <p class="mt-2 text-sm text-gray-700">Kelola data pengguna sistem</p>
            </div>
            @if (auth()->user()->roles->first()->name == 'direktur')
                <div class="mt-4 sm:mt-0">
                    <button wire:click="openModal"
                        class="inline-flex items-center px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 active:bg-blue-900 focus:outline-none focus:border-blue-900 focus:ring focus:ring-blue-300 disabled:opacity-25">
                        <i class="mr-2 fas fa-user-plus"></i> Tambah User
                    </button>
                </div>
            @endif
        </div>

        <!-- Search and Filters -->
        <div class="mb-6 bg-white rounded-lg shadow">
            <div class="px-4 py-5 sm:p-6">
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                        <label for="search" class="block mb-2 text-sm font-medium text-gray-700">Cari User</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <i class="text-gray-400 fas fa-search"></i>
                            </div>
                            <input wire:model.live="search" type="text" id="search"
                                class="block w-full py-2 pl-10 pr-3 leading-5 placeholder-gray-500 bg-white border border-gray-300 rounded-md focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                placeholder="Cari berdasarkan nama, email, username...">
                        </div>
                    </div>
                    <div>
                        <label class="block mb-2 text-sm font-medium text-gray-700">Total Users</label>
                        <div class="text-lg font-semibold text-gray-900">{{ $users->total() }} users</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Messages -->
        @if (session()->has('message'))
            <div class="p-4 mb-6 rounded-md bg-green-50">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="text-green-400 fas fa-check-circle"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-green-800">{{ session('message') }}</p>
                    </div>
                </div>
            </div>
        @endif

        @if (session()->has('error'))
            <div class="p-4 mb-6 rounded-md bg-red-50">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="text-red-400 fas fa-exclamation-circle"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-red-800">{{ session('error') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Users Table -->
        <div class="overflow-hidden bg-white shadow sm:rounded-md">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                <button wire:click="sortBy('name')"
                                    class="flex items-center space-x-1 hover:text-gray-700">
                                    <span>Nama</span>
                                    <i
                                        class="fas fa-sort{{ $sortField !== 'name' ? '' : ($sortDirection === 'asc' ? '-up' : '-down') }}"></i>
                                </button>
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                <button wire:click="sortBy('email')"
                                    class="flex items-center space-x-1 hover:text-gray-700">
                                    <span>Email</span>
                                    <i
                                        class="fas fa-sort{{ $sortField !== 'email' ? '' : ($sortDirection === 'asc' ? '-up' : '-down') }}"></i>
                                </button>
                            </th>

                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                NIP
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                Jabatan
                            </th>
                            @if (auth()->user()->roles->first()->name == 'direktur')
                                <th scope="col"
                                    class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
                                    Aksi
                                </th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse ($users as $user)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 w-10 h-10">
                                            <div
                                                class="flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full">
                                                <span
                                                    class="font-bold text-blue-600">{{ substr($user->name, 0, 1) }}</span>
                                            </div>
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">{{ $user->name }}</div>
                                            <div class="text-sm text-gray-500">{{ $user->unit_kerja }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ $user->email }}</div>
                                </td>

                                <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
                                    {{ $user->nip ?? '-' }}
                                </td>

                                @php
                                    $role = $user->getRoleNames()->first();
                                @endphp

                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span
                                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                                        @if ($role === 'direktur') bg-red-100 text-red-800
                                        @elseif ($role === 'ppk') bg-yellow-100 text-yellow-800
                                        @elseif ($role === 'bendahara') bg-green-100 text-green-800
                                        @else bg-gray-100 text-gray-800 @endif">

                                        {{ ucfirst($role ?? 'No Role') }}
                                    </span>
                                </td>
                                @if (auth()->user()->roles->first()->name === 'direktur')
                                    <td class="px-6 py-4 text-sm font-medium whitespace-nowrap">
                                        <div class="flex items-center space-x-4">

                                            <!-- Edit -->
                                            <button wire:click="editUser({{ $user->id }})"
                                                class="flex items-center gap-1 text-blue-600 hover:text-blue-800"
                                                title="Edit">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none"
                                                    viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M11 5h2M4 20h16M6 16l10-10a2 2 0 012.828 2.828L8.828 18.828A4 4 0 016 20z" />
                                                </svg>
                                                <span>Edit</span>
                                            </button>

                                            <!-- Reset Password -->
                                            <button wire:click="resetPassword({{ $user->id }})"
                                                onclick="return confirm('Reset password user ini?')"
                                                class="flex items-center gap-1 text-yellow-600 hover:text-yellow-800"
                                                title="Reset Password">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none"
                                                    viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M12 11c0-1.657 1.567-3 3.5-3S19 9.343 19 11s-1.567 3-3.5 3S12 12.657 12 11z" />
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2" d="M6 11V7a6 6 0 1112 0v4" />
                                                </svg>
                                                <span>Password</span>
                                            </button>

                                            <!-- Hapus -->
                                            <button wire:click="confirmDelete({{ $user->id }})"
                                                class="flex items-center gap-1 text-red-600 hover:text-red-800"
                                                title="Hapus">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5"
                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                                </svg>
                                                <span>Hapus</span>
                                            </button>

                                        </div>
                                    </td>
                                @endif

                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-4 text-sm text-center text-gray-500">
                                    <div class="py-8 text-center">
                                        <i class="mb-4 text-4xl text-gray-400 fas fa-users"></i>
                                        <p class="text-gray-500">Tidak ada data user ditemukan.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="px-4 py-3 bg-white border-t border-gray-200 sm:px-6">
                {{ $users->links() }}
            </div>
        </div>

        <!-- Modal for Add/Edit User -->
        @if ($showModal)
            <div class="fixed inset-0 z-10 overflow-y-auto">
                <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                    <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"></div>

                    <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>

                    <div
                        class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                        <div>
                            <div class="flex items-start justify-between mb-4">
                                <h3 class="text-lg font-medium leading-6 text-gray-900">
                                    {{ $modalTitle }}
                                </h3>
                                <button wire:click="closeModal" class="text-gray-400 hover:text-gray-500">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            @if ($errors->any())
                                @foreach ($errors->all() as $err)
                                    {{ $err }}
                                @endforeach
                            @endif
                            <form wire:submit.prevent="saveUser">
                                <div class="space-y-4">
                                    <!-- Name -->
                                    <div>
                                        <label for="name" class="block text-sm font-medium text-gray-700">Nama
                                            Lengkap
                                            *</label>
                                        <input type="text" wire:model.defer="name" id="name"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                        @error('name')
                                            <span class="text-xs text-red-500">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <!-- Email -->
                                    <div>
                                        <label for="email" class="block text-sm font-medium text-gray-700">Email
                                            *</label>
                                        <input type="email" wire:model.defer="email" id="email"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                        @error('email')
                                            <span class="text-xs text-red-500">{{ $message }}</span>
                                        @enderror
                                    </div>


                                    <!-- Password -->
                                    <div>
                                        <label for="password" class="block text-sm font-medium text-gray-700">
                                            Password {{ $userId ? '(Kosongkan jika tidak ingin mengganti)' : '*' }}
                                        </label>
                                        <input type="password" wire:model.defer="password" id="password"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                        @error('password')
                                            <span class="text-xs text-red-500">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="password_confirmation"
                                            class="block text-sm font-medium text-gray-700">Konfirmasi Password
                                            *</label>
                                        <input type="password" wire:model.defer="password_confirmation"
                                            id="password_confirmation"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                    </div>

                                    <!-- NIP -->
                                    <div>
                                        <label for="nip"
                                            class="block text-sm font-medium text-gray-700">NIP</label>
                                        <input type="text" wire:model.defer="nip" id="nip"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                        @error('nip')
                                            <span class="text-xs text-red-500">{{ $message }}</span>
                                        @enderror
                                    </div>



                                    <!-- Role -->
                                    <div>
                                        <label for="role" class="block text-sm font-medium text-gray-700">Jabatan
                                            *</label>
                                        <select wire:model.defer="role" id="role"
                                            class="block w-full py-2 pl-3 pr-10 mt-1 text-base border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                                            <option value="">Pilih Jabatan</option>
                                            @foreach ($roles as $key => $label)
                                                <option value="{{ $label }}">{{ $label }}</option>
                                            @endforeach
                                        </select>
                                        @error('role')
                                            <span class="text-xs text-red-500">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="flex justify-end mt-6 space-x-3">
                                    <button type="button" wire:click="closeModal"
                                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                        Batal
                                    </button>
                                    <button type="submit"
                                        class="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                        <i class="mr-2 fas fa-save"></i> Simpan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Delete Confirmation Modal -->
        @if ($confirmingDelete)
            <div class="fixed inset-0 z-10 overflow-y-auto">
                <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                    <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"></div>

                    <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>

                    <div
                        class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                        <div class="sm:flex sm:items-start">
                            <div
                                class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
                                <i class="text-red-600 fas fa-exclamation-triangle"></i>
                            </div>
                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                <h3 class="text-lg font-medium leading-6 text-gray-900">
                                    Konfirmasi Hapus User
                                </h3>
                                <div class="mt-2">
                                    <p class="text-sm text-gray-500">
                                        Apakah Anda yakin ingin menghapus user ini? Tindakan ini tidak dapat dibatalkan.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                            <button wire:click="deleteUser" type="button"
                                class="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
                                Hapus
                            </button>
                            <button wire:click="$set('confirmingDelete', false)" type="button"
                                class="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm">
                                Batal
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Styles -->
    </div>
</div>
@push('scripts')
    <style>
        .animate-spin {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
@endpush