@extends("layouts.public")
@section("title",$lesson->name)

@section("keywords"," material, questions, answers, make-it.co")
@if($lesson->type=="Text")
    @section("description",preg_replace('#<[^>]+>#', ' ', $lesson->introduction ))
@else
    @section("description",preg_replace('#<[^>]+>#', ' ', $lesson->description ))
@endif
@section("author",$lesson->instructor->name ?? "make-it.co")
@section("css")
    <script src="https://icemix.cdn.vooplayer.com/assets/vooplayer.js"></script>@endsection
@section("content")
    <main>
        <!-- Static Banner Area Start -->
        <section id="slider">
            <div class="static-banner relative">
                <div class="overlay blue-overlay-5"></div>
                <div class="page-head">
                    <h2 class="page-title">{{ucwords($lesson->name)}}</h2>
                    <ul class="page-title-btn">
                        <li><a href="{{url("/")}}">Home <i class="fa fa-caret-right" aria-hidden="true"></i></a></li>
                        <li><a href="{{route("resources")}}">Resourses <i class="fa fa-caret-right"
                                                                          aria-hidden="true"></i></a></li>
                        <li><a href="#" class="active">Resource Details</a></li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- Static Banner Area End -->
        <!-- Web Design Course Area Start -->
        <section class="section-full">
            <div class="container">
                <div class="row">
                    <div class="web-course">
                        <div class="col-md-8 col-xs-12">
                            <div class="left-web-course">

                                <div class="tab-menu mt-20">
                                    <ul id="tabs-swipe-demo" class="tabs course-tab">
                                        <li class="tab"><a class="active" href="#objectives">Objective</a></li>
                                        <li class="tab"><a href="#resource-outline">Content</a></li>
                                        <li class="tab"><a href="#comments">Comments</a></li>
                                        <div class="indicator" style="right: 286.75px; left: 395.25px;"></div>
                                    </ul>
                                </div>
                                <div id="objectives" class="objectives mt-30 active">
                                    @if($lesson->type=="Text")
                                        <p>{!! $lesson->introduction ?? "No introduction click on the Content section" !!}</p>
                                    @else
                                        <p>{!! $lesson->description ?? "No introduction click on the Content section" !!}</p>

                                    @endif
                                        @if($lesson->type=="File")
                                            <h4>Download file below</h4>
                                            <br/>
                                            <h3><a href="{{$lesson->file->url}}" target="_blank">Click here to download
                                                    - {{$lesson->name ?? "Unknown file"}}</a></h3>
                                        @endif
                                </div>
                                <div id="resource-outline" class="course-outline mt-30" style="display: none;">
                                    @if($lesson->type=="Text")
                                        <p>{!! $lesson->description ?? "No introduction click on the Content section" !!}</p>
                                    @endif
                                    @if($lesson->type=="File")
                                        <h4>Download file below</h4>
                                        <br/>
                                        <h3><a href="{{$lesson->file->url}}" target="_blank">Click here to download
                                                - {{$lesson->name ?? "Unknown file"}}</a></h3>
                                    @endif
                                    @if($lesson->type=="Video")
									{{--<iframe allow="autoplay" class="video-player-container vooplayer"
                                                data-playerId="MTM1NzYz" allowtransparency="true" style="max-width:100%"
                                                name="vooplayerframe" allowfullscreen="true" src="{{$lesson->path}}"
                                                watch-type="" url-params="" frameborder="0" scrolling="no"></iframe>
									--}}

                                   
									<iframe width="560" height="315" src="{{$lesson->path}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
									@endif

                                </div>
                                <div id="comments" class="comments mt-30 " style="display: none;">
                                    <div class="total-comment">
                                        @foreach($lesson->comments as $comment)
                                            <div class="single-comment">
                                                <div class="comment-head">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <a href="#">
                                                                <img class="media-object"
                                                                     style="width: 70px; height: 70px"
                                                                     src="{{asset($comment->user->avatar)}}" alt="...">
                                                            </a>
                                                        </div>
                                                        <div class="media-body">
                                                            <h4 class="media-heading">{{$comment->user->name}}</h4>
                                                            <p>{{\Carbon\Carbon::parse($comment->created_at)->diffForHumans()}}</p>
                                                        </div>
                                                    </div>
                                                    <a href="#" class="btn"><i class="fa fa-reply"
                                                                               aria-hidden="true"></i>Reply</a>
                                                </div>
                                                <div class="comment-body">
                                                    <p class="mt-15">{!! $comment->content !!}</p>
                                                </div>
                                            </div>
                                            @foreach($comment->comments as $com)
                                                <div class="single-comment ml-20 mt-30">
                                                    <div class="comment-head">
                                                        <div class="media">
                                                            <div class="media-left">
                                                                <a href="{{route("profile",$com->id)}}">
                                                                    <img class="media-object"
                                                                         style="width: 70px; height: 70px"
                                                                         src="{{asset($com->user->avatar)}}" alt="...">
                                                                </a>
                                                            </div>
                                                            <div class="media-body">
                                                                <h4 class="media-heading">{{$com->user->name}}</h4>
                                                                <p>{{\Carbon\Carbon::parse($com->created_at)->diffForHumans()}}</p>
                                                            </div>
                                                        </div>
                                                        <a href="#" class="btn"><i class="fa fa-reply"
                                                                                   aria-hidden="true"></i>Reply</a>
                                                    </div>
                                                    <div class="comment-body">
                                                        <p class="mt-15">
                                                            {!! $com->content !!}
                                                        </p>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endforeach
                                    </div>
                                    <div class="leave-comment">
                                        <h4>Leave a Comment</h4>
                                        <form action="#">
                                            <div class="col-sm-7 pn1">
                                                <p><input placeholder="First Name" onfocus="this.placeholder = ''"
                                                          onblur="this.placeholder = 'First Name'" type="text"></p>
                                                <p><textarea placeholder="Comment" onfocus="this.placeholder = ''"
                                                             onblur="this.placeholder = 'Comment'"></textarea></p>
                                            </div>
                                            <div class="col-sm-5 pn2">
                                                <p><input placeholder="Email Address" onfocus="this.placeholder = ''"
                                                          onblur="this.placeholder = 'Email Address'" type="email"></p>
                                                <p><input placeholder="Phone Number" onfocus="this.placeholder = ''"
                                                          onblur="this.placeholder = 'Phone Number'" type="text"></p>
                                                <p>
                                                    <button class="btn submit-btn">Submit Comment</button>
                                                </p>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-xs-12">
                            <div class="right-web-course">
                                <div class="single-info flex space-between">
                                    <h4><span class="et-line icon-profile-male"></span>Trainer’s Name</h4>
                                    <h4>
                                        <a href="{{route("profile",$lesson->instructor_id ?? 0)}}">{{$lesson->instructor->name ?? "Not available"}}</a>
                                    </h4>
                                </div>
                                <div class="single-info flex space-between">
                                    <h4><span class="et-line icon-pricetags"></span>Lesson Price</h4>
                                    <h4>{{$lesson->price ?? "0"}}F</h4>
                                </div>
                                <div class="single-info flex space-between">
                                    <h4><span class="et-line icon-profile-male"></span>Readers</h4>
                                    <h4>{{$lesson->readings->count()}}</h4>
                                </div>

                                <div class="single-info flex space-between">
                                    <h4><span class="et-line icon-bargraph"></span>Level</h4>
                                    <h4>{{$lesson->level->name ?? "All"}}</h4>
                                </div>
                                <div class="single-info flex space-between">
                                    <h4><span class="et-line icon-flag"></span>Category or Subject</h4>
                                    <h4>{{$lesson->category->name ?? "All"}}</h4>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- / #Web Design Course End -->
        <!-- Col To Action Start -->

        <!-- Col To Action End -->
        <!-- Related Course Area Start -->

        <!-- / #Related Course End -->
    </main>
@endsection