@use('app\Helpers\Helpers')
@use('App\Models\Setting')
@use('App\Enums\AdvertisementTypeEnum')
@use('App\Enums\SymbolPositionEnum')
@php
    $homePage = Helpers::getCurrentHomePage();
    $settings = Setting::pluck('values')->first();
    $homePageAdvertiseBanners = Helpers::getHomePageAdvertiseBanners();
    $advertiseServices = Helpers::getHomePageAdvertiseServices();
@endphp
@extends('frontend.layout.master')
{{ data_get($data ?? [], 'home_banner', 'default_banner.jpg') }}
@section('title', $themeOptions['general']['site_title'])

@section('content')
    @use('App\Enums\ServiceTypeEnum')
    @use('App\Enums\FrontEnum')
    <!-- Home Banner Section Start -->
    @if (isset($homePage['home_banner']) && $homePage['home_banner']['status'])
        <section class="home-section overflow-hidden">
            <div class="home-icon">
                <img src="{{ asset('frontend/images/svg/home-bg.svg') }}" class="img-fluid lozad" alt="">
            </div>
            <div class="container-fluid-lg">
                <div class="home-contain">
                    <h1>{{ $homePage['home_banner']['title'] ?? __('static.hero_section_title') }}</h1>
                    <p>{{ $homePage['home_banner']['description'] ??  __('static.hero_section_description') }}</p>
                </div>
            </div>

            <div class="home-slider">
                @php
                    $services = Helpers::getServices($homePage['home_banner']['service_ids'] ?? []);
                @endphp
                <div class="swiper service-slider">
                    @if (count($services))
                        <div class="swiper-wrapper">
                            @foreach ($services as $service)
                                <div class="swiper-slide">
                                    <a href="{{ route('frontend.service.details', ['slug' => $service?->slug]) }}" class="service-card">
                                        <div class="img-box">
                                            <img class="img-fluid lozad" src="{{ $service?->web_img_thumb_url }}" alt="service">
                                        </div>
                                        <div class="service-content" title="{{ $service?->title }}">
                                            <span>{{ $service?->title }}</span>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif
    <!-- Home Banner Section End -->

    <!-- Category Section Start -->
    @if (isset($homePage['categories_icon_list']) && $homePage['categories_icon_list']['status'])
        <section class="category-section section-b-space">
            <div class="container-fluid-lg">
                <div class="title-1">
                    <h6><span>{{ $homePage['categories_icon_list']['section_label'] ?? __('frontend::static.category_section.section_label') }}</span></h6>
                    <h2>{{ $homePage['categories_icon_list']['title'] ?? __('frontend::static.category_section.title') }}</h2>
                    <p>{{ $homePage['categories_icon_list']['description'] ?? __('frontend::static.category_section.description') }}</p>
                    <a class="view-all" href="{{ route('frontend.category.index') }}" rel="noopener noreferrer">{{ __('frontend::static.home_page.view_all') }}<i class="iconsax" icon-name="arrow-right"></i></a>
                </div>
                @php
                    $categories = Helpers::getCategories($homePage['categories_icon_list']['category_ids'] ?? []);
                @endphp
                <div class="row g-lg-5 g-3 category-row">
                    <div class="col-xxl-3 col-lg-4">
                        <ul class="nav nav-tabs custom-nav-tabs" id="myTab">
                            @foreach ($categories as $key => $category)    
                                @php
                                    $locale = app()->getLocale();
                                    $mediaItems = $category->getMedia('image')->filter(function ($media) use ($locale) {
                                            return $media->getCustomProperty('language') === $locale;
                                        });
                                    $imageUrl = $mediaItems->count() > 0 ? $mediaItems->first()->getUrl() : FrontEnum::getPlaceholderImageUrl();
                                @endphp

                                <li class="nav-item" id="nav-item">
                                    <button class="nav-link {{ $loop?->first ? 'active' : '' }}" id="{{ $category->slug }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $category->slug }}">
                                        <div class="img-box">
                                            <img src="{{ Helpers::isFileExistsFromURL($imageUrl, true) }}" alt="{{ $category?->title }}" class="img-fluid lozad">
                                        </div>
                                        <div class="text-box">
                                            <span>{{ $category?->title }}</span>
                                            <small>{{ count($category->services?->whereNull('parent_id')?->where('status', true)) }} {{ __('frontend::static.home_page.services') }}</small>
                                        </div>
                                        <i class="iconsax" icon-name="arrow-right"></i>
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="col-xxl-9 col-lg-8">
                        <div class="tab-content mt-0" id="myTabContent">
                            @foreach ($categories as $key => $category)    
                                <div class="tab-pane fade {{ $loop?->first ? 'show active' : '' }}" id="{{ $category->slug }}">
                                    <div class="row g-md-4 g-sm-3 g-2 row-cols-xxl-4 row-cols-xl-3 row-cols-lg-2 row-cols-md-3 row-cols-2">
                                        @forelse ($category->services?->whereNull('parent_id')?->where('status', true)->where('is_custom_offer', false) as $services)    
                                            <div class="col">
                                                <a href="{{ route('frontend.service.details', ['slug' => $services?->slug]) }}" class="category-img">
                                                    <img src="{{ $services?->web_img_thumb_url }}" alt="AC Master Service" class="img-fluid lozad">
                                                    <span class="category-span">{{ $services?->title }}</span>
                                                </a>
                                            </div>
                                        @empty
                                            <div class="no-data-found">
                                                <p>{{ __('frontend::static.home_page.services_not_found') }}</p>
                                            </div>
                                        @endforelse
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- Category Section End -->

    <!-- Service Section Start -->
    @if (isset($homePage['service_list_1']) && $homePage['service_list_1']['status'])
        <section class="service-list-section section-bg section-b-space">
            <div class="container-fluid-lg">
                <div class="title-1 light-gray-title">
                    <h6><span>{{ $homePage['service_list_1']['section_label'] ?? __('frontend::static.service_list_1.section_label') }}</span></h6>
                    <h2>{{ $homePage['service_list_1']['title'] ?? __('frontend::static.service_list_1.title') }}</h2>
                    <p>{{ $homePage['service_list_1']['description'] ?? __('frontend::static.service_list_1.description') }}</p>
                    <a class="view-all" href="{{ route('frontend.service.index') }}" rel="noopener noreferrer">
                        {{ __('frontend::static.home_page.view_all') }}
                        <i class="iconsax" icon-name="arrow-right"></i>
                    </a>
                </div>
                <div class="service-list-content ratio3_2">
                    @php
                        $services = Helpers::getServices($homePage['service_list_1']['service_ids'] ?? [])?->paginate($themeOptions['pagination']['service_per_page']);
                    @endphp
                    @if (count($services ?? []))
                        <div class="outside-arrow">
                            <div class="swiper feature-slider slider-pagination arrow-slider">
                                <div class="swiper-wrapper">
                                    @foreach ($services as $service)
                                        <div class="swiper-slide">
                                            <div class="card">
                                                @if ($service->discount)
                                                    <div class="discount-tag">{{ $service->discount }}%</div>
                                                @endif
                                                <div class="card-image">
                                                    <a href="{{ route('frontend.service.details', $service?->slug) }}" class="card-img">
                                                        <img src="{{ $service?->web_img_thumb_url }}" alt="{{ $service?->title }}" class="img-fluid lozad">
                                                    </a>
                                                </div>
                                                <div class="card-body">
                                                    <div class="service-title">
                                                        <h4>
                                                            <a title="{{ $service?->title }}" href="{{ route('frontend.service.details', $service?->slug) }}">{{ $service?->title }}</a>
                                                        </h4>
                                                        @if ($service->price || $service->service_rate)
                                                            <div class="price-number">
                                                                @if ($service->price && $service->service_rate)
                                                                    <small>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->service_rate) }}</small>
                                                                @else
                                                                    <small>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->price) }}</small>
                                                                @endif
                                                                <del>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->price) }}</del>

                                                                <div class="number-box">
                                                                    @if ($service?->duration)                                                        
                                                                        <div class="time">
                                                                            <i class="iconsax" icon-name="clock"></i>
                                                                            <span>{{ $service?->duration }}{{ $service?->duration_unit === 'hours' ? 'h' : 'm' }}</span>
                                                                        </div>
                                                                    @endif
                                                                    @if ($service?->required_servicemen)                                                        
                                                                        <div class="time">
                                                                            <i class="iconsax" icon-name="security-user"></i>
                                                                            <span>{{ $service?->required_servicemen }}</span>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <div class="card-footer">
                                                        <div class="footer-detail">
                                                            <img src="{{ Helpers::isFileExistsFromURL($service?->user?->media?->first()?->getURL(), true) }}" alt="feature" class="img-fluid lozad">
                                                            <div class="footer-content">
                                                                <div>
                                                                    <a href="{{ route('frontend.provider.details', ['slug' => $service?->user?->slug]) }}">
                                                                        <p>{{ $service?->user?->name }}</p>
                                                                    </a>
                                                                    <div class="rate">
                                                                        <ul class="rating-list">
                                                                            @php
                                                                                $rating = round($service?->user?->review_ratings ?? 0); // rating (0–5)
                                                                            @endphp
    
                                                                            @for($i = 1; $i <= 5; $i++)
                                                                                @if($i <= $rating)
                                                                                    <li>
                                                                                        <img data-src="{{ asset('frontend/images/svg/star.svg') }}" alt="star" class="img-fluid star lozad">
                                                                                    </li>
                                                                                @else
                                                                                    <li>
                                                                                        <img data-src="{{ asset('frontend/images/svg/star-light.svg') }}" alt="star" class="img-fluid star lozad">
                                                                                    </li>
                                                                                @endif
                                                                            @endfor
                                                                        </ul>
                                                                        <small>({{ $service?->user?->review_ratings ?? '' }})</small>
                                                                    </div>
                                                                </div>

                                                                {{-- <button class="btn book-btn"><i class="iconsax" icon-name="add"></i> Book</button> --}}

                                                                <button data-bs-toggle="tooltip" data-bs-placement="bottom"
                                                                    data-bs-custom-class="book-now-tooltip"
                                                                    data-bs-title="{{ __('frontend::static.home_page.book_now') }}"
                                                                    type="button" class="btn book-now-btn btn-solid w-auto"
                                                                    id="bookNowButton" data-bs-toggle="modal"
                                                                    data-bs-target="#bookServiceModal-{{ $service->id }}"
                                                                    data-login-url="{{ route('frontend.login') }}"
                                                                    data-check-login-url="{{ route('frontend.check.login') }}"
                                                                    data-service-id="{{ $service->id }}">
                                                                    <span>+ {{ __('frontend::static.home_page.book_now') }}</span>
                                                                    <span class="spinner-border spinner-border-sm"
                                                                        style="display: none;"></span>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-pagination"></div>
                            </div>
                            <div class="arrow-slider-box">
                                <button class="swiper-button-prev">
                                    <i class="iconsax" icon-name="chevron-left"></i>
                                </button>
                                <button class="swiper-button-next">
                                    <i class="iconsax" icon-name="chevron-right"></i>
                                </button>
                            </div>
                        </div>
                    @else
                        <div class="w-100 m-0">
                            <div class="no-data-found">
                                <p>{{ __('frontend::static.home_page.services_not_found') }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
        @forelse($services as $service)
            @includeIf('frontend.inc.modal', ['service' => $service])
        @empty
        @endforelse
    @endif
    <!-- Service Section End -->

    <!-- Value Banner Section Start -->
    @isset($homePage['value_banners']['banners'])
        @if ($homePage['value_banners']['status'])
            <section class="offer-section section-b-space">
                <div class="container-fluid-lg">
                    <div class="title-1">
                        <h6><span>{{  $homePage['value_banners']['section_label'] ?? __('frontend::static.value_banners.section_label') }}</span></h6>
                        <h2>{{ $homePage['value_banners']['title'] ?? __('frontend::static.value_banners.title') }}</h2>
                        <p>{{ $homePage['value_banners']['description'] ?? __('frontend::static.value_banners.description') }}</p>
                    </div>
                    <div class="offer-content">
                        <div class="swiper offer-slider">
                            @isset($homePage['value_banners']['banners'])
                                <div class="swiper-wrapper">
                                    @forelse ($homePage['value_banners']['banners'] as $banner)
                                        <div class="swiper-slide">
                                            <div class="position-relative">
                                                <div class="sale-tag">
                                                    <span>{{ $banner['sale_tag'] }}</span>
                                                </div>
                                                <div class="offer-img">
                                                    <img src="{{ asset($banner['image_url'] ?? 'frontend/images/img-not-found.jpg') }}"
                                                        alt="{{ $homePage['value_banners']['title'] }}" class="img-fluid lozad">
                                                </div>
                                                <div class="offer-detail">
                                                    <h3>{{ $banner['title'] }}</h3>
                                                    <p>{{ $banner['description'] }}</p>
                                                    @if ($banner['redirect_type'] == 'service-page')
                                                        <a href="{{ route('frontend.service.index') }}"
                                                            class="btn btn-outline">{{ $banner['button_text'] }}</a>
                                                    @elseif($banner['redirect_type'] == 'service-package-page')
                                                        <a href="{{ route('frontend.service-package.index') }}"
                                                            class="btn btn-outline">{{ $banner['button_text'] }}</a>
                                                    @elseif($banner['redirect_type'] == 'category-page')
                                                        <a href="{{ route('frontend.category.index') }}"
                                                            class="btn btn-outline">{{ $banner['button_text'] }}</a>
                                                    @elseif($banner['redirect_type'] == 'service')
                                                        @php
                                                            $service = Helpers::getServiceById($banner['redirect_id']);
                                                        @endphp
                                                        <a href="{{ route('frontend.service.details', ['slug' => $service?->slug]) }}"
                                                            class="btn btn-outline">{{ $banner['button_text'] }}</a>
                                                    @elseif($banner['redirect_type'] == 'package')
                                                        @php
                                                            $servicePackage = Helpers::getServicePackageById(
                                                                $banner['redirect_id'],
                                                            );

                                                        @endphp
                                                        <a href="{{ route('frontend.service-package.details', ['slug' => $servicePackage?->slug]) }}"
                                                            class="btn btn-outline">{{ $banner['button_text'] }}</a>
                                                    @elseif($banner['redirect_type'] == 'external_url')
                                                        <a href="{{ $banner['button_url'] }}"
                                                            class="btn btn-outline">{{ $banner['button_text'] }}</a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="no-data-found">
                                            <p>{{ __('frontend::static.home_page.banners_not_found') }}</p>
                                        </div>
                                    @endforelse
                                </div>
                            @endisset
                        </div>
                    </div>
                </div>
            </section>
        @endif
    @endisset
    <!-- Value Banner Section End -->

    <!-- Spcial Offer In Service Section Start -->
    @if (count($advertiseServices))
    <section class="service-list-section section-bg section-b-space">
        <div class="container-fluid-lg">
            <div class="title-1">
                <h6>
                    <span>{{ $homePage['special_offers_section']['section_label'] ?? __('frontend::static.special_offers_section.section_label') }}</span>
                </h6>
                <h2>{{  $homePage['special_offers_section']['service_section_title'] ?? __('frontend::static.special_offers_section.service_section_title') }}</h2>
                <p>{{  $homePage['special_offers_section']['service_section_description'] ?? __('frontend::static.special_offers_section.service_section_description') }}</p>
                <a class="view-all" href="{{ route('frontend.service.index') }}" rel="noopener noreferrer">
                    {{ __('frontend::static.home_page.view_all') }}
                    <i class="iconsax" icon-name="arrow-right"></i>
                </a>
            </div>
            <div class="service-list-content">
                 <div class="outside-arrow">
                <div class="swiper feature-slider">
                    <div class="swiper-wrapper">
                        @foreach ($advertiseServices as $advertisement)
                            @foreach ($advertisement->services as $service)
                                <div class="swiper-slide">
                                    <div class="card">
                                        @if ($service->discount)
                                            <div class="discount-tag">{{ $service->discount }}%</div>
                                        @endif
                                        <div class="card-image">
                                            <a href="{{ route('frontend.service.details', $service?->slug) }}" class="card-img">
                                                <img src="{{ $service?->web_img_thumb_url }}" alt="{{ $service?->title }}" class="img-fluid lozad">
                                            </a>
                                        </div>
                                        <div class="card-body">
                                            <div class="service-title">
                                                <h4>
                                                    <a title="{{ $service?->title }}" href="{{ route('frontend.service.details', $service?->slug) }}">{{ $service?->title }}</a>
                                                </h4>
                                                @if ($service->price || $service->service_rate)
                                                    <div class="price-number">
                                                        @if ($service->price && $service->service_rate)
                                                            <small>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->service_rate) }}</small>
                                                        @else
                                                            <small>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->price) }}</small>
                                                        @endif
                                                        <del>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($service->price) }}</del>

                                                        <div class="number-box">
                                                            @if ($service?->duration)                                                        
                                                                <div class="time">
                                                                    <i class="iconsax" icon-name="clock"></i>
                                                                    <span>{{ $service?->duration }}{{ $service?->duration_unit === 'hours' ? 'h' : 'm' }}</span>
                                                                </div>
                                                            @endif
                                                            @if ($service?->required_servicemen)                                                        
                                                                <div class="time">
                                                                    <i class="iconsax" icon-name="security-user"></i>
                                                                    <span>{{ $service?->required_servicemen }}</span>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="card-footer">
                                                <div class="footer-detail">
                                                    <img src="{{ Helpers::isFileExistsFromURL($service?->user?->media?->first()?->getURL(), true) }}" alt="feature" class="img-fluid lozad">
                                                    <div class="footer-content">
                                                        <div>
                                                            <a href="{{ route('frontend.provider.details', ['slug' => $service?->user?->slug]) }}">
                                                                <p>{{ $service?->user?->name }}</p>
                                                            </a>
                                                            <div class="rate">
                                                                <ul class="rating-list">
                                                                    @php
                                                                        $rating = round($service?->user?->review_ratings ?? 0); // rating (0–5)
                                                                    @endphp

                                                                    @for($i = 1; $i <= 5; $i++)
                                                                        @if($i <= $rating)
                                                                            <li>
                                                                                <img data-src="{{ asset('frontend/images/svg/star.svg') }}" alt="star" class="img-fluid star lozad">
                                                                            </li>
                                                                        @else
                                                                            <li>
                                                                                <img data-src="{{ asset('frontend/images/svg/star-light.svg') }}" alt="star" class="img-fluid star lozad">
                                                                            </li>
                                                                        @endif
                                                                    @endfor
                                                                </ul>
                                                                <small>({{ $service?->user?->review_ratings ?? '' }})</small>
                                                            </div>
                                                        </div>
                                                        <button data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="book-now-tooltip" data-bs-title="{{ __('frontend::static.home_page.book_now') }}" type="button" class="btn book-now-btn btn-solid w-auto" id="bookNowButton" data-bs-toggle="modal" data-bs-target="#bookServiceModal-{{ $service->id }}" data-login-url="{{ route('frontend.login') }}" data-check-login-url="{{ route('frontend.check.login') }}" data-service-id="{{ $service->id }}">
                                                            <span>+ {{ __('frontend::static.home_page.book_now') }}</span>
                                                            <span class="spinner-border spinner-border-sm" style="display: none;"></span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endforeach
                    </div>
                   
                </div>
                     <div class="arrow-slider-box">
                        <div class="swiper-button-prev">
                            <i class="iconsax" icon-name="chevron-left"></i>
                        </div>
                        <div class="swiper-button-next">
                            <i class="iconsax" icon-name="chevron-right"></i>
                        </div>
                    </div>
                 </div>
            </div>
        </div>
    </section>
    @endif
    <!-- Spacial Offer In Service Section End -->

    <!-- Provider Section Start -->
    @if (isset($homePage['providers_list']) && $homePage['providers_list']['status'])
        <section class="expert-section section-bg section-b-space">
            <div class="container-fluid-lg">
                <div class="title-1 light-gray-title">
                    <h6>
                        <span>{{ $homePage['providers_list']['section_label'] ?? __('frontend::static.providers_list.section_label') }}</span>
                    </h6>
                    <h2>{{ $homePage['providers_list']['title'] ?? __('frontend::static.home_page.expert_provider_by_rating') }}
                    </h2>
                    <p>{{ $homePage['providers_list']['description'] ?? __('frontend::static.providers_list.description') }}</p>
                    <a class="view-all" href="{{ route('frontend.provider.index') }}" rel="noopener noreferrer">
                        {{ __('frontend::static.home_page.view_all') }}
                        <i class="iconsax" icon-name="arrow-right"></i>
                    </a>
                </div>
                <div class="expert-content">
                    <div class="row g-sm-4 g-3">
                        @php
                            $providers = Helpers::getTopProvidersByRatings(
                                $homePage['providers_list']['provider_ids'] ?? [],
                            );
                        @endphp
                        @forelse ($providers as $provider)
                            <div class="col-xxl-3 col-lg-4 col-sm-6">
                                <div class="card dark-card">
                                    <div class="top-card">
                                        <div class="dark-card-img">
                                            <img src="{{ Helpers::isFileExistsFromURL($provider?->media?->first()?->getUrl(), true) }}"
                                                alt="{{ $provider?->name }}" class="img-fluid profile-pic lozad">
                                        </div>
                                        <div class="dark-card-name">
                                            <div class="card-title">
                                                <a href="{{ route('frontend.provider.details', $provider->slug) }}">
                                                    <h4>{{ $provider?->name }}</h4>
                                                </a>
                                                <div class="rate">
                                                    <img src="{{ Helpers::isFileExistsFromURL(asset('frontend/images/svg/star.svg'), true) }}"
                                                        alt="star" class="img-fluid star lozad">
                                                    <small>({{ $provider?->review_ratings }})</small>
                                                </div>
                                            </div>
                                            <div class="location">
                                                <i class="iconsax" icon-name="location"></i>
                                                <h5>{{ $provider?->primary_address?->state?->name }} -
                                                    {{ $provider?->primary_address?->country?->name }}</h5>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="card-detail">
                                            <h5>Address:</h5>
                                            <p>{{ $provider?->primary_address?->address }},{{ $provider?->primary_address?->postal_code }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="no-data-found">
                                <p>{{ __('frontend::static.home_page.providers_not_found') }}</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- Provider Section End -->

    <!-- Service Package Section Start -->
    @if (isset($homePage['service_packages_list']) && $homePage['service_packages_list']['status'])
        <section class="service-package-section section-b-space">
            <div class="container-fluid-lg">
                <div class="title-1">
                    <h6>
                        <span>{{ $homePage['service_packages_list']['section_label'] ?? __('frontend::static.service_packages_list.section_label') }}</span>
                    </h6>
                    <h2>{{ $homePage['service_packages_list']['title'] ?? __('frontend::static.service_packages_list.title') }}</h2>
                    <p>{{ $homePage['service_packages_list']['description'] ?? __('frontend::static.service_packages_list.description') }}</p>
                    <a class="view-all" href="{{ route('frontend.service-package.index') }}" rel="noopener noreferrer">{{ __('frontend::static.home_page.view_all') }}
                        <i class="iconsax" icon-name="arrow-right"></i>
                    </a>
                </div>
                <div class="service-package-content">
                    <div class="row g-sm-4 g-3">
                        @php
                            $servicePackages = Helpers::getServicePackagesByIds($homePage['service_packages_list']['service_packages_ids'] ?? []);
                        @endphp
                        @forelse ($servicePackages as $servicePackage)
                            @php
                            $locale = app()->getLocale();
                                $salePrice = Helpers::getServicePackageSalePrice($servicePackage?->id);
                                $coverMedia = $servicePackage->getMedia('cover_image')->filter(function ($media) use ($locale) { 
                                    return $media->getCustomProperty('language') === $locale;
                                });
                                $coverImageUrl = $coverMedia->count() > 0 ? $coverMedia->first()->getUrl() : FrontEnum::getPlaceholderImageUrl();
                            @endphp
                            <div class="col-xxl-3 col-lg-4 col-sm-6">
                                <a href="{{ route('frontend.service-package.details', $servicePackage['slug']) }}" class="service-package-box">
                                    <div class="service-image">
                                        <img src="{{ asset($coverImageUrl) }}" class="img-fluid" alt="">
                                    </div>
                                    <div class="service-detail">
                                        <div class="service-icon">
                                            @php
                                                $locale = app()->getLocale();
                                                $mediaItems = $servicePackage->getMedia('image')
                                                    ->filter(function ($media) use ($locale) {
                                                        return $media->getCustomProperty('language') === $locale;
                                                    });
                                                $imageUrl =
                                                    $mediaItems->count() > 0
                                                        ? $mediaItems->first()->getUrl()
                                                        : FrontEnum::getPlaceholderImageUrl();
                                            @endphp
                                            <img src="{{ Helpers::isFileExistsFromURL($imageUrl, true) }}" alt="{{ $servicePackage?->services?->first()?->categories?->first()?->name }}" class="img-fluid lozad">
                                        </div>
                                        <div>
                                            <h3>{{ $servicePackage?->title }}</h3>
                                            <div class="price">
                                                <span>{{ Helpers::getDefaultCurrencySymbol() }}{{ Helpers::covertDefaultExchangeRate($salePrice) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @empty
                            <div class="no-data-found">
                                <div class="col-12">
                                    <p>{{ __('frontend::static.home_page.service_package_not_found') }}</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- Service Package Section End -->

    <!-- Blog Section Start -->
    @if (isset($homePage['blogs_list']) && $homePage['blogs_list']['status'])
        <section class="blog-section section-bg section-b-space">
            <div class="container-fluid-lg">
                <div class="title-1 light-gray-title">
                    <div>
                        <h6><span>{{ $homePage['blogs_list']['section_label'] ?? __('frontend::static.blogs_list.section_label') }}</span></h6>
                        <h2>{{ $homePage['blogs_list']['title'] ?? __('frontend::static.blogs_list.title') }}</h2>

                        <p>{{ $homePage['blogs_list']['description'] ?? __('frontend::static.blogs_list.description') }}</p>
                        <a class="view-all" href="{{ route('frontend.blog.index') }}" rel="noopener noreferrer">
                            {{ __('frontend::static.home_page.view_all') }}
                            <i class="iconsax" icon-name="arrow-right"></i>
                        </a>
                    </div>
                </div>

                <div class="outside-arrow">
                    <div class="swiper blog-content slider-pagination blog-slider">
                        <div class="swiper-wrapper">
                            @php
                                if (isset($homePage['blogs_list']['blog_ids'])) {
                                    $blogs = Helpers::getBlogsByIds($homePage['blogs_list']['blog_ids']);
                                } else {
                                    $blogs = [];
                                }
                            @endphp

                            @forelse ($blogs as $blog)
                                <div class="swiper-slide">
                                    <div class="blog-main">
                                        <div class="card">
                                            <div class="card-head">
                                                <a href="{{ route('frontend.blog.details', $blog?->slug) }}"
                                                    class="card-img">
                                                    <img src="{{ $blog?->web_img_thumb_url }}" alt="{{ $blog?->title }}"
                                                        class="img-fluid lozad">
                                                </a>
                                            </div>
                                            <div class="card-body">
                                                <ul class="blog-detail">
                                                    <li>{{ $blog?->categories?->first()?->title }}</li>
                                                    <li>{{ $blog?->created_at }}</li>
                                                </ul>
                                                <h4>
                                                    <a
                                                        href="{{ route('frontend.blog.details', $blog?->slug) }}">{{ $blog?->title }}</a>
                                                </h4>
                                                <p>{{ $blog?->description }}</p>
                                                <a href="{{ route('frontend.blog.details', $blog?->slug) }}"
                                                    class="link">Read More <i class="iconsax"
                                                        icon-name="arrow-right"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <div class="no-data-found">
                                        <p>{{ __('frontend::static.home_page.blog_not_found') }}</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>

                    <div class="arrow-slider-box">
                        <div class="swiper-button-prev blog-button-prev">
                            <i class="iconsax" icon-name="chevron-left"></i>
                        </div>
                        <div class="swiper-button-next blog-button-next">
                            <i class="iconsax" icon-name="chevron-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- Blog Section End -->

@if ( (isset($homePage['service_request']) && $homePage['service_request']['status']) && 
   (isset($homePage['custom_job']) && $homePage['custom_job']['status']))
<!-- Job Request Section Start -->
    <section class="job-request-section-2 section-b-space">
        <div class="container-fluid-lg">
            <div class="job-details">
                <div class="row g-xl-5 g-md-4 g-3">
                    <div class="col-lg-6">
                        <div class="position-relative">
                            <img src="{{ asset($homePage['custom_job']['image_url'] ?? 'frontend/images/job-request-img.png') }}" class="img-fluid job-image" alt="">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="job-request-content">
                            <h3>{{ $homePage['custom_job']['title'] ?? __('frontend::static.custom_job_section_title') }}</h3>
                            <p>{{ $homePage['custom_job']['description'] ?? __('frontend::static.custom_job_section_description') }}</p>
                            @auth
                                <button type="button" class="btn btn-solid" data-bs-toggle="modal" data-bs-target="#jobRequestModal">{{ __('frontend::static.account.request_new_job') }}</button>
                            @endauth
                            @guest
                                <a href="{{ url('login') }}" class="btn btn-solid w-auto">{{ $homePage['custom_job']['button_text'] ?? '+ Post New Job Request' }}</a>
                            @endguest
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!-- Job Request Section End -->
@endif

@if (isset($homePage['become_a_provider']) && $homePage['become_a_provider']['status'])
    <!-- Become a provider section start -->
    <section class="job-request-section section-bg section-b-space">
        <div class="container-fluid-lg">
            <div class="job-details"> 
                <div class="row g-sm-4 g-3">
                    <div class="col-lg-6">
                        <div class="job-request-content">
                            <h3>{{ $homePage['become_a_provider']['title'] ?? __('fronted::ststic.become_provider_section_title') }}</h3>
                            <p>{{ $homePage['become_a_provider']['description'] ?? __('fronted::ststic.become_provider_section_description') }}</p>
                            <a href="{{ route('become-provider.index') }}" class="btn btn-solid">{{ $homePage['become_a_provider']['button_text'] }}
                                <i class="iconsax" icon-name="arrow-circle-right"></i>
                            </a>
                        </div>
                    </div>

                    <div class="col-lg-6 d-lg-block d-none">
                        <div class="position-relative text-end">
                            <img src="{{ asset($homePage['become_a_provider']['image_url']) }}" class="img-fluid job-image" alt="">
                            <div class="text-start">
                                <img src="{{ asset($homePage['become_a_provider']['float_image_1_url']) }}" class="img-fluid job-image1" alt="">
                            </div>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </section>
    <!-- Become a provider section end -->
@endif

<!-- About Us Section Start -->
@if (isset($homePage['testimonial']) && $homePage['testimonial']['status'])
    <section class="about-us-section section-b-space">
        <div class="container-fluid-lg">
            <div class="title-1">
                <h6>
                    <span>{{ $homePage['testimonial']['section_label'] ?? __('frontend::static.testimonial.section_label') }}</span>
                </h6>
                <h2>{{ $homePage['testimonial']['title'] ?? __('frontend::static.testimonial.section_label') }}</h2>
                <p>{{ $homePage['testimonial']['description'] ?? __('frontend::static.testimonial.description') }}</p>
            </div>
        </div>
        <div class="about-us-content">
            <div class="swiper about-us-slider">
                <div class="swiper-wrapper">
                    @php
                        $testimonials = Helpers::getTestimonials();
                    @endphp
                    @forelse ($testimonials as $testimonial)
                        <div class="swiper-slide">
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-detail">
                                        <p>{{ $testimonial?->description }}</p>
                                    </div>
                                    <div class="card-title">
                                        <img src="{{ Helpers::isFileExistsFromURL($testimonial?->media?->first()->original_url, true) }}"
                                            alt="feature" class="img-fluid lozad">
                                        <div>
                                            <h3>{{ $testimonial?->name }}</h3>
                                            <div class="rate">
                                                <ul class="rating-list">
                                                    <li>
                                                        <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                            alt="star" class="img-fluid star">
                                                    </li>
                                                    <li>
                                                        <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                            alt="star" class="img-fluid star">
                                                    </li>
                                                    <li>
                                                        <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                            alt="star" class="img-fluid star">
                                                    </li>
                                                    <li>
                                                        <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                            alt="star" class="img-fluid star">
                                                    </li>
                                                    <li>
                                                        <img src="{{ asset('frontend/images/svg/star.svg') }}"
                                                            alt="star" class="img-fluid star">
                                                    </li>
                                                </ul>
                                                <small>(4.8)</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="no-data-found">
                            <p>{{ __('frontend::static.home_page.testimonials_not_found') }}</p>
                        </div>
                    @endforelse
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
@endif
<!-- About Us Section End -->

<!-- Newsletter Section Start -->
@if (isset($homePage['news_letter']) && $homePage['news_letter']['status'])
    <section class="newsletter-section section-b-space">
        <div class="container-fluid-lg">
            <div class="newsletter-content">
                <div class="row g-sm-4 g-3 align-items-start">
                    <div class="col-md-7">
                        <div class="newsletter-content">
                            <h2>{{ $homePage['news_letter']['title'] ?? __('frontend::static.news_latter.title') }}</h2>
                            <p>{{ $homePage['news_letter']['sub_title'] ?? __('frontend::static.news_latter.description') }}</p>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="newsletter-detail">
                            <form action="{{ route('frontend.subscribe') }}" method="POST">
                                <div class="form-group">
                                    <input class="form-control" type="email" required="" name="newsletter" placeholder="{{ __('frontend::static.home_page.enter_your_email') }}">
                                    <button type="submit" class="btn">
                                        <span class="d-sm-block d-none">{{ $homePage['news_letter']['button_text'] ?? __('frontend::static.news_latter.button_text') }}</span>
                                        <i class="iconsax d-sm-none" icon-name="mail"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif
<!-- Newsletter Section End -->
@endsection

@push('js') 
    <script>
        (function($) {
            "use strict";

            // Ensure DOM is fully loaded before executing
            $(document).ready(function() {
                // Debounce function
                const debounce = (func, delay) => {
                    let timeout;
                    return function(...args) {
                        clearTimeout(timeout);
                        timeout = setTimeout(() => func.apply(this, args), delay);
                    };
                };

                // Function to fetch services
                const fetchServices = debounce(function(query) {
                    $.get('{{ route('frontend.service.search') }}', {
                            query: query
                        },
                        function(data) {
                            const resultsContainer = $('#searchResults');
                            resultsContainer.empty(); // Clear previous results

                            if (data.length) {
                                const fragment = document.createDocumentFragment();
                                data.forEach(service => {
                                    const div = document.createElement('div');
                                    div.className = 'autocomplete-item';
                                    div.setAttribute('data-slug', service.slug);
                                    div.innerHTML =
                                        `<img src="${service.image}" alt="${service.title}" class="service-image"><h5>${service.title}</h5>`;
                                    fragment.appendChild(div);
                                });
                                resultsContainer.append(fragment).show();
                            } else {
                                resultsContainer.hide();
                            }
                        });
                }, 300);

                // Search input event listener
                $('#searchInput').on('keyup', function() {
                    const query = $(this).val();
                    if (query.length > 1) fetchServices(query); // Call debounced fetch function
                    else $('#searchResults').hide(); // Hide results if no query
                });

                // Hide search results when clicking outside the input or results container
                $(document).on('click', function(e) {
                    if (!$(e.target).closest('#searchInput, #searchResults').length) {
                        $('#searchResults').hide(); // Hide results if clicking outside
                    }
                });

                // Redirect to the service page when an autocomplete item is clicked
                $(document).on('click', '.autocomplete-item', function() {
                    window.location.href = '/service/' + $(this).data('slug');
                });

                // Handle the "Find Service" button click event
                $('#findServiceBtn').on('click', function() {
                    let searchTerm = $('#searchInput').val().trim();
                    if (searchTerm) {
                        window.location.href = '{{ route('frontend.service.index') }}?search=' +
                            encodeURIComponent(searchTerm);
                    }
                });

            });

        })(jQuery);
    </script>
@endpush