@extends('layout.default')
@section('content')
    <div class="row">
        @include('layout.top-ads')
        <div class="col-12 my-5">
            <div class="study-title-section">
                <div class="container-fluid d-flex">
                    <div class="tg-1 d-flex justify-content-center">
                        <div class="title btn btn-primary btn-sm">
                            <a href="{{ url('teacher/video-quiz/'.$subject_slug) }}""><i
                                    class="fas fa-chevron-circle-left"
                                    aria-hidden="true"></i>
                                {{ $topic_name }} </a>
                        </div>
                        <div class="btn title tg-nxt">
                            <i class="fas fa-chevron-circle-left text-white" aria-hidden="true"></i>&nbsp;&nbsp;
                            {{ $chapter_name }}</div>
                        <div class="btn title tg-nxt">
                            <i class="fas fa-chevron-circle-left text-white" aria-hidden="true"></i>&nbsp;&nbsp;
                            {{ $unit_name }}</div>
                    </div>
                </div>
            </div>

            <div class="study-section mt-5">
                <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?'show':''}}"
                                                 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)
                                                            <li class="{{ ($unit_id==$unit->id) ?'active':'' }}">
                                                                <a href="{{url('teacher/vq/'.$unit->slug)}}">
                                                                    <div class="card c2">
                                                                        <div class="card-body">

                                                                            <div class="top-head">
                                                                                <h4 class="card-title"><i
                                                                                        class="fas fa-play-circle"></i> {{ $unit->name}}
                                                                                </h4>
                                                                            </div>

                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div> @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="inner-tabs-content">
                                <div class="content">

                                    @if(!$check_plan && ($video && $video->video_mode=='paid'))

                                        <!-- <div class="card card-title">
                                            <div class="card-body">
                                                <h3 class="title">&nbsp;&nbsp;<i class="fa fa-info-circle"></i> &nbsp;&nbsp;&nbsp;
                                                    Access to quizzes only - please enquire for video access</h3>
                                            </div>
                                        </div> -->
                                    @endif
                                    <div class="inner-content">

                                        @if($video)
                                            <div class="embed-responsive embed-responsive-16by9 vid">

                                                <div class=" d-flex align-items-center justify-content-center">
                                                    <div class="video-inner-box text-center popup_video" style="display: none">
                                                    <div class="video-text">
                                                        <h3>Full access to video, gap-fills and Exam questions</h3>
                                                        <div class="btn btn-kay" onclick="modalLoad();">Click here</div>
                                                    </div>
                                                    </div> 

                                                    <video id="myVideo" class="quizvideoplay"
                                                           @if($check_plan || $video->video_mode=='free')
                                                           data-id="{{ $video->playback_id }}"
                                                           @endif  poster="https://image.mux.com/{{ $video->playback_id }}/thumbnail.png?width=400&height=200&fit_mode=smartcrop&time=5"
                                                           data-vtitle="{{ $video->title }}" controls preload="none"></video>

                                                </div>
                                                <input type="hidden" id="videoCompleted" value="true">
                                            </div>
                                        @endif

                                    <!-- <form class="quiz-wrap" id="quiz-ans-from"> -->
                                        <input type="hidden" name="unit_id" value="{{ $unit_id }}">

                                        <input type="hidden" name="quiz_type" id="quiz_type" value="">
                                        @php
                                            $q_count = 1;
                                           $fillQuestions = App\Models\Question::
                                                        select('questions.id','questions.question')
                                                        ->where('questions.unit_id',$unit_id)
                                                        ->where('question_type',3)
                                                        ->get();
                                              $display = count($fillQuestions)>0?'block':'none';
                                        @endphp

                                        <button class="btn btn-warning fil-show-blnk" href="javascript:void(0);"
                                                style="display:{{ $display }};"> Gap fill & Quiz
                                        </button>
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 fill_blnk_col">


                                                @foreach($fillQuestions as $key=>$fillquiz)
                                                    @php
                                                        $question = strip_tags(    ($fillquiz['question']));
                                                          $questionArray = explode('________', $question);

                                                          $newStr = '';
                                                          for ($i = 0; $i < count($questionArray); $i++)  {
                                                              $newStr.= $questionArray[$i];
                                                               $newStr.= '<input type="text" class="form-control fill-answer" id="fill-ans-'.$fillquiz->id.'" data-id="'.($key+1).'" value="" autocomplete="off">';

                                                           }


                                                    @endphp


                                                    <div class="box" id="box_$id'"><h5
                                                            class="fill-input"> {{ $q_count }}
                                                            . {!! $newStr !!}</h5><input type="hidden" id="fill_quiz_id"
                                                                                         name="question_id"
                                                                                         class="fill_quiz"
                                                                                         value="" autocomplete="off">
                                                    </div>

                                                    @php
                                                        $q_count++;
                                                    @endphp

                                                @endforeach

                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 custom_fm_col">
                                                @php
                                                    $one_questions = App\Models\Question::
                                                                select('questions.id','questions.question')
                                                                ->where('questions.unit_id',$unit_id)
                                                                ->where('question_type',2)
                                                                ->get();
                                                @endphp
                                                @foreach($one_questions as $key=>$oneWordQuestions)

                                                @php              
                                                  $images =  App\Models\QuestionImage::where('question_id',$oneWordQuestions->id)->get();
                                                @endphp
                                                    <div class="form-group custom_grp_fm"
                                                         id="cstm_sng_{{ $oneWordQuestions->id}}" data-question="{{ $oneWordQuestions->question }}">
                                                        <label for=""> {{ $q_count }}
                                                            . {{ $oneWordQuestions->question }}</label>

                                                    @if(count($images) > 0) 
                                                    <div id="carousel-example-generic_{{$oneWordQuestions->id}}" class="carousel slide" data-ride="carousel">
                                                        <div class="carousel-inner">
                                                    @foreach ($images as $key => $image) 
                                                        @php
                                                        if($key===0)
                                                            $active = 'active';
                                                        else
                                                        $active = '';  
                                                        @endphp
                                
                                                        <div class="carousel-item text-center img_center {{ $active }}"><img class="" src=" {{ asset('storage/uploads/questions/' . $oneWordQuestions['id'] . '/' . $image->image) }}" alt="#carousel-example-generic_{{$key}}"></div>
                                                        
                                                    @endforeach
                                                        </div>
                                                    <a class="carousel-control-prev" href="#carousel-example-generic_{{$oneWordQuestions->id}}" role="button" data-slide="prev">
                                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                        <span class="sr-only">Previous</span>
                                                        </a>
                                                    <a class="carousel-control-next" href="#carousel-example-generic_{{$oneWordQuestions->id}}" role="button" data-slide="next">
                                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                        <span class="sr-only">Next</span>
                                                        </a>
                                                    </div>
                                                    @endif
                                                
                                                        <input type="text"
                                                               class="form-control txt_single-ans input-s{{$key}}"
                                                               qno="{{$key}}" id="sng-ans-{{ $oneWordQuestions->id}}"
                                                               data-id="{{ $oneWordQuestions->id}}" value=""
                                                               autocomplete="off">

                                                    </div>
                                                    @php
                                                        $q_count++;
                                                    @endphp
                                                @endforeach


                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-danger btn-lg btn-sin-sub"
                                                style="display: none;">
                                            Submit
                                        </button>
                                        <!-- <a href="" class="btn btn-primary btn-lg btn-next" >Next</a> -->
                                        <!-- </form> -->
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('layout.bottom-ads')
    </div>
    @include('layout.report_issue')
    @include('layout.report_thankyou')

@endsection

@push('page-css')
    <!--<link href="{{ url('frontend/css/bootstrap.min.css') }}" rel="stylesheet">-->
    <link href="{{ url('frontend/css/font-awesome.min.css') }}" rel="stylesheet">
    <!-- <link href="{{ url('frontend/css/style.css')}}" rel="stylesheet" type="text/css"/> -->
@endpush

@section('styles')
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css"/>
    <link href="{{ url('frontend/css/player.css') }}" rel="stylesheet">
    <style type="text/css">
        .header-fixed.subheader-fixed.subheader-enabled .wrapper {
            padding-top: 65px;
        }

        .subject-right-side {
            top: 65px;
        }

        @media (max-width: 990px) and (min-width: 768px) {
            .subject-right-side {
                top: 55px;
            }
        }

        @media (max-width: 767px) {
            .subject-right-side {
                top: 55px;
            }

            .row.syllubus-div {
                padding-top: 100px;
            }
        }

        @media (max-width: 530px) {
            .row.syllubus-div {
                padding-top: 117px !important;
            }
        }

        .topic-list ul {
            padding-bottom: 4px !important;
        }

        .report-issue {
            float: right;
            line-height: 20px;
            color: #999;
            font-size: 12px;
            padding-right: 18px;
        }
    </style>
@endsection

@push('page-scripts')
    <script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
    <script src="https://src.litix.io/core/3/mux.js"></script>
    <script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>

    <script type="text/javascript">
        var playback_id = $('#myVideo').attr('data-id');
        var source = 'https://stream.mux.com/' + playback_id + '.m3u8';
        var video = document.querySelector('#myVideo');
        var isLoading = false;
        const player = new Plyr(video, {captions: {active: true, update: true, language: 'en'}});

        @if($video && $video->video_mode=='free')
        if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(source);
            hls.attachMedia(video);
            window.hls = hls;
        } else {
            video.src = source;
        }

        video.addEventListener('play', function () {
            hls.startLoad();
        }, {once: true});
        window.player = player;
        @else
        $('.popup_video').show();

        @endif
        // $(document).ready(function () {
        //     @if(!$check_plan && ($video && $video->video_mode!='free'))
        //     //  console.log("here");
        //     document.getElementById('myVideo').controls = false;
        //     document.getElementById('myVideo').controls = true;
        //     @else
        //     videoInit();
        //     @endif

        // });
        // 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();

        //     var playback_id = $('#myVideo').attr('data-id');
        //     var hlsUrl = 'https://stream.mux.com/' + playback_id + '.m3u8';
        //     var vid = document.querySelector('#myVideo');
        //     var video_title = $('#myVideo').attr('data-vtitle');
            

        //     const player = new Plyr(video, {captions: {active: true, update: true, language: 'en'}});
        //     if (typeof mux !== 'undefined') {

        //         if (Hls.isSupported()) {
        //             var hls = new Hls({
        //                 maxMaxBufferLength : 15
        //             });
        //             hls.loadSource(hlsUrl);
        //             hls.attachMedia(vid);
        //         }


        //     }

        // }


        function setSlider() {
            var serv0 = $('#ans-slider').owlCarousel({
                loop: true,
                nav: false,
                items: 1,
                autoplay: true,
                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();

        // 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('teacher/video-quiz/getQuestions') }}",
        //         type: "POST",
        //         data: {
        //             'unit_id': unit_id,
        //             'video_completed': video_completed,
        //             'fill_count': fill_count,
        //             'single_count': single_count,
        //             _token: token
        //         },
        //     }).done(function(data) {

        //         if (data.status == true) {
        //             $('.custom_fm_col').append(data.html);
        //             var qCcount = $('.custom_grp_fm').length;
        //             $('#quiz_type').val(data.type_id);

        //             $('.btn-sin-sub').show();

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


        // $(".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 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) {
        //         //getQuestions();
        //     }

        // })

        $(document).on('keydown', '.keydisabled', function (event) {
            return false;
        });
        var isLoading = 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;
                } else {
                    if (!isLoading) {
                        isLoading = true;
                        e.preventDefault();
                        qid = this.id;
                        qno = $("#" + qid).attr('qno');
                        console.log(qid);
                        question_id = $("#" + qid).attr('data-id');
                        $('#' + question_id).addClass('keydisabled');
                        var submit_flag = 0;
                        var fill_count = $('.fill_quiz').length;
                        var single_count = $('.custom_grp_fm').length;
                        var quiz_type = $('#quiz_type').val();
                        var answer = this.value;
                        $(".valid-error").remove();
                        console.log(submit_flag);
                        if (submit_flag == 0) {

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

                            }).done(function (d) {
                                var return_data = d.return_data;
                                if (return_data['prev_qtype'] == 2) {
                                    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> Answer: ' + correct_answer +
                                            '</h4></div>');
                                       // $('#cstm_sng_' + return_data['id']).append('<div class="answer-success"> <h4> Answer: ' + 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> Answer: ' + correct_answer +
                                            '</h4></div>');
                                        // $('#cstm_sng_' + return_data['id']).append('<div class="answer-success"> <h4> Answer: ' + 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']).removeClass("txt_single-ans");
                                    $('#sng-ans-' + return_data['id']).addClass('keydisabled');
                                    qno = parseInt(qno) + 1;
                                    $('.input-s' + qno).focus();


                                }
                                if (return_data['prev_qtype'] == 3) {

                                }
                                isLoading = false;
                                //getQuestions();

                            });
                        }

                    }
                    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 }}';

                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', 'green');
                            $('#' + 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 = $('#sng-ans-' + question_id).val();
            if(answer=='')
            var answer = $('#old-ans-' + question_id).val();
            var question = $('#cstm_sng_' + 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