@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.update', $data['question']->id)}}" method="post" enctype="multipart/form-data">
                        @method('patch')
                        @csrf

                        {{-- <input type="hidden" name="answer_id" value="{{ $answer->id }}"> --}}

                        <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" id="type">
                                    <option
                                        value="{{$data['question']->type}}" >@lang('labels.'.$data['question']->type)</option>
                                </select>
                            </div>

                        </div>

                        <div class="row">

                            <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="{{ $data['question']->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)
                                        @if($data['question']->section_id == $section->id)
                                            <option value="{{$section->id}}" selected>{{$section->title}}</option>
                                        @else
                                            <option value="{{$section->id}}" >{{$section->title}}</option>
                                        @endif
                                    @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="section_id">
                                    <option  value="">@lang('labels.choose_lecture')</option>
                                    @foreach($data['lectures'] as $lecture)
                                        @if($data['question']->lecture_id == $lecture->id)
                                            <option value="{{$lecture->id}}" selected>{{$lecture->title}}</option>
                                        @else
                                            <option value="{{$lecture->id}}">{{$lecture->title}}</option>
                                        @endif
                                    @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">
                                    <input type="number" name="difficulty_level" value="{{$data['question']->difficulty_level}}" class="form-control" />
                                    <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>@lang('labels.hint')</label>
                                <input type="text" name="hint" class="form-control @error('hint') is-invalid @enderror"
                                       value="{{$data['question']->hint}}">
                                @error('hint')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group col-md-12">
                                <label>نموذج اجابة صورة</label>
                                @if($data['question']->hint_image_full_path)
                                    <img src="{{$data['question']->hint_image_full_path}}" style="max-height: 200px;width: 100%;">
                                @endif
                                <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>
                                @if($data['question']->image_full_path)
                                    <img src="{{$data['question']->image_full_path}}" style="max-height: 200px;">
                                @endif
                                <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" requiredd rows="5"> {{$data['question']->question}} </textarea>
                            </div>

                            <div class="form-group col-md-12 answers">
                                @if($data['question']->type == 'multi_choose')
                                    <a id="add-answer">
                                        <span class="mdi mdi-library-plus" style="font-size:24px"></span>
                                    </a>
                                    <label>@lang('labels.answers')</label>
                                    @foreach($data['question']->answers as $key=> $answer)
                                        <div class="row answer-field">
                                            <div class="form-group col-md-1 type">
                                                <input class="is_correct" type="radio" min="0"  name="answers[{{$key}}][is_correct]" onchange="handleChange(this)" style="width: 100%;height: 1.5em;" class="type"
                                                       value="1" @if($answer->is_correct) checked @endif>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <textarea type="text" min="0" name="answers[{{$key}}][answer]" class="form-control summernote_{{$key}} answer-input"
                                                       requiredd rows="3">{!! $answer->answer !!}</textarea>
                                            </div>
                                            <div class="form-group col-md-3">
                                                <input type="file" name="answers[{{$key}}][image]" class="@error('image') is-invalid @enderror">
                                            </div>

                                            <input type="hidden" name="answers[{{ $key }}][id]" value="{{ $answer->id }}">

                                            <div class="form-group col-md-2 " >
                                                <img src="{{$answer->image_full_path}}" style="max-height: 150px; max-width: 150px;">
                                            </div>
                                           <!--  <div class="form-group col-md-4 remaining" @if(!($data['question']->type === 'connecting' || $data['question']->type ===  'drag_and_drop')) style="display: none" @endif>
                                                <label>@lang('labels.remaining')</label>
                                                <input type="text" name="answers[{{ $key }}][remaining]" class="form-control"
                                                       value="{{ $answer->remaining }}">
                                            </div> -->

                                        </div>
                                    @endforeach
                                @elseif($data['question']->type == 'true_or_false')
                                    <div class="row">
                                            <div class="form-group col-md-1 type">
                                                <input type="radio" min="0"  name="answers[0][is_correct]" onchange="handleChange(this)" style="width: 100%;height: 1.5em;" class="type"
                                                       value="0" @if($data['question']->correct_answer == 'true') checked @endif>
                                            </div>
                                            <div class="form-group col-md-4">
                                                <input type="text" min="0" name="answers[0][answer]" class="form-control"
                                                       value="@lang('labels.correct') " readonly>
                                            </div>
                                    </div>
                                    <div class="row">
                                            <div class="form-group col-md-1 type">
                                                <input type="radio" min="0"  name="answers[1][is_correct]" onchange="handleChange(this)" style="width: 100%;height: 1.5em;" class="type"
                                                       value="1" @if($data['question']->correct_answer == 'false') checked @endif>
                                            </div>
                                            <div class="form-group col-md-4">
                                                <input type="text" min="0" name="answers[1][answer]" class="form-control"
                                                       value=" @lang('labels.wrong')" readonly>
                                            </div>
                                    </div>
                                @elseif($data['question']->type == 'essay')
                                    <div class="row" style="display:none;">
                                            <div class="form-group col-md-1 type">
                                                <input type="radio" min="0"  name="answers[0][is_correct]" onchange="handleChange(this)" style="width: 100%;height: 1.5em;" class="type"
                                                       value="1" checked>
                                            </div>
                                            <div class="form-group col-md-4">
                                                <input type="text" min="0" name="answers[0][answer]" class="form-control"
                                                       value="essay" readonly>
                                            </div>
                                    </div>
                                    
                                @endif
                            </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.edit')</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')

    <script>

        var answer_count = 0;
        var type = '{{$data['question']->type}}';

        $('#type').change(function (){
            type = $('#type option:selected').val();
            console.log(type)
            if(type === 'connecting' || type === 'drag_and_drop')
            {
                $('.add_answer').show();
                $('.remaining').show();
                $('.type').hide();

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

                $('.add_answer').hide();
                $('.answers').empty();
                add_answer('.answers');
                $('.remaining').hide();
                $('.type').hide();
            }
            else {
                $('.add_answer').show();
                $('.remaining').hide();
                $('.type').show();
            }
        });



        function add_answer(answer_div) {
            var type = '{{$data['question']->type}}';
            console.log(type);
            var grade ='';
            var remining ='';
            answer_count = $('.answer-field').length;
            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
                    $(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"
                                    requiredd 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+`" requiredd read-only>
                        </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+`" requiredd 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
        // });

        // @foreach($data['question']->answers as $key=> $answer)
        //     $('.summernote_{{$key}}').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
        //     });
        // @endforeach
    </script>
@endsection