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

                <input type="hidden" name="id" value="{{$question->id}}">
                <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 {{$question->type =='choice'?'selected':''}} value="choice">إختر</option>
                            <option {{$question->type =='paragraph'?'selected':''}} 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 {{in_array($skill->id,$question->skills->pluck('id')->toArray()) ? 'selected':''}} value="{{$skill->id}}">{{$skill->title}}</option>
                            @endforeach
                        </select>
                        @error('skills.*.skill')
                        <span class="text-danger">{{$message}}</span>
                        @enderror
                    </div>


                    <div class="p_typ {{$question->type =='paragraph' ? '':'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',$question->question)}}" type="text">
                            {{--                            <textarea name="p_question" cols="177" rows="10">{{old('p_question',$question->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',$question->p_question_answer)}}" type="text">
                            {{--                            <textarea name="p_question" cols="177" rows="10">{{old('p_question')}}</textarea>--}}
                        </div>
                    </div>
                </div>


                <div class="row choice_type {{$question->type =='choice' ? '':'d-none'}}">
                    <div class="col-md-12 form-group">
                        <label class="form-label"> السؤال الاختياري </label>
                        <input name="question" class="form-control" type="text" value="{{old('question',$question->question)}}">
                        @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',$question->number_of_choices)}}" 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 add_new_choice mt-4"><i class="fa fa-plus"></i>إضافه خيار </a>

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


                    <div class="col-md-12">
                        @foreach($question->choices as $index => $choice)
                            <div class="row form-group exist_choice ">
                                <div class="col-md-6">
                                    <label class="form-label">الإختيار</label>
                                    <input class="choice form-control" name="choice" id="{{$choice->id}}" value="{{$choice->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="{{$index+1}}" value="{{$index+1}}"
                                               {{$choice->is_correct ? 'checked':''}} name="correct_choice" type="radio" placeholder="">
                                        <label class="form-check-label" for="{{$index+1}}">الإختيار الصحيح</label>
                                        <a href="" class="text-danger delete_choice m-l-30" id="{{$choice->id}}"><i class="fa fa-close"></i> حذف </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                        <div class="choices">

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


                <div class="row">
                    <div class="col-md-6 form-group">
                        <label class="form-label">الرساله في حاله الاجابه صحيحه</label>
                        <textarea name="correct_answer" cols="177" rows="10">{{old('correct_answer',$question->correct_answer)}}</textarea>
                    </div>

                    <div class="col-md-6 form-group">
                        <label class="form-label">الرساله في حاله الاجابه خطأ</label>
                        <textarea name="wrong_answer" cols="177" rows="10">{{old('wrong_answer',$question->wrong_answer)}}</textarea>
                    </div>

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

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

                    <div class="col-md-6 form-group flex-upload {{$question->media_type == 'no_media' ?'d-none':''}}">
                        <label class="form-label">إرفاق ملف</label>
                        <input type="file" accept=" {{$question->media_type=='photo' ? 'image/*':'video/*'}}  " 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>
                    @if($question->media_type  !='no_media')
                        <a target="_blank" href="{{getFile($question->photo)}}">عرض الملف</a>
                    @endif
                </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;
        let ids = 10000000;

        $('.add_new_choice').on('click', function (e) {
            e.preventDefault();
            x += 1;
            ids++;
            let html = `
                      <div class="row form-group exist_choice">
                                <div class="col-md-6">
                                    <label class="form-label">الإختيار</label>
                                    <input class="choice" id="${ids}" name="${ids}" 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}" ${x == 1 ? '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();
            let id = $(this).attr('id');
            let url = '{{route('exam-questions.deleteChoice',':id')}}';
            url = url.replace(':id', id)
            var delete_btn = $(this).parents('.exist_choice');

            Swal.fire({
                title: 'هل أنت متأكد ؟',
                text: "هل تريد الإستمرار ؟",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'نعم , حذف!',
                cancelButtonText: 'رجوع'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "delete",
                        url: url,
                        data: {
                            '_token': '{{csrf_token()}}',
                            /*'id': id*/
                        },
                        success: function () {
                            Swal.fire(
                                'تم الحذف !',
                                'تم الحذف بنجاح',
                                'success'
                            );

                            delete_btn.remove();
                            $('.datatable').DataTable().draw();
                            $('.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(
                    {
                        'id': $(value).attr('id') ?? null,
                        '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