@extends('front.include.app')
@section('content')
    @php
        $setting = $pageData['Setting'];
    @endphp
    {{-- @dd($compData) --}}
    <style>
        .unleash-main {
            background: url('{{ $compData->getFirstMediaUrl('getInTouch_image') ?? '' }}') no-repeat top center/ cover;




            .gallery-card--img {
                position: relative;
            }


            #imageModal {
                display: none;
                justify-content: center;
                align-items: center;
            }


            /*.video-container {*/
            /*    cursor: pointer;*/
            /*    overflow: hidden;*/
            /*    position: relative;*/
            /*}*/

            /*.video-play-button {*/
            /*    position: absolute;*/
            /*    top: 50%;*/
            /*    left: 50%;*/
            /*    transform: translate(-50%, -50%);*/
            /*    color: white;*/
            /*    font-size: 3rem;*/
            /*    pointer-events: none;*/
            /*    opacity: 0.7;*/
            /*    transition: opacity 0.3s ease;*/
            /*}*/

            /*.video-container:hover .video-play-button {*/
            /*    opacity: 0;*/
            /*}*/

            .video-container {
                position: relative;
                cursor: pointer;
                overflow: hidden;
            }

            .video-play-button {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 3rem;
                opacity: 0.8;
                transition: opacity 0.3s ease;
                pointer-events: none;
            }

            .video-container:hover .video-play-button {
                opacity: 0;
            }
    </style>
    <div class="preLoader black">
        <img src="{{ isset($setting) ? $setting->cmsImages('footer_logo') : asset('front/images/No-Image.webp') }}"
            alt="img">
    </div>
    <div class="preLoader white"></div>

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

    <section class="mainSlider">
        <div class="homeSlider">
                    <!--<div class="slide-inner bg-image" data-background="{{ asset('front/images/slidebg.webp') ?? '' }}">-->
                    <div class="slide-inner bg-image"
                        data-background="{{ asset('front/images/Photo-to-replace-the-dummy-photo-open-the-page.webp') ?? '' }}">

                        <div class="container">
                            <div class="row align-items-center">
                                <div class="col-md-12">
                                    <div class="slideContent slideOne">
                                        <div>
                                            <h2>FITNESS CLASSES FOR ALL</h2>
                                            <h3>Making Body
                                                Stronger</h3>
                                        </div>
                                        <div>
                                            <span>//</span>
                                            <p>At PNP Gym, we empower our youth and adult athletes to achieve their
                                                highest potential through integrated fitness programs.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
            </div>
            <!-- end swiper-wrapper -->
            {{-- <div class="swiper-pagination"></div> --}}
            <!-- end swiper-pagination -->
            <!-- <div class="swiper-button-next"><span data-hover="NEXT">NEXT</span></div> -->
            <!-- end swiper-button-next -->
            <!-- <div class="swiper-button-prev"><span data-hover="PREV">PREV</span></div> -->
        </div>
    </section>

    <section class="studio-main">
        <div class="container">
            <div class="grid_imgs">
                <figure>
                    <img src="{{ asset('front/images/IMG_2130.png') ?? '' }}" class="img-fluid" alt="img">
                    <div class="overlay">
                        <!--<h2>boxing classes</h2>-->
                        <!--<h3>Studio of<br>-->
                        <!--    Martial Arts</h3>-->
                    </div>
                </figure>
                <figure>
                    <img src="{{ asset('front/images/IMG_2131.png') ?? '' }}" class="img-fluid" alt="img">
                    <div class="overlay">
                        <!--<h2>special deal</h2>-->
                        <!--<h3>Intensive Body Evolution<br>-->
                        <!--    for the Summer</h3>-->
                        <!--<a href="#" class="themeBtn">Get Now</a>-->
                    </div>
                </figure>
                <figure>
                    <img src="{{ asset('front/images/IMG_2132.jpeg') ?? '' }}" class="img-fluid" alt="img">
                    <div class="overlay">
                        <!--<h2>for runners</h2>-->
                        <!--<h3>Outdoor<br>-->
                        <!--    Races and Marathons</h3>-->
                    </div>
                </figure>
                <figure>
                    <img src="{{ asset('front/images/IMG_2133.png') ?? '' }}" class="img-fluid" alt="img">
                    <div class="overlay">
                        <!--<h2>iron and strong</h2>-->
                        <!--<h3>Ripped Press<br>-->
                        <!--    in Just 2 Months</h3>-->
                    </div>
                </figure>
            </div>
        </div>
    </section>

    <x-diet-section :compData="$compData" :compContent="$compContent" :services="$services" />

    <section class="unleash-main">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-11">
                    <div class="unleash-content">
                        <h2 class="unleash-heading">Unleash Your Potential at PNP Gym</h2>
                        <h3 class="achieve-heading">Achieve More Together</h3>
                        <a href="#" class="themeBtn borderBtn">Get In Touch Today</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="spirit-main">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="row">
                        <div class="col-md-11">
                            <div class="spirit-heading">
                                <h2 class="main-heading"><span>Strength in Body</span>, and Spirit</h2>
                                <div>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque libero
                                        arcu, tempor ut elementum id, tincidunt vel quam. Pellentesque elit.</p>
                                    <a href="#" class="themeBtn borderBtn">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="youth-card">
                                <figure>
                                    <!--<img src="{{ asset('front/images/youthimg.webp') ?? '' }}" class="img-fluid" alt="img">-->
                                    <img src="{{ asset('front/images/IMG_2134.png') ?? '' }}" class="img-fluid"
                                        alt="img" style="width: 462px;">
                                </figure>
                                <div class="youth-content youth">
                                    <h2>Youth Training Plan</h2>
                                    <p>Emphasis on improving core strength, mobility, flexibility, and strength training
                                        that translates athletically while trying to reduce the risk of injury.
                                        Plyometrics, agility, and speed work, and weight training are all examples of the
                                        functionally fit athlete we build at PNP GYM.</p>
                                    <a href="{{ route('youth.training') ?? '' }}" class="themeBtn borderBtn">View All</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="youth-card center-flex">
                                <figure class="w-100">
                                    <img src="{{ asset('front/images/IMG_2136.png') ?? '' }}" class="w-100"
                                        alt="img">


                                </figure>
                                <div class="youth-content adult-plan">
                                    <h2>Adult Training Plan</h2>
                                    <p>Focuses on exercise that improves your daily life.  Movement like deep squats,
                                        mobility, and resistance training.  Compound exercises that engage multiple muscle
                                        groups,focusing on movement patterns like squattting, hinging, lunging, pushing,
                                        pulling, and rotating.  </p>
                                    <a href="{{ route('adult.training') ?? '' }}" class="themeBtn borderBtn">View All</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="youth-card">
                                <figure class="w-100">
                                    <img src="{{ asset('front/images/IMG_2135.png') ?? '' }}" class="w-100"
                                        alt="img">
                                </figure>
                                <div class="youth-content personal-plan">
                                    <h2>Personal Training</h2>
                                    <p>Personalized attention, emotional support, and the ability to adapt in real time are
                                        ways a Personal Trainer can benefit your fitness goals in a way AI cannot. Emotional
                                        intelligencce and nuanced understanding that is crucial for fostering
                                        accountability, motivation and long term change.</p>
                                    <a href="{{ route('personal.training') ?? '' }}" class="themeBtn borderBtn">View
                                        All</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <x-benefit-section :compData="$compData" :compContent="$compContent" />

    <!--<section class="training-main">-->
    <!--    <div class="container">-->
    <!--        <div class="training__title text-center mb-5">-->
    <!--            <h5 class="subhead">training prices</h5>-->
    <!--            <h2 class="mainhead">Book Your Trainings</h2>-->
    <!--        </div>-->
    <!--        <div class="row">-->
    <!--            <div class="col-lg-4">-->
    <!--                <div class="training__card">-->
    <!--                    <div class="training__card--title text-center">-->
    <!--                        <h5>Single Training</h5>-->
    <!--                        <h3><sup>$</sup>19</h3>-->
    <!--                    </div>-->
    <!--                    <ul class="training__card--list">-->
    <!--                        <li><i class="fas fa-check"></i> 1 hour individual training</li>-->
    <!--                        <li><i class="fas fa-check"></i> Personal trainings plan creation</li>-->
    <!--                        <li><i class="fas fa-times"></i> Meal and diet plan creation</li>-->
    <!--                        <li><i class="fas fa-times"></i> Free support and advice</li>-->
    <!--                        <li><i class="fas fa-times"></i> Health monitoring</li>-->
    <!--                    </ul>-->
    <!--                    <div class="training__card--btn text-center">-->
    <!--                        <a href="" class="themeBtn"><em>Get Now</em></a>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div class="col-lg-4">-->
    <!--                <div class="training__card">-->
    <!--                    <div class="training__card--title text-center">-->
    <!--                        <h5>Weekly</h5>-->
    <!--                        <h3><sup>$</sup>50</h3>-->
    <!--                    </div>-->
    <!--                    <ul class="training__card--list">-->
    <!--                        <li><i class="fas fa-check"></i> 1 hour individual training</li>-->
    <!--                        <li><i class="fas fa-check"></i> Personal trainings plan creation</li>-->
    <!--                        <li><i class="fas fa-times"></i> Meal and diet plan creation</li>-->
    <!--                        <li><i class="fas fa-times"></i> Free support and advice</li>-->
    <!--                        <li><i class="fas fa-times"></i> Health monitoring</li>-->
    <!--                    </ul>-->
    <!--                    <div class="training__card--btn text-center">-->
    <!--                        <a href="" class="themeBtn"><em>Get Now</em></a>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div class="col-lg-4">-->
    <!--                <div class="training__card">-->
    <!--                    <div class="training__card--choice">-->
    <!--                        best choice-->
    <!--                    </div>-->
    <!--                    <div class="training__card--title text-center">-->
    <!--                        <h5>Single Training</h5>-->
    <!--                        <h3><sup>$</sup>149</h3>-->
    <!--                    </div>-->
    <!--                    <ul class="training__card--list">-->
    <!--                        <li><i class="fas fa-check"></i> 1 hour individual training</li>-->
    <!--                        <li><i class="fas fa-check"></i> Personal trainings plan creation</li>-->
    <!--                        <li><i class="fas fa-times"></i> Meal and diet plan creation</li>-->
    <!--                        <li><i class="fas fa-times"></i> Free support and advice</li>-->
    <!--                        <li><i class="fas fa-times"></i> Health monitoring</li>-->
    <!--                    </ul>-->
    <!--                    <div class="training__card--btn text-center">-->
    <!--                        <a href="" class="themeBtn"><em>Get Now</em></a>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</section>-->

    <x-motivation-section :compData="$compData" :compContent="$compContent" />

    {{-- <x-calender-section :classTypes="$classTypes" :uniqueSchedules="$uniqueSchedules" /> --}}

    <x-team-section :compData="$compData" :compContent="$compContent" />

    <section class="review-main">
        <div class="container">
            <div class="training__title mb-5">
                <h2 class="mainhead">Reviews From Clients</h2>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="review__wrap">
                        <figure class="review__img">
                            <img src="{{ asset('front/images/review-img') ?? '' }}.webp" alt="image"
                                class="img-fluid">
                        </figure>
                        <div class="review__card">
                            <div class="review__card--content">
                                <h4>A Review From Our Clients</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque libero arcu
                                </p>
                            </div>
                            <div class="review__card--user">
                                <figure class="user__img">
                                    <img src="{{ asset('front/images/user-img') ?? '' }}.webp" alt="image"
                                        class="img-fluid">
                                </figure>
                                <div class="user__content">
                                    <h6>ALEXA</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="gallery-main">
        <div class="container">
            <div class="training__title mb-5">
                <h2 class="mainhead">Gallery</h2>
            </div>

            <div class="row">

                <!--    <div class="col-lg-4">-->
                <!--        <div class="gallery-card">-->
                <!--            <figure class="gallery-card--img position-relative">-->
                <!--                <video class="img-fluid video-cover" preload="metadata" poster="{{ asset('front/images/IMG_6728.webp') }}"  style="height: 341px; width: 450px; object-fit: cover;">-->
                <!--                    <source src="{{ asset('front/images/IMG_6357.MOV') }}" type="video/mp4">-->
                <!--                    Your browser does not support the video tag.-->
                <!--                </video>-->
                <!--                <a href="{{ asset('front/images/IMG_6357.MOV') }}" class="video-play-button" target="_blank">-->
                <!--                    <i class="fas fa-play"></i>-->
                <!--                </a>-->
                <!--            </figure>-->
                <!--        </div>-->
                <!--    </div>-->


                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img position-relative video-container">
                            <video class="img-fluid video-cover" preload="metadata"
                                poster="{{ asset('front/images/IMG_6758.webp') }}"
                                style="height: 341px; width: 100%; object-fit: cover;" muted loop>
                                <source src="{{ asset('front/images/IMG_6132 (1) (1).mov') }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                            <i class="fas fa-play video-play-button"></i>
                        </figure>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img position-relative video-container">
                            <video class="img-fluid video-cover" preload="metadata"
                                poster="{{ asset('front/images/IMG_6728.webp') }}"
                                style="height: 341px; width: 100%; object-fit: cover;" muted loop>
                                <source src="{{ asset('front/images/IMG_6357.mp4') }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                            <i class="fas fa-play video-play-button"></i>
                        </figure>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img position-relative video-container">
                            <video class="img-fluid video-cover" preload="metadata"
                                poster="{{ asset('front/images/IMG_6739.webp') }}"
                                style="height: 341px; width: 100%; object-fit: cover;" muted loop>
                                <source src="{{ asset('front/images/IMG_6352.mp4') }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                            <i class="fas fa-play video-play-button"></i>
                        </figure>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img position-relative video-container">
                            <video class="img-fluid video-cover" preload="metadata"
                                style="height: 341px; width: 100%; object-fit: cover;" muted loop>
                                <source src="{{ asset('front/images/IMG_6347.mp4') }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                            <i class="fas fa-play video-play-button"></i>
                        </figure>
                    </div>
                </div>






                <!--  <div class="col-lg-4">-->
                <!--        <div class="gallery-card">-->
                <!--            <a href="{{ asset('front/images/IMG_6357.mp4') }}" target="_blank" class="video-wrapper">-->
                <!--                <figure class="gallery-card--img position-relative">-->
                <!--                    <video class="img-fluid video-cover" preload="metadata"-->
                <!--                        poster="{{ asset('front/images/IMG_6728.webp') }}"-->
                <!--                        style="height: 341px; width: 100%; object-fit: cover;">-->
                <!--                        <source src="{{ asset('front/images/IMG_6357.mp4') }}" type="video/mp4">-->
                <!--                        Your browser does not support the video tag.-->
                <!--                    </video>-->
                <!--                    <i class="fas fa-play video-play-button"></i>-->
                <!--                </figure>-->
                <!--            </a>-->
                <!--        </div>-->
                <!--  </div>-->



                <!--<div class="col-lg-4">-->
                <!--    <div class="gallery-card">-->
                <!--        <a href="{{ asset('front/images/IMG_6352.mp4') }}" target="_blank" class="video-wrapper">-->
                <!--            <figure class="gallery-card--img position-relative">-->
                <!--                <video class="img-fluid video-cover" preload="metadata" poster="{{ asset('front/images/IMG_6739.webp') }}" style="height: 341px; width: 100%; object-fit: cover;">-->
                <!--                    <source src="{{ asset('front/images/IMG_6352.mp4') }}" type="video/mp4">-->
                <!--                    Your browser does not support the video tag.-->
                <!--                </video>-->
                <!--                <i class="fas fa-play video-play-button"></i>-->
                <!--            </figure>-->
                <!--        </a>-->
                <!--    </div>-->
                <!--</div>-->

                <!--<div class="col-lg-4">-->
                <!--    <div class="gallery-card">-->
                <!--        <a href="{{ asset('front/images/IMG_6347.mp4') }}" target="_blank" class="video-wrapper">-->
                <!--            <figure class="gallery-card--img position-relative">-->
                <!--                <video class="img-fluid video-cover" preload="metadata" poster="{{ asset('front/images/IMG_6758.webp') }}" style="height: 341px; width: 100%; object-fit: cover;">-->
                <!--                    <source src="{{ asset('front/images/IMG_6347.mp4') }}" type="video/mp4">-->
                <!--                    Your browser does not support the video tag.-->
                <!--                </video>-->
                <!--                <i class="fas fa-play video-play-button"></i>-->
                <!--            </figure>-->
                <!--        </a>-->
                <!--    </div>-->
                <!--</div>-->

                <!-- <div class="col-lg-4">-->
                <!--    <div class="gallery-card">-->
                <!--        <a href="{{ asset('front/images/IMG_6132.mp4') }}" target="_blank" class="video-wrapper">-->
                <!--            <figure class="gallery-card--img position-relative">-->
                <!--                <video class="img-fluid video-cover" preload="metadata" poster="{{ asset('front/images/IMG_6753.webp') }}" style="height: 341px; width: 100%; object-fit: cover;">-->
                <!--                    <source src="{{ asset('front/images/IMG_6132.mp4') }}" type="video/mp4">-->
                <!--                    Your browser does not support the video tag.-->
                <!--                </video>-->
                <!--                <i class="fas fa-play video-play-button"></i>-->
                <!--            </figure>-->
                <!--        </a>-->
                <!--    </div>-->
                <!--</div>-->


                <!-- Modal HTML -->
                <div id="imageModal"
                    style="display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8); align-items:center; justify-content:center;">
                    <span id="closeModal"
                        style="position:absolute; top:20px; right:30px; font-size:40px; color:white; cursor:pointer;">&times;</span>
                    <img id="modalImg"
                        style="max-width:90%; max-height:90%; border:5px solid #fff; border-radius:10px;" />
                </div>

                <!--New Images -->
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/Gallery.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/Gallery2.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/Gallery3.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/Gallery4.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/Gallery5.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/Gallery6.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/Gallery7.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>

                <!---->

                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744763145899.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744763127146.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744763104092.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744763003285.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>


                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744753900505.webp') ?? '' }}" alt="image"
                                class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744753928022.webp') ?? '' }}" alt="image"
                                class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744753947809.webp') ?? '' }}" alt="image"
                                class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744753975792.webp') ?? '' }}" alt="image"
                                class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744753985499.webp') ?? '' }}" alt="image"
                                class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744754003963.webp') ?? '' }}" alt="image"
                                class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744754028931.webp') ?? '' }}" alt="image"
                                class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744754037679.webp') ?? '' }}" alt="image"
                                class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744754050997.webp') ?? '' }}" alt="image"
                                class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744754063663.webp') ?? '' }}" alt="image"
                                class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744754108865.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744754120406.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744754130205.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744754139477.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/1744754195582.webp
                                                                                                                                            ') ??
                                '' }}"
                                alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>


                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/IMG_6758.webp') ?? '' }}" alt="image" class="img-fluid"
                                style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/IMG_6753.webp') ?? '' }}" alt="image" class="img-fluid"
                                style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/new_pnp_gym_img.webp') ?? '' }}" alt="image"
                                class="img-fluid" style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/IMG_6751.webp') ?? '' }}" alt="image" class="img-fluid"
                                style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/IMG_6750.webp') ?? '' }}" alt="image" class="img-fluid"
                                style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/IMG_6749.webp') ?? '' }}" alt="image" class="img-fluid"
                                style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/IMG_6749.webp') ?? '' }}" alt="image" class="img-fluid"
                                style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/IMG_6748.webp') ?? '' }}" alt="image" class="img-fluid"
                                style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/IMG_6747.webp') ?? '' }}" alt="image" class="img-fluid"
                                style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/IMG_6746.webp') ?? '' }}" alt="image" class="img-fluid"
                                style="height: 341px; object-fit: cover;">

                        </figure>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/IMG_6741.webp') ?? '' }}" alt="image" class="img-fluid"
                                style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                    </div>
                </div>
                <!--<div class="col-lg-4">-->
                <!--    <div class="gallery-card">-->
                <!--        <figure class="gallery-card--img">-->
                <!--            <img src="{{ asset('front/images/IMG_6739.webp') ?? '' }}" alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">-->
                <!--<a href="">-->
                <!--    <i class="fas fa-play"></i>-->
                <!--</a>-->
                <!--        </figure>-->
                <!--    </div>-->
                <!--</div>-->
                <!--<div class="col-lg-4">-->
                <!--    <div class="gallery-card">-->
                <!--        <figure class="gallery-card--img">-->
                <!--            <img src="{{ asset('front/images/IMG_6732.webp') ?? '' }}" alt="image" class="img-fluid" style="height: 341px; object-fit: cover;">-->
                <!--<a href="">-->
                <!--    <i class="fas fa-play"></i>-->
                <!--</a>-->
                <!--        </figure>-->
                <!--    </div>-->
                <!--</div>-->


                <div class="col-lg-4">
                    <div class="gallery-card">
                        <figure class="gallery-card--img">
                            <img src="{{ asset('front/images/IMG_6728.webp') ?? '' }}" alt="image" class="img-fluid"
                                style="height: 341px; object-fit: cover;">
                            <!--<a href="">-->
                            <!--    <i class="fas fa-play"></i>-->
                            <!--</a>-->
                        </figure>
                        <!--<div class="gallery-card--content">-->
                        <!--    <h4>Deadlift</h4>-->
                        <!--</div>-->
                    </div>
                </div>





                <!--<div class="col-lg-4">-->
                <!--    <div class="gallery-card">-->
                <!--        <figure class="gallery-card--img">-->
                <!--            <img src="{{ asset('front/images/gallery-img1') ?? '' }}.webp" alt="image" class="img-fluid">-->
                <!--<a href="">-->
                <!--    <i class="fas fa-play"></i>-->
                <!--</a>-->
                <!--        </figure>-->
                <!--<div class="gallery-card--content">-->
                <!--    <h4>Deadlift</h4>-->
                <!--</div>-->
                <!--    </div>-->
                <!--</div>-->
                <!--<div class="col-lg-4">-->
                <!--    <div class="gallery-card">-->
                <!--        <figure class="gallery-card--img">-->
                <!--            <img src="{{ asset('front/images/gallery-img2') ?? '' }}.webp" alt="image" class="img-fluid">-->
                <!--<a href="">-->
                <!--    <i class="fas fa-play"></i>-->
                <!--</a>-->
                <!--        </figure>-->
                <!--<div class="gallery-card--content">-->
                <!--    <h4>Deadlift</h4>-->
                <!--</div>-->
                <!--    </div>-->
                <!--</div>-->
                <!--<div class="col-lg-4">-->
                <!--    <div class="gallery-card">-->
                <!--        <figure class="gallery-card--img">-->
                <!--            <img src="{{ asset('front/images/gallery-img3') ?? '' }}.webp" alt="image" class="img-fluid">-->
                <!--<a href="">-->
                <!--    <i class="fas fa-play"></i>-->
                <!--</a>-->
                <!--        </figure>-->
                <!--<div class="gallery-card--content">-->
                <!--    <h4>Deadlift</h4>-->
                <!--</div>-->
                <!--    </div>-->
                <!--</div>-->
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script>
        // document.querySelectorAll('.video-container').forEach(container => {
        //     const video = container.querySelector('video');

        //     container.addEventListener('mouseenter', () => {
        //         video.play();
        //     });

        //     container.addEventListener('mouseleave', () => {
        //         video.pause();
        //         video.currentTime = 0; // reset to beginning if needed
        //     });
        // });
        document.querySelectorAll('.video-container').forEach(container => {
            const video = container.querySelector('video');

            container.addEventListener('mouseenter', () => {
                video.play();
            });

            container.addEventListener('mouseleave', () => {
                video.pause();
                video.currentTime = 0; // rewind to first frame
            });
        });

        document.addEventListener("DOMContentLoaded", function() {
            const modal = document.getElementById("imageModal");
            const modalImg = document.getElementById("modalImg");
            const closeBtn = document.getElementById("closeModal");

            // Select all gallery images
            const images = document.querySelectorAll(".gallery-card img");

            images.forEach(function(img) {
                img.addEventListener("click", function() {
                    modal.style.display = "flex";
                    modalImg.src = this.src;
                });
            });

            // Close modal
            closeBtn.onclick = function() {
                modal.style.display = "none";
            };

            // Close on click outside image
            modal.onclick = function(e) {
                if (e.target === modal) {
                    modal.style.display = "none";
                }
            };
        });
        $(document).ready(function() {
            $('.event__filter button').on('click', function() {
                $('.event__filter button').removeClass('active');
                $(this).addClass('active');
                var classTypeId = $(this).data('class-type');
                $.ajax({
                    url: '{{ route('class.schedules') }}',
                    type: 'POST',
                    data: {
                        classType_id: classTypeId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        console.log(response);
                        var tableBody = '';
                        $.each(response.classSchedules, function(index, schedule) {
                            var startTime = moment(schedule.start_time, 'HH:mm:ss')
                                .format('hh:mm');
                            var endTime = moment(schedule.end_time, 'HH:mm:ss').format(
                                'hh:mm');
                            tableBody += `
                            <tr>
                                <th>${startTime} - ${endTime}</th>
                                <td class="${schedule.day == 'Monday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Monday' ? `
                                                            <h6>${schedule.class_type.name}
                                                                <span>${schedule.trainer.name}</span>
                                                            </h6>
                                                        ` : ''}
                                </td>
                                <td class="${schedule.day == 'Tuesday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Tuesday' ? `
                                                            <h6>${schedule.class_type.name}
                                                                <span>${schedule.trainer.name}</span>
                                                            </h6>
                                                        ` : ''}
                                </td>
                                <td class="${schedule.day == 'Wednesday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Wednesday' ? `
                                                            <h6>${schedule.class_type.name}
                                                                <span>${schedule.trainer.name}</span>
                                                            </h6>
                                                        ` : ''}
                                </td>
                                <td class="${schedule.day == 'Thursday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Thursday' ? `
                                                            <h6>${schedule.class_type.name}
                                                                <span>${schedule.trainer.name}</span>
                                                            </h6>
                                                        ` : ''}
                                </td>
                                <td class="${schedule.day == 'Friday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Friday' ? `
                                                            <h6>${schedule.class_type.name}
                                                                <span>${schedule.trainer.name}</span>
                                                            </h6>
                                                        ` : ''}
                                </td>
                                <td class="${schedule.day == 'Saturday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Saturday' ? `
                                                            <h6>${schedule.class_type.name}
                                                                <span>${schedule.trainer.name}</span>
                                                            </h6>
                                                        ` : ''}
                                </td>
                                <td class="${schedule.day == 'Sunday' ? 'event-tag' : ''}">
                                    ${schedule.day == 'Sunday' ? `
                                                            <h6>${schedule.class_type.name}
                                                                <span>${schedule.trainer.name}</span>
                                                            </h6>
                                                        ` : ''}
                                </td>
                            </tr>
                        `;
                        });
                        $('#scheduleTableBody').html(tableBody);
                    },
                    error: function() {
                        console.log('Error fetching class schedules.');
                    }
                });
            });
        });
    </script>
@endsection