@extends('front.layouts.app')

@section('content')

    @if (!$show_stock->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="{{ asset('storage/'.$show_stock->image) }}" alt="">
                    <h2 class="mt-3 text-white text-center">
                        {{ $show_stock->title }}
                    </h2>
                    <span class="badge" style="font-size: 1.2rem; padding: 8px 12px;">
                        {{ \App\Helpers\TranslationHelper::translate('Stocks') }} :
                        <span class=" fw-bold">{{ $show_stock->from }} -  {{ $show_stock->to }}</span> 
                    </span>

                    <h2 class="mt-3 text-white text-center">
                        {{ \App\Helpers\TranslationHelper::translate('price of stock') }} : {{ $show_stock->price }}$
                    </h2>
                    <a href="javascript:void(0);"
                        class="buy-now-btn custom-button btn-custom description-toggle more-info-toggle d-block mx-auto text-center"
                        style="width: fit-content;"
                        data-id="{{ $show_stock->id }}">
                        {{ \App\Helpers\TranslationHelper::translate('Buy Now') }}
                    </a>
                </div>
            </div>

            <div class="col-md-6 video-column">
                @php
                    $locale = app()->getLocale(); 
                    $videoUrls = $show_stock->video_url ? json_decode($show_stock->video_url, true) : [];
                @endphp

                @if (!empty($videoUrls[$locale]))
                    <div class="video-container">
                        <iframe src="{{ $show_stock->youtubeEmbedUrl($videoUrls[$locale]) }}" frameborder="0" allowfullscreen></iframe>
                    </div>
                @endif
            </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_stock->description !!}</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;
        }

        .video-column {
            margin-top: 150px;
        }

        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* نسبة 16:9 */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 12px;
        }
    </style>
    @include('front.pages.modal-buy')
@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