@extends('dashboard.layouts.master')

@section('css')
    <link rel="stylesheet" href="{{asset('dashboard//plugins/summernote/summernote-bs4.css')}}">
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">{{trans('labels.questions')}}</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item active">{{trans('labels.questions')}}</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{route('admin.questions.store')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('post')

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">@lang('labels.type')</label>
                            <div class="col-sm-10">
                                <select name="type" class="form-control select2 @error('degree') is-invalid @enderror" id="type">
                                    <option  value="">@lang('labels.choose_type')</option>
                                    <option
                                        value="multi_choose" @if(old('degree') === 'multi_choose') selected @endif >@lang('labels.multi_choose')</option>
                                    <option
                                        value="true_or_false" @if(old('degree') === 'true_or_false') selected @endif >@lang('labels.true_or_false')</option>
                                    <option 
                                        value="essay" @if (old('degree') === 'essay') selected @endif>سؤال مقالي</option>
                                    <!-- <option
                                        value="connecting" @if(old('degree') === 'connecting') selected @endif >@lang('labels.connecting')</option>
                                    <option
                                        value="drag_and_drop" @if(old('degree') === 'drag_and_drop') selected @endif >@lang('labels.drag_and_drop')</option> -->
                                    <!-- <option
                                        value="missing_words" @if(old('degree') === 'missing_words') selected @endif >@lang('labels.missing_words')</option> -->
                                </select>
                            </div>
                            @error('type')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="row" id="question_body" style="display: none;">

                            <div class="form-group col-md-4">
                                <label>@lang('labels.degree')</label>
                                <input type="number" min="0" name="degree" class="form-control @error('degree') is-invalid @enderror"
                                       value="{{ old('degree') }}" required>
                                @error('degree')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="form-group col-md-4">
                                <label>@lang('labels.section')</label>
                                <select name="section_id" class="form-control select2 @error('degree') is-invalid @enderror" id="section_id">
                                    <option  value="">@lang('labels.choose_section')</option>
                                    @foreach($data['sections'] as $section)
                                        <option value="{{$section->id}}">{{$section->title}}</option>
                                    @endforeach
                                </select>
                                @error('section_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="form-group col-md-4">
                                <label>@lang('labels.lecture')</label>
                                <select name="lecture_id" class="form-control select2 @error('degree') is-invalid @enderror" id="lecture_id" required>
                                    <option  value="">@lang('labels.choose_lecture')</option>
                                    @foreach($data['lectures'] as $lecture)
                                        <option value="{{$lecture->id}}">{{$lecture->title}}</option>
                                    @endforeach
                                </select>
                                @error('lecture_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="form-group  col-md-4">
                                <label>@lang('labels.difficulty_level')</label>
                                <div id="colorpicker-color-pattern" data-format="alias" class="input-group colorpicker-component">
                                    <select class="form-control" name="difficulty_level">
                                        <option value="50">سهل</option>
                                        <option value="70">متوسط</option>
                                        <option value="90">صعب</option>
                                    </select>
                                    <!--<input type="number" />-->
                                    <!--<span class="input-group-append add-on">-->
                                    <!--    <button class="btn btn-light" type="button">-->
                                    <!--        %-->
                                    <!--    </button>-->
                                    <!--</span>-->
                                </div>
                            </div>

                            <div class="form-group  col-md-8">
                                <label>الاجابة النموذجية</label>
                                <input type="text" name="hint" class="form-control @error('hint') is-invalid @enderror"
                                       value="{{ old('hint') }}" >
                                @error('hint')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group col-md-12">
                                <label>نموذج اجابة صورة</label>
                                <input type="file" name="hint_image" class="form-control @error('hint_image') is-invalid @enderror">
                                @error('hint_image')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="form-group col-md-12">
                                <hr>
                                <label>@lang('labels.image')</label>
                                <input type="file" name="image" class="form-control @error('image') is-invalid @enderror">
                                @error('image')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="form-group col-md-12">

                                <label>@lang('labels.question')</label>
                                <textarea type="text" name="question" class="form-control summernote @error('question') is-invalid @enderror" rows="5">{{ old('question') }}</textarea>
                                @error('question')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>

                            <div class="form-group col-md-12 answers">
                                <hr>
                            </div>

                            <!-- <div class="form-group col-md-12 add_answer">
                                <button type="button" class="btn btn-primary"  onclick="add_answer('.answers')"><i
                                        class="fa fa-plus"></i> @lang('labels.add_answer')</button>
                            </div> -->

                            <div class="form-group col-md-12 ">
                                <button type="submit" class="btn btn-primary"> @lang('labels.create')</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')
    <script>
        var answer_count = 0;

        $('#type').change(function (){

            $('#question_body').hide();
            $('.answers').empty();
            answer_count = $('.answer-field').length;

            if(this.value === 'connecting' || this.value === 'drag_and_drop')
            {
                $('.add_answer').show();
                $('.remaining').show();
                $('.type').hide();

            }
            else if(this.value === 'missing_words'){

                $('.add_answer').hide();
                $('.answers').empty();
                add_answer('.answers');
                $('.remaining').hide();
                $('.type').hide();
            }
            else if(this.value === 'multi_choose'){

                $('#question_body').show();
                $('.type').show();
                for (var i = 2; i > 0; i--) {
                    add_answer('.answers');
                }
            }
            else if(this.value === 'true_or_false'){

                $('#question_body').show();
                $('.type').show();
                for (var i = 2; i > 0; i--) {
                    add_answer('.answers');
                }
            }
            else if(this.value === 'essay'){

                $('#question_body').show();
                $('.type').show();
                for (var i = 1; i > 0; i--) {
                    add_answer('.answers');
                }
            }
            else {
                $('.add_answer').show();
                $('.remaining').hide();
                $('.type').show();
            }
        });

        function add_answer(answer_div) {
            var type = $('#type').val();
            var grade ='';
            var remining ='';
            var selected = answer_count == 0 ? 'checked' : '';
            if(answer_count == 0){
                if(type == 'multi_choose'){
                    $(answer_div).append(`<a id="add-answer" href="#"><span class="mdi mdi-library-plus" style="font-size:24px"></span></a>
                        <label>@lang('labels.answers')</label>`);
                }else if(type == 'essay'){
                    // $(answer_div).append(`<label>@lang('labels.answers')</label>`);
                }else{
                    $(answer_div).append(`<label>@lang('labels.answers')</label>`);
                }
            }

            if(type === 'connecting' || type === 'drag_and_drop')
            {
                grade ="display: none";
                remining ='';

            }
            else {
                remining ="display: none";
                grade ='';
            }
            if(type == 'multi_choose'){
                 answer_count = $('.answer-field').length;
                let deleteClass = answer_count > 1 ? 'mdi mdi-delete-forever' : '';

                $(answer_div).append(`
                    <div class="row answer-field">
                        <div class="form-group col-md-1 type" style="`+grade+`">
                            <input class="is_correct" type="radio" min="0" onchange="handleChange(this)" name="answers[` + answer_count + `][is_correct]" id="type" style="width: 100%;height: 1.5em;" class="type"
                                   value="1" `+selected+`>
                        </div>
                        <div class="form-group col-md-6">
                            <textarea type="text" min="0" name="answers[` + answer_count + `][answer]" class="form-control summernote_`+answer_count+` answer-input"
                                     rows="3">{{ old('answer') }}</textarea>
                        </div>
                        <div class="form-group col-md-3">
                            <input type="file" name="answers[` + answer_count + `][image]" class="@error('image') is-invalid @enderror">
                        </div>
                        <div class="delete-it" style="padding: 15px;font-size: 26px;">
                            <a href="#"><span class="${deleteClass}" style="color:red;"></span><a>
                        </div>
                    </div>
                `);
                                
                // $('.summernote_'+answer_count).summernote({
                //     minHeight: null,             // set minimum height of editor
                //     maxHeight: null,             // set maximum height of editor
                //     focus: true                 // set focus to editable area after initializing summernote
                // });

            }
            else if(type == 'true_or_false'){

                if (answer_count == 1) {
                    var value = `@lang('labels.wrong')`;
                }else{
                    var value = `@lang('labels.correct')`;
                }

                $(answer_div).append(`
                    <div class="row answer-field">
                        <div class="form-group col-md-1 type" style="`+grade+`">
                            <input type="radio" min="0" onchange="handleChange(this)" name="answers[` + answer_count + `][is_correct]" id="type" style="width: 100%;height: 1.5em;" class="type"
                                   value="`+answer_count+`" `+selected+`>
                        </div>
                        <div class="form-group col-md-4">
                            <input type="text" min="0" name="answers[` + answer_count + `][answer]" class="form-control"
                                   value="`+value+`" read-only>
                        </div>
                    </div>
                `);

            }else if(type == 'essay') {

            $(answer_div).append(`
                    <div class="row" style="display:none">
                        <div class="form-group col-md-4">
                            <label>@lang('labels.answer')</label>
                            <input type="text" min="0" name="answers[` + answer_count + `][answer]" class="form-control"
                                   value="`+value+`"  read-only>
                        </div>

                        <div class="form-group col-md-3 type" style="`+grade+`">
                            <label>@lang('labels.right')</label>
                            <input type="radio" min="0" onchange="handleChange(this)" name="answers[` + answer_count + `][is_correct]" id="type" class="form-control type"
                                   value="1">
                        </div>

                        <div class="form-group col-md-4 remaining" style="`+remining+`">
                            <label>@lang('labels.remaining')</label>
                            <input type="string" min="0" name="answers[` + answer_count + `][remaining]" class="form-control"
                                   value="{{ old('remaining') }}">
                        </div>
                    </div>
                `);
            }else {

            $(answer_div).append(`
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label>@lang('labels.answer')</label>
                            <input type="text" min="0" name="answers[` + answer_count + `][answer]" class="form-control"
                                   value="`+value+`"  read-only>
                        </div>

                        <div class="form-group col-md-3 type" style="`+grade+`">
                            <label>@lang('labels.right')</label>
                            <input type="radio" min="0" onchange="handleChange(this)" name="answers[` + answer_count + `][is_correct]" id="type" class="form-control type"
                                   value="1">
                        </div>

                        <div class="form-group col-md-4 remaining" style="`+remining+`">
                            <label>@lang('labels.remaining')</label>
                            <input type="string" min="0" name="answers[` + answer_count + `][remaining]" class="form-control"
                                   value="{{ old('remaining') }}">
                        </div>
                    </div>
                `);
            }

            answer_count++;

        }

        $(document).on('click', '#add-answer', function(e){
            e.preventDefault();
            add_answer('.answers');
        });

        $(document).on('click', '.delete-it', function(e){
            e.preventDefault();
            $(this).parent().remove();

            recheckAnswers();
        });

        function recheckAnswers(){
            $('.answer-field').each(function(i,element){
                $(element).find('.is_correct').attr('name', `answers[${i}][is_correct]`);
                $(element).find('.answer-input').attr('name', `answers[${i}][answer]`);
            });
        }

        function handleChange(item){
            $('.type input').each(function (){
                $(this).prop( "checked", false );
            });
            $(item).prop( "checked", true );
        }
    </script>

    <script src="{{asset('dashboard/plugins/summernote/summernote-bs4.min.js')}}"></script>

    <script>
        // $('.summernote').summernote({
        //     minHeight: null,             // set minimum height of editor
        //     maxHeight: null,             // set maximum height of editor
        //     focus: true                 // set focus to editable area after initializing summernote
        // });
    </script>
@endsection