@extends('layouts.app')
@section('title', 'Manajemen User')

@section('content')
<div class="space-y-5">

    {{-- Header --}}
    <div>
        <h1 class="text-2xl font-bold text-gray-800">Manajemen User</h1>
        <p class="text-gray-500 text-sm mt-0.5">Kelola akun pengguna sistem HR – dibuat oleh Admin HR</p>
        <div class="mt-3 bg-blue-50 border border-blue-200 rounded-lg p-3 flex items-start gap-2">
            <i class="fas fa-info-circle text-blue-500 mt-0.5 flex-shrink-0 text-sm"></i>
            <p class="text-sm text-blue-800">
                <strong>Catatan:</strong> Gunakan tombol <strong>Edit</strong> untuk mengubah data user,
                dan tombol <strong><i class="fas fa-key text-xs"></i> Key</strong> untuk mereset password.
                User <code>admin_hr</code> tidak dapat dihapus.
            </p>
        </div>
    </div>

    {{-- Flash Message --}}
    @if(session('success'))
    <div class="bg-green-50 border border-green-200 rounded-lg p-3 flex items-center gap-2 text-green-700 text-sm">
        <i class="fas fa-check-circle"></i> {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="bg-red-50 border border-red-200 rounded-lg p-3 flex items-center gap-2 text-red-700 text-sm">
        <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
    </div>
    @endif

    {{-- Toolbar --}}
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-between">
        <div class="relative flex-1 max-w-sm">
            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
            <input id="searchInput" type="text" placeholder="Cari username atau division..."
                oninput="filterTable(this.value)"
                class="w-full pl-9 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500/10 transition">
        </div>
        <button onclick="openAdd()"
            class="flex items-center justify-center gap-2 px-5 py-2.5 bg-green-600 hover:bg-green-700 text-white rounded-xl font-semibold text-sm transition shadow-sm whitespace-nowrap">
            <i class="fas fa-user-plus text-sm"></i> Tambah User
        </button>
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                        <th class="px-5 py-3 text-left w-10">No</th>
                        <th class="px-5 py-3 text-left">Username</th>
                        <th class="px-5 py-3 text-left">Division</th>
                        <th class="px-5 py-3 text-left">Role</th>
                        <th class="px-5 py-3 text-left">Dibuat</th>
                        <th class="px-5 py-3 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    @forelse($users as $i => $u)
                    <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors user-row"
                        data-username="{{ strtolower($u->username) }}"
                        data-division="{{ strtolower($u->division ?? '') }}"
                        data-role="{{ strtolower($u->role ?? '') }}">
                        <td class="px-5 py-3.5 text-gray-400 text-sm">{{ $i + 1 }}</td>
                        <td class="px-5 py-3.5">
                            <div class="flex items-center gap-2.5">
                                <div class="w-8 h-8 rounded-full {{ in_array($u->role, ['admin','admin_hr']) ? 'bg-gradient-to-br from-purple-500 to-purple-600' : 'bg-gradient-to-br from-slate-400 to-slate-500' }} flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                                    {{ strtoupper(substr($u->username, 0, 2)) }}
                                </div>
                                <span class="font-semibold text-gray-800 text-sm">{{ $u->username }}</span>
                            </div>
                        </td>
                        <td class="px-5 py-3.5">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
                                {{ $u->division ?? '-' }}
                            </span>
                        </td>
                        <td class="px-5 py-3.5">
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold
                                {{ in_array($u->role, ['admin','admin_hr']) ? 'bg-purple-100 text-purple-700' : 'bg-gray-100 text-gray-600' }}">
                                <i class="fas {{ in_array($u->role, ['admin','admin_hr']) ? 'fa-shield-alt' : 'fa-user' }} text-[10px]"></i>
                                {{ in_array($u->role, ['admin','admin_hr']) ? 'Admin' : 'User' }}
                            </span>
                        </td>
                        <td class="px-5 py-3.5 text-gray-400 text-xs">
                            {{ $u->created_at ? $u->created_at->format('d M Y') : '-' }}
                        </td>
                        <td class="px-5 py-3.5">
                            <div class="flex items-center justify-center gap-1">
                                <button onclick="openEdit({{ $u->id }}, '{{ addslashes($u->username) }}', '{{ addslashes($u->division ?? '') }}', '{{ $u->role }}')"
                                    title="Edit User"
                                    class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button onclick="openChangePwd({{ $u->id }}, '{{ addslashes($u->username) }}')"
                                    title="Reset Password"
                                    class="p-2 text-amber-600 hover:bg-amber-50 rounded-lg transition">
                                    <i class="fas fa-key text-sm"></i>
                                </button>
                                @if($u->username !== 'admin_hr')
                                <form method="POST" action="{{ route('user.destroy', $u->id) }}"
                                    onsubmit="return confirm('Hapus user {{ $u->username }}?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" title="Hapus User"
                                        class="p-2 text-red-500 hover:bg-red-50 rounded-lg transition">
                                        <i class="fas fa-trash text-sm"></i>
                                    </button>
                                </form>
                                @else
                                <span class="p-2 text-gray-200"><i class="fas fa-trash text-sm"></i></span>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-5 py-12 text-center text-gray-400">
                            <i class="fas fa-users-slash text-2xl mb-2 block opacity-40"></i>Tidak ada data user
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="border-t border-gray-100 px-5 py-3 text-xs text-gray-400 flex items-center justify-between">
            <span id="tableInfo">Menampilkan semua {{ $users->count() }} user</span>
            <span>Total: <strong class="text-gray-600">{{ $users->count() }}</strong> user</span>
        </div>
    </div>
</div>

{{-- ===== MODAL TAMBAH/EDIT ===== --}}
<div id="userModal" style="display:none"
    class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden">
        <div id="modalHeader" class="px-6 py-5 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center text-white">
                    <i id="modalIconInner" class="fas fa-user-plus"></i>
                </div>
                <div>
                    <h3 id="modalTitle" class="font-bold text-white text-base">Tambah User</h3>
                    <p id="modalSubtitle" class="text-xs opacity-80 text-white">Buat akun baru untuk user</p>
                </div>
            </div>
            <button onclick="closeModal()" class="p-1.5 hover:bg-white/20 rounded-lg transition">
                <i class="fas fa-times text-white"></i>
            </button>
        </div>

        <form id="userForm" method="POST" action="{{ route('user.store') }}">
            @csrf
            <input type="hidden" name="_method" id="formMethod" value="POST">
            <input type="hidden" name="user_id" id="formUserId" value="">

            <div class="p-6 space-y-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Username <span class="text-red-500">*</span></label>
                    <input id="fUsername" name="username" type="text" placeholder="Masukkan username"
                        class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500/10 transition">
                </div>

                <div id="divisionWrap">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Division <span class="text-red-500">*</span></label>
                    <input id="fDivision" name="division" type="text" list="divisionList" placeholder="Contoh: HR&GA, Accounting"
                        class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500/10 transition">
                    <datalist id="divisionList">
                        <option value="HR&GA">
                        <option value="Accounting">
                        <option value="Security">
                        <option value="Production">
                        <option value="PPIC">
                        <option value="Maintenance">
                        <option value="QC">
                        <option value="Marketing">
                        <option value="Logistik">
                        <option value="OE">
                    </datalist>
                </div>

                <div id="roleSelectWrap">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Role</label>
                    <select id="fRole" name="role"
                        class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500/10 transition">
                        <option value="user">User</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        <span id="passLabelText">Password</span>
                        <span id="passRequired" class="text-red-500"> *</span>
                        <span id="passOptional" class="hidden text-xs text-gray-400 font-normal ml-1">(kosongkan jika tidak ingin mengubah)</span>
                    </label>
                    <div class="relative">
                        <input id="fPassword" name="password" type="password" placeholder="Minimal 6 karakter"
                            class="w-full px-4 py-2.5 pr-11 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500/10 transition">
                        <button type="button" onclick="togglePassVis()" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                            <i class="fas fa-eye text-sm" id="passEyeIcon"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="flex gap-3 px-6 pb-6">
                <button type="button" onclick="closeModal()"
                    class="flex-1 py-2.5 border border-gray-200 text-gray-600 rounded-xl font-semibold text-sm hover:bg-gray-50 transition">
                    Batal
                </button>
                <button type="submit" id="saveBtn"
                    class="flex-1 py-2.5 text-white rounded-xl font-semibold text-sm transition flex items-center justify-center gap-2 bg-gradient-to-r from-green-600 to-emerald-600">
                    <i id="saveBtnIcon" class="fas fa-user-plus text-xs"></i>
                    <span id="saveBtnText">Tambah User</span>
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
// Filter table
function filterTable(q) {
    const lower = q.toLowerCase();
    document.querySelectorAll('.user-row').forEach(row => {
        const match = !lower ||
            row.dataset.username.includes(lower) ||
            row.dataset.division.includes(lower) ||
            row.dataset.role.includes(lower);
        row.style.display = match ? '' : 'none';
    });
    const visible = document.querySelectorAll('.user-row:not([style*="none"])').length;
    const total   = document.querySelectorAll('.user-row').length;
    document.getElementById('tableInfo').textContent =
        lower ? `Menampilkan ${visible} dari ${total} user` : `Menampilkan semua ${total} user`;
}

function openAdd() {
    document.getElementById('formMethod').value   = 'POST';
    document.getElementById('formUserId').value   = '';
    document.getElementById('fUsername').value    = '';
    document.getElementById('fPassword').value    = '';
    document.getElementById('fDivision').value    = '';
    document.getElementById('fRole').value        = 'user';
    document.getElementById('userForm').action    = '{{ route("user.store") }}';
    document.getElementById('modalHeader').className = 'px-6 py-5 flex items-center justify-between bg-gradient-to-r from-green-500 to-emerald-600';
    document.getElementById('modalIconInner').className = 'fas fa-user-plus';
    document.getElementById('modalTitle').textContent   = 'Tambah User Baru';
    document.getElementById('modalSubtitle').textContent = 'Buat akun untuk user baru';
    document.getElementById('saveBtn').className = 'flex-1 py-2.5 text-white rounded-xl font-semibold text-sm transition flex items-center justify-center gap-2 bg-gradient-to-r from-green-600 to-emerald-600';
    document.getElementById('saveBtnIcon').className = 'fas fa-user-plus text-xs';
    document.getElementById('saveBtnText').textContent = 'Tambah User';
    document.getElementById('divisionWrap').style.display   = '';
    document.getElementById('roleSelectWrap').style.display = '';
    document.getElementById('passRequired').classList.remove('hidden');
    document.getElementById('passOptional').classList.add('hidden');
    document.getElementById('passLabelText').textContent = 'Password';
    document.getElementById('userModal').style.display = 'flex';
}

function openEdit(id, username, division, role) {
    document.getElementById('formMethod').value  = 'PUT';
    document.getElementById('formUserId').value  = id;
    document.getElementById('fUsername').value   = username;
    document.getElementById('fDivision').value   = division;
    document.getElementById('fRole').value       = role;
    document.getElementById('userForm').action   = `/user-management/${id}`;  // ✅ id
    document.getElementById('modalHeader').className = 'px-6 py-5 flex items-center justify-between bg-gradient-to-r from-blue-500 to-indigo-600';
    document.getElementById('modalIconInner').className = 'fas fa-user-edit';
    document.getElementById('modalTitle').textContent   = 'Edit User';
    document.getElementById('modalSubtitle').textContent = 'Ubah data user';
    document.getElementById('saveBtn').className = 'flex-1 py-2.5 text-white rounded-xl font-semibold text-sm transition flex items-center justify-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600';
    document.getElementById('saveBtnIcon').className = 'fas fa-save text-xs';
    document.getElementById('saveBtnText').textContent = 'Simpan Perubahan';
    document.getElementById('divisionWrap').style.display   = '';
    document.getElementById('roleSelectWrap').style.display = '';
    document.getElementById('passRequired').classList.add('hidden');
    document.getElementById('passOptional').classList.remove('hidden');
    document.getElementById('passLabelText').textContent = 'Password';
    document.getElementById('userModal').style.display = 'flex';
}

function openChangePwd(id, username) {
    document.getElementById('formMethod').value  = 'PUT';
    document.getElementById('formUserId').value  = id;
    document.getElementById('fUsername').value   = username;
    document.getElementById('fPassword').value   = '';
    document.getElementById('userForm').action   = `/user-management/${id}`;  
    document.getElementById('modalHeader').className = 'px-6 py-5 flex items-center justify-between bg-gradient-to-r from-amber-500 to-orange-500';
    document.getElementById('modalIconInner').className = 'fas fa-key';
    document.getElementById('modalTitle').textContent   = 'Reset Password';
    document.getElementById('modalSubtitle').textContent = 'Ganti password user';
    document.getElementById('saveBtn').className = 'flex-1 py-2.5 text-white rounded-xl font-semibold text-sm transition flex items-center justify-center gap-2 bg-gradient-to-r from-amber-500 to-orange-500';
    document.getElementById('saveBtnIcon').className = 'fas fa-key text-xs';
    document.getElementById('saveBtnText').textContent = 'Ganti Password';
    document.getElementById('divisionWrap').style.display   = 'none';
    document.getElementById('roleSelectWrap').style.display = 'none';
    document.getElementById('passRequired').classList.remove('hidden');
    document.getElementById('passOptional').classList.add('hidden');
    document.getElementById('passLabelText').textContent = 'Password Baru';
    document.getElementById('userModal').style.display = 'flex';
}

function closeModal() {
    document.getElementById('userModal').style.display = 'none';
}

function togglePassVis() {
    const inp = document.getElementById('fPassword');
    const ico = document.getElementById('passEyeIcon');
    if (inp.type === 'password') { inp.type = 'text'; ico.className = 'fas fa-eye-slash text-sm'; }
    else { inp.type = 'password'; ico.className = 'fas fa-eye text-sm'; }
}
</script>
@endpush
@endsection