@extends('student.layouts.default')
@section('content')
    <!-- banner section start-->
    <div class="inner-page-banner-strip2">
        <img src="{{asset('frontend/img/inner-page-background.jpg') }}" alt="...">
    </div>
    <!-- / banner section end -->
    <div class="study-title-section">
        <div class="container-fluid d-flex">
            <!-- <div class="d-flex"> -->
            <!-- <div class="img-wrap"> <img src="img/cell.png" alt=""> </div> -->
            <div class="tg-1 d-flex justify-content-center">
                <div class="title btn btn-primary">
                    <div>
                        <a href="">
                            <i class="fa fa-chevron-circle-left" aria-hidden="true"></i>&nbsp;{{ $topic_name }}
                        </a>
                    </div>
                </div>
                <div class="btn tg-nxt"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i></div>
                <div class="btn title">{{ $chapter_name }}</div>
                <div class="btn tg-nxt"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i></div>
                <div class="btn title">{{ $unit_name }}</div>
            </div>
        </div>
    </div>
    <div class="study-section">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="tab-style1">
                        <div class="panel-group" id="accordion" role="tablist"
                             aria-multiselectable="true"> @foreach($chapters as $key=>$chapter)
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="heading{{$chapter->id}}">
                                        <h4 class="panel-title">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                               data-parent="#accordion" href="#collapse{{$chapter->id}}"
                                               aria-expanded="false" aria-controls="collaps{{$chapter->id}}">
                                                {{$chapter->chapter_code}} {{$chapter->name}}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapse{{$chapter->id}}"
                                         class="panel-collapse collapse {{$chapter->id==$chapter_id?'in':''}}"
                                         role="tabpanel" aria-labelledby="headingOne">
                                        <div class="panel-body">
                                            @php $units = App\Models\Unit::where('chapter_id',$chapter->id)->get(); @endphp
                                            <ul class="inner-tabs-column">
                                                @foreach($units as $key=>$unit)
                                                    @php
                                                        $lastAttemptArray = App\Models\StudentVideoQuiz::where('unit_id',$unit->id)
                                                              ->where('student_id',STUDENT_ID)
                                                              ->latest()->first();
                                                         if($lastAttemptArray)
                                                              $lastAttempt = $lastAttemptArray->attempt;
                                                         else $lastAttempt = 0;
                                                         $quizPoint = App\Models\Question::where('unit_id',$unit->id)->sum('mark');
                                                         $point      = App\Models\StudentVideoQuiz::where('unit_id',$unit->id)
                                                                      ->where('student_id',STUDENT_ID)
                                                                      ->where('attempt',$lastAttempt)
                                                                      ->where('is_correct',1)->count();
                                                          if($quizPoint>0)
                                                               $percentage = ($point/$quizPoint)*100;
                                                          else $percentage = 0;
                                                                $quiz_complete = 0 ;
                                                          if($point == $quizPoint)
                                                             $quiz_complete = 1;
                                                    @endphp
                                                    <li class="{{ ($unit_id==$unit->id) ?'active':'' }}">
                                                        <div class="card c2">
                                                            <div class="card-body">
                                                                <a href="{{url('vq/'.$unit->slug)}}">
                                                                    <div class="top-head">
                                                                        <h4 class="card-title"><i
                                                                                class="fa fa-play-circle"></i> {{ $unit->name}}
                                                                        </h4>
                                                                        <div class="progress-wrap"><span>  {{ $point }} / {{ $quizPoint }}</span> @if($percentage == 100)
                                                                                <div class="progress">
                                                                                    <div
                                                                                        class="progress-bar progress-bar-green"
                                                                                        role="progressbar"
                                                                                        aria-valuenow="{{ $percentage }}"
                                                                                        aria-valuemin="0"
                                                                                        aria-valuemax="100"
                                                                                        style="width: {{ $percentage }}%;"></div>
                                                                                </div>
                                                                            @elseif($percentage < 100 && $percentage>=50)
                                                                                <div class="progress">
                                                                                    <div
                                                                                        class="progress-bar progress-bar-orange"
                                                                                        role="progressbar"
                                                                                        aria-valuenow="{{ $percentage }}"
                                                                                        aria-valuemin="0"
                                                                                        aria-valuemax="100"
                                                                                        style="width: {{ $percentage }}%;"></div>
                                                                                </div>
                                                                            @elseif($percentage < 50)
                                                                                <div class="progress">
                                                                                    <div class="progress-bar"
                                                                                         role="progressbar"
                                                                                         aria-valuenow="{{ $percentage }}"
                                                                                         aria-valuemin="0"
                                                                                         aria-valuemax="100"
                                                                                         style="width: {{ $percentage }}%;"></div>
                                                                                </div>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                                <!-- <p>B1.1 Animal and Plant Cells</p> -->
                                                                @if($quiz_complete == 1)
                                                                    <label> Completed </label>
                                                                @elseif ($unit_id==$unit->id)
                                                                    <label> In Progress </label>
                                                                @else
                                                                    <label> Pending </label>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="inner-tabs-content">
                        <div class="content">
                            <div class="inner-content">
                                @if(@$quizes->enable_video && $video)
                                    <div class="embed-responsive embed-responsive-16by9 vid">
                                        <video id="myVideo" class="quizvideoplay" data-id="{{ $video->playback_id }}"
                                               poster="https://image.mux.com/{{ $video->playback_id }}/thumbnail.png?width=400&height=200&fit_mode=smartcrop&time=5"
                                               data-vtitle="{{ $video->title }}" controls></video>
                                        <!-- <iframe class="embed-responsive-item" src="//www.youtube.com/embed/M-1S9NmH9O0"></iframe> -->
                                    </div>
                                @endif
                                <form class="quiz-wrap" id="quiz-ans-from">
                                    <input type="hidden" name="quiz_type" id="quiz_type" value="">
                                    <input type="hidden" name="unit_id" id="unit_id" value="{{ $unit_id }}"> <a
                                        class="btn btn-warning fil-show-blnk" href="javascript:void(0);"
                                        style="display: none;"> Gap fill & Quiz </a>
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 fill_blnk_col"></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 custom_fm_col"></div>
                                    </div>
                                    <button type="button" class="btn btn-primary btn-lg btn-sin-sub"
                                            style="display: none;">Submit
                                    </button>
                                </form>
                                <a href="{{ url('performance') }}" class="btn btn-primary btn-lg btn-sub-quiz"
                                   style="display: none;">Submit Quiz</a>

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

@endsection

@section('pagecss')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">

    <style type="text/css">
        .qstn-txt {
            text-shadow: 0 0 0px #0e080887;
            color: transparent;
        }
    </style>
@endsection

@section('pagescripts')
    <script src="https://src.litix.io/core/3/mux.js"></script>
    <script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

@endsection


@push('page-scripts')
    <script type="text/javascript">
        $(document).ready(function () {

            videoInit();
        });
        var isLoading = false;
        var events;
        var tracks;
        var lastStartPosition;
        var lastDuration;
        var video = $('#myVideo')[0];
        var bufferingIdx = -1;

        function videoInit() {

            var token = "{{ config('kayscience.MUX_TOKEN_ID') }}";
            var env_key = "{{ config('kayscience.MUX_ENV_KEY')  }}";
            $("#env_key").val(env_key);
            window.muxPlayerInitTime = Date.now();

            // Initialize Mux Data monitoring
            if (typeof mux !== 'undefined') {

                var vid = document.querySelector('#myVideo');
                //   console.log(id);
                //   console.log(vid);
                var playback_id = $('#myVideo').attr('data-id');
                var video_title = $('#myVideo').attr('data-vtitle');


                if (Hls.isSupported()) {
                    var hls = new Hls();
                    hls.loadSource('https://stream.mux.com/' + playback_id + '.m3u8');
                    hls.attachMedia(vid);

                    @if(!$is_videoplayed)
                        self.events = events = {
                        url: 'https://stream.mux.com/' + playback_id + '.m3u8',
                        t0: performance.now(),
                        load: [],
                        buffer: [],
                        video: [],
                        level: [],
                        bitrate: []
                    }; // actual values, only on window

                    video.addEventListener('resize', handleVideoEvent);
                    video.addEventListener('seeking', handleVideoEvent);
                    video.addEventListener('seeked', handleVideoEvent);
                    video.addEventListener('pause', handleVideoEvent);
                    video.addEventListener('play', handleVideoEvent);
                    video.addEventListener('canplay', handleVideoEvent);
                    video.addEventListener('canplaythrough', handleVideoEvent);
                    video.addEventListener('ended', handleVideoEvent);
                    video.addEventListener('playing', handleVideoEvent);
                    video.addEventListener('error', handleVideoEvent);
                    video.addEventListener('loadedmetadata', handleVideoEvent);
                    video.addEventListener('loadeddata', handleVideoEvent);
                    video.addEventListener('durationchange', handleVideoEvent);

                    if (hls.bufferTimer === undefined) {
                        events.buffer.push({
                            time: 0,
                            buffer: 0,
                            pos: 0
                        });
                        hls.bufferTimer = self.setInterval(checkBuffer, 100);
                    }

                    @endif

                }

                mux.monitor('#myVideo', {
                    debug: true,

                    // Pass in the HLS.js instance
                    hlsjs: hls,

                    // Optionally, if Hls is not available on the window globally
                    // you need to pass Hls as well.
                    Hls: Hls,
                    data: {
                        env_key: "{{ config('kayscience.MUX_ENV_KEY')  }}", // required

                        respectDoNotTrack: false,
                        // Site Metadata
                        viewer_user_id: '{{ STUDENT_ID }}', // ex: '12345'
                        experiment_name: '{{ $encryptedStr }}', // ex: 'player_test_A'
                        sub_property_id: '', // ex: 'cus-1'

                        // Player Metadata
                        player_name: 'My Main Player', // ex: 'My Main Player'
                        player_version: '1.0.0', // ex: '1.0.0'
                        player_init_time: '1451606400000', // ex: 1451606400000

                        // Video Metadata (cleared with 'videochange' event)
                        video_id: playback_id, // ex: 'abcd123'
                        video_title: video_title, // ex: 'My Great Video'
                        video_series: '', // ex: 'Weekly Great Videos'
                        video_duration: '', // in milliseconds, ex: 120000
                        video_stream_type: '', // 'live' or 'on-demand'
                        video_cdn: '' // ex: 'Fastly', 'Akamai'
                    }


                });

            }

        }


        function checkBuffer() {
            var v = $('#myVideo')[0];
            var r = v.buffered;
            var bufferingDuration;
            if (r) {
                var pos = v.currentTime;
                var bufferLen = 0;
                if (bufferLen <= 0.1 && v.paused === false && pos - lastStartPosition > 0.5) {
                    if (lastDuration - pos <= 0.5 && events.isLive === false) {
                        // don't create buffering event if we are at the end of the playlist, don't report ended for live playlist
                    } else {
                        // we are not at the end of the playlist ... real buffering
                        if (bufferingIdx !== -1) {
                            bufferingDuration = performance.now() - events.t0 - events.video[bufferingIdx].time;
                            events.video[bufferingIdx].duration = bufferingDuration;
                            events.video[bufferingIdx].name = bufferingDuration;
                        } else {
                            events.video.push({
                                type: 'buffering',
                                time: performance.now() - events.t0
                            });
                            //  trimEventHistory(); // we are in buffering state

                            bufferingIdx = events.video.length - 1;
                        }
                    }
                }

                if (bufferLen > 0.1 && bufferingIdx !== -1) {
                    bufferingDuration = performance.now() - events.t0 - events.video[bufferingIdx].time;
                    events.video[bufferingIdx].duration = bufferingDuration;
                    events.video[bufferingIdx].name = bufferingDuration; // we are out of buffering state

                    bufferingIdx = -1;
                } // update buffer/position for current Time


                var event = {
                    time: performance.now() - events.t0,
                    buffer: Math.round(bufferLen * 1000),
                    pos: Math.round(pos * 1000)
                };
                var bufEvents = events.buffer;
                var bufEventLen = bufEvents.length;

                if (bufEventLen > 1) {
                    var event0 = bufEvents[bufEventLen - 2];
                    var event1 = bufEvents[bufEventLen - 1];
                    var slopeBuf0 = (event0.buffer - event1.buffer) / (event0.time - event1.time);
                    var slopeBuf1 = (event1.buffer - event.buffer) / (event1.time - event.time);
                    var slopePos0 = (event0.pos - event1.pos) / (event0.time - event1.time);
                    var slopePos1 = (event1.pos - event.pos) / (event1.time - event.time); // compute slopes. if less than 30% difference, remove event1

                    if ((slopeBuf0 === slopeBuf1 || Math.abs(slopeBuf0 / slopeBuf1 - 1) <= 0.3) && (slopePos0 === slopePos1 || Math.abs(slopePos0 / slopePos1 - 1) <= 0.3)) {
                        bufEvents.pop();
                    }
                }

                events.buffer.push(event);
                // var log = "Duration: " + v.duration + "\nBuffered: " + timeRangesToString(v.buffered) + "\nSeekable: " + timeRangesToString(v.seekable) + "\nPlayed: " + timeRangesToString(v.played) + "\n";

                // if (hls.media) {
                //   for (var type in tracks) {
                //     log += 'Buffer for ' + type + ' contains: ' + timeRangesToString(tracks[type].buffer.buffered) + '\n';
                //   }

                var videoPlaybackQuality = v.getVideoPlaybackQuality;

                // if (videoPlaybackQuality && typeof videoPlaybackQuality === typeof Function) {
                //   log += "Dropped frames: " + v.getVideoPlaybackQuality().droppedVideoFrames + "\n";
                //   log += "Corrupted frames: " + v.getVideoPlaybackQuality().corruptedVideoFrames + "\n";
                // } else if (v.webkitDroppedFrameCount) {
                //   log += "Dropped frames: " + v.webkitDroppedFrameCount;
                // }
            }

            var videoPlayed = timeRangesToString(v.played);
            // console.log(videoPlayed.length);
            // console.log(videoPlayed);
            if (videoPlayed.length > 0) {
                let playedTime = videoPlayed[videoPlayed.length - 1]['end'];
                // console.log(playedTime);
                if (playedTime == v.duration) {

                    $('#myVideo').removeAttr("src");
                    $(".txt_single-ans").last().removeClass('keydisabled');
                    $(".lbl-qstn").last().removeClass('qstn-txt');
                    //getQuestions();

                }
            }
        }

        function timeRangesToString(r) {
            var newArr = [];

            for (var i = 0; i < r.length; i++) {
                let start = r.start(i);
                let end = r.end(i);
                newArr.push({start, end})
                // log += '[' + r.start(i) + ', ' + r.end(i) + ']';
                // log += ' ';
            }

            return newArr;

        }

        function handleVideoEvent(evt) {
            var data = '';

            switch (evt.type) {
                case 'durationchange':
                    if (evt.target.duration - lastDuration <= 0.5) {
                        // some browsers report several duration change events with almost the same value ... avoid spamming video events
                        return;
                    }

                    lastDuration = evt.target.duration;
                    data = Math.round(evt.target.duration * 1000);
                    break;

                case 'resize':
                    data = evt.target.videoWidth + '/' + evt.target.videoHeight;
                    break;

                case 'loadedmetadata':
                case 'loadeddata':
                case 'canplay':
                case 'canplaythrough':
                case 'ended':
                case 'seeking':
                case 'seeked':
                case 'play':
                case 'playing':
                    lastStartPosition = evt.target.currentTime;

                case 'pause':
                case 'waiting':
                case 'stalled':
                case 'error':
                    data = Math.round(evt.target.currentTime * 1000);

                    if (evt.type === 'error') {
                        var errorTxt;
                        var mediaError = evt.currentTarget.error;

                        switch (mediaError.code) {
                            case mediaError.MEDIA_ERR_ABORTED:
                                errorTxt = 'You aborted the video playback';
                                break;

                            case mediaError.MEDIA_ERR_DECODE:
                                errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support';
                                handleMediaError();
                                break;

                            case mediaError.MEDIA_ERR_NETWORK:
                                errorTxt = 'A network error caused the video download to fail part-way';
                                break;

                            case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
                                errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported';
                                break;
                        }

                        if (mediaError.message) {
                            errorTxt += ' - ' + mediaError.message;
                        }

                        logStatus(errorTxt);
                        console.error(errorTxt);
                    }

                    break;

                default:
                    break;
            }

            var event = {
                time: performance.now() - events.t0,
                type: evt.type,
                name: data
            };
            events.video.push(event);

            if (evt.type === 'seeking') {
                lastSeekingIdx = events.video.length - 1;
            }

            if (evt.type === 'seeked') {
                events.video[lastSeekingIdx].duration = event.time - events.video[lastSeekingIdx].time;
            }

            // trimEventHistory();
        }

        function setSlider() {
            var serv0 = $('#ans-slider').owlCarousel({
                loop: false,
                nav: false,
                items: 1,
                autoplay: false,
                autoplaySpeed: 200,
                autoplayHoverPause: true,
                autoplayHoverPause: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    768: {
                        items: 1
                    },
                    1200: {
                        items: 1
                    }
                }
            })
            $('#ans-slider-prev').click(function () {
                serv0.trigger('next.owl.carousel');
            })
            $('#ans-slider-next').click(function () {
                serv0.trigger('prev.owl.carousel', [300]);
            })
        }

        getQuestions();
        @if(!$video)
        $('#myVideo').removeAttr("src");

        @endif

        function getQuestions() {

            var unit_id = '{{ $unit_id }}';
            var token = "{{ csrf_token() }}";
            var fill_count = $('.fill_quiz').length;
            var single_count = $('.custom_grp_fm').length;
            var video_completed = $('#videoCompleted').val();

            $.ajax({
                url: "{{ url('video-quiz/getQuestions') }}", type: "POST",
                data: {
                    'unit_id': unit_id,
                    'video_completed': video_completed,
                    'fill_count': fill_count,
                    'single_count': single_count,
                    'attempt': '{{$attempt}}',
                    _token: token
                },
            }).done(function (data) {
                console.log(data);
                if (data.status == true) {
                    if (data.type_id == 2) {
                        $('.custom_fm_col').append(data.html);
                        $('#quiz_type').val(data.type_id);
                        $('#sng-ans-' + data.question_id).focus();
                        $('.btn-sin-sub').show();

                        @if(!$is_videoplayed)
                        if (single_count == 0)
                            $('#sng-ans-' + data.question_id).addClass('keydisabled');
                        else
                            $(".lbl-qstn").last().removeClass('qstn-txt');
                        @endif
                    } else if (data.type_id == 3) {
                        $('.fill_blnk_col').append(data.html);
                        $('.fill-answer').each(function (index) {
                            qid = $('#fill_quiz_id').val();
                            $(this).attr('id', 'blnk_' + qid + '_' + (index + 1));
                            $(this).attr('data', index + 1);
                        });
                        $('#quiz_type').val(data.type_id);
                        $('.btn-sin-sub').show();
                        $('.fil-show-blnk').show();

                    }
                    setSlider();
                } else {
                    $('.btn-sin-sub').hide();
                    var questions_count = '{{ $questions_count }}';
                    if (questions_count > 0) {
                        showAlert("You have successfully completed quiz", "success");
                        $(".btn-sub-quiz").show();
                        // setTimeout(function(){
                        //        window.location.href = "{{ url('performance') }}"
                        //  }, 3000);
                    } else {
                        showAlert("There is no quiz in this lesson", "error");
                    }

                    // $('.inner-content').html(data.html);
                }
            })


        }


        //  $(document).on('change','.fill-answer',function(){
        //     id = this.id;
        //     var item = this;
        //     console.log(id);
        //     position = $('#'+id).attr('data');
        //     console.log(position);
        //     answer = this.value;
        //     question_id = $('#fill_quiz_id').val();
        //     var unit_id = '{{ $unit_id }}';
        //     var attempt = '{{ $attempt }}';
        //     if (answer.length > 0) {

        //         $.ajax({
        //             url: "{{ url('video-quiz/submitfillblank') }}",
        //             type: 'POST',
        //             data: {'question_id':question_id,'position':position,'answer':answer,'unit_id':unit_id,'attempt':attempt},
        //             dataType: "json",
        //             headers: {
        //                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //             }

        //         }).done(function(d) {
        //              if(d.status==true){
        //                     $('#'+id).css('color', 'green');
        //                     $('#'+id).css('font-weight', 'bold');
        //                     $('#'+id).css('font-size', 'medium');
        //                     $('#'+id).val(d.right_answer);
        //                     // $('#'+id).val($('#'+id).val()+'      ✔');
        //             }else{
        //                  $('#'+id).css('color', 'red');
        //                  $('#'+id).css('font-weight', 'bold');
        //                  $('#'+id).css('font-size', 'medium');
        //                  $('#'+id).val(d.right_answer);
        //                  // $('#'+id).after("<span style='color:green; font-weight:bold; font-size:medium'>"+d.right_answer+"</span>");
        //             }
        //             $('#'+id).addClass('keydisabled');
        //             $(item).next().focus();


        //         });
        //     }

        // });


        $(".btn-sin-sub").click(function (e) {
            e.preventDefault();
            var submit_flag = 0;
            var fill_count = $('.fill_quiz').length;
            var single_count = $('.custom_grp_fm').length;
            var attempt = '{{ $attempt }}';
            var quiz_type = $('#quiz_type').val();
            $(".valid-error").remove();
            if (quiz_type == 2) {
                $(".txt_single-ans").each(function (index) {
                    if (this.value == '') {
                        id = this.id.split('sng-ans-');
                        $('#cstm_sng_' + id[1]).append('<span class="valid-error"> Please Enter Your Answer </span>');
                        submit_flag = 1;
                        return false;
                    }
                });

            } else if (quiz_type == 3) {
                $('.fill-answer').each(function (index) {
                    console.log(this.value);
                    if (this.value == '') {
                        $('#box_' + $("#fill_quiz_id").val()).append('<span class="valid-error"> Please fill all answers </span>');
                        submit_flag = 1;
                        return false;
                    }
                });
            }

            console.log(submit_flag);
            if (submit_flag == 0) {

                $.ajax({
                    url: "{{ url('video-quiz/submit') }}", type: 'POST',
                    data: $('#quiz-ans-from').serialize() + "&fill_count=" + fill_count + "&single_count=" + single_count + "&attempt=" + attempt,
                    dataType: "json",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }

                }).done(function (d) {
                    console.log(d);
                    var return_data = d.return_data;
                    if (return_data['prev_qtype'] == 2) {
                        console.log('sdfsdfds');
                        var answer = $('#sng-ans-' + return_data['id']).val();
                        var correct_answer = return_data['original_answer'];
                        if (return_data['is_correct'] == 0) {
                            $('#sng-ans-' + return_data['id']).addClass('txt-danger');
                            $('#sng-ans-' + return_data['id']).css('color', 'red');
                            $('#sng-ans-' + return_data['id']).css('font-weight', 'bold');
                            $('#sng-ans-' + return_data['id']).css('font-size', 'medium');
                            $('#sng-ans-' + return_data['id']).val(answer + '      ✖');
                            //$('#cstm_sng_' + return_data['id']).append('<div class="answer-success"> <h4> Answerasdasdsadas: ' + correct_answer +
                              //  '</h4></div>');
                            $('#cstm_sng_' + return_data['id']).append('<div class="answer-success"> <h4> Answerasdasdsadas: ' + correct_answer +
                                '<a class="report-issue" href="javascript:void(0)" onclick="reportIssue(' + return_data['id'] + ',\'' + correct_answer + '\',' + return_data['is_correct'] + ')">Report an issue</a></h4></div>');
                        } else {
                            $('#sng-ans-' + return_data['id']).addClass('txt-success');
                            $('#sng-ans-' + return_data['id']).css('color', 'green');
                            $('#sng-ans-' + return_data['id']).css('font-weight', 'bold');
                            $('#sng-ans-' + return_data['id']).css('font-size', 'medium');
                            $('#sng-ans-' + return_data['id']).val(answer + '      ✔');
                            //$('#cstm_sng_' + return_data['id']).append('<div class="answer-success"> <h4> Answersdfsdf: ' + correct_answer +
                              //  '</h4></div>');
                            $('#cstm_sng_' + return_data['id']).append('<div class="answer-success"> <h4> Answersdfsdf: ' + correct_answer +
                                '<a class="report-issue" href="javascript:void(0)" onclick="reportIssue(' + return_data['id'] + ',\'' + correct_answer + '\',' + return_data['is_correct'] + ')">Report an issue</a></h4></div>');
                        }
                        $('#sng-ans-' + return_data['id']).removeAttr("name");
                        $('#sng-ans-' + return_data['id']).addClass('keydisabled');
                    }
                    if (return_data['prev_qtype'] == 3) {

                    }
                    isLoading = false;
                    getQuestions();
                });
            }
        })

        $(document).on('keydown', '.keydisabled', function (event) {
            return false;
        });

        $(document).on('keydown', '.txt_single-ans', function (e) {

            if (e.which == 13) {

                if (this.value == '') {
                    $(".valid-error").remove();
                    id = this.id.split('sng-ans-');
                    $('#cstm_sng_' + id[1]).append('<span class="valid-error"> Please Enter Your Answer </span>');
                    submit_flag = 1;
                    return false;
                }

                if (!isLoading) {
                    isLoading = true;
                    e.preventDefault();
                    id = this.id;
                    $('#' + id).addClass('keydisabled');
                    $('.btn-sin-sub').trigger('click');
                    return false;
                }
            }
        });

        $(document).on('keydown', '.fill-answer', function (e) {
            // e.preventDefault();
            if (e.which == 13) {
                $(".valid-error").remove();
                id = this.id;
                var item = this;
                console.log(id);
                position = $('#' + id).attr('data');
                console.log(position);
                answer = this.value;
                question_id = $('#fill_quiz_id').val();
                var unit_id = '{{ $unit_id }}';
                var attempt = '{{ $attempt }}';
                if (answer.length > 0) {

                    $.ajax({
                        url: "{{ url('video-quiz/submitfillblank') }}",
                        type: 'POST',
                        data: {
                            'question_id': question_id,
                            'position': position,
                            'answer': answer,
                            'unit_id': unit_id,
                            'attempt': attempt
                        },
                        dataType: "json",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }

                    }).done(function (d) {
                        if (d.status == true) {
                            $('#' + id).css('color', 'green');
                            $('#' + id).css('font-weight', 'bold');
                            $('#' + id).css('font-size', 'medium');
                            $('#' + id).val(d.right_answer);
                            // $('#'+id).val($('#'+id).val()+'      ✔');
                        } else {
                            $('#' + id).css('color', 'red');
                            $('#' + id).css('font-weight', 'bold');
                            $('#' + id).css('font-size', 'medium');
                            $('#' + id).val(d.right_answer);
                            // $('#'+id).after("<span style='color:green; font-weight:bold; font-size:medium'>"+d.right_answer+"</span>");
                        }
                        $('#' + id).addClass('keydisabled');
                        $(item).next().focus();

                        $(this).next(':input').focus();
                    });

                } else {

                    $('#box_' + question_id).append('<span class="valid-error"> Please Enter Your Answer  </span>');

                }

                //$('#'+id).trigger('change');

                return false;
            }
        });

        function reportIssue(question_id, correct_answer, is_correct) {
            var answer = $('#oneword_ans-' + question_id).val();
            var question = $('#cstm_oneword_' + question_id).data('question');
            var submitted;
            $('#question').html(question);
            if (is_correct) {
                submitted = answer;
            } else {
                submitted = answer + '&emsp;&emsp; Correct: ' + correct_answer;
            }
            $('#canswer').html(submitted);
            $('#question_id').val(question_id);
            $('#answer').val(answer);
            $('#correct_answer').val(correct_answer);
            $('#is_correct').val(is_correct);
            $('#reportModal').modal('show');
        }
    </script>
@endpush