@extends('dashboard.layouts.master')
@section('content')
    <div class="card">
        <div class="card-header">
            <h3>{{@$create}}</h3>
        </div>
        <div class="card-body pb-0">
            <form class="form" id="question_form" method="post" action="{{route(@$route.'.store',$level_id)}}" enctype="multipart/form-data">
                @csrf

                <input type="hidden" name="level_id" value="{{$level_id}}">
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label class="form-label">إختر نوع السؤال</label>
                        <select class="select2-custom question_type" name="type">
                            <option value="choice">إختر</option>
                            <option value="paragraph">مقالي</option>

                        </select>
                        @error('skills.*.skill')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    <div class="col-md-6 form-group">
                        <label class="form-label">المهارات</label>
                        <select class="select2-custom" multiple name="skills[]">
                            @foreach( $skills as $skill)
                                <option value="{{$skill->id}}">{{$skill->title}}</option>
                            @endforeach
                        </select>
                        @error('skills.*.skill')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    <div class="p_typ d-none">
                        <div class="col-md-12 form-group">
                            <label class="form-label">السؤال المقالي</label>
                            <input name="p_question" class="form-control" value="{{old('p_question')}}" type="text">
                            {{--                            <textarea name="p_question" cols="177" rows="10">{{old('p_question')}}</textarea>--}}
                        </div>

                        <div class="col-md-12 form-group">
                            <label class="form-label"> إجابه السؤال المقالي</label>
                            <input name="p_question_answer" class="form-control" value="{{old('p_question_answer')}}" type="text">
                            {{--                            <textarea name="p_question" cols="177" rows="10">{{old('p_question')}}</textarea>--}}
                        </div>
                    </div>
                </div>
                <div class="choice_type row">
                    <div class="col-md-12 form-group">
                        <label class="form-label"> السؤال الاختياري</label>
                        <input name="question" class="form-control" value="{{old('question')}}" type="text">
                        @error('question')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    <div class="col-md-12 form-group">
                        <div class="row">
                            <div class="col-md-2">
                                <label class="form-label">عدد الإختيارات</label>
                                <input class="form-control  number_of_choices" readonly name="number_of_choices"
                                       value="{{old('number_of_choices',1)}}" type="number" placeholder="">
                                @error('number_of_choices')
                                <span class="text-danger">{{$message}}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <a href="javascript:;" class="btn btn-primary btn-icon add_new_choice mt-4">
                                    <i class="fa fa-plus"></i> إضافه خيار </a>

                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        @if(old('number_of_choices')>0)
                            @for($x =1;$x<=old('number_of_choices');$x++)
                                <div class="row exist_choice form-group">
                                    <div class="col-md-6">
                                        <label class="form-label">الإختيار</label>
                                        <input class="choice form-control" name="choices[{{$x}}][choice]"
                                               value="{{old('choices.'.$x .'.choice')}}" type="text" placeholder="">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="radio radio-primary m-t-30">
                                            <input class="choice_selected form-check-input" id="{{$x}}" value="{{$x}}"
                                                   {{old('correct_choice')== $x ? 'checked':''}} name="correct_choice" type="radio"
                                                   placeholder="">
                                            <label class="form-check-label" for="{{$x}}">الإختيار الصحيح</label>
                                            @if($x !=1)
                                                <a href="" class="text-danger delete_choice m-l-30"><i class="fa fa-close"></i> حذف </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endfor
                        @else
                            <div class="row exist_choice form-group">
                                <div class="col-md-6">
                                    <label class="form-label">الإختيار</label>
                                    <input class="choice form-control" name="choices[1][choice]" value="" type="text" placeholder="">
                                </div>
                                <div class="col-md-6">
                                    <div class="radio radio-primary m-t-30">
                                        <input class="choice_selected form-check-input" id="1" checked value="1" name="correct_choice" type="radio"
                                               placeholder="">
                                        <label class="form-check-label" for="1">الإختيار الصحيح</label>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="choices">

                        </div>


                    </div>
                </div>

                <div class="p_type">
                </div>


                <div class="row">
                    <div class="col-md-6 form-group">
                        <label class="form-label">الرساله في حاله الاجابه صحيحه</label>
                        <textarea name="correct_answer" cols="177" rows="10"></textarea>
                    </div>

                    <div class="col-md-6 form-group">
                        <label class="form-label">الرساله في حاله الاجابه خطأ</label>
                        <textarea name="wrong_answer" cols="177" rows="10"></textarea>
                    </div>


                    <div class="col-md-6 form-group">
                        <label class="form-label">نوع ملف الميديا</label>
                        <select class="select2-custom" name="media_type">
                            <option value="no_media">بلا ميديا</option>
                            <option selected value="photo">صوره</option>
                            <option value="video">فيديو</option>

                        </select>
                        @error('media_type')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>

                    <div class="col-md-6 form-group flex-upload">
                        <label class="form-label">إرفاق ملف</label>
                        <input type="file" accept="image/*" class="photo form-control" name="photo"/>
                        {{--  <img class="image_preview" src="{{getFile()}}" style="width: 100px ; height: 100px" alt="">--}}
                        @error('photo')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>
                </div>

                <div class="progress d-none">
                    <div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
                </div>
                <div class="card-footer">
                    <button class="btn btn-primary btn-air-primary btn-icon" type="submit">
                        <i class="fa fa-save"></i>
                        حفظ
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $('.question_type').on('change', function () {
            let type = $(this).val();
            if (type == 'choice') {
                $('.p_typ').addClass('d-none');
                $('.choice_type').removeClass('d-none');
            } else {
                $('.p_typ').removeClass('d-none');
                $('.choice_type').addClass('d-none');
            }

        });
    </script>
    <script>
        let x = $('.choice').length

        $('.add_new_choice').on('click', function (e) {
            e.preventDefault();
            x += 1;
            let html = `
                      <div class="row form-group exist_choice">
                                <div class="col-md-6">
                                    <label class="form-label">الإختيار</label>
                                    <input class="choice form-control" name="choices[${x}][choice]" value="" type="text" placeholder="">
                                </div>
                                <div class="col-md-6">
                                    <div class="radio radio-primary m-t-30">
                                        <input class="choice_selected form-check-input" id="${x}" checked value="${x}" name="correct_choice" type="radio"
                                        placeholder="">
                                        <label class="form-check-label" for="${x}">الإختيار الصحيح</label>
                                        <a href="" class="text-danger delete_choice m-l-30"><i class="fa fa-close"></i> حذف </a>
                                    </div>
                                <div>
                        </div>
                        `;
            $('.choices').append(html);

            $('.number_of_choices').val(x);

        });

        $(document).on('click', '.delete_choice', function (e) {
            e.preventDefault();
            $(this).parents('.exist_choice').remove()
            $('.number_of_choices').val($('.choice').length);
            x--;

            if ($('.choice_selected:checked').length == 0) {
                $('.choice_selected:first').prop('checked', true);
            }

        });
    </script>

    <script>
        $('.form').on('submit', function (e) {
            e.preventDefault();

            for (instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }
            let form_data = new FormData($(this)[0]);
            let url = $(this).attr('action');
            var correct_answer = $('.choice_selected:checked').val()
            var data = [];

            $('.choice').map(function (key, value) {
                var current_answer_index = $(value).parents('.exist_choice').find('.choice_selected').val();
                data.push(
                    {
                        'choice': $(value).val(),
                        'is_correct': current_answer_index == correct_answer ? true : false,
                    }
                )
            })


            form_data.append('choices', JSON.stringify(data));
            $.ajax({
                type: 'POST',
                url: url,
                processData: false,
                contentType: false,
                cache: false,
                data: form_data,

                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = ((evt.loaded / evt.total) * 100);
                            $(".progress-bar").width(Math.ceil(percentComplete) + '%');
                            $(".progress-bar").html(Math.ceil(percentComplete) + '%');
                        }
                    }, false);
                    return xhr;
                },
                beforeSend: function () {
                    $('.progress').removeClass('d-none');
                },

                success: function (response) {
                    $('.spinner_icon').remove()
                    level_id = response.level_id;

                    let url = '{{route('exam-questions.index',':level_id')}}';
                    url = url.replace(':level_id', level_id);

                    Toast.fire({
                        icon: 'success',
                        title: 'تم حفظ البيانات بنجاح'
                    })
                    window.location.href = url;
                },
                error: function (response) {
                    $('.spinner_icon').remove()
                    $.each(response.responseJSON.errors, function (key, value) {
                        Toast.fire({
                            icon: 'warning',
                            title: value
                        })
                    });
                    $('button[type="submit"]').attr('disabled', false);
                    $('.progress').addClass('d-none');
                    $('.spinner_icon').remove()
                    $('.progress .progress-bar').css('width', 0 + '%').innerHTML('0%');
                }
            })


        });

        $('select[name="media_type"]').on('change', function () {
            let value = $(this).val();
            if (value == 'photo') {
                $('.flex-upload').removeClass('d-none');
                $('input[name="photo"]').attr('accept', 'image/*');
            } else if (value == 'video') {
                $('.flex-upload').removeClass('d-none');
                $('input[name="photo"]').attr('accept', 'video/*');
            } else if (value == 'no_media') {
                $('.flex-upload').addClass('d-none');
                $('input[name="photo"]').val('');
            }
        })
    </script>

@endpush