@extends('home.layouts.master')
@section('content')
    <!-- Main Container -->
    <main id="main-container">
        <div class="ts-blog section-bg mt-8">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="py-5 text-center" id="heading_ti_adn">
                            <h1 class="font-w700 mb-2" id="f_ad_ne_main_title">
                                Featured Video
                            </h1>
                        </div>
                    </div><!-- col end-->
                </div><!-- row end-->
                <div class="row">
                    @foreach($videos as $video)
                        <div class="col-lg-4 col-md-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms" style="visibility: visible; animation-duration: 1.5s; animation-delay: 400ms; animation-name: fadeInUp;">
                            <div class="post">
                                <div class="post-media post-image">
                                    <a type="button" data-toggle="modal" data-target="#featured_videos_{{$video->id}}" data-effect="mfp-zoom-in">
                                        <img src="https://img.youtube.com/vi/{{$video->embed_code}}/hqdefault.jpg" class="img-fluid" alt="">
                                    </a>
                                </div>

                                <div class="post-body">
                                    <div class="post-meta">
                           <span class="post-author">
                             <a href="#">BY {{$video->user->name}}</a>
                           </span>

                                        <div class="post-meta-date">
                                            {{date('F d, Y',strtotime($video->created_at))}}
                                        </div>
                                    </div>
                                    <div class="entry-header">
                                        <h2 class="entry-title">
                                            <a type="button" data-toggle="modal" data-target="#featured_videos_{{$video->id}}" data-effect="mfp-zoom-in">
                                                {{$video->video_title}}</a>
                                        </h2>
                                    </div><!-- header end -->
                                </div><!-- post-body end -->
                            </div><!-- post end-->
                        </div>
                @endforeach
                <!-- col end-->
                </div><!-- row end-->

                @foreach($videos as $video)
                    <div class="modal fade" id="featured_videos_{{$video->id}}" tabindex="-1" role="dialog" aria-labelledby="modal-block-large" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <!--Content-->
                            <div class="modal-content">

                                <!--Body-->
                                <div class="modal-body mb-0 p-0">

                                    <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{$video->embed_code}}" allowfullscreen></iframe>
                                    </div>

                                </div>

                                <!--Footer-->
                                <div class="modal-footer justify-content-center">
                                    <span class="mr-4">Share on</span>
                                    <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
                                    <!--Twitter-->
                                    <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
                                    <!--Google +-->
                                    <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                                    <!--Linkedin-->
                                    <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>

                                    <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                                </div>

                            </div>
                            <!--/.Content-->

                        </div>
                    </div>
                @endforeach

            </div><!-- container end-->
            <!-- shap image-->
        </div>
@endsection
    {{--@section('script')--}}
        {{--<script type="text/javascript">--}}
            {{--$(window).on('load',function(){--}}
                {{--$('#myModal').modal('show');--}}
            {{--});--}}
        {{--</script>--}}
    {{--@endsection--}}