@extends('app')



@section('title', 'Introduction Page')



@section('head')

<style>

    #html5-lightbox-box{

        margin: 10% auto 0px !important;

    }    

    .html5-elem-box{

        height: auto !important;

    }

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

    }



    #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;

    }

</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">

                <h1>{{ucfirst(__('course'))}}</h1>

            </div>

        </div>

    </div>

</div>

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

    <div class="container">

        <div class="row">

            <div class="col-md-10 col-md-offset-1">

                <div class="chapter-overview" id="scroll">
                    @if($courses->isFoodHandler() )
                    <h3 style="text-transform:uppercase;">{!!__('introduction to food handler safety with certify fast')!!}</h3>
                    @else
                    <h3>{!!strtoupper(__('introduction to tabc seller-server training'))!!}</h3>
                    @endif

                </div>

            </div>

        </div>

        <div class="row chapter-intro">

            <div class="col-md-10 col-md-offset-1">

                <div class="desc" style="disply:block">

                    {!! $courses->description !!}

                </div>

                <div class="desc-1" style="display:none">

                    {!! $courses->description1 !!}

                </div>

            </div>

        </div>

        <div class="row">

            <div class="col-md-10 col-md-offset-1">

                @if(count($course_attachment) > 0)

                <div class="row video-line">

                    @foreach ($course_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 ($course_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;">
                <div class="pagination">
                    <ul>
                        <li><a href="#scroll" id="prev" disabled="disabled" class="prevnext btn-prevnext btn blog-btn prev-btn"></a></li>
                        <li><a href="#scroll" id="next" class="prevnext btn-prevnext btn blog-btn next-btn"></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" value="">{{strtoupper(__('back to profile'))}}</a>

                <a href="{{ url((!empty($purchase) ? $purchase->course_token.'/':'').'chapter/'.$chapter->chapter_id)}}" class="btn blog-btn" value="">{{strtoupper(__('next page'))}}</a>


            </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>

    $(document).ready(function(){

        $("#next").click(function(){

            $(".desc").hide();

            $(".desc-1").show();

            $("#next").attr('disabled','disabled');

            $("#prev").removeAttr('disabled','disabled');

        });

        $("#prev").click(function(){

            $(".desc").show();

            $(".desc-1").hide();

            $("#next").removeAttr('disabled','disabled');

            $("#prev").attr('disabled','disabled');

        });

    })

</script>

@endsection