{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title', 'GAS LMS | Dashboard')
{{-- Breadcrumb section --}}
@section('breadcrumb')
@include('components._breadcrumb', [
'items' => ['Student report' => route('teacher.course.report.index', $coffid)],
])
@endsection
{{-- Content --}}
@section('content')
<div class="container">
    <div class="card mb-8 shadow">

        <div class="card-body pt-10 pb-0 rounded " style="background-position: 100% 70%; background-repeat:no-repeat ;background-image:url('{{ env('SECURE_ASSETS').'/assets/media/stock/900x600/42.png' }}')">

            <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">{{ $course_offering->cname }}</a>
                                <span class="badge badge-light-success me-auto">{{ $course_offering->lshort_name }}</span>
                            </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"> {{ $course_offering->acyname }}</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">Session</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"> {{ $course_offering->ttname }}</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">Teaching team</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 counted">Student Name</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">
                                    <p>
                                        <i class="fa fa-user me-2"></i>
                                        {{ $student_info->first_name }} {{ $student_info->middle_name }} {{ $student_info->last_name }}
                                    </p>
                                </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 counted">Student Email</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">
                                    <p>
                                        <i class="fa fa-user me-2"></i>
                                        {{ $student_info->email }}
                                    </p>
                                </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 counted">User ID</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">
                                    {{ $student_info->username }}
                                </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 counted">Phone</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">
                                    {{ $student_info->phone }}
                                </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 counted">Parent Phone</div>
                                </div>
                                <!--end::Number-->
                                <!--begin::Label-->
                                <div class="fw-semibold fs-6 text-gray-400">
                                    {{ $student_info->parent_phone }}
                                </div>
                                <!--end::Label-->
                            </div> --}}
                            <!--end::Stat-->

                        </div>
                        <!--end::Stats-->
                    </div>
                    <!--end::Info-->
                </div>
                <!--begin::student_info-->
                <div class="grow-1">
                    <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                        <!--begin::Details-->
                        <div class="d-flex flex-column">
                            <!--begin::Status-->
                            <button id="share_btn" class="btn btn-sm btn-info" data-clipboard-text="
                                    Link: {{ $share_info->url }}
                                    Password: {{ $share_info->password }}
                                    ">
                                <span class="me-2" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-inverse" title="Share link">
                                    <i class="fonticon-share fs-1"></i>
                                </span>
                            </button>
                            <!--end::Description-->
                            <!--begin::Toast-->
                            <div class="position-fixed bottom-0 end-0 p-3 z-index-3">
                                <div id="kt_docs_toast_toggle" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                                    <div class="toast-header bg-info text-light">
                                        <span class="svg-icon svg-icon-2 svg-icon-light me-3">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M17.302 11.35L12.002 20.55H21.202C21.802 20.55 22.202 19.85 21.902 19.35L17.302 11.35Z" fill="currentColor"></path>
                                                <path opacity="0.3" d="M12.002 20.55H2.802C2.202 20.55 1.80202 19.85 2.10202 19.35L6.70203 11.45L12.002 20.55ZM11.302 3.45L6.70203 11.35H17.302L12.702 3.45C12.402 2.85 11.602 2.85 11.302 3.45Z" fill="currentColor"></path>
                                            </svg>
                                        </span>
                                        <strong class="me-auto">Copied!</strong>
                                        <small>just now</small>
                                        <button type="button" class="btn-close text-light" data-bs-dismiss="toast" aria-label="Close"></button>
                                    </div>
                                    <div class="toast-body">
                                        <p class="fs-8"><b>Link:</b> {{ $share_info->url }}</p>
                                        <p class="fs-6"><b>Password:</b> {{ $share_info->password }}</p>
                                    </div>
                                </div>
                            </div>
                            <!--end::Toast-->
                        </div>
                        <!--end::Details-->
                    </div>
                    <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-inverse" title="Export PDF"  >
                        <form action="{{ route("teacher.course.report.exportPdf",[$coffid,$student_id]) }}">
                            <!--begin::Actions-->
                            <div class="text-center">
                                <button type="submit" class="export-pdf ms-2 btn btn-outline btn-outline-danger btn-sm rounded">
                                    <i class="fa-solid fa-file-pdf fs-1"></i>
                                </button>
                            </div>
                            <!--end::Actions-->
                            <div></div>
                        </form>

                    </div>
                </div>
                <!--end::student_info-->
                <!--end::Wrapper-->

                <!--end::Actions-->

            </div>
            <!--end::Details-->
            <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6 align-center  ms-5 me-5 mt-5">
                <li class="nav-item">
                    <a class="nav-link {{ request()->group ? '':'active' }}" data-bs-toggle="tab" href="#kt_tab_pane_1">Attendance</a>
                </li>
                {{-- <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_3">Attendance Extra</a>
                </li> --}}
                <li class="nav-item ms-5">
                    <a class="nav-link {{ request()->group ? 'active':'' }}" data-bs-toggle="tab" href="#kt_tab_pane_2">Grade
                        Book</a>
                </li>

            </ul>
        </div>
    </div>
    <div class="tab-content mb-5" id="myTabContent">
        <div class="tab-pane fade {{ request()->group ? 'show active':'' }}" id="kt_tab_pane_2" role="tabpanel">
            {{-- <div class="card align-center mb-5 ms-5 me-5 mt-0">
                <div class="card-header">
                    <h2 class="card-title">
                        Grade Statistics
                    </h2>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-bordered table-vcenter text-nowrap rounded" id="server_side_datatable">
                        <thead>
                            <tr class="fw-bold fs-7 text-uppercase gs-0">
                                <th class="min-w-30px" style="text-align: center;font-weight: bold;color:#524f4f;position: sticky;  z-index:5; border:none; left:0px;background: #d3d2cb;">
                                    #</th>
                                <th class="min-w-90px" style="text-align: center;font-weight: bold;color:#524f4f;position: sticky;background: #f3f5f3">
                                    Total</th>
                                <th class="min-w-90px" style="text-align: center;font-weight: bold;color:#524f4f;position: sticky;background: #f3f5f3; color:green">
                                    Graded</th>
                                <th class="min-w-90px" style="text-align: center;font-weight: bold;color:#524f4f;position: sticky;background: #f3f5f3; color:red">
                                    Missed</th>
                                <th class="min-w-90px" style="text-align: center;font-weight: bold;color:#524f4f;position: sticky;background: #f3f5f3">
                                    Percentage</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-start  fw-bold fs-7 gs-0">
                                <td style="text-align: center; position: sticky;">-</td>
                                <td style="text-align: center; position: sticky;">{{ $total }}</td>
                                <td style="text-align: center; position: sticky; color:green">{{ $graded }}</td>
                                <td style="text-align: center; position: sticky; color:red">{{ $missed }}</td>
                                <td style="text-align: center; position: sticky;">{{ round(($ratio * 100), 2) }}</td>

                            </tr>
                        </tbody>
                    </table>
                </div>
            </div> --}}
            <div class="card align-center my-10" id="data-section">
                <div class="card-header">
                    <h2 class="card-title">
                        Grade Book
                    </h2>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-center">
                        <ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x mb-5 fs-6">
                            @foreach ($groups as $group)
                            <form action="{{ route('teacher.course.report.show', [$coffid,$student_id, '#data-section']) }}">
                                <input type="hidden" name="group" value="{{ $group->gid }}">
                                <li class="nav-item">
                                    <button type="submit" style="color:#7a091a" class="fw-bold nav-link {{ $group->gid == $group_id ? 'active' : '' }}">

                                        {{ $group->gname }}

                                    </button>
                                </li>
                            </form>
                            @endforeach
                        </ul>
                    </div>
                    @forelse ( $groups->where('gid',$group_id) as $key=>$group )
                    <div class="overflow-auto pb-5 w-90">

                            @foreach ($topics as $topic)

                            <div class="my-9">
                                <div class="position-relative">
                                    <div class="fw-bold fs-4">{{ $topic->name }}</div>
                                </div>
                                <div class="h-3px w-100 bg-primary mt-2"></div>
                            </div>
                                @if ($hyper_quizzes_titles->where('topic_id',$topic->id)->count() > 0)
                                <table class="table table-striped table-bordered table-vcenter text-nowrap rounded" id="server_side_datatable">
                                    <thead>
                                        <tr class="fw-bold fs-7 text-uppercase gs-0">

                                            <th class=" min-w-50px" style="text-align: center;font-weight: bold;color:#524f4f;position: sticky;  z-index:5; border:none; left:0px;background: #d3d2cb;">
                                                #</th>
                                            @if (isset($hyper_quizzes_titles))
                                            @foreach ($hyper_quizzes_titles->where('topic_id',$topic->id) as $item)
                                            <th class="min-w-200px" style="text-align: center;font-weight: bold;color:#524f4f;background: #f3f5f3;" title="{{ $item->title }}">
                                                {{ Str::limit($item->title, 25, $end = '...') }}
                                            </th>
                                            @endforeach
                                            @endif
                                        </tr>
                                    </thead>

                                    <tbody>

                                        @if (($hyper_quizzes_titles != null && count($hyper_quizzes_titles) > 0))
                                            <tr class="text-start fw-bold fs-7 gs-0">
                                                <td class="" style="text-align: center; position: sticky;  z-index:5; border:none; left:0px; color:#3A4D61 ;background: #d3d2cb;">
                                                    {{ ++$key }}</td>

                                                @if (isset($hyper_quizzes_grades))
                                                    @foreach ($hyper_quizzes_grades->where('topic_id',$topic->id) as $quiz)
                                                        @if (in_array($student_id, $quiz->attempts_quiz->pluck('id')->toArray()))
                                                            <td style="text-align: center;color:#3A4D61">
                                                                @if ($quiz->attempts_quiz->where('id', $student_id)->first()->pivot->attempts_remainder == $quiz->attempts)

                                                                    <span class="badge badge-sm badge-danger"> Absent
                                                                    </span>
                                                                @elseif ($quiz->attempts_quiz->where('id', $student_id)->first()->pivot->attempts_remainder < $quiz->attempts)
                                                                    @if ($quiz->attempts_quiz->where('id', $student_id)->first()->pivot->is_graded == 0)
                                                                        {{ $quiz->attempts_quiz->where('id', $student_id)->first()->pivot->grade . ' / ' . $quiz->attempts_quiz->where('id', $student_id)->first()->pivot->points . ' ( ' . $quiz->attempts_quiz->where('id', $student_id)->first()->pivot->ratio . ' % )' }}
                                                                    <span class="badge badge-sm badge-warning"> Not Graded
                                                                    </span>
                                                                    @else
                                                                        @if ($quiz->attempts_quiz->where('id', $student_id)->first()->pivot->is_graded == 1)
                                                                        {{ $quiz->attempts_quiz->where('id', $student_id)->first()->pivot->grade . ' / ' . $quiz->attempts_quiz->where('id', $student_id)->first()->pivot->points . ' ( ' . $quiz->attempts_quiz->where('id', $student_id)->first()->pivot->ratio . ' % )' }}
                                                                        <span class="badge badge-sm badge-success"> Graded
                                                                        </span>
                                                                        @else
                                                                        {{ $quiz->attempts_quiz->where('id', $student_id)->first()->pivot->grade . ' / ' . $quiz->attempts_quiz->where('id', $student_id)->first()->pivot->points . ' ( ' . $quiz->attempts_quiz->where('id', $student_id)->first()->pivot->ratio . ' % )' }}
                                                                        <span class="badge badge-sm badge-danger">Turned
                                                                            in </span>
                                                                        @endif
                                                                    @endif
                                                                    @else
                                                                    ''
                                                                    @endif
                                                            </td>
                                                        @else
                                                            <td style="text-align: center;"> - </td>
                                                        @endif
                                                    @endforeach
                                                @endif
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                                @else
                                <div class="py-10 text-center">
                                    <img src="{{ env('SECURE_ASSETS') . '/assets/media/illustrations/sigma-1/15.png' }}" class="theme-light-show w-200px" alt="">
                                    <img src="{{ env('SECURE_ASSETS') . '/assets/media/illustrations/sigma-1/15.png' }}" class="theme-dark-show w-200px" alt="">
                                    <p class="text-gray-400 fw-bold py-3">No data been found</p>
                                </div>
                                @endif
                            @endforeach
                    </div>
                    @empty
                    <div class="py-10 text-center">
                        <img src="{{ env('SECURE_ASSETS') . '/assets/media/illustrations/sigma-1/15.png' }}" class="theme-light-show w-200px" alt="">
                        <img src="{{ env('SECURE_ASSETS') . '/assets/media/illustrations/sigma-1/15.png' }}" class="theme-dark-show w-200px" alt="">
                        <p class="text-gray-400 fw-bold py-3">No data been found</p>
                    </div>
                    @endforelse
                </div>
                <!--end::Accordion-->
            </div>
        </div>
        <div class="tab-pane fade {{ request()->group ? '':'show active' }} " id="kt_tab_pane_1" role="tabpanel">
            <div class="card align-center mb-0 ms-5 me-5 mt-0">
                <div class="card-header">
                    <h2 class="card-title">
                        Attendance
                    </h2>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-vcenter text-nowrap" id="kt_datatable_example">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Title</th>
                                    <th class="text-center">Date</th>
                                    <th class="text-center">Attended</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($meetings as $key => $meeting)
                                <tr class="text-center">
                                    <td>
                                        {{ ++$key }}
                                    </td>
                                    @php
                                    $lesson = 0;
                                    @endphp

                                    <td>{{ $meeting->mtitle }}</td>
                                    <td style="text-align: center;">
                                        {{ date('d-m-Y', strtotime($meeting->mstartdate)) }} /
                                        ( <i class="fa fa-clock-o text-primary"></i>
                                        {{ date('h:i A', strtotime($meeting->mstarttime)) }} )
                                        @if ($meeting->is_extra)
                                        <span class="badge badge-success fs-10">Extra</span>
                                        @endif
                                    </td>

                                    @if (in_array($meeting->mid, $attendants->pluck('mid')->toArray()))
                                    <td>
                                        <i class="fa fa-check-circle text-success font-weight-bold leading-loose" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="{{ $meeting->is_live ? ' live' : ' recording' }}">
                                        </i>
                                        @if ($meeting->is_refunded)
                                        <i class="fa fa-check-circle text-danger font-weight-bold leading-loose" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Refunded">
                                        </i>
                                        @endif
                                    </td>
                                    @else
                                    <td>
                                        <i class="fa fa-window-close font-weight-bold text-danger leading-loose"></i>
                                    </td>
                                    @endif

                                </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="tab-pane fade " id="kt_tab_pane_3" role="tabpanel">
            <div class="card align-center mb-0 ms-5 me-5 mt-0">
                <div class="card-header">
                    <h2 class="card-title">
                        Attendance Extra
                    </h2>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-vcenter text-nowrap" id="kt_datatable_example">
                            <thead>
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Title</th>
                                    <th class="text-center">Date</th>
                                    <th class="text-center">Attended</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($meetings_extra as $key => $meeting)
                                <tr class="text-center">
                                    <td>
                                        {{ ++$key }}
                                    </td>
                                    @php
                                    $lesson = 0;
                                    @endphp

                                    <td>{{ $meeting->mtitle }}</td>
                                    <td style="text-align: center;">
                                        {{ date('d-m-Y', strtotime($meeting->mstartdate)) }} /
                                        ( <i class="fa fa-clock-o text-primary"></i>
                                        {{ date('h:i A', strtotime($meeting->mstarttime)) }} )
                                        @if ($meeting->is_extra)
                                        <span class="badge badge-success fs-10">Extra</span>
                                        @endif
                                    </td>

                                    @if (in_array($meeting->mid, $attendants->pluck('mid')->toArray()))
                                    <td>
                                        <i class="fa fa-check-circle text-success font-weight-bold leading-loose" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="{{ $meeting->is_live ? ' live' : ' recording' }}">
                                        </i>
                                        @if ($meeting->is_refunded)
                                        <i class="fa fa-check-circle text-danger font-weight-bold leading-loose" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Refunded">
                                        </i>
                                        @endif
                                    </td>
                                    @else
                                    <td>
                                        <i class="fa fa-window-close font-weight-bold text-danger leading-loose"></i>
                                    </td>
                                    @endif

                                </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> --}}
    </div>

    {{-- <div class="card">
        <!--begin::Card head-->
        <div class="card-header card-header-stretch">
            <!--begin::Title-->
            <div class="card-title d-flex align-items-center">
                <h3 class="fw-bold m-0 text-gray-800">Comments</h3>
            </div>
            <!--end::Title-->
        </div>
        <!--end::Card head-->
        <!--begin::Card body-->
        <div class="card-body">
            <!--begin::Tab Content-->
            <div class="tab-content">
                <!--begin::Tab panel-->
                <div id="kt_activity_today" class="card-body p-0 tab-pane fade show active">
                    <!--begin::Timeline-->
                    <div class="timeline">
                        @forelse ($comments as $comment)
                        <!--begin::Timeline item-->
                        <div class="timeline-item">
                            <!--begin::Timeline line-->
                            <div class="timeline-line w-40px"></div>
                            <!--end::Timeline line-->
                            <!--begin::Timeline icon-->
                            <div class="timeline-icon symbol symbol-circle symbol-40px me-4">
                                <div class="symbol-label bg-light">
                                    <!--begin::Svg Icon | path: icons/duotune/communication/com003.svg-->
                                    <span class="svg-icon svg-icon-2 svg-icon-gray-500">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.3" d="M2 4V16C2 16.6 2.4 17 3 17H13L16.6 20.6C17.1 21.1 18 20.8 18 20V17H21C21.6 17 22 16.6 22 16V4C22 3.4 21.6 3 21 3H3C2.4 3 2 3.4 2 4Z" fill="currentColor"></path>
                                            <path d="M18 9H6C5.4 9 5 8.6 5 8C5 7.4 5.4 7 6 7H18C18.6 7 19 7.4 19 8C19 8.6 18.6 9 18 9ZM16 12C16 11.4 15.6 11 15 11H6C5.4 11 5 11.4 5 12C5 12.6 5.4 13 6 13H15C15.6 13 16 12.6 16 12Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </div>
                            </div>
                            <!--end::Timeline icon-->
                            <!--begin::Timeline content-->
                            <div class="timeline-content mb-10 mt-n1">
                                <!--begin::Timeline heading-->
                                <div class="pe-3 mb-5">
                                    <!--begin::Description-->
                                    <div class="d-flex align-items-center mt-1 fs-6">
                                        <!--begin::Info-->
                                        <div class="text-muted me-2 fs-7">Added at {{ date('Y-m-d',strtotime($comment->created_at)) }}</div>
                                        <!--end::Info-->
                                    </div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Timeline heading-->
                                <!--begin::Timeline details-->
                                <div class="overflow-auto pb-5">
                                    <!--begin::Record-->
                                    <div class="d-flex align-items-center border border-dashed border-gray-300 rounded min-w-750px px-7 py-3 mb-5">
                                        <!--begin::Title-->
                                        <p class="fs-5 text-dark text-hover-primary fw-semibold w-375px min-w-200px">{{ $comment->comment }}</p>
                                        <!--end::Title-->
                                    </div>
                                    <!--end::Record-->
                                </div>
                                <!--end::Timeline details-->
                            </div>
                            <!--end::Timeline content-->
                        </div>
                        <!--end::Timeline item-->
                        @empty
                        <!--begin::Timeline item-->
                        <div class="timeline-item">
                            <!--begin::Timeline line-->
                            <div class="timeline-line w-40px"></div>
                            <!--end::Timeline line-->
                            <!--begin::Timeline icon-->
                            <div class="timeline-icon symbol symbol-circle symbol-40px me-4">
                                <div class="symbol-label bg-light">
                                    <!--begin::Svg Icon | path: icons/duotune/communication/com003.svg-->
                                    <span class="svg-icon svg-icon-2 svg-icon-gray-500">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.3" d="M2 4V16C2 16.6 2.4 17 3 17H13L16.6 20.6C17.1 21.1 18 20.8 18 20V17H21C21.6 17 22 16.6 22 16V4C22 3.4 21.6 3 21 3H3C2.4 3 2 3.4 2 4Z" fill="currentColor"></path>
                                            <path d="M18 9H6C5.4 9 5 8.6 5 8C5 7.4 5.4 7 6 7H18C18.6 7 19 7.4 19 8C19 8.6 18.6 9 18 9ZM16 12C16 11.4 15.6 11 15 11H6C5.4 11 5 11.4 5 12C5 12.6 5.4 13 6 13H15C15.6 13 16 12.6 16 12Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </div>
                            </div>
                            <!--end::Timeline icon-->
                            <!--begin::Timeline content-->
                            <div class="timeline-content mb-10 mt-n1">
                                <!--begin::Timeline details-->
                                <div class="overflow-auto pb-5">
                                    <!--begin::Record-->
                                    <div class="d-flex align-items-center border border-dashed border-gray-300 rounded min-w-750px px-7 py-3 mb-5">
                                        <!--begin::Title-->
                                        <p class="fs-4 text-danger fw-semibold text-center">You have added no comments, yet!</p>
                                        <!--end::Title-->
                                    </div>
                                    <!--end::Record-->
                                </div>
                                <!--end::Timeline details-->
                            </div>
                            <!--end::Timeline content-->
                        </div>
                        <!--end::Timeline item-->
                        @endforelse
                    </div>
                    <!--end::Timeline-->
                </div>
                <!--end::Tab panel-->
            </div>
            <!--end::Tab Content-->
        </div>
        <!--end::Card body-->
    </div> --}}

    {{-- Export pdf modal --}}
    <div class="modal fade" id="export_pdf">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content rounded">
                <!--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 px-10 px-lg-15 pt-0 pb-15">
                    <!--begin:Form-->
                    <form id="export_pdf_form" class="form fv-plugins-bootstrap5 fv-plugins-framework">

                        <!--begin::Input group-->
                        <div class="row g-9 mb-8">
                            <!--begin::Col-->
                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-semibold mb-2">From</label>
                                <!--begin::Input-->
                                <div class="position-relative d-flex align-items-center">
                                    <!--begin::Icon-->
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen014.svg-->
                                    <span class="svg-icon svg-icon-2 position-absolute mx-4">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.3" d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z" fill="currentColor"></path>
                                            <path d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z" fill="currentColor"></path>
                                            <path d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                    <!--end::Icon-->
                                    <!--begin::Datepicker-->
                                    <input class="form-control form-control-solid ps-12" placeholder="Select a date" name="from" type="date" required>
                                    <!--end::Datepicker-->
                                </div>
                                <!--end::Input-->
                            </div>
                            <!--end::Col-->
                            <!--begin::Col-->
                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-semibold mb-2">To</label>
                                <!--begin::Input-->
                                <div class="position-relative d-flex align-items-center">
                                    <!--begin::Icon-->
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen014.svg-->
                                    <span class="svg-icon svg-icon-2 position-absolute mx-4">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.3" d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z" fill="currentColor"></path>
                                            <path d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z" fill="currentColor"></path>
                                            <path d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                    <!--end::Icon-->
                                    <!--begin::Datepicker-->
                                    <input class="form-control form-control-solid ps-12 flatpickr-input" placeholder="Select a date" name="to" type="date" required>
                                    <!--end::Datepicker-->
                                </div>
                                <!--end::Input-->
                            </div>
                            <!--end::Col-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        {{-- <div class="d-flex flex-column mb-8">
                            <label class="fs-6 fw-semibold mb-2">Comment</label>
                            <textarea class="form-control form-control-solid" rows="3" name="comment" placeholder="Insert a comment"></textarea>
                        </div> --}}
                        <!--end::Input group-->
                        <!--begin::Actions-->
                        <div class="text-center">
                            <button type="reset" id="kt_modal_new_target_cancel" class="btn btn-light me-3">Reset</button>
                            <button type="submit" id="kt_modal_new_target_submit" class="btn btn-primary">
                                <span class="indicator-label">Export</span>
                            </button>
                        </div>
                        <!--end::Actions-->
                        <div></div>
                    </form>
                    <!--end:Form-->
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
    @endsection
    @section('js')
        <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
        <script src="assets/plugins/global/plugins.bundle.js"></script>

        {{-- <script>
            function chartJSReport() {

                var loop_h = 0;
                var loop_q = 0;

                var home_labels_test = @json($home_titles);
                var quiz_labels_test = @json($quiz_titles);

                var home_data_test = @json($full_home_data);
                var quiz_data_test = @json($full_quiz_data);

                var primaryColor = KTUtil.getCssVariableValue('--kt-primary');
                var dangerColor = KTUtil.getCssVariableValue('--kt-danger');

                // Define fonts
                var fontFamily = KTUtil.getCssVariableValue('--bs-font-sans-serif');

                var ctx_home = document.getElementsByClassName("homework");
                var ctx_quiz = document.getElementsByClassName("quiz");

                for (chart of ctx_home) {
                    var home_labels_test = @json($home_titles);
                    var home_data_test = @json($full_home_data);

                    const data_home = {
                        labels: home_labels_test[loop_h]
                        , datasets: [{
                            label: 'homework'
                            , data: home_data_test[loop_h]
                            , fill: false
                            , borderColor: 'rgb(75, 192, 192)'
                            , tension: 0.1
                            , pointStyle: 'circle'
                            , pointRadius: 10
                            , pointHoverRadius: 15
                        }]
                    };

                    // Chart config
                    const config = {
                        type: 'line'
                        , data: data_home
                        , options: {
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }
                    , };

                    // Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
                    var myChart = new Chart(chart, config);
                    loop_h += 1;
                }

                for (chart of ctx_quiz) {
                    var quiz_labels_test = @json($quiz_titles);
                    var quiz_data_test = @json($full_quiz_data);

                    const data_quizzes = {
                        labels: quiz_labels_test[loop_q]
                        , datasets: [{
                            label: 'quiz'
                            , data: quiz_data_test[loop_q]
                            , fill: false
                            , borderColor: 'rgb(200, 125, 125)'
                            , tension: 0.1
                            , pointStyle: 'circle'
                            , pointRadius: 10
                            , pointHoverRadius: 15

                        }]
                    };

                    // Chart config
                    const config_quiz = {
                        type: 'line'
                        , data: data_quizzes
                        , options: {
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }
                    , };

                    // Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
                    var myChart_quiz = new Chart(chart, config_quiz);
                    loop_q += 1;
                }

            }

        </script> --}}

        {{-- copy to clipboard --}}
        <script>
            // Select element
            const target = document.getElementById('share_btn');
            const toastElement = document.getElementById('kt_docs_toast_toggle');
            const toast = bootstrap.Toast.getOrCreateInstance(toastElement);

            // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
            clipboard = new ClipboardJS(target);

            // Success action handler
            clipboard.on('success', function(e) {
                const currentLabel = target.innerHTML;
                toast.show();
            });

        </script>

        {{-- Export pdf --}}
        <script>
            $('.export-pdf').on('click',function(){
                var student_id=$(this).attr('student_id')
                var coffid='{{ $coffid }}'
                var url='{{ route("teacher.course.report.exportPdf",[":coffid",":student_id"]) }}'
                url=url.replace(':coffid',coffid)
                url=url.replace(':student_id',student_id)
                $('#export_pdf_form').attr('action',url)
            });
        </script>

    @endsection