@extends('layouts.admin')

@section('title', 'Manajemen Pengguna Admin & Penugasan Role')

@section('content')
<div class="space-y-6">
    <!-- Header Page -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.roles.index') }}" class="p-2 rounded-xl bg-white border border-slate-200 text-slate-500 hover:text-slate-800 transition-colors">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
            </a>
            <div>
                <h1 class="text-xl font-bold text-slate-900 tracking-tight">Manajemen Akun Admin & Penugasan Role</h1>
                <p class="text-xs text-slate-500 mt-0.5">Atur akun staf pengelola dan tentukan peran wewenang masing-masing</p>
            </div>
        </div>
        <div class="flex items-center gap-2.5">
            <a href="{{ route('admin.roles.index') }}" class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 text-xs font-bold transition-all shadow-sm">
                <i data-lucide="shield" class="w-4 h-4 text-slate-500"></i>
                <span>Kelola Role & Permission</span>
            </a>
            <button type="button" onclick="openCreateUserModal()" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold transition-all shadow-sm shadow-primary-500/25">
                <i data-lucide="user-plus" class="w-4 h-4"></i>
                <span>Tambah Admin Baru</span>
            </button>
        </div>
    </div>

    <!-- Alert Notifikasi -->
    @if(session('success'))
    <div class="p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs flex items-center justify-between">
        <div class="flex items-center gap-2.5 font-medium">
            <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600 shrink-0"></i>
            <span>{{ session('success') }}</span>
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-xs flex items-center justify-between">
        <div class="flex items-center gap-2.5 font-medium">
            <i data-lucide="alert-triangle" class="w-4 h-4 text-rose-600 shrink-0"></i>
            <span>{{ session('error') }}</span>
        </div>
    </div>
    @endif

    @if(isset($errors) && $errors->any())
    <div class="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-xs">
        <div class="flex items-center gap-2 font-bold mb-1">
            <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600"></i>
            <span>Terdapat beberapa kesalahan:</span>
        </div>
        <ul class="list-disc list-inside space-y-0.5 ml-2 text-rose-700">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- Tabel Akun Admin -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="p-4 border-b border-slate-100 flex items-center justify-between">
            <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2">
                <i data-lucide="shield-check" class="w-4 h-4 text-primary-600"></i>
                <span>Daftar Akun Pengelola Sistem ({{ $users->count() }})</span>
            </h3>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="border-b border-slate-100 bg-slate-50/60 text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                        <th class="py-3 px-4">Pengguna</th>
                        <th class="py-3 px-4">Email Login</th>
                        <th class="py-3 px-4">Role / Hak Akses</th>
                        <th class="py-3 px-4">Pegawai Terkait</th>
                        <th class="py-3 px-4">Status Akun</th>
                        <th class="py-3 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($users as $user)
                    <tr class="hover:bg-slate-50/60 transition-colors">
                        <td class="py-3.5 px-4">
                            <div class="flex items-center gap-3">
                                <div class="w-9 h-9 rounded-xl flex items-center justify-center font-bold text-xs text-white shrink-0 shadow-sm" style="background-color: {{ $user->primaryRole?->warna ?? '#0f172a' }}">
                                    {{ strtoupper(substr($user->name, 0, 2)) }}
                                </div>
                                <div>
                                    <span class="font-bold text-slate-900 block">{{ $user->name }}</span>
                                    @if($user->id === auth()->id())
                                        <span class="text-[9px] font-black text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded border border-emerald-200">
                                            AKUN ANDA
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </td>

                        <td class="py-3.5 px-4 font-mono text-slate-600 text-[11px]">
                            {{ $user->email }}
                        </td>

                        <td class="py-3.5 px-4">
                            @if($user->primaryRole)
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-bold text-white shadow-xs" style="background-color: {{ $user->primaryRole->warna ?? '#2563eb' }}">
                                    <i data-lucide="shield" class="w-3 h-3"></i>
                                    <span>{{ $user->primaryRole->nama }}</span>
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-600 border border-slate-200">
                                    {{ ucfirst($user->role ?? 'User') }}
                                </span>
                            @endif
                        </td>

                        <td class="py-3.5 px-4 text-slate-600">
                            @if($user->pegawai)
                                <span class="font-semibold text-slate-800 block">{{ $user->pegawai->nama_lengkap }}</span>
                                <span class="text-[10px] text-slate-400 font-mono">NIP: {{ $user->pegawai->nip }}</span>
                            @else
                                <span class="text-slate-400 italic text-[11px]">Admin Sistem Khusus</span>
                            @endif
                        </td>

                        <td class="py-3.5 px-4">
                            @if($user->is_active !== false)
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Aktif
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 text-slate-600 border border-slate-200">
                                    <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span> Nonaktif
                                </span>
                            @endif
                        </td>

                        <td class="py-3.5 px-4 text-right">
                            <div class="flex items-center justify-end gap-1.5">
                                <button type="button" onclick="openEditUserModal({{ json_encode([
                                    'id' => $user->id,
                                    'name' => $user->name,
                                    'email' => $user->email,
                                    'role_id' => $user->role_id ?? ($user->roles->first()?->id ?? ''),
                                    'is_active' => $user->is_active !== false ? 1 : 0
                                ]) }})" class="p-1.5 rounded-lg border border-slate-200 text-slate-600 hover:text-primary-600 hover:border-primary-300 transition-colors" title="Edit Akun & Role">
                                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                                </button>

                                @if($user->id !== 1 && $user->id !== auth()->id())
                                <form action="{{ route('admin.users.destroy', $user->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus akun \'{{ $user->name }}\'?');" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 rounded-lg border border-slate-200 text-slate-400 hover:text-rose-600 hover:border-rose-300 hover:bg-rose-50 transition-colors" title="Hapus Akun">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-8 text-slate-400">
                            Belum ada akun pengelola sistem tambahan.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- MODAL TAMBAH ADMIN BARU -->
<div id="modal-create-user" class="fixed inset-0 bg-slate-900/50 backdrop-blur-xs z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl border border-slate-200 shadow-xl max-w-md w-full overflow-hidden animate-fade-in">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-primary-50 text-primary-600 flex items-center justify-center font-bold">
                    <i data-lucide="user-plus" class="w-4 h-4"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-900">Tambah Akun Administrator</h3>
            </div>
            <button type="button" onclick="closeCreateUserModal()" class="text-slate-400 hover:text-slate-600 p-1">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <form action="{{ route('admin.users.store') }}" method="POST" class="p-5 space-y-4">
            @csrf
            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Nama Lengkap *</label>
                <input type="text" name="name" required placeholder="Contoh: Rian Pratama, S.E" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Email Login *</label>
                <input type="email" name="email" required placeholder="admin.ops@smartpresensi.com" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Kata Sandi Awal *</label>
                <input type="password" name="password" required minlength="6" placeholder="Minimal 6 karakter" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Pilih Peran (Role Wewenang) *</label>
                <select name="role_id" required class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    <option value="">-- Pilih Role Akses --</option>
                    @foreach($roles as $r)
                        <option value="{{ $r->id }}">{{ $r->nama }} ({{ $r->slug }})</option>
                    @endforeach
                </select>
                <p class="text-[10px] text-slate-400 mt-1">Hak akses modul akan otomatis mengikuti konfigurasi role yang dipilih.</p>
            </div>

            <div class="flex items-center gap-2 pt-2">
                <input type="checkbox" name="is_active" id="create_is_active" value="1" checked class="rounded border-slate-300 text-primary-600 focus:ring-primary-500">
                <label for="create_is_active" class="text-xs text-slate-700 font-medium">Akun aktif langsung dapat login</label>
            </div>

            <div class="flex items-center justify-end gap-2 pt-4 border-t border-slate-100">
                <button type="button" onclick="closeCreateUserModal()" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-xs font-bold hover:bg-slate-50">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-500/25">
                    Simpan Akun
                </button>
            </div>
        </form>
    </div>
</div>

<!-- MODAL EDIT ADMIN -->
<div id="modal-edit-user" class="fixed inset-0 bg-slate-900/50 backdrop-blur-xs z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl border border-slate-200 shadow-xl max-w-md w-full overflow-hidden animate-fade-in">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center font-bold">
                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-900">Ubah Akun & Peran</h3>
            </div>
            <button type="button" onclick="closeEditUserModal()" class="text-slate-400 hover:text-slate-600 p-1">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <form id="form-edit-user" action="" method="POST" class="p-5 space-y-4">
            @csrf
            @method('PUT')

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Nama Lengkap *</label>
                <input type="text" name="name" id="edit_name" required class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Email Login *</label>
                <input type="email" name="email" id="edit_email" required class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Ubah Kata Sandi (Opsional)</label>
                <input type="password" name="password" minlength="6" placeholder="Kosongkan jika tidak ingin mengubah sandi" class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
            </div>

            <div>
                <label class="block text-xs font-bold text-slate-700 mb-1">Pilih Peran (Role Wewenang) *</label>
                <select name="role_id" id="edit_role_id" required class="w-full px-3 py-2 rounded-xl border border-slate-200 text-xs focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    @foreach($roles as $r)
                        <option value="{{ $r->id }}">{{ $r->nama }} ({{ $r->slug }})</option>
                    @endforeach
                </select>
            </div>

            <div class="flex items-center gap-2 pt-2">
                <input type="checkbox" name="is_active" id="edit_is_active" value="1" class="rounded border-slate-300 text-primary-600 focus:ring-primary-500">
                <label for="edit_is_active" class="text-xs text-slate-700 font-medium">Status Akun Aktif</label>
            </div>

            <div class="flex items-center justify-end gap-2 pt-4 border-t border-slate-100">
                <button type="button" onclick="closeEditUserModal()" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 text-xs font-bold hover:bg-slate-50">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-500/25">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    function openCreateUserModal() {
        document.getElementById('modal-create-user').classList.remove('hidden');
    }

    function closeCreateUserModal() {
        document.getElementById('modal-create-user').classList.add('hidden');
    }

    function openEditUserModal(user) {
        document.getElementById('form-edit-user').action = '/admin/users/' + user.id;
        document.getElementById('edit_name').value = user.name;
        document.getElementById('edit_email').value = user.email;
        document.getElementById('edit_role_id').value = user.role_id;
        document.getElementById('edit_is_active').checked = user.is_active == 1;

        document.getElementById('modal-edit-user').classList.remove('hidden');
    }

    function closeEditUserModal() {
        document.getElementById('modal-edit-user').classList.add('hidden');
    }
</script>
@endpush
@endsection