@extends('front.layouts.app')

@section('content')
    @if (!$project->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="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="{{ $project->getFirstMediaUrl('projects_image') }}" class="img-fluid rounded"
                        alt="{{ $project->name }}" 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">{{ $project->name }}</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; 
                            max-height: 200px; overflow-y: auto;">
                        <p class="text-white">{!! $project->description !!}</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>

@php
    $langKey = app()->getLocale();
@endphp

<section class="video-section py-3" 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">
                        @php
                            // $video1 = $project->getFirstMediaUrl("projectsprojectsproject_video_{$langKey}");
                            $video1 = $project->getExternalMediaUrl("projectsprojectsproject_video_{$langKey}");
                            
                        @endphp
                        @if($video1)
                            {{-- <video controls style="width: 100%; height: 250px; object-fit: cover;">
                                <source src="{{ $video1 }}" type="video/mp4">
                            </video> --}}
                            {{-- <iframe src="https://youtu.be/cL5cvFxrxAE?si=PWBGhue_gXUTzMQs" frameborder="0" allowfullscreen
                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px;">
                </iframe> --}}
                <iframe  src="{{ $video1 }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        @else
                            <p class="text-white text-center">{{ \App\Helpers\TranslationHelper::translate('No video available') }}</p>
                        @endif
                    </div>
                </div>
            </div>
            @php
                $translatedNames = [
                    $project->getTranslation('name', 'en'),
                    $project->getTranslation('name', 'ar'),
                    $project->getTranslation('name', 'fr'),
                ];
            @endphp

        @if(!in_array('Investment & Stock', $translatedNames))
            <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">
                        @php
                            // $video2 = $project->getFirstMediaUrl("projectsprojectsproject_video_tow_{$langKey}");
                            $projectName = $project->getTranslation('name', $langKey); 
                            $video2 = $project->getExternalMediaUrl("projectsprojectsproject_video_tow_{$langKey}");
                        @endphp
                    
                        @if($video2)
                            {{-- <video controls style="width: 100%; height: 250px; object-fit: cover;">
                                <source src="{{ $video2 }}" type="video/mp4">
                            </video> --}}

                             <iframe  src="{{ $video2 }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        @else
                            <p class="text-white text-center">{{ \App\Helpers\TranslationHelper::translate('No video available') }}</p>
                        @endif
                    
                    </div>
                </div>
            </div>
        @endif

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

@php
    $locale = app()->getLocale();
@endphp

@include('front.pages.stock_projects')


<br><br>

@if($stocks->isNotEmpty())
    <section class="card-one" style="padding-top: 15px;">
        <div class="container">
            <div class="d-flex justify-content-center align-items-center">
                <h2>{{ \App\Helpers\TranslationHelper::translate('Stock Cards') }}</h2>
            </div>
            <div class="row pt-5" style="padding-top: 1rem !important;">
                @foreach ($stocks as $stock)
                    @php
                        // decode title + description حسب اللغة
                        $title = is_array($stock->title) 
                            ? ($stock->title[$locale] ?? '') 
                            : (json_decode($stock->title, true)[$locale] ?? '');

                        $description = is_array($stock->description) 
                            ? ($stock->description[$locale] ?? '') 
                            : (json_decode($stock->description, true)[$locale] ?? '');
                    @endphp

                    <div class="col-md-4">
                        <div class="product-card" data-aos="fade-up" data-aos-duration="1000" style="width: 100%">
                            <img src="{{ asset('storage/'.$stock->image) }}" alt="Stock Image">
                            
                            <h3 style="color: white">{{ $title }}</h3>

                            <span class="badge" style="font-size: 1.2rem; padding: 8px 12px;">   
                                {{ \App\Helpers\TranslationHelper::translate('Stocks') }} : {{ $stock->from }} - {{ $stock->to }}
                            </span>

                            <div class="product-details product-details-{{ $stock->id }}"
                                style="display: none; background: #470d14; color: #fff; padding: 10px; border-radius: 10px; margin-top: 10px;">
                                <div style="max-height: 150px; overflow-y: auto; padding-right: 10px;">
                                    {!! strip_tags($description) !!}
                                </div>
                            </div>

                            <div class="d-flex justify-content-between mt-3">
                                <a href="javascript:void(0);"
                                    class="buy-now-btn custom-button btn-custom description-toggle more-info-toggle"
                                    data-id="{{ $stock->id }}">
                                    {{ \App\Helpers\TranslationHelper::translate('Buy Now') }}
                                </a>

                                <a href="{{ route('show-stock', ['id' => $stock->id]) }}"
                                    class="custom-button btn-custom">
                                    {{ \App\Helpers\TranslationHelper::translate('Details') }}
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif

    <style>
        .btn-custom {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48%;
            padding: 12px;
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            text-align: center;
            transition: 0.3s;
        }

        .btn-custom:hover {
            background-color: #470d14;
            color: #fff;
        }

        .product-details .d-flex {
            gap: 10px;
        }
    </style>


@include('front.pages.modal-buy')
@include('front.pages.buy_stock_project')



@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