@extends('dashboard.layouts.master')

@section('css')
<style type="text/css">
    .bg-easy{
        background-color: #F0ECE2 !important;
        /*border: 1px solid !important;*/
    }
    .bg-mid{
        background-color: #ACDBDF !important;
    }

    .bg-good{
        background-color: #69779B !important;
    }

    .text-black{
        color: #000000 !important;
    }
</style>

    <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.exam_form')}}</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item"><a href="{{route('admin.exams.index')}}">{{$data['form']->exam->type == 'home-work' ? trans('labels.home-work') : trans('labels.exams')}}</a></li>
            <li class="breadcrumb-item"><a href="{{route('admin.exams.edit', $data['form']->exam_id)}}">{{$data['form']->exam->title}}</a></li>
            <li class="breadcrumb-item"><a href="{{route('admin.exams.forms', $data['form']->exam_id)}}">{{trans('labels.forms')}}</a></li>
            <li class="breadcrumb-item active">{{$data['form']->title}}</li>
        </ol>
    </div>
    <div class="col-sm-6">
        <div class="float-right d-none d-md-block">
            <div class="dropdown">
                <button class="btn btn-primary" id="create-question-request" type="button" data-toggle="modal" data-target=".bs-create-question">
                    {{trans('labels.addNew')}}
                </button>
            </div>
        </div>

    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <!-- Left sidebar -->
            <div class="email-leftbar card text-left" style="width:400px">
                <a href="#" class="btn btn-danger btn-rounded btn-custom btn-block waves-effect waves-light">بنك الاسئلة</a>
                <div style="height: 1000px; overflow: auto;">
                    <div class="form-group" style="margin: 20px 0px 0px 15px;">
                        <select class="form-control" id="filterType" data-action="{{route('admin.questions.filter')}}">
                            <option value="">--- اختر طريقة التصفية ---</option>
                            <option value="lectureType">بالمحاضرة</option>
                            <option value="sectionType">بالقسم</option>
                            <option value="search">بحث</option>
                        </select>
                    </div>
                    <div class="form-group" style="margin: 20px 0px 0px 15px;">
                        <select class="form-control filterAttribute" id="sectionType" style=" display: none;">
                            <option value="">--- اختر اسم القسم ---</option>
                            @foreach($data['sections'] as $section)
                            <option value="{{$section->id}}">{{$section->title}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" style="margin: 20px 0px 0px 15px;">
                        <select class="form-control filterAttribute" id="lectureType" style=" display: none;">
                            <option value="">--- اختر اسم المحاضرة ---</option>
                            @foreach($data['lectures'] as $lecture)
                            <option value="{{$lecture->id}}">{{$lecture->title}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" style="margin: 20px 0px 0px 15px;">
                        <input class="form-control filterAttribute" id="search" style=" display: none;">
                    </div>
                    <!-- <h6 class="m-t-30">اختيار من متعدد</h6> -->
                    <div class=" m-t-20 container bank" id="questionsBank" ondrop="drop(event)" ondragover="allowDrop(event)">
                        <!-- @foreach($data['questions'] as $question)
                        <div class="col-lg-12 dragable-card" id="{{$question->id}}" draggable="true" ondragstart="drag(event)" data-degree="{{$question->degree}}">
                            <div class="card text-white bg-dark">
                                <div class="card-body">
                                    <blockquote class="card-blockquote mb-0">
                                        <p>({{$question->id}}) {{$question->question}}</p>
                                        <footer class="blockquote-footer text-white font-12">
                                            <cite title="Source Title">{{$question->type}} ({{$question->degree}})</cite>
                                        </footer>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                        @endforeach -->

                    </div>
                </div>

            </div>
            <!-- End Left sidebar -->


            <!-- Right Sidebar -->
            <div class="email-rightbar mb-3" style="margin-right: 420px; ">

                <div class="card text-left">
                    <div class="form-group row" style="margin: 1rem;">
                        <label class="col-sm-2 col-form-label">@lang('labels.title')</label>
                        <div class="col-sm-10">
                            <input id="form-title" type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                                   value="{{ $data['form']->title }}" data-degree="{{$data['form']->exam->degree}}" required>
                            @error('title')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        @error('title')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                    <div class="btn-toolbar p-3" role="toolbar">
                        <p style="width:45%">درجة الصعوبة (<span id="difficulty_level">0</span>%)</p><p style="width:40%">عدد الاسئلة (<span id="question-count">0</span>)</p>  <p style="width:15%" id="degree-fraction"> باجمالي درجات (<span id="degree">0</span>/{{$data['form']->exam->degree}}) </p>
                    </div>
                    <div ondrop="drop(event)" ondragover="allowDrop(event)" style="height: 1000px; overflow: auto;" class="container in-exam" id="in-exam">
                        @foreach($data['questions'] as $examQuestion)
                                                <div class="col-lg-12 dragable-card modal-btn-card" id="{{$question->id}}" draggable="true" ondragstart="drag(event)" data-level="{{$question->difficulty_level}}" data-degree="{{$examQuestion->degree}}" data-toggle="modal" data-target=".bs-edit-question" data-question="${question.question}" data-hint="${question.hint}" data-correctAnswer="${question.correct_answer}" data-info="{{json_encode($question)}}">
                            <div class="card {{$question->styleClassBg}}">
                                <div class="card-body ">
                                    <blockquote class="card-blockquote mb-0" >
                                        <p>{!! $question->question !!} <span style="float: left;">{{$question->difficulty_level}}%</span></p>
                                        <footer class="blockquote-footer font-12 {{$question->styleClassText}}">
                                            <cite title="Source Title" >{{trans('labels.'.$question->type)}} <span class="degree" style="float: left;">({{$examQuestion->degree}})</span></cite>
                                        </footer>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    @include('dashboard.pages.exam-form.question-modal')
                    @include('dashboard.pages.exam-form.create-question-modal')

                </div> <!-- card -->

                <div class="row m-t-20">
                    <div class="col-7 text-left">
                        <!-- Showing 1 - 20 of 1,524 -->
                    </div>
                    <div class="col-5">
                        <form action="{{route('admin.exam-form.update', $data['form']->id)}}"  method="post">
                            @csrf
                            @method('patch')
                            <input type="text" name="questions" value="" id="questionIds" hidden>
                            <input type="text" name="title" id="title" value="{{ $data['form']->title }}" hidden>
                            <input type="text" name="difficulty_level" id="difficulty_level_final" value="{{ $data['form']->difficulty_level }}" hidden>
                            <input type="text" name="is_valid" id="is_valid" value="{{ $data['form']->is_valid }}" hidden>
                            <input type="text" name="degree" id="degree_final" value="{{ $data['form']->degree }}" hidden>
                            <div class="btn-group float-right">
                                <button type="submit" class="btn btn-success waves-effect"> حفظ</button>

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

            </div> <!-- end Col-9 -->

        </div>

    </div><!-- End row -->
@endsection

@section('script')
    <script>

        var containerEle = '';
        // var degreesArray = [];
        var questions = {};
        var degree = 0;

        $(document).ready(function(){
            processExamQuestionCalculations();
        });

        $('#create-question-request').on('click', function(){
            $('#type').val(null);
            $('#question_body').hide();
            $('#question_body').find('.form-control').each(function(i, obj) {
                $(obj).val(null);
            });

            $('#question_body').find('.answers').empty();
            $('#difficulty_level_create').val(50);
        })

        function allowDrop(ev) {
          ev.preventDefault();
        }

        function drag(ev) {
          ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            var QuestionId = document.getElementById(data).id;
            if($(ev.target).hasClass('container')){
                ev.target.appendChild(document.getElementById(data));
                applyModal(ev.target,data);
            }else{

                var container = checkParent(ev.target);

                if(container){
                    containerEle.appendChild(document.getElementById(data));
                    applyModal(containerEle,data);
                }

            }
            processExamQuestionCalculations();
        }

        function applyModal(element, id){
            if($(element).hasClass('in-exam')){
                $('#'+id).attr('data-toggle', 'modal');
            }else{
               $('#'+id).attr('data-toggle', null);
            }
        }

        $('#form-title').on('keyup', function(){
            console.log($(this).val());
            $('#title').val($(this).val());
        });

        function processExamQuestionCalculations(){
            questions = {};
            degreesArray = [];
            difficultyLevelDegrees = [];

            $(".in-exam .dragable-card").each(function(index) {
                var cardView = {}
                console.log($(this).attr('id'));
                cardView['degree'] = $(this).data('degree');
                cardView['order'] = index;
                questions[$(this).attr('id')] = cardView;
                degreesArray.push($(this).data('degree'));
                difficultyLevelDegrees.push($(this).data('level'));
            });

            var degrees = degreesArray.reduce((a, b) => parseFloat(a) + parseFloat(b), 0);
            var sumLevelDegrees = difficultyLevelDegrees.reduce((a, b) => parseFloat(a) + parseFloat(b), 0);
            var averageDifficultyLevel = Math.floor(sumLevelDegrees/difficultyLevelDegrees.length);
            $('#degree').text(degrees);
            $('#question-count').text(degreesArray.length);
            $('#difficulty_level').text(averageDifficultyLevel);
            $('#difficulty_level_final').val(averageDifficultyLevel);
            $('#questionIds').val(JSON.stringify(questions));
            var examDegree = $('#form-title').data('degree');
            if (degrees != examDegree) {
                $('#degree-fraction').css('color', 'red');
                $('#is_valid').val(0);
            }else{
                $('#degree-fraction').css('color', 'green');
                $('#is_valid').val(1);
            }
            $('#degree_final').val(degrees);
            console.log(degrees);
            console.log(JSON.stringify(questions));
        }
        function checkParent(child){
            var parent = child.parentNode;

            if(parent.tagName == 'body'){
                return null;
            }
            // console.log(parent);
            if(!$(parent).hasClass('container')){
                checkParent(parent);
            }else{
                // console.log(parent);
                containerEle = parent;
            }

            return true;
        }

        $(window).on('load', function () {
              $('body').addClass('enlarged');
         });

        // this is for create new question when apply in js file its not apply translation

        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
                    $(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 {

            $(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="{{ URL::asset('js/ajax.js') }}"></script>
    <script src="{{ URL::asset('js/exam-admin.js') }}"></script>
    <script src="{{ URL::asset('js/question-modal.js') }}"></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