{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title','GAS LMS |  Participants')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Grade Item' => route('teacher.course.quiz.index',$coffid)]])
@endsection
{{-- Content --}}
@section('content')
@include('components._error')
    <div class="card mb-8 shadow">
        <div class="card-body pt-9 pb-6">
            <!--begin::Details-->
            <div class="d-flex flex-wrap flex-sm-nowrap mb-6">
                <!--begin::Image-->
                <div class="d-flex flex-center flex-shrink-0 bg-light rounded w-100px h-100px w-lg-150px h-lg-150px me-7 mb-4">
                    <img class="mw-50px mw-lg-150px" src="{{env('SECURE_ASSETS').'/assets/media/logos/logo.png'}}" alt="image">
                </div>
                <!--end::Image-->
                <!--begin::Wrapper-->
                <div class="flex-grow-1">
                    <!--begin::Head-->
                    <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                        <!--begin::Details-->
                        <div class="d-flex flex-column">
                            <!--begin::Status-->
                            <div class="d-flex align-items-center mb-1">
                                <a href="#" class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">{{$quiz_data->title}}</a>
                            </div>
                            <!--end::Status-->
                        </div>
                        <!--end::Details-->
                    </div>
                    <!--end::Head-->
                    <!--begin::Info-->
                    <div class="d-flex flex-wrap justify-content-start">
                        <!--begin::Stats-->
                        <div class="d-flex flex-wrap">
                            <!--begin::Stat-->
                            {{-- <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                <!--begin::Number-->
                                <div class="d-flex align-items-center">
                                    <div class="fs-4 fw-bold"> {{$quiz_data->start_date }} / {{\Carbon\Carbon::createFromFormat('H:i:s',$quiz_data->start_time)->format('h:i A')}}</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">Start Time</div>
                                <!--end::Label-->
                            </div> --}}
                            <!--end::Stat-->
                            <!--begin::Stat-->
                            <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                <!--begin::Number-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
                                    <span class="svg-icon svg-icon-3 svg-icon-success me-2">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect>
                                            <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                    <div class="fs-4 fw-bold counted" data-kt-countup="true" data-kt-countup-value="15000" data-kt-countup-prefix="$" data-kt-initialized="1">Grades</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">{{$quiz_data->points}}</div>
                                <!--end::Label-->
                            </div>
                            <!--end::Stat-->
                            <!--begin::Stat-->
                            {{-- <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                <!--begin::Number-->
                                <div class="d-flex align-items-center">
                                    <div class="fs-4 fw-bold"> {{$assigned_students_count}}</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">Assigned Students</div>
                                <!--end::Label-->
                            </div> --}}
                            <!--end::Stat-->
                             <!--begin::Stat-->
                             {{-- <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                <!--begin::Number-->
                                <div class="d-flex align-items-center">
                                    <div class="fs-4 fw-bold"> {{$quiz_data->attempts}}</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">Quiz Attempts</div>
                                <!--end::Label-->
                            </div> --}}
                            <!--end::Stat-->
                        </div>
                        <!--end::Stats-->
                    </div>
                    <!--end::Info-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Details-->
            <div class="separator"></div>
            <div class="card-rounded bg-light d-flex flex-stack flex-wrap p-5">
                <!--begin::Nav-->
                <ul class="nav flex-wrap border-transparent fw-bold">
                     <!--begin::Nav item-->
                     <li class="nav-item my-1">
                        <a class="{{!request()->quiz ? 'active':''}} btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase" href="{{route('teacher.course.quiz.hyperlink.participants',[$coffid,$id])}}">
                            Not graded
                            <span class="badge badge-danger ms-3">{{$turnedIn_students_count}}</span>
                        </a>
                    </li>
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    <li class="nav-item my-1">
                        <a class="{{request()->quiz == 'graded' ? 'active':''}} btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase" href="{{route('teacher.course.quiz.hyperlink.participants',[$coffid,$id,'quiz=graded'])}}">
                            Graded
                            <span class="badge badge-success ms-3">{{$graded_students_count}}</span>
                        </a>
                    </li>
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    <li class="nav-item my-1">
                        <a class="{{request()->quiz == 'post/UnPost' ? 'active':''}} btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase" href="{{route('teacher.course.quiz.hyperlink.participants',[$coffid,$id,'quiz=post/UnPost'])}}">
                            Post/UnPost
                            <span class="badge badge-info ms-3">{{$assigned_students_count}}</span>
                        </a>
                    </li>
                    <!--end::Nav item-->
                    {{-- Manual Submit --}}
                    <!--begin::Nav item-->
                    {{-- <li class="nav-item my-1">
                        <a class="{{request()->quiz == 'manual' ? 'active':''}} btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase" href="{{route('teacher.course.quiz.quizManualSubmit',[$coffid,$id,'quiz=manual'])}}">
                            Manual Submit
                            <span class="badge badge-warning ms-3"> - </span>
                        </a>
                    </li> --}}
                    <!--end::Nav item-->
                </ul>
                <!--end::Nav-->
            </div>

        </div>
    </div>
    <!--begin::Card-->
    <div class="card shadow-sm">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
            <!--begin::Card title-->
            <div class="card-title align-items-start flex-column">
                <h2>Students List</h2>
            </div>
            <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                @if (request()->quiz == 'post/UnPost' || request()->quiz == 'graded')
                <!--begin::Add new-->
                <button class="btn btn-primary" onClick="confirmAction()" title="post grades" disabled='true' id="post_btn">
                    <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/general/gen055.svg-->
                    <span class="svg-icon svg-icon-3">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z" fill="currentColor"></path>
                            <path opacity="0.3" d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z" fill="currentColor"></path>
                        </svg>
                    </span>
                     <!--end::Svg Icon-->
                     Post
                </button>
                <!--end::Add new-->
                @endif
                <!--begin::Hide default export buttons-->
                <div id="kt_datatable_example_buttons" class="d-none"></div>
                <!--end::Hide default export buttons-->
            </div>
        </div>
        <!--end::Card header-->
        <div class="separator border-gray-200 pt-2 pb-4"></div>
        <!--begin::Card body-->
        <div class="card-body py-4">
            {{-- begin:export --}}
            @if ($quiz_students->count() > 0)
            {{-- <div class="d-flex justify-content-end">
                <form action="{{ route('teacher.course.quiz.exportQuizParticipants',$coffid) }}">
                    <input type="hidden" name="id" value="{{ $id }}">
                    <input type="hidden" name="quiz" value="{{ request()->quiz }}">
                    <button class="btn btn-outline btn-outline-success btn-sm rounded fw-bold">
                        <span class="indicator-label">
                            Export excel
                            <i class="far fa-file-excel"></i>
                        </span>
                        <span class="indicator-progress">
                            Exporting... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                        </span>
                    </button>
                </form>
            </div> --}}
            @endif
            {{-- end:export --}}
            <form method="post" action="{{ route('teacher.course.quiz.hyperlink.participants.grade.post', [$coffid, $id]) }}" id="post-form">
                @method('PUT')
                @csrf
                <!--begin::Table-->
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_datatable_example">
                    <!--begin::Table head-->
                    <thead>
                        <tr class="text-start bg-light text-muted fw-bold fs-7 text-uppercase gs-0">
                            @if (request()->quiz == 'post/UnPost' || request()->quiz == 'graded')
                                <th class="ps-10">
                                    <div class="form-check form-check-sm form-check-custom form-check-solid">
                                        <input class="form-check-input bg-primary shadow" type="checkbox" data-kt-check="true" data-kt-check-target=".widget-13-check" />
                                    </div>
                                </th>
                            @endif
                            <th class="text-center">Name</th>
                            <th class="text-center">Grade</th>
                            <th class="text-center">Ratio</th>
                            <th class="text-center">Status</th>
                            @if (!request()->quiz)
                                <th class="text-center">Assign Grade</th>
                                <th class="text-center">Set Absent</th>
                                <th class="text-center col-1">Set Note</th>
                                <th class="text-center">Set Feedback</th>
                                <th class="text-center">Submit Grade</th>
                            @endif
                            @if (request()->quiz == 'post/UnPost' || request()->quiz == 'graded')
                                <th class="text-center">View Feedback</th>
                                <th class="text-center">View Note</th>
                            @endif
                            @if (request()->quiz == 'graded')
                                <th class="text-center">Actions</th>
                            @endif
                        </tr>
                    </thead>
                    <!--end::Table head-->

                    <!--begin::Table body-->
                    <tbody class="text-gray-600 fw-semibold">
                        @forelse ($quiz_students as $student)
                            <tr class="text-center">
                                @if (request()->quiz == 'post/UnPost' || request()->quiz == 'graded')
                                    <td class="{{ $student->is_posted == 1 ? 'ps-0' : 'ps-10' }}">
                                        @if ($student->is_posted == 0)
                                            <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                <input class="form-check-input widget-13-check" name="students[]" type="checkbox" value="{{ $student->user_id }}" />
                                            </div>
                                        @else
                                            <button class="btn-icon btn-sm btn btn-danger unpost-btn"
                                                    quiz-id="{{ $student->id }}" type="button" data-bs-toggle="tooltip"
                                                    data-bs-placement="top" title="Unpost" data-bs-custom-class="tooltip-inverse">
                                                <i class="fas fa-close"></i>
                                            </button>
                                        @endif
                                    </td>
                                @endif
                                <td>
                                    <a href="{{ route('teacher.course.report.show', [$coffid, $student->user_id]) }}" target="_blank">
                                        {{ $student->first_name . ' ' . $student->middle_name . ' ' . $student->last_name }}
                                        <span data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse"
                                              data-bs-html="true" data-bs-placement="top"
                                              title="User ID:{{ $student->username }}<br>Email:{{ $student->email }}"
                                              class="svg-icon svg-icon-muted svg-icon-1hx">
                                            <svg width="4" height="4" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path opacity="0.3" d="M16.5 9C16.5 13.125 13.125 16.5 9 16.5C4.875 16.5 1.5 13.125 1.5 9C1.5 4.875 4.875 1.5 9 1.5C13.125 1.5 16.5 4.875 16.5 9Z" fill="currentColor" />
                                                <path d="M9 16.5C10.95 16.5 12.75 15.75 14.025 14.55C13.425 12.675 11.4 11.25 9 11.25C6.6 11.25 4.57499 12.675 3.97499 14.55C5.24999 15.75 7.05 16.5 9 16.5Z" fill="currentColor" />
                                                <rect x="7" y="6" width="4" height="4" rx="2" fill="currentColor" />
                                            </svg>
                                        </span>
                                    </a>
                                </td>
                                <td>
                                    @if (strVal($student->grade) >= 0)
                                        {{ $student->grade }}
                                    @else
                                        <span class="svg-icon svg-icon-muted svg-icon-2hx text-danger" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="Not assigned yet">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M21 13H3C2.4 13 2 12.6 2 12C2 11.4 2.4 11 3 11H21C21.6 11 22 11.4 22 12C22 12.6 21.6 13 21 13Z" fill="currentColor" />
                                            </svg>
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if (strVal($student->ratio) >= 0)
                                        {{ $student->ratio }}%
                                    @else
                                        <span class="svg-icon svg-icon-muted svg-icon-2hx text-danger" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="Not assigned yet">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M21 13H3C2.4 13 2 12.6 2 12C2 11.4 2.4 11 3 11H21C21.6 11 22 11.4 22 12C22 12.6 21.6 13 21 13Z" fill="currentColor" />
                                            </svg>
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if ($student->is_posted)
                                        <span class="badge badge-success">Posted</span>
                                    @else
                                        <span class="badge badge-danger">Unposted</span>
                                    @endif
                                    @if ($student->attempts_remainder == $quiz_data->attempts)
                                        <span class="badge badge-danger">Absent</span>
                                    @endif
                                </td>
                                @if (!request()->quiz)
                                    <td class="text-center">
                                        <div class="position-relative d-flex justify-content-center align-items-center">
                                            <input type="number" value="{{ old('grade') }}" min="0" max="{{ $quiz_data->points }}" step=".01" id="grade_{{ $student->id }}" class="form-control form-control-lg form-control-solid px-5" name="grade" placeholder="Insert grade">
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <div class="position-relative d-flex justify-content-center align-items-center">
                                            <label class="form-check form-switch form-check-custom form-check-solid">
                                                <input class="form-check-input absent-checkbox" type="checkbox" name="absent" data-student-id="{{ $student->id }}" {{ $student->attempts_remainder == 1 ? 'checked' : '' }}>
                                                <span class="form-check-label fw-semibold text-muted">Mark as Absent</span>
                                            </label>
                                        </div>
                                    </td>

                                @endif
                                @if (!request()->quiz)
                                <td class="text-center">
                                    <div class="col-12">
                                        <div class="position-relative d-flex justify-content-center align-items-center">
                                            <input
                                                type="text"
                                                value="{{ old('note') }}"
                                                id="note_{{ $student->id }}"
                                                class="form-control form-control-lg form-control-solid px-5"
                                                name="note"
                                                placeholder="Insert note (max:5 words)"
                                                style="width: 300px;"
                                                oninput="limitWords(this, 5)">

                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <a href="#" class="btn btn-light-primary btn-lg assign_feedback_btn" data-bs-toggle="modal" data-bs-target="#assign_feedback_modal" quiz-id="{{ $student->id }}">
                                        <span class="svg-icon svg-icon-white">Set Feedback</span>
                                    </a>
                                </td>

                                <td>
                                    <a href="#" class="btn btn-light-success btn-lg assign_grade_btn" quiz-id="{{ $student->id }}">
                                        <span class="indicator-label">Set Grade</span>
                                        <span class="indicator-progress" style="display: none;">
                                            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                        </span>
                                    </a>

                                </td>
                                @endif
                                @if (request()->quiz == 'post/UnPost' || request()->quiz == 'graded')
                                    <td>
                                        <div>
                                            <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#feedback_modal" quiz-id="{{ $student->id }}" class="feedback_link btn btn-outline btn-outline-primary btn-sm rounded fw-bold">
                                                <span class="svg-icon svg-icon-muted svg-icon-2x">View Feedback</span>
                                            </a>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#note_modal" quiz-id="{{ $student->id }}" class="note_link btn btn-outline btn-outline-primary btn-sm rounded fw-bold">
                                                <span class="svg-icon svg-icon-muted svg-icon-2x">View Note</span>
                                            </a>
                                        </div>
                                    </td>
                                @endif
                                @if (request()->quiz == 'graded')
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-success btn-sm dropdown-toggle" type="button" id="dropdownMenuButton{{ $student->id }}" data-bs-toggle="dropdown" aria-expanded="false">
                                                Actions
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ $student->id }}">
                                                <li>
                                                    <a href="#" class="dropdown-item edit_grade_btn"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#edit_grade_modal"
                                                    quiz-id="{{ $student->id }}"
                                                    data-id="{{ $student->id }}"
                                                    data-student-id="{{ $student->user_id }}">
                                                        Edit Grade
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="dropdown-item edit_note_btn"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#edit_note_modal"
                                                    quiz-id="{{ $student->id }}"
                                                    data-id="{{ $student->id }}"
                                                    data-student-id="{{ $student->user_id }}">
                                                        Edit Note
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="dropdown-item edit_feedback_btn"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#edit_feedback_modal"
                                                    quiz-id="{{ $student->id }}"
                                                    data-id="{{ $student->id }}"
                                                    data-student-id="{{ $student->user_id }}">
                                                        Edit Feedback
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="dropdown-item edit_absent_btn"
                                                       data-bs-toggle="modal"
                                                       data-bs-target="#edit_absent_modal"
                                                       data-quiz-id="{{ $student->id }}"
                                                       data-id="{{ $student->id }}"
                                                       data-student-id="{{ $student->user_id }}">
                                                        Edit Absent
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                @endif
                            </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center">No Students Available.</td>
                        </tr>
                        @endforelse
                    </tbody>
                    <!--end::Table body-->
                </table>
                <!--end::Table-->

                {{-- @if (!request()->quiz)
                    <div class="row mt-3">
                        <div class="col-lg-12 d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary" id="submit-button">Submit Grades</button>
                        </div>
                    </div>
                @endif --}}
            </form>
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->

    {{-- Assign feedback modal --}}
    <div class="modal fade" id="assign_feedback_modal" tabindex="-1" aria-modal="true" role="dialog" style="padding-left: 0px;">
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content">
                <div class="modal-header pb-0 border-0 justify-content-end">
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <span class="svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                            </svg>
                        </span>
                    </div>
                </div>
                <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
                    <div class="text-center mb-8">
                        <h1 class="mb-8">Assign Feedback to Student</h1>
                    </div>
                    <div class="mb-4">
                        <textarea id="student-feedback" name="feedback" class="tox-target kt_docs_tinymce_hidden" placeholder="Insert a feedback..."></textarea>
                        <div class="separator my-2"></div>
                        <input type="hidden" id="feedback-student-id"> <!-- To store the student ID -->
                    </div>
                    <div class="text-center">
                        <button type="button" id="submit-feedback" class="btn btn-primary me-10">
                            <span class="indicator-label">Submit Feedback</span>
                            <span class="indicator-progress" style="display: none;">
                                Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                            </span>
                        </button>

                    </div>

                </div>
            </div>
        </div>
    </div>

    {{-- feedback modal --}}
    <div class="modal fade" id="feedback_modal" tabindex="-1" aria-modal="true" role="dialog" style="padding-left: 0px;">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header pb-0 border-0 justify-content-end">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <!--begin::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
                    <!--begin::Content-->
                    <div class="text-center mb-13">
                        <h1 class="mb-8">FeedBack</h1>
                        <img src="{{env('SECURE_ASSETS').'/assets/media/illustrations/sigma-1/4.png'}}" width="150" alt="">
                    </div>
                    <!--end::Content-->
                    <!--begin::Search-->
                    <div id="kt_modal_users_search_handler" data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="enter" data-kt-search-layout="inline" data-kt-search="true">
                        <div class="py-3">
                            <h6 class="mb-3">Feedback text:</h6>
                            <p id="feedback_text"></p>
                        </div>
                        <div class="py-3">
                            {{-- <h6 class="mb-3">Feedback attachments:</h6> --}}
                            <p class="" id="feedback_attachments"></p>
                        </div>
                    </div>
                    <!--end::Search-->
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>

    {{-- note modal --}}
    <div class="modal fade" id="note_modal" tabindex="-1" aria-modal="true" role="dialog" style="padding-left: 0px;">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header pb-0 border-0 justify-content-end">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <!--begin::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
                    <!--begin::Content-->
                    <div class="text-center mb-13">
                        <h1 class="mb-8">Note</h1>
                        <img src="{{env('SECURE_ASSETS').'/assets/media/illustrations/sigma-1/4.png'}}" width="150" alt="">
                    </div>
                    <!--end::Content-->
                    <!--begin::Search-->
                    <div id="kt_modal_users_note_handler" data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="enter" data-kt-search-layout="inline" data-kt-search="true">
                        <div class="py-3">
                            <h6 class="mb-3">Note text:</h6>
                            <p id="note_text"></p>
                        </div>
                        <div class="py-3">
                            {{-- <h6 class="mb-3">Note attachments:</h6> --}}
                            <p class="" id="note_attachments"></p>
                        </div>
                    </div>
                    <!--end::Search-->
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>

    <!-- Edit Grade Modal -->
    <div class="modal fade" id="edit_grade_modal" tabindex="-1" aria-modal="true" role="dialog" style="padding-left: 0px;">
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content">
                <div class="modal-header pb-0 border-0 justify-content-end">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
                    <form action="{{ route('teacher.course.quiz.hyperlink.updateGrade', [$coffid, $id]) }}" method="get">
                        <div class="text-center mb-8">
                            <h1 class="mb-8">Edit Student Grade</h1>
                        </div>
                        <div class="mb-4">
                            <input type="number" name="grade" id="modal_grade" class="form-control" placeholder="Enter Grade" required>
                            <input type="hidden" name="student_id" id="modal_student_id">
                            <input type="hidden" name="attempt_id" id="modal_quiz_id">
                            <div class="separator my-2"></div>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary" id="update-grade-btn">
                                <span class="indicator-label">Update Grade</span>
                                <span class="indicator-progress" style="display: none;">
                                    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Feedback Modal -->
    <div class="modal fade" id="edit_feedback_modal" tabindex="-1" aria-modal="true" role="dialog" style="padding-left: 0px;">
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content">
                <div class="modal-header pb-0 border-0 justify-content-end">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
                    <form action="{{ route('teacher.course.quiz.hyperlink.updateFeedback', [$coffid, $id]) }}" method="get">
                        <div class="text-center mb-8">
                            <h1 class="mb-8">Edit Feedback</h1>
                        </div>
                        <div class="mb-4">
                            <textarea id="student-feedback" name="feedbackValue" class="tox-target kt_docs_tinymce_hidden" placeholder="Insert a feedback..."></textarea>
                            <input type="hidden" name="student_id" id="modal_student_feedback_id">
                            <input type="hidden" name="attempt_id" id="modal_quiz_feedback_id">
                            <div class="separator my-2"></div>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary" id="update-feedback-btn">
                                <span class="indicator-label">Update Feedback</span>
                                <span class="indicator-progress" style="display: none;">
                                    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Absent Modal -->
    <div class="modal fade" id="edit_absent_modal" tabindex="-1" aria-modal="true" role="dialog" style="padding-left: 0px;">
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content">
                <div class="modal-header pb-0 border-0 justify-content-end">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
                    <form id="edit_absent_form" action="" method="get">
                        <div class="text-center mb-8">
                            <h1 class="mb-8">Edit Absent</h1>
                        </div>
                        <div class="mb-4">
                            <div class="position-relative d-flex justify-content-center align-items-center">
                                <label class="form-check"><strong style="color:red">Note: ALL RELATED DATA WILL BE REMOVED</strong>.</label>
                            </div>
                            <div class="position-relative d-flex justify-content-center align-items-center">
                                <label class="form-check form-switch form-check-custom form-check-solid">
                                    <input class="form-check-input" type="checkbox" name="absent" id="absent_checkbox">
                                    <span class="form-check-label fw-semibold text-muted">Mark as Absent</span>
                                </label>
                            </div>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary" id="update-feedback-btn">
                                <span class="indicator-label">Update Absent</span>
                                <span class="indicator-progress" style="display: none;">
                                    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Note Modal -->
    <div class="modal fade" id="edit_note_modal" tabindex="-1" aria-modal="true" role="dialog" style="padding-left: 0px;">
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content">
                <div class="modal-header pb-0 border-0 justify-content-end">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
                    <form action="{{ route('teacher.course.quiz.hyperlink.updateNote', [$coffid, $id]) }}" method="get">
                        <div class="text-center mb-8">
                            <h1 class="mb-8">Edit Note</h1>
                        </div>
                        <div class="mb-4">
                            <input type="text" oninput="limitWords(this, 5)" name="noteValue" id="modal_note" class="form-control" placeholder="Enter Note (max : 5 words)" required>
                            <input type="hidden" name="student_id" id="modal_student_note_id">
                            <input type="hidden" name="attempt_id" id="modal_quiz_note_id">
                            <div class="separator my-2"></div>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary" id="update-note-btn">
                                <span class="indicator-label">Update Note</span>
                                <span class="indicator-progress" style="display: none;">
                                    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('js')
<script>
$(document).ready( function () {
  var table=$('#quiz_students_table').DataTable( {
    paging: false,
    ordering: false,
    info: false,
    searching: true,
    dom: 'Bfrtip',
  });
  table.buttons( '.btn' ).remove();
});
</script>

{{-- Textarea --}}
<script>
    tinymce.init({
        selector: ".kt_docs_tinymce_hidden",
        height: "280",
        menubar: false,
        toolbar: ["styleselect fontselect fontsizeselect",
            "undo redo | cut copy paste | bold italic | link image | alignleft aligncenter alignright alignjustify",
            "bullist numlist | outdent indent | blockquote subscript superscript | advlist | autolink | lists charmap | print preview |  code"
        ],
        plugins: "advlist autolink link image lists charmap print preview code"
    });
</script>


{{-- get feedback --}}
<script>
    $('.feedback_link').on('click',function(){
        const coffid={{$coffid}};
        const id=$(this).attr('quiz-id')
        let url="{{route('ajax.hyperlinkQuiz.getParticipantsFeedback',[':coffid',':id'])}}"
        url = url.replace(':coffid', coffid);
        url = url.replace(':id', id );
        axios.get(url)
        .then(function(response) {
            var feedback=response.data.feedback;
            if(feedback == null){
                feedback='No feedback'
            }
            $('#feedback_text').empty()
            $('#feedback_text').html(' '+feedback)
            $('#feedback_attachments').empty()
            $.each( response.data.hyperlink_quiz_attempt_attachments, function( key, value ) {
                for(var i = 0 ; i < response.data.feedback_download_urls.length; i++)
                {

                $('#feedback_attachments').append(
                // <a href="${value.getDownloadUrl(value.url)}" class="menu-link px-3">

                `<a href="${response.data.feedback_download_urls[0]}" class="menu-link px-5" target="_self">` +
                    '<i class="bi bi-cloud-arrow-down fs-4 text-dark "></i>' +
                    '<span class="ms-6 pt-1">'+value.file_name+'</span>' +
                '</a>'
               )
                }
            });
        })
        .catch(function(error) {
            toastr.error('something went wrong');
            console.log(error)
        });
    })
</script>

{{-- get note --}}
<script>
    $('.note_link').on('click',function(){
        const coffid={{$coffid}};
        const id=$(this).attr('quiz-id')
        let url="{{route('ajax.hyperlinkQuiz.getParticipantsNote',[':coffid',':id'])}}"
        url = url.replace(':coffid', coffid);
        url = url.replace(':id', id );
        axios.get(url)
        .then(function(response) {
            var note=response.data;
            if(Object.keys(note).length == 0){
                note='No note';
            }
            $('#note_text').empty()
            $('#note_text').html(' '+note)
            $('#note_attachments').empty()

        })
        .catch(function(error) {
            toastr.error('something went wrong');
            console.log(error)
        });
    })
</script>

{{-- confirm alert --}}
<script>
    function confirmAction() {
        // e.preventDefault();
        Swal.fire({
            title: "Are you sure?",
            text: "Pair in mind, once you confirm, students will be able to see their points!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, post !"
        }).then(function(result) {
            if (result.value) {
                $('#post-form').submit();
            }
        });
    }
</script>

{{-- on check checkboxes --}}
<script>
    $('input[type="checkbox"]').change(function(){
        if ($('input[type="checkbox"]').is(":checked"))
        {
            $('#post_btn').prop('disabled', false)
        }
        else
        {
            $('#post_btn').prop('disabled', true)
        }
    })
</script>

{{-- Unpost student grade --}}
<script>
    $('.unpost-btn').on('click',function(){
        const quiz_id = $(this).attr('quiz-id');
        const course_id = {{$coffid}};
        let url = "{{ route('teacher.course.quiz.hyperlink.participants.grade.unpost', [":course_id",":quiz_id"]) }}";
        url = url.replace(':course_id', course_id);
        url = url.replace(':quiz_id', quiz_id);

        const axiosSetup=axios.create({
            headers:{
                "X-Requested-With":"XMLHttpsRequest",
                'Authorization':null,
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content'),
                put:{}
            },
            withCredentials:false
        })
        axiosSetup.post(url).then(function(response){
            console.log(response.status)
            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": false,
                "progressBar": true,
                "positionClass": "toastr-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            toastr.success('UnPosted Successfully');
            setTimeout(function(){
                window.location.reload(1);
            }, 1000);
        }).catch(function(error) {
            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": false,
                "progressBar": true,
                "positionClass": "toastr-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            toastr.error('Something went wrong');
        });
    })
</script>

<script>
    $(document).ready(function () {
        $('#post-form').on('submit', function (e) {
            e.preventDefault();

            this.submit();
        });

        $('.unpost-btn').on('click', function () {
            const quizId = $(this).attr('quiz-id');
        });

    });

</script>

<script>
    $(document).ready(function () {
        $('.edit_grade_btn').on('click', function() {
            // Get student id and grade from data attributes
            var studentId = $(this).data('student-id');
            var quizId = $(this).data('id');

            // Populate the modal with student info
            $('#modal_student_id').val(studentId);
            $('#modal_quiz_id').val(quizId);
        });

        $('.edit_feedback_btn').on('click', function() {
            // Get student id and grade from data attributes
            var studentId = $(this).data('student-id');
            var quizId = $(this).data('id');

            // Populate the modal with student info
            $('#modal_student_feedback_id').val(studentId);
            $('#modal_quiz_feedback_id').val(quizId);
        });

        $('.edit_note_btn').on('click', function() {
            // Get student id and grade from data attributes
            var studentId = $(this).data('student-id');
            var quizId = $(this).data('id');

            // Populate the modal with student info
            $('#modal_student_note_id').val(studentId);
            $('#modal_quiz_note_id').val(quizId);
        });

        $('.edit_absent_btn').on('click', function() {
            var studentId = $(this).data('id');
            var studentUserId = $(this).data('student-id');
            var quizId = $(this).data('quiz-id');

            console.log({{ $coffid }});

            var formAction = "{{ route('teacher.course.quiz.hyperlink.updateAbsent', ['coffid' => 'COFF', 'studentid' => 'STUDENT', 'id' => 'QUIZ_ID']) }}";
            formAction = formAction.replace('QUIZ_ID', quizId);
            formAction = formAction.replace('STUDENT', studentUserId);
            formAction = formAction.replace('COFF', {{ $coffid }});

            $('#edit_absent_form').attr('action', formAction);
            $('#absent_checkbox').attr('data-student-id', studentUserId);
        });
    });
</script>

<script>
    $(document).ready(function () {
        $(document).on('change', '.absent-checkbox', function (event) {
            const studentId = $(this).data('student-id');
            const isChecked = $(this).is(':checked');
            $.ajax({
                url: "{{ route('teacher.course.quiz.hyperlink.setAbsent', [$coffid, $id]) }}",
                method: 'get',
                data: {
                    student_id: studentId,
                    absent: isChecked ? 1 : 0,
                },
                success: function (response) {
                    toastr.options = {
                        "closeButton": false,
                        "debug": false,
                        "newestOnTop": false,
                        "progressBar": true,
                        "positionClass": "toastr-top-right",
                        "preventDuplicates": false,
                        "onclick": null,
                        "showDuration": "300",
                        "hideDuration": "1000",
                        "timeOut": "5000",
                        "extendedTimeOut": "1000",
                        "showEasing": "swing",
                        "hideEasing": "linear",
                        "showMethod": "fadeIn",
                        "hideMethod": "fadeOut"
                    };
                    toastr.success('Status Changed Successfully');
                },
                error: function (xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: "An error occurred while updating the status.",
                        confirmButtonText: 'Try Again',
                        timer: 3000
                    });
                }
            });
        });

        $('.assign_feedback_btn').on('click', function () {
            const studentId = $(this).attr('quiz-id');
            $('#feedback-student-id').val(studentId);
        });

        $('#submit-feedback').on('click', function () {
            const studentId = $('#feedback-student-id').val();
            const feedbackValue = tinymce.get('student-feedback').getContent();

            if (feedbackValue.trim() === "") {
                Swal.fire({
                    icon: 'warning',
                    title: 'Warning!',
                    text: "Please enter a valid feedback.",
                    confirmButtonText: 'Understood',
                    timer: 3000
                });
                return;
            }

            const submitButton = $(this);
            const indicatorLabel = submitButton.find('.indicator-label');
            const indicatorProgress = submitButton.find('.indicator-progress');

            indicatorLabel.hide();
            indicatorProgress.show();
            submitButton.prop('disabled', true);

            $.ajax({
                url: "{{ route('teacher.course.quiz.hyperlink.storeFeedback', [$coffid, $id]) }}",
                method: 'GET',
                data: {
                    student_id: studentId,
                    feedback: feedbackValue,
                },
                success: function (response) {
                    toastr.options = {
                        "closeButton": false,
                        "debug": false,
                        "newestOnTop": false,
                        "progressBar": true,
                        "positionClass": "toastr-top-right",
                        "preventDuplicates": false,
                        "onclick": null,
                        "showDuration": "300",
                        "hideDuration": "1000",
                        "timeOut": "5000",
                        "extendedTimeOut": "1000",
                        "showEasing": "swing",
                        "hideEasing": "linear",
                        "showMethod": "fadeIn",
                        "hideMethod": "fadeOut"
                    };
                    toastr.success('Feedback Submitted Successfully');
                    $('#assign_feedback_modal').modal('hide');

                    indicatorLabel.show();
                    indicatorProgress.hide();
                    submitButton.prop('disabled', false);

                    tinymce.get('student-feedback').setContent('');
                },
                error: function (xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: "An error occurred while submitting the feedback.",
                        confirmButtonText: 'Try Again',
                        timer: 3000
                    });

                    indicatorLabel.show();
                    indicatorProgress.hide();
                    submitButton.prop('disabled', false);
                }
            });
        });


    });
</script>

<script>
    $(document).ready(function () {
        $(document).on('click', '.assign_grade_btn', function (event) {
            event.preventDefault();

            const submitButton = $(this);
            const studentId = submitButton.attr('quiz-id');
            const gradeInput = $('#grade_' + studentId);
            const noteInput = $('#note_' + studentId);
            const numericGrade = parseFloat(gradeInput.val());
            const noteValue = noteInput.val();

            if (isNaN(numericGrade) || numericGrade === "" || numericGrade < 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Warning!',
                    text: "Please enter a valid number for the grade.",
                    confirmButtonText: 'Understood',
                    timer: 3000
                });
                return;
            }

            const indicatorLabel = submitButton.find('.indicator-label');
            const indicatorProgress = submitButton.find('.indicator-progress');

            indicatorLabel.hide();
            indicatorProgress.show();
            submitButton.prop('disabled', true);

            $.ajax({
                url: "{{ route('teacher.course.quiz.hyperlink.assignGrade', [$coffid, $id]) }}",
                method: 'GET',
                data: {
                    student_id: studentId,
                    grade: numericGrade,
                    note: noteValue,
                },
                success: function (response) {
                    if(response.success){
                        toastr.success('Grade Submitted Successfully');

                        submitButton.closest('tr').fadeOut(500, function () {
                            $(this).remove();
                        });
                    }else{
                        Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: response.message,
                        confirmButtonText: 'Try Again',
                        timer: 3000
                    });

                    indicatorLabel.show();
                    indicatorProgress.hide();
                    submitButton.prop('disabled', false);
                    }

                },
                error: function (xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: "An error occurred while submitting the grade.",
                        confirmButtonText: 'Try Again',
                        timer: 3000
                    });

                    indicatorLabel.show();
                    indicatorProgress.hide();
                    submitButton.prop('disabled', false);
                }
            });
        });

    });

    $('#update-grade-btn').on('click', function () {
        const submitButton = $(this);
        const indicatorLabel = submitButton.find('.indicator-label');
        const indicatorProgress = submitButton.find('.indicator-progress');

        indicatorLabel.hide();
        indicatorProgress.show();

        submitButton.prop('disabled', true);

        $(this).closest('form').submit();
    });

</script>

<script>
    function limitWords(input, maxWords) {
        const words = input.value.split(/\s+/);
        if (words.length > maxWords) {
            input.value = words.slice(0, maxWords).join(" ");
        }
    }

</script>

@endsection