{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title', 'GAS LMS | Edit Match 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 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.update', [$course_id, $question->id]) }}" method="post"
                autocomplete="on" enctype="multipart/form-data">
                <input type="hidden" value="{{ $question->question_bank_id }}" name="question_bank_id">
                @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->matchQuestion->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->matchQuestion->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->matchQuestion->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->matchQuestion->tag == 'advanced' ? 'selected' : '' }}>advanced
                                        </option>
                                        <option value="basic"
                                            {{ $question->matchQuestion->tag == 'basic' ? 'selected' : '' }}>basic</option>
                                        <option value="intermediate"
                                            {{ $question->matchQuestion->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">
                                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">
                                            @foreach ($left_side as $left_item)
                                            <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"
                                                                value="{{ $left_item->description }}"
                                                                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">
                                                                    @foreach ($rl as $rl_item)
                                                                        @foreach ($right_side as $right_item)
                                                                            @if ($rl_item->match_question_leftside_id == $left_item->id and
                                                                                $rl_item->match_question_rightside_id == $right_item->id)
                                                                                <div data-repeater-item>
                                                                                    <label
                                                                                        class="form-label">Right:</label>
                                                                                    <div class="input-group pb-4">
                                                                                        <input type="text"
                                                                                            value="{{ $right_item->description }}"
                                                                                            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>
                                                                            @endif
                                                                        @endforeach
                                                                    @endforeach
                                                                </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>
                                                @endforeach
                                        </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">
                            Update
                        </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