@extends('edufair.layouts.master')
@section('content')
    <!-- Main Container -->
    <main id="main-container">
        <div class="ts-blog section-bg">
            <div class="content pt-6">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="py-3 pt-5 text-center" id="heading_ti_adn">
                            <h1 class="font-w700 mb-5 text-uppercase" id="f_ad_ne_main_title">
                                INAUGURATION OF VIRTUAL EDUFAIR 2020
                            </h1>
                            <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fonlinekendranews%2Fvideos%2F643271106313895%2F&show_text=false&width=734&appId=407467669615037&height=413" width="100%" height="413" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="py-3 pt-5 text-center" id="heading_ti_adn">
                            <h1 class="font-w700 mb-5" id="f_ad_ne_main_title">
                                {{$heading}}
                            </h1>
                        </div>
                    </div>
                </div>
                <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-->
            </div><!-- container end-->
        </div>
        <!-- Large Block Modal -->
        @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
        <!-- END Large Block Modal -->
@endsection