@extends('front.layouts.app')

@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>  --}}

    <section class="hero-section py-5" style="background: linear-gradient(to right, #a42249, #6d1330);">
        <div class="container">
            <div class="row justify-content-center align-items-center text-center g-4">
                <div class="col-md-3 d-flex flex-column align-items-center align-self-start">
                    <img src="{{ setting('projects_image_royalCrownCoin', 'en') }}" class="img-fluid rounded" alt=""
                        style="max-width: 140px; height: auto;">
                    <div class="d-flex justify-content-center mt-3">
                        <button class="download-btn mx-2">
                            <img src="{{ asset('front/assets/img/android.jpg') }}" alt="Download for Android">
                        </button>
                        <button class="download-btn mx-2">
                            <img src="{{ asset('front/assets/img/ios.jpg') }}" alt="Download for iPhone">
                        </button>
                    </div>
                </div>
                <div class="col-md-6 text-center">
                    <h2 class="fw-bold text-white" data-aos="zoom-in">
                        {{ setting('title_royalCrownCoin', app()->getLocale()) }}</h2>
                    <div class="description-box p-4 rounded shadow-lg"
                        style="background: rgba(255, 255, 255, 0.2); line-height: 1.8em; max-width: 100%; margin: auto;">
                        <p class="text-white">{!! setting('description_royalCrownCoin', app()->getLocale()) !!}</p>
                    </div>
                </div>
                <div class="col-md-3 d-flex justify-content-center align-self-start mt-n3">
                    <img src="{{ asset(setting('image_logo', 'en')) }}" class="img-fluid rounded" alt="Logo"
                        style="max-width: 150px; height: auto;">
                </div>
            </div>
        </div>
    </section>


<section class="video-section py-5" style="background: linear-gradient(to right, #a42249, #6d1330);">
    <div class="container" style="max-width: 960px; margin: auto;">

@php
    $locale = app()->getLocale();
    $videoOneSetting = \App\Models\Setting::where('option', 'Video_one_royalCrownCoin')->first();
    $videoTwoSetting = \App\Models\Setting::where('option', 'Video_tow_royalCrownCoin')->first();

    // $videoOneUrl = $videoOneSetting?->getFirstMediaUrl("Video_one_royalCrownCoin_$locale");
    $videoOneLinks = $videoOneSetting->value;
    if ($videoOneLinks && str_contains($videoOneLinks, 'youtube.com/watch')) {
        parse_str(parse_url($videoOneLinks, PHP_URL_QUERY), $query);
        $youtubeId = $query['v'] ?? '';
        $videoOneLinks = 'https://www.youtube.com/embed/' . $youtubeId;
    } elseif ($videoOneLinks && str_contains($videoOneLinks, 'youtu.be/')) {
        // دعم روابط youtu.be القصيرة
        $youtubeId = last(explode('/', $videoOneLinks));
        $videoOneLinks = 'https://www.youtube.com/embed/' . $youtubeId;
    }
    // $videoTwoUrl = $videoTwoSetting?->getFirstMediaUrl("Video_tow_royalCrownCoin_$locale");
    $videoTwoUrl = $videoOneSetting->value;
    if ($videoTwoUrl && str_contains($videoTwoUrl, 'youtube.com/watch')) {
        parse_str(parse_url($videoTwoUrl, PHP_URL_QUERY), $query);
        $youtubeId = $query['v'] ?? '';
        $videoTwoUrl = 'https://www.youtube.com/embed/' . $youtubeId;
    } elseif ($videoTwoUrl && str_contains($videoTwoUrl, 'youtu.be/')) {
        // دعم روابط youtu.be القصيرة
        $youtubeId = last(explode('/', $videoTwoUrl));
        $videoTwoUrl = 'https://www.youtube.com/embed/' . $youtubeId;
    }
@endphp

<div class="row justify-content-center">
    <div class="col-md-6 d-flex justify-content-center">
        <div class="card shadow-lg border-0" style="width: 90%;">
            <div class="ratio ratio-16x9">
                @if ($videoOneLinks)
                    {{-- <video controls style="width: 100%; height: 250px; object-fit: cover;">
                        <source src="{{ is_string($videoOneUrl) ? $videoOneUrl : '' }}" type="video/mp4">
                        {{ __('Your browser does not support the video tag.') }}
                    </video> --}}
                        <iframe width="300" height="200" src="{{ $videoOneLinks }}" frameborder="0"
                        allowfullscreen style="max-width: 100%; border-radius: 10px;"></iframe>
                @else
                    <p class="text-center text-muted">{{ __('No video uploaded.') }}</p>
                @endif
            </div>
        </div>
    </div>
    <div class="col-md-6 d-flex justify-content-center">
        <div class="card shadow-lg border-0" style="width: 90%;">
            <div class="ratio ratio-16x9">
                @if ($videoTwoUrl)
                    {{-- <video controls style="width: 100%; height: 250px; object-fit: cover;">
                        <source src="{{ is_string($videoTwoUrl) ? $videoTwoUrl : '' }}" type="video/mp4">
                        {{ __('Your browser does not support the video tag.') }}
                    </video> --}}
                        <iframe width="300" height="200" src="{{ $videoOneLinks }}" frameborder="0"
                        allowfullscreen style="max-width: 100%; border-radius: 10px;"></iframe>
                @else
                    <p class="text-center text-muted">{{ __('No video uploaded.') }}</p>
                @endif
            </div>
        </div>
    </div>
</div>


        <div class="text-center mt-5">
            {{-- <a href="{{ route('buy-couronne') }}" class="btn btn-lg"
               style="background-color: #a42249; color: #FFD700; border: 2px solid #FFD700; border-radius: 50px; padding: 12px 40px; font-weight: bold; transition: all 0.3s ease;">
                  {{ \App\Helpers\TranslationHelper::translate('Buy Royal Crown Currency') }}
            </a> --}}
            @if(auth('customer')->check())
                <a href="{{ route('buy-couronne.form') }}" class="btn btn-lg"
                style="background-color: #a42249; color: #FFD700; border: 2px solid #FFD700; border-radius: 50px; padding: 12px 40px; font-weight: bold; transition: all 0.3s ease;">
                    {{ \App\Helpers\TranslationHelper::translate('Buy Royal Crown Currency') }}
                </a>
            @else
                <a href="{{ route('customer.login') }}" class="btn btn-lg"
                style="background-color: gray; color: #fff; border: 2px solid #ccc; border-radius: 50px; padding: 12px 40px; font-weight: bold; transition: all 0.3s ease;">
                    {{ \App\Helpers\TranslationHelper::translate('Login to Buy') }}
                </a>
            @endif
        </div>
    </div>
</section>



    {{-- <section class="video-section py-5" style="background: linear-gradient(to right, #a42249, #6d1330);">
        <div class="container" style="max-width: 960px; margin: auto;">
            <div class="row justify-content-center">
                <div class="col-md-6 d-flex justify-content-center">
                    <div class="card shadow-lg border-0" style="width: 90%;">
                        <div class="ratio ratio-16x9">
                            <video controls style="width: 100%; height: 250px; object-fit: cover;">
                                <source src="{{ setting('Video_one_royalCrownCoin', 'en') }}" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 d-flex justify-content-center">
                    <div class="card shadow-lg border-0" style="width: 90%;">
                        <div class="ratio ratio-16x9">
                            <video controls style="width: 100%; height: 250px; object-fit: cover;">
                                <source src="{{ setting('Video_tow_royalCrownCoin', 'en') }}" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}


@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