{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title', 'GAS LMS | Edit MCQ Question')

{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['All Questions' => route('teacher.questionbank.show', [$course_id,$question->question_bank_id])]])
@endsection
{{-- Content --}}
@section('content')

@include('components._error')

    <div class="card shadow-sm">
        <!--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">Edit MCQ Question</span>
            </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::Form-->
            <form id="kt_docs_formvalidation_text" class="form" action="{{ route('teacher.mcqquestion.update',[$course_id,$question->id]) }}" method="post" autocomplete="on" enctype="multipart/form-data">
                @csrf

                <!--begin::Accordion-->
                <div class="accordion" id="kt_accordion_1">
                    {{-- General settings --}}
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="kt_accordion_1_header_1">
                            <button class="accordion-button fs-4 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_1" aria-expanded="true" aria-controls="kt_accordion_1_body_1">
                                Question general settings
                            </button>
                        </h2>
                        <div id="kt_accordion_1_body_1" class="accordion-collapse collapse show" aria-labelledby="kt_accordion_1_header_1" data-bs-parent="#kt_accordion_1">
                            <div class="accordion-body">
                                <!--begin::Input group-->
                                <div class="mb-10">
                                    <label class="required fw-semibold fs-6 mb-2" for="category">Select category</label>
                                    <select class="form-select" data-control="select2" id="category" required name="question_category_id" data-placeholder="Select category">
                                        <option></option>
                                        @foreach ($categories as $category)
                                            <option value="{{$category->id}}" {{$question->question_category_id == $category->id ? "selected":""}}>
                                                {{$category->category_name}}
                                                @foreach ($category->children as $subcategory)
                                                    <option value="{{$subcategory->id}}" {{$question->question_category_id == $subcategory->id ? "selected":""}}>
                                                    &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}}" {{$question->question_category_id == $item->id ? "selected":""}}>
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{$item->category_name}}
                                                            </option>
                                                        @endforeach
                                                        </option>
                                                    @endforeach
                                                    </option>
                                                @endforeach
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                               <!--begin::Input group-->
                                <div class="fv-row mb-10">
                                    <!--begin::Label-->
                                    <label class="required fw-semibold fs-6 mb-2">Title</label>
                                    <!--end::Label-->

                                    <!--begin::Input-->
                                    <input type="text" name="title" value="{{$question->mcqQuestion->name}}" class="form-control form-control-solid mb-3 mb-lg-0"
                                        placeholder="Put question title here..." value="" />
                                    <!--end::Input-->
                                </div>

                                <div class="fv-row mb-10">
                                    <!--begin::Label-->
                                    <label class="fw-semibold required fs-6 mb-2" for="desc">Description</label>
                                    <!--end::Label-->

                                    <!--begin::Input-->
                                    <textarea id="desc"  name="description"  class="tox-target kt_docs_tinymce_hidden" placeholder="Put the question body here...">
                                        {{$question->mcqQuestion->questiontext}}
                                    </textarea>
                                    <!--end::Input-->

                                </div>

                                <div class="fv-row mb-10">
                                    <!--begin::Label-->
                                    <label class="fw-semibold fs-6 mb-2">Hint</label>
                                    <!--end::Label-->

                                    <!--begin::Input-->
                                    <input type="text" value="{{$question->mcqQuestion->hint}}" name="hint" class="form-control form-control-solid mb-3 mb-lg-0"
                                        placeholder="Put the hint here..."/>
                                    <!--end::Input-->
                                </div>
                                <div class="form-check form-check-custom form-check-solid">
                                    <input class="form-check-input mb-10" name="is_active" type="checkbox" id="flexSwitchDefault" {{$question->is_active ? 'checked':''}}/>
                                    <label class="form-check-label mb-10" for="flexSwitchDefault">
                                        Active
                                    </label>
                                </div>
                                <!--end::Input group-->

                                {{-- File --}}
                                <div class="file-drop-area">
                                    <span class="fake-btn">Choose files</span>
                                    <span class="file-msg">or drag and drop files here</span>
                                    <input class="file-input" type="file" name="question_multimedia[]" multiple>
                                </div>
                               {{-- Tag --}}
                                <div>
                                    <label for="tag" class="fw-semibold fs-6 mb-2">Tag (Level)</label>
                                    <select class="form-select" data-control="select2" name="tag" id="tag">
                                        <option value="advanced" {{$question->mcqQuestion->tag == 'advanced' ? 'selected':''}}>advanced</option>
                                        <option value="basic" {{$question->mcqQuestion->tag == 'basic' ? 'selected':''}}>basic</option>
                                        <option value="intermediate" {{$question->mcqQuestion->tag == 'intermediate' ? 'selected':''}}>intermediate</option>
                                    </select>
                                </div>
                                <!--end::Input group-->
                            </div>
                        </div>
                    </div>
                    {{-- Choices settings --}}
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="kt_accordion_1_header_2">
                            <button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_2" aria-expanded="false" aria-controls="kt_accordion_1_body_2">
                                Choices settings
                            </button>
                        </h2>
                        <div id="kt_accordion_1_body_2" class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_2" data-bs-parent="#kt_accordion_1">
                            <div class="accordion-body">
                                <!--begin::Input group-->
                                {{-- Choice Type --}}
                                <div class="mt-5">
                                    <label for="choice_type" class="fw-semibold fs-6 mb-2">Choice Type</label>
                                    <select class="form-select" data-control="select2" name="choice_type" id="choice_type">
                                        <option value="1" {{$question->mcqQuestion->choice_type == 1 ? 'selected':''}}>Multiple Choices</option>
                                        <option value="2" {{$question->mcqQuestion->choice_type == 2 ? 'selected':''}}>Single Choice</option>
                                    </select>
                                </div>
                                {{-- Form repeater --}}
                                <!--begin::Repeater-->
                                <div id="kt_docs_repeater_basic" class="mt-8">
                                    <!--begin::Form group-->
                                    <div class="form-group">
                                        <div data-repeater-list="choices">
                                            @foreach ($choices as $choice)
                                            <div data-repeater-item>
                                                    <input type="hidden" name="choice_id" value="{{$choice->id}}">
                                                    <div class="form-group row mt-8">
                                                        <div class="col-md-4">
                                                            <label class="form-label required" for="choice_description">Choice:</label>
                                                            <input type="text" name="choice_description" value="{{$choice->description}}" id="choice_description" class="form-control mb-2 mb-md-0" placeholder="Enter a choice"/>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="form-label" for="choice_multimedia_id">Upload file:</label>
                                                            <input type="file" name="choice_multimedia_id" id="choice_multimedia_id" class="form-control mb-2 mb-md-0" placeholder="Enter contact number" />
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="form-check form-check-custom form-check-solid mt-2 mt-md-11">
                                                                <input class="form-check-input" name="is_answer" type="checkbox" {{$choice->is_answer ? 'checked':''}} />
                                                                <label class="form-check-label">
                                                                    Is answer
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <a href="javascript:;" data-repeater-delete class="btn btn-light-danger mt-5 mt-md-10">
                                                                <i class="la la-trash-o fs-2"></i>
                                                            </a>
                                                        </div>
                                                        <div class="col-md-12 mt-8">
                                                            <!--begin::Label-->
                                                            <label class="fw-semibold fs-6 mb-2" for="feedback">Feedback</label>
                                                            <!--end::Label-->

                                                            <!--begin::Input-->
                                                            <textarea name="feedback" id="feedback" class="form-control form-control-solid" value="{{ old('feedback')}}"  placeholder="insert a feedback..." rows="5">{{$choice->feedback}}</textarea>
                                                            <!--end::Input-->
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>

                                    </div>

                                    <!--end::Form group-->
                                    <!--begin::Form group-->
                                    <div class="form-group mt-5">
                                        <a href="javascript:;" data-repeater-create class="btn btn-light-primary">
                                            <i class="la la-plus"></i>Add Choice
                                        </a>
                                    </div>
                                    <!--end::Form group-->
                                </div>
                                <!--end::Repeater-->
                                <!--end::Input group-->
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Accordion-->
                <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::Card body-->
    </div>
@endsection
@section('js')
{{-- 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>
{{-- Textarea --}}
<script>
    tinymce.init({
        selector: ".kt_docs_tinymce_hidden", height : "280",
        menubar: false,
        toolbar: ["styleselect fontselect fontsizeselect",
            "undo redo | cut copy paste | bold italic | link image | alignleft aligncenter alignright alignjustify",
            "bullist numlist | outdent indent | blockquote subscript superscript | advlist | autolink | lists charmap | print preview |  code"],
        plugins : "advlist autolink link image lists charmap print preview code"
    });
</script>
@endsection