@extends('layout.guest')

@section('content')
    {{-- Who We Are --}}
    <div class="my-hijau-content-header">
        <div class="my-hijau-page-title">
            <div class="container">
                <h2 class="text-right">Who We Are</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">
            @foreach ($who as $item)
                <div class="col-md-4 mb-2">
                    <div class="video-thumbnail position-relative">
                        <div class="video-wrapper" onclick="playVideo(this, '{{ getYouTubeID($item->url) }}')">
                            <!-- YouTube Thumbnail -->
                            <img src="https://img.youtube.com/vi/{{ getYouTubeID($item->url) }}/hqdefault.jpg" alt="YouTube Thumbnail" class="img-fluid w-100 rounded-3">

                            <!-- Play Button -->
                            <div class="play-button">
                                <i class="bi bi-play-circle-fill"></i>
                            </div>
                        </div>
                    </div>
                </div>
            @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