@extends('front.layout.app')
@section('content')


<!-- Slider start -->

		<div class="videowrp">



			<div class="embed-responsive embed-responsive-16by9">
                 @foreach ($videos as $video)
                    
			<video playsinline autoplay muted loop>
    <source src="{{ asset_storage('uploads/videos/video/' . $video->content) }}" type="video/mp4">
    Your browser does not support the video tag.
</video>
                       @endforeach
			</div>



			<div class="slider-wrap">

				<div class="container">

					<div class="row align-items-center">

						<div class="col-lg-7 slider-text-col">
                         {!! $page->excerpt !!}

						

						</div>

					</div>



				</div>

			</div>

		</div>
 
		<!-- Slider end -->



		<!-- Property Highlights Section -->

		<section class="property-highlights" data-aos="fade-up" data-aos-duration="900">

			<div class="container">

				<div class="property-highlights-img">

					<img src="{{ asset_uploads('module/cms/' . $page->featured_img) }}" alt="Sea Oak Retreat Ln Beach Property">

				</div>

				<div class="property-highlights-features">

					<div class="property-highlight-item">

						<div class="property-highlight-icon">

							<i class="fa-solid fa-person-walking"></i>

						</div>

						<div class="property-highlight-text">

							Two-minute walk<br>to the beach

						</div>

					</div>

					<div class="property-highlight-item">

						<div class="property-highlight-icon">

							<i class="fa-solid fa-location-dot"></i>

						</div>

						<div class="property-highlight-text">

							Second-row beach house<br>in Forest Beach

						</div>

					</div>

				</div>

			</div>

		</section>

		<!-- Property Highlights end -->

		<main id="main">





			<!-- About us section start -->

			<section id="about" class="about-us-section">

				<div class="container">

					<div class="row align-items-start g-4 g-lg-5">

						<div class="col-lg-6" data-aos="fade-right" data-aos-duration="1100">

							<div class="about-beach text-center text-lg-start">

								     @php
                $scwidget_company = get_widgets(81);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp

								<img src="{{ asset_uploads('widgets/' . $scwidget_company->featured_image) }}" alt="" class="img-fluid">

								<div class="about-readmore d-lg-block d-md-none">

									<a href="{{ $af_data->additional_field_2 }}" class="btn-book-now">

										{{ $af_data->additional_field_1 }} <i class="fas fa-arrow-right ms-2"></i>

									</a>

								</div>

							</div>

						</div>

						<div class="col-lg-6" data-aos="fade-left" data-aos-delay="120" data-aos-duration="1100">

							<div class="about-content">


						



								  {!! $scwidget_company->content !!}



								<div class="about-btn d-lg-none d-md-block">

									<a href="{{ $af_data->additional_field_2 }} " class="btn-book-now">

										{{ $af_data->additional_field_1 }}  <i class="fas fa-arrow-right ms-2"></i>

									</a>

								</div>



							</div>

						</div>

					</div>

				</div>

			</section>



			<!-- About us section end -->



			<!-- Property Facts Section start -->
 
			<section class="property-facts-section">

				<div class="container">

					<div class="row g-3 justify-content-center">

						<!-- Fact 1 -->
						         @foreach ($get_all_belowhouse as $house)

						<div class="col-6 col-md-4 col-lg-2" data-aos="fade-up" data-aos-duration="800"

							data-aos-delay="100">

							<div class="fact-box">

								<div class="fact-icon"><img src="{{ asset_uploads('module/below-house-overview/' . $house->featured_img) }}" alt="Bedrooms"></div>

								<div class="fact-number">  {!! $house->additional_field_1 !!}</div>

								<div class="fact-label">{!! $house->additional_field_2!!}</div>

							</div>

						</div>

						<!-- Fact 2 -->

						  @endforeach

						
						

						<!-- Fact 6 -->

						

					</div>

				</div>

			</section>

			<!-- Property Facts Section end -->



			<!-- Virtual Tour and Availability Section start -->

			<section id="availability" class="tour-availability-section">

				<div class="container">

					<div class="row g-4 align-items-center">

						<!-- Left Column: Virtual Tour -->
						 			     @php
                $scwidget_company = get_widgets(93);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp

						<div class="col-lg-7" data-aos="fade-right" data-aos-duration="1000">

							<div class="virtual-tour-wrapper">

								<a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><img

										src="{{ asset_uploads('widgets/' . $scwidget_company->featured_image) }}" alt="Virtual Tour"

										class="img-fluid w-100 tour-img"></a>

								<div class="tour-readmore d-lg-block d-md-none">

									<a href="#more" class="btn-book-now" data-bs-toggle="modal"

										data-bs-target="#exampleModal">

										<i class="fa-solid fa-play me-1"></i> Take a Tour

									</a>

								</div>

							</div>



						</div>



						<!-- Right Column: Check Availability Form -->

						<div class="col-lg-5" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="100">

							<div class="availability-card">

								<h3 class="avail-title">Check Availability</h3>

								<p class="avail-sub">Add dates to check availability</p>

<div class="ownerrez-widget" data-propertyId="d202a357ec4146bd8d1a5c536155f617" data-widget-type="seaoakretreat - Multiple Month Calendar" data-widgetId="ed539e914df845af9ae5185dd9bd1c3c"></div>

<script src="https://app.ownerrez.com/widget.js"></script>

							

							</div>

						</div>

					</div>

				</div>

			</section>

			<!-- Virtual Tour and Availability Section end -->



			<!-- Rooms, beds & baths Section start -->

			<section class="rooms-baths-section">

				<div class="container">
					  @php
                $scwidget_company = get_widgets(94);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp

					<div class="section-title text-center mb-4">

						<h2 class="about-headline">      {!! $scwidget_company->heading !!} </h2>

					</div>



					<!-- Bedrooms Row -->

					      {!! $scwidget_company->content !!}



					<!-- Bathrooms Row -->

						  @php
                $scwidget_company = get_widgets(95);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp

					<div class="row align-items-center">

							      {!! $scwidget_company->content !!}

					</div>

				</div>

			</section>

			<!-- Rooms, beds & baths Section end -->



			<!-- Explore Area Section start -->
			 	  @php
                $scwidget_company = get_widgets(96);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp


			<section class="explore-area-section" style="background-image: url('{{ asset_storage('front/images/explore-bg.jpg') }}');">

				<div class="container text-center">

					<div class="section-title mb-3" data-aos="fade-up" data-aos-duration="900">

						<h2 class="about-headline"> {!! $scwidget_company->heading!!}</h2>

					</div>

					<p class="explore-desc mx-auto" data-aos="fade-up" data-aos-duration="900" data-aos-delay="100">

						 {!! $scwidget_company->content !!}

					</p>

					<a href="{{ $af_data->additional_field_1 }}"    target="_blank"  class="btn-book-now explore-btn" data-aos="fade-up" data-aos-duration="900"

						data-aos-delay="150">

						{{ $af_data->additional_field_2 }} <i class="fa-solid fa-arrow-right ms-2"></i>

					</a>



					<!-- Cards Grid -->

					<div class="explore-cards-container">
						   
    <div class="row gx-3 gx-lg-4 justify-content-center row-cols-2 row-cols-md-3 row-cols-lg-5"
        data-aos="fade-up"
        data-aos-duration="900"
        data-aos-delay="">
                 @foreach ($get_all_explores as $explore)
        <div class="col explore-card-col">
            <div class="explore-card">
                <img src="{{ asset_uploads('module/explore/' . $explore->featured_img) }}" alt="South Beach" class="img-fluid">

                <div class="explore-card-body">
                    <h5>{{ $explore->heading }}</h5>
                    <p>{!! $explore->excerpt !!}</p>
                </div>
            </div>
        </div>
		@endforeach
    </div>


					</div>

				</div>

			</section>

			<!-- Explore Area Section end -->



			<!-- Amenities Section start -->

			<section id="amenities" class="amenities-wrapper py-5">

				<div class="container">

					<div class="d-flex justify-content-between align-items-center amenities-sec flex-wrap gap-3">

						<div class="section-title mb-0">

							<h2 class="about-headline mb-0">Amenities</h2>

						</div>

						<a href="#" class="btn-book-now expand-btn">

							<i class="fa-solid fa-maximize me-1"></i> EXPAND ALL

						</a>

					</div>



					<div class="row align-items-start">

						<!-- Images Left – hardcoded -->

						<div class="col-lg-4" data-aos="fade-right" data-aos-duration="1000">
											  @php
                $scwidget_company = get_widgets(99);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp

							<div class="amenities-gallery-grid">
                                             {!! $scwidget_company->content !!}
					

							</div>

						</div>



						<!-- Accordion Right – dynamic from database -->

						<div class="col-lg-8" data-aos="fade-left" data-aos-duration="1000">

							<div class="accordion custom-accordion" id="amenitiesAccordion">

								@forelse ($amenities as $amenityLoop)
									@php
										$panelId   = 'amenityPanel-' . $amenityLoop->id;
										$headingId = 'amenityHeading-' . $amenityLoop->id;
										$isFirst   = $loop->first;
									@endphp

									<div class="accordion-item">

										<h2 class="accordion-header" id="{{ $headingId }}">
											<button class="accordion-button {{ $isFirst ? '' : 'collapsed' }}" type="button"
												data-bs-toggle="collapse"
												data-bs-target="#{{ $panelId }}"
												aria-expanded="{{ $isFirst ? 'true' : 'false' }}"
												aria-controls="{{ $panelId }}">
												{{ $amenityLoop->title }}
											</button>
										</h2>

										<div id="{{ $panelId }}"
											class="accordion-collapse collapse {{ $isFirst ? 'show' : '' }}"
											aria-labelledby="{{ $headingId }}"
											data-bs-parent="#amenitiesAccordion">
											<div class="accordion-body">
												<div class="row g-3">
													@forelse ($amenityLoop->items as $item)
														<div class="col-sm-4">
															<div class="amenity-list-item">
																<img src="{{ getImage('amenity_items', $item->image) }}"
																	alt="{{ $item->title }}">
																<span>{{ $item->title }}</span>
															</div>
														</div>
													@empty
														<div class="col-12">
															<p class="text-muted mb-0">No items added yet.</p>
														</div>
													@endforelse
												</div>
											</div>
										</div>

									</div>

								@empty
									{{-- No active amenities --}}
								@endforelse

							</div>

						</div>

					</div>

				</div>

			</section>

			<!-- Amenities Section end -->



		

			<!--Map Testimonials start-->

			<section class="map-testimonials-wrapper position-relative" style="min-height: 500px;">

		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3378.542818546393!2d-80.76857962490527!3d32.13564701648739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88fc78e1d9306ab3%3A0xf062a35817789425!2s1%20Sea%20Oak%20Ln%2C%20Hilton%20Head%20Island%2C%20SC%2029928%2C%20USA!5e0!3m2!1sen!2s!4v1783254266329!5m2!1sen!2s" width="100%" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" class="w-100 map-iframe"></iframe>



				<div class="testimonial-overlay-container container-fluid position-absolute top-50 start-50 translate-middle h-100"

					style="pointer-events: none;">

					<div class="row justify-content-end align-items-center h-100">

						<div class="col-lg-6 col-12 my-4">

							<div class="map-testimonial-card shadow bg-white rounded-4 p-4 p-md-5"

								style="pointer-events: auto;">



								<div class="section-title">

									<div class="small-title">Reviews</div>

									<h2 class="about-headline">

										What our guests are saying</span>

									</h2>

								</div>



								<div class="owl-carousel map-testimonial-carousel position-relative pb-4">

									<!-- Item 1 -->

									  @foreach ($get_all_testimonials  as $testimonial)

									<div class="item">

										<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">

											<div class="starslist text-info mb-2 mb-sm-0">

												<i class="fa-solid fa-star"></i>

												<i class="fa-solid fa-star"></i>

												<i class="fa-solid fa-star"></i>

												<i class="fa-solid fa-star"></i>

												<i class="fa-solid fa-star"></i>

											</div>

											<div class="fw-bold fs-text">	{!! $testimonial->additional_field_1 !!}</div>

										</div>

										<p class="text-muted mb-4">

											{!! $testimonial->excerpt!!}

										</p>

										<div class="reviewer-name fw-bold" style="color: #b5a58e;">{{ $testimonial->heading}}</div>

									</div>

									<!-- Item 2 -->
          @endforeach
									

								</div>

							</div>

						</div>

					</div>

				</div>

			</section>

			<!--Map Testimonials end-->









			<!-- Gallery section start -->
			
@if($images->count() >= 4)

@php
$images = $images->values();
$first = $images->get(0);
$second = $images->get(1);
$third = $images->get(2);
$fourth = $images->get(3);
@endphp

<!-- Your gallery HTML -->



<section id="gallery-sec" class="galleryWrp py-5">

				<div class="container">

					<div class="section-title text-center" data-aos="fade-up" data-aos-duration="900">

						<h2 class="about-headline">

							House Photo Gallery

						</h2>

					</div>



					<!-- Grid -->

					<div class="house-gallery-grid" id="house-gallery-grid" data-aos="fade-up" data-aos-duration="1000">

						<div class="row g-2 g-md-3">

							<!-- Left Column -->

							<div class="col-12 col-md-6">

								<a href="{{ asset_uploads('') }}gallery/{{ $first->album_id }}/{{ $first->imageUrl }}" data-fancybox="gallery"

									class="house-popup-gallery gallery-item-wrapper d-block h-100 text-decoration-none position-relative overflow-hidden rounded-4">

									<img src="{{ asset_uploads('') }}gallery/{{ $first->album_id }}/thumb/{{ $first->imageUrl }}" alt="House Front"

										class="img-fluid w-100 h-100"

										style="object-fit: cover; min-height: 400px; transition: transform 0.4s ease;">

									<div class="hover-overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"

										style="background: rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s ease;">

										<i class="fa-solid fa-magnifying-glass-plus text-white fs-2"></i>

									</div>

								</a>

							</div>



							<!-- Middle Column -->

							<div class="col-6 col-md-3">

								<a href="{{ asset_uploads('') }}gallery/{{ $second->album_id }}/{{ $second->imageUrl }}" data-fancybox="gallery"

									class="house-popup-gallery gallery-item-wrapper d-block h-100 text-decoration-none position-relative overflow-hidden rounded-4">

									<img src="{{ asset_uploads('') }}gallery/{{ $second->album_id }}/thumb/{{ $second->imageUrl }}" alt="Living Room"

										class="img-fluid w-100 h-100"

										style="object-fit: cover; min-height: 400px; transition: transform 0.4s ease;">

									<div class="hover-overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"

										style="background: rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s ease;">

										<i class="fa-solid fa-magnifying-glass-plus text-white fs-2"></i>

									</div>

								</a>

							</div>



							<!-- Right Column -->

							<div class="col-6 col-md-3">

								<div class="d-flex flex-column h-100 gap-2 gap-md-3">

									<a href="{{ asset_uploads('') }}gallery/{{ $third->album_id }}/{{ $third->imageUrl }}" data-fancybox="gallery"

										class="house-popup-gallery gallery-item-wrapper d-block h-50 text-decoration-none position-relative overflow-hidden rounded-4"

										style="flex: 1;">

										<img src="{{ asset_uploads('') }}gallery/{{ $third->album_id }}/thumb/{{ $third->imageUrl }}" alt="Pool Area"

											class="img-fluid w-100 h-100"

											style="object-fit: cover; min-height: 190px; transition: transform 0.4s ease;">

										<div class="hover-overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"

											style="background: rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s ease;">

											<i class="fa-solid fa-magnifying-glass-plus text-white fs-2"></i>

										</div>

									</a>

									<a href="{{ asset_uploads('') }}gallery/{{ $fourth->album_id }}/{{ $fourth->imageUrl }}" data-fancybox="gallery"

										class="house-popup-gallery gallery-item-wrapper d-block h-50 text-decoration-none position-relative overflow-hidden rounded-4"

										style="flex: 1;">

										<img src="{{ asset_uploads('') }}gallery/{{ $fourth->album_id }}/thumb/{{ $fourth->imageUrl }}" alt="Deck" class="img-fluid w-100 h-100"

											style="object-fit: cover; min-height: 190px; transition: transform 0.4s ease;">

										<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"

											style="background: rgba(0,0,0,0.5); z-index: 2;">

											<span class="text-white fs-4 fw-bold"><i

													class="fa-regular fa-image me-2"></i> {{ $images->count() }}+</span>

										</div>

										<div class="hover-overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"

											style="background: rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.3s ease; z-index: 3;">

											<i class="fa-solid fa-magnifying-glass-plus text-white fs-2"></i>

										</div>

									</a>

								</div>

							</div>

						</div>



						<!-- Hidden images for gallery popup -->
<div class="d-none">
@foreach($images->skip(4) as $image)
<a href="{{ asset_uploads('') }}gallery/{{ $image->album_id }}/{{ $image->imageUrl }}" data-fancybox="gallery"></a>
@endforeach
</div>

					</div>



				</div>

			</section>

@endif

			<!-- Gallery section End -->



			<!-- Trip Journey Section Start -->
			   @php
                $scwidget_company = get_widgets(97);
                $af_data = json_decode($scwidget_company->additional_field_data);
            @endphp

			<section class="trip-journey-section"

				style="background-image: url('{{ asset_storage('front/images/trip-bg.jpg') }}'); background-size: cover; background-position: center top;">

				  {!! $scwidget_company->content !!}

			</section>

			<!-- Trip Journey Section End -->



			<!-- FAQ Section Start -->

			<section id="faqs" class="faq-section py-5">

				<div class="container py-4">

					<div class="section-title text-center mb-5" data-aos="fade-up" data-aos-duration="900">

						<h2 class="about-headline">Frequently Asked Questions</h2>

					</div>

					<div class="row justify-content-center" data-aos="fade-up" data-aos-duration="1000">

						<div class="col-lg-10">

							<div class="accordion custom-faq-accordion" id="faqAccordion">

								<!-- FAQ Item 1 -->


								<!-- FAQ Start -->
<div class="accordion" id="faqAccordion">

    @php $faq_count = 0; @endphp

    @foreach($get_all_faqs as $faq)

        @php
            $show = $faq_count == 0 ? 'show' : '';
            $collapsed = $faq_count == 0 ? '' : 'collapsed';
            $expanded = $faq_count == 0 ? 'true' : 'false';
        @endphp

        <div class="accordion-item faq-item">

            <h2 class="accordion-header" id="faqHeading{{ $faq_count }}">
                <button
                    class="accordion-button {{ $collapsed }}"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#faqCollapse{{ $faq_count }}"
                    aria-expanded="{{ $expanded }}"
                    aria-controls="faqCollapse{{ $faq_count }}">

                    {{ $faq->heading }}

                </button>
            </h2>

            <div
                id="faqCollapse{{ $faq_count }}"
                class="accordion-collapse collapse {{ $show }}"
                aria-labelledby="faqHeading{{ $faq_count }}"
                data-bs-parent="#faqAccordion">

                <div class="accordion-body">
                    {!! adjustUrl($faq->content) !!}
                </div>

            </div>

        </div>

        @php $faq_count++; @endphp

    @endforeach

</div>
<!-- FAQ End -->



								<!-- FAQ Item 2 -->

								


							</div>

						</div>

					</div>

				</div>

			</section>

			<!-- FAQ Section End -->









		</main>



		 
    
<!-- End Clients Area --> 
 
@endsection