@extends('layout.guest')

@section('content')
    <div class="my-hijau-content-header">
        <div class="my-hijau-page-title">
            <div class="container">
                <h2 class="text-right">Media</h2>
            </div>
        </div>
        <div class="my-hijau-featured-image"
            style="background-image: url({{ image('aboutus/insideslider-about-1200x149.jpg') }})">
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="latest-news py-10">
        <div class="row mx-10">
            {{-- Individual Videos --}}
            @foreach ($individualVideos as $video)
                <div class="col-md-4 mb-4">
                    <h5 class="fw-bold">{{ $video->title }}</h5>
                    <div class="video-thumbnail position-relative">
                        <div class="video-wrapper" onclick="playVideo(this, '{{ getYouTubeID($video->youtube_url) }}')">
                            <img src="https://img.youtube.com/vi/{{ getYouTubeID($video->youtube_url) }}/hqdefault.jpg" class="img-fluid w-100 rounded-3">
                            <div class="play-button position-absolute top-50 start-50 translate-middle">
                                <i class="bi bi-play-circle-fill fs-2 text-white"></i>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            {{-- Grouped Videos --}}
            @foreach ($sections as $section)
                @if (count($section->media) > 0)
                    <div class="col-12 mb-2 mt-20">
                        <h5 class="fw-bold">{{ $section->name }}</h5>
                    </div>
                @endif
                @foreach ($section->media as $video)
                    <div class="col-md-4 mb-4">
                        <div class="video-thumbnail position-relative">
                            <div class="video-wrapper" onclick="playVideo(this, '{{ getYouTubeID($video->youtube_url) }}')">
                                <img src="https://img.youtube.com/vi/{{ getYouTubeID($video->youtube_url) }}/hqdefault.jpg" class="img-fluid w-100 rounded-3">
                                <div class="play-button position-absolute top-50 start-50 translate-middle">
                                    <i class="bi bi-play-circle-fill fs-2 text-white"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @endforeach
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        function playVideo(element, videoId) {
            const videoWrapper = element.parentElement;

            // Create the iframe
            const iframe = document.createElement('iframe');
            iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
            iframe.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
            iframe.allowFullscreen = true;

            // Set width and height to maintain consistency
            iframe.style.width = "100%";
            iframe.style.height = "100%";

            // Remove thumbnail and insert iframe
            videoWrapper.innerHTML = "";
            videoWrapper.appendChild(iframe);
        }
    </script>
@endsection