@extends('layouts/contentNavbarLayout')

@php
    $container = 'container-xxl';
    $sortedUsers = $users
        ->sortBy(function ($user) {
            return strtolower($user->name ?? '');
        })
        ->values();

    $roleOptions = [
        ['value' => 'admin', 'label' => 'Admin'],
        ['value' => 'faculty', 'label' => 'Faculty'],
        ['value' => 'student', 'label' => 'Student'],
    ];

    $departmentOptions = $sortedUsers
        ->pluck('department')
        ->filter(function ($department) {
            return trim($department ?? '') !== '';
        })
        ->unique()
        ->sort()
        ->values();

    $jobTitleOptions = $sortedUsers
        ->pluck('job_title')
        ->filter(function ($jobTitle) {
            return trim($jobTitle ?? '') !== '';
        })
        ->unique()
        ->sort()
        ->values();

    $statusOptions = [
        'active' => 'Active',
        'inactive' => 'Inactive',
    ];
@endphp

@section('title', 'User Management - Users')

@section('page-style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        :root {
            --um-purple: #5c297c;
            --um-yellow: #ffb736;
            --dm-pill-max: clamp(5.5rem, 16vw, 10rem);
            --dm-cell-max: clamp(8.5rem, 22vw, 13.5rem);
            --dm-stack-max: clamp(10.5rem, 28vw, 18rem);
        }

        .container-fluid {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            max-width: 100%;
        }

        .layout-page .content-wrapper > .container-xxl.container-p-y {
            padding-top: 1.5rem !important;
            padding-bottom: 1.5rem !important;
        }

        .layout-page .content-wrapper > .container-xxl.container-p-y > .container-fluid {
            padding-left: 0;
            padding-right: 0;
        }

        .user-card {
            background-color: var(--bs-card-bg);
            border: var(--bs-card-border-width) solid var(--bs-card-border-color);
            border-radius: var(--bs-card-border-radius);
            box-shadow: var(--bs-card-box-shadow, 0 2px 6px rgba(67, 89, 113, 0.12));
        }

        .user-action-card {
            background-color: var(--um-yellow);
            color: var(--um-purple);
        }

        .user-action-card .card-title {
            color: var(--um-purple);
        }

        .user-action-card .card-title i {
            color: var(--um-purple);
        }

        .user-action-card p,
        .user-action-card .text-muted {
            color: #ffffff !important;
        }

        .user-action-card .btn-user-action {
            background-color: #5c297c;
            color: #ffb736;
            border: none;
            font-weight: 600;
            transition: background-color 0.2s ease, color 0.2s ease;
            border-radius: 0.65rem;
        }

        .user-action-card .btn-user-action i {
            color: #ffb736;
        }

        .user-action-card .btn-user-action:hover,
        .user-action-card .btn-user-action:focus {
            background-color: #4b2266;
            color: #ffb736;
        }

        .user-action-card .btn-user-action,
        .user-action-card .btn-user-action:hover,
        .user-action-card .btn-user-action:focus {
            transform: none;
            box-shadow: none;
        }

        .user-card--table {
            border-radius: var(--bs-card-border-radius);
            padding: 0;
        }

        .evaluation-card {
            background-color: var(--bs-card-bg);
            border: var(--bs-card-border-width) solid var(--bs-card-border-color);
            border-radius: var(--bs-card-border-radius);
            box-shadow: var(--bs-card-box-shadow, 0 2px 6px rgba(67, 89, 113, 0.12));
        }

        .evaluation-card--table {
            border-radius: var(--bs-card-border-radius);
            padding: 0;
        }

        .evaluation-card--table .card-body {
            padding: var(--bs-card-spacer-y, 1.5rem) var(--bs-card-spacer-x, 1.5rem);
        }

        .evaluation-card--table .card-body.pt-0 {
            padding-top: 0 !important;
        }

        .evaluation-card--table .card-body.border-0,
        .evaluation-card--table .card-body.pt-0,
        .evaluation-card--table .card-body.pb-0 {
            padding-left: var(--bs-card-spacer-x, 1.5rem) !important;
            padding-right: var(--bs-card-spacer-x, 1.5rem) !important;
        }

        .evaluation-controls label {
            font-size: 0.75rem;
            letter-spacing: 0.08em;
            color: #64748b;
        }

        .table-filter-dropdown {
            position: relative;
        }

        .table-filter-dropdown .filter-toggle {
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            padding: 0 0.75rem;
            background-color: #ffffff;
            font-weight: 600;
            font-size: 0.95rem;
            color: #0f172a;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            line-height: 1.2;
            min-height: calc(2.25rem + 2px);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .table-filter-dropdown .filter-toggle i {
            color: #94a3b8;
            font-size: 1rem;
        }

        .table-filter-dropdown .filter-toggle:focus-visible,
        .table-filter-dropdown .filter-toggle:focus {
            outline: none;
            border-color: #4f46e5;
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
        }

        .table-filter-dropdown .filter-toggle.is-active {
            border-color: #5c297c;
            color: #5c297c;
        }

        .table-filter-dropdown .dropdown-menu {
            min-width: 280px;
            border-radius: 0.75rem;
            border: 1px solid #e2e8f0;
            box-shadow: 0 10px 35px rgba(15, 23, 42, 0.1);
        }

        .table-filter-dropdown label {
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            color: #94a3b8;
        }

        .table-filter-dropdown .form-select {
            border-radius: 0.6rem;
        }

        .table-filter-reset {
            font-size: 0.8rem;
            font-weight: 600;
            color: #5c297c;
        }

        .evaluation-search-wrapper {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background-color: #ffffff;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            min-height: calc(2.25rem + 2px);
            padding: 0 0.75rem;
            max-width: 340px;
            width: 100%;
            transition: border-color 0.2s ease;
        }

        .evaluation-search-wrapper:focus-within {
            border-color: #4f46e5;
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
        }

        .evaluation-search-icon {
            color: #94a3b8;
            font-size: 1.1rem;
        }

        .evaluation-search-input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 0.95rem;
            background: transparent;
            height: 100%;
            padding-top: 0;
            padding-bottom: 0;
        }

        .evaluation-search-input::placeholder {
            color: #9ca3af;
        }

        .evaluation-search-clear {
            border: none;
            background: transparent;
            color: #94a3b8;
            font-size: 1.2rem;
            line-height: 1;
            padding: 0;
            cursor: pointer;
            display: none;
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 999px;
            align-items: center;
            justify-content: center;
        }

        .evaluation-search-clear.is-visible {
            display: inline-flex;
        }

        .evaluation-search-clear:hover {
            color: #1f2937;
            background-color: rgba(148, 163, 184, 0.15);
        }

        .table-text-truncate {
            display: inline-block;
            vertical-align: middle;
            min-width: 0;
            max-width: var(--dm-cell-max);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .table-text-truncate.is-wide {
            max-width: var(--dm-stack-max);
        }

        .table-cell-stack {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            min-width: 0;
            max-width: var(--dm-stack-max);
            align-items: flex-start;
        }

        .table-cell-stack > * {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }

        .evaluation-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            table-layout: auto;
        }

        .evaluation-table thead th {
            font-size: 0.7rem;
            letter-spacing: 0.08em;
            font-weight: 600;
            color: #94a3b8;
            border-bottom: 1px solid #eef2f6;
            padding: 0.85rem 0.75rem 0.7rem;
            background-color: #ffffff;
            vertical-align: middle;
            text-align: left;
            line-height: 1.2;
        }

        .evaluation-table thead th:first-child,
        .evaluation-table tbody td:first-child {
            width: 48px;
            white-space: normal;
        }

        .evaluation-table thead th.sortable {
            cursor: pointer;
            user-select: none;
        }

        .evaluation-sort-wrapper {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        .evaluation-table thead th.sortable.text-center .evaluation-sort-wrapper {
            justify-content: center;
        }

        .evaluation-table thead th.sortable:not(.text-center) .evaluation-sort-wrapper {
            justify-content: flex-start;
        }

        .evaluation-sort-indicator {
            display: none;
            align-items: center;
            justify-content: center;
            width: 12px;
            color: #94a3b8;
            font-size: 0.65rem;
        }

        .evaluation-sort-indicator i {
            display: none;
        }

        .evaluation-table thead th.sorted-asc .evaluation-sort-indicator,
        .evaluation-table thead th.sorted-desc .evaluation-sort-indicator {
            display: inline-flex;
            color: #1d4ed8;
        }

        .evaluation-table thead th.sorted-asc .evaluation-sort-indicator .icon-up,
        .evaluation-table thead th.sorted-desc .evaluation-sort-indicator .icon-down {
            display: inline-flex;
        }

        .evaluation-table tbody tr {
            border-bottom: 1px solid #f1f5f9;
            transition: background-color 0.2s ease, box-shadow 0.2s ease;
        }

        .evaluation-table tbody tr:hover {
            background-color: #f8fafc;
        }

        .evaluation-table tbody tr.is-selected {
            background-color: #eef2ff;
            box-shadow: inset 0 0 0 1px #c7d2fe;
        }

        .evaluation-table tbody td {
            padding: 1rem 0.75rem;
            color: #1f2937;
            font-size: 0.85rem;
            vertical-align: middle;
            text-align: left;
        }

        .evaluation-table tbody td.evaluation-pill-cell,
        .evaluation-table tbody td.actions-cell {
            text-align: left;
        }

        .evaluation-pill,
        .evaluation-count-pill {
            display: inline-block;
            padding: 0.25rem 0.85rem;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 600;
            background-color: var(--pill-bg, #e2e8f0);
            color: var(--pill-color, #475569);
            max-width: var(--dm-pill-max);
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .evaluation-count-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2rem;
        }

        .evaluation-col-selection {
            width: 48px;
            text-align: center;
        }

        .evaluation-checkbox {
            width: 1.05rem;
            height: 1.05rem;
            border-radius: 6px;
            border: 1px solid #cbd5e1;
            cursor: pointer;
        }

        .evaluation-checkbox:checked {
            background-color: #4f46e5;
            border-color: #4f46e5;
        }

        .btn-delete-action {
            background-color: #dc3545;
            border-color: #dc3545;
            color: #ffffff;
        }

        .btn-delete-action:hover,
        .btn-delete-action:focus {
            background-color: #b92c39;
            border-color: #b92c39;
            color: #ffffff;
        }

        .modal-content.evaluation-card {
            background-color: #ffffff;
            border-radius: 0.75rem;
            border: var(--bs-card-border-width) solid var(--bs-card-border-color);
            box-shadow: var(--bs-card-box-shadow, 0 2px 6px rgba(67, 89, 113, 0.12));
            overflow: visible;
        }

        .evaluation-modal-header {
            background-color: #f5f7fb;
            border-bottom: 1px solid #e2e8f0;
            padding: 1rem 1.5rem;
        }

        .evaluation-modal-body {
            padding: 1.5rem;
        }

        .evaluation-modal-footer {
            border-top: none;
            justify-content: flex-end;
            gap: 1rem;
            padding: 1rem 1.5rem;
        }

        .evaluation-modal-close {
            position: absolute;
            right: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #475569;
            font-size: 1.35rem;
            line-height: 1;
            padding: 0;
        }

        .evaluation-modal-close:focus {
            outline: none;
            box-shadow: none;
        }

        .evaluation-modal-dialog--narrow {
            max-width: 42%;
        }

        @media (max-width: 992px) {
            .evaluation-modal-dialog--narrow {
                max-width: 60%;
            }
        }

        .evaluation-bulk-bar {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: 24px;
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            background-color: #ffffff;
            color: #1f2937;
            padding: 0.85rem 1.5rem;
            border-radius: 999px;
            box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
            border: 1px solid #e2e8f0;
            z-index: 1040;
        }

        .evaluation-bulk-bar.d-none {
            display: none !important;
        }

        .evaluation-bulk-btn {
            border: none;
            background: transparent;
            color: inherit;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 600;
        }

        .evaluation-bulk-btn--danger {
            background-color: rgba(220, 38, 38, 0.08);
            color: #dc2626 !important;
            border: 1px solid rgba(220, 38, 38, 0.25);
        }

        .evaluation-bulk-btn--danger i {
            color: #dc2626 !important;
        }

        .evaluation-bulk-close {
            border: none;
            background: transparent;
            color: #475569;
            font-size: 1.2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            cursor: pointer;
        }

        .evaluation-status {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.35rem 0.75rem;
            font-weight: 600;
            font-size: 0.75rem;
        }

        .evaluation-status--active {
            background-color: #dcfce7;
            color: #166534;
        }

        .evaluation-status--inactive {
            background-color: #fee2e2;
            color: #991b1b;
        }

        div[data-table-id="usersTable"] [data-table-info] {
            font-size: 0.875rem;
            color: #6b7280;
        }

        div[data-table-id="usersTable"] .pagination .page-link {
            border: none;
            border-radius: 0.5rem;
            padding: 0.5rem 0.9rem;
            margin: 0 0.1rem;
            color: #64748b;
            background-color: #e2e8f0;
            font-weight: 600;
            transition: background-color 0.15s ease;
            box-shadow: none;
        }

        div[data-table-id="usersTable"] .pagination .page-link:hover:not(.disabled) {
            background-color: #cbd5e1;
            color: #475569;
        }

        div[data-table-id="usersTable"] .pagination .page-item.active .page-link {
            background-color: #5c297c;
            color: #ffffff;
        }

        div[data-table-id="usersTable"] .pagination .page-item.active .page-link:hover {
            background-color: #4b2266;
            color: #ffffff;
        }

        div[data-table-id="usersTable"] .pagination .page-link span {
            color: inherit;
        }

        div[data-table-id="usersTable"] .pagination .page-item.disabled .page-link {
            background-color: #e2e8f0;
            color: #94a3b8;
        }

        .evaluation-icon-btn {
            border: none;
            background-color: #f8fafc;
            color: #475569;
            border-radius: 0.75rem;
            width: 2.25rem;
            height: 2.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .evaluation-icon-btn:hover {
            background-color: #e2e8f0;
            color: #1f2937;
        }

        .evaluation-actions .dropdown-menu {
            border-radius: 0.75rem;
            border: 1px solid #e2e8f0;
            box-shadow: 0 15px 30px rgba(15, 23, 42, 0.15);
            min-width: 180px;
        }

        .evaluation-col-selection {
            width: 48px;
            text-align: center;
        }

        .evaluation-checkbox {
            width: 1.05rem;
            height: 1.05rem;
            border-radius: 6px;
            border: 1px solid #cbd5e1;
            cursor: pointer;
        }

        .evaluation-checkbox:checked {
            background-color: #4f46e5;
            border-color: #4f46e5;
        }

        .evaluation-status {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.35rem 0.75rem;
            font-weight: 600;
            font-size: 0.75rem;
        }

        .evaluation-status--active {
            background-color: #dcfce7;
            color: #166534;
        }

        .evaluation-status--inactive {
            background-color: #fee2e2;
            color: #991b1b;
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 1.5rem 0;
            color: #64748b;
        }

        .empty-state h5 {
            font-weight: 600;
            color: #111827;
            margin-bottom: 0;
        }

        .empty-state p {
            color: #6b7280;
            margin-bottom: 0;
        }

        .searchable-dropdown {
            position: relative;
        }

        .searchable-dropdown-toggle {
            border: 1px solid #d9dee3;
            border-radius: 0.6rem;
            padding: 0.6rem 0.85rem;
            background-color: #ffffff;
            width: 100%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            font-weight: 600;
            color: #0f172a;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .searchable-dropdown-toggle:hover,
        .searchable-dropdown-toggle:focus,
        .searchable-dropdown-toggle:active,
        .searchable-dropdown.show .searchable-dropdown-toggle {
            border-color: #94a3b8;
            box-shadow: none;
            color: #1e293b;
        }

        .searchable-dropdown-toggle:focus {
            outline: none;
            box-shadow: none;
        }

        .searchable-dropdown-toggle i {
            font-size: 1.25rem;
            color: #94a3b8;
        }

        .searchable-dropdown-label {
            flex: 1;
            text-align: left;
            color: #0f172a;
        }

        .searchable-dropdown-label.is-placeholder {
            color: #94a3b8;
            font-weight: 500;
        }

        .searchable-dropdown .dropdown-menu {
            width: 100%;
            max-height: 320px;
            overflow: hidden;
            padding: 0.75rem;
            border-radius: 0.9rem;
            border: 1px solid #e2e8f0;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.15);
        }

        .searchable-dropdown-list {
            max-height: 220px;
            overflow-y: auto;
            margin-top: 0.5rem;
            border-radius: 0.75rem;
            padding-right: 0.25rem;
        }

        .searchable-dropdown-list--grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.45rem 0.65rem;
        }

        .searchable-dropdown .dropdown-item {
            border-radius: 0.45rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.15rem;
            font-weight: 500;
            color: #111827;
            width: 100%;
            padding: 0.6rem 0.75rem;
            background-color: #ffffff;
            border: 1px solid transparent;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
            min-height: 3.25rem;
        }

        .searchable-dropdown .dropdown-item:hover,
        .searchable-dropdown .dropdown-item:focus {
            background-color: #f8fafc;
            border-color: #e2e8f0;
            color: #111827;
        }

        .searchable-dropdown .dropdown-item span,
        .searchable-dropdown .dropdown-item small {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .searchable-dropdown .dropdown-item small {
            color: #94a3b8;
            font-weight: 400;
            font-size: 0.8rem;
        }

        .searchable-dropdown-search {
            border-radius: 0.65rem;
            padding: 0.55rem 0.75rem;
            border: 1px solid #e2e8f0;
        }

        .user-modal-card {
            background-color: #ffffff;
            border-radius: 0.75rem;
            border: var(--bs-card-border-width) solid var(--bs-card-border-color);
            box-shadow: var(--bs-card-box-shadow, 0 2px 6px rgba(67, 89, 113, 0.12));
            overflow: visible;
        }

        .user-modal-header {
            background-color: #f5f7fb;
            border-bottom: 1px solid #e2e8f0;
            padding: 1rem 1.5rem;
        }

        .user-modal-body {
            padding: 1.5rem;
        }

        .user-modal-close {
            position: absolute;
            right: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #475569;
            font-size: 1.35rem;
            line-height: 1;
            padding: 0;
        }

        .user-modal-close:focus {
            outline: none;
            box-shadow: none;
        }

        .user-modal-footer {
            border-top: none;
            justify-content: flex-end;
            gap: 1rem;
            padding: 1rem 1.5rem;
        }

        .user-modal-footer .btn {
            min-width: 120px;
        }

        .user-modal-body .form-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #475569;
            letter-spacing: normal;
        }

        .user-modal-body .form-select,
        .user-modal-body .form-control {
            border-radius: 0.6rem;
            padding: 0.6rem 0.85rem;
        }

        .user-modal-dialog--narrow {
            max-width: 42%;
        }

        @media (max-width: 992px) {
            .user-modal-dialog--narrow {
                max-width: 60%;
            }
        }

        .btn-user-primary {
            background-color: #5c297c;
            border-color: #5c297c;
            color: #ffffff;
            border-radius: 0.65rem;
        }

        .btn-user-primary:hover,
        .btn-user-primary:focus {
            background-color: #4b2266;
            border-color: #4b2266;
            color: #ffffff;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            padding: 0.55rem 1.4rem;
            font-weight: 600;
            font-size: 0.9rem;
            transition: none;
            box-shadow: none;
        }

        .btn:hover,
        .btn:focus,
        .btn:active {
            transform: none !important;
            box-shadow: none !important;
        }

        .btn.btn-tertiary {
            background: transparent;
            border: none;
            color: #64748b;
            padding: 0.55rem 1.2rem;
        }

        .btn.btn-tertiary:hover,
        .btn.btn-tertiary:focus,
        .btn.btn-tertiary:active {
            background: transparent;
            color: #64748b;
            box-shadow: none;
        }

        .user-modal-btn,
        .user-modal-btn:hover,
        .user-modal-btn:focus {
            transform: none;
            box-shadow: none;
            transition: none;
        }

        .user-modal-footer .btn-tertiary,
        .user-modal-footer .btn-tertiary:focus,
        .user-modal-footer .btn-tertiary:active {
            background-color: transparent;
            color: #475569;
            border: 1px solid transparent;
            box-shadow: none;
        }

        @media (max-width: 992px) {
            .evaluation-table {
                border-spacing: 0 0.5rem;
            }

            .evaluation-table tbody td {
                white-space: nowrap;
            }

            .evaluation-search-wrapper {
                width: 100%;
            }
        }
    </style>
@endsection

@section('content')
    @php
        $flashSuccess = session('success');
        $flashError = session('error');
        $pageToasts = [];
        if ($flashSuccess) {
            $pageToasts[] = ['type' => 'success', 'message' => $flashSuccess];
        }
        if ($flashError) {
            $pageToasts[] = ['type' => 'danger', 'message' => $flashError];
        }
    @endphp
    @include('components.dm-toast', ['messages' => $pageToasts])

    <div class="container-fluid">
        <div class="card user-card user-action-card mb-4">
            <div class="card-body d-flex flex-column flex-lg-row align-items-center justify-content-between gap-3">
                <div class="text-center text-lg-start">
                    <h5 class="card-title mb-1 d-flex align-items-center gap-2 justify-content-center justify-content-lg-start" style="font-size: 1.2rem;">
                        <i class="fa-solid fa-users-gear" style="font-size: 1.5rem;"></i>
                        User Actions
                    </h5>
                    <p class="mb-0">Use these quick actions to add new users or invite them to the platform.</p>
                </div>
                <div class="d-flex align-items-center gap-3 flex-wrap justify-content-center">
                    <button type="button" class="btn btn-user-action" data-bs-toggle="modal" data-bs-target="#addUserModal">
                        <i class="fa-solid fa-user-plus me-2"></i>
                        Add User
                    </button>
                </div>
            </div>
        </div>

        <div class="card evaluation-card evaluation-card--table" data-table-controller data-table-id="usersTable">
            <div class="card-body border-0 evaluation-controls">
                <div class="row g-3 align-items-center">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center gap-2 flex-wrap user-controls-stack">
                            <label for="userRowsPerPage" class="text-muted small">Lines per page</label>
                            <select id="userRowsPerPage" class="form-select evaluation-page-size fw-bold" style="width: auto;" data-table-length>
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="all">All</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex justify-content-end align-items-center gap-2 flex-wrap">
                            <div class="dropdown table-filter-dropdown">
                                <button class="filter-toggle" type="button" id="userFilterToggle" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span>Filters</span>
                                    <i class="bx bx-filter"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end p-3">
                                    <div class="mb-3">
                                        <label class="form-label small">Department</label>
                                        <select class="form-select" id="filterDepartment">
                                            <option value="all">All</option>
                                            @foreach ($departmentOptions as $department)
                                                <option value="{{ strtolower($department) }}">{{ $department }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small">Job Title</label>
                                        <select class="form-select" id="filterJobTitle">
                                            <option value="all">All</option>
                                            @foreach ($jobTitleOptions as $jobTitle)
                                                <option value="{{ strtolower($jobTitle) }}">{{ $jobTitle }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small">Role</label>
                                        <select class="form-select" id="filterRole">
                                            <option value="all">All</option>
                                            @foreach ($roleOptions as $option)
                                                <option value="{{ strtolower($option['value']) }}">{{ $option['label'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small">Status</label>
                                        <select class="form-select" id="filterStatus">
                                            <option value="all">All</option>
                                            @foreach ($statusOptions as $value => $label)
                                                <option value="{{ strtolower($value) }}">{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="d-flex justify-content-end">
                                        <button type="button" class="btn btn-link p-0 table-filter-reset" id="userFilterReset">Reset Filters</button>
                                    </div>
                                </div>
                            </div>
                            <div class="evaluation-search-wrapper">
                                <i class="bx bx-search evaluation-search-icon"></i>
                                <input type="text" id="userSearch" class="evaluation-search-input" data-table-search placeholder="Search...">
                                <button type="button" class="evaluation-search-clear" id="userSearchClear" aria-label="Clear search">&times;</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-body pt-0">
                <div class="table-responsive">
                    <table class="table align-middle mb-0 evaluation-table" id="usersTable">
                        <thead>
                            <tr>
                                <th class="evaluation-col-selection text-center">
                                    <input type="checkbox" class="form-check-input evaluation-checkbox" id="userSelectAll">
                                </th>
                                <th data-sort-key="name" class="sortable" data-sort-state="none">
                                    <span class="evaluation-sort-wrapper">
                                        <span class="evaluation-sort-label">Name</span>
                                        <span class="evaluation-sort-indicator">
                                            <i class="bx bx-chevron-up icon-up"></i>
                                            <i class="bx bx-chevron-down icon-down"></i>
                                        </span>
                                    </span>
                                </th>
                                <th>
                                    <span class="evaluation-sort-label">Email</span>
                                </th>
                                <th data-sort-key="department" class="sortable" data-sort-state="none">
                                    <span class="evaluation-sort-wrapper">
                                        <span class="evaluation-sort-label">Department</span>
                                        <span class="evaluation-sort-indicator">
                                            <i class="bx bx-chevron-up icon-up"></i>
                                            <i class="bx bx-chevron-down icon-down"></i>
                                        </span>
                                    </span>
                                </th>
                                <th data-sort-key="job" class="sortable" data-sort-state="none">
                                    <span class="evaluation-sort-wrapper">
                                        <span class="evaluation-sort-label">Job Title</span>
                                        <span class="evaluation-sort-indicator">
                                            <i class="bx bx-chevron-up icon-up"></i>
                                            <i class="bx bx-chevron-down icon-down"></i>
                                        </span>
                                    </span>
                                </th>
                                <th data-sort-key="role" class="sortable" data-sort-state="none">
                                    <span class="evaluation-sort-wrapper">
                                        <span class="evaluation-sort-label">Role</span>
                                        <span class="evaluation-sort-indicator">
                                            <i class="bx bx-chevron-up icon-up"></i>
                                            <i class="bx bx-chevron-down icon-down"></i>
                                        </span>
                                    </span>
                                </th>
                                <th data-sort-key="status" class="sortable" data-sort-state="none">
                                    <span class="evaluation-sort-wrapper">
                                        <span class="evaluation-sort-label">Status</span>
                                        <span class="evaluation-sort-indicator">
                                            <i class="bx bx-chevron-up icon-up"></i>
                                            <i class="bx bx-chevron-down icon-down"></i>
                                        </span>
                                    </span>
                                </th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($sortedUsers as $user)
                                @php
                                    $statusSlug = strtolower($user->status ?? 'inactive');
                                    $statusClass = in_array($statusSlug, ['active', 'enabled']) ? 'active' : (in_array($statusSlug, ['pending', 'invited']) ? 'pending' : 'inactive');
                                    $statusLabel = $user->status ?? 'Inactive';
                                    $searchWords = strtolower(
                                        implode(' ', [
                                            $user->name,
                                            $user->email,
                                            $user->department,
                                            $user->job_title,
                                            $user->role,
                                            $user->status,
                                        ])
                                    );
                                @endphp
                                <tr class="table-row"
                                    data-search="{{ e($searchWords) }}"
                                    data-user-id="{{ $user->id }}"
                                    data-sort-name="{{ strtolower($user->name ?? '') }}"
                                    data-sort-department="{{ strtolower($user->department ?? '') }}"
                                    data-sort-job="{{ strtolower($user->job_title ?? '') }}"
                                    data-sort-role="{{ strtolower($user->role ?? '') }}"
                                    data-sort-status="{{ strtolower($statusLabel) }}"
                                    data-user-name="{{ e($user->name ?? '') }}"
                                    data-user-email="{{ e($user->email ?? '') }}"
                                    data-user-department="{{ e($user->department ?? '') }}"
                                    data-user-job="{{ e($user->job_title ?? '') }}"
                                    data-user-role="{{ strtolower($user->role ?? '') }}">
                                    <td class="text-center">
                                        <input type="checkbox" class="form-check-input evaluation-checkbox" data-user-row-select>
                                    </td>
                                    <td>
                                        <div class="table-cell-stack is-wide" title="{{ $user->name ?? 'Unnamed User' }}">
                                            <span class="table-text-truncate text-dark">{{ $user->name ?? 'Unnamed User' }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="table-text-truncate">{{ $user->email ?? '—' }}</span>
                                    </td>
                                    <td class="evaluation-pill-cell">
                                        <span class="evaluation-pill"
                                              data-pill-palette="purple"
                                              data-pill-value="{{ strtolower($user->department ?? '') }}">
                                            {{ $user->department ?? '—' }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="table-text-truncate fw-normal">{{ $user->job_title ?? '—' }}</span>
                                    </td>
                                    <td>
                                        <span class="evaluation-pill"
                                              data-pill-palette="blue"
                                              data-pill-value="{{ strtolower($user->role ?? 'user') }}">
                                            {{ $user->role ?? 'User' }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="evaluation-status evaluation-status--{{ $statusClass }}">
                                            {{ $statusLabel }}
                                        </span>
                                    </td>
                                    <td class="actions-cell">
                                        <div class="dropdown evaluation-actions">
                                            <button class="evaluation-icon-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bx bx-dots-horizontal-rounded"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <button type="button" class="dropdown-item" data-user-action="edit" data-user-id="{{ $user->id }}">Edit</button>
                                                </li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li>
                                                    <button type="button" class="dropdown-item text-danger" data-user-action="delete" data-user-id="{{ $user->id }}">Delete</button>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            <tr data-empty style="{{ $sortedUsers->isEmpty() ? '' : 'display: none;' }}">
                                <td colspan="8" class="text-center py-5">
                                    <div class="empty-state">
                                        <i class="fa-solid fa-users-gear display-4 text-muted mb-3"></i>
                                        <h5 class="mb-2">No users yet</h5>
                                        <p class="text-muted mb-0">Add or import users to see them listed here.</p>
                                    </div>
                                </td>
                            </tr>
                            <tr data-empty-search style="display: none;">
                                <td colspan="8" class="text-center py-5">
                                    <div class="empty-state">
                                        <i class="fa-solid fa-magnifying-glass display-4 text-muted mb-3"></i>
                                        <h5 class="mb-2">No results found</h5>
                                        <p class="text-muted mb-0">Try adjusting your search or filters.</p>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="evaluation-bulk-bar d-none" id="userBulkBar">
                    <span class="fw-semibold" id="userSelectedCount">0 Selected</span>
                    <button type="button" class="evaluation-bulk-btn evaluation-bulk-btn--danger" data-user-bulk-action="delete">
                        <i class="bx bx-trash"></i> Delete
                    </button>
                    <button type="button" class="evaluation-bulk-close" data-user-bulk-action="clear" title="Clear selection">
                        <i class="bx bx-x"></i>
                    </button>
                </div>

                <div class="row mt-4 align-items-center">
                    <div class="col-md-6 d-flex align-items-center">
                        <div class="text-muted" data-table-info></div>
                    </div>
                    <div class="col-md-6 d-flex justify-content-end align-items-center">
                        <nav aria-label="Users table pagination">
                            <ul class="pagination justify-content-end mb-0" data-table-pagination></ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
{{-- Add User Modal --}}
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered user-modal-dialog user-modal-dialog--narrow">
        <div class="modal-content user-modal-card">
            <form method="POST" action="{{ route('um.users.store') }}" id="addUserForm">
                @csrf
                <div class="modal-header user-modal-header">
                    <h5 class="modal-title mb-0" id="addUserModalLabel">Add User</h5>
                    <button type="button" class="user-modal-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body user-modal-body">
                    <div class="mb-3">
                        <label class="form-label" for="userName">Full Name</label>
                        <input type="text" class="form-control" id="userName" name="name" placeholder="Enter full name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="userEmail">Email Address</label>
                        <input type="email" class="form-control" id="userEmail" name="email" placeholder="name@mcu.edu.ph" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="userDepartment">Department</label>
                        <input type="text" class="form-control" id="userDepartment" name="department" placeholder="e.g. College of Dentistry" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="userJobTitle">Job Title</label>
                        <input type="text" class="form-control" id="userJobTitle" name="job_title" placeholder="e.g. Faculty" required>
                    </div>
                    <div class="mb-3">
                        @php
                            $rolePlaceholder = '-- Select Role --';
                        @endphp
                        <label class="form-label" for="userRole">Role</label>
                        <div class="dropdown w-100 searchable-dropdown" data-searchable-dropdown>
                            <button class="searchable-dropdown-toggle w-100 d-flex justify-content-between align-items-center text-start"
                                    type="button"
                                    data-bs-toggle="dropdown"
                                    data-bs-display="static"
                                    data-dropdown-toggle>
                                <span class="searchable-dropdown-label is-placeholder"
                                      data-dropdown-label
                                      data-placeholder-text="{{ $rolePlaceholder }}">{{ $rolePlaceholder }}</span>
                                <i class="bx bx-chevron-down fs-5"></i>
                            </button>
                            <div class="dropdown-menu p-2">
                                <input type="text" class="form-control searchable-dropdown-search" placeholder="Search..." data-dropdown-search>
                                <div class="searchable-dropdown-list searchable-dropdown-list--grid" data-dropdown-list>
                                    @foreach ($roleOptions as $option)
                                        <button type="button"
                                                class="dropdown-item"
                                                data-dropdown-option
                                                data-option-value="{{ $option['value'] }}"
                                                data-option-label="{{ $option['label'] }}"
                                                data-option-filter="{{ strtolower($option['label']) }}">
                                            <span>{{ $option['label'] }}</span>
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="role" id="userRole" required>
                    </div>
                </div>
                <div class="modal-footer user-modal-footer">
                    <button type="button" class="btn btn-tertiary user-modal-btn" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-user-primary user-modal-btn" data-default-text="Save User" data-loading-text="Saving...">Save User</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Edit User Modal --}}
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered evaluation-modal-dialog evaluation-modal-dialog--narrow">
        <div class="modal-content evaluation-card">
            <form method="POST" id="editUserForm" action="#">
                @csrf
                @method('PUT')
                <div class="modal-header evaluation-modal-header">
                    <h5 class="modal-title mb-0" id="editUserModalLabel">Edit User</h5>
                    <button type="button" class="evaluation-modal-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body evaluation-modal-body">
                    <div class="mb-3">
                        <label class="form-label" for="editUserName">Full Name</label>
                        <input type="text" class="form-control" id="editUserName" name="name" placeholder="Enter full name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="editUserEmail">Email Address</label>
                        <input type="email" class="form-control" id="editUserEmail" name="email" placeholder="name@mcu.edu.ph" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="editUserDepartment">Department</label>
                        <input type="text" class="form-control" id="editUserDepartment" name="department" placeholder="e.g. College of Dentistry" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="editUserJobTitle">Job Title</label>
                        <input type="text" class="form-control" id="editUserJobTitle" name="job_title" placeholder="e.g. Faculty" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="editUserRole">Role</label>
                        <select class="form-select" id="editUserRole" name="role" required>
                            @foreach ($roleOptions as $option)
                                <option value="{{ strtolower($option['value']) }}">{{ $option['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer evaluation-modal-footer">
                    <button type="button" class="btn btn-tertiary evaluation-modal-btn" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-user-primary evaluation-modal-btn" data-default-text="Save Changes" data-loading-text="Saving...">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

    {{-- Bulk Delete Confirmation Modal --}}
    <div class="modal fade" id="userBulkDeleteModal" tabindex="-1" aria-labelledby="userBulkDeleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered evaluation-modal-dialog evaluation-modal-dialog--narrow">
            <div class="modal-content evaluation-card">
                <div class="modal-header evaluation-modal-header">
                    <h5 class="modal-title mb-0" id="userBulkDeleteModalLabel">Delete Selected Users</h5>
                    <button type="button" class="evaluation-modal-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body evaluation-modal-body">
                    <p class="mb-0">You are about to delete <span class="fw-semibold" id="userBulkDeleteCount">0</span> user(s). This action cannot be undone. Continue?</p>
                </div>
                <div class="modal-footer evaluation-modal-footer">
                    <button type="button" class="btn btn-tertiary evaluation-modal-btn" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-delete-action evaluation-modal-btn" id="confirmUserBulkDeleteBtn" data-default-text="Delete Selected" data-loading-text="Deleting...">Delete Selected</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    @include('components.table-controller-script')
    <script>
        const PILL_PALETTES = {
            purple: [{ bg: '#e4c7ff', color: '#4c1d95' }],
            blue: [{ bg: '#d3e2ff', color: '#1d4ed8' }],
            green: [{ bg: '#d1f9e0', color: '#047857' }],
            gray: [{ bg: '#e3e8f1', color: '#475569' }],
        };

        const userFilters = {
            department: 'all',
            job: 'all',
            role: 'all',
            status: 'all',
        };
        let userFilterToggleEl = null;
        const userSelection = new Set();
        let userBulkDeleteModalInstance = null;
        let userEditModalInstance = null;
        let pendingUserBulk = null;

        function getPillColor(value, paletteName) {
            const palette = PILL_PALETTES[paletteName];
            if (!palette || !palette.length) {
                return null;
            }
            return palette[0];
        }

        function stylePillElement(element) {
            const paletteName = element.dataset.pillPalette;
            if (!paletteName) {
                return;
            }
            const color = getPillColor(element.dataset.pillValue || element.textContent, paletteName);
            if (!color) {
                return;
            }
            element.style.setProperty('--pill-bg', color.bg);
            element.style.setProperty('--pill-color', color.color);
        }

        function applyEvaluationPillColors(root = document) {
            const scope = root instanceof Element ? root : document.body;
            scope.querySelectorAll('[data-pill-palette]').forEach(stylePillElement);
        }

        document.addEventListener('DOMContentLoaded', function () {
            const controllerRoot = document.querySelector('[data-table-id="usersTable"]');
            if (controllerRoot && window.TableController) {
                window.tableControllers = window.tableControllers || {};
                const usersController = new TableController(controllerRoot);
                window.tableControllers.usersTable = usersController;
                initUserTableEnhancements(controllerRoot, usersController);
                initUserFilters(usersController);
            }

            const searchInput = document.getElementById('userSearch');
            const clearButton = document.getElementById('userSearchClear');

            if (searchInput && clearButton) {
                const toggleClearVisibility = () => {
                    clearButton.classList.toggle('is-visible', searchInput.value.trim() !== '');
                };

                searchInput.addEventListener('input', toggleClearVisibility);
                clearButton.addEventListener('click', () => {
                    searchInput.value = '';
                    toggleClearVisibility();
                    searchInput.dispatchEvent(new Event('input', { bubbles: true }));
                    searchInput.focus();
                });

                toggleClearVisibility();
            }

            initUserSearchableDropdowns();
            initAddUserFormLoading();
            applyEvaluationPillColors();
            window.showTemporaryToast = window.showTemporaryToast || function (message, type = 'success') {
                if (window.dmToast && typeof window.dmToast.show === 'function') {
                    window.dmToast.show({ type, message });
                    return;
                }
                const toast = document.createElement('div');
                toast.className = `alert alert-${type} position-fixed`;
                toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 280px;';
                toast.textContent = message;
                document.body.appendChild(toast);
                setTimeout(() => toast.remove(), 3000);
            };

            const bulkModalEl = document.getElementById('userBulkDeleteModal');
            if (bulkModalEl && typeof bootstrap !== 'undefined') {
                userBulkDeleteModalInstance = new bootstrap.Modal(bulkModalEl);
                bulkModalEl.addEventListener('hidden.bs.modal', () => {
                    pendingUserBulk = null;
                });
            }

            const confirmBulkDeleteBtn = document.getElementById('confirmUserBulkDeleteBtn');
            if (confirmBulkDeleteBtn) {
                confirmBulkDeleteBtn.addEventListener('click', () => handleUserBulkDeleteConfirm(confirmBulkDeleteBtn));
            }

            initUserEditModal();
        });

        function initAddUserFormLoading() {
            const form = document.getElementById('addUserForm');
            if (!form) return;

            const submitBtn = form.querySelector('button[type="submit"]');
            if (!submitBtn) return;

            form.addEventListener('submit', () => {
                if (submitBtn.disabled) return;
                const defaultText = submitBtn.dataset.defaultText || submitBtn.textContent.trim();
                const loadingText = submitBtn.dataset.loadingText || 'Saving...';
                submitBtn.dataset.defaultText = defaultText;
                submitBtn.textContent = loadingText;
                submitBtn.disabled = true;
            });
        }

        function initUserTableEnhancements(controllerRoot, controller) {
            initUserSelectionControls(controllerRoot, controller);
            initUserSorting(controller);
        }

        function initUserSelectionControls(controllerRoot, controller) {
            const selectAllEl = document.getElementById('userSelectAll');
            const bulkBar = document.getElementById('userBulkBar');
            const selectedCountEl = document.getElementById('userSelectedCount');
            const tableBody = document.querySelector('#usersTable tbody');
            if (!selectAllEl || !tableBody) return;

            const visibleRows = () => Array.from(document.querySelectorAll('#usersTable tbody tr[data-user-id]:not([data-ignore])'));

            const applySelectionToRow = (row, isSelected) => {
                const checkbox = row.querySelector('[data-user-row-select]');
                if (checkbox) {
                    checkbox.checked = isSelected;
                }
                row.classList.toggle('is-selected', isSelected);
            };

            const syncSelectAll = () => {
                const rows = visibleRows();
                if (rows.length === 0) {
                    selectAllEl.checked = false;
                    selectAllEl.indeterminate = false;
                    updateUserBulkBarDisplay(bulkBar, selectedCountEl);
                    return;
                }

                const visibleSelected = rows.filter((row) => userSelection.has(row.dataset.userId)).length;
                if (visibleSelected === 0) {
                    selectAllEl.checked = false;
                    selectAllEl.indeterminate = false;
                } else if (visibleSelected === rows.length) {
                    selectAllEl.checked = true;
                    selectAllEl.indeterminate = false;
                } else {
                    selectAllEl.checked = false;
                    selectAllEl.indeterminate = true;
                }

                updateUserBulkBarDisplay(bulkBar, selectedCountEl);
            };

            const toggleRowSelection = (row, shouldSelect) => {
                const id = row.dataset.userId;
                if (!id) return;
                if (shouldSelect) {
                    userSelection.add(id);
                } else {
                    userSelection.delete(id);
                }
                applySelectionToRow(row, shouldSelect);
                updateUserBulkBarDisplay(bulkBar, selectedCountEl);
            };

            selectAllEl.addEventListener('change', () => {
                const shouldSelect = selectAllEl.checked;
                visibleRows().forEach((row) => toggleRowSelection(row, shouldSelect));
                syncSelectAll();
                controller?.refresh?.();
            });

            tableBody.addEventListener('change', (event) => {
                const checkbox = event.target.closest('[data-user-row-select]');
                if (!checkbox) return;
                const row = checkbox.closest('tr[data-user-id]');
                if (!row) return;
                toggleRowSelection(row, checkbox.checked);
                syncSelectAll();
            });

            controllerRoot.addEventListener('table:updated', () => {
                document.querySelectorAll('#usersTable tbody tr[data-user-id]').forEach((row) => {
                    const isSelected = userSelection.has(row.dataset.userId);
                    applySelectionToRow(row, isSelected);
                });
                syncSelectAll();
            });

            if (bulkBar) {
                bulkBar.addEventListener('click', (event) => {
                    const actionBtn = event.target.closest('[data-user-bulk-action]');
                    if (!actionBtn) return;
                    handleUserBulkAction(actionBtn.dataset.userBulkAction, controller);
                });
            }

            syncSelectAll();
        }

        function initUserEditModal() {
            const modalEl = document.getElementById('editUserModal');
            const form = document.getElementById('editUserForm');
            if (!modalEl || !form || typeof bootstrap === 'undefined') {
                return;
            }

            userEditModalInstance = bootstrap.Modal.getOrCreateInstance(modalEl);

            const bindButtons = () => {
                document.querySelectorAll('[data-user-action="edit"]').forEach((button) => {
                    if (button.dataset.bound === 'true') return;
                    button.dataset.bound = 'true';
                    button.addEventListener('click', () => {
                        const userId = button.dataset.userId;
                        const row = document.querySelector(`#usersTable tbody tr[data-user-id="${userId}"]`);
                        if (!row) return;
                        populateUserEditForm(form, row, button.dataset.updateUrl || form.getAttribute('action') || '');
                        userEditModalInstance.show();
                    });
                });
            };

            bindButtons();

            const tableRoot = document.querySelector('[data-table-id="usersTable"]');
            tableRoot?.addEventListener('table:updated', bindButtons);
        }

        const userSortState = { key: null, direction: 'asc' };

        function initUserSorting(controller) {
            const headers = document.querySelectorAll('#usersTable thead th[data-sort-key]');
            headers.forEach((header) => {
                header.dataset.sortState = 'none';
                header.addEventListener('click', () => handleUserSort(header, headers, controller));
            });
            updateUserSortIndicators(headers);
        }

        function handleUserSort(activeHeader, headers, controller) {
            const sortKey = activeHeader.dataset.sortKey;
            const sortType = activeHeader.dataset.sortType || 'string';

            if (userSortState.key === sortKey) {
                userSortState.direction = userSortState.direction === 'asc' ? 'desc' : 'asc';
            } else {
                userSortState.key = sortKey;
                userSortState.direction = 'asc';
            }

            const rows = Array.from(document.querySelectorAll('#usersTable tbody tr[data-user-id]'));
            rows.sort((rowA, rowB) => {
                const key = sortKey.charAt(0).toUpperCase() + sortKey.slice(1);
                const valueA = rowA.dataset[`sort${key}`] || '';
                const valueB = rowB.dataset[`sort${key}`] || '';

                if (sortType === 'number') {
                    return (Number(valueA) - Number(valueB)) * (userSortState.direction === 'asc' ? 1 : -1);
                }

                const compare = String(valueA).localeCompare(String(valueB));
                return compare * (userSortState.direction === 'asc' ? 1 : -1);
            });

            const tbody = document.querySelector('#usersTable tbody');
            rows.forEach((row) => tbody.appendChild(row));

            updateUserSortIndicators(headers);
            controller?.refresh?.();
        }

        function updateUserSortIndicators(headers) {
            headers.forEach((header) => {
                header.classList.remove('sorted-asc', 'sorted-desc');
                header.dataset.sortState = 'none';
            });

            if (!userSortState.key) return;

            headers.forEach((header) => {
                if (header.dataset.sortKey === userSortState.key) {
                    header.classList.add(userSortState.direction === 'asc' ? 'sorted-asc' : 'sorted-desc');
                    header.dataset.sortState = userSortState.direction;
                }
            });
        }

        function initUserSearchableDropdowns() {
            const dropdowns = document.querySelectorAll('[data-searchable-dropdown]');
            dropdowns.forEach((dropdown) => {
                if (dropdown.dataset.dropdownInitialized === 'true') return;
                dropdown.dataset.dropdownInitialized = 'true';

                const label = dropdown.querySelector('[data-dropdown-label]');
                const hiddenInput = dropdown.querySelector('input[type="hidden"]');
                const searchInput = dropdown.querySelector('[data-dropdown-search]');
                const listWrapper = dropdown.querySelector('[data-dropdown-list]');
                const toggleBtn = dropdown.querySelector('[data-dropdown-toggle]');
                const placeholderText = label?.dataset.placeholderText?.trim() || '-- Select Option --';

                const setLabel = (text, isPlaceholder = false) => {
                    if (!label) return;
                    label.textContent = text;
                    label.classList.toggle('is-placeholder', isPlaceholder);
                };

                const getOptions = () => Array.from(dropdown.querySelectorAll('[data-dropdown-option]'));

                const applySearchFilter = () => {
                    const term = searchInput ? searchInput.value.trim().toLowerCase() : '';
                    const hasTerm = term !== '';

                    getOptions().forEach((option) => {
                        const filter = option.dataset.optionFilter || option.dataset.optionLabel || option.textContent;
                        const matches = !hasTerm || (filter && filter.toLowerCase().includes(term));
                        option.classList.toggle('d-none', !matches);
                    });

                    if (listWrapper) {
                        listWrapper.classList.toggle('is-unlimited', hasTerm);
                    }
                };

                const selectOption = (option) => {
                    if (!option) return;
                    const value = option.dataset.optionValue ?? '';
                    const labelText = option.dataset.optionLabel
                        ?? option.querySelector('span')?.textContent?.trim()
                        ?? option.textContent.trim()
                        ?? placeholderText;

                    if (hiddenInput) {
                        hiddenInput.value = value;
                        hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
                    }
                    setLabel(labelText, !value);

                    if (toggleBtn && typeof bootstrap !== 'undefined' && bootstrap.Dropdown) {
                        const instance = bootstrap.Dropdown.getOrCreateInstance(toggleBtn);
                        instance.hide();
                    }
                };

                if (listWrapper) {
                    listWrapper.addEventListener('click', (event) => {
                        const option = event.target.closest('[data-dropdown-option]');
                        if (!option) return;
                        event.preventDefault();
                        selectOption(option);
                    });
                }

                if (searchInput) {
                    searchInput.addEventListener('input', applySearchFilter);
                }

                dropdown.addEventListener('shown.bs.dropdown', () => {
                    if (searchInput) {
                        searchInput.value = '';
                        applySearchFilter();
                        searchInput.focus();
                    } else {
                        applySearchFilter();
                    }
                });

                const parentForm = dropdown.closest('form');
                if (parentForm) {
                    parentForm.addEventListener('reset', () => {
                        setTimeout(() => {
                            if (hiddenInput) hiddenInput.value = '';
                            setLabel(placeholderText, true);
                            if (searchInput) searchInput.value = '';
                            applySearchFilter();
                        }, 0);
                    });
                }

                const initialValue = hiddenInput?.value?.trim();
                if (initialValue) {
                    const option = getOptions().find((opt) => opt.dataset.optionValue === initialValue);
                    if (option) {
                        setLabel(option.dataset.optionLabel || option.textContent.trim(), false);
                    } else {
                        setLabel(placeholderText, false);
                    }
                } else {
                    setLabel(placeholderText, true);
                }

                applySearchFilter();
            });
        }

        function initUserFilters(controller) {
            const selectEls = {
                department: document.getElementById('filterDepartment'),
                job: document.getElementById('filterJobTitle'),
                role: document.getElementById('filterRole'),
                status: document.getElementById('filterStatus'),
            };
            const resetBtn = document.getElementById('userFilterReset');
            const toggleBtn = document.getElementById('userFilterToggle');

            userFilterToggleEl = toggleBtn;

            Object.entries(selectEls).forEach(([key, select]) => {
                if (!select) return;
                select.addEventListener('change', (event) => {
                    const value = normaliseFilterValue(event.target.value || 'all');
                    userFilters[key] = value === '' ? 'all' : value;
                    applyUserFilters(controller, toggleBtn);
                });
            });

            if (resetBtn) {
                resetBtn.addEventListener('click', () => {
                    Object.keys(userFilters).forEach((key) => {
                        userFilters[key] = 'all';
                        if (selectEls[key]) {
                            selectEls[key].value = 'all';
                        }
                    });
                    applyUserFilters(controller, toggleBtn);
                });
            }

            updateUserFilterToggle(toggleBtn);
            applyUserFilters(controller, toggleBtn);
        }

        function applyUserFilters(controller, toggleBtn = userFilterToggleEl) {
            const rows = Array.from(document.querySelectorAll('#usersTable tbody tr[data-user-id]'));
            rows.forEach((row) => {
                const matches = matchesUserFilters(row);
                const checkbox = row.querySelector('[data-user-row-select]');
                if (matches) {
                    row.removeAttribute('data-ignore');
                    row.style.display = '';
                } else {
                    row.setAttribute('data-ignore', 'true');
                    row.style.display = 'none';
                    if (checkbox) {
                        checkbox.checked = false;
                    }
                }
            });
            updateUserFilterToggle(toggleBtn);
            controller?.refresh?.();
        }

        function matchesUserFilters(row) {
            if (!row) return false;

            const departmentValue = normaliseFilterValue(row.dataset.sortDepartment);
            if (userFilters.department !== 'all' && departmentValue !== userFilters.department) {
                return false;
            }

            const jobValue = normaliseFilterValue(row.dataset.sortJob);
            if (userFilters.job !== 'all' && jobValue !== userFilters.job) {
                return false;
            }

            const roleValue = normaliseFilterValue(row.dataset.sortRole);
            if (userFilters.role !== 'all' && roleValue !== userFilters.role) {
                return false;
            }

            const statusValue = normaliseFilterValue(row.dataset.sortStatus);
            if (userFilters.status !== 'all' && statusValue !== userFilters.status) {
                return false;
            }

            return true;
        }

        function updateUserFilterToggle(toggleBtn = userFilterToggleEl) {
            if (!toggleBtn) return;
            const isActive = Object.values(userFilters).some((value) => value !== 'all');
            toggleBtn.classList.toggle('is-active', isActive);
        }

        function normaliseFilterValue(value) {
            return String(value ?? '').trim().toLowerCase();
        }

        function populateUserEditForm(form, row, action) {
            if (!form || !row) return;
            if (action) {
                form.setAttribute('action', action);
            }

            const nameInput = document.getElementById('editUserName');
            const emailInput = document.getElementById('editUserEmail');
            const deptInput = document.getElementById('editUserDepartment');
            const jobInput = document.getElementById('editUserJobTitle');
            const roleSelect = document.getElementById('editUserRole');

            if (nameInput) nameInput.value = row.dataset.userName || '';
            if (emailInput) emailInput.value = row.dataset.userEmail || '';
            if (deptInput) deptInput.value = row.dataset.userDepartment || '';
            if (jobInput) jobInput.value = row.dataset.userJob || '';
            if (roleSelect) roleSelect.value = row.dataset.userRole || roleSelect.value;
        }

        function updateUserBulkBarDisplay(bulkBarEl, countEl) {
            const bar = bulkBarEl || document.getElementById('userBulkBar');
            const label = countEl || document.getElementById('userSelectedCount');
            const count = userSelection.size;

            if (label) {
                label.textContent = `${count} Selected`;
            }

            if (bar) {
                bar.classList.toggle('d-none', count === 0);
            }
        }

        function handleUserBulkAction(action, controller) {
            if (!action) return;

            if (action === 'clear') {
                clearUserSelection(controller);
                return;
            }

            if (action === 'delete') {
                if (userSelection.size === 0) return;
                pendingUserBulk = { ids: Array.from(userSelection) };
                const countEl = document.getElementById('userBulkDeleteCount');
                if (countEl) {
                    countEl.textContent = pendingUserBulk.ids.length;
                }
                userBulkDeleteModalInstance?.show();
            }
        }

        function clearUserSelection(controller) {
            userSelection.clear();
            document.querySelectorAll('#usersTable tbody tr[data-user-id]').forEach((row) => {
                row.classList.remove('is-selected');
                const checkbox = row.querySelector('[data-user-row-select]');
                if (checkbox) checkbox.checked = false;
            });

            const selectAllEl = document.getElementById('userSelectAll');
            if (selectAllEl) {
                selectAllEl.checked = false;
                selectAllEl.indeterminate = false;
            }

            updateUserBulkBarDisplay();
            controller?.refresh?.();
        }

        function handleUserBulkDeleteConfirm(button) {
            if (!button) return;
            const defaultText = button.dataset.defaultText || button.textContent.trim();
            const loadingText = button.dataset.loadingText || 'Deleting...';
            button.dataset.defaultText = defaultText;
            button.textContent = loadingText;
            button.disabled = true;

            setTimeout(() => {
                button.textContent = defaultText;
                button.disabled = false;
                userBulkDeleteModalInstance?.hide();

                if (pendingUserBulk) {
                    clearUserSelection(window.tableControllers?.usersTable);
                    showTemporaryToast('Bulk delete is not connected to the backend yet.', 'info');
                    pendingUserBulk = null;
                }
            }, 400);
        }
    </script>
@endsection