@extends('frontend.layouts.app')
@section('title', 'Gallery')
@section('meta', content: 'Gallery Page Description')
@section('content')

    <!-- banner-section -->
    <section class="relative mt-10 pt-[120px] lg:pt-[120px]">
        <!-- Banner Image -->
        <div class="relative">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="h-40 w-full object-cover" />

            <!-- Overlay content -->
            <div class="absolute top-5 lg:top-12 w-full">
                <div class="flex flex-col space-y-4 lg:space-y-8 ml-6 lg:ml-10 px-4 lg:px-6">
                    <h3 class="text-2xl md:text-2xl font-extrabold text-white">{{ __('video-gallery.video_gallery') }}
                    </h3>
                    <div class="flex space-x-3 items-center">
                        <a href="{{ route('homepage') }}" class="text-white font-bold">Home</a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <a href="/video-gallery"
                            class="text-white font-bold hover:cursor-pointer">{{ __('video-gallery.video_gallery') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- banner-section -->

    <!-- content -->
    <section class="min-h-[60vh] flex flex-col">
        <div class="mb-10 text-center mx-auto max-w-8xl">
            <div>
                <!-- Subtitle -->
                <p
                    class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
                    {{ __('video-gallery.in_motion') }}
                </p>

                <!-- Main Title -->
                <h2
                    class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-primary lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                    <span class="relative inline-block text-[#5da174]">
                        <svg viewBox="0 0 52 24" fill="currentColor"
                            class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                            <defs>
                                <pattern id="video-gallery-pattern" x="0" y="0" width=".135" height=".30">
                                    <circle cx="1" cy="1" r=".7"></circle>
                                </pattern>
                            </defs>
                            <rect fill="url(#video-gallery-pattern)" width="52" height="24"></rect>
                        </svg>
                        <span class="relative text-2xl lg:text-3xl font-extrabold text-primary">
                            {{ __('video-gallery.video_gallery') }} </span>
                    </span>
                </h2>
            </div>

            <!-- Description -->
            <p class="p-2 text-base lg:text-lg text-center lg:max-w-4xl mx-auto line-clamp-3 text-gray-600 font-medium">
                {{ __('video-gallery.video_gallery_description') }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-center gap-4 text-center mx-auto">
            @php
                use Illuminate\Support\Str;

                if (!function_exists('generateEmbedIframe')) {
                    function generateEmbedIframe($url)
                    {
                        // YouTube
                        if (Str::contains($url, ['youtube.com', 'youtu.be'])) {
                            if (Str::contains($url, 'watch?v=')) {
                                $embedUrl = str_replace('watch?v=', 'embed/', $url);
                            } elseif (Str::contains($url, 'youtu.be')) {
                                $videoId = Str::afterLast($url, '/');
                                $embedUrl = "https://www.youtube.com/embed/{$videoId}";
                            } else {
                                $embedUrl = $url;
                            }

                            return '<iframe class="w-full h-full" src="' .
                                $embedUrl .
                                '" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
                        }

                        // Facebook
                        if (Str::contains($url, 'facebook.com')) {
                            $encodedUrl = urlencode($url);
                            return '<iframe class="w-full h-full" src="https://www.facebook.com/plugins/video.php?href=' .
                                $encodedUrl .
                                '&show_text=false" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>';
                        }

                        // TikTok
                        if (Str::contains($url, 'tiktok.com')) {
                            $videoId = basename(parse_url($url, PHP_URL_PATH));
                            return '
                                                                                                                                                                                                                                                                                                                                                                                                                                                        <blockquote class="tiktok-embed w-full h-full" cite="' .
                                $url .
                                '" data-video-id="' .
                                $videoId .
                                '" style="max-width: 100%; min-width: 100%; height: 100%;">
                                                                                                                                                                                                                                                                                                                                                                                                                                                            <section></section>
                                                                                                                                                                                                                                                                                                                                                                                                                                                        </blockquote>
                                                                                                                                                                                                                                                                                                                                                                                                                                                        <script async src="https://www.tiktok.com/embed.js"></script>';
                        }

                        // Instagram
                        if (Str::contains($url, 'instagram.com')) {
                            return '
                                                                                                                                                                                                                                                                                                                                                                                                                                                        <blockquote class="instagram-media w-full h-full" data-instgrm-permalink="' .
                                $url .
                                '" data-instgrm-version="14" style="margin: auto;"></blockquote>
                                                                                                                                                                                                                                                                                                                                                                                                                                                        <script async src="https://www.instagram.com/embed.js"></script>';
                        }

                        return '<p>Unsupported video format</p>';
                    }
                }
            @endphp

            @foreach ($videoGalleries as $video)
                @php
                    $url = $video->value;
                    $aspectClass = 'aspect-video'; // default 16:9

                    if (Str::contains($url, 'instagram.com')) {
                        $aspectClass = 'aspect-[4/5]'; // Instagram portrait
                    } elseif (Str::contains($url, 'tiktok.com')) {
                        $aspectClass = 'aspect-[9/16]'; // TikTok vertical
                    } elseif (Str::contains($url, 'facebook.com')) {
                        $aspectClass = 'aspect-[9/16]'; // Facebook 16:9
                    } elseif (Str::contains($url, ['youtube.com', 'youtu.be'])) {
                        $aspectClass = 'aspect-[9/16]'; // YouTube 16:9
                    }
                @endphp

                <div class="w-full {{ $aspectClass }} overflow-hidden mb-6 relative flex items-start rounded-lg shadow-lg">
                    {!! generateEmbedIframe($url) !!}
                </div>
            @endforeach
        </div>
        </div>
    </section>

@endsection
@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
@endpush