@extends('layouts.app')
@section('title','User Management')
@section('page-title','User Management')
@section('breadcrumb','SpaceHR/ User Management')
@section('content')
<div class="page-body">
  <div class="page-header animate-entry">
    <div class="page-header-title"><h1>User Management</h1><p>Create, update and manage application user accounts.</p></div>
    <button class="btn btn-primary" onclick="openModal('modal-add-user')"><i class="fas fa-plus"></i> Add User</button>
  </div>
  <div class="panel animate-entry">
    <div class="panel-header"><span class="panel-title"><i class="fas fa-users-cog" style="color:var(--accent-cyan);margin-right:8px"></i>Users</span></div>
    <div class="filter-bar" style="margin-bottom:0">
      <div class="search-bar" style="width:250px"><i class="fas fa-search"></i><input type="text" id="user-search" placeholder="Search by name or email…"></div>
    </div>
    <div id="user-loading" style="text-align:center;padding:40px;color:var(--text-muted)"><i class="fas fa-spinner fa-spin fa-2x"></i><br><br>Loading users…</div>
    <div id="user-table-wrap" style="display:none">
      <table class="data-table"><thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Status</th><th style="text-align:center">Actions</th></tr></thead><tbody id="user-tbody"></tbody></table>
    </div>
    <div id="user-pagination" class="pagination-wrap" style="padding:14px 20px;border-top:1px solid var(--border)"></div>
  </div>
</div>

<div class="modal-overlay" id="modal-add-user">
  <div class="modal" style="max-width:520px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-user-plus" style="color:var(--accent-cyan);margin-right:8px"></i>Add User</span><button class="modal-close" onclick="closeModal('modal-add-user')"><i class="fas fa-times"></i></button></div>
    <div class="modal-body">
      <div class="form-grid">
        <div class="form-group full"><label class="form-label">Name *</label><input class="form-control" id="uf-name"><span class="form-error" id="err-uf-name"></span></div>
        <div class="form-group full"><label class="form-label">Email *</label><input class="form-control" id="uf-email" type="email"><span class="form-error" id="err-uf-email"></span></div>
        <div class="form-group full"><label class="form-label">Role *</label><select class="form-control" id="uf-role"><option value="super_admin">Super Admin</option><option value="hr_manager">HR Manager</option><option value="hr_staff">HR Staff</option><option value="manager">Manager</option><option value="employee">Employee</option></select><span class="form-error" id="err-uf-role"></span></div>
        <div class="form-group full"><label class="form-label">Status *</label><select class="form-control" id="uf-active"><option value="1">Active</option><option value="0">Inactive</option></select></div>
        <div class="form-group full"><label class="form-label">Password *</label><input class="form-control" id="uf-password" type="password" placeholder="Minimum 6 characters"><span class="form-error" id="err-uf-password"></span></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-add-user')">Cancel</button><button class="btn btn-primary" id="btn-save-user" onclick="submitAddUser()"><i class="fas fa-check"></i> Create User</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-edit-user">
  <div class="modal" style="max-width:520px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-user-edit" style="color:var(--accent-amber);margin-right:8px"></i>Edit User</span><button class="modal-close" onclick="closeModal('modal-edit-user')"><i class="fas fa-times"></i></button></div>
    <div class="modal-body">
      <input type="hidden" id="eu-id">
      <div class="form-grid">
        <div class="form-group full"><label class="form-label">Name *</label><input class="form-control" id="eu-name"></div>
        <div class="form-group full"><label class="form-label">Email *</label><input class="form-control" id="eu-email" type="email"></div>
        <div class="form-group full"><label class="form-label">Role *</label><select class="form-control" id="eu-role"><option value="super_admin">Super Admin</option><option value="hr_manager">HR Manager</option><option value="hr_staff">HR Staff</option><option value="manager">Manager</option><option value="employee">Employee</option></select></div>
        <div class="form-group full"><label class="form-label">Status *</label><select class="form-control" id="eu-active"><option value="1">Active</option><option value="0">Inactive</option></select></div>
        <div class="form-group full"><label class="form-label">Password</label><input class="form-control" id="eu-password" type="password" placeholder="Leave blank to keep current"></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-edit-user')">Cancel</button><button class="btn btn-primary" onclick="submitEditUser()"><i class="fas fa-save"></i> Save</button></div>
  </div>
</div>
@endsection
@push('scripts')
<script>
let userPage = 1;
let usersById = {};
const roleLabel = role => (role || '—').replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
const escapeHtml = value => $('<div>').text(value ?? '').html();
$(document).ready(function() {
  loadUsers();
  let timer;
  $('#user-search').on('input', function() {
    clearTimeout(timer);
    timer = setTimeout(() => { userPage = 1; loadUsers(); }, 300);
  });
});
function loadUsers() {
  $('#user-loading').show(); $('#user-table-wrap').hide();
  $.get('/users/list', { search: $('#user-search').val(), page: userPage }, function(res) {
    const d = res.data || {};
    const tbody = $('#user-tbody').empty();
    usersById = {};
    if (!d.data?.length) {
      tbody.html('<tr><td colspan="5" style="text-align:center;padding:40px;color:var(--text-muted)"><i class="fas fa-user-slash fa-2x"></i><br><br>No users found.</td></tr>');
    } else {
      d.data.forEach(u => {
        usersById[u.id] = u;
        tbody.append(`<tr>
        <td>${escapeHtml(u.name)}</td>
        <td>${escapeHtml(u.email)}</td>
        <td>${escapeHtml(roleLabel(u.role))}</td>
        <td>${u.is_active ? '<span class="badge badge-approved">Active</span>' : '<span class="badge badge-inactive">Inactive</span>'}</td>
        <td style="text-align:center"><div style="display:flex;gap:6px;justify-content:center"><button class="btn btn-secondary btn-sm" onclick="openEditUser(${u.id})"><i class="fas fa-edit"></i></button><button class="btn btn-danger btn-sm" onclick="deleteUser(${u.id})"><i class="fas fa-trash"></i></button></div></td>
      </tr>`);
      });
    }
    $('#user-loading').hide(); $('#user-table-wrap').show();
    renderPagination(d, 'user-pagination', `function(p){userPage=p;loadUsers()}`);
  }).fail(() => $('#user-loading').html('<i class="fas fa-exclamation-triangle" style="color:var(--accent-rose)"></i> Error loading users.'));
}
function submitAddUser() {
  const data = { name: $('#uf-name').val().trim(), email: $('#uf-email').val().trim(), role: $('#uf-role').val(), password: $('#uf-password').val(), is_active: $('#uf-active').val() };
  $('#err-uf-name,#err-uf-email,#err-uf-role,#err-uf-password').text('');
  if (!data.name) $('#err-uf-name').text('Required');
  if (!data.email) $('#err-uf-email').text('Required');
  if (!data.role) $('#err-uf-role').text('Required');
  if (!data.password) $('#err-uf-password').text('Required');
  if (data.password && data.password.length < 6) $('#err-uf-password').text('Minimum 6 characters');
  if ($('.form-error:contains("Required"), .form-error:contains("Minimum")').length) return;
  $('#btn-save-user').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving…');
  $.post('/users', data, function() { showToast('User created!','success'); closeModal('modal-add-user'); loadUsers(); $('#uf-name,#uf-email,#uf-password').val(''); $('#uf-role').val('employee'); $('#uf-active').val('1'); })
    .fail(xhr => showToast(xhr.responseJSON?.message || 'Error creating user','error'))
    .always(() => $('#btn-save-user').prop('disabled', false).html('<i class="fas fa-check"></i> Create User'));
}
function openEditUser(id) {
  const u = usersById[id];
  if (!u) return showToast('User record not found. Refresh and try again.','error');
  $('#eu-id').val(id); $('#eu-name').val(u.name); $('#eu-email').val(u.email); $('#eu-role').val(u.role); $('#eu-active').val(u.is_active ? '1' : '0'); $('#eu-password').val('');
  openModal('modal-edit-user');
}
function submitEditUser() {
  const id = $('#eu-id').val();
  const data = { name: $('#eu-name').val().trim(), email: $('#eu-email').val().trim(), role: $('#eu-role').val(), password: $('#eu-password').val(), is_active: $('#eu-active').val() };
  $.ajax({ url: `/users/${id}`, type: 'PUT', data, success(){ showToast('User updated','success'); closeModal('modal-edit-user'); loadUsers(); },
    error(xhr){ showToast(xhr.responseJSON?.message || 'Error updating user','error'); } });
}
function deleteUser(id) {
  const name = usersById[id]?.name || 'this user';
  if (!confirm(`Delete user ${name}?`)) return;
  $.ajax({ url: `/users/${id}`, type: 'DELETE', success(){ showToast('User deleted','success'); loadUsers(); }, error(xhr){ showToast(xhr.responseJSON?.message || 'Error deleting user','error'); } });
}
</script>
@endpush