@extends('app')

@section('title', 'Chapter ')

@section('head')
<style>
    .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;
    }
</style>
@endsection

@section('content')

<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>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' }}">
                    <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>Chapter Time: <span id="time">{{ $chapter_progress }}:00</span></h2>

                </div>
                @endif
            </div>
        </div>
        <div class="row chapter-intro">
            <div class="col-md-10 col-md-offset-1">
                {!! $chapter->description !!}
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                @if(count($chapter_attachment) > 0)
                <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;">
                <a href="{{ url('/profile') }}" class="btn blog-btn" >BACK TO PROFILE</a>

                @if($previous_chapter)
                <a href="{{ url('/chapter/'.$previous_chapter->chapter_id) }}" class="btn blog-btn" >Previous Chapter</a>
                @endif

                @if($next_chapter)
                <a href="{{ url('/chapter/'.$next_chapter->chapter_id) }}" class="btn blog-btn" >Next Chapter</a>
                @else
                <a href="{{ url('/exam') }}" class="btn blog-btn" >Take Exam</a>
                @endif

            </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">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"  >Save</button>
            </div>
        </div>

    </div>
</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('resources/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>

    var Globals =