@extends('front.layouts.app', ['title' => 'blogs'])

@section('content')
    {{-- <div class="overlay" id="overlay">
    <div class="container h-100">
        <div class="row align-items-center justify-content-center h-100">
            <div class="col-md-4 text-center text-md-start">
                <p class="coming-soon">{{ \App\Helpers\TranslationHelper::translate('This content will be available soon') }}</p>
            </div>
            <div class="col-md-4 text-center">
                <button class="lock-btn" onclick="unlockContent()">
                    <img src="{{ asset('front/assets/img/lock.png') }}" alt="" class="img-fluid">
                </button>
            </div>
        </div>
    </div>
</div> --}}
    <main>
        <!-- hero section -->
        <section class="hero-section">
            <div class="overlay"></div>
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-12 text-center">
                        <div class="text-hero-7">
                            <h2 data-aos="zoom-in" data-aos-duration="1000">
                                {{ \App\Helpers\TranslationHelper::translate('Royal Crown Vip News and video') }}
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="detels-vido">
            <div class="container">
                <div class="row">
                    @foreach ($news->chunk(2) as $chunk)
                        
                        <div class="row mb-4">
                            @foreach ($chunk as $item)
                                @php
                                    $locale = app()->getLocale();
                                    $mediaKey = 'news_video_' . $locale;
                                    $videoUrl = $item->getExternalMediaUrl($mediaKey);
                                @endphp

                                @if ($videoUrl)
                                    <div class="col-md-6">
                                        <div class="video-container"
                                            style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 20px;">
                                            <iframe src="{{ $videoUrl }}" frameborder="0" allowfullscreen
                                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px;">
                                            </iframe>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @endforeach
                </div>
            </div>
        </section>



    </main>
@endsection



@push('js')
    {{-- 
<script>
function unlockContent() {
    let overlay = document.getElementById("overlay");
    overlay.style.opacity = "0";

    setTimeout(() => {
        overlay.style.display = "none";
        document.getElementById("main-content").style.display = "block";
    }, 300);
}
</script> --}}
@endpush