@extends('website.layouts.web-layouts')
@section('title', 'FBCCI | Galleries')
@section('description', 'Magazine | FBCCI Magazines')
@section('image', '')
@section('url', url()->full())
@section('content')
{{-- bread cumb  --}}
<x-bread-crumb module="Video Gallery" :extra="false" />
<!-- video gallery page start -->
<section class="video-gallery-view">
    <div class="container">
        <div class="row">
            {{-- most latest  video here --}}
            <div class="col-lg-12 mx-auto">
                <div class="big-video">
                    <iframe src="getAndSetSource()" title="{{ $mostRecentVideo->title }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                </div>
            </div>
            {{-- latest video ends  here --}}
        </div>
        <div class="row mt-4">
            <div class="col-lg-12">
                <div class="small-image">
                    <div class="row">
                        {{-- All the videos --}}
                        @foreach($latestVideos as $video)
                        <div class="col-lg-3 col-sm-6">
                            <div class="small-image-item">
                                <div class="image position-relative" onclick="getAndSetSource('{{ $video->url }}')">
                                    <img src="{{ $video->thumbnail }}" class="img-fluid w-100">
                                    <div class="overlay position-absolute">
                                        <i class="fas fa-play"></i>
                                    </div>
                                </div>
                                <div class="text">
                                    <h2>{{ $video->title }}</h2>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        {{-- End of videos --}}
                    </div>
                    {{-- end here --}}
                </div>
            </div>
        </div>
    </div>
</section>
<!-- video gallery page end -->




@endsection

@section('script')
<script>
    getAndSetSource("{{  $mostRecentVideo->url}}");

    function getAndSetSource(url) {
        const videoId = url.split("=")[1];
        var youtub_base_url = "https://www.youtube.com/embed/" + videoId;
        var iframe = document.querySelector('.big-video iframe');
        iframe.src = youtub_base_url;
    }

</script>
@endsection