@extends('layouts.main')
@section('title') Home @endsection
@section('style')
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style type="text/css">
	.swiper-pagination-bullet-active {
		background-color: #1d3a8c;
	}

	#star {
		animation: rotated 50s infinite linear;
		max-width: 12% !important;
	}

	.listing-card-one .feature li {
		margin-top: 0px;
	}

	@media (min-width: 992px) and (max-width: 1399px) {
		.feedback-block-three blockquote {
			font-size: 25px;
			margin-top: 20px;
			margin-bottom: 20px;
		}
	}
</style>
@endsection

@section('content')

<!-- 
		=============================================
			Hero Banner
		============================================== 
		-->
<div class="hero-banner-one bg-blue z-1 pt-225 xl-pt-200 pb-250 xl-pb-150 lg-pb-100 position-relative">
	<div class="container position-relative">
		<div class="row">
			<div class="col-xxl-10 col-xl-9 col-lg-10 col-md-10 m-auto">
				<h1 class="hero-heading text-center wow fadeInUp">{{ __('contents.mainHeadingHome') }} <span class="d-inline-block position-relative">{{ __('contents.mainHeadingHome2') }}<img src="{{ asset('main/images/lazy.svg') }}" data-src="{{ asset('main/images/shape/shape_01.svg') }}" alt="" class="lazy-img"></span></h1>
				<p class="fs-24 color-dark text-center pt-35 pb-35 wow fadeInUp" data-wow-delay="0.1s">{{ __('contents.headerSlogan') }}</p>
			</div>
		</div>
		<div class="row">
			<div class="col-xxl-10 m-auto">
				<div class="search-wrapper-one layout-one bg position-relative">
					<div class="bg-wrapper">
						<form method="post" action="{{ route('main.search-properties') }}" id="search-form" class="search-bar">
							@csrf
							<input type="text" name="location" class="form-control" placeholder="Search locations..." id="search-input">
							<div class="search-icon text-white">
								<i class="fa-thin fa-search"></i>
							</div>
						</form>
					</div>
				</div>
				<!-- /.search-wrapper-one -->
			</div>
		</div>
	</div>
	<img src="{{ asset('main/images/lazy.svg') }}" data-src='{{ asset("uploads/media/$settings->header_image") }}' alt="" class="lazy-img shapes w-100 illustration">
</div>
<!-- /.hero-banner-one -->

<!--
		=====================================================
			Property Listing Four
		=====================================================
		-->
<div class="property-listing-four bg-blue-three position-relative z-1 overflow-hidden pt-100 xl-pt-80 lg-pt-50 pb-40 xl-pb-30 lg-pb-20">
    <div class="container container-large">
        <div class="position-relative z-1">
            <div class="title-one mb-60 lg-mb-40 wow fadeInUp">
                <h2>{{ __('contents.listings') }} <span> <em>{{ __('contents.forYou') }}</em> <img src="{{ asset('main/images/lazy.svg') }}" data-src="{{ asset('main/images/shape/title_shape_03.svg') }}" alt="" class="lazy-img"></span></h2>
                <p class="fs-22 m0">{{ __('contents.listingpara') }}</p>
            </div>

            <div class="listing-slider-one">
                @php $j=0; @endphp
                @foreach($featured_properties as $prop)
                @php
                    $prop->incrementImpression();
                    
                    // 🟢 FIX: Reorder gallery array to lead with the "caught" thumbnail
                    $gallery = getMediaByType($prop->id, 'image');
                    $cover = $prop->thumbnail;
                    if($cover && in_array($cover, $gallery)){
                        $gallery = array_diff($gallery, [$cover]); 
                        array_unshift($gallery, $cover); 
                    }
                    $gallery = array_values($gallery); // Reset keys to 0, 1, 2... for indicators

                    $type = \App\Models\Property_Type::findorfail($prop->property_type);
                    $commune = \App\Models\Commune::where('code', $prop->commune)->first();
                    $district = \App\Models\District::where('code', $prop->district)->first();
                    $province = \App\Models\Province::where('code', $prop->province)->first();
                    $info = (!empty($prop->Info)) ? json_decode($prop->Info) : (object)[];
                @endphp
                <div class="item">
                    <div class="listing-card-one style-three border-25 h-100 w-100">
                        <div class="img-gallery p-15">
                            <div class="position-relative border-25 overflow-hidden">
                                <div class="tag border-25" style="width: 115px; z-index: 5;"><i class="fa-solid fa-building"></i> {{ $type->{'title_'.app()->getLocale()} }}</div>
                                <div class="tag border-25" style="width: 60px;right: 5px; bottom:17px; top: auto; left: auto; z-index: 5;"><i class="fa-solid fa-eye"></i> {{ formatViews($prop->views) }}</div>

                                <div id="carousel{{ $j }}" class="carousel slide" data-bs-ride="false">
                                    <div class="carousel-indicators custom-dots">
                                        @foreach($gallery as $index => $g)
                                        <button type="button" 
                                                data-bs-target="#carousel{{ $j }}" 
                                                data-bs-slide-to="{{ $index }}" 
                                                class="{{ $index == 0 ? 'active' : '' }}" 
                                                aria-current="{{ $index == 0 ? 'true' : 'false' }}">
                                        </button>
                                        @endforeach
                                    </div>
                                    <div class="carousel-inner">
                                        @foreach($gallery as $index => $image)
                                        <div class="carousel-item {{ $index == 0 ? 'active' : '' }}" data-bs-interval="1000000">
                                            <a href="{{ route('main.view-property', $prop->slug) }}" class="d-block">
                                                <img src="{{ asset('uploads/media/' . $image) }}" width="411" height="295" class="w-100" style="object-fit: cover;" alt="...">
                                            </a>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="property-info p-25">
                            <a href="{{ route('main.view-property',$prop->slug) }}" class="title tran3s text-nowrap">
                                {{ (mb_strlen($prop->{'title_'.app()->getLocale()}, 'UTF-8') > 25) ? mb_substr($prop->{'title_'.app()->getLocale()}, 0, 21, 'UTF-8') . "..." : $prop->{'title_'.app()->getLocale()} }}
                            </a>
                            @php $full_address = ($commune->{'name_'.app()->getLocale()} ?? '').", ".($district->{'name_'.app()->getLocale()} ?? '').", ".($province->{'name_'.app()->getLocale()} ?? ''); @endphp
                            <div class="address">{{ strlen($full_address) > 35 ? substr($full_address, 0, 34) . '...' : $full_address }}</div>
                            
                            <ul class="style-none feature d-flex align-items-center justify-content-between" style="flex-wrap: nowrap; gap: 14px;">
                                @if(!empty($info->bedrooms))
                                <li class="d-flex align-items-center"><img src="{{ asset('main/images/icon/icon_05.svg') }}" alt="" class="icon me-2"><span class="fs-16">{{ $info->bedrooms }}</span></li>
                                @endif
                                @if(!empty($info->car_parking))
                                <li class="d-flex align-items-center"><i class="fa-regular fa-car me-2"></i><span class="fs-16">{{ $info->car_parking }}</span></li>
                                @endif
                                @if(!empty($info->land_area))
                                <li class="d-flex align-items-center"><img src="{{ asset('main/images/icon/icon_04.svg') }}" alt="" class="icon me-2"><span class="fs-16">{{ $info->land_area }} m<sup>2</sup></span></li>
                                @endif
                            </ul>

                            <div class="pl-footer top-border d-flex align-items-center justify-content-between flex-nowrap">
                                <strong class="price fw-500 color-dark text-nowrap">{{ $settings->currency_symbol }} {{ number_format($prop->price) }} {{ $settings->currency_code }} / <sub>Mo</sub></strong>
                                <a href="{{ route('main.view-property', $prop->slug) }}" class="btn-four rounded-circle flex-shrink-0"><i class="bi bi-arrow-up-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                @php $j++; @endphp
                @endforeach
		</div>
		<div class="section-btn text-center">
			<a href="{{ route('main.properties') }}" class="btn-eleven fst-italic"><span>{{ __('contents.explore') }}</span></a>
		</div>
		<ul class="slider-arrows slick-arrow-two d-flex justify-content-center style-none md-mt-30">
			<li class="prev_b slick-arrow"><i class="bi bi-arrow-left"></i></li>
			<li class="next_b slick-arrow"><i class="bi bi-arrow-right"></i></li>
		</ul>
	</div>
</div>
<img src="images/lazy.svg" data-src="images/shape/shape_38.svg" alt="" class="lazy-img shapes shape_01 wow fadeInDown">
<img src="images/lazy.svg" data-src="images/shape/shape_39.svg" alt="" class="lazy-img shapes shape_02 wow fadeInUp">
</div>
<!-- /.property-listing-four -->

@if(count($types) > 0)
<!--
		=====================================================
			BLock Feature Three
		=====================================================
		-->
<div class="block-feature-three bg-blue-three pb-50 xl-pb-40" style="border-bottom: 2px solid black;">
	<div class="container">
		<div class="position-relative z-1">
			<div class="title-one text-center mb-75 xl-mb-50 md-mb-30 wow fadeInUp">
				<h3>{{ __('contents.explorePopular') }}
					<span>{{ __('contents.types') }}
						<img src="{{ asset('main/images/lazy.svg') }}" data-src="{{ asset('main/images/shape/title_shape_02.svg') }}" alt="" class="lazy-img">
					</span>
				</h3>
				<p class="fs-22">{{ __('contents.typesText') }}</p>
			</div>

			<div class="position-relative">
				<div class="swiper typesSwiper">
					<div class="swiper-wrapper">

						@foreach($types as $t)
						@php
						$type = \App\Models\Property_Type::find($t);
						$type_prop = \App\Models\Property::where('property_type',$t)->get();
						$image = !empty($type->image) ? $type->image : "default.png";
						@endphp

						<div class="swiper-slide">
							<div class="location-card-one position-relative z-1 d-flex align-items-end"
								style='background-image: url({{ asset("uploads/Type/$image") }}); background-position: center center ;'>
								<div class="content text-center w-100 tran3s">
									<h5 class="text-white fw-normal">{{ $type->{'title_'.app()->getLocale()} }}</h5>
									<p class="text-white fw-light">
										{{ count($type_prop) }} {{ count($type_prop) > 1 ? 'Properties' : 'Property' }}
									</p>
								</div>
								<a href="{{ route('main.search-query',['type'=>$t]) }}" class="stretched-link"></a>
							</div>
						</div>
						@endforeach

					</div>
				</div>

				<!-- arrows -->
				<div class="slider-btn types-prev"><i class="fa-sharp fa-light fa-angle-left"></i></div>
				<div class="slider-btn types-next"><i class="fa-sharp fa-light fa-angle-right"></i></div>
			</div>

		</div>
	</div>
</div>
<!-- /.block-feature-three -->
@endif

@if(count($rentals) > 0)
<!--
		=====================================================
			Agent Section One
		=====================================================
		-->
<div class="agent-section-one position-relative z-1 mb-50 mt-150 xl-mt-120">
	<div class="container">
		<div class="position-relative">
			<div class="title-one mb-85 lg-mb-50 wow fadeInLeft">
				<h3>{{ __('contents.latest') }} {{ __('contents.other') }}
					<span>{{ __('contents.rentals') }}
						<img src="{{ asset('main/images/lazy.svg') }}" data-src="{{ asset('main/images/shape/title_shape_05.svg') }}" alt="" class="lazy-img">
					</span>
				</h3>
				<p class="fs-22 mt-xs">{{ __('contents.newOtherRental') }}</p>
			</div>

			<div class="wrapper position-relative z-1">

				<div class="position-relative z-1">
    <div class="swiper agentSwiper">
        <div class="swiper-wrapper">

            @foreach($rentals as $rental)
            @php
            $rental->incrementImpression();

            // 1. Get the full gallery
            $rental_gallery = getMediaByType($rental->id,'image','rental');

            // 🟢 2. THE UPDATE: Reorder to catch the manual cover selection
            $r_cover = $rental->thumbnail;
            if ($r_cover && in_array($r_cover, $rental_gallery)) {
                // Remove cover from current spot and move to index 0
                $rental_gallery = array_diff($rental_gallery, [$r_cover]);
                array_unshift($rental_gallery, $r_cover);
                $rental_gallery = array_values($rental_gallery);
            }

            // 3. Determine the primary display image
            $first_image = !empty($rental_gallery[0])
                ? asset("uploads/media/$rental_gallery[0]")
                : asset('uploads/Type/default.png');

            $province = \App\Models\Province::where('code',$rental->province)->first();
            $district = \App\Models\District::where('code',$rental->district)->first();
            $commune = \App\Models\Commune::where('code',$rental->commune)->first();

            $village = !empty($rental->village)
                ? \App\Models\Village::where('code',$rental->village)->first()
                : null;

            // safe address logic remains
            $parts = [];
            if(!empty($rental->address)) $parts[] = $rental->address;
            if($village) $parts[] = $village->{'name_'.app()->getLocale()} ?? '';
            if($commune) $parts[] = $commune->{'name_'.app()->getLocale()} ?? '';
            if($district) $parts[] = $district->{'name_'.app()->getLocale()} ?? '';
            if($province) $parts[] = $province->{'name_'.app()->getLocale()} ?? '';
            $address = implode(', ', array_filter($parts));
            $address = $address ? $address . ', Cambodia' : 'Cambodia';

            $type = \App\Models\Rental_Type::findorfail($rental->type);
            @endphp

            <div class="swiper-slide">
                <div class="listing-card-one style-three w-100 h-100">
                    <div class="img-gallery p-15">
                        <div class="position-relative overflow-hidden">
                            <div class="tag bg-white text-dark fw-500">
                                {{ $type->{'title_'.app()->getLocale()} }}
                            </div>

                            {{-- 🟢 This image is now correctly "caught" from the thumbnail column --}}
                            <img src="{{ $first_image }}" style="height:260px; object-fit:cover;" class="w-100" alt="...">

                            <a href="{{ route('main.view-rental',$rental->slug) }}" class="btn-four inverse rounded-circle position-absolute">
                                <i class="bi bi-arrow-up-right"></i>
                            </a>

                            <div class="img-slider-btn">
                                {{ count($rental_gallery) }} <i class="fa-regular fa-image"></i>
                                @foreach($rental_gallery as $m)
                                {{-- 🟢 Sync fancybox with reordered array --}}
                                <a href="{{ asset("uploads/media/$m") }}" class="d-block" data-fancybox="img-rental-{{ $rental->id }}" data-caption="{{ $rental->title }}"></a>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="property-info pe-4 ps-4">
                        <a href="{{ route('main.view-rental',$rental->slug) }}" class="title tran3s">
                            {{ (mb_strlen($rental->{'title_'.app()->getLocale()}, 'UTF-8') > 25)
                                ? mb_substr($rental->{'title_'.app()->getLocale()}, 0, 25, 'UTF-8') . "..."
                                : $rental->{'title_'.app()->getLocale()}
                            }}
                        </a>

                        <div class="address">{{ $address }}</div>
                        <span>{{ time_ago($rental->created_at) }}</span>

                        <div class="pl-footer m0 d-flex align-items-center justify-content-between">
                            <strong class="price fw-500 color-dark">
                                {{ $settings->currency_symbol . ' ' . number_format($rental->price, 0, '.', ',') . ' ' . $settings->currency_code }}
                            </strong>

                            <ul class="style-none d-flex action-icons">
                                <li>
                                    <a href="{{ route('main.add-wishlist',[$rental->id,'rental']) }}">
                                        <i class="fa-light fa-heart"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>

    <div class="slider-btn agent-prev"><i class="fa-sharp fa-light fa-angle-left"></i></div>
    <div class="slider-btn agent-next"><i class="fa-sharp fa-light fa-angle-right"></i></div>
</div>

			</div>
		</div>
	</div>
</div>
<!-- /.agent-section-one -->
@endif

<!-- /.block-feature-ten -->
<!-- @if($testimonials->count() > 0) -->
<!--
		=====================================================
			Feedback Section Three
		=====================================================
		-->
<!-- <div class="feedback-section-three">
	<div class="container">
		<div class="bg-line position-relative z-1 pt-60  pb-40">
			<div class="row gx-lg-0">
				<div class="col-lg-5 col-md-8">
					<div class="title-one">
						<div class="upper-title color">CLIENT Feedback</div>
						<h2 class="font-garamond text-white fs-lg">Don’t Trust us, Trust Our <span class="color">Client.</span></h2>
					</div>
				</div>
				{{-- ✅ TESTIMONIALS (Swiper + autoplay 3s + fade + clickable dots) --}}
				<div class="col-lg-6 ms-auto">
					<div class="feedback-bg-wrapper md-mt-60 position-relative z-1">
						<div class="icon d-flex align-items-center justify-content-center rounded-circle">
							<img src="{{ asset('main/images/lazy.svg') }}"
								data-src="{{ asset('main/images/icon/icon_14.svg') }}"
								alt=""
								class="lazy-img">
						</div>

						<div class="swiper feedbackSwiper">
							<div class="swiper-wrapper">
								@foreach($testimonials as $t)
								<div class="swiper-slide">
									<div class="feedback-block-three">
										<blockquote>"{!! $t->description !!}"</blockquote>
										<div class="d-flex justify-content-end align-items-center">
											<div class="text-end pe-3 pe-lg-5">
												<div class="name fs-22 text-white mb-5">{{ $t->name }}</div>
												<div class="fs-18 text-white opacity-75">{{ $t->title }}</div>
											</div>
											<img src="{{ asset("uploads/media/$t->image") }}" alt="" class="avatar">
										</div>
									</div>
								</div>
								@endforeach
							</div>
						</div>

						<div class="swiper-pagination feedback-pagination text-start"></div>

						<div class="rating-box">
							<img src="{{ asset('main/images/lazy.svg') }}"
								data-src="{{ asset('main/images/shape/shape_25.svg') }}"
								alt=""
								class="lazy-img">
							<div class="rate fw-500">5 /5 <br><span>Rating</span></div>
						</div>
					</div>
				</div>
			</div>
			<img src="{{ asset('main/images/lazy.svg') }}" data-src="{{ asset('main/images/shape/shape_26.svg') }}" alt="" class="lazy-img shapes shape_01">
			<img src="{{ asset('main/images/lazy.svg') }}" data-src="{{ asset('main/images/shape/shape_27.svg') }}" alt="" class="lazy-img shapes shape_02" id="star">
		</div>
	</div>
</div> -->
<!-- /.feedback-section-three -->
<!-- @endif -->

@if(count($districts) > 0)
<!--
		=====================================================
			BLock Feature Three
		=====================================================
		-->
<div class="block-feature-three bg-blue pt-150 xl-pt-120 pb-150 xl-pb-120 ">
	<div class="container">
		<div class="position-relative z-1">
			<div class="title-one text-center mb-75 xl-mb-50 md-mb-30 wow fadeInUp">
				<h3>{{ __('contents.findProperty') }} <span>{{ __('contents.pProperty') }} <img src="{{ asset('main/images/lazy.svg') }}" data-src="{{ asset('main/images/shape/title_shape_02.svg') }}" alt="" class="lazy-img"></span></h3>
				<p class="fs-22">{{ __('contents.locationText') }}</p>
			</div>
			<!-- /.title-one -->

			<div class="property-location-slider-ayan">
				@foreach($districts as $d)
				@php
				$district = \App\Models\Province::where('code',$d)->first();
				$district_prop = \App\Models\Property::where('province',$d)->get();
				if(!empty($district->image)){
				$image = $district->image;
				}else{
				$image = "default.png";
				}
				@endphp
				<div class="item">
					<div class="location-card-one position-relative z-1 d-flex align-items-end" style='background-image: url({{ asset("uploads/Province/$image") }}); background-position: center center;'>
						<div class="content text-center w-100 tran3s">
							<h5 class="text-white fw-normal">{{ $district->{'name_'.app()->getLocale() } }}</h5>
							@if(count($district_prop) > 1)
							<p class="text-white fw-light">{{ count($district_prop) }} Properties</p>
							@else
							<p class="text-white fw-light">{{ count($district_prop) }} Property </p>
							@endif
						</div>
						<a href="{{ route('main.search-query',['province' => $d ]) }}" class="stretched-link"></a>
					</div>
					<!-- /.location-card-one -->
				</div>
				@endforeach
			</div>
			<ul class="slider-arrows slick-arrow-one d-flex justify-content-between style-none">
				<li class="prev_a slick-arrow"><i class="fa-sharp fa-light fa-angle-left"></i></li>
				<li class="next_a slick-arrow"><i class="fa-sharp fa-light fa-angle-right"></i></li>
			</ul>
		</div>
	</div>
</div>
<!-- /.block-feature-three -->
@endif


<!-- 
		=============================================
			BLock Feature Ten
		============================================== 
		-->
<div class="block-feature-ten mt-80 xl-mt-160 lg-mt-120 md-mt-100">
	<div class="container container-large">
		<div class="row">
			<div class="col-xxl-5 col-lg-6 ms-auto order-lg-last wow fadeInRight">
				<div class="pt-40 xl-pt-20 pb-110 xl-pb-60">
					<div class="title-one mb-45 lg-mb-20">
						<h3>IT'S ALL ABOUT PROPERTY FOR RENT.</h3>
					</div>
					<!-- /.title-one -->
					<p class="fs-24 mb-45">A platform where agents or landlordscan upload properties, and where renters can find a place to rent.</p>
					<div class="counter-wrapper pt-15 pe-xl-5">
						<div class="row">
							<div style="display:block; margin-top:10px;">
								<div style="display:inline-block; width:150px;">
									<a href="https://www.apple.com/app-store/" target="_blank" rel="noopener noreferrer">
										<img height="50px" src="{{ asset('uploads/media/apple.webp') }}" />
									</a>
								</div>
								<div style="display:inline-block; width:150px;">
									<a href="https://play.google.com/store/games?device=windows" target="_blank" rel="noopener noreferrer">
										<img height="50px" src="{{ asset('uploads/media/android.png') }}">
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-6">
				<div class="media-gallery position-relative z-1 h-100 wow fadeInLeft">
					<div class="bg" style="background-image: url('{{ asset("uploads/media/$settings->app_image") }}');">
					</div>
				</div>
				<!-- /.media-gallery -->
			</div>
		</div>
	</div>
</div>

<!-- /.block-feature-ten -->
@if($testimonials->count() > 0)
<!--
		=====================================================
			Feedback Section Three
		=====================================================
		-->
<div class="feedback-section-three">
	<div class="container">
		<div class="bg-line position-relative z-1 pt-60  pb-40">
			<div class="row gx-lg-0">
				<div class="col-lg-5 col-md-8">
					<div class="title-one">
						<div class="upper-title color">CLIENT Feedback</div>
						<h2 class="font-garamond text-blank fs-lg">Don’t Trust us, Trust Our <span class="color">Client.</span></h2>
					</div>
					<!-- /.title-one -->
				</div>
				{{-- ✅ TESTIMONIALS (Swiper + autoplay 3s + fade + clickable dots) --}}
				<div class="col-lg-6 ms-auto">
					<div class="feedback-bg-wrapper md-mt-60 position-relative z-1">
						<div class="icon d-flex align-items-center justify-content-center rounded-circle">
							<img src="{{ asset('main/images/lazy.svg') }}"
								data-src="{{ asset('main/images/icon/icon_14.svg') }}"
								alt=""
								class="lazy-img">
						</div>

						<!-- ✅ Swiper -->
						<div class="swiper feedbackSwiper">
							<div class="swiper-wrapper">
								@foreach($testimonials as $t)
								<div class="swiper-slide">
									<div class="feedback-block-three">
										<blockquote>"{!! $t->description !!}"</blockquote>
										<div class="d-flex justify-content-end align-items-center">
											<div class="text-end pe-3 pe-lg-5">
												<div class="name fs-22 text-blank mb-5">{{ $t->name }}</div>
												<div class="fs-18 text-blank opacity-75">{{ $t->title }}</div>
											</div>
											<img src="{{ asset("uploads/media/$t->image") }}" alt="" class="avatar">
										</div>
									</div>
								</div>
								@endforeach
							</div>
						</div>

						<!-- ✅ clickable dots -->
						<div class="swiper-pagination feedback-pagination text-start"></div>

						<div class="rating-box">
							<img src="{{ asset('main/images/lazy.svg') }}"
								data-src="{{ asset('main/images/shape/shape_25.svg') }}"
								alt=""
								class="lazy-img">
							<div class="rate fw-500">5 /5 <br><span>Rating</span></div>
						</div>
					</div>
				</div>
			</div>
			<img src="{{ asset('main/images/lazy.svg') }}" data-src="{{ asset('main/images/shape/shape_26.svg') }}" alt="" class="lazy-img shapes shape_01">
			<img src="{{ asset('main/images/lazy.svg') }}" data-src="{{ asset('main/images/shape/shape_27.svg') }}" alt="" class="lazy-img shapes shape_02" id="star">
		</div>
	</div>
</div>
<!-- /.feedback-section-three -->
@endif

@endsection
@section('script')
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
	document.addEventListener('DOMContentLoaded', function() {
		new Swiper('.typesSwiper', {
			loop: true,
			spaceBetween: 25,
			navigation: {
				nextEl: '.types-next',
				prevEl: '.types-prev',
			},
			breakpoints: {
				0: {
					slidesPerView: 1
				},
				576: {
					slidesPerView: 1
				},
				768: {
					slidesPerView: 2
				},
				992: {
					slidesPerView: 3
				},
			}
		});
	});
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        new Swiper('.agentSwiper', {
            loop: true,
            spaceBetween: 30,
            // បន្ថែមបន្ទាត់ខាងក្រោមនេះ
            pagination: false, 
            navigation: {
                nextEl: '.agent-next',
                prevEl: '.agent-prev',
            },
            breakpoints: {
                0: { slidesPerView: 1 },
                992: { slidesPerView: 3 },
            }
        });
    });
</script>

<!-- add animation -->
<script>
	document.addEventListener('DOMContentLoaded', function() {
		new Swiper('.feedbackSwiper', {
			slidesPerView: 1,
			loop: true,
			speed: 600,

			// ✅ fade effect
			effect: 'fade',
			fadeEffect: {
				crossFade: true
			},

			// ✅ autoplay 3s
			autoplay: {
				delay: 3000,
				disableOnInteraction: false,
			},
			pagination: {
				el: '.feedback-pagination',
				clickable: true, // ✅ click dots
			},
		});
	});
</script>




<script>
	const suggestions = null;
	$(document).ready(function() {
		$("#search-input").autocomplete({
			source: function(request, response) {
				const results = $.ui.autocomplete.filter(suggestions, request.term);
				response(results.slice(0, 8));
			},
			minLength: 1,
			select: function(event, ui) {
				// Set the selected value
				$('#search-input').val(ui.item.value);
				// Automatically submit the form
				$('#search-form').submit();
			}
		});
	});
</script>
<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function() {
		const swiper = new Swiper('.mySwiper', {
			slidesPerView: 1,
			spaceBetween: 20,
			loop: true,
			autoplay: {
				delay: 5000,
				disableOnInteraction: false,
			},
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
		});
	});

	const suggestions = null;
	$(document).ready(function() {
		$("#search-input").autocomplete({
			source: function(request, response) {
				const results = $.ui.autocomplete.filter(suggestions, request.term);
				response(results.slice(0, 8));
			},
			minLength: 1,
			select: function(event, ui) {
				// Set the selected value
				$('#search-input').val(ui.item.value);
				// Automatically submit the form
				$('#search-form').submit();
			}
		});
	});
</script>
<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function() {
		const swiper = new Swiper('.mySwiper', {
			slidesPerView: 1,
			spaceBetween: 20,
			loop: true,
			autoplay: {
				delay: 5000,
				disableOnInteraction: false,
			},
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
		});
	});
</script>
@endsection