@extends('admin.layout.layout')

@if ($materials)
    @section('title','GAS LMS | Course Materials')
@elseif ($quizzes || $file_quizzes)
    @section('title','GAS LMS | Course Quizzes')
@elseif ($assignments)
    @section('title','GAS LMS | Course Homework')
@elseif ($statistics)
    @section('title','GAS LMS | Course Statistics')
@elseif ($quizzes_grades || $assignments_grades)
    @section('title','GAS LMS | Course Gradebook')
@elseif ($course_wall)
    @section('title','GAS LMS | Course Wall')
@endif

{{-- Breadcrumb section --}}
@section('breadcrumb')
    <!--begin::Toolbar-->
    <ul class="breadcrumb breadcrumb-dot fw-semibold text-gray-600 fs-7 my-1">
        <!--begin::Item-->
        <li class="breadcrumb-item text-gray-600">
            <a href="{{route('admin.dashboard')}}" class="text-gray-600 text-hover-primary">Home</a>
        </li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item text-gray-600"><script>document.write(document.title)</script></li>
        <!--end::Item-->
    </ul>
    <!--end::Toolbar-->
@endsection
@section('content')
<div class="card mb-10 shadow">
    <div class="card-body pt-9 pb-6">
        <!--begin::Details-->
        <div class="d-flex flex-wrap flex-sm-nowrap mb-6">
            <!--begin::Image-->
            <div class="d-flex flex-center flex-shrink-0 bg-light rounded w-100px h-100px w-lg-150px h-lg-150px me-7 mb-4">
                <img class="mw-50px mw-lg-150px" src="{{env('SECURE_ASSETS').'/assets/media/logos/logo.png'}}" alt="image">
            </div>
            <!--end::Image-->
            <!--begin::Wrapper-->
            <div class="flex-grow-1">
                <!--begin::Head-->
                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                    <!--begin::Details-->
                    <div class="d-flex flex-column">
                        <!--begin::Status-->
                        <div class="d-flex align-items-center mb-1">
                            <a href="#" class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">{{$course_offering->cname}}</a>
                            <span class="badge badge-light-success me-auto">{{$course_offering->lshort_name}}</span>
                        </div>
                        <!--end::Status-->
                        <!--begin::Description-->
                        <div class="d-flex flex-wrap fw-semibold mb-4 fs-5 text-gray-400">{{$course_offering->cdescription}}</div>
                        <!--end::Description-->
                    </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">
                                <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
                                <span class="svg-icon svg-icon-3 svg-icon-success me-2">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect>
                                        <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path>
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                                <div class="fs-4 fw-bold counted" data-kt-countup="true" data-kt-countup-value="15000" data-kt-countup-prefix="$" data-kt-initialized="1">Topics</div>
                            </div>
                            <!--end::Number-->
                            <!--begin::Label-->
                            <div class="fw-semibold fs-6 text-gray-400">{{$topics->count()}}</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-->
                    </div>
                    <!--end::Stats-->
                </div>
                <!--end::Info-->
            </div>
            <!--end::Wrapper-->
        </div>
        <!--end::Details-->
        <div class="separator"></div>
        <div class="card-rounded bg-light d-flex flex-stack flex-wrap p-5">
            <!--begin::Nav-->
            <ul class="nav flex-wrap border-transparent fw-bold">
                <!--begin::Nav item-->
                <li class="nav-item my-1">
                    <a class="{{$course_wall ? 'active':''}} btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase"
                        href="{{ route('admin.course.wall.index', [$coffid]) }}">Course wall</a>
                </li>
                <!--end::Nav item-->
                <!--begin::Nav item-->
                <li class="nav-item my-1">
                    <a class="{{$materials ? 'active':''}} btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase" href="{{route('admin.course.index',[$coffid])}}">Materials</a>
                </li>
                <!--end::Nav item-->
                <!--begin::Nav item-->
                <li class="nav-item my-1">
                    <a class="{{ $quizzes || $file_quizzes || ($quizzes_grades && !$statistics) ? 'active' : '' }} btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase"
                        href="#" data-kt-menu-trigger="{default:'click', lg: 'hover'}"
                        data-kt-menu-attach="parent" data-kt-menu-placement="bottom-start">
                        Quizzes
                    </a>
                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-color fw-semibold py-4 fs-base w-200px"
                        data-kt-menu="true" data-kt-element="theme-mode-menu">
                        <!--begin::Menu item-->
                        <div class="menu-item px-3 my-0">
                            <a class="{{ $quizzes || $file_quizzes ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary "
                                href="{{ route('admin.course.quiz.index', [$coffid]) }}">
                                <span class="svg-icon svg-icon-3">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.3"
                                            d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z"
                                            fill="currentColor"></path>
                                        <path d="M20 8L14 2V6C14 7.10457 14.8954 8 16 8H20Z" fill="currentColor">
                                        </path>
                                        <path
                                            d="M10.3629 14.0084L8.92108 12.6429C8.57518 12.3153 8.03352 12.3153 7.68761 12.6429C7.31405 12.9967 7.31405 13.5915 7.68761 13.9453L10.2254 16.3488C10.6111 16.714 11.215 16.714 11.6007 16.3488L16.3124 11.8865C16.6859 11.5327 16.6859 10.9379 16.3124 10.5841C15.9665 10.2565 15.4248 10.2565 15.0789 10.5841L11.4631 14.0084C11.1546 14.3006 10.6715 14.3006 10.3629 14.0084Z"
                                            fill="currentColor"></path>
                                    </svg>
                                </span>
                                Quizzes list
                            </a>
                        </div>
                        <!--end::Menu item-->
                        <!--begin::Menu item-->
                        <div class="menu-item px-3 my-0">
                            <a class="{{ $quizzes_grades && !$statistics ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary"
                                href="{{ route('admin.course.quiz.grade', [$coffid]) }}">
                                <span class="svg-icon svg-icon-2">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M20 14H18V10H20C20.6 10 21 10.4 21 11V13C21 13.6 20.6 14 20 14ZM21 19V17C21 16.4 20.6 16 20 16H18V20H20C20.6 20 21 19.6 21 19ZM21 7V5C21 4.4 20.6 4 20 4H18V8H20C20.6 8 21 7.6 21 7Z"
                                            fill="currentColor"></path>
                                        <path opacity="0.3"
                                            d="M17 22H3C2.4 22 2 21.6 2 21V3C2 2.4 2.4 2 3 2H17C17.6 2 18 2.4 18 3V21C18 21.6 17.6 22 17 22ZM10 7C8.9 7 8 7.9 8 9C8 10.1 8.9 11 10 11C11.1 11 12 10.1 12 9C12 7.9 11.1 7 10 7ZM13.3 16C14 16 14.5 15.3 14.3 14.7C13.7 13.2 12 12 10.1 12C8.10001 12 6.49999 13.1 5.89999 14.7C5.59999 15.3 6.19999 16 7.39999 16H13.3Z"
                                            fill="currentColor"></path>
                                    </svg>
                                </span>
                                Grades
                            </a>
                        </div>
                        <!--end::Menu item-->
                    </div>
                </li>
                <!--end::Nav item-->
                <!--begin::Nav item-->
                <li class="nav-item my-1">
                    <a class="{{ $assignments || ($assignments_grades && !$statistics) ? 'active' : '' }} btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase"
                        href="#" data-kt-menu-trigger="{default:'click', lg: 'hover'}"
                        data-kt-menu-attach="parent" data-kt-menu-placement="bottom-start">
                        Homework
                    </a>
                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-muted menu-active-bg menu-state-color fw-semibold py-4 fs-base w-200px"
                        data-kt-menu="true" data-kt-element="theme-mode-menu">
                        <!--begin::Menu item-->
                        <div class="menu-item px-3 my-0">
                            <a class="{{ $assignments ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary "
                                href="{{ route('admin.course.assignment.index', [$coffid]) }}">
                                <span class="svg-icon svg-icon-3">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.3"
                                            d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z"
                                            fill="currentColor"></path>
                                        <path d="M20 8L14 2V6C14 7.10457 14.8954 8 16 8H20Z" fill="currentColor">
                                        </path>
                                        <path
                                            d="M10.3629 14.0084L8.92108 12.6429C8.57518 12.3153 8.03352 12.3153 7.68761 12.6429C7.31405 12.9967 7.31405 13.5915 7.68761 13.9453L10.2254 16.3488C10.6111 16.714 11.215 16.714 11.6007 16.3488L16.3124 11.8865C16.6859 11.5327 16.6859 10.9379 16.3124 10.5841C15.9665 10.2565 15.4248 10.2565 15.0789 10.5841L11.4631 14.0084C11.1546 14.3006 10.6715 14.3006 10.3629 14.0084Z"
                                            fill="currentColor"></path>
                                    </svg>
                                </span>
                                Homework list
                            </a>
                        </div>
                        <!--end::Menu item-->
                        <!--begin::Menu item-->
                        <div class="menu-item px-3 my-0">
                            <a class="{{ $assignments_grades && !$statistics ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary"
                                href="{{ route('admin.course.homework.grade', [$coffid]) }}">
                                <span class="svg-icon svg-icon-2">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M20 14H18V10H20C20.6 10 21 10.4 21 11V13C21 13.6 20.6 14 20 14ZM21 19V17C21 16.4 20.6 16 20 16H18V20H20C20.6 20 21 19.6 21 19ZM21 7V5C21 4.4 20.6 4 20 4H18V8H20C20.6 8 21 7.6 21 7Z"
                                            fill="currentColor"></path>
                                        <path opacity="0.3"
                                            d="M17 22H3C2.4 22 2 21.6 2 21V3C2 2.4 2.4 2 3 2H17C17.6 2 18 2.4 18 3V21C18 21.6 17.6 22 17 22ZM10 7C8.9 7 8 7.9 8 9C8 10.1 8.9 11 10 11C11.1 11 12 10.1 12 9C12 7.9 11.1 7 10 7ZM13.3 16C14 16 14.5 15.3 14.3 14.7C13.7 13.2 12 12 10.1 12C8.10001 12 6.49999 13.1 5.89999 14.7C5.59999 15.3 6.19999 16 7.39999 16H13.3Z"
                                            fill="currentColor"></path>
                                    </svg>
                                </span>
                                Grades
                            </a>
                        </div>
                        <!--end::Menu item-->
                    </div>
                </li>
                <!--end::Nav item-->
                <!--begin::Nav item-->
                <li class="nav-item my-1">
                    <a class="{{ $statistics ? 'active' : '' }} btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase"
                        href="{{ route('admin.course.grade.statistics', [$coffid]) }}">Statistics</a>
                </li>
                <!--end::Nav item-->

                <!--begin::Nav item-->
                <li class="nav-item my-1">
                    <a class="{{ $students_report ? 'active' : '' }} btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase"
                        href="{{ route('admin.course.report.index', [$coffid]) }}">Students report</a>
                </li>
                <!--end::Nav item-->
            </ul>
            <!--end::Nav-->
        </div>

    </div>
</div>

@if ($materials)
    @include('admin.pages.course.material._material-list')
@elseif ($quizzes || $file_quizzes)
    @include('admin.pages.course.quiz._quiz-list')
@elseif ($assignments)
    @include('admin.pages.course.assignment._assignment-list')
@elseif ($statistics)
    @include('admin.pages.course.grades.statistics')
@elseif ($quizzes_grades || $assignments_grades)
    @include('admin.pages.course.grades._grade')
@elseif ($students_report)
    @include('admin.pages.course.reports.parent')
@elseif ($course_wall)
    @include('admin.pages.course.wall.index')
@endif

@endsection
@section('js')
{{-- Chart JS --}}
<script>
    function chartLine(idValue, labels_list, data_quiz, data_homework) {
        var labels_list = labels_list.split(",");
        // console.log(labels_list);
        var data_quiz = data_quiz.split(",");
        var data_homework = data_homework.split(",");
        var ctx = document.getElementById(idValue);
        // Define colors
        var primaryColor = KTUtil.getCssVariableValue('--kt-primary');
        var dangerColor = KTUtil.getCssVariableValue('--kt-danger');

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

        // Chart labels
        // const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

        // Chart data
        for (var i = 0; i < data_quiz.length; i++) {
            if (data_quiz[i] == '')
                data_quiz[i] = null;
        }
        for (var i = 0; i < data_homework.length; i++) {
            if (data_homework[i] == '')
                data_homework[i] = null;
        }
        console.log(data_homework);
        const data = {
            labels: labels_list,
            datasets: [{
                    label: 'Quizzes',
                    data: data_quiz,
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                },
                {
                    label: 'Homework',
                    data: data_homework,
                    fill: false,
                    borderColor: 'rgb(200, 100, 100)',
                    tension: 0.1
                }
            ]
        };

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

        // Init ChartJS -- for more info, please visit: https://www.chartjs.org/docs/latest/
        var myChart = new Chart(ctx, config);
    }
</script>

{{-- get topic data --}}
<script>
    $('.edit_topic_btn').on('click', function() {
        const coffid = {{ $coffid }};
        const topic_id = $(this).attr('data-topic-id')
        let editUrl = "{{ route('teacher.course.topic.edit', [':coffid', ':topic_id']) }}"
        let updatetUrl = "{{ route('teacher.course.topic.update', [':coffid', ':topic_id']) }}"
        editUrl = editUrl.replace(':coffid', coffid);
        editUrl = editUrl.replace(':topic_id', topic_id);
        updatetUrl = updatetUrl.replace(':coffid', coffid);
        updatetUrl = updatetUrl.replace(':topic_id', topic_id);
        $('#edit_topic_form').attr('action', updatetUrl)

        axios.get(editUrl)
            .then(function(response) {
                $('#topic_name_input').val(response.data.name)
            })
            .catch(function(error) {
                toastr.error('something went wrong');
            });
    })
</script>

{{-- get material data --}}
<script>
    $('.edit_material_btn').on('click', function() {
        const coffid = {{ $coffid }};
        const material_id = $(this).attr('data-material-id')
        let editUrl = "{{ route('teacher.course.material.edit', [':coffid', ':material_id']) }}"
        let updatetUrl = "{{ route('teacher.course.material.update', [':coffid', ':material_id']) }}"
        editUrl = editUrl.replace(':coffid', coffid);
        editUrl = editUrl.replace(':material_id', material_id);
        updatetUrl = updatetUrl.replace(':coffid', coffid);
        updatetUrl = updatetUrl.replace(':material_id', material_id);
        $('#edit_material_form').attr('action', updatetUrl)

        axios.get(editUrl)
            .then(function(response) {
                $('#material_name_input').val(response.data.name)
            })
            .catch(function(error) {
                toastr.error('something went wrong');
            });
    })
</script>

{{-- datatable --}}
<script>
    // DataTable
    $(document).ready(function() {
        $("#datatable").DataTable({
            "order": true,
            "language": {
                "lengthMenu": "Show _MENU_",
            },
            "dom": "<'row'" +
                "<'col-sm-6 d-flex align-items-center justify-conten-start'l>" +
                "<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
                ">" +

                "<'table-responsive'tr>" +

                "<'row'" +
                "<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
                "<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
                ">"
        });
    });
</script>

{{-- assignment activation toggle --}}
<script src="{{ env('SECURE_ASSETS').'/assets/js/custom/activationToggle.js' }}"></script>
<script>
    $(".activation_checkbox").click(function() {
        let item_id = $(this).attr('item-id');
        let is_active = $(this).prop("checked");
        let type = $(this).attr("feature-type");
        let data = is_active;
        let url = '';
        if (type == 'quiz') {
            url = "{{ route('ajax.quizFile.activateQuiz', ':item_id') }}"
        } else if (type == 'assignment') {
            url = "{{ route('ajax.assignment.activateAssignment', ':item_id') }}"
        }

        url = url.replace(':item_id', item_id);
        activationToggle(url, data, item_id, is_active)
    });
</script>

@endsection