@extends('layouts.app')

@section('title', 'Teacher Assignments')

@section('content')

<div class="space-y-5">

    {{-- ============================================================
        Page Header
    ============================================================ --}}
    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">

        <div>

            <h1 class="text-xl font-semibold text-text">
                Teacher Assignments
            </h1>

            <p class="mt-1 text-sm text-muted">
                Manage teacher, class, section and subject assignments for each academic year.
            </p>

        </div>

        <div class="flex flex-wrap items-center gap-2">

            @can('teacher-assignments.create')

                <a
                    href="{{ route('teacher-assignments.create') }}"
                    class="btn btn-primary"
                >
                    <i class="fa-solid fa-plus"></i>

                    <span>
                        New Assignment
                    </span>
                </a>

            @endcan

        </div>

    </div>


    {{-- ============================================================
        Filters
    ============================================================ --}}
    <div class="card p-4">

        <form
            id="filter-form"
            action="{{ route('teacher-assignments.index') }}"
            method="GET"
            class="flex flex-col gap-3"
        >

            {{-- First Row --}}
            <div class="flex flex-col gap-3 xl:flex-row xl:items-center">

                {{-- Search --}}
                <div class="relative w-full xl:max-w-sm">

                    <label
                        for="search"
                        class="sr-only"
                    >
                        Search assignments
                    </label>
{{-- 
                    <i
                        class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-xs text-muted"
                    ></i> --}}

                    <input
                        type="search"
                        id="search"
                        name="search"
                        value="{{ request('search') }}"
                        placeholder="Search teacher, subject, class..."
                        autocomplete="off"
                        class="form-input w-full pl-9"
                    >

                </div>


                {{-- Academic Year --}}
                <div class="w-full xl:w-48">

                    <label
                        for="academic_year_id"
                        class="sr-only"
                    >
                        Academic Year
                    </label>

                    <select
                        id="academic_year_id"
                        name="academic_year_id"
                        class="form-select w-full"
                    >

                        <option value="">
                            All Academic Years
                        </option>

                        @foreach($academicYears as $academicYear)

                            <option
                                value="{{ $academicYear->id }}"
                                @selected(
                                    (string) request('academic_year_id') ===
                                    (string) $academicYear->id
                                )
                            >
                                {{ $academicYear->name }}
                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- Teacher --}}
                <div class="w-full xl:w-52">

                    <label
                        for="teacher_id"
                        class="sr-only"
                    >
                        Teacher
                    </label>

                    <select
                        id="teacher_id"
                        name="teacher_id"
                        class="form-select w-full"
                    >

                        <option value="">
                            All Teachers
                        </option>

                        @foreach($teachers as $teacher)

                            <option
                                value="{{ $teacher->id }}"
                                @selected(
                                    (string) request('teacher_id') ===
                                    (string) $teacher->id
                                )
                            >
                                {{ $teacher->fullName() }}
                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- Class --}}
                <div class="w-full xl:w-44">

                    <label
                        for="class_id"
                        class="sr-only"
                    >
                        Class
                    </label>

                    <select
                        id="class_id"
                        name="class_id"
                        class="form-select w-full"
                    >

                        <option value="">
                            All Classes
                        </option>

                        @foreach($schoolClasses as $schoolClass)

                            <option
                                value="{{ $schoolClass->id }}"
                                @selected(
                                    (string) request('class_id') ===
                                    (string) $schoolClass->id
                                )
                            >
                                {{ $schoolClass->name }}
                            </option>

                        @endforeach

                    </select>

                </div>

            </div>


            {{-- Second Row --}}
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center">

                {{-- Section --}}
                <div class="w-full sm:w-40">

                    <label
                        for="section_id"
                        class="sr-only"
                    >
                        Section
                    </label>

                    <select
                        id="section_id"
                        name="section_id"
                        class="form-select w-full"
                    >

                        <option value="">
                            All Sections
                        </option>

                        @foreach($sections as $section)

                            <option
                                value="{{ $section->id }}"
                                data-class-id="{{ $section->class_id }}"
                                @selected(
                                    (string) request('section_id') ===
                                    (string) $section->id
                                )
                            >
                                {{ $section->name }}
                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- Assignment Type --}}
                <div class="w-full sm:w-48">

                    <label
                        for="is_class_teacher"
                        class="sr-only"
                    >
                        Assignment Type
                    </label>

                    <select
                        id="is_class_teacher"
                        name="is_class_teacher"
                        class="form-select w-full"
                    >

                        <option value="">
                            All Assignment Types
                        </option>

                        <option
                            value="1"
                            @selected(request('is_class_teacher') === '1')
                        >
                            Class Teacher
                        </option>

                        <option
                            value="0"
                            @selected(request('is_class_teacher') === '0')
                        >
                            Subject Teacher
                        </option>

                    </select>

                </div>


                {{-- Status --}}
                <div class="w-full sm:w-40">

                    <label
                        for="status"
                        class="sr-only"
                    >
                        Status
                    </label>

                    <select
                        id="status"
                        name="status"
                        class="form-select w-full"
                    >

                        <option value="">
                            All Status
                        </option>

                        <option
                            value="1"
                            @selected(request('status') === '1')
                        >
                            Active
                        </option>

                        <option
                            value="0"
                            @selected(request('status') === '0')
                        >
                            Inactive
                        </option>

                    </select>

                </div>


                {{-- Apply --}}
                <button
                    type="submit"
                    class="btn btn-secondary shrink-0"
                >
                    <i class="fa-solid fa-filter"></i>

                    <span>
                        Filter
                    </span>
                </button>


                {{-- Reset --}}
                @if(
                    request()->filled('search') ||
                    request()->filled('academic_year_id') ||
                    request()->filled('teacher_id') ||
                    request()->filled('class_id') ||
                    request()->filled('section_id') ||
                    request('is_class_teacher') !== null &&
                    request('is_class_teacher') !== '' ||
                    request('status') !== null &&
                    request('status') !== ''
                )

                    <a
                        href="{{ route('teacher-assignments.index') }}"
                        class="btn btn-secondary shrink-0"
                    >
                        <i class="fa-solid fa-rotate-left"></i>

                        <span>
                            Reset
                        </span>
                    </a>

                @endif

            </div>

        </form>

    </div>


    {{-- ============================================================
        Active Filters
    ============================================================ --}}
    @if(
        filled(request('search')) ||
        filled(request('academic_year_id')) ||
        filled(request('teacher_id')) ||
        filled(request('class_id')) ||
        filled(request('section_id')) ||
        request('is_class_teacher') !== null &&
        request('is_class_teacher') !== '' ||
        request('status') !== null &&
        request('status') !== ''
    )

        <div class="flex flex-wrap items-center gap-2">

            <span class="text-xs font-medium text-muted">
                Active filters:
            </span>


            @if(filled(request('search')))

                <span class="badge-info">

                    {{-- <i class="fa-solid fa-magnifying-glass mr-1"></i> --}}

                    {{ request('search') }}

                </span>

            @endif


            @if(filled(request('academic_year_id')))

                @php
                    $selectedAcademicYear = $academicYears->firstWhere(
                        'id',
                        (int) request('academic_year_id')
                    );
                @endphp

                @if($selectedAcademicYear)

                    <span class="badge-info">

                        <i class="fa-regular fa-calendar mr-1"></i>

                        {{ $selectedAcademicYear->name }}

                    </span>

                @endif

            @endif


            @if(filled(request('teacher_id')))

                @php
                    $selectedTeacher = $teachers->firstWhere(
                        'id',
                        (int) request('teacher_id')
                    );
                @endphp

                @if($selectedTeacher)

                    <span class="badge-info">

                        <i class="fa-solid fa-user mr-1"></i>

                        {{ $selectedTeacher->fullName() }}

                    </span>

                @endif

            @endif


            @if(filled(request('class_id')))

                @php
                    $selectedClass = $schoolClasses->firstWhere(
                        'id',
                        (int) request('class_id')
                    );
                @endphp

                @if($selectedClass)

                    <span class="badge-info">

                        <i class="fa-solid fa-school mr-1"></i>

                        {{ $selectedClass->name }}

                    </span>

                @endif

            @endif


            @if(filled(request('section_id')))

                @php
                    $selectedSection = $sections->firstWhere(
                        'id',
                        (int) request('section_id')
                    );
                @endphp

                @if($selectedSection)

                    <span class="badge-info">

                        <i class="fa-solid fa-layer-group mr-1"></i>

                        {{ $selectedSection->name }}

                    </span>

                @endif

            @endif


            @if(request('is_class_teacher') !== null && request('is_class_teacher') !== '')

                <span class="badge-info">

                    <i class="fa-solid fa-chalkboard-user mr-1"></i>

                    {{ request('is_class_teacher') === '1' ? 'Class Teacher' : 'Subject Teacher' }}

                </span>

            @endif


            @if(request('status') !== null && request('status') !== '')

                @if(request('status') === '1')

                    <span class="badge-success">
                        Active
                    </span>

                @else

                    <span class="badge-danger">
                        Inactive
                    </span>

                @endif

            @endif

        </div>

    @endif


    {{-- ============================================================
        Bulk Actions
    ============================================================ --}}
    <div
        id="bulk-actions"
        class="hidden items-center justify-between gap-3 rounded-lg border border-border bg-card px-4 py-3"
    >

        <div class="flex items-center gap-3">

            <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
                <i class="fa-solid fa-check"></i>
            </div>

            <div>

                <p
                    id="selected-count"
                    class="text-sm font-medium text-text"
                >
                    0 selected
                </p>

                <p class="text-xs text-muted">
                    Selected assignments
                </p>

            </div>

        </div>


        @can('teacher-assignments.delete')

            <button
                type="button"
                id="bulk-delete"
                class="btn btn-danger"
            >
                <i class="fa-regular fa-trash-can"></i>

                <span>
                    Delete Selected
                </span>
            </button>

        @endcan

    </div>


    {{-- ============================================================
        Assignments Table
    ============================================================ --}}
    <div class="card overflow-hidden">

        {{-- Table Header --}}
        <div class="flex flex-col gap-3 border-b border-border px-5 py-4 sm:flex-row sm:items-center sm:justify-between">

            <div>

                <h2 class="text-base font-semibold text-text">
                    Assignment List
                </h2>

                <p class="mt-1 text-xs text-muted">

                    @if($teacherAssignments->total() > 0)

                        Showing
                        {{ number_format($teacherAssignments->firstItem()) }}
                        to
                        {{ number_format($teacherAssignments->lastItem()) }}
                        of
                        {{ number_format($teacherAssignments->total()) }}
                        assignments.

                    @else

                        No assignments available.

                    @endif

                </p>

            </div>


            @if($teacherAssignments->total() > 0)

                <div class="text-xs text-muted">

                    Page

                    <span class="font-medium text-text">
                        {{ $teacherAssignments->currentPage() }}
                    </span>

                    of

                    <span class="font-medium text-text">
                        {{ $teacherAssignments->lastPage() }}
                    </span>

                </div>

            @endif

        </div>


        <div class="overflow-x-auto">

            <table class="table">

                <thead>

                    <tr>

                        <th class="w-12">

                            <input
                                type="checkbox"
                                id="select-all"
                                class="rounded border-border"
                                aria-label="Select all assignments"
                            >

                        </th>

                        <th>
                            Teacher
                        </th>

                        <th>
                            Academic Year
                        </th>

                        <th>
                            Class / Section
                        </th>

                        <th>
                            Subject
                        </th>

                        <th>
                            Periods
                        </th>

                        <th>
                            Assignment
                        </th>

                        <th>
                            Status
                        </th>

                        <th class="text-right">
                            Actions
                        </th>

                    </tr>

                </thead>


                <tbody>

                    @forelse($teacherAssignments as $teacherAssignment)

                        <tr>

                            {{-- Checkbox --}}
                            <td>

                                <input
                                    type="checkbox"
                                    value="{{ $teacherAssignment->id }}"
                                    class="row-checkbox rounded border-border"
                                    aria-label="Select assignment for {{ $teacherAssignment->teacher?->fullName() ?? 'Unknown' }}"
                                >

                            </td>


                            {{-- Teacher --}}
                            <td>

                                <div class="flex items-center gap-3">

                                    @if($teacherAssignment->teacher?->hasPhoto())

                                        <img
                                            src="{{ asset('storage/' . $teacherAssignment->teacher->profile_photo) }}"
                                            alt="{{ $teacherAssignment->teacher->fullName() }}"
                                            class="h-9 w-9 shrink-0 rounded-lg object-cover"
                                        >

                                    @else

                                        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-xs font-semibold text-primary">

                                            {{ strtoupper(substr($teacherAssignment->teacher?->first_name ?? 'T', 0, 1)) }}

                                            @if($teacherAssignment->teacher?->last_name)

                                                {{ strtoupper(substr($teacherAssignment->teacher->last_name, 0, 1)) }}

                                            @endif

                                        </div>

                                    @endif


                                    <div class="min-w-0">

                                        @if($teacherAssignment->teacher)

                                            <a
                                                href="{{ route('teachers.show', $teacherAssignment->teacher) }}"
                                                class="block truncate text-sm font-medium text-text transition hover:text-primary"
                                            >
                                                {{ $teacherAssignment->teacher->fullName() }}
                                            </a>

                                            <p class="mt-0.5 text-xs text-muted">
                                                {{ $teacherAssignment->teacher->teacher_id }}
                                            </p>

                                        @else

                                            <span class="text-sm text-muted">
                                                Teacher unavailable
                                            </span>

                                        @endif

                                    </div>

                                </div>

                            </td>


                            {{-- Academic Year --}}
                            <td>

                                @if($teacherAssignment->academicYear)

                                    <div>

                                        <p class="whitespace-nowrap text-sm font-medium text-text">
                                            {{ $teacherAssignment->academicYear->name }}
                                        </p>

                                        @if($teacherAssignment->academicYear->is_current)

                                            <span class="mt-1 inline-flex badge-info">
                                                Current
                                            </span>

                                        @endif

                                    </div>

                                @else

                                    <span class="text-sm text-muted">
                                        —
                                    </span>

                                @endif

                            </td>


                            {{-- Class / Section --}}
                            <td>

                                <div>

                                    @if($teacherAssignment->schoolClass)

                                        <p class="text-sm font-medium text-text">
                                            {{ $teacherAssignment->schoolClass->name }}
                                        </p>

                                    @else

                                        <p class="text-sm text-muted">
                                            —
                                        </p>

                                    @endif


                                    @if($teacherAssignment->section)

                                        <p class="mt-0.5 text-xs text-muted">
                                            Section {{ $teacherAssignment->section->name }}
                                        </p>

                                    @endif

                                </div>

                            </td>


                            {{-- Subject --}}
                            <td>

                                <span class="text-sm font-medium text-text">
                                    {{ $teacherAssignment->subject_name }}
                                </span>

                            </td>


                            {{-- Periods --}}
                            <td>

                                @if($teacherAssignment->periods_per_week !== null)

                                    <div class="inline-flex items-center gap-1.5">

                                        <i class="fa-regular fa-clock text-xs text-muted"></i>

                                        <span class="text-sm font-medium text-text">
                                            {{ $teacherAssignment->periods_per_week }}
                                        </span>

                                        <span class="text-xs text-muted">
                                            / week
                                        </span>

                                    </div>

                                @else

                                    <span class="text-muted">
                                        —
                                    </span>

                                @endif

                            </td>


                            {{-- Assignment Type --}}
                            <td>

                                @if($teacherAssignment->is_class_teacher)

                                    <span class="badge-info">

                                        <i class="fa-solid fa-chalkboard-user mr-1"></i>

                                        Class Teacher

                                    </span>

                                @else

                                    <span class="rounded-lg bg-background px-2 py-1 text-xs font-medium text-muted">
                                        Subject Teacher
                                    </span>

                                @endif

                            </td>


                            {{-- Status --}}
                            <td>

                                @if($teacherAssignment->is_active)

                                    <span class="badge-success">

                                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-success"></span>

                                        Active

                                    </span>

                                @else

                                    <span class="badge-danger">

                                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-danger"></span>

                                        Inactive

                                    </span>

                                @endif

                            </td>


                            {{-- Actions --}}
                            <td>

                                <div class="flex items-center justify-end gap-1">

                                    @can('teacher-assignments.view')

                                        <a
                                            href="{{ route('teacher-assignments.show', $teacherAssignment) }}"
                                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-background hover:text-primary"
                                            title="View assignment"
                                            aria-label="View assignment for {{ $teacherAssignment->teacher?->fullName() ?? 'Unknown' }}"
                                        >
                                            <i class="fa-regular fa-eye text-xs"></i>
                                        </a>

                                    @endcan


                                    @can('teacher-assignments.edit')

                                        <a
                                            href="{{ route('teacher-assignments.edit', $teacherAssignment) }}"
                                            class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-background hover:text-primary"
                                            title="Edit assignment"
                                            aria-label="Edit assignment for {{ $teacherAssignment->teacher?->fullName() ?? 'Unknown' }}"
                                        >
                                            <i class="fa-solid fa-pen text-xs"></i>
                                        </a>

                                    @endcan


                                    @can('teacher-assignments.delete')

                                        <form
                                            action="{{ route('teacher-assignments.destroy', $teacherAssignment) }}"
                                            method="POST"
                                            class="delete-form"
                                        >

                                            @csrf
                                            @method('DELETE')

                                            <button
                                                type="submit"
                                                data-name="{{ $teacherAssignment->teacher?->fullName() ?? 'this assignment' }}"
                                                class="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-dangerLight hover:text-danger"
                                                title="Delete assignment"
                                                aria-label="Delete assignment for {{ $teacherAssignment->teacher?->fullName() ?? 'Unknown' }}"
                                            >
                                                <i class="fa-regular fa-trash-can text-xs"></i>
                                            </button>

                                        </form>

                                    @endcan

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td
                                colspan="9"
                                class="py-14 text-center"
                            >

                                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-background text-muted">

                                    <i class="fa-solid fa-chalkboard-user text-lg"></i>

                                </div>


                                @if(
                                    filled(request('search')) ||
                                    filled(request('academic_year_id')) ||
                                    filled(request('teacher_id')) ||
                                    filled(request('class_id')) ||
                                    filled(request('section_id')) ||
                                    request('is_class_teacher') !== null &&
                                    request('is_class_teacher') !== '' ||
                                    request('status') !== null &&
                                    request('status') !== ''
                                )

                                    <p class="mt-4 text-sm font-medium text-text">
                                        No matching assignments found
                                    </p>

                                    <p class="mx-auto mt-1 max-w-sm text-xs leading-5 text-muted">
                                        No assignments match the current search or filter criteria.
                                    </p>

                                    <a
                                        href="{{ route('teacher-assignments.index') }}"
                                        class="btn btn-secondary mt-4"
                                    >
                                        <i class="fa-solid fa-rotate-left"></i>

                                        Clear Filters
                                    </a>

                                @else

                                    <p class="mt-4 text-sm font-medium text-text">
                                        No assignments found
                                    </p>

                                    <p class="mx-auto mt-1 max-w-sm text-xs leading-5 text-muted">
                                        Create your first teacher assignment to get started.
                                    </p>

                                    @can('teacher-assignments.create')

                                        <a
                                            href="{{ route('teacher-assignments.create') }}"
                                            class="btn btn-primary mt-4"
                                        >
                                            <i class="fa-solid fa-plus"></i>

                                            New Assignment
                                        </a>

                                    @endcan

                                @endif

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>


        {{-- Pagination --}}
        @if($teacherAssignments->hasPages())

            <div class="border-t border-border px-5 py-4">

                {{ $teacherAssignments->withQueryString()->links() }}

            </div>

        @endif

    </div>

</div>


{{-- ============================================================
    Bulk Delete Form
============================================================ --}}
<form
    id="bulk-delete-form"
    action="{{ route('teacher-assignments.bulk-delete') }}"
    method="POST"
    class="hidden"
>

    @csrf
    @method('DELETE')

    <div id="bulk-delete-inputs"></div>

</form>

@endsection


@push('scripts')

<script>
document.addEventListener('DOMContentLoaded', function () {

    /*
    |--------------------------------------------------------------------------
    | Elements
    |--------------------------------------------------------------------------
    */

    const filterForm =
        document.getElementById('filter-form');

    const searchInput =
        document.getElementById('search');

    const academicYearSelect =
        document.getElementById('academic_year_id');

    const teacherSelect =
        document.getElementById('teacher_id');

    const classSelect =
        document.getElementById('class_id');

    const sectionSelect =
        document.getElementById('section_id');

    const assignmentTypeSelect =
        document.getElementById('is_class_teacher');

    const statusSelect =
        document.getElementById('status');

    const selectAll =
        document.getElementById('select-all');

    const rowCheckboxes =
        document.querySelectorAll('.row-checkbox');

    const bulkActions =
        document.getElementById('bulk-actions');

    const selectedCount =
        document.getElementById('selected-count');

    const bulkDeleteButton =
        document.getElementById('bulk-delete');

    const bulkDeleteForm =
        document.getElementById('bulk-delete-form');

    const bulkDeleteInputs =
        document.getElementById('bulk-delete-inputs');


    /*
    |--------------------------------------------------------------------------
    | Debounced Search
    |--------------------------------------------------------------------------
    */

    let searchTimer = null;

    if (searchInput && filterForm) {

        searchInput.addEventListener('input', function () {

            clearTimeout(searchTimer);

            searchTimer = setTimeout(function () {

                filterForm.submit();

            }, 500);

        });

    }


    /*
    |--------------------------------------------------------------------------
    | Automatic Filter Submission
    |--------------------------------------------------------------------------
    */

    [
        academicYearSelect,
        teacherSelect,
        assignmentTypeSelect,
        statusSelect
    ].forEach(function (element) {

        element?.addEventListener(
            'change',
            function () {

                filterForm?.submit();

            }
        );

    });


    /*
    |--------------------------------------------------------------------------
    | Class / Section Filtering
    |--------------------------------------------------------------------------
    */

    const sectionOptions = [];

    if (sectionSelect) {

        Array.from(
            sectionSelect.options
        ).forEach(function (option) {

            if (!option.value) {
                return;
            }

            sectionOptions.push({
                value: option.value,
                text: option.textContent,
                classId: option.dataset.classId
            });

        });

    }


    function updateSections() {

        if (
            !classSelect ||
            !sectionSelect
        ) {
            return;
        }


        const selectedClassId =
            classSelect.value;

        const selectedSectionId =
            sectionSelect.value;


        sectionSelect.innerHTML = '';


        const defaultOption =
            document.createElement('option');

        defaultOption.value = '';

        defaultOption.textContent =
            'All Sections';

        sectionSelect.appendChild(
            defaultOption
        );


        sectionOptions.forEach(
            function (section) {

                if (
                    selectedClassId &&
                    section.classId !== selectedClassId
                ) {
                    return;
                }


                const option =
                    document.createElement('option');

                option.value =
                    section.value;

                option.textContent =
                    section.text;

                option.dataset.classId =
                    section.classId;


                if (
                    section.value ===
                    selectedSectionId
                ) {
                    option.selected = true;
                }


                sectionSelect.appendChild(
                    option
                );

            }
        );

    }


    classSelect?.addEventListener(
        'change',
        function () {

            if (sectionSelect) {

                sectionSelect.value = '';

            }


            updateSections();

            filterForm?.submit();

        }
    );


    sectionSelect?.addEventListener(
        'change',
        function () {

            filterForm?.submit();

        }
    );


    updateSections();


    /*
    |--------------------------------------------------------------------------
    | Bulk Actions
    |--------------------------------------------------------------------------
    */

    function getSelectedCheckboxes() {

        return document.querySelectorAll(
            '.row-checkbox:checked'
        );

    }


    function updateBulkActions() {

        const selected =
            getSelectedCheckboxes();

        const count =
            selected.length;


        if (selectedCount) {

            selectedCount.textContent =
                `${count} selected`;

        }


        if (bulkActions) {

            bulkActions.classList.toggle(
                'hidden',
                count === 0
            );

            bulkActions.classList.toggle(
                'flex',
                count > 0
            );

        }


        if (selectAll) {

            const allCheckboxes =
                document.querySelectorAll('.row-checkbox');

            selectAll.checked =
                allCheckboxes.length > 0 &&
                count === allCheckboxes.length;

            selectAll.indeterminate =
                count > 0 &&
                count < allCheckboxes.length;

        }

    }


    selectAll?.addEventListener(
        'change',
        function () {

            document.querySelectorAll('.row-checkbox').forEach(
                function (checkbox) {

                    checkbox.checked =
                        selectAll.checked;

                }
            );

            updateBulkActions();

        }
    );


    rowCheckboxes.forEach(
        function (checkbox) {

            checkbox.addEventListener(
                'change',
                updateBulkActions
            );

        }
    );


    /*
    |--------------------------------------------------------------------------
    | Bulk Delete
    |--------------------------------------------------------------------------
    */

    bulkDeleteButton?.addEventListener(
        'click',
        function () {

            const selected =
                getSelectedCheckboxes();


            if (selected.length === 0) {

                window.alert(
                    'Please select at least one assignment.'
                );

                return;

            }


            const confirmed =
                window.confirm(
                    `Are you sure you want to delete ${selected.length} selected assignment(s)?`
                );


            if (!confirmed) {
                return;
            }


            if (!bulkDeleteInputs || !bulkDeleteForm) {
                return;
            }

            bulkDeleteInputs.innerHTML = '';


            selected.forEach(
                function (checkbox) {

                    const input =
                        document.createElement('input');

                    input.type =
                        'hidden';

                    input.name =
                        'ids[]';

                    input.value =
                        checkbox.value;

                    bulkDeleteInputs.appendChild(
                        input
                    );

                }
            );


            bulkDeleteButton.disabled =
                true;

            bulkDeleteForm.submit();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | Individual Delete Confirmation
    |--------------------------------------------------------------------------
    */

    document
        .querySelectorAll('.delete-form')
        .forEach(
            function (form) {

                form.addEventListener(
                    'submit',
                    function (event) {

                        const button =
                            form.querySelector(
                                '[data-name]'
                            );

                        const name =
                            button?.dataset.name ??
                            'this assignment';


                        const confirmed =
                            window.confirm(
                                `Are you sure you want to delete "${name}"?`
                            );


                        if (!confirmed) {

                            event.preventDefault();

                        }

                    }
                );

            }
        );


    /*
    |--------------------------------------------------------------------------
    | Initial State
    |--------------------------------------------------------------------------
    */

    updateBulkActions();

});
</script>

@endpush