{{-- Layout --}}
@extends('admin.layout.layout')
{{-- Page Title --}}
@section('title', 'GAS LMS | Dashboard')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', [
        'items' => ['Students report' => route('admin.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 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">Wallet status</div>
                                    </div>
                                    <!--end::Number-->
                                    <!--begin::Label-->
                                    <div class="fw-semibold fs-6 text-gray-400">
                                        {{ $wallet ? $wallet->wamount . ' EGP' : '0' . ' EGP' }}
                                    </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>
                    <!--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 active" data-bs-toggle="tab" href="#kt_tab_pane_1">Attendance</a>
                    </li>
                    <li class="nav-item ms-5">
                        <a class="nav-link " data-bs-toggle="tab" href="#kt_tab_pane_2" onclick="chartJSReport();">Grade
                            Book</a>
                    </li>

                </ul>
            </div>
        </div>
        <div class="tab-content mb-5" id="myTabContent">
            <div class="tab-pane fade " 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>
                                    <th class="min-w-90px" style="text-align: center;font-weight: bold;color:#524f4f;position: sticky;background: #f3f5f3">
                                        Progress</th>
                                    @if ($has_grade_schema)
                                    <th class="min-w-90px" style="text-align: center;font-weight: bold;color:#524f4f;position: sticky;background: #f3f5f3">
                                        Expected Grade</th>
                                    @endif
                                </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>
                                    <td style="text-align: center; position: sticky;">
                                        <div data-bs-toggle="modal" data-bs-target="#kt_modal_1" class="progress">
                                            
                                            <div class="progress-bar bg-{{ $degree == 0
                                                ? ''
                                                : ($degree<= 25
                                                ? 'danger'
                                                : ($degree <= 50
                                                ? 'warning'
                                                : ($degree <= 75
                                                ? 'info'
                                                : ($degree > 75
                                                ? 'success'
                                                : '')))) }}" role="progressbar" style="width: {{ $degree != 0 ? round($degree, 2) : 0 }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>

                                        </div>
                                    </td>
                                    @if ($has_grade_schema)
                                    <td style="text-align: center; position: sticky;">
                                        {{ $grade_sign }}
                                    </td>
                                    @endif
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card align-center mb-5 ms-5 me-5 mt-0">

                    <div class="card-header">
                        <h2 class="card-title">
                            Grade Book
                        </h2>
                    </div>
                    <div class="card-body">
                        <!--begin::Accordion-->
                        <div class="accordion" id="kt_accordion_1">

                            @php
                            $home_titles = [];
                            $quiz_titles = [];

                            $full_home_data = [];
                            $full_quiz_data = [];
                            @endphp
                            @foreach ($groups as $key => $group)
                                {{-- {{ dd($key . ' ' . $group); }} --}}
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="kt_accordion_1_header_{{ $key }}">
                                        <button class="accordion-button fs-4 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_{{ $key }}" aria-expanded="true" aria-controls="kt_accordion_1_body_1">
                                            {{ $group->gname }}
                                        </button>
                                    </h2>
                                    <div id="kt_accordion_1_body_{{ $key }}" class="accordion-collapse collapse {{ $key == 0 ? 'show' : '' }}" aria-labelledby="kt_accordion_1_header_1" data-bs-parent="#kt_accordion_1">
                                        <div class="accordion-body">
                                            <div class="overflow-auto pb-5 w-90">
                                                <div class="col-xl-12 col-lg-12 col-md-12">
                                                    <div class="card">
                                                        @php
                                                        $ratio = 0;
                                                        $home_label = [];
                                                        $quiz_label = [];

                                                        $data_quiz = [];
                                                        $data_homework = [];

                                                        @endphp
                                                        @php
                                                        $home_label = [];
                                                        $home_data = [];
                                                        // $home_ratio = 0;
                                                        @endphp
                                                        @foreach ($assignments_grades as $assignment)
                                                        @php
                                                        if ($group->gid == $assignment->gid) {
                                                        array_push($home_data, $assignment->ratio);
                                                        array_push($home_label, $assignment->title);
                                                        }
                                                        @endphp
                                                        @endforeach
                                                        @php
                                                        array_push($home_titles, $home_label);
                                                        array_push($full_home_data, $home_data);
                                                        @endphp

                                                        <div class="card-header">
                                                            <div class="card-title">Grades - Home work</div>
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="table-responsive">
                                                                @if (count($home_label) > 0)
                                                                <table class="table table-striped table-bordered table-vcenter text-nowrap mb-10">
                                                                    <thead>
                                                                        <tr class="text-center bg-light text-muted fw-bold fs-7 text-uppercase gs-0">
                                                                            <th class="ps-5 rounded">Assignment
                                                                                Title</th>
                                                                            <th>Grade</th>
                                                                            <th>Grade Ratio
                                                                            </th>
                                                                            <th>Quiz Start Date</th>
                                                                            <th>Quiz End Date</th>
                                                                            <th>Student Submit Time</th>
                                                                            <th class="pe-5 rounded">Feedback
                                                                            </th>
                                                                        </tr>
                                                                    </thead>

                                                                    <tbody>
                                                                        @foreach ($assignments_grades as $item)
                                                                        @if ($group->gid == $item->gid)
                                                                        <tr>
                                                                            <td style="text-align: center;">
                                                                                {{ $item->title }}</td>
                                                                            <td style="text-align: center;">
                                                                                {{ $item->grade }} /
                                                                                <strong>{{ $item->points }}</strong>
                                                                                <div class='badge mt-2 badge-{{ $item->attempts_remainder == $item->attempts ? 'warning' : 'success'}} ms-1'>{{ $item->attempts_remainder == $item->attempts ? 'missed' : 'graded'}}</div>
                                                                            </td>
                                                                            <td style="text-align: center;">
                                                                                {{ round($item->ratio, 2) }}%
                                                                            </td>
                                                                            <td style="text-align: center;">
                                                                                {{ $item->start_date }} {{ $item->start_time }}
                                                                            </td>
                                                                            <td style="text-align: center;">
                                                                                {{ $item->end_date }} {{ $item->end_time }}
                                                                            </td>
                                                                            <td style="text-align: center;">
                                                                                {{ $item->updated_at }}
                                                                                @if ($item->updated_at > $item->end_date . ' ' . $item->end_time)
                                                                                <div class="badge mt-2 badge-warning ms-1">Late submit</div>
                                                                                @else
                                                                                <div class="badge mt-2 badge-success ms-1">On time</div>
                                                                                @endif
                                                                            </td>
                                                                            <td style="text-align: center;">
                                                                                <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $item->feedback ? strip_tags($item->feedback) : 'No Feedback' }}" 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>
                                                                            </td>
                                                                        </tr>
                                                                        @endif
                                                                        @endforeach

                                                                    </tbody>
                                                                </table>
                                                                @endif

                                                            </div>
                                                            @if (count($home_titles[0]) > 0)
                                                                <div style="width: auto;"><canvas class="homework"></canvas></div>
                                                            @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
                                                        </div>
                                                        <div class="card-header">
                                                            <div class="card-title">Grades - Quizzes</div>
                                                        </div>
                                                        @php
                                                        $quiz_label = [];
                                                        $quiz_data = [];
                                                        @endphp
                                                        @foreach ($quizzes_grades as $quiz)
                                                        @php
                                                        if ($group->gid == $quiz->gid) {
                                                        array_push($quiz_data, $quiz->ratio);
                                                        array_push($quiz_label, $quiz->title);
                                                        }
                                                        @endphp
                                                        @endforeach
                                                        @php
                                                        array_push($quiz_titles, $quiz_label);
                                                        array_push($full_quiz_data, $quiz_data);
                                                        @endphp
                                                        <div class="card-body">
                                                            <div class="table-responsive">
                                                                @if (count($quiz_label) > 0)
                                                                    <table class="table table-striped table-bordered table-vcenter text-nowrap mb-10">
                                                                        <thead>
                                                                            <tr class="text-center bg-light text-muted fw-bold fs-7 text-uppercase gs-0">
                                                                                <th class="ps-5 rounded">Quiz Title
                                                                                </th>
                                                                                <th>Grade</th>
                                                                                <th>Grade Ratio
                                                                                </th>
                                                                                <th>Quiz Start Date</th>
                                                                                <th>Quiz End Date</th>
                                                                                <th>Student Submit Time</th>
                                                                                <th class="pe-5 rounded">Feedback
                                                                                </th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            @foreach ($quizzes_grades as $item)
                                                                                @if ($group->gid == $item->gid)
                                                                                    <tr>
                                                                                        <td style="text-align: center;">
                                                                                            {{ $item->title }}</td>
                                                                                        <td style="text-align: center;">
                                                                                            {{ $item->grade }} /
                                                                                            <strong>{{ $item->points }}</strong>
                                                                                            <div class='badge mt-2 badge-{{ $item->attempts_remainder == $item->attempts ? 'warning' : 'success'}} ms-1'>{{ $item->attempts_remainder == $item->attempts ? 'missed' : 'graded'}}</div>
                                                                                        </td>
                                                                                        <td style="text-align: center;">
                                                                                            {{ round($item->ratio, 2) }}%
                                                                                        </td>
                                                                                        <td style="text-align: center;">
                                                                                            {{ $item->quiz_start_date }} {{ $item->quiz_start_time }}
                                                                                        </td>
                                                                                        <td style="text-align: center;">
                                                                                            {{ $item->quiz_end_date }} {{ $item->quiz_end_time }}
                                                                                        </td>
                                                                                        <td style="text-align: center;">
                                                                                            {{ $item->updated_at }}
                                                                                            @if ($item->updated_at > $item->quiz_end_date . ' ' . $item->quiz_end_time)
                                                                                            <div class="badge mt-2 badge-warning ms-1">Late submit</div>
                                                                                            @else
                                                                                            <div class="badge mt-2 badge-success ms-1">On time</div>
                                                                                            @endif
                                                                                        </td>
                                                                                        <td style="text-align: center;">
                                                                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $item->feedback ? strip_tags($item->feedback) : 'No Feedback' }}" 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>
                                                                                        </td>
                                                                                    </tr>
                                                                                @endif
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                @endif
                                                            </div>
                                                            @if (count($quiz_titles[0]) > 0)
                                                                <div style="width: auto;"><canvas class="quiz"></canvas></div>
                                                            @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

                                                        </div>
                                                        <!--end::body-->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end::Accordion-->
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade 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>
    </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);
            console.log(home_labels_test);
            console.log(quiz_labels_test);

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

            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
                    }]
                };

                // 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
                    }]
                };

                // 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>
@endsection