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

{{-- @php
    $media = $show_card->getFirstMedia('cards');
@endphp --}}

    <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>
                    </div>
                </div>

                {{-- <div class="col-md-6">
                    <div class="main-detels-tow">
                        <div class="video-container"
                            style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
                            <video controls style="border-radius: 12px; width: 100%;">
                                <source src="{{ $show_card->getFirstMediaUrl('cardscard_video') }}" type="video/mp4">
                            </video>
                        </div>
                        @if ($show_card->getFirstMediaUrl('cardscard_video_tow'))
                            <div style="height: 20px;"></div>
                            <video src="{{ $show_card->getFirstMediaUrl('cardscard_video_tow') }}" controls
                                style="border-radius: 12px; width: 100%;">
                            </video>
                        @endif
                    </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
  {{-- {{ dd($videoUrlTow) }} --}}
<div class="col-md-6">
    <div class="main-detels-tow">
        <div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
            <video controls style="border-radius: 12px; width: 100%;">
                {{-- <source src="{{ $show_card->getFirstMediaUrl("cardscard_video_$locale") }}" type="video/mp4"> --}}
                {{-- <source src="{{ $show_card->getMediaUrlFromCollection("card_video_$locale") }}" type="video/mp4"> --}}
                <source src="{{ $videoUrl }}" type="video/mp4">
                  
                {{ __('Your browser does not support the video tag.') }}
            </video>
        </div>

        {{-- @if ($show_card->getFirstMediaUrl("cardscard_video_tow_$locale")) --}}
        @if ($videoUrlTow)
            <div style="height: 20px;"></div>
            <video controls style="border-radius: 12px; width: 100%;">
                {{-- <source src="{{ $show_card->getFirstMediaUrl("cardscard_video_tow_$locale") }}" type="video/mp4"> --}}
                {{-- <source src="{{ $show_card->getMediaUrlFromCollection("card_video_tow_$locale") }}" type="video/mp4"> --}}
                <source src="{{ $videoUrlTow }}" type="video/mp4">
                {{ __('Your browser does not support the video tag.') }}
            </video>
        @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>
@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