@extends('_inc/base')

@section('content')
    <div class="p--7">
        <div class="@if($course['category'] == 'business')
                course-banner1
        @elseif($course['category'] == 'programming')
                course-banner2
        @elseif($course['category'] == 'design')
                course-banner1
        @endif">
        </div>
        <div class="container">
            <div class="card course-full">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-sm-6">
                                    <h3><strong>{{ $course['title'] }}</strong></h3>
                                    @if($course['category'] == 'business')
                                        <span class="badge badge-pill badge-warning">{{ $course['category'] }}</span>
                                    @elseif($course['category'] == 'programming')
                                        <span class="badge badge-pill badge-primary">{{ $course['category'] }}</span>
                                    @elseif($course['category'] == 'design')
                                        <span class="badge badge-pill badge-success">{{ $course['category'] }}</span>
                                    @endif
                                    <p class="pt-3">{{ $course['description'] }}</p>
                                    <h3>${{ number_format($course['cost'],2,".",",") }}</h3>
                                    <div class="star-rating">
                                        <span class="fa fa-star-o" data-rating="1"></span>
                                        <span class="fa fa-star-o" data-rating="2"></span>
                                        <span class="fa fa-star-o" data-rating="3"></span>
                                        <span class="fa fa-star-o" data-rating="4"></span>
                                        <span class="fa fa-star-o" data-rating="5"></span>
                                        <input type="hidden" name="whatever1" class="rating-value" value="{{ $course['meta_data']->rating }}">
                                    </div>
                                    <small><i class="ni ni-circle-08"></i> &nbsp;&nbsp;{{ $course['enrolled_count'] }} students enrolled</small><br><br>
                                </div>
                                <div class="col-sm-6">
                                    <div class="card pull-right" style="width: 91.5%;">
                                        <video style="width:100%" id="my-video" class="video-js pull-right" controls preload="auto" height="264"
                                               poster="{{ base_url().'videos/screenshot.png' }}" data-setup="{}">
                                            <source src="{{ base_url().'videos/courses/intro/'.$course['meta_data']->intro_video }}" type='video/mp4'>
                                            <p class="vjs-no-js">
                                                To view this video please enable JavaScript, and consider upgrading to a web browser that
                                                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                            </p>
                                        </video>
                                        <div class="row buy-options">
                                            <div class="col-sm-6 no-right">
                                                <a href="" class="btn btn-success">
                                                    <span class="nav-link-inner--text">Enroll now</span>
                                                </a>
                                            </div>
                                            <div class="col-sm-6 no-left">
                                                <a href="" class="btn btn-secondary">
                                                    <span class="nav-link-inner--text">Save as favorite</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if(count($course['key_topics']) > 0)
                                <div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <h5 class="font-weight-bold z-m-b">What you'll learn</h5>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row p-4" style="padding-left:0 !important;">
                                        @foreach($course['key_topics'] as $key_topic)
                                            <div class="col-lg-6" style="margin-bottom:20px;">
                                                <div class="row">
                                                    <div class="col-lg-2">
                                                        <img src="https://png.icons8.com/color/40/3498db/checked.png">
                                                    </div>
                                                    <div class="col-lg-10">
                                                        <p class="font-weight-bold"><b>{{ $key_topic->title }}</b></p>
                                                        <p>{{ $key_topic->body }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            <div>
                                <hr>
                                <h5 class="font-weight-bold z-m-b">Course Description</h5>
                                <hr>
                                <div class="post-viewer markdownHTML" data-markdown="{{ $course['body'] }}"></div>
                                <div class="__div_cover"></div>
                                <a id="__view_all" href="javascript:"><small>View more</small></a>
                            </div>
                            <div>
                                <hr>
                                <h5 class="font-weight-bold z-m-b">Course Structure</h5>
                                <hr>
                                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                    @foreach($sections as $section)
                                        <div class="panel panel-default">
                                            <div class="panel-heading" role="tab" id="heading-{{ $loop->index }}">
                                                <p class="panel-title text-left z-m-b">
                                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-{{ $loop->index }}" aria-expanded="false" aria-controls="collapse-{{ $loop->index }}">
                                                        Section - {{ $loop->index+1 }}  {{ $section->title }}
                                                        <span class="pull-right">9 Courses</span>
                                                    </a>
                                                </p>
                                            </div>
                                            <div id="collapse-{{ $loop->index }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ $loop->index }}">
                                                <div class="panel-body">
                                                    <p class="z-m-b course-p"><i class="ni ni-button-play"></i> The fundamentals of designing a business logo <span class="pull-right">32:21</span></p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div>
                                <hr>
                                <h4 class="font-weight-bold z-m-b">Your Instructor</h4>
                                <hr>
                                <div class="row p-4" style="padding-left: 0 !important;">
                                    <div class="col-lg-1">
                                        <img src="{{ base_url().'img/user-icon.png' }}" alt="Circle image" class="img-fluid rounded-circle shadow" style="width: 50px;">
                                    </div>
                                    <div class="col-lg-8">
                                        <p class="text-primary font-weight-bold z-m-b">Onomor Eseoghene Benjamin</p>
                                        <small>Experienced PHP developer, graphics designer and father to 2 beautiful kids</small>
                                        <br>
                                        <div class="star-rating small-star">
                                            <span class="fa fa-star-o" data-rating="1"></span>
                                            <span class="fa fa-star-o" data-rating="2"></span>
                                            <span class="fa fa-star-o" data-rating="3"></span>
                                            <span class="fa fa-star-o" data-rating="4"></span>
                                            <span class="fa fa-star-o" data-rating="5"></span>
                                            <input type="hidden" class="rating-value" value="{{ $course['meta_data']->rating }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <hr>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <h4 class="text-center font-weight-bold">Why this course is right for YOU*</h4>
                                        <p class="text-center">Experience more freedom by enrolling for this course and getting started right away.</p>
                                    </div>
                                </div>
                                <hr>
                                <div class="row p-4">
                                    <div class="col-lg-6">
                                        <div class="row">
                                            <div class="col-lg-2">
                                                <img src="https://png.icons8.com/color/40/3498db/overview-pages-3.png">
                                            </div>
                                            <div class="col-lg-10">
                                                <p class="font-weight-bold"><b>Structured Learning Process</b></p>
                                                <p>Learning should be organized, that's why we take our time to structure and plan each class carefully.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="row">
                                            <div class="col-lg-2">
                                                <img src="https://png.icons8.com/color/40/3498db/low-price.png">
                                            </div>
                                            <div class="col-lg-10">
                                                <p class="font-weight-bold"><b>Affordable Pricing</b></p>
                                                <p>Learning should be organized, that's why we take our time to structure and plan each class carefully.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row p-4">
                                    <div class="col-lg-6">
                                        <div class="row">
                                            <div class="col-lg-2">
                                                <img src="https://png.icons8.com/color/40/3498db/floating-guru.png">
                                            </div>
                                            <div class="col-lg-10">
                                                <p class="font-weight-bold"><b>Experienced Instructors</b></p>
                                                <p>Learning should be organized, that's why we take our time to structure and plan each class carefully.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="row">
                                            <div class="col-lg-2">
                                                <img src="https://png.icons8.com/color/40/3498db/about.png">
                                            </div>
                                            <div class="col-lg-10">
                                                <p class="font-weight-bold"><b>Helpful Support</b></p>
                                                <p>Learning should be organized, that's why we take our time to structure and plan each class carefully.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://vjs.zencdn.net/7.2.3/video.js"></script>
@endsection