{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title', 'GAS LMS | Create Match Question')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Dashboard' => route('teacher.dashboard')]])
@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">Create Match 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.matchquestion.store',$course_id) }}"
                method="post" autocomplete="on" enctype="multipart/form-data">
                @csrf
                @if ($quiz_id)
                    <input type="hidden" name="question_points" value="{{$question_points}}">
                    <input type="hidden" name="quiz_id" value="{{$quiz_id}}">
                @endif
                <input type="hidden" name="question_bank_id" value="{{ $question_bank_id }}">
                <!--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"
                                        name="question_category_id" data-placeholder="Select category">
                                        <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>
                                </div>

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

                                    <!--begin::Input-->
                                    <input type="text" id="name" value="{{ old('name') }}" name="name"
                                        class="form-control form-control-solid mb-3 mb-lg-0"
                                        placeholder="Put question title here..." required />
                                    <!--end::Input-->
                                </div>
                                {{-- Describtion --}}
                                <div class="fv-row mb-10">
                                    <!--begin::Label-->
                                    <label class="fw-semibold 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...">
                                        {{ old('description') }}
                                    </textarea>
                                    <!--end::Input-->
                                </div>

                                {{-- is_active --}}
                                <div class="form-check form-check-custom form-check-solid">
                                    <input class="form-check-input mb-10" name="is_active" type="checkbox" value="1" id="flexSwitchDefault" {{$quiz_id ? 'disabled':''}} checked/>
                                    @if ($quiz_id)
                                        <input type="hidden" name="is_active" value="1">
                                    @endif
                                    <label class="form-check-label mb-10" for="flexSwitchDefault">
                                        Active
                                    </label>
                                </div>
                                {{-- end is_active --}}

                                {{-- Hint --}}
                                <div class="mb-10">
                                    <!--begin::Label-->
                                    <label class="fw-semibold fs-6 mb-2" for="hint">Hint</label>
                                    <!--end::Label-->

                                    <!--begin::Input-->
                                    <input type="text" name="hint" value="{{ old('hint') }}" id="hint"
                                        class="form-control form-control-solid mb-3 mb-lg-0"
                                        placeholder="Put the hint here..." value="" />
                                    <!--end::Input-->
                                </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">advanced</option>
                                        <option value="basic">basic</option>
                                        <option value="intermediate">intermediate</option>
                                    </select>
                                </div>
                                <!--end::Input group-->
                            </div>
                        </div>
                    </div>
                    <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">
                                Match 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-->

                                {{-- Form repeater --}}
                                <!--begin::Repeater-->
                                <div id="kt_docs_repeater_nested">
                                    <!--begin::Form group-->
                                    <div class="form-group">
                                        <div data-repeater-list="kt_docs_repeater_nested_outer">
                                            <div data-repeater-item>
                                                <div class="form-group row mb-6">
                                                    <div class="col-md-3">
                                                        <label class="form-label">Left:</label>
                                                        <input type="text" name='left_side' class="form-control mb-4 mb-md-0"
                                                            placeholder="Enter Left Match" />
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label class="form-label">Upload left file:</label>
                                                        <input type="file" name='left_side_multimedia' class="form-control mb-4 mb-md-0"/>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="inner-repeater">
                                                            <div data-repeater-list="kt_docs_repeater_nested_inner"
                                                                class="mb-6">
                                                                <div data-repeater-item>
                                                                    <label class="form-label">Right:</label>
                                                                    <div class="input-group pb-4">
                                                                        <input type="text" name='right_side' class="form-control"
                                                                            placeholder="Enter Right Match" />
                                                                        <button
                                                                            class="border border-secondary btn btn-icon btn-light-danger"
                                                                            data-repeater-delete type="button">
                                                                            <i class="la la-trash-o fs-4"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <button class="btn btn-sm btn-light-primary"
                                                                data-repeater-create type="button">
                                                                <i class="la la-plus"></i> Add Right
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <a href="javascript:;" data-repeater-delete
                                                            class="btn btn-sm btn-light-danger mt-3 mt-md-9">
                                                            <i class="la la-trash-o fs-3"></i>Delete Row
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end::Form group-->

                                    <!--begin::Form group-->
                                    <div class="form-group">
                                        <a href="javascript:;" data-repeater-create class="btn btn-light-primary">
                                            <i class="la la-plus"></i>Add Match
                                        </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">
                            Create
                        </span>
                    </button>
                    <!--end::Actions-->
                </div>
            </form>
            <!--end::Form-->
        </div>
        <!--end::Card body-->
    </div>
@endsection
@section('js')
    {{-- Form repeater --}}
    <script>
        $('#kt_docs_repeater_nested').repeater({
            repeaters: [{
                selector: '.inner-repeater',
                show: function () {
                    $(this).slideDown();
                },

                hide: function (deleteElement) {
                    $(this).slideUp(deleteElement);
                }
            }],

            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