@extends('app')

@section('title', $chapter->name ? $chapter->name : ucfirst(__('chapter')))

@section('head')

<style>
    .no-click {
        pointer-events: none;
    }
    .timer{
        /*        position: absolute;
                left: 0;
                top: 00px;*/
        color: #FFF;
        background: #e32337;
        font-size: 40px;
        padding: 10px;
        /*border-radius: 8px;*/
        text-align: center;
    }
    #html5-lightbox-box{
        margin: 10% auto 0px !important;
    }
    .html5-elem-box{
        height: auto !important;
    }

    #content {
        position:relative;
        height:1200px;
    }
    #content .page {
        position:absolute;
        top:0px;
    }
    .pagination{
        padding: 2px;
    }
    .pagination ul{
        margin: 0;
        padding: 0;
        text-align: left;
        /*font-size: 16px;*/
    }
    .pagination li{
        list-style-type: none;
        display: inline;
        padding-bottom: 1px;
    }
    .pagination a, .pagination a:visited{
        padding: 0 5px;
        /*border: 1px solid #9aafe5;*/
        text-decoration: none;
        /*color: #2e6ab1;*/
    }
    .pagination a:hover, .pagination a:active{
        border: 1px solid #2b66a5;
        /*color: #000;*/
        /*background-color: #FFFF80;*/
    }
    .pagination a.prevnext{
        /*font-weight: bold;*/
        margin: 0px 5px;
    }
    .page_number {
        border: 1px solid #9aafe5;
        color: #2e6ab1;
        padding:5px;
        text-align: center;
        width: 20px;
    }
    .total_page {
        border: 1px solid #9aafe5;
        color: #2e6ab1;
        padding:5px;
        text-align: center;
        width: 20px;
    }
    .ex-question {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 24px;
        border: 2px solid #333333;
        padding: 7px 15px 7px 7px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .ex-question .checkmark {
    position: absolute;
    top: 0px;
    right: 10px;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
    }
    #chapter_sections ul{
        margin:10px;
        padding:10px;
    }
    #chapter_sections img{
        max-width:100%;
    }
    #chapter_sections iframe{
        max-width:100%;
    }
    #chapter_sections table{
        max-width:100%;
    }
    #chapter_sections.food-handler ul,#chapter_sections.food-handler ol{
        padding:0 0 0 40px;
        margin:auto;
        white-space: auto !important;
    }
    
</style>
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="container-fluid no-padding chapter-banner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12">
                                @foreach ($courses->chapters as $chapters)
                                @if($chapters->getAttributes()['chapter_id'] == $chapter->chapter_id)
                <h1>{{strtoupper(__('chapter'))}} <b># {{ $i }}</b></h1>
                @break
                @endif
                @endforeach

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

<div class="container-fluid no-padding chapters-page">
    <div class="container">
        <div class="row">

            <div class="">
                <div class="chapter-overview  {{ $courses->timer == 0 ? 'col-md-12':'col-md-10' }}" id="scroll">
                    <h3>{{ $chapter->name }}</h3>
                </div>
                @if($courses->timer == 1)
                <div class="timer  {{ $courses->timer == 0 ? 'hidden ':'col-md-2' }} ">
                    <input type="hidden" id="time_input" name="time_input" value="">
                    <h2>{{ucfirst(__('chapter time'))}}: <span id="time">{{ $chapter_progress }}:00</span></h2>

                </div>
                @endif
            </div>
        </div>
        <div class="row chapter-intro" style="">
            <div class="col-md-10 col-md-offset-1">
                <div id="chapter_sections" class="content @if($courses->isFoodHandler()) food-handler @endif">
                    <h3> {!! isset($sections[0]) ? $sections[0]->title :ucfirst(__('title')) !!}</h3>
                    <p> {!! isset($sections[0]) ? $sections[0]->description :ucfirst(__('description')) !!}</p>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                {{-- @if(count($chapter_attachment) > 0) --}}
                @if(!empty($chapter_attachment))
                <div class="row video-line">
                    @foreach ($chapter_attachment as $video)
                    @if($video->type == 1 )
                    <div class="col-md-3">
                        <a href="{{ $upload_url.'/media/'.$video->name }}" class="html5lightbox" data-width="480" data-height="320" title="">
                            <div class="video-thumbnail">
                                <img src="{{ $upload_url.'/media/'.$video->thumbnail }}" class="img-responsive" alt="">
                            </div>
                        </a>
                        <h4></h4>
                    </div>
                    @endif
                    @endforeach

                </div>

                <div class="row audio-line">
                    @foreach ($chapter_attachment as $audio)
                    @if($audio->type == 2)
                    <div class="col-md-6">
                        <audio controls><source src="{{ $upload_url.'/media/'.$audio->name }}" type="audio/mpeg"> Your browser does not support the audio element. </audio>
                        <h4></h4>
                    </div>
                    @endif
                    @endforeach
                </div>
                @endif
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="text-align:center; margin-bottom:116px;">
                @if($previous_chapter)
                <a href="{{ url((!empty($course_token) ? $course_token.'':'').'/chapter/'.$previous_chapter->chapter_id) }}" class="btn blog-btn" >{{__('Previous Chapter')}}</a>
                @endif
                <br>
                <div class="pagination">
                    <ul>
                        <li><a href="#scroll" id="prev" disabled="disabled" class="prevnext btn blog-btn">{{ucfirst(__('previous'))}}</a></li>
                        <li><a href="#scroll" id="next" class="prevnext btn blog-btn">{{ucfirst(__('next'))}}</a></li>
                        <li><a href="#submission" id="submission" class="prevnext btn blog-btn"  disabled="disabled">{{ucfirst(__('submit'))}}</a></li>
                    </ul>
                    <!--<br />-->
                    <!--<div id="page_number" class="page_number">1</div>
                    <div id="total_page" class="total_page"></div>-->
                </div>
                <br>
                <a href="{{ url('/profile') }}" class="btn blog-btn" >{{strtoupper(__('back to profile'))}}E</a>

            </div>
        </div>

    </div>
</div>
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="text-align: center; background: #03243e; color: #FFF;">
                    <h4 class="modal-title" id="modal_text">{{ucwords(__('validation question'))}}</h4>
                </div>
                <div class="modal-body" >
                    <div id="qa_msg">

                    </div>
                    <div id="qa_div">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="btn_validate"  >{!!ucfirst(__('save'))!!}</button>
                </div>
            </div>

        </div>
    </div>
    <div class="sections hidden d-none">
    @foreach ($sections as $index=>$s)
        <div id="section-{{$s->id}}" data-chapter-id="{{$s->chapter_id}}">
            <div class="s-title">{!!$s->title!!}</div>
            <div class="s-content">{!!$s->description!!}</div>
        </div>
    @endforeach
    </div>
    <div class="chapter-assessment d-none hidden">
        {!!$assessment!!}
    </div>
@endsection
    @section('foot')
<script type="text/javascript" src="{{ url('resources/assets') }}/js/jquery-3.2.1.min.js"></script>
<!--<script type="text/javascript" src="{{ url('resour4es/assets') }}/js/jquery-migrate-1.4.1.js"></script>-->
<script type="text/javascript" src="{{ url('resources/assets') }}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{ url('resources/assets') }}/js/html5lightbox.js"></script>
<script type="text/javascript" src="{{ url('resources/assets') }}/js/jquery.slimscroll.js"></script>
<script>

    //Edit Assessment Questions
    var section_ = 0;
    $('#submission').on('click', function (e)
    {
        e.preventDefault();
        var form = $('#assessment_submit');
        var formdata = false;

        if (window.FormData) {
            formdata = form.serialize();
        }
            // console.log(formdata);
        $.ajax({
            type: 'POST',
            url: Globals.url + '{{ !empty($purchase) ? '/'.$purchase->course_token:'' }}/assessment/{{$chapter->chapter_id}}/{{$assessment_type}}',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {formdata},
            success: function (response) {
                    //console.log(response.url); 
                $("html, body").animate({ scrollTop: 1000 }, "slow");
                if (response.error == false) {
                    var last_url = {!! json_encode($last_chapter_id->chapter_id) !!};
                    if(response.url == 'exam')
                    {
                        if(form.find('input').length < 1){
                            $('#chapter_sections').html('<h3 style="text-align:center; margin-top:100px">{!!__('Congratulations! <br/> You have successfully completed the Texas DSHS Food Handler Training Course.')!!}</h3>');
                            $('.chapter-intro').css({'margin':'0','min-height':'auto'});
                        }else{
                            $('#chapter_sections').html('<h3 style="text-align:center; margin-top:100px">{!!__('Congratulations!!! <br/> You have successfully cleared all the assessment test, Best of luck for the grand test')!!}</h3>');
                        }
                        setTimeout(()=>{
                                window.location.replace(Globals.url + '{{ !empty($purchase) ? '/'.$purchase->course_token:'' }}/exam/');
                            }, 5000);
                    }else{
                        if(form.find('input').length < 1){
                            $('.chapter-intro').html('<h3 style="text-align:center;margin-top:100px">{{__('Great Job! You are being Automatically Advanced to the Next Chapter! No Clicking Required!')}}&#x128522</h3>');
                            $('.chapter-intro').css({'margin':'0','min-height':'auto'});
                        }else{
                            $('#chapter_sections').html('<h3 style="text-align:center; margin-top:100px">{!!__('Congratulations!!! <br/> You have successfully cleared the assessment test, Best of luck for coming assessments')!!}</h3>');
                        }
                        setTimeout(()=>{
                            window.location.replace(response.url);
                        }, 5000);
                    }

                } else if(response.error == true) {
                    //console.log('2');
                    $('#chapter_sections').html('<h3 style="text-align:center; margin-top:100px">{!!__('Alas!!! <br/> You could not make the assessment test, Better luck next time')!!}</h3>');
                        setTimeout(()=>{
                        window.location.replace(response.url);
                    }, 5000);
                }
            },
            error: function () { 
                $("html, body").animate({ scrollTop: 1000 }, "slow");
                //console.log('resp2',response.error);
                if (response.error == false) {
                    setTimeout(()=>{
                        window.location.replace(response.url);
                    }, 5000);

                } if(response.error == true) {
                    setTimeout(()=>{
                        window.location.replace(response.url);
                    }, 5000);
                }
            },
            complete: function (response) {
                if (response.error == 'false') {

                }
            }

        });

        return false;
    });
    
    $('#next,#prev').on('click', function(){
        if($(this).attr('id') == 'prev'){
            if(section_ > 1){
                section_ --;
            }
        }else{
            section_ ++;
        }
        saveSection(section_);
    });
    
    @if(!empty($purchase))
        @php
        $progress = \DB::table('user_progress')->where([
            'chapter_id'=> $chapter->chapter_id,
            'user_purchase_id'=>$purchase->id,
            'user_id'=> \Session::get('user_id')
        ])->first();
        @endphp
        @if($progress &&  $progress->section > 0)
            $(document).ready(function(){
                sectionKey={{($progress->section-1)}};
                section_={{($progress->section-1)}};
                {{---delay untile translations---}}
                window.setTimeout(function(){
                    $('#next').trigger('click');
                },400)
            });
        @endif
   
  
    function saveSection(section){
        $.ajax({
            type: 'POST',
            url: '/ajax-save-section',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {'chapter':{{$chapter->chapter_id}},'course_id':'{{$purchase->course_token}}','section':section_},
            success: function (response) {
              
            },
            error: function () { 
               
            },
            complete: function (response) {
               
            }
        });
    }
    @endif
</script>
<script>
    $(function(){
	$('#inner-content-div').slimScroll({
		height: '400px'
	});
});
</script>

<script>
//Hide Chapter assessment and submit button

            $('#submission').hide();
            $('#test').hide();
    var sections={!! json_encode($sections->map(function($item){ return $item->only(['id','chapter_id','sort_id','title','description']);})) !!};
    var assessments={!! json_encode($assessment) !!};

    var sectionKey=0;
    var assessmentKey=0;

    var Globals =