@extends('website.layout.content')

@section('customBody')

<main class="position-relative overflow-hidden">
    <div class="masks-blur">
        <div class="mask-1 broun-blur"></div>
        <div class="mask-2 broun-blur"></div>
        <div class="mask-3 broun-blur"></div>
        <div class="mask-4 broun-blur"></div>
        <div class="mask-5 broun-blur"></div>
        <div class="mask-6 broun-blur"></div>
        <div class="mask-7 broun-blur"></div>
        <div class="mask-8 broun-blur"></div>
        <div class="mask-9 oil-blur"></div>
        <div class="mask-10 oil-blur"></div>
        <div class="mask-11 oil-blur"></div>
        <div class="mask-12 oil-blur"></div>
        <div class="mask-13 oil-blur"></div>
        <div class="mask-14 oil-blur"></div>
        <div class="mask-15 gold-blur"></div>
        <div class="mask-16 gold-blur"></div>
    </div>
    <div class="before position-absolute"></div>
    <img class="background-1 position-absolute" src="{{ asset('website/images/gellary/background 1.jpg') }}" alt="">
    <img class="background-2 position-absolute" src="{{ asset('website/images/gellary/background 2.jpg') }}" alt="">
    <div class="overlay-2 position-absolute w-100 h-100"></div>
    <div class="container-sm pt-5">
        <div class="personal-training-part position-relative z-10">
            <div class="swiper swiper-1">
                <div class="swiper-wrapper">
                    @foreach ($services as $service)
                    <div class="swiper-slide">
                        <div class="main-box py-4 px-3 text-center text-xl-start">
                            <img src="{{ asset('website/images/img/transparent-1.png') }}" alt="" class="position-absolute transparent-1">
                            <div
                                class="img me-3 d-flex justify-content-center align-items-center mb-3">
                                <img
                                    class="img-{{ $loop->index + 1 }}"
                                    src="{{ $service?->image }}"
                                    alt="Image" />
                            </div>
                            <div class="info">
                                <h4>{{ $service?->title }}</h4>
                                <p>
                                    {{ $service?->description }}
                                </p>
                                <div
                                    class="more d-flex justify-content-center justify-content-xl-start align-items-center">
                                    <div 
                                    class="more-btn"
                                    data-content="{{ $service?->details }}"
                                    >Read More</div>
                                    <img
                                        src="{{ asset('website/images/icons/Arrow-1.png') }}"
                                        alt />
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="next"></div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="mission-part py-5 " id="about">
            <div class="row align-items-center">
                <div class="img col-lg-6 d-none d-lg-block">
                    <img
                        class="w-100"
                        src="{{ $setting?->vision_image }}"
                        alt />
                </div>
                <div
                    class="col-12 col-lg-6 text-center text-lg-start parent-scroll position-relative z-10">
                    <div class="vision py-5">
                        <h2 class="position-relative m-auto m-lg-0">
                            <i>vision</i>
                            <div class="font-type-2 position-absolute">
                                our
                            </div>
                        </h2>
                        <p>
                            {{ $setting?->vision }}
                        </p>
                    </div>
                    <div class="mission py-5">
                        <h2 class="position-relative m-auto m-lg-0">
                            <i>mission</i>
                            <div class="font-type-2 position-absolute">
                                our
                            </div>
                        </h2>
                        <p>
                            {{ $setting?->mission }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

     <!-- <div class="container-sm px-0">
        <div class="best-offers position-relative z-10" id="gallery">
            <div class="main-box position-relative py-5">
                <div class="position-absolute img-1">
                    <img
                        src="{{ asset('website/images/img/transparent-2.png') }}"
                        alt
                        class="w-100 h-100" />
                </div>
                <div class="position-absolute img-2">
                    <img
                        src="{{ asset('website/images/img/transparent-3.png') }}"
                        alt
                        class="w-100 h-100" />
                </div>
                <div class="swiper swiper-2 position-relative mx-5">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="slide text-center py-5">
                                <h2
                                    class="position-relative m-auto mb-3">
                                    <i>offers</i>
                                    <div
                                        class="font-type-2 position-absolute">
                                        best
                                    </div>
                                </h2>
                                <span>for new members</span>
                                <div class="custom-btn m-auto mt-4">
                                    choose your plan
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide text-center py-5">
                                <h2
                                    class="position-relative m-auto mb-3">
                                    <i>offers</i>
                                    <div
                                        class="font-type-2 position-absolute">
                                        best
                                    </div>
                                </h2>
                                <span>for new members</span>
                                <div class="custom-btn m-auto mt-4">
                                    choose your plan
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide text-center py-5">
                                <h2
                                    class="position-relative m-auto mb-3">
                                    <i>offers</i>
                                    <div
                                        class="font-type-2 position-absolute">
                                        best
                                    </div>
                                </h2>
                                <span>for new members</span>
                                <div class="custom-btn m-auto mt-4">
                                    choose your plan
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="slide text-center py-5">
                                <h2
                                    class="position-relative m-auto mb-3">
                                    <i>offers</i>
                                    <div
                                        class="font-type-2 position-absolute">
                                        best
                                    </div>
                                </h2>
                                <span>for new members</span>
                                <div class="custom-btn m-auto mt-4">
                                    choose your plan
                                </div>
                            </div>
                        </div>
                    </div>
                    <div
                        class="swiper-pagination-2 position-absolute"></div>
                </div>
                <div class="prev-1 position-absolute">
                    <img src="{{ asset('website/images/icons/prev.png') }}" alt />
                </div>
                <div class="next-1 position-absolute">
                    <img src="{{ asset('website/images/icons/next.png') }}" alt />
                </div>
            </div>
        </div>
    </div> -->
    
    {{-- <div class="container-sm px-0">
        <div class="best-offers position-relative z-10 part-coach" id="gallery">
            <div class="main-box position-relative py-5">
                <div class="position-absolute img-1">
                    <img
                        src="{{ asset('website/images/img/transparent-2.png') }}"
                        alt
                        class="w-100 h-100" />
                </div>
                <div class="position-absolute img-2">
                    <img
                        src="{{ asset('website/images/img/transparent-3.png') }}"
                        alt
                        class="w-100 h-100" />
                </div>
                <div class="swiper swiper-2 position-relative mx-5">
                    <div class="swiper-wrapper">
                        @foreach ($coaches as $coach)
                        <div class="swiper-slide">
                            <div class="box-coach text-center">
                                <div class="coach-img">
                                    <img src="{{ $coach?->image }}" alt="Coach Image">
                                </div>
                                <div class="font-type-2">coach</div>
                                <div class="name-coach">{{ $coach?->name }}</div>
                                <div class="job">{{ $coach?->specialization }}</div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div
                        class="swiper-pagination-2 position-absolute"></div>
                </div>
                <div class="prev-1 position-absolute">
                    <img src="{{ asset('website/images/icons/prev.png') }}" alt />
                </div>
                <div class="next-1 position-absolute">
                    <img src="{{ asset('website/images/icons/next.png') }}" alt />
                </div>
            </div>
        </div>
    </div> --}}
    <div class="container-sm px-0">
        <div class="best-offers position-relative z-10 part-coach part-coach-2" id="gallery">
            <div class="main-box position-relative py-5">
                <div class="position-absolute img-1">
                    <img
                        src="{{ asset('website/images/img/transparent-2.png') }}"
                        alt
                        class="w-100 h-100" />
                </div>
                <div class="position-absolute img-2">
                    <img
                        src="{{ asset('website/images/img/transparent-3.png') }}"
                        alt
                        class="w-100 h-100" />
                </div>
                <div class="swiper swiper-2-2 position-relative mx-5">
                    <div class="swiper-wrapper">
                        @foreach ($coaches as $coach)
                        <div class="swiper-slide">
                            <div class="box-coach row">
                                <div class="col-12 col-md-4 col-xl-3 col-xxl-3 text-center mb-4 mb-md-0">
                                    <div class="coach-img">
                                        <img src="{{ $coach?->image }}" alt="coach-image">
                                    </div>
                                    <div class="font-type-2">Coach</div>
                                    <div class="name-coach">{{ $coach?->name }}</div>
                                    <div class="job">{{ $coach?->specialization }}</div>
                                </div>
                                <div class="description col-12 col-md-8 col-xl-9 col-xxl-9 text-center text-md-end">{{ $coach?->description }}</div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div
                        class="swiper-pagination-2 position-absolute"></div>
                </div>
                <div class="prev-1 position-absolute">
                    <img src="./images/icons/prev.png" alt />
                </div>
                <div class="next-1 position-absolute">
                    <img src="./images/icons/next.png" alt />
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="Classes pt-5 pb-4 position-relative mt-100" id="classes">
            <h2 class="position-relative m-auto">
                <i>Classes</i>
                <div class="font-type-2 position-absolute">our</div>
            </h2>
            <div class="all-photos my-5">
                <div class="swiper swiper-3">
                    <div class="swiper-wrapper">
                        @foreach($sessions->chunk(3) as $sessionGroup)  {{-- Group classes in sets of 3 --}}
                        <div class="swiper-slide">
                            <div class="box-images position-relative">
                                @foreach($sessionGroup as $session)
                                <div class="img position-relative">
                                    <div class="content-info position-absolute">{{ $session?->description }}</div>
                                    <div class="after"></div>
                                    <img
                                        class="bg-img-2 position-absolute"
                                        src="{{ asset('website/images/img/transparent-2.png') }}"
                                        alt />
                                    <img
                                        class="bg-img-3 position-absolute"
                                        src="{{ asset('website/images/img/transparent-3.png') }}"
                                        alt />
                                    <img
                                        class="position-absolute img-3"
                                        src="{{ $session?->image }}"
                                        alt />

                                        @php
                                        // Split the title if it contains "and"
                                        $titles = explode(' and ', $session->name);
                                        @endphp
                
                                    <h4 class="position-absolute">
                                        @if(count($titles) > 1)
                                        <i>{{ trim($titles[0]) }}</i>
                                        <div class="font-type-2">and</div>
                                        <i>{{ trim($titles[1]) }}</i>
                                        @else
                                        <i>{{ $session->name }}</i>
                                        @endif
                                    </h4>
                                    <div
                                        class="d-flex more position-absolute align-items-center">
                                        <div class="more-btn">learn More</div>
                                        <img
                                            class="mx-2"
                                            src="{{ asset('website/images/icons/Arrow-1.png') }}"
                                            alt />
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="swiper-pagination-3 mb-4 {{-- position-absolute --}}"></div>
            <div class="custom-btn m-auto position-relative">view classes schedule
            </div>
            <div class="w-100 position-relative">
                <img src="{{ $setting?->schedule }}" alt="" class="position-absolute table-1">
            </div>
        </div>
    </div>
    <div class="container-sm">
        <div class="memberships mt-100 pt-4 position-relative z-10" id="memberships">
            <h2 class="position-relative m-auto">
                <i>memberships</i>
                <div class="font-type-2 position-absolute">
                    discover
                </div>
            </h2>
            <div
                class="position-relative toggle-button d-flex justify-content-center mt-5">
                <div class="active position-absolute"></div>
                @foreach ($membership_categories as $category)
                <div class="option-{{ $loop->index + 1 }} p-3">{{ $category->name }}</div>
                @endforeach
            </div>     
            @foreach ($membership_categories as $category)
            <div class="plants-{{ $loop->index + 1 }} mt-100 px-2 pb-3">
                <div class="swiper swiper-4">
                    <div class="swiper-wrapper">
                        @foreach ($category->memberships as $membership)
                        <div class="swiper-slide">
                            <div class="plan position-relative {{ $membership->is_most_popular == true ? 'active' : null }} mx-auto">
                                <img
                                    class="transparent-4 position-absolute"
                                    src="{{ asset('website/images/img/transparent-4.png') }}"
                                    alt />
                                    @if ($membership->is_most_popular == true)
                                    <div class="most-popular position-absolute">Most Popular</div>
                                    @endif
                                <div
                                    class="d-flex align-items-end justify-content-between">
                                    <div
                                        class="price position-relative">
                                        {{ $membership?->price }}
                                        <div
                                            class="font-type-2 position-absolute">
                                            sar
                                        </div>
                                    </div>
                                    <div class="monthes">{{ $membership->duration }} month</div>
                                </div>
                                <div class="subscripe">
                                    {{ $membership->name }}
                                </div>
                                <p class="mb-4">
                                    futuers of subscription
                                </p>
                                <ul>
                                    @foreach ($membership->features as $feature)
                                    <li class="d-flex">
                                        <i class="fa fa-check"></i>
                                        <p class="mx-2">
                                            {{ $feature->title }}
                                        </p>
                                    </li>
                                    @endforeach
                                </ul>
                                <div
                                    class="custom-btn position-absolute">
                                    <a href>choose plan</a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div
                    class="swiper-pagination-4 d-flex justify-content-center mb-2"></div>
            </div>
            @endforeach
        </div>
    </div>


    <div class="reviews mt-100 position-relative z-10">
        <div class="container-sm">
            <h2 class="position-relative mx-auto my-4">
                <i>reviews</i>
                <div class="font-type-2 position-absolute">
                    customer
                </div>
            </h2>
            <div class="swiper swiper-6 mt-100">
                <div class="swiper-wrapper">
                    @foreach ($reviews->chunk(3) as $reviewsGroup)
                    @foreach ($reviewsGroup as $review)
                    @switch($loop->index + 1)
                        @case(1)
                            @php $bg = [1, 3, 2, 4];@endphp
                            @break
                        @case(2)
                            @php $bg = [4, 5, 3, 6];@endphp
                            @break
                        @case(3)
                            @php $bg = [4, 1, 5, 2];@endphp
                            @break
                        @default
                    @endswitch
                    <div class="swiper-slide">
                        <div class="w">
                            <div class="member-{{ $loop->index + 1 }} position-relative mx-auto">
                                <img
                                    class="bg-{{ $bg[0] }} position-absolute"
                                    src="{{ asset('website/images/img/member-bg-'.$bg[1].'.png') }}"
                                    alt />
                                <img
                                    class="bg-{{ $bg[2] }} position-absolute"
                                    src="{{ asset('website/images/img/member-bg-'.$bg[3].'.png') }}"
                                    alt />
                                <div class="photo-user">
                                    <img
                                        src="{{ asset('website/images/img/user-1.jpg') }}"
                                        alt />
                                </div>
                                <div class="info position-absolute">
                                    <div class="name">{{ $review?->name }}</div>
                                    <div class="quote-line my-xl-3">
                                        <img
                                        src="{{ asset('website/images/icons/quote-line.png') }}"
                                        alt />
                                    </div>
                                    <p>
                                    "{{ $review?->text }}"
                                </p>
                                    <div class="stars">
                                        <img
                                        src="{{ asset('website/images/icons/stars.png') }}"
                                            alt />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @endforeach
                </div>
                <div class="next-6"></div>
                <div
                    class="swiper-pagination-6 d-flex justify-content-center"></div>
            </div>
        </div>
    </div>
    <div class="help mt-100 position-relative z-10">
        <div class="container-sm">
            <h2 class="mx-auto position-relative">
                <i>help</i>
                <div class="font-type-2 position-absolute">get</div>
            </h2>
            
            <!-- Categories Buttons -->
            <div class="all-btn d-flex justify-content-center position-relative">
                <span class="active position-absolute"></span>
                @foreach ($faq_categories as $category)
                    <div class="btn-{{ $loop->index + 1 }}{{ $loop->first ? '' : ' mx-sm-3' }}">
                        <p>{{ strtoupper($category->name) }}</p>
                    </div>
                @endforeach
            </div>
    
            <div class="main-box position-relative">
                @foreach ($faq_categories as $category)
                    <div class="part-{{ $loop->index + 1 }}">
                        @foreach ($category->faqs as $faq)
                            <div class="qastion">
                                <div class="d-flex justify-content-between">
                                    <h3>{{ $faq->question }}</h3>
                                    <div class="icon">
                                        <div class="plus">+</div>
                                        <div class="minus">_</div>
                                    </div>
                                </div>
                                <p class="p">{{ $faq->answer }}</p>
                            </div>
                        @endforeach
                    </div>
                @endforeach
            </div>
        </div>
    </div>
        <div class="contact mt-100 px-4 position-relative z-10" id="contact">
        <div class="container">
            <h2 class="position-relative mx-auto"><i>contact</i><div
                    class="font-type-2 position-absolute">with
                    us</div></h2>
            <div class="row mt-100">
                <div class="col-12 col-xl-7 p-0 part-1">
                    <form method="POST" action="{{ route('website.store_contact_us') }}">
                        @method('POST')
                        @csrf
                        <div class="row">
                            <div class="col-12 col-xl-6">
                                <label class="w-100" for="name">Your
                                    Name</label>
                                <input type="text" name="name" id="name"
                                    placeholder="Type your name">
                            </div>
                            <div class="col-12 col-xl-6">
                                <label class="w-100"
                                    for="email">Email</label>
                                <input type="email" name="email"
                                    id="email"
                                    placeholder="email@mail.com">
                            </div>
                            <div class="col-12">
                                <label class="w-100" for="message">Your
                                    Message</label>
                                <textarea name="message" id="message"
                                    placeholder="Type your message here"></textarea>
                            </div>

                            <!-- Google reCAPTCHA -->
                            <div class="g-recaptcha" data-sitekey="6LeMyiUqAAAAAB_xS7XlOV2pE0fn4kIPDoUPwhLF"></div>
                        </div>
                        <div class="custom-btn mx-auto"><button
                                type="submit">send
                                message</button></div>
                    </form>
                </div>
                <div class="col-12 col-xl-5 p-0">
                    <div class="part-2 position-relative h-100">
                        <div class="img-1 position-absolute"><img
                                src="{{ asset('website/images/img/transparent-2.png') }}"
                                alt></div>
                        <div class="img-2 position-absolute"><img
                                src="{{ asset('website/images/img/transparent-3.png') }}"
                                alt></div>
                        <div class="d-flex my-5 align-items-center">
                            <img src="{{ asset('website/images/icons/call (2).png') }}" alt>
                            <a class="mx-2"
                                href="tel:{{ $setting?->mobile }}">{{ $setting?->mobile }}</a>
                        </div>
                        <div class="d-flex my-5 align-items-center">
                            <img src="{{ asset('website/images/icons/sms.png') }}" alt>
                            <a class="mx-2"
                                href="mailto:{{ $setting?->email }}">{{ $setting?->email }}</a>
                        </div>
                        <div class="d-flex my-5 align-items-center">
                            <img src="{{ asset('website/images/icons/location (1).png') }}"
                                alt>
                            <a class="mx-2" href="{{ $setting?->map_url }}" target="_blank">{{ $setting?->address }}</a>
                        </div>
                        <div class="custom-btn mx-auto"><a href="{{ $setting?->map_url }}" target="_blank">visit us
                                instead</a></div>
                    </div>
                </div>
            </div>
            <div class="fotter-social d-flex justify-content-center">
                @isset($setting?->facebook_url)
                    <a href="{{ $setting?->facebook_url }}"><img src="{{ asset('website/images/icons/face.png') }}" alt></a>
                @endisset
                
                @isset($setting?->x_url)
                    <a href="{{ $setting?->x_url }}"><img src="{{ asset('website/images/icons/tweeter.png') }}" alt></a>
                @endisset

                @isset($setting?->instagram_url)
                    <a href="{{ $setting?->instagram_url }}"><img src="{{ asset('website/images/icons/insta.png') }}" alt></a>
                @endisset
                
                
            </div>
            <div class="logo d-flex justify-content-center mt-4"><a
                    href><img src="{{ asset('website/images/img/logo.png') }}" alt></a></div>
            <div class="rights my-4">© 2024 <b>AB Fintess</b> All Rights
                Reserved </div>
        </div>
    </div>
</main>

@endsection

@section('customScript')
@endsection