@extends('layouts/contentNavbarLayout')

@php
    $courseItems = $courses
        ->sortByDesc(function ($course) {
            return $course->created_at ?? $course->id ?? 0;
        })
        ->map(function ($course) {
            return [
                'id' => $course->id,
                'class_code' => $course->class_code,
                'subject_code' => $course->subject_code,
                'assignments' => $course->faculty_courses_count ?? 0,
            ];
        })->values();

    $facultyOptions = $faculties->map(function ($faculty) {
        return [
            'id' => $faculty->id,
            'name' => optional($faculty->user)->name ?? $faculty->name ?? 'Unknown',
            'email' => optional($faculty->user)->email ?? '',
        ];
    })->values();

    $assignmentItems = $facultyCourses
        ->sortByDesc(function ($assignment) {
            return $assignment->created_at ?? $assignment->id ?? 0;
        })
        ->map(function ($assignment) {
            $faculty = optional($assignment->faculty);
            $facultyUser = optional($faculty->user);
            $course = optional($assignment->course);
            $facultyName = $facultyUser->name ?? $faculty->name ?? 'N/A';

            return [
                'id' => $assignment->id,
                'faculty_id' => $assignment->faculty_id,
                'faculty_name' => $facultyName,
                'faculty_email' => $facultyUser->email ?? '',
                'course_id' => $assignment->course_id,
                'course_class_code' => $course->class_code ?? 'N/A',
                'course_subject_code' => $course->subject_code ?? '',
                'academic_year' => $assignment->academic_year,
                'semester' => $assignment->semester,
            ];
        })->values();

    $generateAcademicYearOptions = function ($startYear = 2025, $minimumYears = 10, $futureBuffer = 5) {
        $currentYear = (int) date('Y');
        $endYear = max($startYear + $minimumYears - 1, $currentYear + $futureBuffer);
        $years = [];
        for ($year = $startYear; $year <= $endYear; $year++) {
            $years[] = sprintf('%d-%d', $year, $year + 1);
        }
        return $years;
    };

    $academicYearOptions = collect($generateAcademicYearOptions());

    $container = 'container-xxl';
@endphp

@section('title', 'Data Management - Courses')

@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 {
            --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;
        }

        #courseAlertContainer,
        #courseAlertContainer + .card {
            margin-top: 0 !important;
        }

        #courseAlertContainer:not(:empty) {
            margin-bottom: 1.5rem;
        }

        .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));
        }

        .course-action-card {
            background-color: #5c297c;
            color: #ffffff;
        }

        .course-action-card .card-title {
            color: #ffb736;
        }

        .course-action-card .card-title i {
            color: #ffb736;
        }

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

        .course-action-card .btn-course-action {
            background-color: #ffb736;
            color: #5c297c;
            border: none;
            font-weight: 600;
        }

        .course-action-card .btn-course-action i {
            color: #5c297c;
        }

        .course-action-card .btn-course-action:hover,
        .course-action-card .btn-course-action:focus {
            background-color: #e6a431;
            color: #5c297c;
        }

        .btn-course-primary {
            background-color: #5c297c;
            border-color: #5c297c;
            color: #ffffff;
        }

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

        .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;
        }

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

        .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-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;
        }

        .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-sort-wrapper {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

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

        .evaluation-sort-indicator {
            display: inline-flex;
            flex-direction: column;
            color: #cbd5f5;
            font-size: 0.65rem;
        }

        .evaluation-table thead th.sortable .evaluation-sort-indicator .icon-up,
        .evaluation-table thead th.sortable .evaluation-sort-indicator .icon-down {
            display: none;
        }

        .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;
            color: #1d4ed8;
        }

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

        .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%;
        }

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

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

        .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.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-pill {
            text-align: center;
        }

        .course-pill--class {
            letter-spacing: 0.05em;
        }

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

        .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-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);
        }

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

        .evaluation-modal-body {
            padding: 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-footer {
            border-top: none;
            justify-content: flex-end;
            gap: 1rem;
            padding: 1rem 1.5rem;
        }

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

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

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

        .evaluation-modal-body .form-select {
            border: 1px solid #d9dee3;
            background-color: #ffffff;
            color: #0f172a;
            font-size: 0.95rem;
            font-weight: 500;
            line-height: 1.4;
            transition: border-color 0.2s ease;
            box-shadow: none;
        }

        .evaluation-modal-body .form-select:hover,
        .evaluation-modal-body .form-select:focus,
        .evaluation-modal-body .form-select:active {
            border-color: #94a3b8;
            box-shadow: none;
        }

        .evaluation-modal-body .form-select.is-placeholder {
            color: #94a3b8;
            font-weight: 400;
        }

        .evaluation-modal-body .form-select option {
            color: #0f172a;
            font-size: 0.95rem;
            font-weight: 500;
        }

        .evaluation-modal-body .form-select option[value=""] {
            color: #94a3b8;
            font-weight: 400;
        }

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

        .evaluation-alert-container .alert {
            border: none;
            border-radius: 0.9rem;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
        }

        .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 {
            box-shadow: none;
            transform: none;
            outline: none;
        }

        .btn.btn-primary {
            background-color: #2563eb;
            border: none;
            color: #ffffff;
        }

        .btn.btn-primary:hover,
        .btn.btn-primary:focus,
        .btn.btn-primary:active {
            background-color: #2563eb;
            border-color: #2563eb;
            color: #ffffff;
        }

        .btn.btn-secondary {
            background-color: #dc2626;
            border: none;
            color: #ffffff;
        }

        .btn.btn-secondary:hover,
        .btn.btn-secondary:focus,
        .btn.btn-secondary:active {
            background-color: #dc2626;
            border-color: #dc2626;
            color: #ffffff;
        }

        .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;
        }

        .course-tabs-panel {
            width: auto;
            flex: 0 0 auto;
            background-color: transparent;
            padding: 0;
            margin-left: auto;
        }

        .course-tabs-header {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-end;
            gap: 0.75rem;
        }

        .course-tabs-nav {
            display: flex;
            gap: 1.25rem;
            flex: 0 0 auto;
            padding-bottom: 0;
        }

        .course-tab-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-left: 1.25rem;
        }

        .btn-tab {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0.35rem 0;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 600;
            letter-spacing: 0.08em;
            border-bottom: 2px solid transparent;
        }

        .btn-tab.active {
            color: #ffb736;
            border-color: #ffb736;
        }

        .btn-tab:hover,
        .btn-tab:focus,
        .btn-tab.active:hover,
        .btn-tab.active:focus {
            box-shadow: none;
        }

        .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--danger {
            background-color: rgba(220, 38, 38, 0.08);
            color: #dc2626 !important;
            border: 1px solid rgba(220, 38, 38, 0.25);
            border-radius: 999px;
            padding: 0.25rem 0.9rem;
        }

        .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-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;
        }

        .course-section.d-none {
            display: none !important;
        }

        .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;
        }

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

        .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;
            color: #0f172a;
            font-weight: 500;
            box-shadow: none;
            transition: border-color 0.2s ease;
        }

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

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

        .searchable-dropdown-toggle i {
            color: #94a3b8;
        }

        .searchable-dropdown-label {
            font-weight: 500;
            color: var(--bs-body-color, #4b5563);
            font-size: 0.95rem;
        }

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

        .searchable-dropdown .dropdown-menu {
            width: 100%;
            border-radius: 0.75rem;
            box-shadow: 0 15px 30px rgba(15, 23, 42, 0.15);
            padding: 0.75rem 0.85rem;
            top: calc(100% + 0.4rem) !important;
            left: 0 !important;
            right: 0 !important;
            transform: none !important;
            margin-top: 0 !important;
            z-index: 1085;
        }

        .searchable-dropdown .dropdown-menu::before {
            display: none;
        }

        .searchable-dropdown-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.45rem 0.65rem;
            max-height: calc((2 * 3.25rem) + 0.75rem);
            overflow-y: auto;
            padding-right: 0.25rem;
        }

        .searchable-dropdown-list.is-unlimited {
            max-height: calc((2 * 3.25rem) + 0.75rem);
            overflow-y: auto;
        }

        .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;
        }

        .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 {
            font-size: 0.75rem;
            color: #94a3b8;
            font-weight: 400;
            width: 100%;
        }

        .searchable-dropdown-search {
            border-radius: 0.5rem;
            margin-bottom: 0.6rem;
        }

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

        div[data-table-id="coursesTable"] .pagination .page-link,
        div[data-table-id="assignmentsTable"] .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="coursesTable"] .pagination .page-link:hover:not(.disabled),
        div[data-table-id="assignmentsTable"] .pagination .page-link:hover:not(.disabled) {
            background-color: #cbd5e1;
            color: #475569;
        }

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

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

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

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

        @media (max-width: 992px) {
            .evaluation-card--table {
                padding: 1.25rem;
            }

            .evaluation-table tbody td {
                padding: 0.85rem 0.6rem;
            }
        }

        @media (max-width: 768px) {
            .evaluation-table tbody td {
                padding: 0.75rem;
            }

            .evaluation-bulk-bar {
                bottom: 90px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .course-tab-actions {
                width: 100%;
                justify-content: flex-end;
                margin-left: 0;
            }
        }
        .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,
        .table-filter-dropdown .filter-toggle:focus-visible {
            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: 260px;
            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-reset {
            font-size: 0.8rem;
            font-weight: 600;
            color: #5c297c;
        }
    </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 id="courseAlertContainer" class="evaluation-alert-container"></div>

        <div class="card evaluation-card evaluation-card--table mb-4 course-action-card">
            <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-book" style="font-size: 1.5rem;"></i>
                        Course Actions
                    </h5>
                    <p class="text-muted mb-0">Switch between managing courses or assignments, or import records from a file.</p>
                </div>
                <div class="course-tabs-panel">
                    <div class="course-tabs-header">
                        <div class="course-tabs-nav">
                            <button type="button" class="btn btn-tab active" data-course-section="courses">
                                Manage Course
                            </button>
                            <button type="button" class="btn btn-tab" data-course-section="assignments">
                                Assign Course
                            </button>
                        </div>
                        <div class="course-tab-actions">
                            <button type="button" class="btn btn-course-action" data-bs-toggle="modal" data-bs-target="#courseImportModal">
                                <i class="fa-solid fa-upload me-2"></i> Import
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="coursesSection" class="course-section">
            <div class="card evaluation-card evaluation-card--table mb-4" data-table-controller data-table-id="coursesTable">
                <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">
                                <label for="coursesRowsPerPage" class="text-muted small">Lines per page</label>
                                <select id="coursesRowsPerPage" 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>
                                <button type="button" class="btn btn-course-primary" data-bs-toggle="modal" data-bs-target="#courseCreateModal">
                                    <i class="fa-solid fa-circle-plus me-2"></i>Add Course
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex justify-content-end align-items-center">
                                <div class="evaluation-search-wrapper">
                                    <i class="bx bx-search evaluation-search-icon"></i>
                                    <input type="text" id="coursesSearch" class="evaluation-search-input" data-table-search placeholder="Search...">
                                    <button type="button" class="evaluation-search-clear" id="coursesSearchClear">&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="coursesTable">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" class="form-check-input evaluation-checkbox" id="coursesSelectAll">
                                    </th>
                                    <th data-sort-key="code" class="sortable" data-sort-state="none">
                                        <span class="evaluation-sort-wrapper">
                                            <span class="evaluation-sort-label">Class Code</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="subject" class="sortable" data-sort-state="none">
                                        <span class="evaluation-sort-wrapper">
                                            <span class="evaluation-sort-label">Subject</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="assignments" class="sortable" data-sort-state="none">
                                        <span class="evaluation-sort-wrapper">
                                            <span class="evaluation-sort-label">Assignments</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">Actions</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="coursesTableBody"></tbody>
                        </table>
                    </div>

                    <div class="evaluation-bulk-bar d-none" id="courseBulkBar">
                        <span class="fw-semibold" id="courseSelectedCount">0 Selected</span>
                        <button type="button" class="evaluation-bulk-btn evaluation-bulk-btn--danger" data-bulk-action="delete-course">
                            <i class="bx bx-trash"></i> Delete
                        </button>
                        <button type="button" class="evaluation-bulk-close" data-bulk-action="clear-course" 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="Courses pagination">
                                <ul class="pagination justify-content-end mb-0" data-table-pagination></ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="assignmentsSection" class="course-section d-none">
            <div class="card evaluation-card evaluation-card--table" data-table-controller data-table-id="assignmentsTable">
                <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">
                                <label for="assignmentsRowsPerPage" class="text-muted small">Lines per page</label>
                                <select id="assignmentsRowsPerPage" 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>
                                <button type="button" class="btn btn-course-primary" data-bs-toggle="modal" data-bs-target="#assignmentCreateModal">
                                    <i class="fa-solid fa-user-gear me-2"></i>Assign Course
                                </button>
                            </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="assignmentFilterToggle" 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 text-uppercase small">Faculty</label>
                                            <select id="assignmentFilterFaculty" class="form-select">
                                                <option value="all">All</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label text-uppercase small">Academic Year</label>
                                            <select id="assignmentFilterYear" class="form-select">
                                                <option value="all">All</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label text-uppercase small">Semester</label>
                                            <select id="assignmentFilterSemester" class="form-select">
                                                <option value="all">All</option>
                                            </select>
                                        </div>
                                        <div class="d-flex justify-content-end">
                                            <button type="button" class="btn btn-link p-0 table-filter-reset" id="assignmentFilterReset">Reset Filters</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="evaluation-search-wrapper">
                                    <i class="bx bx-search evaluation-search-icon"></i>
                                    <input type="text" id="assignmentsSearch" class="evaluation-search-input" data-table-search placeholder="Search...">
                                    <button type="button" class="evaluation-search-clear" id="assignmentsSearchClear">&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="assignmentsTable">
                            <thead>
                                <tr>
                                    <th class="text-center">
                                        <input type="checkbox" class="form-check-input evaluation-checkbox" id="assignmentsSelectAll">
                                    </th>
                                    <th data-sort-key="faculty" class="sortable" data-sort-state="none">
                                        <span class="evaluation-sort-wrapper">
                                            <span class="evaluation-sort-label">Faculty</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="course" class="sortable" data-sort-state="none">
                                        <span class="evaluation-sort-wrapper">
                                            <span class="evaluation-sort-label">Course</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="year" class="sortable" data-sort-state="none">
                                        <span class="evaluation-sort-wrapper">
                                            <span class="evaluation-sort-label">Academic Year</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="semester" class="sortable" data-sort-state="none">
                                        <span class="evaluation-sort-wrapper">
                                            <span class="evaluation-sort-label">Semester</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">Actions</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="assignmentsTableBody"></tbody>
                        </table>
                    </div>

                    <div class="evaluation-bulk-bar d-none" id="assignmentBulkBar">
                        <span class="fw-semibold" id="assignmentSelectedCount">0 Selected</span>
                        <button type="button" class="evaluation-bulk-btn evaluation-bulk-btn--danger" data-bulk-action="delete-assignment">
                            <i class="bx bx-trash"></i> Delete
                        </button>
                        <button type="button" class="evaluation-bulk-close" data-bulk-action="clear-assignment" 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="Assignments pagination">
                                <ul class="pagination justify-content-end mb-0" data-table-pagination></ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Create Course Modal --}}
    <div class="modal fade" id="courseCreateModal" tabindex="-1" aria-labelledby="courseCreateModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered evaluation-modal-dialog evaluation-modal-dialog--narrow">
            <div class="modal-content evaluation-card">
                <form id="courseCreateForm">
                    @csrf
                    <div class="modal-header evaluation-modal-header">
                        <h5 class="modal-title mb-0" id="courseCreateModalLabel">Add Course</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="createClassCode">Class Code</label>
                            <input type="text" name="class_code" id="createClassCode" class="form-control" placeholder="e.g. IT101" required>
                        </div>
                        <div class="mb-0">
                            <label class="form-label" for="createSubjectCode">Subject</label>
                            <input type="text" name="subject_code" id="createSubjectCode" class="form-control" placeholder="e.g. Introduction to IT" required>
                        </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-course-primary evaluation-modal-btn" data-default-text="Save" data-loading-text="Saving...">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Edit Course Modal --}}
    <div class="modal fade" id="courseEditModal" tabindex="-1" aria-labelledby="courseEditModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered evaluation-modal-dialog evaluation-modal-dialog--narrow">
            <div class="modal-content evaluation-card">
                <form id="courseEditForm">
                    @csrf
                    <input type="hidden" name="course_id" value="">
                    <div class="modal-header evaluation-modal-header">
                        <h5 class="modal-title mb-0" id="courseEditModalLabel">Edit Course</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="editClassCode">Class Code</label>
                            <input type="text" name="class_code" id="editClassCode" class="form-control" required>
                        </div>
                        <div class="mb-0">
                            <label class="form-label" for="editSubjectCode">Subject</label>
                            <input type="text" name="subject_code" id="editSubjectCode" class="form-control" required>
                        </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-course-primary evaluation-modal-btn" data-default-text="Save Changes" data-loading-text="Saving...">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Delete Course Modal --}}
    <div class="modal fade" id="courseDeleteModal" tabindex="-1" aria-labelledby="courseDeleteModalLabel" 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="courseDeleteModalLabel">Delete Course</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">Are you sure you want to delete <span class="fw-semibold" id="courseDeleteName">this course</span>? This action cannot be undone.</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="confirmCourseDeleteBtn">Delete</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Bulk Delete Courses Modal --}}
    <div class="modal fade" id="courseBulkDeleteModal" tabindex="-1" aria-labelledby="courseBulkDeleteModalLabel" 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="courseBulkDeleteModalLabel">Delete Selected Courses</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="courseBulkDeleteCount">0</span> course(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="confirmCourseBulkDeleteBtn">Delete Selected</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Assign Course Modal --}}
    <div class="modal fade" id="assignmentCreateModal" tabindex="-1" aria-labelledby="assignmentCreateModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered evaluation-modal-dialog evaluation-modal-dialog--narrow">
            <div class="modal-content evaluation-card">
                <form id="assignmentCreateForm">
                    @csrf
                    <div class="modal-header evaluation-modal-header">
                        <h5 class="modal-title mb-0" id="assignmentCreateModalLabel">Assign Course</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="createAssignmentFacultyToggle">Faculty Member</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"
                                        id="createAssignmentFacultyToggle"
                                        data-bs-toggle="dropdown"
                                        data-bs-display="static"
                                        data-dropdown-toggle>
                                    <span class="searchable-dropdown-label is-placeholder"
                                          data-dropdown-label
                                          data-placeholder-text="-- Select Faculty --">-- Select Faculty --</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" data-dropdown-list>
                                        @foreach($faculties as $faculty)
                                            @php
                                                $rawFacultyName = optional($faculty->user)->name ?? $faculty->name ?? '';
                                                $facultyEmail = optional($faculty->user)->email ?? '';
                                                $facultyDisplayName = trim($rawFacultyName) === '' ? 'Unknown' : $rawFacultyName;
                                                $facultyFilter = strtolower(trim($rawFacultyName . ' ' . $facultyEmail));
                                            @endphp
                                            <button type="button"
                                                    class="dropdown-item"
                                                    data-dropdown-option
                                                    data-option-value="{{ $faculty->id }}"
                                                    data-option-label="{{ $facultyDisplayName }}"
                                                    data-option-filter="{{ $facultyFilter }}">
                                                <span>{{ $facultyDisplayName }}</span>
                                                @if($facultyEmail)
                                                    <small>{{ $facultyEmail }}</small>
                                                @endif
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                                <input type="hidden" name="faculty_id" id="createAssignmentFaculty" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="createAssignmentCourseToggle">Course</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"
                                        id="createAssignmentCourseToggle"
                                        data-bs-toggle="dropdown"
                                        data-bs-display="static"
                                        data-dropdown-toggle>
                                    <span class="searchable-dropdown-label is-placeholder"
                                          data-dropdown-label
                                          data-placeholder-text="-- Select Course --">-- Select Course --</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" data-dropdown-list>
                                        @foreach($courses as $course)
                                            @php
                                                $courseCodeRaw = $course->class_code ?? '';
                                                $courseSubjectRaw = $course->subject_code ?? '';
                                                $courseCodeDisplay = trim($courseCodeRaw);
                                                $courseSubjectDisplay = trim($courseSubjectRaw);
                                                $courseLabel = $courseCodeDisplay;
                                                if ($courseSubjectDisplay !== '') {
                                                    $courseLabel = ($courseLabel !== '' ? $courseLabel . ' - ' : '') . $courseSubjectDisplay;
                                                }
                                                $courseFilter = strtolower(trim($courseCodeRaw . ' ' . $courseSubjectRaw));
                                            @endphp
                                            <button type="button"
                                                    class="dropdown-item"
                                                    data-dropdown-option
                                                    data-option-value="{{ $course->id }}"
                                                    data-option-label="{{ $courseLabel }}"
                                                    data-option-filter="{{ $courseFilter }}">
                                                <span>{{ $courseCodeDisplay }}</span>
                                                @if($courseSubjectDisplay !== '')
                                                    <small>{{ $courseSubjectDisplay }}</small>
                                                @endif
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                                <input type="hidden" name="course_id" id="createAssignmentCourse" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="createAssignmentYearToggle">Academic Year</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"
                                        id="createAssignmentYearToggle"
                                        data-bs-toggle="dropdown"
                                        data-bs-display="static"
                                        data-dropdown-toggle>
                                    <span class="searchable-dropdown-label is-placeholder"
                                          data-dropdown-label
                                          data-placeholder-text="-- Select Academic Year --">-- Select Academic Year --</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" data-dropdown-list>
                                        @foreach($academicYearOptions as $year)
                                            <button type="button"
                                                    class="dropdown-item"
                                                    data-dropdown-option
                                                    data-option-value="{{ $year }}"
                                                    data-option-label="{{ $year }}"
                                                    data-option-filter="{{ strtolower($year) }}">
                                                <span>{{ $year }}</span>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                                <input type="hidden" name="academic_year" id="createAssignmentYear" required>
                            </div>
                        </div>
                        <div class="mb-0">
                            <label class="form-label" for="createAssignmentSemesterToggle">Semester</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"
                                        id="createAssignmentSemesterToggle"
                                        data-bs-toggle="dropdown"
                                        data-bs-display="static"
                                        data-dropdown-toggle>
                                    <span class="searchable-dropdown-label is-placeholder"
                                          data-dropdown-label
                                          data-placeholder-text="-- Select Semester --">-- Select Semester --</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" data-dropdown-list>
                                        @foreach(['1st' => '1st Semester', '2nd' => '2nd Semester', 'Summer' => 'Summer'] as $value => $label)
                                            <button type="button"
                                                    class="dropdown-item"
                                                    data-dropdown-option
                                                    data-option-value="{{ $value }}"
                                                    data-option-label="{{ $label }}"
                                                    data-option-filter="{{ strtolower($label) }}">
                                                <span>{{ $label }}</span>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                                <input type="hidden" name="semester" id="createAssignmentSemester" required>
                            </div>
                        </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-course-primary evaluation-modal-btn" data-default-text="Assign" data-loading-text="Assigning...">Assign</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Edit Assignment Modal --}}
    <div class="modal fade" id="assignmentEditModal" tabindex="-1" aria-labelledby="assignmentEditModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered evaluation-modal-dialog evaluation-modal-dialog--narrow">
            <div class="modal-content evaluation-card">
                <form id="assignmentEditForm">
                    @csrf
                    <input type="hidden" name="assignment_id" value="">
                    <div class="modal-header evaluation-modal-header">
                        <h5 class="modal-title mb-0" id="assignmentEditModalLabel">Edit Assignment</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="editAssignmentFacultyToggle">Faculty Member</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"
                                        id="editAssignmentFacultyToggle"
                                        data-bs-toggle="dropdown"
                                        data-bs-display="static"
                                        data-dropdown-toggle>
                                    <span class="searchable-dropdown-label is-placeholder"
                                          data-dropdown-label
                                          data-placeholder-text="-- Select Faculty --">-- Select Faculty --</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" data-dropdown-list>
                                        @foreach($faculties as $faculty)
                                            @php
                                                $rawFacultyName = optional($faculty->user)->name ?? $faculty->name ?? '';
                                                $facultyEmail = optional($faculty->user)->email ?? '';
                                                $facultyDisplayName = trim($rawFacultyName) === '' ? 'Unknown' : $rawFacultyName;
                                                $facultyFilter = strtolower(trim($rawFacultyName . ' ' . $facultyEmail));
                                            @endphp
                                            <button type="button"
                                                    class="dropdown-item"
                                                    data-dropdown-option
                                                    data-option-value="{{ $faculty->id }}"
                                                    data-option-label="{{ $facultyDisplayName }}"
                                                    data-option-filter="{{ $facultyFilter }}">
                                                <span>{{ $facultyDisplayName }}</span>
                                                @if($facultyEmail)
                                                    <small>{{ $facultyEmail }}</small>
                                                @endif
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                                <input type="hidden" name="faculty_id" id="editAssignmentFaculty" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="editAssignmentCourseToggle">Course</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"
                                        id="editAssignmentCourseToggle"
                                        data-bs-toggle="dropdown"
                                        data-bs-display="static"
                                        data-dropdown-toggle>
                                    <span class="searchable-dropdown-label is-placeholder"
                                          data-dropdown-label
                                          data-placeholder-text="-- Select Course --">-- Select Course --</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" data-dropdown-list>
                                        @foreach($courses as $course)
                                            @php
                                                $courseCodeRaw = $course->class_code ?? '';
                                                $courseSubjectRaw = $course->subject_code ?? '';
                                                $courseCodeDisplay = trim($courseCodeRaw);
                                                $courseSubjectDisplay = trim($courseSubjectRaw);
                                                $courseLabel = $courseCodeDisplay;
                                                if ($courseSubjectDisplay !== '') {
                                                    $courseLabel = ($courseLabel !== '' ? $courseLabel . ' - ' : '') . $courseSubjectDisplay;
                                                }
                                                $courseFilter = strtolower(trim($courseCodeRaw . ' ' . $courseSubjectRaw));
                                            @endphp
                                            <button type="button"
                                                    class="dropdown-item"
                                                    data-dropdown-option
                                                    data-option-value="{{ $course->id }}"
                                                    data-option-label="{{ $courseLabel }}"
                                                    data-option-filter="{{ $courseFilter }}">
                                                <span>{{ $courseCodeDisplay }}</span>
                                                @if($courseSubjectDisplay !== '')
                                                    <small>{{ $courseSubjectDisplay }}</small>
                                                @endif
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                                <input type="hidden" name="course_id" id="editAssignmentCourse" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="editAssignmentYearToggle">Academic Year</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"
                                        id="editAssignmentYearToggle"
                                        data-bs-toggle="dropdown"
                                        data-bs-display="static"
                                        data-dropdown-toggle>
                                    <span class="searchable-dropdown-label is-placeholder"
                                          data-dropdown-label
                                          data-placeholder-text="-- Select Academic Year --">-- Select Academic Year --</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" data-dropdown-list>
                                        @foreach($academicYearOptions as $year)
                                            <button type="button"
                                                    class="dropdown-item"
                                                    data-dropdown-option
                                                    data-option-value="{{ $year }}"
                                                    data-option-label="{{ $year }}"
                                                    data-option-filter="{{ strtolower($year) }}">
                                                <span>{{ $year }}</span>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                                <input type="hidden" name="academic_year" id="editAssignmentYear" required>
                            </div>
                        </div>
                        <div class="mb-0">
                            <label class="form-label" for="editAssignmentSemesterToggle">Semester</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"
                                        id="editAssignmentSemesterToggle"
                                        data-bs-toggle="dropdown"
                                        data-bs-display="static"
                                        data-dropdown-toggle>
                                    <span class="searchable-dropdown-label is-placeholder"
                                          data-dropdown-label
                                          data-placeholder-text="-- Select Semester --">-- Select Semester --</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" data-dropdown-list>
                                        @foreach(['1st' => '1st Semester', '2nd' => '2nd Semester', 'Summer' => 'Summer'] as $value => $label)
                                            <button type="button"
                                                    class="dropdown-item"
                                                    data-dropdown-option
                                                    data-option-value="{{ $value }}"
                                                    data-option-label="{{ $label }}"
                                                    data-option-filter="{{ strtolower($label) }}">
                                                <span>{{ $label }}</span>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                                <input type="hidden" name="semester" id="editAssignmentSemester" required>
                            </div>
                        </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-course-primary evaluation-modal-btn" data-default-text="Save Changes" data-loading-text="Saving...">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Delete Assignment Modal --}}
    <div class="modal fade" id="assignmentDeleteModal" tabindex="-1" aria-labelledby="assignmentDeleteModalLabel" 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="assignmentDeleteModalLabel">Delete Assignment</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">Are you sure you want to remove <span class="fw-semibold" id="assignmentDeleteName">this assignment</span>? This action cannot be undone.</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="confirmAssignmentDeleteBtn">Delete</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Bulk Delete Assignments Modal --}}
    <div class="modal fade" id="assignmentBulkDeleteModal" tabindex="-1" aria-labelledby="assignmentBulkDeleteModalLabel" 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="assignmentBulkDeleteModalLabel">Delete Selected Assignments</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="assignmentBulkDeleteCount">0</span> assignment(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="confirmAssignmentBulkDeleteBtn">Delete Selected</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Import Courses Modal --}}
    <div class="modal fade" id="courseImportModal" tabindex="-1" aria-labelledby="courseImportModalLabel" 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" action="{{ route('dm.courses.import') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header evaluation-modal-header">
                        <h5 class="modal-title mb-0" id="courseImportModalLabel">Import Courses</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-0">
                            <label class="form-label" for="courseImportFile">Select File</label>
                            <input type="file" class="form-control" id="courseImportFile" name="file" accept=".csv,.xlsx,.xls" required>
                        </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-course-primary evaluation-modal-btn">Import</button>
                    </div>
                </form>
            </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' }],
        };
        function getPillColor(value, paletteName) {
            const palette = PILL_PALETTES[paletteName];
            if (!palette || !palette.length) {
                return null;
            }
            return palette[0];
        }

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

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

        document.addEventListener('DOMContentLoaded', () => {
            initSearchableDropdowns();
            window.coursePage = new CoursePage({
                courses: @json($courseItems),
                assignments: @json($assignmentItems),
                faculties: @json($facultyOptions),
                coursesRoot: document.querySelector('[data-table-id="coursesTable"]'),
                assignmentsRoot: document.querySelector('[data-table-id="assignmentsTable"]'),
            });
        });

        function initSearchableDropdowns(context = document) {
            const dropdowns = context.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 toggle = 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 resetSelection = () => {
                    if (hiddenInput) {
                        hiddenInput.value = '';
                    }
                    setLabel(placeholderText, true);
                };

                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) => {
                    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 (toggle && typeof bootstrap !== 'undefined' && bootstrap.Dropdown) {
                        const instance = bootstrap.Dropdown.getOrCreateInstance(toggle);
                        instance.hide();
                    }
                };

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

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

                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(() => {
                            resetSelection();
                            if (searchInput) {
                                searchInput.value = '';
                            }
                            applySearchFilter();
                        }, 0);
                    });
                }

                const initialValue = hiddenInput?.value?.trim();
                if (initialValue) {
                    const initialOption = getOptions().find((option) => option.dataset.optionValue === initialValue);
                    const initialLabel = initialOption?.dataset?.optionLabel
                        ?? initialOption?.querySelector('span')?.textContent?.trim();
                    setLabel(initialLabel || placeholderText, !initialLabel);
                } else {
                    resetSelection();
                }

                applySearchFilter();

                dropdown.__searchableDropdown = {
                    applyFilter: applySearchFilter,
                    resetSelection,
                    setLabel,
                    placeholder: placeholderText,
                };
            });
        }

        class CoursePage {
            constructor({ courses, assignments, faculties, coursesRoot, assignmentsRoot }) {
                this.courses = Array.isArray(courses) ? courses : [];
                this.assignments = Array.isArray(assignments) ? assignments : [];
                this.faculties = Array.isArray(faculties) ? faculties : [];

                this.coursesRoot = coursesRoot || null;
                this.assignmentsRoot = assignmentsRoot || null;

                this.courseTableBody = document.getElementById('coursesTableBody');
                this.assignmentTableBody = document.getElementById('assignmentsTableBody');

                this.courseSelectAll = document.getElementById('coursesSelectAll');
                this.assignmentSelectAll = document.getElementById('assignmentsSelectAll');

                this.courseBulkBar = document.getElementById('courseBulkBar');
                this.assignmentBulkBar = document.getElementById('assignmentBulkBar');
                this.courseSelectedCountEl = document.getElementById('courseSelectedCount');
                this.assignmentSelectedCountEl = document.getElementById('assignmentSelectedCount');
                this.assignmentFilters = { faculty: 'all', year: 'all', semester: 'all' };
                this.assignmentFilterControls = {
                    faculty: document.getElementById('assignmentFilterFaculty'),
                    year: document.getElementById('assignmentFilterYear'),
                    semester: document.getElementById('assignmentFilterSemester'),
                };
                this.assignmentFilterReset = document.getElementById('assignmentFilterReset');
                this.assignmentFilterToggle = document.getElementById('assignmentFilterToggle');

                this.courseCreateModalEl = document.getElementById('courseCreateModal');
                this.courseEditModalEl = document.getElementById('courseEditModal');
                this.courseDeleteModalEl = document.getElementById('courseDeleteModal');
                this.courseBulkDeleteModalEl = document.getElementById('courseBulkDeleteModal');

                this.assignmentCreateModalEl = document.getElementById('assignmentCreateModal');
                this.assignmentEditModalEl = document.getElementById('assignmentEditModal');
                this.assignmentDeleteModalEl = document.getElementById('assignmentDeleteModal');
                this.assignmentBulkDeleteModalEl = document.getElementById('assignmentBulkDeleteModal');

                const hasBootstrap = typeof bootstrap !== 'undefined' && bootstrap?.Modal;
                this.courseCreateModal = this.courseCreateModalEl && hasBootstrap ? new bootstrap.Modal(this.courseCreateModalEl) : null;
                this.courseEditModal = this.courseEditModalEl && hasBootstrap ? new bootstrap.Modal(this.courseEditModalEl) : null;
                this.courseDeleteModal = this.courseDeleteModalEl && hasBootstrap ? new bootstrap.Modal(this.courseDeleteModalEl) : null;
                this.courseBulkDeleteModal = this.courseBulkDeleteModalEl && hasBootstrap ? new bootstrap.Modal(this.courseBulkDeleteModalEl) : null;

                this.assignmentCreateModal = this.assignmentCreateModalEl && hasBootstrap ? new bootstrap.Modal(this.assignmentCreateModalEl) : null;
                this.assignmentEditModal = this.assignmentEditModalEl && hasBootstrap ? new bootstrap.Modal(this.assignmentEditModalEl) : null;
                this.assignmentDeleteModal = this.assignmentDeleteModalEl && hasBootstrap ? new bootstrap.Modal(this.assignmentDeleteModalEl) : null;
                this.assignmentBulkDeleteModal = this.assignmentBulkDeleteModalEl && hasBootstrap ? new bootstrap.Modal(this.assignmentBulkDeleteModalEl) : null;

                this.alertContainer = document.getElementById('courseAlertContainer');

                this.courseSelection = new Set();
                this.assignmentSelection = new Set();
                this.courseSortState = { key: null, direction: 'asc' };
                this.assignmentSortState = { key: null, direction: 'asc' };
                this.courseSortHeaders = [];
                this.assignmentSortHeaders = [];

                this.pendingCourseDeleteId = null;
                this.pendingAssignmentDeleteId = null;
                this.pendingCourseBulk = null;
                this.pendingAssignmentBulk = null;

                this.currentSection = 'courses';

                this.sectionButtons = document.querySelectorAll('[data-course-section]');
                this.sections = {
                    courses: document.getElementById('coursesSection'),
                    assignments: document.getElementById('assignmentsSection'),
                };

                this.courseController = null;
                this.assignmentController = null;

                this.csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '';

                this.init();
            }

            init() {
                this.bindSectionButtons();
                this.bindForms();
                this.bindSearchInputs();
                this.bindBulkBars();
                this.initCourseSorting();
                this.initAssignmentSorting();
                this.initAssignmentFilters();
                this.renderCourseTable();
                this.renderAssignmentTable();
                this.refreshCourseDropdownOptions();
                this.initSelectStyling();
                this.setActiveSection('courses');
            }

            bindSectionButtons() {
                this.sectionButtons.forEach((button) => {
                    button.addEventListener('click', () => {
                        const section = button.dataset.courseSection;
                        if (section) {
                            this.setActiveSection(section);
                        }
                    });
                });
            }

            setActiveSection(section) {
                if (!['courses', 'assignments'].includes(section)) {
                    return;
                }

                this.currentSection = section;
                Object.entries(this.sections).forEach(([key, element]) => {
                    if (!element) {
                        return;
                    }
                    element.classList.toggle('d-none', key !== section);
                });

                this.sectionButtons.forEach((button) => {
                    button.classList.toggle('active', button.dataset.courseSection === section);
                });
            }

            bindForms() {
                const courseCreateForm = document.getElementById('courseCreateForm');
                if (courseCreateForm) {
                    courseCreateForm.addEventListener('submit', (event) => {
                        event.preventDefault();
                        const data = this.formToObject(courseCreateForm);
                        this.handleCreateCourse(courseCreateForm, data);
                    });
                    this.courseCreateModalEl?.addEventListener('hidden.bs.modal', () => {
                        courseCreateForm.reset();
                    });
                }

                const courseEditForm = document.getElementById('courseEditForm');
                if (courseEditForm) {
                    courseEditForm.addEventListener('submit', (event) => {
                        event.preventDefault();
                        const data = this.formToObject(courseEditForm);
                        this.handleUpdateCourse(courseEditForm, data);
                    });
                }

                const confirmCourseDelete = document.getElementById('confirmCourseDeleteBtn');
                if (confirmCourseDelete) {
                    confirmCourseDelete.addEventListener('click', () => {
                        if (this.pendingCourseDeleteId) {
                            this.handleDeleteCourse(confirmCourseDelete, this.pendingCourseDeleteId);
                        }
                    });
                }

                const confirmCourseBulk = document.getElementById('confirmCourseBulkDeleteBtn');
                if (confirmCourseBulk) {
                    confirmCourseBulk.addEventListener('click', () => {
                        if (Array.isArray(this.pendingCourseBulk) && this.pendingCourseBulk.length) {
                            this.executeBulkCourseDelete(confirmCourseBulk, this.pendingCourseBulk.slice());
                        }
                    });
                }

                const assignmentCreateForm = document.getElementById('assignmentCreateForm');
                if (assignmentCreateForm) {
                    assignmentCreateForm.addEventListener('submit', (event) => {
                        event.preventDefault();
                        const data = this.formToObject(assignmentCreateForm);
                        this.handleCreateAssignment(assignmentCreateForm, data);
                    });
                    this.assignmentCreateModalEl?.addEventListener('hidden.bs.modal', () => {
                        assignmentCreateForm.reset();
                    });
                }

                const assignmentEditForm = document.getElementById('assignmentEditForm');
                if (assignmentEditForm) {
                    assignmentEditForm.addEventListener('submit', (event) => {
                        event.preventDefault();
                        const data = this.formToObject(assignmentEditForm);
                        this.handleUpdateAssignment(assignmentEditForm, data);
                    });
                }

                const confirmAssignmentDelete = document.getElementById('confirmAssignmentDeleteBtn');
                if (confirmAssignmentDelete) {
                    confirmAssignmentDelete.addEventListener('click', () => {
                        if (this.pendingAssignmentDeleteId) {
                            this.handleDeleteAssignment(confirmAssignmentDelete, this.pendingAssignmentDeleteId);
                        }
                    });
                }

                const confirmAssignmentBulk = document.getElementById('confirmAssignmentBulkDeleteBtn');
                if (confirmAssignmentBulk) {
                    confirmAssignmentBulk.addEventListener('click', () => {
                        if (Array.isArray(this.pendingAssignmentBulk) && this.pendingAssignmentBulk.length) {
                            this.executeBulkAssignmentDelete(confirmAssignmentBulk, this.pendingAssignmentBulk.slice());
                        }
                    });
                }
            }

            initSelectStyling() {
                const selects = document.querySelectorAll('.evaluation-modal-body select.form-select');
                if (!selects.length) {
                    return;
                }

                selects.forEach((select) => {
                    const updateState = () => this.updateSelectPlaceholderState(select);
                    updateState();
                    select.addEventListener('change', updateState);

                    const parentForm = select.closest('form');
                    if (parentForm) {
                        parentForm.addEventListener('reset', () => {
                            setTimeout(updateState, 0);
                        });
                    }
                });
            }

            updateSelectPlaceholderState(select) {
                if (!select) {
                    return;
                }

                const value = select.value;
                const hasValue = value != null && String(value).trim() !== '';
                select.classList.toggle('is-placeholder', !hasValue);
            }

            setDropdownValue(hiddenInput, value, labelText = '') {
                if (!hiddenInput) {
                    return;
                }

                hiddenInput.value = value ?? '';
                const dropdown = hiddenInput.closest('[data-searchable-dropdown]');
                if (!dropdown) {
                    return;
                }

                const labelEl = dropdown.querySelector('[data-dropdown-label]');
                const placeholder = labelEl?.dataset?.placeholderText?.trim()
                    || dropdown.__searchableDropdown?.placeholder
                    || '-- Select Option --';

                if (value && value !== '') {
                    let displayLabel = labelText && labelText.trim() !== '' ? labelText : '';
                    if (!displayLabel) {
                        const option = Array.from(dropdown.querySelectorAll('[data-dropdown-option]'))
                            .find((opt) => opt.dataset.optionValue === String(value));
                        displayLabel = option?.dataset?.optionLabel
                            ?? option?.querySelector('span')?.textContent?.trim()
                            ?? placeholder;
                    }
                    if (dropdown.__searchableDropdown?.setLabel) {
                        dropdown.__searchableDropdown.setLabel(displayLabel, false);
                    } else if (labelEl) {
                        labelEl.textContent = displayLabel;
                        labelEl.classList.remove('is-placeholder');
                    }
                } else if (dropdown.__searchableDropdown?.setLabel) {
                    dropdown.__searchableDropdown.setLabel(placeholder, true);
                } else if (labelEl) {
                    labelEl.textContent = placeholder;
                    labelEl.classList.add('is-placeholder');
                }
            }

            ensureDropdownOption(hiddenInput, { value, label, description = '' }) {
                if (!hiddenInput || value == null) {
                    return;
                }

                const dropdown = hiddenInput.closest('[data-searchable-dropdown]');
                if (!dropdown) {
                    return;
                }

                const list = dropdown.querySelector('[data-dropdown-list]');
                if (!list) {
                    return;
                }

                const valueStr = String(value);
                const existing = Array.from(list.querySelectorAll('[data-dropdown-option]'))
                    .find((option) => option.dataset.optionValue === valueStr);
                if (existing) {
                    return existing;
                }

                const button = document.createElement('button');
                button.type = 'button';
                button.className = 'dropdown-item';
                button.setAttribute('data-dropdown-option', '');
                button.dataset.optionValue = valueStr;

                const resolvedLabel = label && label.trim() !== '' ? label : `Option #${valueStr}`;
                button.dataset.optionLabel = resolvedLabel;
                button.dataset.optionFilter = (resolvedLabel + ' ' + (description || '')).toLowerCase();

                const span = document.createElement('span');
                span.textContent = resolvedLabel;
                button.appendChild(span);

                if (description) {
                    const small = document.createElement('small');
                    small.textContent = description;
                    button.appendChild(small);
                }

                list.appendChild(button);
                dropdown.__searchableDropdown?.applyFilter?.();
                return button;
            }

            refreshCourseDropdownOptions() {
                const targetInputs = [
                    document.getElementById('createAssignmentCourse'),
                    document.getElementById('editAssignmentCourse'),
                ].filter(Boolean);

                if (!targetInputs.length) {
                    return;
                }

                const optionsHtml = (this.courses || [])
                    .slice()
                    .sort((a, b) => {
                        const labelA = this.getCourseDropdownLabel(a).toLowerCase();
                        const labelB = this.getCourseDropdownLabel(b).toLowerCase();
                        return labelA.localeCompare(labelB);
                    })
                    .map((course) => this.buildCourseDropdownOption(course))
                    .join('');

                targetInputs.forEach((input) => {
                    this.replaceDropdownOptions(input, optionsHtml);
                });
            }

            getCourseDropdownLabel(course) {
                if (!course) {
                    return '';
                }
                const code = this.formatCourseText(course.class_code, '');
                const subject = this.formatCourseText(course.subject_code, '');
                const fallback = course.id != null ? `Course #${course.id}` : 'Course';
                return [code || null, subject || null].filter(Boolean).join(' - ') || fallback;
            }

            buildCourseDropdownOption(course) {
                if (!course) {
                    return '';
                }
                const code = this.formatCourseText(course.class_code, '');
                const subject = this.formatCourseText(course.subject_code, '');
                const spanValue = code || subject || `Course #${course.id ?? ''}`;
                const includeSubject = Boolean(code && subject);
                const subjectMarkup = includeSubject ? `<small>${this.escapeHtml(subject)}</small>` : '';
                const labelAttr = this.escapeAttribute(this.getCourseDropdownLabel(course));
                const searchValue = `${course.class_code ?? ''} ${course.subject_code ?? ''}`.trim().toLowerCase();
                const searchAttr = this.escapeAttribute(searchValue || spanValue.toLowerCase());

                return `
                    <button type="button"
                            class="dropdown-item"
                            data-dropdown-option
                            data-option-value="${this.escapeAttribute(String(course.id ?? ''))}"
                            data-option-label="${labelAttr}"
                            data-option-filter="${searchAttr}">
                        <span>${this.escapeHtml(spanValue)}</span>
                        ${subjectMarkup}
                    </button>
                `;
            }

            replaceDropdownOptions(hiddenInput, optionsHtml) {
                if (!hiddenInput) {
                    return;
                }
                const dropdown = hiddenInput.closest('[data-searchable-dropdown]');
                if (!dropdown) {
                    return;
                }
                const list = dropdown.querySelector('[data-dropdown-list]');
                if (!list) {
                    return;
                }

                if (optionsHtml && optionsHtml.trim() !== '') {
                    list.innerHTML = optionsHtml;
                } else {
                    list.innerHTML = '<div class="text-muted small px-2 py-1">No courses available</div>';
                }

                dropdown.__searchableDropdown?.applyFilter?.();

                const currentValue = hiddenInput.value;
                if (currentValue) {
                    const match = Array.from(list.querySelectorAll('[data-dropdown-option]'))
                        .find((option) => option.dataset.optionValue === currentValue);
                    if (match) {
                        const labelText = match.dataset.optionLabel
                            || match.querySelector('span')?.textContent?.trim()
                            || '';
                        this.setDropdownValue(hiddenInput, currentValue, labelText);
                        return;
                    }
                }

                hiddenInput.value = '';
                dropdown.__searchableDropdown?.resetSelection?.();
            }

            bindSearchInputs() {
                this.bindSearchPair(
                    document.getElementById('coursesSearch'),
                    document.getElementById('coursesSearchClear')
                );
                this.bindSearchPair(
                    document.getElementById('assignmentsSearch'),
                    document.getElementById('assignmentsSearchClear')
                );
            }

            bindSearchPair(input, clear) {
                if (!input || !clear) {
                    return;
                }

                const toggle = () => {
                    if (input.value.trim() === '') {
                        clear.classList.remove('is-visible');
                    } else {
                        clear.classList.add('is-visible');
                    }
                };

                input.addEventListener('input', toggle);
                clear.addEventListener('click', () => {
                    input.value = '';
                    toggle();
                    input.dispatchEvent(new Event('input', { bubbles: true }));
                });

                toggle();
            }

            bindBulkBars() {
                if (this.courseBulkBar) {
                    this.courseBulkBar.addEventListener('click', (event) => {
                        const button = event.target.closest('[data-bulk-action]');
                        if (!button) {
                            return;
                        }
                        const action = button.dataset.bulkAction;
                        if (action === 'clear-course') {
                            this.clearCourseSelection();
                        } else if (action === 'delete-course') {
                            this.promptBulkCourseDelete();
                        }
                    });
                }

                if (this.assignmentBulkBar) {
                    this.assignmentBulkBar.addEventListener('click', (event) => {
                        const button = event.target.closest('[data-bulk-action]');
                        if (!button) {
                            return;
                        }
                        const action = button.dataset.bulkAction;
                        if (action === 'clear-assignment') {
                            this.clearAssignmentSelection();
                        } else if (action === 'delete-assignment') {
                            this.promptBulkAssignmentDelete();
                        }
                    });
                }
            }

            initCourseSorting() {
                this.courseSortHeaders = Array.from(document.querySelectorAll('#coursesTable thead th[data-sort-key]'));
                this.courseSortHeaders.forEach((header) => {
                    header.dataset.sortState = header.dataset.sortState || 'none';
                    header.addEventListener('click', () => {
                        const sortKey = header.dataset.sortKey;
                        if (!sortKey) {
                            return;
                        }

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

                        this.updateCourseSortIndicators();
                        this.renderCourseTable();
                    });
                });
                this.updateCourseSortIndicators();
            }

            initAssignmentSorting() {
                this.assignmentSortHeaders = Array.from(document.querySelectorAll('#assignmentsTable thead th[data-sort-key]'));
                this.assignmentSortHeaders.forEach((header) => {
                    header.dataset.sortState = header.dataset.sortState || 'none';
                    header.addEventListener('click', () => {
                        const sortKey = header.dataset.sortKey;
                        if (!sortKey) {
                            return;
                        }

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

                        this.updateAssignmentSortIndicators();
                        this.renderAssignmentTable();
                    });
                });
                this.updateAssignmentSortIndicators();
            }

            updateCourseSortIndicators() {
                if (!Array.isArray(this.courseSortHeaders)) {
                    return;
                }

                this.courseSortHeaders.forEach((header) => {
                    header.classList.remove('sorted-asc', 'sorted-desc');
                    header.dataset.sortState = 'none';

                    if (header.dataset.sortKey === this.courseSortState.key) {
                        const state = this.courseSortState.direction === 'asc' ? 'sorted-asc' : 'sorted-desc';
                        header.classList.add(state);
                        header.dataset.sortState = this.courseSortState.direction;
                    }
                });
            }

            updateAssignmentSortIndicators() {
                if (!Array.isArray(this.assignmentSortHeaders)) {
                    return;
                }

                this.assignmentSortHeaders.forEach((header) => {
                    header.classList.remove('sorted-asc', 'sorted-desc');
                    header.dataset.sortState = 'none';

                    if (header.dataset.sortKey === this.assignmentSortState.key) {
                        const state = this.assignmentSortState.direction === 'asc' ? 'sorted-asc' : 'sorted-desc';
                        header.classList.add(state);
                        header.dataset.sortState = this.assignmentSortState.direction;
                    }
                });
            }

            renderCourseTable() {
                if (!this.courseTableBody) {
                    return;
                }

                const data = this.getSortedCourses();
                const availableIds = new Set(data.map((course) => String(course.id)));
                Array.from(this.courseSelection).forEach((id) => {
                    if (!availableIds.has(String(id))) {
                        this.courseSelection.delete(String(id));
                    }
                });

                const bodyHtml = !Array.isArray(data) || data.length === 0
                    ? this.buildCourseEmptyRow()
                    : data.map((course) => this.buildCourseRow(course)).join('');

                this.courseTableBody.innerHTML = bodyHtml + this.buildSearchEmptyRow(5);

                this.attachCourseRowEvents();
                this.bindCourseSelectionHandlers();
                this.syncCourseSelection();
                this.updateCourseBulkBar();
                this.ensureCourseController();
                if (this.coursesRoot) {
                    applyPillPalettes(this.coursesRoot);
                }
            }

            renderAssignmentTable() {
                if (!this.assignmentTableBody) {
                    return;
                }

                const data = this.getFilteredAssignments();
                const availableIds = new Set(data.map((assignment) => String(assignment.id)));
                Array.from(this.assignmentSelection).forEach((id) => {
                    if (!availableIds.has(String(id))) {
                        this.assignmentSelection.delete(String(id));
                    }
                });

                const bodyHtml = !Array.isArray(data) || data.length === 0
                    ? this.buildAssignmentEmptyRow()
                    : data.map((assignment) => this.buildAssignmentRow(assignment)).join('');

                this.assignmentTableBody.innerHTML = bodyHtml + this.buildSearchEmptyRow(6);

                this.attachAssignmentRowEvents();
                this.bindAssignmentSelectionHandlers();
                this.syncAssignmentSelection();
                this.updateAssignmentBulkBar();
                this.ensureAssignmentController();
                this.updateAssignmentFilterToggleState();
                if (this.assignmentsRoot) {
                    applyPillPalettes(this.assignmentsRoot);
                }
            }

            getSortedCourses() {
                const data = Array.isArray(this.courses) ? [...this.courses] : [];
                if (!this.courseSortState.key) {
                    return data.sort((a, b) => Number(b?.id ?? 0) - Number(a?.id ?? 0));
                }

                const multiplier = this.courseSortState.direction === 'asc' ? 1 : -1;
                return data.sort((a, b) => {
                    const valueA = this.getCourseSortValue(a, this.courseSortState.key);
                    const valueB = this.getCourseSortValue(b, this.courseSortState.key);

                    if (typeof valueA === 'number' && typeof valueB === 'number') {
                        return (valueA - valueB) * multiplier;
                    }

                    return String(valueA ?? '').localeCompare(String(valueB ?? ''), undefined, { sensitivity: 'base' }) * multiplier;
                });
            }

            getCourseSortValue(course, key) {
                switch (key) {
                    case 'code':
                        return course?.class_code ?? '';
                    case 'subject':
                        return course?.subject_code ?? '';
                    case 'assignments':
                        return Number(course?.assignments ?? 0);
                    default:
                        return '';
                }
            }

            getFilteredAssignments() {
                const data = this.getSortedAssignments();
                return data.filter((assignment) => this.matchesAssignmentFilters(assignment));
            }

            getSortedAssignments() {
                const data = Array.isArray(this.assignments) ? [...this.assignments] : [];
                if (!this.assignmentSortState.key) {
                    return data.sort((a, b) => Number(b?.id ?? 0) - Number(a?.id ?? 0));
                }

                const multiplier = this.assignmentSortState.direction === 'asc' ? 1 : -1;
                return data.sort((a, b) => {
                    const valueA = this.getAssignmentSortValue(a, this.assignmentSortState.key);
                    const valueB = this.getAssignmentSortValue(b, this.assignmentSortState.key);
                    return String(valueA ?? '').localeCompare(String(valueB ?? ''), undefined, { sensitivity: 'base' }) * multiplier;
                });
            }

            getAssignmentSortValue(assignment, key) {
                switch (key) {
                    case 'faculty':
                        return assignment?.faculty_name ?? '';
                    case 'course':
                        return assignment?.course_class_code ?? '';
                    case 'year':
                        return assignment?.academic_year ?? '';
                    case 'semester':
                        return this.formatSemester(assignment?.semester);
                    default:
                        return '';
                }
            }

            ensureCourseController() {
                if (!this.coursesRoot || typeof TableController === 'undefined') {
                    return;
                }

                if (this.courseController) {
                    this.courseController.refresh();
                } else {
                    this.courseController = new TableController(this.coursesRoot);
                    window.tableControllers = window.tableControllers || {};
                    window.tableControllers.coursesTable = this.courseController;
                }
                if (this.coursesRoot && !this.coursesRoot.dataset.pillPaletteBound) {
                    this.coursesRoot.dataset.pillPaletteBound = 'true';
                    this.coursesRoot.addEventListener('table:updated', () => {
                        applyPillPalettes(this.coursesRoot);
                    });
                }
            }

            ensureAssignmentController() {
                if (!this.assignmentsRoot || typeof TableController === 'undefined') {
                    return;
                }

                if (this.assignmentController) {
                    this.assignmentController.refresh();
                } else {
                    this.assignmentController = new TableController(this.assignmentsRoot);
                    window.tableControllers = window.tableControllers || {};
                    window.tableControllers.assignmentsTable = this.assignmentController;
                }
                if (this.assignmentsRoot && !this.assignmentsRoot.dataset.pillPaletteBound) {
                    this.assignmentsRoot.dataset.pillPaletteBound = 'true';
                    this.assignmentsRoot.addEventListener('table:updated', () => {
                        applyPillPalettes(this.assignmentsRoot);
                    });
                }
            }

            buildCourseRow(course) {
                const id = String(course.id);
                const isSelected = this.courseSelection.has(id);
                const classCodeRaw = this.formatCourseText(course.class_code, 'N/A');
                const classCode = this.escapeHtml(classCodeRaw);
                const classCodeAttr = 'course-code';
                const subjectRaw = this.formatCourseText(course.subject_code, 'N/A');
                const subject = this.escapeHtml(subjectRaw);
                const assignments = Number(course.assignments ?? 0);
                const searchTerms = [course.class_code ?? '', course.subject_code ?? ''].join(' ').toLowerCase();

                return `
                    <tr data-course-id="${id}" class="${isSelected ? 'is-selected' : ''}" data-search="${this.escapeAttribute(searchTerms)}">
                        <td class="text-center">
                            <input type="checkbox" class="form-check-input evaluation-checkbox" data-row-select value="${id}" ${isSelected ? 'checked' : ''}>
                        </td>
                        <td>
                            <span class="evaluation-pill course-pill--class"
                                  data-pill-palette="purple"
                                  data-pill-value="${classCodeAttr}">${classCode}</span>
                        </td>
                        <td>
                            <span class="table-text-truncate is-wide" title="${this.escapeAttribute(subjectRaw)}">${subject}</span>
                        </td>
                        <td>
                            <span class="evaluation-count-pill">${assignments}</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-action="edit-course" data-id="${id}">Edit</button>
                                    </li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <button type="button" class="dropdown-item text-danger" data-action="delete-course" data-id="${id}" data-name="${this.escapeAttribute(classCodeRaw)}">Delete</button>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                `;
            }

            buildAssignmentRow(assignment) {
                const id = String(assignment.id);
                const isSelected = this.assignmentSelection.has(id);
                const facultyName = this.formatDisplayText(assignment.faculty_name ?? 'N/A');
                const facultyEmailRaw = assignment.faculty_email ?? '';
                const facultyEmail = this.escapeHtml(facultyEmailRaw);
                const courseCodeSource = assignment.course_class_code ?? '';
                const courseCodeRaw = this.formatCourseText(courseCodeSource, 'N/A');
                const courseCode = this.escapeHtml(courseCodeRaw);
                const courseCodeAttr = 'course-code';
                const courseSubjectSource = assignment.course_subject_code ?? '';
                const courseSubjectRaw = this.formatCourseText(courseSubjectSource, '');
                const courseSubject = this.escapeHtml(courseSubjectRaw);
                const academicYearRaw = assignment.academic_year ?? 'N/A';
                const academicYear = this.escapeHtml(academicYearRaw);
                const academicYearAttr = this.escapeAttribute(academicYearRaw);
                const semesterRaw = this.formatSemester(assignment.semester);
                const semester = this.escapeHtml(semesterRaw);
                const semesterAttr = this.escapeAttribute(String(semesterRaw));
                const searchTerms = [
                    facultyName,
                    facultyEmail,
                    courseCodeSource,
                    courseSubjectSource,
                    assignment.academic_year ?? '',
                    assignment.semester ?? ''
                ].join(' ').toLowerCase();

                return `
                    <tr data-assignment-id="${id}" class="${isSelected ? 'is-selected' : ''}" data-search="${this.escapeAttribute(searchTerms)}">
                        <td class="text-center">
                            <input type="checkbox" class="form-check-input evaluation-checkbox" data-row-select value="${id}" ${isSelected ? 'checked' : ''}>
                        </td>
                        <td>
                            <div class="table-cell-stack is-wide" title="${this.escapeAttribute([facultyName, facultyEmailRaw].filter(Boolean).join(' • '))}">
                                <span class="text-dark d-block">${this.escapeHtml(facultyName)}</span>
                                ${facultyEmail ? `<small class="text-muted">${facultyEmail}</small>` : ''}
                            </div>
                        </td>
                        <td>
                            <div class="table-cell-stack is-wide" title="${this.escapeAttribute([assignment.course_class_code ?? '', courseSubjectSource].filter(Boolean).join(' — '))}">
                                <span class="evaluation-pill course-pill--class"
                                      data-pill-palette="purple"
                                      data-pill-value="${courseCodeAttr}">${courseCode}</span>
                                ${courseSubject ? `<small class="text-muted d-block mt-1">${courseSubject}</small>` : ''}
                            </div>
                        </td>
                        <td>
                            <span class="evaluation-pill"
                                  data-pill-palette="blue"
                                  data-pill-value="${academicYearAttr}">${academicYear}</span>
                        </td>
                        <td>
                            <span class="evaluation-pill"
                                  data-pill-palette="gray"
                                  data-pill-value="${semesterAttr}">${semester}</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-action="edit-assignment" data-id="${id}">Edit</button>
                                    </li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <button type="button" class="dropdown-item text-danger" data-action="delete-assignment" data-id="${id}" data-name="${this.escapeAttribute(facultyName)}">Delete</button>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                `;
            }

            buildCourseEmptyRow() {
                return `
                    <tr data-empty>
                        <td colspan="5" class="text-center py-5">
                            <div class="empty-state">
                                <i class="fa-solid fa-book display-4 text-muted mb-3"></i>
                                <h5 class="mb-2">No courses available</h5>
                                <p class="text-muted mb-0">Add a course using the button above to get started.</p>
                            </div>
                        </td>
                    </tr>
                `;
            }

            buildAssignmentEmptyRow() {
                return `
                    <tr data-empty>
                        <td colspan="6" class="text-center py-5">
                            <div class="empty-state">
                                <i class="fa-solid fa-book display-4 text-muted mb-3"></i>
                                <h5 class="mb-2">No assignments found</h5>
                                <p class="text-muted mb-0">Assign a course using the button above to populate this list.</p>
                            </div>
                        </td>
                    </tr>
                `;
            }

            buildSearchEmptyRow(colspan) {
                return `
                    <tr data-empty-search style="display: none;">
                        <td colspan="${colspan}" 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>
                `;
            }

            attachCourseRowEvents() {
                if (!this.courseTableBody) {
                    return;
                }

                this.courseTableBody.querySelectorAll('[data-action="edit-course"]').forEach((button) => {
                    if (button.dataset.bound === 'true') {
                        return;
                    }
                    button.dataset.bound = 'true';
                    button.addEventListener('click', () => {
                        const id = Number(button.dataset.id);
                        this.openCourseEditModal(id);
                    });
                });

                this.courseTableBody.querySelectorAll('[data-action="delete-course"]').forEach((button) => {
                    if (button.dataset.bound === 'true') {
                        return;
                    }
                    button.dataset.bound = 'true';
                    button.addEventListener('click', () => {
                        const id = Number(button.dataset.id);
                        const name = button.dataset.name || 'this course';
                        this.openCourseDeleteModal(id, name);
                    });
                });
            }

            attachAssignmentRowEvents() {
                if (!this.assignmentTableBody) {
                    return;
                }

                this.assignmentTableBody.querySelectorAll('[data-action="edit-assignment"]').forEach((button) => {
                    if (button.dataset.bound === 'true') {
                        return;
                    }
                    button.dataset.bound = 'true';
                    button.addEventListener('click', () => {
                        const id = Number(button.dataset.id);
                        this.openAssignmentEditModal(id);
                    });
                });

                this.assignmentTableBody.querySelectorAll('[data-action="delete-assignment"]').forEach((button) => {
                    if (button.dataset.bound === 'true') {
                        return;
                    }
                    button.dataset.bound = 'true';
                    button.addEventListener('click', () => {
                        const id = Number(button.dataset.id);
                        const name = button.dataset.name || 'this assignment';
                        this.openAssignmentDeleteModal(id, name);
                    });
                });
            }

            bindCourseSelectionHandlers() {
                if (!this.courseTableBody) {
                    return;
                }

                const checkboxes = Array.from(this.courseTableBody.querySelectorAll('[data-row-select]'));
                checkboxes.forEach((checkbox) => {
                    const id = checkbox.value;
                    checkbox.checked = this.courseSelection.has(id);
                    const row = checkbox.closest('tr');
                    if (row) {
                        row.classList.toggle('is-selected', checkbox.checked);
                    }

                    checkbox.onchange = () => {
                        if (checkbox.checked) {
                            this.courseSelection.add(id);
                        } else {
                            this.courseSelection.delete(id);
                        }
                        if (row) {
                            row.classList.toggle('is-selected', checkbox.checked);
                        }
                        this.syncCourseSelection();
                        this.updateCourseBulkBar();
                    };
                });

                if (this.courseSelectAll) {
                    this.courseSelectAll.onchange = () => {
                        const shouldSelect = this.courseSelectAll.checked;
                        checkboxes.forEach((checkbox) => {
                            checkbox.checked = shouldSelect;
                            const id = checkbox.value;
                            if (shouldSelect) {
                                this.courseSelection.add(id);
                            } else {
                                this.courseSelection.delete(id);
                            }
                            checkbox.closest('tr')?.classList.toggle('is-selected', shouldSelect);
                        });
                        this.syncCourseSelection();
                        this.updateCourseBulkBar();
                    };
                }
            }

            bindAssignmentSelectionHandlers() {
                if (!this.assignmentTableBody) {
                    return;
                }

                const checkboxes = Array.from(this.assignmentTableBody.querySelectorAll('[data-row-select]'));
                checkboxes.forEach((checkbox) => {
                    const id = checkbox.value;
                    checkbox.checked = this.assignmentSelection.has(id);
                    const row = checkbox.closest('tr');
                    if (row) {
                        row.classList.toggle('is-selected', checkbox.checked);
                    }

                    checkbox.onchange = () => {
                        if (checkbox.checked) {
                            this.assignmentSelection.add(id);
                        } else {
                            this.assignmentSelection.delete(id);
                        }
                        if (row) {
                            row.classList.toggle('is-selected', checkbox.checked);
                        }
                        this.syncAssignmentSelection();
                        this.updateAssignmentBulkBar();
                    };
                });

                if (this.assignmentSelectAll) {
                    this.assignmentSelectAll.onchange = () => {
                        const shouldSelect = this.assignmentSelectAll.checked;
                        checkboxes.forEach((checkbox) => {
                            checkbox.checked = shouldSelect;
                            const id = checkbox.value;
                            if (shouldSelect) {
                                this.assignmentSelection.add(id);
                            } else {
                                this.assignmentSelection.delete(id);
                            }
                            checkbox.closest('tr')?.classList.toggle('is-selected', shouldSelect);
                        });
                        this.syncAssignmentSelection();
                        this.updateAssignmentBulkBar();
                    };
                }
            }

            syncCourseSelection() {
                if (!this.courseSelectAll) {
                    return;
                }

                const rows = Array.from(document.querySelectorAll('#coursesTable tbody tr[data-course-id]'));
                if (!rows.length) {
                    this.courseSelectAll.checked = false;
                    this.courseSelectAll.indeterminate = false;
                    return;
                }

                const selectedVisible = rows.filter((row) => this.courseSelection.has(row.dataset.courseId)).length;
                if (selectedVisible === 0) {
                    this.courseSelectAll.checked = false;
                    this.courseSelectAll.indeterminate = false;
                } else if (selectedVisible === rows.length) {
                    this.courseSelectAll.checked = true;
                    this.courseSelectAll.indeterminate = false;
                } else {
                    this.courseSelectAll.checked = false;
                    this.courseSelectAll.indeterminate = true;
                }
            }

            syncAssignmentSelection() {
                if (!this.assignmentSelectAll) {
                    return;
                }

                const rows = Array.from(document.querySelectorAll('#assignmentsTable tbody tr[data-assignment-id]'));
                if (!rows.length) {
                    this.assignmentSelectAll.checked = false;
                    this.assignmentSelectAll.indeterminate = false;
                    return;
                }

                const selectedVisible = rows.filter((row) => this.assignmentSelection.has(row.dataset.assignmentId)).length;
                if (selectedVisible === 0) {
                    this.assignmentSelectAll.checked = false;
                    this.assignmentSelectAll.indeterminate = false;
                } else if (selectedVisible === rows.length) {
                    this.assignmentSelectAll.checked = true;
                    this.assignmentSelectAll.indeterminate = false;
                } else {
                    this.assignmentSelectAll.checked = false;
                    this.assignmentSelectAll.indeterminate = true;
                }
            }

            updateCourseBulkBar() {
                if (!this.courseBulkBar || !this.courseSelectedCountEl) {
                    return;
                }

                const count = this.courseSelection.size;
                this.courseSelectedCountEl.textContent = `${count} Selected`;
                this.courseBulkBar.classList.toggle('d-none', count === 0);
            }

            updateAssignmentBulkBar() {
                if (!this.assignmentBulkBar || !this.assignmentSelectedCountEl) {
                    return;
                }

                const count = this.assignmentSelection.size;
                this.assignmentSelectedCountEl.textContent = `${count} Selected`;
                this.assignmentBulkBar.classList.toggle('d-none', count === 0);
            }

            promptBulkCourseDelete() {
                const ids = Array.from(this.courseSelection).map((id) => Number(id)).filter((id) => !Number.isNaN(id));
                if (!ids.length) {
                    return;
                }
                this.pendingCourseBulk = ids;
                const counter = document.getElementById('courseBulkDeleteCount');
                if (counter) {
                    counter.textContent = ids.length;
                }
                this.courseBulkDeleteModal?.show();
            }

            promptBulkAssignmentDelete() {
                const ids = Array.from(this.assignmentSelection).map((id) => Number(id)).filter((id) => !Number.isNaN(id));
                if (!ids.length) {
                    return;
                }
                this.pendingAssignmentBulk = ids;
                const counter = document.getElementById('assignmentBulkDeleteCount');
                if (counter) {
                    counter.textContent = ids.length;
                }
                this.assignmentBulkDeleteModal?.show();
            }

            clearCourseSelection() {
                this.courseSelection.clear();
                if (this.courseTableBody) {
                    this.courseTableBody.querySelectorAll('[data-row-select]').forEach((checkbox) => {
                        checkbox.checked = false;
                    });
                    this.courseTableBody.querySelectorAll('tr').forEach((row) => {
                        row.classList.remove('is-selected');
                    });
                }
                if (this.courseSelectAll) {
                    this.courseSelectAll.checked = false;
                    this.courseSelectAll.indeterminate = false;
                }
                this.updateCourseBulkBar();
            }

            clearAssignmentSelection() {
                this.assignmentSelection.clear();
                if (this.assignmentTableBody) {
                    this.assignmentTableBody.querySelectorAll('[data-row-select]').forEach((checkbox) => {
                        checkbox.checked = false;
                    });
                    this.assignmentTableBody.querySelectorAll('tr').forEach((row) => {
                        row.classList.remove('is-selected');
                    });
                }
                if (this.assignmentSelectAll) {
                    this.assignmentSelectAll.checked = false;
                    this.assignmentSelectAll.indeterminate = false;
                }
                this.updateAssignmentBulkBar();
            }

            removeAssignmentsForCourseIds(courseIds = []) {
                const ids = Array.isArray(courseIds) ? courseIds : [courseIds];
                const idSet = new Set(
                    ids
                        .map((id) => Number(id))
                        .filter((id) => !Number.isNaN(id))
                );
                if (!idSet.size) {
                    return;
                }

                const removedAssignmentIds = [];
                this.assignments = this.assignments.filter((assignment) => {
                    const shouldRemove = idSet.has(Number(assignment.course_id));
                    if (shouldRemove) {
                        removedAssignmentIds.push(String(assignment.id));
                    }
                    return !shouldRemove;
                });

                if (!removedAssignmentIds.length) {
                    return;
                }

                removedAssignmentIds.forEach((assignmentId) => this.assignmentSelection.delete(assignmentId));
                this.refreshAssignmentFilterOptions();
                this.renderAssignmentTable();
            }

            updateAssignmentsForCourseDetails(course) {
                if (!course || course.id == null) {
                    return;
                }

                const courseId = Number(course.id);
                let hasChanges = false;

                this.assignments = this.assignments.map((assignment) => {
                    if (Number(assignment.course_id) !== courseId) {
                        return assignment;
                    }

                    hasChanges = true;
                    return {
                        ...assignment,
                        course_class_code: course.class_code ?? assignment.course_class_code ?? '',
                        course_subject_code: course.subject_code ?? assignment.course_subject_code ?? '',
                    };
                });

                if (hasChanges) {
                    this.renderAssignmentTable();
                }
            }

            openCourseEditModal(courseId) {
                const course = this.courses.find((item) => Number(item.id) === Number(courseId));
                if (!course) {
                    this.showAlert('error', 'Selected course record was not found.');
                    return;
                }

                this.currentCourseId = courseId;
                const form = document.getElementById('courseEditForm');
                if (!form) {
                    return;
                }

                form.querySelector('[name="course_id"]').value = course.id;
                form.querySelector('[name="class_code"]').value = course.class_code ?? '';
                form.querySelector('[name="subject_code"]').value = course.subject_code ?? '';

                this.courseEditModal?.show();
            }

            openCourseDeleteModal(courseId, courseName) {
                const nameDisplay = document.getElementById('courseDeleteName');
                if (nameDisplay) {
                    nameDisplay.textContent = courseName;
                }
                this.pendingCourseDeleteId = courseId;
                this.courseDeleteModal?.show();
            }

            openAssignmentEditModal(assignmentId) {
                const assignment = this.assignments.find((item) => Number(item.id) === Number(assignmentId));
                if (!assignment) {
                    this.showAlert('error', 'Selected assignment record was not found.');
                    return;
                }

                this.currentAssignmentId = assignmentId;
                const form = document.getElementById('assignmentEditForm');
                if (!form) {
                    return;
                }

                const facultyField = form.querySelector('input[name="faculty_id"]');
                const courseField = form.querySelector('input[name="course_id"]');
                const yearField = form.querySelector('input[name="academic_year"]');
                const semesterField = form.querySelector('input[name="semester"]');

                form.querySelector('[name="assignment_id"]').value = assignment.id;
                if (facultyField) {
                    const facultyValue = assignment.faculty_id != null ? String(assignment.faculty_id) : '';
                    const facultyName = this.formatDisplayText(assignment.faculty_name ?? '');
                    const facultyEmail = assignment.faculty_email ?? '';
                    this.ensureDropdownOption(facultyField, {
                        value: facultyValue,
                        label: facultyName || `Faculty #${facultyValue}`,
                        description: facultyEmail,
                    });
                    this.setDropdownValue(facultyField, facultyValue, facultyName || `Faculty #${facultyValue}`);
                }
                if (courseField) {
                    const courseValue = assignment.course_id != null ? String(assignment.course_id) : '';
                    const courseCode = this.formatCourseText(assignment.course_class_code, '');
                    const courseSubject = this.formatCourseText(assignment.course_subject_code, '');
                    const courseLabel = [courseCode, courseSubject].filter(Boolean).join(' - ') || `Course #${courseValue}`;
                    this.ensureDropdownOption(courseField, {
                        value: courseValue,
                        label: courseLabel,
                        description: courseSubject,
                    });
                    this.setDropdownValue(courseField, courseValue, courseLabel);
                }
                if (yearField) {
                    const yearValue = assignment.academic_year ?? '';
                    if (yearValue) {
                        this.ensureDropdownOption(yearField, {
                            value: yearValue,
                            label: yearValue,
                        });
                    }
                    this.setDropdownValue(yearField, yearValue, yearValue);
                }
                if (semesterField) {
                    const semesterValue = assignment.semester ?? '';
                    const semesterLabel = this.formatSemester(semesterValue);
                    if (semesterValue) {
                        this.ensureDropdownOption(semesterField, {
                            value: semesterValue,
                            label: semesterLabel,
                        });
                    }
                    this.setDropdownValue(semesterField, semesterValue, semesterLabel);
                }

                this.assignmentEditModal?.show();
            }

            openAssignmentDeleteModal(assignmentId, name) {
                const nameDisplay = document.getElementById('assignmentDeleteName');
                if (nameDisplay) {
                    nameDisplay.textContent = name;
                }
                this.pendingAssignmentDeleteId = assignmentId;
                this.assignmentDeleteModal?.show();
            }

            async handleCreateCourse(form, data) {
                if (!this.validateCourseForm(data)) {
                    return;
                }

                const submitBtn = form.querySelector('[type="submit"]');
                this.toggleButtonLoading(submitBtn, true, 'Save', 'Saving...');

                try {
                    const response = await fetch('{{ route('dm.courses.store') }}', {
                        method: 'POST',
                        headers: this.defaultHeaders(),
                        body: JSON.stringify(data),
                    });
                    const payload = await response.json().catch(() => ({}));
                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Failed to add course.');
                    }

                    this.courses.push(this.normaliseCourse(payload.data));
                    this.refreshCourseDropdownOptions();
                    this.renderCourseTable();
                    this.courseCreateModal?.hide();
                    form.reset();
                    this.showAlert('success', payload.message || 'Course added successfully.');
                } catch (error) {
                    this.showAlert('error', error.message || 'Failed to add course.');
                } finally {
                    this.toggleButtonLoading(submitBtn, false, 'Save');
                }
            }

            async handleUpdateCourse(form, data) {
                if (!this.currentCourseId) {
                    return;
                }

                if (!this.validateCourseForm(data)) {
                    return;
                }

                const submitBtn = form.querySelector('[type="submit"]');
                this.toggleButtonLoading(submitBtn, true, 'Save Changes', 'Saving...');

                try {
                    const response = await fetch(`{{ route('dm.courses.update', ':id') }}`.replace(':id', this.currentCourseId), {
                        method: 'PUT',
                        headers: this.defaultHeaders(),
                        body: JSON.stringify(data),
                    });
                    const payload = await response.json().catch(() => ({}));
                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Failed to update course.');
                    }

                    const normalised = this.normaliseCourse(payload.data);
                    const index = this.courses.findIndex((item) => Number(item.id) === Number(this.currentCourseId));
                    if (index !== -1) {
                        this.courses[index] = normalised;
                    }
                    this.refreshCourseDropdownOptions();
                    this.updateAssignmentsForCourseDetails(normalised);
                    this.courseEditModal?.hide();
                    this.renderCourseTable();
                    this.showAlert('success', payload.message || 'Course updated successfully.');
                } catch (error) {
                    this.showAlert('error', error.message || 'Failed to update course.');
                } finally {
                    this.toggleButtonLoading(submitBtn, false, 'Save Changes');
                    this.currentCourseId = null;
                }
            }

            async handleDeleteCourse(button, courseId) {
                this.toggleButtonLoading(button, true, 'Delete', 'Deleting...');

                try {
                    const response = await fetch(`{{ route('dm.courses.destroy', ':id') }}`.replace(':id', courseId), {
                        method: 'DELETE',
                        headers: this.deleteHeaders(),
                    });
                    const payload = await response.json().catch(() => ({}));
                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Failed to delete course.');
                    }

                    this.courses = this.courses.filter((course) => Number(course.id) !== Number(courseId));
                    this.courseSelection.delete(String(courseId));
                    this.refreshCourseDropdownOptions();
                    this.removeAssignmentsForCourseIds(courseId);
                    this.courseDeleteModal?.hide();
                    this.renderCourseTable();
                    this.showAlert('success', payload.message || 'Course deleted successfully.');
                } catch (error) {
                    this.showAlert('error', error.message || 'Failed to delete course.');
                } finally {
                    this.toggleButtonLoading(button, false, 'Delete');
                    this.pendingCourseDeleteId = null;
                }
            }

            async executeBulkCourseDelete(button, ids) {
                this.toggleButtonLoading(button, true, 'Delete Selected', 'Deleting...');

                try {
                    const response = await fetch('{{ route('dm.courses.bulk-destroy') }}', {
                        method: 'POST',
                        headers: this.defaultHeaders(),
                        body: JSON.stringify({ ids }),
                    });
                    const payload = await response.json().catch(() => ({}));
                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Failed to delete selected courses.');
                    }

                    const idSet = new Set(ids.map((id) => Number(id)));
                    this.courses = this.courses.filter((course) => !idSet.has(Number(course.id)));
                    ids.forEach((id) => this.courseSelection.delete(String(id)));
                    this.refreshCourseDropdownOptions();
                    this.removeAssignmentsForCourseIds(ids);
                    this.courseBulkDeleteModal?.hide();
                    this.renderCourseTable();
                    this.showAlert('success', payload.message || 'Selected courses deleted successfully.');
                } catch (error) {
                    this.showAlert('error', error.message || 'Failed to delete selected courses.');
                } finally {
                    this.toggleButtonLoading(button, false, 'Delete Selected');
                    this.pendingCourseBulk = null;
                }
            }

            async handleCreateAssignment(form, data) {
                if (!this.validateAssignmentForm(data)) {
                    return;
                }

                const submitBtn = form.querySelector('[type="submit"]');
                this.toggleButtonLoading(submitBtn, true, 'Assign', 'Assigning...');

                try {
                    const response = await fetch('{{ route('dm.faculty-courses.store') }}', {
                        method: 'POST',
                        headers: this.defaultHeaders(),
                        body: JSON.stringify(data),
                    });
                    const payload = await response.json().catch(() => ({}));
                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Failed to assign course.');
                    }

                    this.assignments.push(this.normaliseAssignment(payload.data));
                    this.refreshAssignmentFilterOptions();
                    this.assignmentCreateModal?.hide();
                    form.reset();
                    this.renderAssignmentTable();
                    this.showAlert('success', payload.message || 'Course assigned successfully.');
                } catch (error) {
                    this.showAlert('error', error.message || 'Failed to assign course.');
                } finally {
                    this.toggleButtonLoading(submitBtn, false, 'Assign');
                }
            }

            async handleUpdateAssignment(form, data) {
                if (!this.currentAssignmentId) {
                    return;
                }

                if (!this.validateAssignmentForm(data)) {
                    return;
                }

                const submitBtn = form.querySelector('[type="submit"]');
                this.toggleButtonLoading(submitBtn, true, 'Save Changes', 'Saving...');

                try {
                    const response = await fetch(`{{ route('dm.faculty-courses.update', ':id') }}`.replace(':id', this.currentAssignmentId), {
                        method: 'PUT',
                        headers: this.defaultHeaders(),
                        body: JSON.stringify(data),
                    });
                    const payload = await response.json().catch(() => ({}));
                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Failed to update assignment.');
                    }

                    const normalised = this.normaliseAssignment(payload.data);
                    const index = this.assignments.findIndex((item) => Number(item.id) === Number(this.currentAssignmentId));
                    if (index !== -1) {
                        this.assignments[index] = normalised;
                    }
                    this.refreshAssignmentFilterOptions();
                    this.assignmentEditModal?.hide();
                    this.renderAssignmentTable();
                    this.showAlert('success', payload.message || 'Assignment updated successfully.');
                } catch (error) {
                    this.showAlert('error', error.message || 'Failed to update assignment.');
                } finally {
                    this.toggleButtonLoading(submitBtn, false, 'Save Changes');
                    this.currentAssignmentId = null;
                }
            }

            async handleDeleteAssignment(button, assignmentId) {
                this.toggleButtonLoading(button, true, 'Delete', 'Deleting...');

                try {
                    const response = await fetch(`{{ route('dm.faculty-courses.destroy', ':id') }}`.replace(':id', assignmentId), {
                        method: 'DELETE',
                        headers: this.deleteHeaders(),
                    });
                    const payload = await response.json().catch(() => ({}));
                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Failed to delete assignment.');
                    }

                    this.assignments = this.assignments.filter((assignment) => Number(assignment.id) !== Number(assignmentId));
                    this.assignmentSelection.delete(String(assignmentId));
                    this.refreshAssignmentFilterOptions();
                    this.assignmentDeleteModal?.hide();
                    this.renderAssignmentTable();
                    this.showAlert('success', payload.message || 'Assignment deleted successfully.');
                } catch (error) {
                    this.showAlert('error', error.message || 'Failed to delete assignment.');
                } finally {
                    this.toggleButtonLoading(button, false, 'Delete');
                    this.pendingAssignmentDeleteId = null;
                }
            }

            async executeBulkAssignmentDelete(button, ids) {
                this.toggleButtonLoading(button, true, 'Delete Selected', 'Deleting...');

                try {
                    const response = await fetch('{{ route('dm.faculty-courses.bulk-destroy') }}', {
                        method: 'POST',
                        headers: this.defaultHeaders(),
                        body: JSON.stringify({ ids }),
                    });
                    const payload = await response.json().catch(() => ({}));
                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Failed to delete selected assignments.');
                    }

                    const idSet = new Set(ids.map((id) => Number(id)));
                    this.assignments = this.assignments.filter((assignment) => !idSet.has(Number(assignment.id)));
                    ids.forEach((id) => this.assignmentSelection.delete(String(id)));
                    this.refreshAssignmentFilterOptions();
                    this.assignmentBulkDeleteModal?.hide();
                    this.renderAssignmentTable();
                    this.showAlert('success', payload.message || 'Selected assignments deleted successfully.');
                } catch (error) {
                    this.showAlert('error', error.message || 'Failed to delete selected assignments.');
                } finally {
                    this.toggleButtonLoading(button, false, 'Delete Selected');
                    this.pendingAssignmentBulk = null;
                }
            }

            validateCourseForm(data) {
                const required = ['class_code', 'subject_code'];
                const missing = required.filter((key) => !data[key] || String(data[key]).trim() === '');
                if (missing.length) {
                    this.showAlert('error', 'Please complete all required course fields.');
                    return false;
                }
                return true;
            }

            validateAssignmentForm(data) {
                const required = ['faculty_id', 'course_id', 'academic_year', 'semester'];
                const missing = required.filter((key) => !data[key] || String(data[key]).trim() === '');
                if (missing.length) {
                    this.showAlert('error', 'Please complete all required assignment fields.');
                    return false;
                }
                return true;
            }

            toggleButtonLoading(button, isLoading, defaultText, loadingText = 'Saving...') {
                if (!button) {
                    return;
                }

                const idleText = defaultText ?? button.dataset.defaultText ?? button.textContent.trim();
                const busyText = loadingText ?? button.dataset.loadingText ?? 'Saving...';

                if (isLoading) {
                    button.dataset.defaultText = idleText;
                    button.dataset.loadingText = busyText;
                    button.disabled = true;
                    button.textContent = busyText;
                } else {
                    const original = button.dataset.defaultText || idleText;
                    button.disabled = false;
                    button.textContent = original;
                }
            }

            showAlert(type, message) {
                if (window.dmToast && typeof window.dmToast.show === 'function') {
                    const toastType = type === 'error' ? 'danger' : type;
                    window.dmToast.show({ type: toastType, message });
                    return;
                }
                if (!this.alertContainer) {
                    return;
                }
                const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
                this.alertContainer.innerHTML = `
                    <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                        ${this.escapeHtml(message)}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `;
            }

            normaliseCourse(payload) {
                if (!payload) {
                    return {};
                }
                return {
                    id: payload.id,
                    class_code: payload.class_code,
                    subject_code: payload.subject_code,
                    assignments: payload.faculty_courses_count ?? payload.assignments ?? 0,
                };
            }

            normaliseAssignment(payload) {
                if (!payload) {
                    return {};
                }
                const faculty = payload.faculty || {};
                const facultyUser = faculty.user || {};
                const course = payload.course || {};

                return {
                    id: payload.id,
                    faculty_id: payload.faculty_id,
                    faculty_name: facultyUser.name ?? faculty.name ?? 'N/A',
                    faculty_email: facultyUser.email ?? '',
                    course_id: payload.course_id,
                    course_class_code: course.class_code ?? 'N/A',
                    course_subject_code: course.subject_code ?? '',
                    academic_year: payload.academic_year,
                    semester: payload.semester,
                };
            }

            formToObject(form) {
                const formData = new FormData(form);
                const data = {};
                formData.forEach((value, key) => {
                    data[key] = value;
                });
                return data;
            }

            defaultHeaders() {
                return {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': this.csrfToken,
                };
            }

            deleteHeaders() {
                return {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': this.csrfToken,
                };
            }

            escapeHtml(value) {
                if (value === null || value === undefined) {
                    return '';
                }
                return String(value).replace(/[&<>"']/g, (char) => ({
                    '&': '&amp;',
                    '<': '&lt;',
                    '>': '&gt;',
                    '"': '&quot;',
                    "'": '&#39;',
                }[char] || char));
            }

            escapeAttribute(value) {
                return this.escapeHtml(value).replace(/"/g, '&quot;');
            }

            formatDisplayText(value) {
                if (value === null || value === undefined) {
                    return '';
                }
                return String(value);
            }

            formatSemester(value) {
                if (!value) {
                    return 'N/A';
                }
                const normalised = String(value).toLowerCase();
                if (normalised === '1st' || normalised === 'first') {
                    return '1st Semester';
                }
                if (normalised === '2nd' || normalised === 'second') {
                    return '2nd Semester';
                }
                if (normalised === 'summer') {
                    return 'Summer';
                }
                return value;
            }

            formatCourseText(value, fallback = '') {
                if (value === null || value === undefined) {
                    return fallback;
                }
                const trimmed = String(value).trim();
                return trimmed === '' ? fallback : trimmed;
            }

            initAssignmentFilters() {
                this.refreshAssignmentFilterOptions();

                Object.entries(this.assignmentFilterControls).forEach(([key, select]) => {
                    if (!select) return;
                    select.addEventListener('change', (event) => {
                        this.assignmentFilters[key] = event.target.value || 'all';
                        this.renderAssignmentTable();
                    });
                });

                if (this.assignmentFilterReset) {
                    this.assignmentFilterReset.addEventListener('click', () => {
                        Object.keys(this.assignmentFilters).forEach((key) => {
                            this.assignmentFilters[key] = 'all';
                            if (this.assignmentFilterControls[key]) {
                                this.assignmentFilterControls[key].value = 'all';
                            }
                        });
                        this.renderAssignmentTable();
                    });
                }
            }

            refreshAssignmentFilterOptions() {
                const facultyOptions = this.getAssignmentFilterOptions(
                    (assignment) => assignment?.faculty_name ?? '',
                    (value) => this.formatDisplayText(value)
                );
                const yearOptions = this.getAssignmentFilterOptions(
                    (assignment) => assignment?.academic_year ?? '',
                    (value) => value
                );
                const semesterOptions = this.getAssignmentFilterOptions(
                    (assignment) => assignment?.semester ?? '',
                    (value) => this.formatSemester(value)
                );

                this.populateFilterSelect(this.assignmentFilterControls.faculty, facultyOptions);
                this.populateFilterSelect(this.assignmentFilterControls.year, yearOptions);
                this.populateFilterSelect(this.assignmentFilterControls.semester, semesterOptions);
                this.updateAssignmentFilterToggleState();
            }

            getAssignmentFilterOptions(accessor, formatter) {
                const seen = new Map();
                (this.assignments || []).forEach((assignment) => {
                    const raw = accessor(assignment) ?? '';
                    const value = this.normaliseValue(raw);
                    if (!value || seen.has(value)) {
                        return;
                    }
                    const label = formatter ? formatter(raw, assignment) : raw;
                    seen.set(value, label);
                });
                return Array.from(seen.entries())
                    .sort((a, b) => a[1].localeCompare(b[1]))
                    .map(([value, label]) => ({ value, label }));
            }

            populateFilterSelect(select, options) {
                if (!select) return;
                const previous = select.value;
                const entries = ['<option value="all">All</option>']
                    .concat(options.map((option) => `<option value="${option.value}">${option.label}</option>`));
                select.innerHTML = entries.join('');
                select.value = options.some((option) => option.value === previous) ? previous : 'all';
            }

            matchesAssignmentFilters(assignment) {
                if (!assignment) {
                    return false;
                }
                if (this.assignmentFilters.faculty !== 'all') {
                    const value = this.normaliseValue(assignment.faculty_name ?? '');
                    if (value !== this.assignmentFilters.faculty) {
                        return false;
                    }
                }
                if (this.assignmentFilters.year !== 'all') {
                    const value = this.normaliseValue(assignment.academic_year ?? '');
                    if (value !== this.assignmentFilters.year) {
                        return false;
                    }
                }
                if (this.assignmentFilters.semester !== 'all') {
                    const value = this.normaliseValue(assignment.semester ?? '');
                    if (value !== this.assignmentFilters.semester) {
                        return false;
                    }
                }
                return true;
            }

            updateAssignmentFilterToggleState() {
                if (!this.assignmentFilterToggle) return;
                const isActive = Object.values(this.assignmentFilters).some((value) => value !== 'all');
                this.assignmentFilterToggle.classList.toggle('is-active', isActive);
            }

            normaliseValue(value) {
                return String(value ?? '')
                    .trim()
                    .toLowerCase();
            }
        }
    </script>
@endsection