{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title', 'GAS LMS | Create Grade Item Questions')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Quizzes' => route('teacher.course.quiz.index',$coffid)]])
@endsection
{{-- Content --}}
@section('content')
    @include('components._error')
    @if ($success_msg)
        <div class="notice mb-6 d-flex bg-light-warning rounded border-warning border border-dashed px-6">
            <!--begin::Wrapper-->
            <div class="d-flex flex-stack flex-grow-1">
                <!--begin::Content-->
                <div class="fw-semibold">
                    <h4 class="text-gray-900 fw-bold">We need your attention!</h4>
                    <div class="fs-6 text-gray-700">{{ $success_msg }}</div>
                </div>
                <!--end::Content-->
            </div>
            <div class="text-center">
                <img src="{{ env('SECURE_ASSETS').'/assets/media/illustrations/sigma-1/20.png' }}" class="theme-light-show w-200px"
                    alt="">
                <img src="{{ env('SECURE_ASSETS').'/assets/media/illustrations/sigma-1/20.png' }}" class="theme-dark-show w-200px"
                    alt="">
            </div>
            <!--end::Wrapper-->
        </div>
    @endif

    <div class="card shadow-sm">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
            <!--begin::Card title-->
            <div class="card-title app-container container-fluid d-flex flex-stack">
                <div class="d-flex flex-column justify-content-center flex-wrap me-3">
                    <span class="card-label fw-bold fs-3 mb-1">Create Grade Item Questions</span>
                </div>
                <div class="d-flex align-items-center gap-2 gap-lg-3">
                    <a href="#" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#question_points">Create New Question</a>
                </div>
            </div>
            <!--begin::Card title-->
        </div>
        <!--end::Card header-->
        <div class="separator border-gray-200 pt-2 pb-4"></div>
        <!--begin::Card body-->
        <div class="card-body py-4">
            <!--begin::Nav-->
            <div class="progress mb-5">
                <div id="progress_bar" class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
                    role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <ul class="nav nav-pills nav-pills-custom mb-3 justify-content-center">

                <!--begin::Item-->
                <li class="nav-item mb-6 me-3 me-lg-6">
                    <!--begin::Link-->
                    <a class="{{Session::get('active_tab')=='manual' || $active_tab && Session::get('active_tab')!='random' ? 'active':''}} nav-link btn btn-outline btn-flex btn-color-muted btn-active-color-primary flex-column overflow-hidden w-100px h-85px pt-5 pb-2"
                        id="kt_stats_widget_16_tab_link_1" data-bs-toggle="pill" href="#kt_stats_widget_16_tab_1">
                        <!--begin::Icon-->
                        <div class="nav-icon mb-3">
                            <i class="fonticon-drive fs-1 p-0"></i>
                        </div>
                        <!--end::Icon-->
                        <!--begin::Title-->
                        <span class="nav-text text-gray-800 fw-bold fs-6 lh-1">Manual</span>
                        <!--end::Title-->
                        <!--begin::Bullet-->
                        <span class="bullet-custom position-absolute bottom-0 w-100 h-4px bg-primary"></span>
                        <!--end::Bullet-->
                    </a>
                    <!--end::Link-->
                </li>
                <!--end::Item-->
                <!--begin::Item-->
                @if ($quiz_questions_count == 0)
                <li class="nav-item mb-6 me-3 me-lg-6">
                    <!--begin::Link-->
                    <a class="{{Session::get('active_tab')=='random' ? 'active':''}} nav-link btn btn-outline btn-flex btn-color-muted btn-active-color-primary flex-column overflow-hidden w-100px h-85px pt-5 pb-2"
                        id="kt_stats_widget_16_tab_link_2" data-bs-toggle="pill" href="#kt_stats_widget_16_tab_2">
                        <!--begin::Icon-->
                        <div class="nav-icon mb-3">
                            <i class="fonticon-bank fs-1 p-0"></i>
                        </div>
                        <!--end::Icon-->
                        <!--begin::Title-->
                        <span class="nav-text text-gray-800 fw-bold fs-6 lh-1">Random</span>
                        <!--end::Title-->
                        <!--begin::Bullet-->
                        <span class="bullet-custom position-absolute bottom-0 w-100 h-4px bg-primary"></span>
                        <!--end::Bullet-->
                    </a>
                    <!--end::Link-->
                </li>
                @endif
                <!--end::Item-->
            </ul>
            <!--end::Nav-->
            <!--begin::Tab Content-->
            {{-- Manual Form --}}
            <div class="tab-content">
                <!--begin::Tap pane-->
                <div class="tab-pane fade {{Session::get('active_tab') =='manual' || $active_tab && Session::get('active_tab')!='random' ? 'show active':''}}" id="kt_stats_widget_16_tab_1">
                    <!--begin::Form-->
                    <form id="kt_docs_formvalidation_text" class="form"
                        action="{{ route('teacher.course.quiz_question.search', [$coffid]) }}" method="get"
                        autocomplete="on" enctype="multipart/form-data">
                        <input type="hidden" name="active_tab" value="manual">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">Question Category:</label>
                                <!--begin::Input-->
                                <select class="form-select question_category" select-type='question_category'
                                    data-control="select2" id="question_category" name="question_category"
                                    data-placeholder="Select category" required>
                                    <option></option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">
                                            {{ $category->category_name }}
                                            @foreach ($category->children as $subcategory)
                                        <option value="{{ $subcategory->id }}">
                                            &nbsp;&nbsp;&nbsp;{{ $subcategory->category_name }}
                                            @foreach ($subcategory->children as $child)
                                        <option value="{{ $child->id }}">
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $child->category_name }}
                                            @foreach ($child->children as $item)
                                        <option value="{{ $item->id }}">
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $item->category_name }}
                                        </option>
                                    @endforeach
                                    </option>
                                    @endforeach
                                    </option>
                                    @endforeach
                                    </option>
                                    @endforeach
                                </select>
                                <!--end::Input-->
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Question Type:</label>
                                <!--begin::Input-->
                                <select name="question_type" select-type='question_type'
                                    class="form-select question_type" required data-placeholder="Select type">
                                    {{-- <option value="essay">Essay</option>
                                    <option value="mcq">MCQ</option>
                                    <option value="complete">Complete</option>
                                    <option value="file">File</option>
                                    <option value="audio">Audio</option>
                                    <option value="match">Match</option> --}}
                                </select>
                                <!--end::Input-->
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary mt-7" id="select_questions">Select</button>
                            </div>
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Tap pane-->
                <!--begin::Tap pane-->

                <div class="tab-pane fade {{Session::get('active_tab') =='random' ? 'show active':''}}" id="kt_stats_widget_16_tab_2">
                    {{-- error message if the requested questions is more than the available --}}
                    @if ($error=Session::get('validation_msg'))
                        <div class="alert alert-danger">
                            {{$error}}
                        </div>
                    @endif
                    <!--begin::Form-->
                    <form class="form" action="{{ route('teacher.course.quiz_question.search', [$coffid]) }}"
                        method="get" autocomplete="on">
                        <input type="hidden" name="active_tab" value="random">
                        <div id="kt_docs_repeater_basic" class="mt-8">
                            <!--begin::Form group-->
                            <div class="form-group">
                                <div data-repeater-list="questions">
                                    <div data-repeater-item>
                                        <div class="form-group row mt-8">
                                            <div class="col-md-6">
                                                <label class="form-label required">Question Type:</label>
                                                <!--begin::Input-->
                                                <select name="question_type" select-type='question_type'
                                                    data-control="select2" class="form-select" required>
                                                    @foreach ($question_types as $type)
                                                    <option value="{{$type->questiontype}}">{{ucfirst($type->questiontype)}} ({{$type->where('questiontype',$type->questiontype)->count()}} question(s))</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <!--begin::Label-->
                                                <label class="fw-semibold fs-6 mb-2 required"
                                                    for="number_of_questions">number of questions</label>
                                                <!--end::Label-->

                                                <!--begin::Input-->
                                                <input type="number" min="1"  name="number_of_questions"
                                                    class="form-control" required>
                                                <!--end::Input-->
                                            </div>
                                            <div class="col-md-2">
                                                <a href="javascript:;" data-repeater-delete
                                                    class="btn btn-light-danger mt-2 mt-md-8">
                                                    <i class="la la-trash-o fs-2"></i>
                                                    Delete
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end::Form group-->
                            <!--begin::Form group-->
                            <div class="form-group mt-5">
                                <a href="javascript:;" data-repeater-create class="btn btn-light-success">
                                    <i class="la la-plus"></i>Add
                                </a>
                            </div>
                            <!--end::Form group-->
                        </div>
                        <div class="fv-row">
                            <!--begin::Actions-->
                            <button id="kt_docs_formvalidation_text_submit" type="submit"
                                class="btn btn-primary d-block mx-auto mt-8">
                                <span class="indicator-label">
                                    Submit
                                </span>
                            </button>
                            <!--end::Actions-->
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Tap pane-->
            </div>
            <!--end::Tab Content-->
            <!--begin::Form-->
            <form id="kt_docs_formvalidation_text" class="form mt-10"
                action="{{ route('teacher.course.quiz_question.store', [$coffid]) }}" method="post"
                autocomplete="on" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="quiz_id" value="{{ $quiz_id }}">
                @if (Session::get('questions'))
                    {{-- Selected questions --}}
                    <div class="card shadow p-8">
                        <table
                            class="table table-flush align-middle table-row-bordered table-row-solid gy-4 gs-9 mt-7"
                            id="select_question_table">
                            <!--begin::Thead-->
                            <thead class="border-gray-200 fs-5 fw-semibold bg-lighten">
                                <tr class="text-center">
                                    <th></th>
                                </tr>
                            </thead>
                            <!--end::Thead-->
                            <!--begin::Tbody-->
                            <tbody class="fs-6 fw-semibold text-gray-600">
                                @foreach (Session::get('questions') as $question)
                                    <tr class="text-center">
                                        <td class="row">
                                            <div class="col-md-8 mt-5">
                                                {{-- essay questions --}}
                                                @if ($question->questiontype == 'essay')
                                                    <div class="d-flex align-items-center collapsible py-3 toggle collapsed mb-0"
                                                        data-bs-toggle="collapse" data-bs-target="#kt_job_4_2">
                                                        @if ($question->essayQuestion->questiontext)
                                                            <!--begin::Icon-->
                                                            <div
                                                                class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                                                                <!--begin::Svg Icon | path: icons/duotune/general/gen036.svg-->
                                                                <span
                                                                    class="svg-icon toggle-on svg-icon-primary 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.3" x="2"
                                                                            y="2" width="20"
                                                                            height="20" rx="5"
                                                                            fill="currentColor" />
                                                                        <rect x="6.0104" y="10.9247"
                                                                            width="12" height="2"
                                                                            rx="1" fill="currentColor" />
                                                                    </svg>
                                                                </span>
                                                                <!--end::Svg Icon-->
                                                                <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
                                                                <span class="svg-icon toggle-off 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.3" x="2"
                                                                            y="2" width="20"
                                                                            height="20" rx="5"
                                                                            fill="currentColor" />
                                                                        <rect x="10.8891" y="17.8033"
                                                                            width="12" height="2"
                                                                            rx="1"
                                                                            transform="rotate(-90 10.8891 17.8033)"
                                                                            fill="currentColor" />
                                                                        <rect x="6.01041" y="10.9247"
                                                                            width="12" height="2"
                                                                            rx="1" fill="currentColor" />
                                                                    </svg>
                                                                </span>
                                                                <!--end::Svg Icon-->
                                                            </div>
                                                            <!--end::Icon-->
                                                        @endif
                                                        <h4 class="text-gray-700 fw-bold cursor-pointer mb-0 mt-2">
                                                            {!! $question->essayQuestion->questiontext !!}
                                                        </h4>
                                                    </div>
                                                    <!--begin::Body-->
                                                    {{-- <div id="kt_job_4_2" class="collapse fs-6 ms-1"> --}}
                                                    @if ($question->essayQuestion->multimedia_id)
                                                        <img src="{{ $question->essayQuestion->multimedia->url }}"
                                                            alt=" {{ $question->essayQuestion->name }}">
                                                    @endif
                                                    <!--begin::Text-->
                                                    <!--end::Text-->
                                                    {{-- end essay questions --}}
                                                    {{-- start match questions --}}
                                                @elseif ($question->questiontype == 'match')
                                                    <!--begin::Body-->
                                                    <div class="card-body py-4">
                                                        {{-- begin question --}}
                                                        <div class="mt-3">
                                                            <!--begin::Heading-->
                                                            <div class="d-flex align-items-center collapsible py-3 toggle active mb-0"
                                                                data-bs-toggle="collapse"
                                                                data-bs-target="#kt_job_4_2">
                                                                @if ($question->matchQuestion->questiontext)
                                                                    <!--begin::Icon-->
                                                                    <div
                                                                        class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                                                                        <!--begin::Svg Icon | path: icons/duotune/general/gen036.svg-->
                                                                        <span
                                                                            class="svg-icon toggle-on svg-icon-primary 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.3"
                                                                                    x="2" y="2"
                                                                                    width="20" height="20"
                                                                                    rx="5"
                                                                                    fill="currentColor" />
                                                                                <rect x="6.0104"
                                                                                    y="10.9247" width="12"
                                                                                    height="2" rx="1"
                                                                                    fill="currentColor" />
                                                                            </svg>
                                                                        </span>
                                                                        <!--end::Svg Icon-->
                                                                        <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
                                                                        <span
                                                                            class="svg-icon toggle-off 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.3"
                                                                                    x="2" y="2"
                                                                                    width="20" height="20"
                                                                                    rx="5"
                                                                                    fill="currentColor" />
                                                                                <rect x="10.8891"
                                                                                    y="17.8033" width="12"
                                                                                    height="2" rx="1"
                                                                                    transform="rotate(-90 10.8891 17.8033)"
                                                                                    fill="currentColor" />
                                                                                <rect x="6.01041"
                                                                                    y="10.9247" width="12"
                                                                                    height="2" rx="1"
                                                                                    fill="currentColor" />
                                                                            </svg>
                                                                        </span>
                                                                        <!--end::Svg Icon-->
                                                                    </div>
                                                                    <!--end::Icon-->
                                                                @endif
                                                                <!--begin::Title-->
                                                                <h4
                                                                    class="text-gray-700 fw-bold cursor-pointer mb-0">
                                                                    {{ $question->matchQuestion->name }}
                                                                    @if ($question->matchQuestion->hint)
                                                                        <span class="ms-6"
                                                                            data-bs-toggle="tooltip"
                                                                            data-bs-custom-class="tooltip-inverse"
                                                                            data-bs-placement="top"
                                                                            title="{{ $question->MatchQuestion->hint }}">
                                                                            <i
                                                                                class="far fa-lightbulb text-warning fs-1"></i>
                                                                        </span>
                                                                    @endif
                                                                </h4>
                                                                <!--end::Title-->
                                                            </div>
                                                            <!--end::Heading-->
                                                            @if ($question->matchQuestion->questiontext)
                                                                <!--begin::Body-->
                                                                <div id="kt_job_4_2"
                                                                    class="collapse fs-6 show">
                                                                    <!--begin::Text-->
                                                                    <div
                                                                        class="mb-4 text-gray-600 fw-semibold fs-6 ps-10 ">
                                                                        {!! $question->matchQuestion->questiontext !!}</div>
                                                                    <!--end::Text-->
                                                                </div>
                                                            @endif

                                                            @if ($question->matchQuestion->multimedia_id)
                                                                <a class="btn btn-success"
                                                                    href="{{ $question->matchQuestion->multimedia->url }}"
                                                                    target="_blank" download>
                                                                    {{ $question->matchQuestion->name }}
                                                                    <i class="fa fa-download"></i>
                                                                </a>
                                                            @endif
                                                            <!--end::Content-->
                                                        </div>
                                                        {{-- end question --}}
                                                        <div class="row g-6 g-xl-12 mt-10">
                                                            <!--begin::Left-->
                                                            <!--begin::Col-->
                                                            <div class="col-md-6 col-xl-6">
                                                                <!--begin::Card-->
                                                                <div class="card border-hover-primary shadow">
                                                                    <!--begin::Card header-->
                                                                    <div class="card-header border-0 pt-9">
                                                                        <!--begin::Card Title-->
                                                                        <div class="card-title m-0">
                                                                            <!--begin::Avatar-->
                                                                            <div class="badge badge-primary">
                                                                                Left Side
                                                                            </div>
                                                                            <!--end::Avatar-->
                                                                        </div>
                                                                        <!--end::Car Title-->
                                                                    </div>
                                                                    <!--end:: Card header-->
                                                                    <!--begin:: Card body-->
                                                                    <div class="card-body p-9">
                                                                        <!--begin::Info-->
                                                                        <div class="mb-5">

                                                                            @foreach ($question->matchQuestion->leftSideMatch->shuffle() as $left_item)
                                                                                <!--begin::Due-->
                                                                                <div
                                                                                    class="border border-gray-300 border-dashed rounded py-3 px-4 me-7 mb-3">
                                                                                    <div
                                                                                        class="fs-6 text-gray-800 fw-bold">
                                                                                        <div><span
                                                                                                class="svg-icon svg-icon-1 svg-icon-primary">
                                                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                    width="24px"
                                                                                                    height="24px"
                                                                                                    viewBox="0 0 24 24">
                                                                                                    <path
                                                                                                        d="M10.0813 3.7242C10.8849 2.16438 13.1151 2.16438 13.9187 3.7242V3.7242C14.4016 4.66147 15.4909 5.1127 16.4951 4.79139V4.79139C18.1663 4.25668 19.7433 5.83365 19.2086 7.50485V7.50485C18.8873 8.50905 19.3385 9.59842 20.2758 10.0813V10.0813C21.8356 10.8849 21.8356 13.1151 20.2758 13.9187V13.9187C19.3385 14.4016 18.8873 15.491 19.2086 16.4951V16.4951C19.7433 18.1663 18.1663 19.7433 16.4951 19.2086V19.2086C15.491 18.8873 14.4016 19.3385 13.9187 20.2758V20.2758C13.1151 21.8356 10.8849 21.8356 10.0813 20.2758V20.2758C9.59842 19.3385 8.50905 18.8873 7.50485 19.2086V19.2086C5.83365 19.7433 4.25668 18.1663 4.79139 16.4951V16.4951C5.1127 15.491 4.66147 14.4016 3.7242 13.9187V13.9187C2.16438 13.1151 2.16438 10.8849 3.7242 10.0813V10.0813C4.66147 9.59842 5.1127 8.50905 4.79139 7.50485V7.50485C4.25668 5.83365 5.83365 4.25668 7.50485 4.79139V4.79139C8.50905 5.1127 9.59842 4.66147 10.0813 3.7242V3.7242Z"
                                                                                                        fill="currentColor">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M14.8563 9.1903C15.0606 8.94984 15.3771 8.9385 15.6175 9.14289C15.858 9.34728 15.8229 9.66433 15.6185 9.9048L11.863 14.6558C11.6554 14.9001 11.2876 14.9258 11.048 14.7128L8.47656 12.4271C8.24068 12.2174 8.21944 11.8563 8.42911 11.6204C8.63877 11.3845 8.99996 11.3633 9.23583 11.5729L11.3706 13.4705L14.8563 9.1903Z"
                                                                                                        fill="white">
                                                                                                    </path>
                                                                                                </svg>
                                                                                            </span>
                                                                                            {{ $left_item->description }}
                                                                                        </div>
                                                                                        @if ($left_item->multimedia_id)
                                                                                            <div> <img
                                                                                                    src="{{ $left_item->multimedia->url }}"
                                                                                                    alt="{{ $left_item->description }}">
                                                                                            </div>
                                                                                        @endif
                                                                                    </div>
                                                                                </div>
                                                                                <!--end::Due-->
                                                                            @endforeach
                                                                        </div>
                                                                        <!--end::Info-->
                                                                    </div>
                                                                    <!--end:: Card body-->
                                                                </div>
                                                                <!--end::Card-->
                                                            </div>
                                                            <!--end::Col-->
                                                            <!--end::Left-->

                                                            <!--begin::Right-->
                                                            <!--begin::Col-->
                                                            <div class="col-md-6 col-xl-6">
                                                                <!--begin::Card-->
                                                                <div class="card border-hover-primary shadow">
                                                                    <!--begin::Card header-->
                                                                    <div class="card-header border-0 pt-9">
                                                                        <!--begin::Card Title-->
                                                                        <div class="card-title m-0">
                                                                            <!--begin::Avatar-->
                                                                            <div class="badge badge-primary">
                                                                                Right Side
                                                                            </div>
                                                                            <!--end::Avatar-->
                                                                        </div>
                                                                        <!--end::Car Title-->
                                                                    </div>
                                                                    <!--end:: Card header-->
                                                                    <!--begin:: Card body-->
                                                                    <div class="card-body p-9">
                                                                        <!--begin::Info-->
                                                                        <div class="mb-5">
                                                                            <!--begin::Due-->
                                                                            @foreach ($question->matchQuestion->rightSideMatch->shuffle() as $right_item)
                                                                                <!--begin::Due-->
                                                                                <div
                                                                                    class="border border-gray-300 border-dashed rounded py-3 px-4 me-7 mb-3">
                                                                                    <div
                                                                                        class="fs-6 text-gray-800 fw-bold">
                                                                                        <div>
                                                                                            <span
                                                                                                class="svg-icon svg-icon-1 svg-icon-primary">
                                                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                                                    width="24px"
                                                                                                    height="24px"
                                                                                                    viewBox="0 0 24 24">
                                                                                                    <path
                                                                                                        d="M10.0813 3.7242C10.8849 2.16438 13.1151 2.16438 13.9187 3.7242V3.7242C14.4016 4.66147 15.4909 5.1127 16.4951 4.79139V4.79139C18.1663 4.25668 19.7433 5.83365 19.2086 7.50485V7.50485C18.8873 8.50905 19.3385 9.59842 20.2758 10.0813V10.0813C21.8356 10.8849 21.8356 13.1151 20.2758 13.9187V13.9187C19.3385 14.4016 18.8873 15.491 19.2086 16.4951V16.4951C19.7433 18.1663 18.1663 19.7433 16.4951 19.2086V19.2086C15.491 18.8873 14.4016 19.3385 13.9187 20.2758V20.2758C13.1151 21.8356 10.8849 21.8356 10.0813 20.2758V20.2758C9.59842 19.3385 8.50905 18.8873 7.50485 19.2086V19.2086C5.83365 19.7433 4.25668 18.1663 4.79139 16.4951V16.4951C5.1127 15.491 4.66147 14.4016 3.7242 13.9187V13.9187C2.16438 13.1151 2.16438 10.8849 3.7242 10.0813V10.0813C4.66147 9.59842 5.1127 8.50905 4.79139 7.50485V7.50485C4.25668 5.83365 5.83365 4.25668 7.50485 4.79139V4.79139C8.50905 5.1127 9.59842 4.66147 10.0813 3.7242V3.7242Z"
                                                                                                        fill="currentColor">
                                                                                                    </path>
                                                                                                    <path
                                                                                                        d="M14.8563 9.1903C15.0606 8.94984 15.3771 8.9385 15.6175 9.14289C15.858 9.34728 15.8229 9.66433 15.6185 9.9048L11.863 14.6558C11.6554 14.9001 11.2876 14.9258 11.048 14.7128L8.47656 12.4271C8.24068 12.2174 8.21944 11.8563 8.42911 11.6204C8.63877 11.3845 8.99996 11.3633 9.23583 11.5729L11.3706 13.4705L14.8563 9.1903Z"
                                                                                                        fill="white">
                                                                                                    </path>
                                                                                                </svg>
                                                                                            </span>
                                                                                            {{ $right_item->description }}
                                                                                        </div>
                                                                                        @if ($right_item->multimedia_id)
                                                                                            <div><img
                                                                                                    src="{{ $right_item->multimedia->url }}"
                                                                                                    alt="{{ $right_item->description }}">
                                                                                            </div>
                                                                                        @endif
                                                                                    </div>
                                                                                </div>
                                                                                <!--end::Due-->
                                                                            @endforeach
                                                                            <!--end::Due-->
                                                                        </div>
                                                                        <!--end::Info-->
                                                                    </div>
                                                                    <!--end:: Card body-->
                                                                </div>
                                                                <!--end::Card-->
                                                            </div>
                                                            <!--end::Col-->
                                                        </div>
                                                    </div>

                                                    {{-- end match questions --}}


                                                    {{-- choice questions --}}
                                                @elseif ($question->questiontype == 'mcq')
                                                    <div class="mt-3">
                                                        <!--begin::Heading-->
                                                        <div class="d-flex align-items-center collapsible py-3 toggle collapsed mb-0"
                                                            data-bs-toggle="collapse"
                                                            data-bs-target="#kt_job_4_2">
                                                            @if ($question->mcqQuestion->questiontext)
                                                                <!--begin::Icon-->
                                                                <div
                                                                    class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen036.svg-->
                                                                    <span
                                                                        class="svg-icon toggle-on svg-icon-primary 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.3" x="2"
                                                                                y="2" width="20"
                                                                                height="20" rx="5"
                                                                                fill="currentColor" />
                                                                            <rect x="6.0104" y="10.9247"
                                                                                width="12" height="2"
                                                                                rx="1"
                                                                                fill="currentColor" />
                                                                        </svg>
                                                                    </span>
                                                                    <!--end::Svg Icon-->
                                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
                                                                    <span class="svg-icon toggle-off 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.3" x="2"
                                                                                y="2" width="20"
                                                                                height="20" rx="5"
                                                                                fill="currentColor" />
                                                                            <rect x="10.8891" y="17.8033"
                                                                                width="12" height="2"
                                                                                rx="1"
                                                                                transform="rotate(-90 10.8891 17.8033)"
                                                                                fill="currentColor" />
                                                                            <rect x="6.01041" y="10.9247"
                                                                                width="12" height="2"
                                                                                rx="1"
                                                                                fill="currentColor" />
                                                                        </svg>
                                                                    </span>
                                                                    <!--end::Svg Icon-->
                                                                </div>
                                                                <!--end::Icon-->
                                                            @endif
                                                            <!--begin::Title-->
                                                            <h4 class="text-gray-700 fw-bold cursor-pointer mb-0">
                                                                {{ $question->mcqQuestion->name }}
                                                                @if ($question->mcqQuestion->multimedia_id)
                                                                    <img src="{{ $question->mcqQuestion->multimedia->url }}"
                                                                        alt=" {{ $question->mcqQuestion->name }}">
                                                                @endif
                                                                @if ($question->mcqQuestion->hint)
                                                                    <span class="ms-6" data-bs-toggle="tooltip"
                                                                        data-bs-custom-class="tooltip-inverse"
                                                                        data-bs-placement="top"
                                                                        title="{{ $question->mcqQuestion->hint }}">
                                                                        <i
                                                                            class="far fa-lightbulb text-warning fs-1"></i>
                                                                    </span>
                                                                @endif
                                                            </h4>
                                                            <!--end::Title-->
                                                        </div>
                                                        <!--end::Heading-->
                                                        @if ($question->mcqQuestion->questiontext)
                                                            <!--begin::Body-->
                                                            <div id="kt_job_4_2" class="collapse fs-6 ms-1">
                                                                <!--begin::Text-->
                                                                <div
                                                                    class="mb-4 text-gray-600 fw-semibold fs-6 ps-10">
                                                                    {!! $question->mcqQuestion->questiontext !!}</div>
                                                                <!--end::Text-->
                                                            </div>
                                                        @endif
                                                        <!--end::Content-->
                                                    </div>
                                                    @foreach ($question->mcqQuestion->choices as $choice)
                                                        <div class="mt-3">
                                                            <div
                                                                class="form-check form-check-custom form-check-success form-check-solid my-5 form-check-lg">
                                                                <input class="form-check-input" name="choice[]"
                                                                    type="{{ $question->mcqQuestion->choice_type == 1 ? 'checkbox' : 'radio' }}"
                                                                    value="{{ $choice->id }}" />
                                                                <label class="form-check-label fs-3"
                                                                    for="flexCheckDefault">
                                                                    {{ $choice->description }}
                                                                    @if ($choice->multimedia_id)
                                                                        <div class="symbol symbol-50px ms-3">
                                                                            <img src="{{ $choice->multimedia->url }}"
                                                                                alt="{{ $choice->description }}">
                                                                        </div>
                                                                    @endif
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                    {{-- file questions --}}
                                                @elseif($question->questiontype == 'file')
                                                    <div class="d-flex align-items-center collapsible py-3 toggle collapsed mb-0"
                                                        data-bs-toggle="collapse" data-bs-target="#kt_job_4_2">
                                                        @if ($question->fileQuestion->questiontext)
                                                            <!--begin::Icon-->
                                                            <div
                                                                class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                                                                <!--begin::Svg Icon | path: icons/duotune/general/gen036.svg-->
                                                                <span
                                                                    class="svg-icon toggle-on svg-icon-primary 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.3" x="2"
                                                                            y="2" width="20"
                                                                            height="20" rx="5"
                                                                            fill="currentColor" />
                                                                        <rect x="6.0104" y="10.9247"
                                                                            width="12" height="2"
                                                                            rx="1" fill="currentColor" />
                                                                    </svg>
                                                                </span>
                                                                <!--end::Svg Icon-->
                                                                <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
                                                                <span class="svg-icon toggle-off 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.3" x="2"
                                                                            y="2" width="20"
                                                                            height="20" rx="5"
                                                                            fill="currentColor" />
                                                                        <rect x="10.8891" y="17.8033"
                                                                            width="12" height="2"
                                                                            rx="1"
                                                                            transform="rotate(-90 10.8891 17.8033)"
                                                                            fill="currentColor" />
                                                                        <rect x="6.01041" y="10.9247"
                                                                            width="12" height="2"
                                                                            rx="1" fill="currentColor" />
                                                                    </svg>
                                                                </span>
                                                                <!--end::Svg Icon-->
                                                            </div>
                                                            <!--end::Icon-->
                                                        @endif
                                                        <h4 class="text-gray-700 fw-bold cursor-pointer mb-0 mt-2">
                                                            {!! $question->fileQuestion->questiontext !!}
                                                        </h4>
                                                        @if ($question->fileQuestion->multimedia_id)
                                                            <a href="{{ $question->fileQuestion->multimedia->url }}"
                                                                target="_blank" download
                                                                class="btn btn-outline btn-outline-dashed btn-outline-dark btn-active-light-success btn-sm ms-2">download
                                                                file</a>
                                                        @endif
                                                    </div>
                                                    <!--begin::Body-->
                                                    <!--begin::Text-->
                                                    <!--end::Text-->
                                                    {{-- end file question --}}
                                                    {{-- audio question --}}
                                                @elseif($question->questiontype == 'audio')
                                                    <div class="d-flex align-items-center collapsible py-3 toggle collapsed mb-0"
                                                        data-bs-toggle="collapse" data-bs-target="#kt_job_4_2">
                                                        @if ($question->audioQuestion->questiontext)
                                                            <!--begin::Icon-->
                                                            <div
                                                                class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                                                                <!--begin::Svg Icon | path: icons/duotune/general/gen036.svg-->
                                                                <span
                                                                    class="svg-icon toggle-on svg-icon-primary 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.3" x="2"
                                                                            y="2" width="20"
                                                                            height="20" rx="5"
                                                                            fill="currentColor" />
                                                                        <rect x="6.0104" y="10.9247"
                                                                            width="12" height="2"
                                                                            rx="1" fill="currentColor" />
                                                                    </svg>
                                                                </span>
                                                                <!--end::Svg Icon-->
                                                                <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
                                                                <span class="svg-icon toggle-off 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.3" x="2"
                                                                            y="2" width="20"
                                                                            height="20" rx="5"
                                                                            fill="currentColor" />
                                                                        <rect x="10.8891" y="17.8033"
                                                                            width="12" height="2"
                                                                            rx="1"
                                                                            transform="rotate(-90 10.8891 17.8033)"
                                                                            fill="currentColor" />
                                                                        <rect x="6.01041" y="10.9247"
                                                                            width="12" height="2"
                                                                            rx="1" fill="currentColor" />
                                                                    </svg>
                                                                </span>
                                                                <!--end::Svg Icon-->
                                                            </div>
                                                            <!--end::Icon-->
                                                        @endif
                                                        <h4 class="text-gray-700 fw-bold cursor-pointer mb-0 mt-2">
                                                            {!! $question->audioQuestion->questiontext !!}
                                                        </h4>
                                                    </div>
                                                    @if ($question->audioQuestion->multimedia_id)
                                                        <audio controls>
                                                            <source
                                                                src="{{ $question->audioQuestion->multimedia->url }}"
                                                                type="audio/ogg">
                                                            <source
                                                                src="{{ $question->audioQuestion->multimedia->url }}"
                                                                type="audio/mpeg">
                                                        </audio>
                                                    @endif
                                                    <!--begin::Body-->
                                                    <!--begin::Text-->
                                                    <!--end::Text-->
                                                    {{-- end audio question --}}
                                                    {{-- complete question --}}
                                                @elseif($question->questiontype == 'complete')
                                                    <div class="d-flex align-items-center collapsible py-3 toggle collapsed mb-0"
                                                        data-bs-toggle="collapse" data-bs-target="#kt_job_4_2">
                                                        <h4 class="text-gray-700 fw-bold cursor-pointer mb-0">
                                                            {!! $question->completeQuestion->questiontext !!}
                                                            @if ($question->completeQuestion->hint)
                                                                <span class="ms-6" data-bs-toggle="tooltip"
                                                                    data-bs-custom-class="tooltip-inverse"
                                                                    data-bs-placement="top"
                                                                    title="{{ $question->completeQuestion->hint }}">
                                                                    <i
                                                                        class="far fa-lightbulb text-warning fs-1"></i>
                                                                </span>
                                                            @endif
                                                        </h4>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label">Points:</label>
                                                <input type="number" min="0" placeholder="0"
                                                    class="form-control mb-2 mb-md-0" placeholder="" />
                                            </div>
                                            <div class="col-md-2">
                                                <a class="btn btn-sm btn-light-primary mt-3 mt-md-8 add_question"
                                                    question-id={{ isset($question->questiontype) ? $question->id : $question[0][2][0][4] }}>
                                                    <i class="fa fa-plus"></i>Add
                                                </a>
                                            </div>
                                            {{-- <div class="col-md-2">
                                            <a id="finish" onclick="finish()"
                                                class="btn btn-sm btn-light-primary mt-3 mt-md-8">
                                                <i class="fa fa-plus"></i>Finish
                                            </a>
                                        </div> --}}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <!--end::Tbody-->
                        </table>
                    </div>
                @endif
            </form>
            <!--end::Form-->
        </div>
    </div>
    <!-- Questions Table -->
    <div class="card shadow-sm mt-10">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
            <!--begin::Card title-->
            <div class="card-title align-items-start flex-column">
                <span class="card-label fw-bold fs-3 mb-1">Quiz Questions</span>
            </div>
            <!--begin::Card title-->
        </div>
        <!--end::Card header-->
        <div class="separator border-gray-200 pt-2 pb-4"></div>

        <div class="tab-content ml-10 p-10">
            <!--begin::Tap pane-->
            <div class="tab-pane fade show active">

                <div class="table-responsive">
                    <!--begin::Table-->
                    <table id="question_table"
                        class="table table-flush align-middle table-row-bordered table-row-solid gy-4 gs-9">
                        <!--begin::Thead-->
                        <thead class="border-gray-200 fs-5 fw-semibold bg-lighten">
                            <tr class="text-center">
                                <th>id</th>
                                {{-- <th>Question Name</th> --}}
                                <th>Question Category</th>
                                <th>Question Type</th>
                                <th>Points</th>
                                <th class="text-center">Delete</th>
                                <th class="text-center">Preview</th>
                                {{-- <th class="min-w-100px">end date</th>
                                <th class="min-w-40px pe-4 rounded-end">actions</th> --}}
                            </tr>
                        </thead>
                        <!--end::Thead-->
                        <!--begin::Tbody-->
                        <tbody class="fs-6 fw-semibold text-gray-600">

                        </tbody>
                        <!--end::Tbody-->
                    </table>

                    <div class="questions_tabel row g-5">

                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Add Question Points Modal --}}
    <div class="modal fade" id="question_points" tabindex="-1" aria-modal="true" role="dialog" >
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Form-->
                <form class="form fv-plugins-bootstrap5 fv-plugins-framework" action="{{route('teacher.question.questionType',[$cid,$question_bank_id])}}" method="get">
                    <input type="hidden" name="page" value="quiz_page">
                    <input type="hidden" name="quiz_id" value="{{$quiz_id}}">
                    <!--begin::Modal header-->
                    <div class="modal-header" id="kt_modal_new_address_header">
                        <!--begin::Modal title-->
                        <h2>Create New Question</h2>
                        <!--end::Modal title-->
                        <!--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>
                    <!--end::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body py-10 px-lg-17">
                        <!--begin::Scroll-->
                        <div class="scroll-y me-n7 pe-7" id="kt_modal_new_address_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_new_address_header" data-kt-scroll-wrappers="#kt_modal_new_address_scroll" data-kt-scroll-offset="300px" style="max-height: 277px;">
                            <!--begin::Notice-->
                            <!--begin::Notice-->
                            <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed mb-9 p-6">
                                <!--begin::Icon-->
                                <!--begin::Svg Icon | path: icons/duotune/general/gen044.svg-->
                                <span class="svg-icon svg-icon-2tx svg-icon-warning me-4">
                                    <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="10" fill="currentColor"></rect>
                                        <rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="currentColor"></rect>
                                        <rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor"></rect>
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                                <!--end::Icon-->
                                <!--begin::Wrapper-->
                                <div class="d-flex flex-stack flex-grow-1">
                                    <!--begin::Content-->
                                    <div class="fw-semibold">
                                        <h4 class="text-gray-900 fw-bold">Warning</h4>
                                        <div class="fs-6 text-gray-700">Please insert the total points of this question</div>
                                    </div>
                                    <!--end::Content-->
                                </div>
                                <!--end::Wrapper-->
                            </div>
                            <!--end::Notice-->
                            <!--end::Notice-->
                            <!--begin::Input group-->
                            <div class="row mb-5">
                                <!--begin::Col-->
                                <div class="col-md-12 fv-row fv-plugins-icon-container">
                                    <!--begin::Label-->
                                    <label class="required fs-5 fw-semibold mb-2">Points</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="number" class="form-control form-control-solid" placeholder="" name="question_points" required>
                                    <!--end::Input-->
                                <div class="fv-plugins-message-container invalid-feedback"></div></div>
                                <!--end::Col-->
                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Scroll-->
                    </div>
                    <!--end::Modal body-->
                    <!--begin::Modal footer-->
                    <div class="modal-footer flex-center">
                        <!--begin::Button-->
                        <button type="reset" id="kt_modal_new_address_cancel" class="btn btn-light me-3">Discard</button>
                        <!--end::Button-->
                        <!--begin::Button-->
                        <button type="submit" class="btn btn-primary">
                            <span class="indicator-label">Submit</span>
                        </button>
                        <!--end::Button-->
                    </div>
                    <!--end::Modal footer-->
                <div></div></form>
                <!--end::Form-->
            </div>
        </div>
    </div>
    @endsection
    @section('js')
        <script>
            $(document).ready(function() {
                append_quiz();
                return_points();
                var table = $('#select_question_table').DataTable({
                    paging: true,
                    ordering: false,
                    info: false,
                    searching: true,
                    dom: 'Bfrtip',
                });
                table.buttons('.btn').remove();

                $('.add_question').on('click', function(event) {
                    var url = "{{ route('ajax.postQuestionsWithPoints', [':coffid', ':quiz_id']) }}";
                    url = url.replace(':coffid', {{ $coffid }});
                    url = url.replace(':quiz_id', document.getElementById('quiz_id').value);

                    let question_id = $(this).attr('question-id')
                    var trElement = event.target.parentElement.parentElement;
                    let point = trElement.childNodes[3].childNodes[3].value;

                    dataValue = 'question_id=' + question_id + "&point=" + point;

                    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: dataValue})
                    .then(function(response) {
                            // console.log(response.data);
                            toastr.options = {
                                "closeButton": false,
                                "debug": false,
                                "newestOnTop": false,
                                "progressBar": true,
                                "positionClass": "toastr-top-right",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            if (response.data === 'Error')
                                toastr.error('[-] Please put a small points number.');
                            else if (response.data === 'Null')
                                toastr.warning('[!] Please put a number, it\'s empty.');
                            else if (response.data === 'Zero')
                                toastr.error('[-] Please put a number greater than 0.');
                            else if (response.data === -1)
                                toastr.error('[-] Please Don\'t duplicate the question.');
                            else {
                                $('#progress_bar').css('width', response.data + '%');
                                $('#progress_bar').html('remaining points= '+ response.data)
                                toastr.success('[+] Added Successfully.');
                                insert_quiz();
                            }
                        })
                        .catch(function(error) {
                            // handle error
                            console.log(error);
                        });
                })

                function insert_quiz() {

                    let question_id = $(this).attr('question-id')
                    var url = "{{ route('ajax.postQuizQuestionDetails', [':coffid', ':quiz_id', ':question_id']) }}";
                    url = url.replace(':coffid', {{ $coffid }});
                    url = url.replace(':quiz_id', document.getElementById('quiz_id').value);
                    url = url.replace(':question_id', question_id);
                    // console.log(document.getElementsByClassName('form-select question')[0].value);

                    axios.get(url)
                        .then(function(response) {
                            $('#question_table tbody').empty();
                            append_quiz();
                        })
                        .catch(function(error) {
                            // handle error
                            console.log(error);
                        });
                }

                function append_quiz() {

                    var url = "{{ route('ajax.getQuizQuestionDetails', [':coffid', ':quiz_id']) }}";
                    url = url.replace(':coffid', {{ $coffid }});
                    url = url.replace(':quiz_id', document.getElementById('quiz_id').value);
                    // console.log(document.getElementsByClassName('form-select question')[0].value);

                    axios.get(url)
                        .then(function(response) {
                            console.log(response.data);

                            for (var i = 0; i < response.data.length; i++) {
                                var question_id_value = response.data[i]['question_id'];
                                var cid = {{ $cid }}
                                var name = response.data[i]['name'];
                                var category_name = response.data[i]['category_name'];
                                var question_type = response.data[i]['questiontype'];
                                var points = response.data[i]['points'];

                                var url_route = "{{ route('teacher.question.show', [':cid', ':question_id']) }}";
                                url_route = url_route.replace(':question_id', question_id_value);
                                url_route = url_route.replace(':cid', cid);

                                // if (response.data[i]['name'] === undefined)
                                //     $('#question_table tbody').append('<tr> <input type="hidden" value="' +
                                //         question_id_value + '"> <td class="id text-center"> ' + (i + 1) +
                                //         ' </td> <td class="title text-center"> ------------ </td> <td class="category text-center">' +
                                //         category_name + '</td><td class="questiontype text-center">' +
                                //         question_type + '</td><td class="points text-center">' + points +
                                //         '</td><td class="text-center"><a href="javascript:;" onclick="deleteRow(event)" class="btn btn-light-danger">Delete</a></td><td class="text-center"><a href="' +
                                //         url_route +
                                //         '" onclick="" class="btn btn-light-success">Preview</a></td></tr>');
                                // else
                                    $('#question_table tbody').append('<tr> <input type="hidden" value="' +
                                        question_id_value + '"> <td class="id text-center"> ' + (i + 1) +
                                        ' </td><td class="category text-center">' + category_name +
                                        '</td><td class="questiontype text-center">' + question_type +
                                        '</td><td class="points text-center">' + points +
                                        '</td><td class="text-center"><a href="javascript:;" onclick="deleteRow(event)" class="btn btn-light-danger">Delete</a></td><td class="text-center"><a href="' +
                                        url_route +
                                        '" onclick="" class="btn btn-light-success">Preview</a></td></tr>');
                                $('#progress_bar').css('width', response.data + '%');
                                // $('#progress_bar').html('remaining points= '+ response.data)

                            }
                        })
                        .catch(function(error) {
                            // handle error
                            console.log(error);
                        });
                }

                //     function save_question() {
                //     // console.log(url);
                //     var url = "{{ route('ajax.postQuestionsWithPoints', [':coffid', ':quiz_id']) }}";
                //     url = url.replace(':coffid', {{ $coffid }});
                //     url = url.replace(':quiz_id', document.getElementById('quiz_id').value);
                //     axios.post(url, {
                //             question_id: document.getElementsByClassName('form-select question')[0].value,
                //             points: document.getElementsByClassName('form-control mb-2 mb-md-0')[0].value,
                //         }).then(function(response) {
                //             // console.log(response);
                //             toastr.options = {
                //                 "closeButton": false,
                //                 "debug": false,
                //                 "newestOnTop": false,
                //                 "progressBar": true,
                //                 "positionClass": "toastr-top-right",
                //                 "preventDuplicates": false,
                //                 "onclick": null,
                //                 "showDuration": "300",
                //                 "hideDuration": "1000",
                //                 "timeOut": "5000",
                //                 "extendedTimeOut": "1000",
                //                 "showEasing": "swing",
                //                 "hideEasing": "linear",
                //                 "showMethod": "fadeIn",
                //                 "hideMethod": "fadeOut"
                //             };
                //             if (response.data === 'Error')
                //                 toastr.error('[-] Please put a small points number.');
                //             else if (response.data === 'Null')
                //                 toastr.warning('[!] Please put a number, it\'s empty.');
                //             else if (response.data === 'Zero')
                //                 toastr.error('[-] Please put a number greater than 0.');
                //             else {
                //                 $('#progress_bar').css('width', response.data + '%');
                //                 $('#progress_bar').html('remaining points= '+ response.data)
                //                 toastr.success('[+] Added Successfully.');
                //                 insert_quiz();
                //             }
                //         })
                //         .catch(function(error) {
                //             // handle error
                //             console.log(error);
                //         });
                // }

                function return_points() {
                    // var question_id = document.getElementsByClassName('form-select question')[0].value;
                    // dataValue = 'question_id=' + question_id;

                    var url = "{{ route('ajax.getQuizRemainderPoints', [':coffid', ':quiz_id']) }}";
                    url = url.replace(':coffid', {{ $coffid }});
                    url = url.replace(':quiz_id', document.getElementById('quiz_id').value);
                    // console.log(document.getElementsByClassName('form-select question')[0].value);

                    axios.get(url)
                    .then(function(response) {
                            // console.log(response);
                            $('#progress_bar').css('width', response.data + '%');

                        })
                        .catch(function(error) {
                            // handle error
                            console.log(error);
                        });
                }
            });


            function deleteRow(event) {
                var trElement = event.target.parentElement.parentElement;

                var question_id = trElement.childNodes[1].value;
                dataValue = 'question_id=' + question_id;
                // console.log(dataValue);

                var url = "{{ route('ajax.deleteQuizQuestion', [':coffid', ':quiz_id']) }}";
                url = url.replace(':coffid', {{ $coffid }});
                url = url.replace(':quiz_id', document.getElementById('quiz_id').value);
                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: dataValue,
                    }).then(function(response) {
                        console.log(response.data);
                        trElement.remove();
                        $('question_table tbody').empty();
                        toastr.options = {
                            "closeButton": false,
                            "debug": false,
                            "newestOnTop": false,
                            "progressBar": true,
                            "positionClass": "toastr-top-right",
                            "preventDuplicates": false,
                            "onclick": null,
                            "showDuration": "300",
                            "hideDuration": "1000",
                            "timeOut": "5000",
                            "extendedTimeOut": "1000",
                            "showEasing": "swing",
                            "hideEasing": "linear",
                            "showMethod": "fadeIn",
                            "hideMethod": "fadeOut"
                        };
                        toastr.success('Deleted Successfully');
                    })
                    .catch(function(error) {
                        // handle error
                        console.log(error);
                    });
            }
        </script>
        {{-- quiz question --}}
        <script>
            // Save ajax
            function finish() {

                var url = "{{ route('ajax.finishQuizQuestions', [':coffid', ':quiz_id']) }}";
                url = url.replace(':quiz_id', document.getElementById('quiz_id').value);
                url = url.replace(':coffid', {{ $coffid }});

                // console.log(document.getElementsByClassName('form-select question')[0].value);

                axios.get(url)
                    .then(function(response) {
                        console.log(response.data);
                        if (response.data == 0)
                            toastr.error('[-] Error, Complete adding questions.');
                        else
                            toastr.success('[+] Completed Successfully.');
                    })
                    .catch(function(error) {
                        // handle error
                        console.log(error);
                    });
            }
            return_points();
            append_quiz();
        </script>

        {{-- select category filter --}}
        <script>
            $(document).ready(function() {
                jQuery('body').on('change', '.question_category', function() {
                    const question_category_id = $(this).val();
                    const coffid = {{$coffid}};
                    let url ="{{ route('ajax.getQuestionTypesBaseOnQuestionCategory',[':coffid',':question_category_id']) }}";
                    url = url.replace(':question_category_id', question_category_id);
                    url = url.replace(':coffid', coffid);
                    $('.question_type').append(`<option value="0" disabled selected>Processing...</option>`);
                    axios.get(url)
                        .then(function(response) {
                            $('.question_type').empty();
                            // $('.question_type').append(
                            //     `<option value="0" disabled selected>Select Question Type</option>`
                            // );
                            response.data.map((item) => {

                                $('.question_type').append(
                                    '<option value="' + item.questiontype + '">' +
                                        item.questiontype +
                                    '</option>'
                                );

                            })

                        })
                        .catch(function(error) {
                            // Request made and server responded
                            // The request was made but no response was received
                            // Something happened in setting up the request that triggered an Error
                            toastr.options = {
                                "closeButton": false,
                                "debug": false,
                                "newestOnTop": false,
                                "progressBar": true,
                                "positionClass": "toastr-top-right",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.error('Something went wrong');
                        });
                });

            })
        </script>

        {{-- Form repeater --}}
        <script>
            $('#kt_docs_repeater_basic').repeater({
                initEmpty: false,

                defaultValues: {
                    'text-input': 'foo'
                },

                show: function() {
                    $(this).slideDown();
                },

                hide: function(deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            });
        </script>

        @if (!$success_msg)
            <script>
                if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
                    window.location.href =
                        "{{ route('teacher.course.index', [collect($courses)->firstWhere('coffid', $coffid)->cname, $coffid]) }}";
                }
            </script>
        @endif
    @endsection