@extends('layouts.frontend')

@section('content')
<div class="banner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 class="page-title">Short Videos</h2>
            </div>
        </div>
    </div>
    <a href="#" class="btn-chat">Chat With Us</a>
</div>

<section class="main-sec">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="rt-pnl">
                    <div class="VideoNav">
                        <ul>
                            <li><a href="{{route('frontend.free-videos')}}">View Latest</a></li>
                            <li><a href="{{route('frontend.free-videos-most-viewed')}}">Most Viewed</a></li>
                        </ul>
                    </div>

                    <div class="row mar-top">
                        @if(isset($youtubevideos))
                            @foreach($youtubevideos as $youtubevideo)

                            <div class="col-md-4">
                                <div class="vid-bx">
                                    {!!$youtubevideo->player->embedHtml!!}
                                    
                                    <h3 class="bttm-title">
                                    <a href="#">{{$youtubevideo->snippet->title}}</a>
                                    </h3>
                                    <div class="Videostatistic">
                                        <ul>
                                            <li><i class="fa fa-calendar" style="font-size:14px; color:#203864;"></i> {{date('M d Y',strtotime($youtubevideo->snippet->publishedAt))}}</li>
                                            <li><i class="fa fa-eye" style="font-size:14px; color:#203864;"></i> {{$youtubevideo->statistics->viewCount}}</li>
                                            <li><i class="fa fa-thumbs-up" style="font-size:14px; color:#203864;"></i> {{$youtubevideo->statistics->likeCount}}</li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary btn-round mb-2" data-toggle="modal" data-target="#videodetailModal{{$youtubevideo->id}}">Details of this video</a>
                                </div>
                            </div>

                            @endforeach
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="btm-shape-prt">
        <img class="img-fluid" src="{{asset('f/images/shape2.png')}}" alt="" />
    </div>
</section>
@if(isset($youtubevideos))
    @foreach($youtubevideos as $youtubevideo)
        <!-- Video Details Modal -->
        <div class="modal fade" id="videodetailModal{{$youtubevideo->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">DETAILS</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                    {{$youtubevideo->snippet->description}}
                    </p>
                </div>
                </div>
            </div>
        </div>
    @endforeach
@endif

@endsection
<style>
.Videostatistic ul li {
    display: inline;
    padding-right: 25px;
}
</style>