@extends('layouts.app')
@section('title', 'User Management')
@section('content')
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div><h1 class="text-lg font-bold text-gray-900">User Management</h1><p class="text-xs text-gray-400">Create, edit, activate/deactivate users</p></div>
    {{-- Add User routes through the unified People form. The
         in-page modal still exists below for legacy bookmarks, but
         the primary entry point is now the consolidated form so
         personal info is only typed once. For a back-office user
         who doesn't need a payroll record, the form picks
         "System User Only". --}}
    <a href="{{ route('people.create', ['type' => 'system_user']) }}" class="btn-primary text-xs flex items-center gap-1"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> Add User</a>
</div>

<div class="bg-white rounded-xl border shadow-sm">
    <div class="px-5 py-3 border-b bg-gray-50/50">
        <form method="GET" class="flex flex-wrap gap-2 items-end">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Name, email, phone…" class="form-input text-xs w-48">
            <select name="status" class="form-input text-xs w-28"><option value="">All Status</option><option value="active" {{ request('status')==='active'?'selected':'' }}>Active</option><option value="inactive" {{ request('status')==='inactive'?'selected':'' }}>Inactive</option></select>
            <select name="department_id" class="form-input text-xs w-36"><option value="">All Depts</option>@include('partials._department-options', ['selected' => request('department_id')])</select>
            <button class="btn-primary text-xs">Filter</button>
            @if(request()->hasAny(['search','status','department_id']))<a href="{{ route('admin.users') }}" class="btn-secondary text-xs">Clear</a>@endif
        </form>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full"><thead><tr class="bg-gray-50">
            <th class="table-header">Name</th><th class="table-header">Email</th><th class="table-header">Phone</th><th class="table-header">Role</th><th class="table-header">Department</th><th class="table-header">Status</th><th class="table-header">Last Login</th><th class="table-header">Actions</th>
        </tr></thead>
        <tbody>
        @forelse($users as $u)
        <tr class="border-b border-gray-50 {{ !$u->is_active ? 'bg-gray-50/50 opacity-60' : '' }}">
            <td class="table-cell text-xs font-medium">{{ $u->name }}</td>
            <td class="table-cell text-xs text-gray-500">{{ $u->email }}</td>
            <td class="table-cell text-xs">{{ $u->phone ?? '-' }}</td>
            <td class="table-cell text-xs"><span class="badge badge-info">{{ $u->roles->first()->name ?? '-' }}</span></td>
            <td class="table-cell text-xs">{{ $u->department->name ?? '-' }}</td>
            <td class="table-cell">@if($u->is_active)<span class="badge badge-success">Active</span>@else<span class="badge badge-gray">Inactive</span>@endif</td>
            <td class="table-cell text-xs text-gray-400">{{ $u->last_login_at ? \Carbon\Carbon::parse($u->last_login_at)->format('d M H:i') : '-' }}</td>
            <td class="table-cell">
                <div class="flex gap-1">
                    <button onclick="editUser({{ json_encode($u) }})" class="text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded hover:bg-blue-100">Edit</button>
                    <form method="POST" action="{{ route('admin.users.reset-password', $u) }}" class="inline" onsubmit="return confirm('Reset password?')">@csrf<button class="text-xs text-amber-600 bg-amber-50 px-2 py-0.5 rounded hover:bg-amber-100">Reset Pwd</button></form>
                    <form method="POST" action="{{ route('admin.users.toggle', $u) }}" class="inline">@csrf<button class="text-xs {{ $u->is_active ? 'text-red-600 bg-red-50 hover:bg-red-100' : 'text-green-600 bg-green-50 hover:bg-green-100' }} px-2 py-0.5 rounded">{{ $u->is_active ? 'Deactivate' : 'Activate' }}</button></form>
                </div>
            </td>
        </tr>
        @empty
        <tr><td colspan="8" class="table-cell text-center text-gray-400 py-8">No users.</td></tr>
        @endforelse
        </tbody></table>
    </div>
    @if($users->hasPages())<div class="px-4 py-3 border-t">{{ $users->links() }}</div>@endif
</div>

{{-- Add User Modal --}}
<div id="addUserModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl mx-4 p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4"><h3 class="font-bold">Add User</h3><button onclick="document.getElementById('addUserModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button></div>
        <form method="POST" action="{{ route('admin.users.store') }}">@csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div><label class="form-label">Full Name *</label><input type="text" name="name" required class="form-input"></div>
                <div><label class="form-label">Username *</label><input type="text" name="username" required class="form-input" placeholder="e.g. jmuthoni"></div>
                <div><label class="form-label">Email *</label><input type="email" name="email" required class="form-input"></div>
                <div><label class="form-label">Phone</label><input type="text" name="phone" class="form-input"></div>
                <div><label class="form-label">Role *</label><select name="role" id="addUserRole" required class="form-input" onchange="showRolePermissions(this.value, 'addPermissionsBox')"><option value="">Select Role</option>@foreach($roles as $r)<option value="{{ $r->name }}">{{ $r->name }}</option>@endforeach</select></div>
                <div><label class="form-label">Department</label><select name="department_id" class="form-input"><option value="">|</option>@include('partials._department-options')</select></div>
                <div><label class="form-label">Designation</label><input type="text" name="designation" class="form-input"></div>
                <div><label class="form-label">Password *</label><input type="text" name="password" required class="form-input" value="{{ 'Clara' . rand(1000,9999) }}"></div>
                <div class="md:col-span-2" id="addPermissionsBox" style="display:none;">
                    <label class="form-label">Permissions for this role</label>
                    <div class="bg-gray-50 rounded-lg border p-3 max-h-48 overflow-y-auto">
                        <div id="addPermissionsList" class="flex flex-wrap gap-1"></div>
                    </div>
                    <p class="text-xs text-gray-400 mt-1">Permissions are inherited from the selected role. Manage them in Roles & Permissions.</p>
                </div>
            </div>
            <div class="flex justify-end gap-2 mt-4"><button type="button" onclick="document.getElementById('addUserModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button><button type="submit" class="btn-primary text-xs">Create User</button></div>
        </form>
    </div>
</div>

{{-- Edit User Modal --}}
<div id="editUserModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl mx-4 p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4"><h3 class="font-bold">Edit User</h3><button onclick="document.getElementById('editUserModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button></div>
        <form method="POST" id="editUserForm">@csrf @method('PUT')
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div><label class="form-label">Full Name *</label><input type="text" name="name" id="eu_name" required class="form-input"></div>
                <div><label class="form-label">Username</label><input type="text" name="username" id="eu_username" class="form-input"></div>
                <div><label class="form-label">Email *</label><input type="email" name="email" id="eu_email" required class="form-input"></div>
                <div><label class="form-label">Phone</label><input type="text" name="phone" id="eu_phone" class="form-input"></div>
                <div><label class="form-label">Role</label><select name="role" id="eu_role" class="form-input" onchange="showRolePermissions(this.value, 'editPermissionsBox')">@foreach($roles as $r)<option value="{{ $r->name }}">{{ $r->name }}</option>@endforeach</select></div>
                <div><label class="form-label">Department</label><select name="department_id" id="eu_dept" class="form-input"><option value="">|</option>@include('partials._department-options')</select></div>
                <div><label class="form-label">Designation</label><input type="text" name="designation" id="eu_desig" class="form-input"></div>
                <div><label class="form-label">New Password (leave blank to keep)</label><input type="text" name="password" class="form-input" placeholder="Leave blank to keep current"></div>
                <div class="md:col-span-2" id="editPermissionsBox" style="display:none;">
                    <label class="form-label">Permissions for this role</label>
                    <div class="bg-gray-50 rounded-lg border p-3 max-h-48 overflow-y-auto">
                        <div id="editPermissionsList" class="flex flex-wrap gap-1"></div>
                    </div>
                    <p class="text-xs text-gray-400 mt-1">Permissions are inherited from the selected role. Manage them in Roles & Permissions.</p>
                </div>
            </div>
            <div class="flex justify-end gap-2 mt-4"><button type="button" onclick="document.getElementById('editUserModal').classList.add('hidden')" class="btn-secondary text-xs">Cancel</button><button type="submit" class="btn-primary text-xs">Save Changes</button></div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
@php
    $rolePermsMap = $roles->mapWithKeys(function($r) {
        return [$r->name => $r->permissions->pluck('name')];
    })->toArray();
@endphp
<script>
const rolePermissions = @json($rolePermsMap);

function showRolePermissions(roleName, boxId) {
    const box = document.getElementById(boxId);
    const listId = boxId === 'addPermissionsBox' ? 'addPermissionsList' : 'editPermissionsList';
    const list = document.getElementById(listId);
    if (!roleName || !rolePermissions[roleName] || rolePermissions[roleName].length === 0) {
        box.style.display = 'none'; list.innerHTML = ''; return;
    }
    list.innerHTML = rolePermissions[roleName].map(p =>
        `<span class="inline-block bg-sky-50 text-sky-700 border border-sky-200 text-xs px-2 py-0.5 rounded-full">${p}</span>`
    ).join('');
    box.style.display = 'block';
}

function editUser(u) {
    document.getElementById('editUserForm').action = `${window.HMIS_BASE}/admin/users/${u.id}`;
    document.getElementById('eu_name').value = u.name;
    document.getElementById('eu_username').value = u.username || '';
    document.getElementById('eu_email').value = u.email;
    document.getElementById('eu_phone').value = u.phone || '';
    document.getElementById('eu_dept').value = u.department_id || '';
    document.getElementById('eu_desig').value = u.designation || '';
    if (u.roles && u.roles.length) {
        document.getElementById('eu_role').value = u.roles[0].name;
        showRolePermissions(u.roles[0].name, 'editPermissionsBox');
    }
    document.getElementById('editUserModal').classList.remove('hidden');
}
</script>
@endsection