@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">
                    <div class="col-md-8">


                    @foreach ($blogs as $blog)
                        <div class="main-detels pt-3">
                            <div class="img-detels-main">
                                <img src="{{ $blog->getFirstMediaUrl('blogs_image') }}" alt="{{ $blog->name }}">
                            </div>
                            <div class="text-detels">
                                <h4 class="postbox-title">
                                    {{ $blog->name }}
                                 </h4>
                                <p> 
                                  {!! $blog->description !!}
                                </p>
                            </div>
                        </div>
                         @endforeach
                  
                    </div>
                    <div class="col-md-3" style="width: 30%;">

                         <div class="sidebar-widget mb-45">
                            <h4 class="sidebar-widget-title mb-40">{{ \App\Helpers\TranslationHelper::translate('Royal Crown Vip News and video') }}</h4>
                            <div class="sidebar-widget-list">
                                <a href="{{route('regular-card')}}">
                                    <div class="icon-wsem">
                                        <i class="fa fa-arrow-right-long wsem"></i>
                                    </div>
                                {{ \App\Helpers\TranslationHelper::translate('Regular User Cards') }}
                                </a>
                                <a href="{{route('royal-card')}}">
                                    <div class="icon-wsem">
                                        <i class="fa fa-arrow-right-long wsem"></i>
                                    </div>
                                      {{ \App\Helpers\TranslationHelper::translate('Royal Cards') }}
                                </a>
                                <a href="{{route('imperial-card')}}">
                                    <div class="icon-wsem">
                                        <i class="fa fa-arrow-right-long wsem"></i>
                                    </div>
                                      {{ \App\Helpers\TranslationHelper::translate('Imperial Cards') }}
                                </a>
                            </div>
                        </div>

                        

                        {{-- <div class="sidebar-widgemd mb-45">
                            <h4 class="sidebar-widget-title mb-40">{{ \App\Helpers\TranslationHelper::translate('Latest Videos on Cryptocurrencies') }}</h4>
                            <div class="sidebar-widget-content">
                                <div class="sidebar-widget-post">
                        
                                    @foreach ($news as $new)
                                    <div style="background-color: #a42249; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); padding: 10px; border-radius:12px; gap: 20px" class="rc-post mb-15 d-flex align-items-center">
                                     
                                         <video width="80%" height="150" controls>
            <source src="{{ $new->getFirstMediaUrl('newsnews_video') }}" type="video/mp4">
        </video>
                                        <div class="rc-post-content">
                                      
                                            <h3 class="rc-post-title">
                                                <a href="{{route('blogs')}}">{{ \App\Helpers\TranslationHelper::translate('Watch More Videos->') }}</a>
                                            </h3>
                                        </div>
                                    </div>
                                      @endforeach 
                                   
                                </div>
                            </div>
                        </div> --}}
                        
                    </div>
                </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