@extends('teacher.layout.layout')
@section('title', 'GAS LMS | Course Page')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Dashboard' => route('teacher.dashboard')]])
@endsection

@section('content')
    <div class="card mb-8 shadow">
        <div class="card-body pt-9 pb-6">
            <div class="float-end">
                <!--begin::Menu-->
                <div class="me-0">
                    <button class="btn btn-sm btn-info " data-kt-menu-trigger="click"
                        data-kt-menu-placement="bottom-end">
                        <span class="svg-icon svg-icon-1 me-2">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.3" x="2" y="2" width="20" height="20"
                                    rx="5" fill="currentColor"></rect>
                                <rect x="10.8891" y="17.8033" width="12" height="2" rx="1"
                                    transform="rotate(-90 10.8891 17.8033)" fill="currentColor"></rect>
                                <rect x="6.01041" y="10.9247" width="12" height="2" rx="1"
                                    fill="currentColor"></rect>
                            </svg>
                        </span>
                        <span>Create</span>
                    </button>
                    <!--begin::Menu 3-->
                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px"
                        data-kt-menu="true" style="">
                        <!--begin::Menu item-->
                        <div class="menu-item px-3">
                            <div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Create New</div>
                        </div>
                        <!--end::Menu item-->
                        <!--begin::Menu separator-->
                        <div class="separator mb-3 opacity-75"></div>
                        <!--end::Menu separator-->
                        <!--begin::Menu item-->
                        {{-- <div class="menu-item px-3" data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
                            data-kt-menu-placement="right-start">
                            <a href="#" class="menu-link px-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="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22Z"
                                        fill="currentColor"></path>
                                    <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="currentColor"></path>
                                </svg>
                                <span class="ms-6 pt-1 fs-4">Material
                            </a>
                            <!--begin::Menu sub-->
                            <div class="menu-sub menu-sub-dropdown w-175px py-4">
                                <!--begin::Menu item-->

                                <!--end::Menu item-->
                                <!--begin::Menu item-->
                                <div class="menu-item px-3">
                                    <a href="{{ route('teacher.course.material.create', $coffid) }}" class="menu-link d-flex px-5">from file</a>
                                </div>
                                <!--end::Menu item-->
                                <!--begin::Menu item-->
                                 <div class="menu-item px-3">
                                    <a href="{{ route('teacher.course.material.hyperlink.create', $coffid) }}" class="menu-link d-flex px-5">external</a>
                                </div>
                                <!--end::Menu item-->
                            </div>
                            <!--end::Menu sub-->
                        </div> --}}
                        <!--end::Menu item-->
                        <!--begin::Menu item-->
                        <div class="menu-item px-3">
                            <a href="{{ route('teacher.course.quiz.hyperlink.create', $coffid) }}" class="menu-link px-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="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22Z"
                                        fill="currentColor"></path>
                                    <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="currentColor"></path>
                                </svg>
                                <span class="ms-6 pt-1 fs-4">Grade item
                            </a>
                            <!--begin::Menu sub-->
                            {{-- <div class="menu-sub menu-sub-dropdown w-175px py-4">
                                <!--begin::Menu item-->
                                <!--end::Menu item-->
                                <!--begin::Menu item-->
                                <div class="menu-item px-3">
                                    <a href="{{ route('teacher.course.quiz.fileQuiz', $coffid) }}" class="menu-link d-flex px-5">from file</a>
                                </div>
                                <!--end::Menu item-->
                                <!--begin::Menu item-->
                                 <div class="menu-item px-3">
                                    <a href="{{ route('teacher.course.quiz.hyperlink.create', $coffid) }}" class="menu-link d-flex px-5">external</a>
                                </div>
                                <!--end::Menu item-->
                            </div> --}}
                            <!--end::Menu sub-->
                        </div>
                        <!--end::Menu item-->
                        <!--begin::Menu item-->
                        {{-- <div class="menu-item px-3" data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
                            data-kt-menu-placement="right-start">
                            <a href="#" class="menu-link px-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="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22Z"
                                        fill="currentColor"></path>
                                    <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="currentColor"></path>
                                </svg>
                                <span class="ms-6 pt-1 fs-4">Homework
                            </a>
                            <!--begin::Menu sub-->
                            <div class="menu-sub menu-sub-dropdown w-175px py-4">
                                <div class="menu-item px-3">
                                    <a href="{{ route('teacher.course.assignment.create', $coffid) }}" class="menu-link d-flex px-5">from file</a>
                                </div>
                                <!--end::Menu item-->
                                <!--begin::Menu item-->
                                 <div class="menu-item px-3">
                                    <a href="{{ route('teacher.course.assignment.hyperlink.create', $coffid) }}" class="menu-link d-flex px-5">external</a>
                                </div>
                                <!--end::Menu item-->
                            </div>
                            <!--end::Menu sub-->
                        </div> --}}
                        <!--end::Menu item-->

                        <!--begin::Menu item-->
                        {{-- <div class="menu-item px-3 py-2">
                            <a id="compose_group_drawer_button" class="menu-link px-3">
                                <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/communication/com014.svg-->
                                <span class="svg-icon svg-icon-muted svg-icon-2hx"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.0173 9H15.3945C14.2833 9 13.263 9.61425 12.7431 10.5963L12.154 11.7091C12.0645 11.8781 12.1072 12.0868 12.2559 12.2071L12.6402 12.5183C13.2631 13.0225 13.7556 13.6691 14.0764 14.4035L14.2321 14.7601C14.2957 14.9058 14.4396 15 14.5987 15H18.6747C19.7297 15 20.4057 13.8774 19.912 12.945L18.6686 10.5963C18.1487 9.61425 17.1285 9 16.0173 9Z" fill="currentColor"/>
                                    <rect opacity="0.3" x="14" y="4" width="4" height="4" rx="2" fill="currentColor"/>
                                    <path d="M4.65486 14.8559C5.40389 13.1224 7.11161 12 9 12C10.8884 12 12.5961 13.1224 13.3451 14.8559L14.793 18.2067C15.3636 19.5271 14.3955 21 12.9571 21H5.04292C3.60453 21 2.63644 19.5271 3.20698 18.2067L4.65486 14.8559Z" fill="currentColor"/>
                                    <rect opacity="0.3" x="6" y="5" width="6" height="6" rx="3" fill="currentColor"/>
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                                <span class="ms-5 pt-1 fs-6">Compose group</span>
                            </a>
                        </div> --}}
                        <!--end::Menu item-->
                        <!--begin::Menu separator-->
                        <div class="separator mt-3 opacity-75"></div>
                        <!--end::Menu separator-->
                        <!--begin::Menu item-->
                        <div class="menu-item px-3 py-2">
                            <a id="kt_drawer_example_dismiss_button" class="menu-link px-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="M22 8H8L12 4H19C19.6 4 20.2 4.39999 20.5 4.89999L22 8ZM3.5 19.1C3.8 19.7 4.4 20 5 20H12L16 16H2L3.5 19.1ZM19.1 20.5C19.7 20.2 20 19.6 20 19V12L16 8V22L19.1 20.5ZM4.9 3.5C4.3 3.8 4 4.4 4 5V12L8 16V2L4.9 3.5Z"
                                        fill="currentColor"></path>
                                    <path
                                        d="M22 8L20 12L16 8H22ZM8 16L4 12L2 16H8ZM16 16L12 20L16 22V16ZM8 8L12 4L8 2V8Z"
                                        fill="currentColor"></path>
                                </svg>
                                <span class="ms-6 pt-1 fs-4">Category</span>
                            </a>
                        </div>

                        <!--end::Menu item-->
                    </div>
                    <!--end::Menu 3-->
                </div>
                <!--end::Menu-->
            </div>
            <!--end::Actions-->
            <!--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-->

                        <!--begin::Stats-->
                        <div class="row">
                            <!--begin::Stat-->
                            <div class=" col-md-5 border border-gray-300 border-dashed rounded py-3 px-4 me-3 mb-3">
                                <!--begin::Number-->

                                <div class="fs-4 fw-bold"> {{ $course_offering->acyname }}</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="col-md-2 border border-gray-300 border-dashed rounded py-3 px-4 me-3 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">Categories</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="col-md-2 border border-gray-300 border-dashed rounded py-3 px-4 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-->

                    <!--end::Info-->
                    <div class="row">
                        <!--begin::Stat-->
                        {{-- <div class="col-md-5 border border-gray-300 border-dashed rounded min-w-250px py-3 px-6 me-6 mb-3">
                            <!--begin::Label-->
                            <div class="fw-bold fs-4 pb-2">Quizzes</div>
                            <!--end::Label-->
                            <!--begin::Number-->
                                <div class="fw-bold text-gray-400">
                                    <span class="svg-icon svg-icon-6 text-danger me-2">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="currentColor"></rect>
                                            <path d="M11.9343 12.5657L9.53696 14.963C9.22669 15.2733 9.18488 15.7619 9.43792 16.1204C9.7616 16.5789 10.4211 16.6334 10.8156 16.2342L14.3054 12.7029C14.6903 12.3134 14.6903 11.6866 14.3054 11.2971L10.8156 7.76582C10.4211 7.3666 9.7616 7.42107 9.43792 7.87962C9.18488 8.23809 9.22669 8.72669 9.53696 9.03696L11.9343 11.4343C12.2467 11.7467 12.2467 12.2533 11.9343 12.5657Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    Posted ( {{AppHelper::instance()->totalCoursePostedQuizzesCount($coffid)}} )
                                </div>
                                <div class="fw-bold text-gray-400">
                                    <span class="svg-icon svg-icon-6 text-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.3" x="2" y="2" width="20" height="20" rx="5" fill="currentColor"></rect>
                                            <path d="M11.9343 12.5657L9.53696 14.963C9.22669 15.2733 9.18488 15.7619 9.43792 16.1204C9.7616 16.5789 10.4211 16.6334 10.8156 16.2342L14.3054 12.7029C14.6903 12.3134 14.6903 11.6866 14.3054 11.2971L10.8156 7.76582C10.4211 7.3666 9.7616 7.42107 9.43792 7.87962C9.18488 8.23809 9.22669 8.72669 9.53696 9.03696L11.9343 11.4343C12.2467 11.7467 12.2467 12.2533 11.9343 12.5657Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    Un-Posted ( {{AppHelper::instance()->totalCourseUnPostedQuizzesCount($coffid)}} )
                                </div>
                            <!--end::Number-->

                        </div> --}}
                        <!--end::Stat-->
                        <!--begin::Stat-->
                        {{-- <div class="col-md-5 border border-gray-300 border-dashed rounded min-w-250px py-3 px-6 me-6 mb-3">
                            <!--begin::Label-->
                            <div class="fw-bold fs-4 pb-2">Homework</div>
                            <!--end::Label-->
                            <!--begin::Number-->

                                <div class="fw-bold text-gray-400">
                                    <span class="svg-icon svg-icon-6 text-danger me-2">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="currentColor"></rect>
                                            <path d="M11.9343 12.5657L9.53696 14.963C9.22669 15.2733 9.18488 15.7619 9.43792 16.1204C9.7616 16.5789 10.4211 16.6334 10.8156 16.2342L14.3054 12.7029C14.6903 12.3134 14.6903 11.6866 14.3054 11.2971L10.8156 7.76582C10.4211 7.3666 9.7616 7.42107 9.43792 7.87962C9.18488 8.23809 9.22669 8.72669 9.53696 9.03696L11.9343 11.4343C12.2467 11.7467 12.2467 12.2533 11.9343 12.5657Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    Turned in ( {{ $turnedIn_assignments }} )
                                </div>
                                <div class="fw-bold text-gray-400">
                                    <span class="svg-icon svg-icon-6 text-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.3" x="2" y="2" width="20" height="20" rx="5" fill="currentColor"></rect>
                                            <path d="M11.9343 12.5657L9.53696 14.963C9.22669 15.2733 9.18488 15.7619 9.43792 16.1204C9.7616 16.5789 10.4211 16.6334 10.8156 16.2342L14.3054 12.7029C14.6903 12.3134 14.6903 11.6866 14.3054 11.2971L10.8156 7.76582C10.4211 7.3666 9.7616 7.42107 9.43792 7.87962C9.18488 8.23809 9.22669 8.72669 9.53696 9.03696L11.9343 11.4343C12.2467 11.7467 12.2467 12.2533 11.9343 12.5657Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    Graded ( {{ $graded_assignments }} )
                                </div>
                            <!--end::Number-->

                        </div> --}}
                        <!--end::Stat-->
                    </div>
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Details-->
            <div class="separator"></div>
            <div class="card-rounded bg-light d-flex flex-stack justify-content-center 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('teacher.course.wall.index', [$coffid]) }}">Course wall</a>
                    </li> --}}
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    {{-- <li class="nav-item my-1">
                        <a class="{{ $materials || $material_transactions ? '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">
                            Materials
                        </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="{{ $materials ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary "
                                    href="{{ route('teacher.course.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>
                                    Materials list
                                </a>
                            </div>
                            <!--end::Menu item-->
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a class="{{ $material_transactions ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary"
                                    href="{{ route('teacher.course.material-transactions.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 d="M22 7H2V11H22V7Z" fill="currentColor"></path>
                                            <path opacity="0.3"
                                                d="M21 19H3C2.4 19 2 18.6 2 18V6C2 5.4 2.4 5 3 5H21C21.6 5 22 5.4 22 6V18C22 18.6 21.6 19 21 19ZM14 14C14 13.4 13.6 13 13 13H5C4.4 13 4 13.4 4 14C4 14.6 4.4 15 5 15H13C13.6 15 14 14.6 14 14ZM16 15.5C16 16.3 16.7 17 17.5 17H18.5C19.3 17 20 16.3 20 15.5C20 14.7 19.3 14 18.5 14H17.5C16.7 14 16 14.7 16 15.5Z"
                                                fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    Transactions
                                </a>
                            </div>
                            <!--end::Menu item-->
                        </div>
                    </li> --}}
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    <li class="nav-item my-1">
                        <a class="{{ $hyperlink_quizzes || ($quizzes_grades && !$statistics && !$composed_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">
                            Grade items
                        </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 mt-2 fs-base w-250px"
                            data-kt-menu="true" data-kt-element="theme-mode-menu">
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a class="{{ $hyperlink_quizzes ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary "
                                    href="{{ route('teacher.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>
                                    list
                                </a>
                            </div>
                            <!--end::Menu item-->
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a class="{{ $quizzes_grades && !$statistics && !$composed_statistics ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary"
                                    href="{{ route('teacher.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-->
                            <!--begin::Menu item-->
                            {{-- <div class="menu-item px-3 my-0">
                                <a class="{{ $quizzes_grades_composed && !$statistics && !$composed_statistics ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary"
                                    href="{{ route('teacher.course.quiz.composed_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>
                                    Composed 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 && !$composed_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-250px"
                            data-kt-menu="true" data-kt-element="theme-mode-menu">
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a class="{{ $assignments && !$statistics && !$composed_statistics ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary "
                                    href="{{ route('teacher.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 && !$composed_statistics ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary"
                                    href="{{ route('teacher.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>
                                    Normal Grades
                                </a>
                            </div>
                            <!--end::Menu item-->
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a class="{{ $assignments_grades_composed && !$statistics ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary"
                                    href="{{ route('teacher.course.homework.composed_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>
                                    Composed Grades
                                </a>
                            </div>
                            <!--end::Menu item-->
                        </div>
                    </li> --}}
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    {{-- <li class="nav-item my-1">
                        <a class="{{ $composed_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">
                            Statistics
                        </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-250px"
                            data-kt-menu="true" data-kt-element="theme-mode-menu">
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a class="{{ $statistics ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary"
                                    href="{{ route('teacher.course.grade.statistics', [$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>
                                    Normal Statistics
                                </a>
                            </div>
                            <!--end::Menu item-->
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a class="{{ $composed_statistics ? 'active' : '' }} btn btn-color-gray-600 btn-active-color-primary"
                                    href="{{ route('teacher.course.grade.composed_statistics', [$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>
                                    Composed Statistics
                                </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('teacher.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('teacher.course.report.index', [$coffid]) }}">Students report</a>
                    </li>
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    {{-- <li class="nav-item my-1">
                        <a class="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">
                            {{ $has_grade_schema? 'Grade System Settings':'Add Grade System' }}
                        </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="btn btn-color-gray-600 btn-active-color-primary " {{ $has_grade_schema? 'hidden':'' }}
                                    href="{{ route('teacher.course.grade.grade_schema', [$coffid, $course_offering->sid]) }}">
                                    <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>
                                    Create
                                </a>
                            </div>
                            <!--end::Menu item-->
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a class="btn btn-color-gray-600 btn-active-color-primary" {{ $has_grade_schema? '':'hidden' }}
                                    href="{{ route('teacher.course.grade.edit_grade_schema', [$coffid, $course_offering->sid]) }}">
                                    <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>
                                    Edit
                                </a>
                            </div>
                            <!--end::Menu item-->
                            <!--begin::Menu item-->
                            <div class="menu-item px-3 my-0">
                                <a class="btn btn-color-gray-600 btn-active-color-primary" {{ $has_grade_schema? '':'hidden' }} onclick="check_delete('{{ $coffid }}', '{{ $course_offering->sid }}')"
                                    >
                                    <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>
                                    Delete
                                </a>
                            </div>
                            <!--end::Menu item-->
                        </div>
                    </li> --}}
                    <!--end::Nav item-->
                    <!--begin::Nav item-->
                    {{-- <li class="nav-item my-1">
                        <a class="{{ $compose_groups ? 'active' : '' }} btn btn-color-gray-600 btn-active-secondary btn-active-color-primary fw-bolder fs-8 fs-lg-base nav-link px-3 px-lg-8 mx-1 text-uppercase"
                            href="{{ route('teacher.course.composeGroup.index', [$coffid]) }}">Groups List</a>
                    </li> --}}
                    <!--end::Nav item-->
                </ul>
                <!--end::Nav-->
            </div>
        </div>
    </div>
    @if ($materials)
        @include('teacher.pages.course.material._material-list')
    @elseif ($hyperlink_quizzes)
        @include('teacher.pages.course.quiz._quiz-list')
    @elseif ($assignments)
        @include('teacher.pages.course.assignment._assignment-list')
    @elseif ($statistics)
        @include('teacher.pages.course.grades.statistics')
    @elseif ($composed_statistics)
        @include('teacher.pages.course.grades.composed_statistics')
    @elseif ($quizzes_grades || $assignments_grades)
        @include('teacher.pages.course.grades._grade')
    @elseif ($quizzes_grades_composed || $assignments_grades_composed)
        @include('teacher.pages.course.grades._grade-composed')
    @elseif ($material_transactions)
        @include('teacher.pages.course.material-transactions.index')
    @elseif ($students_report)
        @include('teacher.pages.course.reports.parent')
    @elseif ($course_wall)
        @include('teacher.pages.course.wall.index')
    @elseif ($grade_schema)
        @include('teacher.pages.course.grades.grade_schema.grade_schema')
    @elseif ($compose_groups)
        @include('teacher.pages.course.compose-groups.index')
    @endif

    <!--begin::compose group drawer-->
    {{-- <div id="compose_group_drawer" class="bg-white" data-kt-drawer="true" data-kt-drawer-activate="true"
        data-kt-drawer-toggle="#compose_group_drawer_button" data-kt-drawer-close="#compose_group_drawer_dismiss_close"
        data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'300px', 'md': '500px'}">
        <div class="card rounded-0 w-100">
            <!--begin::Card header-->
            <div class="card-header pe-5">
                <!--begin::Title-->
                <div class="card-title">
                    <!--begin::User-->
                    <div class="d-flex justify-content-center flex-column me-3">
                        <a href="#" class="fs-4 fw-bold text-gray-900 text-hover-primary me-1 lh-1">Create New
                            Topic</a>
                    </div>
                    <!--end::User-->
                </div>
                <!--end::Title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-light-primary" id="compose_group_drawer_close">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <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">
                                <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>
                <!--end::Card toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body hover-scroll-overlay-y">
                <div class="mb-6 text-center">
                    <img src="{{ env('SECURE_ASSETS').'/assets/media/illustrations/sigma-1/4.png' }}" width="200"
                        alt="">
                </div>
                <form action="{{ route('teacher.course.composeGroup.store', $course_offering->coffid) }}" method="POST">
                    @csrf
                    <div class="fv-row">
                        <!--begin::Label-->
                        <label class="required fw-semibold fs-6 mb-2" for="group_name">Group Name</label>
                        <!--end::Label-->
                        <input type="text" name="group_name" id="group_name" value="{{ old('group_name') }}"
                            class="form-control" required>
                    </div>
                    <div class="my-6 fv-row">
                        <label class="fw-semibold fs-6 mb-2" for="desc">Description</label>
                        <textarea type="text" name="desc" id="desc" class="form-control">{{ old('desc') }}</textarea>
                    </div>

                    <!--begin::Input group-->
                    <div class="my-6 fv-row">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-check form-switch form-check-custom form-check-solid">
                                    <input class="form-check-input" type="checkbox" name="is_active" checked>
                                    <span class="form-check-label fw-semibold text-muted">is_active</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <!--end::Input group-->

                    <button type="submit" class=" submit_btn btn btn-primary mx-auto d-block w-45 mt-4">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                        <span class="svg-icon svg-icon-3">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z"
                                    fill="currentColor"></path>
                                <path opacity="0.3"
                                    d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z"
                                    fill="currentColor"></path>
                            </svg>
                        </span>
                        <span class="pulse-ring"></span>
                        <span class="indicator-label">
                            Create
                        </span>
                        <span class="indicator-progress">
                            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                        </span>
                        <!--end::Svg Icon-->
                    </button>
                </form>
            </div>
            <!--end::Card body-->
            <!--begin::Card footer-->
            <div class="card-footer">
                <!--begin::Dismiss button-->
                <button class="submit_btn btn btn-light-danger" data-kt-drawer-dismiss="true">Dismiss</button>
                <!--end::Dismiss button-->
            </div>
            <!--end::Card footer-->
        </div>
    </div> --}}
    <!--end::compose group drawer-->
    <!--begin::topic drawer-->
    <div id="kt_drawer_example_dismiss" class="bg-white" data-kt-drawer="true" data-kt-drawer-activate="true"
        data-kt-drawer-toggle="#kt_drawer_example_dismiss_button" data-kt-drawer-close="#kt_drawer_example_dismiss_close"
        data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'300px', 'md': '500px'}">
        <div class="card rounded-0 w-100">
            <!--begin::Card header-->
            <div class="card-header pe-5">
                <!--begin::Title-->
                <div class="card-title">
                    <!--begin::User-->
                    <div class="d-flex justify-content-center flex-column me-3">
                        <a href="#" class="fs-4 fw-bold text-gray-900 text-hover-primary me-1 lh-1">Create New
                            Topic</a>
                    </div>
                    <!--end::User-->
                </div>
                <!--end::Title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-light-primary" id="kt_drawer_example_dismiss_close">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <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">
                                <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>
                <!--end::Card toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body hover-scroll-overlay-y">
                <div class="mb-6 text-center">
                    <img src="{{ env('SECURE_ASSETS').'/assets/media/illustrations/sigma-1/4.png' }}" width="200"
                        alt="">
                </div>
                <form action="{{ route('teacher.course.topic.store', $course_offering->coffid) }}" method="POST">
                    @csrf
                    <!--begin::Label-->
                    <label class="required fw-semibold fs-6 mb-2" for="topic_name">Category Name</label>
                    <!--end::Label-->
                    {{-- Topic name --}}
                    <input type="text" name="topic_name" id="topic_name" value="{{ old('topic_name') }}"
                        class="form-control" required>

                    <button type="submit" class=" submit_btn btn btn-primary mx-auto d-block w-45 mt-4">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                        <span class="svg-icon svg-icon-3">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z"
                                    fill="currentColor"></path>
                                <path opacity="0.3"
                                    d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z"
                                    fill="currentColor"></path>
                            </svg>
                        </span>
                        <span class="pulse-ring"></span>
                        <span class="indicator-label">
                            Create
                        </span>
                        <span class="indicator-progress">
                            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                        </span>
                        <!--end::Svg Icon-->
                    </button>
                </form>
            </div>
            <!--end::Card body-->
            <!--begin::Card footer-->
            <div class="card-footer">
                <!--begin::Dismiss button-->
                <button class="submit_btn btn btn-light-danger" data-kt-drawer-dismiss="true">Dismiss</button>
                <!--end::Dismiss button-->
            </div>
            <!--end::Card footer-->
        </div>
    </div>
    <!--end::topic drawer-->
    {{-- Edit topic modal --}}
    <div class="modal fade" id="edit_topic_modal" tabindex="-1" aria-modal="true" role="dialog"
        style="padding-left: 0px;">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header pb-0 border-0 justify-content-end">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2"
                                    rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                                <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                    transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <!--begin::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
                    <!--begin::Content-->
                    <div class="text-center mb-13">
                        <h1 class="mb-8">Edit Category Name</h1>
                        <img src="{{ env('SECURE_ASSETS').'/assets/media/illustrations/sigma-1/4.png' }}" width="200"
                            alt="">
                    </div>
                    <!--end::Content-->
                    <!--begin::Search-->
                    <div id="kt_modal_users_search_handler" data-kt-search-keypress="true" data-kt-search-min-length="2"
                        data-kt-search-enter="enter" data-kt-search-layout="inline" data-kt-search="true">
                        <!--begin::Form-->
                        <form method="post" id="edit_topic_form" action="" class="w-100 position-relative mb-5"
                            autocomplete="on">
                            @csrf
                            <!--begin::Icon-->
                            <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                            <div class="position-relative">
                                <i
                                    class="bi bi-pencil fw-bold text-primary position-absolute top-50 ms-5 translate-middle-y"></i>
                                <!--end::Svg Icon-->
                                <!--end::Icon-->
                                <!--begin::Input-->

                                <input type="text" id="topic_name_input"
                                    class="form-control form-control-lg form-control-solid px-15" name="name"
                                    placeholder="insert the new name" required>
                                <!--end::Input-->
                            </div>
                            <div class="">

                                <button type="submit" class=" submit_btn btn btn-primary mx-auto d-block w-45 mt-9">
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                                    <span class="svg-icon svg-icon-3">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z"
                                                fill="currentColor"></path>
                                            <path opacity="0.3"
                                                d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z"
                                                fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <span class="pulse-ring"></span>
                                    <span class="indicator-label">
                                        Update
                                    </span>
                                    <span class="indicator-progress">
                                        Please wait... <span
                                            class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                    <!--end::Svg Icon-->
                                </button>
                            </div>
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Search-->
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>


@endsection
@section('js')
    <script>
        function check_delete(coffid, sid){
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                if (result.isConfirmed) {
                    var url = "{{ route('teacher.course.grade.delete_grade_schema', [':coffid', ':sid']) }}";
                    var url = url.replace(':coffid', coffid.toString());
                    var url = url.replace(':sid', sid.toString());
                    window.location.href = url;
                    Swal.fire(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'
                    )
                }
                })
        }
    </script>
    <script>
        function chartLine(idValue, labels_quiz, data_quiz,labels_home, data_homework) {

            var labels_quiz = labels_quiz.split(",");
            var labels_home = labels_home.split(",");
            var labels = labels_quiz.concat(labels_home);
            // console.log(labels_quiz);
            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++) {
                data_homework.unshift(null);
            }

            const data = {
                labels: labels,
                datasets: [{
                        label: 'Quizzes',
                        data: data_quiz,
                        fill: false,
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1,
                        pointStyle: 'circle',
                        pointRadius: 10,
                        pointHoverRadius: 15
                    },
                    {
                        label: 'Homework',
                        data: data_homework,
                        fill: false,
                        borderColor: 'rgb(200, 100, 100)',
                        tension: 0.1,
                        pointStyle: 'circle',
                        pointRadius: 10,
                        pointHoverRadius: 15
                    }
                ]
            };

            // 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>
    <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>
    {{-- 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') }}"
            }else if (type == 'hyperlink-quiz') {
                url = "{{ route('ajax.hyperlinkQuiz.activateQuiz', ':item_id') }}"
            }else if (type == 'hyperlink-assignment') {
                url = "{{ route('ajax.hyperlinkAssignment.activateAssignment', ':item_id') }}"
            }

            url = url.replace(':item_id', item_id);
            activationToggle(url, data, item_id, is_active)
        });
    </script>
    <script>
        function postingToggle(url,data,id,is_posted){
            const axiosSetup=axios.create({
                headers:{
                    "X-Requested-With":"XMLHttpsRequest",
                    'Authorization':null,
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                },
                withCredentials:false
            })
            axiosSetup.post(url,{
                data:data,
            }).then(function(response) {
                if(is_posted == true){
                    $('.posting_label_'+id).html('posted');
                    $('.posting_label_'+id).removeClass('badge-danger');
                    $('.posting_label_'+id).addClass('badge badge-success');
                }else{
                    $('.posting_label_'+id).html('un-posted');
                    $('.posting_label_'+id).removeClass('badge-success');
                    $('.posting_label_'+id).addClass('badge-danger');
                }
                toastr.success(response.data.success)
            }).catch(function(error) {
                console.log(error)
                toastr.error('something went wrong');
            });

        }

        $(".posting_checkbox").click(function() {
            let item_id = $(this).attr('item-id');
            let is_posted = $(this).prop("checked");
            let type = $(this).attr("feature-type");
            let data = is_posted;
            let url = '';
            if (type == 'quiz') {
                url = "{{ route('ajax.quizFile.postQuiz', ':item_id') }}"
            } else if (type == 'assignment') {
                url = "{{ route('ajax.assignment.postAssignment', ':item_id') }}"
            }else if (type == 'hyperlink-quiz') {
                url = "{{ route('ajax.hyperlinkQuiz.postQuiz', ':item_id') }}"
            }else if (type == 'hyperlink-assignment') {
                url = "{{ route('ajax.hyperlinkAssignment.postAssignment', ':item_id') }}"
            }


            url = url.replace(':item_id', item_id);

            postingToggle(url, data, item_id, is_posted)
        });
    </script>
    <script>
        function lateSubmitToggle(url,data,id,is_posted){
            const axiosSetup=axios.create({
                headers:{
                    "X-Requested-With":"XMLHttpsRequest",
                    'Authorization':null,
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                },
                withCredentials:false
            })
            axiosSetup.post(url,{
                data:data,
            }).then(function(response) {
                toastr.success(response.data.success)
            }).catch(function(error) {
                toastr.error('something went wrong');
            });

        }

        $(".late_submit_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 == 'submit_quiz') {
                url = "{{ route('ajax.submit.quizFile.activateQuiz', ':item_id') }}"
            } else if (type == 'submit_assignment') {
                url = "{{ route('ajax.submit.assignment.activateAssignment', ':item_id') }}"
            }else if (type == 'submit_hyperlink-assignment') {
                url = "{{ route('ajax.submit.hyperlinkAssignment.activateAssignment', ':item_id') }}"
            }else if (type == 'submit_hyperlink-quiz') {
                url = "{{ route('ajax.submit.hyperlinkQuiz.activateQuiz', ':item_id') }}"
            }


            url = url.replace(':item_id', item_id);

            lateSubmitToggle(url, data, item_id, is_active)
        });
    </script>
      <script>
        $(document).ready(function () {
            $(".show_checkbox").each(function() {
                let item_id = $(this).attr('item-id');
                let is_show = $(this).attr('is-show') == "1";
                toggleLabel(item_id, is_show);
            });

            $(".show_checkbox").click(function() {
                let item_id = $(this).attr('item-id');
                let is_show = $(this).prop("checked");
                let coffid = {{ $course_offering->coffid }};

                // Correct way to generate the URL with named parameters
                let url = "{{ route('teacher.course.quiz.hyperlink.update-show', ['coffid' => ':coffid', 'id' => ':id']) }}"
                    .replace(':coffid', coffid)
                    .replace(':id', item_id);

                showToggle(url, is_show, item_id);
            });

            function showToggle(url, is_show, id) {
                axios.post(url, { data: is_show })
                    .then(function(response) {
                        toggleLabel(id, is_show);
                        toastr.success(response.data.success);
                    })
                    .catch(function(error) {
                        console.log(error);
                        toastr.error('Something went wrong');
                    });
            }

            function toggleLabel(id, is_show) {
                let label = $('#show_label_' + id);
                let checkbox = $('#show_checkbox_' + id);

                if (is_show) {
                    label.html('Show Summary').removeClass('text-danger').addClass('text-success');
                    checkbox.prop("checked", true);
                } else {
                    label.html('Hide Summary').removeClass('text-success').addClass('text-danger');
                    checkbox.prop("checked", false);
                }
            }
        });
        </script>
    {{-- copy to clipboard --}}
    <script>
        // Select elements
        const target = document.getElementById('kt_clipboard_1');
        const button = target.nextElementSibling;

        var clipboard = new ClipboardJS(button, {
            target: target,
            text: function() {
                return target.value;
            }
        });

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

            // Exit label update when already in progress
            if(button.innerHTML === 'Copied!'){
                return;
            }

            // Update button label
            button.innerHTML = 'Copied!';

            // Revert button label after 3 seconds
            setTimeout(function(){
                button.innerHTML = currentLabel;
            }, 1000)
        });
    </script>
    {{-- status filter --}}
    <script>
        $('.filter-item').on('click',function(){
            var status=$(this).html();
            $('#status_hidden_input').val(status)
            $('#status_filter_form').submit();
        })
    </script>
@endsection