@extends('front.layouts.app')

@section('content')

    @if (!$show_card->is_active)
        <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>
    @endif

    <section class="prodect">
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-6">
                    <div class="img-prodect">
                        <img src="{{ $show_card->getFirstMediaUrl('cards') }}" alt="">
                        <h2 class="mt-3 text-white text-center" style="color:#fff; text-align: center;">
                            {{ $show_card->categorycolid->name }}
                        </h2>
                        <h2 class="mt-3 text-white text-center" style="color:#fff; text-align: center;">
                           {{ \App\Helpers\TranslationHelper::translate('price') }} : {{ $show_card->price }} $
                        </h2>

                        <button class="btn cart buy-card" 
                                data-card-id="{{ $show_card->id }}" 
                                data-card-price="{{ $show_card->price }}">
                             {{ \App\Helpers\TranslationHelper::translate('Buy Now') }}
                        </button>
                    </div>
                </div>
                @php
    $locale = app()->getLocale(); 
    $languages = array_keys(config('language'));
    if (!in_array($locale, $languages)) {
        $locale = 'en'; 
    }
@endphp


@php
    $videoUrl = $show_card->getExternalMediaUrl("card_video_$locale");
    $videoUrlTow = $show_card->getExternalMediaUrl("card_video_tow_$locale");
@endphp

                <div class="col-md-6">
                    <div class="main-detels-tow">

                        {{-- الفيديو الأول --}}
                        @if ($videoUrl)
                        <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>
                        @endif

                        {{-- الفيديو الثاني --}}
                        @if ($videoUrlTow)
                        <div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
                            <iframe src="{{ $videoUrlTow }}" frameborder="0" allowfullscreen
                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px;">
                            </iframe>
                        </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </section>


    {{-- <section class="vido-detels">
        <div class="container">
            <div class="row">
                <div class="col-md-12 mt-5">
                    <div class="text-slider-2">

                        <div class="alert alert-gold btn-animation mt-4">
                            <div class="service">
                                <div class="row align-items-center">
                                    <div class="col-md-12 service-block">
                                        <div class="media">
                                            <div class="media-body">
                                                <div class="description-box">
                                                    <p>{!! $show_card->des !!}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <br><br>

                    </div>
                </div>
            </div>
        </div>
    </section> --}}

    <style>
        .description-box {
            max-height: 250px;
            overflow-y: auto;
            padding-right: 10px;
        }
    </style>
    @include('front.pages.modal-card')
@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