{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title','GAS LMS | Homework Participants')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Homework' => route('teacher.course.assignment.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">{{$assignment_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"> {{$assignment_data->start_date }} / {{\Carbon\Carbon::createFromFormat('H:i:s',$assignment_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">Points</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">{{$assignment_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"> {{$assignment_data->attempts}}</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">homework 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()->assignment == null ? '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.assignment.hyperlink.participants',[$coffid,$id])}}">
                            All Assigned
                            <span class="badge badge-info ms-3">{{$assigned_students_count}}</span>
                        </a>
                    </li>
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    <li class="nav-item my-1">
                        <a class="{{request()->assignment == 'turnedIn' ? '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.assignment.hyperlink.participants',[$coffid,$id,'assignment=turnedIn'])}}">
                            Turned in
                            <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()->assignment == '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.assignment.hyperlink.participants',[$coffid,$id,'assignment=graded'])}}">
                            Graded
                            <span class="badge badge-success ms-3">{{$graded_students_count}}</span>
                        </a>
                    </li>
                    <!--end::Nav item-->

                    {{-- Manual Submit --}}
                    <!--begin::Nav item-->
                    {{-- <li class="nav-item my-1">
                        <a class="{{request()->assignment == '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.assignment.assignmentManualSubmit',[$coffid,$id,'assignment=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()->assignment == null || request()->assignment == '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 ($assignment_students->count() > 0)
            {{-- <div class="d-flex justify-content-end">
                <form action="{{ route('teacher.course.assignment.exportassignmentParticipants',$coffid) }}">
                    <input type="hidden" name="id" value="{{ $id }}">
                    <input type="hidden" name="assignment" value="{{ request()->assignment }}">
                    <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.assignment.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>
                        <!--begin::Table row-->
                        <tr class="text-start  bg-light text-muted fw-bold fs-7 text-uppercase gs-0">
                            @if (request()->assignment == null || request()->assignment == '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>
                            <th class="text-center">attempts</th>
                            @if (request()->assignment == 'turnedIn')
                            <th class="text-center">assign grade</th>
                            @endif
                            @if (request()->assignment == null || request()->assignment == 'graded' )
                            <th class="text-center">view feedback</th>
                            @endif
                            @if (request()->assignment == 'graded')
                            <th class="text-center">actions</th>
                            @endif
                        </tr>
                        <!--end::Table row-->
                    </thead>
                    <!--end::Table head-->
                    <!--begin::Table body-->
                    <tbody class="text-gray-600 fw-semibold">
                        <!--begin::Table row-->
                        @php
                            $count=0;
                        @endphp
                        @foreach ($assignment_students as $student)
                            <tr class="text-center">
                                @if (request()->assignment == null || request()->assignment == '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"
                                        assignment-id="{{$student->id}}" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="un post" 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}}
                                        <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/communication/com006.svg-->
                                        <span  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="{{$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
                                        <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/arrows/arr010.svg-->
                                        <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>
                                        <!--end::Svg Icon-->
                                    @endif
                                </td>
                                <td>
                                    @if (strVal($student->ratio) >= 0)
                                        {{$student->ratio}}%
                                        @else
                                        <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/arrows/arr010.svg-->
                                        <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>
                                        <!--end::Svg Icon-->
                                    @endif
                                </td>
                                <td>
                                    @if ($student->is_posted)
                                        <span class="badge badge-success">posted</span>
                                        @else
                                        <span class="badge badge-danger">un posted</span>
                                    @endif
                                    @php
                                        $submit_date_time = $student->end_date . ' ' . $student->end_time;
                                    @endphp

                                    @if ($student->allow_submit_after_end_time and $submit_date_time < $student->created_at)
                                        <span class="badge badge-success">late submission</span>
                                    @endif
                                </td>
                                <td>{{$student->attempts_remainder}}</td>
                                @if (request()->assignment == 'turnedIn')
                                <td>
                                    <a href="#" class="btn btn-outline-success btn-sm assign_grade_btn"
                                    data-bs-toggle="modal" data-bs-target="#assign_grade_modal"
                                    assignment-id={{$student->id}}>
                                        <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/arrows/arr084.svg-->
                                        <span class="svg-icon svg-icon-muted svg-icon-2x"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.5" d="M12.8956 13.4982L10.7949 11.2651C10.2697 10.7068 9.38251 10.7068 8.85731 11.2651C8.37559 11.7772 8.37559 12.5757 8.85731 13.0878L12.7499 17.2257C13.1448 17.6455 13.8118 17.6455 14.2066 17.2257L21.1427 9.85252C21.6244 9.34044 21.6244 8.54191 21.1427 8.02984C20.6175 7.47154 19.7303 7.47154 19.2051 8.02984L14.061 13.4982C13.7451 13.834 13.2115 13.834 12.8956 13.4982Z" fill="currentColor"/>
                                            <path d="M7.89557 13.4982L5.79487 11.2651C5.26967 10.7068 4.38251 10.7068 3.85731 11.2651C3.37559 11.7772 3.37559 12.5757 3.85731 13.0878L7.74989 17.2257C8.14476 17.6455 8.81176 17.6455 9.20663 17.2257L16.1427 9.85252C16.6244 9.34044 16.6244 8.54191 16.1427 8.02984C15.6175 7.47154 14.7303 7.47154 14.2051 8.02984L9.06096 13.4982C8.74506 13.834 8.21146 13.834 7.89557 13.4982Z" fill="currentColor"/>
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </a>
                                </td>
                                @endif
                                @if (request()->assignment == null || request()->assignment == 'graded')
                                    <td>
                                        <div>

                                            <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#feedback_modal"
                                                assignment-id={{$student->id}} class='feedback_link btn btn-outline btn-outline-primary btn-sm rounded fw-bold'>
                                                <i class="fa-solid fa-eye"></i>
                                                View feedback
                                            </a>
                                        </div>
                                    </td>
                                @endif

                                @if (request()->assignment == 'graded')
                                <td>
                                    <a href="#" class="btn btn-success btn-sm assign_grade_btn"
                                    data-bs-toggle="modal" data-bs-target="#assign_grade_modal"
                                    assignment-id={{$student->id}}>
                                        Edit Grade
                                    </a>
                                </td>
                                @endif
                            </tr>
                        @endforeach
                        <!--end::Table row-->
                    </tbody>
                    <!--end::Table body-->
                </table>
                <!--end::Table-->
            </form>
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->

    {{-- Assign Grade modal --}}
    <div class="modal fade" id="assign_grade_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-8">
                        <h1 class="mb-8">Assign a grade to student</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">
                        <!--begin::Form-->
                        <form method="post" id="assign_grade_form" action="" class="w-100 position-relative mb-5" enctype="multipart/form-data">
                            @method('PUT')
                            @csrf
                            <!--begin::Icon-->
                            <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                            <label class="form-label mb-3 required" for="grade">grade:</label>
                            <div class="position-relative mb-7">
                                <i class="bi bi-pencil fw-bold text-primary position-absolute top-50 ms-5 translate-middle-y"></i>
                                <!--end::Svg Icon-->
                                <!--end::Icon-->
                                <!--begin::Input-->
                                <input type="number" value="{{ old('grade') }}" min=0 max="{{ $assignment_data->points }}" step=".01" id="grade" class="form-control form-control-lg form-control-solid px-15" name="grade"  placeholder="insert student grade" required>
                                <!--end::Input-->
                            </div>
                            <div class="separator my-2"></div>
                            <div class="position-relative mb-7 mt-4">
                                <label class="form-label mb-3" for="feedback">feedback:</label>
                                <!--begin::Input-->
                                    <textarea id="feedback" name="feedback" class="tox-target kt_docs_tinymce_hidden"
                                        placeholder="Insert a feedback...">
                                        {{ old('feedback') }}
                                    </textarea>
                            <!--end::Input-->
                            </div>
                            <div class="separator my-2"></div>
                            <div class="position-relative mt-4">
                                <label class="form-label mb-3" for="feedback_attachment">Upload Attachment:</label>
                                <!--begin::Input-->
                                <div class="file-drop-area">
                                    <span class="fake-btn">Choose files</span>
                                    <span class="file-msg">or drag and drop files here</span>
                                    <input class="file-input" id="feedback_attachment" type="file" name="feedback_attachment[]" multiple>
                                </div>

                                {{-- <div class="form-text text-muted">Allowed File Types: jpg,jpeg,png,gif,zip,rar,doc,docx,xls,xlsx,pptx,mp4,mp3,ogg,pdf,csv</div>
                                <div class="form-text text-muted">Maximum Size For All Attachments: 50MB</div>
                                <div class="form-text text-muted">Maximum Allowed Attachments Count: 4 Attachments</div>
                    --}}
                            <!--end::Input-->
                            </div>
                            <div class="">

                                <button type="submit" class=" submit_btn btn btn-primary mx-auto d-block w-45 mt-9">
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen016.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>
                                    <span class="pulse-ring"></span>
                                    <span class="indicator-label">
                                        Submit
                                    </span>
                                    <span class="indicator-progress">
                                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                    <!--end::Svg Icon-->
                                </button>
                            </div>
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Search-->
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </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>

@endsection
@section('js')
<script>
$(document).ready( function () {
  var table=$('#assignment_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>


{{-- click assign grade btn --}}
<script>
    $('.assign_grade_btn').on('click',function(){
        const coffid={{$coffid}};
        const id=$(this).attr('assignment-id')
        let editUrl="{{route('ajax.hyperlinkAssignment.participantsGrade',[':coffid',':id'])}}"
        let updatetUrl="{{route('teacher.course.assignment.hyperlink.participants.grade.update',[':coffid',':id'])}}"
        editUrl = editUrl.replace(':coffid', coffid);
        editUrl = editUrl.replace(':id', id );
        updatetUrl = updatetUrl.replace(':coffid', coffid );
        updatetUrl = updatetUrl.replace(':id', id );
        axios.get(editUrl)
        .then(function(response) {
            $('#grade').val(response.data.grade)
            if(response.data.feedback){
                tinyMCE.activeEditor.setContent(response.data.feedback);
            }
            jQuery('#assign_grade_form').attr('action', updatetUrl )
        })
        .catch(function(error) {
            toastr.error('something went wrong');
        });
    })
</script>

{{-- get feedback --}}
<script>
    $('.feedback_link').on('click',function(){
        const coffid={{$coffid}};
        const id=$(this).attr('assignment-id')
        let url="{{route('ajax.hyperlinkAssignment.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_assignment_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>

{{-- confirm alert --}}
<script>
    function confirmAction() { //on add input button click
        // 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 assignment_id = $(this).attr('assignment-id');
        const course_id = {{$coffid}};
        let url = "{{ route('teacher.course.assignment.hyperlink.participants.grade.unpost', [":course_id",":assignment_id"]) }}";
        url = url.replace(':course_id', course_id);
        url = url.replace(':assignment_id', assignment_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) {
            // handle 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>

@endsection