{{-- Layout --}}
@extends('admin.layout.layout')
@section('title','GAS LMS | Quiz Participants')
{{-- Breadcrumb section --}}
@section('breadcrumb')
<ul class="breadcrumb breadcrumb-dot fw-semibold text-gray-600 fs-7 my-1">
    <!--begin::Item-->
    <li class="breadcrumb-item text-gray-600">
        <a href="{{route('admin.dashboard')}}" class="text-gray-600 text-hover-primary">Home</a>
    </li>
    <!--end::Item-->
    <!--begin::Item-->
    <li class="breadcrumb-item text-gray-600">
      <a href="{{route('admin.course.quiz.index',$coffid)}}" class="text-gray-600 text-hover-primary">Quizzes</a>
    </li>
    <li class="breadcrumb-item text-gray-600">Quiz Participants</li>
    <!--end::Item-->
</ul>
@endsection
{{-- Content --}}
@section('content')
    <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">Points</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 == 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('admin.course.quiz.quizParticipants',[$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()->quiz == '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('admin.course.quiz.quizParticipants',[$coffid,$id,'quiz=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()->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('admin.course.quiz.quizParticipants',[$coffid,$id,'quiz=graded'])}}">
                            Graded
                            <span class="badge badge-success ms-3">{{$graded_students_count}}</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">
                <!--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('admin.course.quiz.exportQuizParticipants') }}">
                     <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 --}}
            <!--begin::Table-->
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="{{ request()->quiz == 'graded' ? 'quiz_students_table':'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">
                        <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>
                        <th class="text-center">download answer</th>
                        @if (request()->quiz == null || request()->quiz == 'graded')
                        <th class="text-center">feedback</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 ($quiz_students as $student)
                        <tr class="text-center">
                            <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
                            </td>
                            <td>{{$student->attempts_remainder}}</td>
                            <td>
                                @if ($student->file_url)
                                <!--begin::Action-->
                                <a href="{{$student->getDownloadUrl($student->file_url)}}" class="btn btn-success px-6 align-self-center text-nowrap">
                                        <i class="bi bi-cloud-arrow-down fs-4 text-light "></i>
                                        Download
                                    </a>
                                    <!--end::Action-->
                                    @else
                                    <i class="bi bi-droplet-half text-danger fs-1"
                                    data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="Did not participate"
                                    ></i>
                                @endif
                            </td>

                            @if (request()->quiz == null || request()->quiz == 'graded')
                                @if ($student->feedback)
                                    <td>
                                        <div data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="{{ strip_tags($student->feedback) }}">
                                            <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#feedback_modal"
                                                quiz-id={{$student->id}} class='feedback_link'>
                                                <p>
                                                    {{ Str::limit(strip_tags($student->feedback),20,'...') }}
                                                </p>
                                            </a>
                                        </div>
                                    </td>
                                    @else
                                    <td>
                                        <div>
                                            <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#feedback_modal"
                                                quiz-id={{$student->id}} class='feedback_link'>
                                                <p>
                                                    No Feedback
                                                </p>
                                            </a>
                                        </div>
                                    </td>
                                @endif
                            @endif
                        </tr>
                    @endforeach
                    <!--end::Table row-->
                </tbody>
                <!--end::Table body-->
            </table>
            <!--end::Table-->
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->

    {{-- 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=$('#quiz_students_table').DataTable( {
    paging: false,
    ordering: false,
    info: false,
    searching: true,
    dom: 'Bfrtip',
  });
  table.buttons( '.btn' ).remove();
});
</script>

{{-- get feedback --}}
<script>
    $('.feedback_link').on('click',function(){
        const coffid={{$coffid}};
        const id=$(this).attr('quiz-id')
        let url="{{route('ajax.quizFile.getParticipantsFeedback',[':coffid',':id'])}}"
        url = url.replace(':coffid', coffid);
        url = url.replace(':id', id );
        axios.get(url)
        .then(function(response) {
            $('#feedback_text').empty()
            $('#feedback_text').append(' '+response.data.feedback)
            $('#feedback_attachments').empty()
            $.each( response.data.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>

@endsection