@php
$about =  $pageData['About'];
@endphp
@extends('front.include.app')
@section('content')
<style>
.video-container {
    position: relative;
    cursor: pointer;
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem;
    background: rgba(0, 0, 0, 0.4);
    padding: 20px;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.video-container:hover .video-play-button {
    opacity: 0;
}
</style>

    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>

    <section class="inner-banner p-0">
        <img src="{{ $about->getFirstMediaUrl('about_banner_img') ?? ''}}" alt="image" class="img-fluid">
        <div class="container">
            <div class="inner-banner__content">
                <h1>
                    <a href="javascript:history.back()" class="back-arrow">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    {{ $service->title }}
                </h1>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><span>//</span></li>
                    <li><a href="">Personal Training</a></li>
                    <li><span>//</span></li>
                    <li><a href="">{{ $service->title }}</a></li>
                </ul>
            </div>
        </div>
    </section>

    @php
    $mediaUrl = $service->getFirstMediaUrl('services');
    $extension = pathinfo($mediaUrl, PATHINFO_EXTENSION);
    $isVideo = in_array(strtolower($extension), ['mp4', 'mov', 'ogg', 'webm']);
@endphp

<section class="training-detail py-5">
    <div class="container">
        <div class="row align-items-center">
            {{-- Left side: Image or Video --}}
            <div class="col-lg-6">
                <figure class="training-detail__img position-relative video-container">
                    @if ($isVideo)
                        <video class="img-fluid video-cover"
                            preload="metadata"
                            muted
                            loop
                            style="width: 100%; height: auto; object-fit: cover;">
                            <source src="{{ $mediaUrl }}" type="video/{{ $extension }}">
                            Your browser does not support the video tag.
                        </video>
                        <div class="video-play-button">
                            <i class="fas fa-play"></i>
                        </div>
                    @else
                        <img src="{{ $mediaUrl }}" alt="image" class="img-fluid">
                    @endif
                </figure>
            </div>

            {{-- Right side: Title and Description --}}
            <div class="col-lg-6">
                <div class="training-detail__content">
                    <h3 class="mainhead">{{ $service->title }}</h3>
                    <p>{!! $service->description !!}</p>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        document.querySelectorAll('.video-container').forEach(container => {
            const video = container.querySelector('video');
            if (video) {
                container.addEventListener('mouseenter', () => {
                    video.play();
                });
        
                container.addEventListener('mouseleave', () => {
                    video.pause();
                    video.currentTime = 0;
                });
            }
        });
    </script>
@endsection