@extends('front.layouts.master')

@section('content')
    <main class="main">
        @if (setting('show_slider') == 'yes')
            <div class="row">
                <div class="col-lg-12 col-md-12 col-12">
                    <!-- hero slider -->
                    <div class="hero-section first_hero">
                        <div class="hero-slider owl-carousel owl-theme" dir="ltr">
                            @foreach ($sliders as $slider)
                                <div class="hero-single"
                                    style="background: url({{ $slider->getAvatar() ? $slider->getAvatar() : 'https://images.bkamthis.com/' . $slider->image }})">
                                    <div class="container">
                                        <div class="row align-items-center">
                                            <div class="col-md-12 col-lg-7">
                                                <div class="hero-content">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                </div>
            </div>
        @endif

        {{-- <div class="container">
        <div class="landing-page-banner" style="background: #111111 url('{{asset('front/assets/img/news/banner.png')}}')">
            <h3>{{ TranslationHelper::translate('Want to know latest news', 'site') }}</h3>
            <p>{{ TranslationHelper::translate('Head to our news section and follow up latest trends', 'site') }}.</p>
            <a href="{{route('site.news')}}" class="btn theme-btn">{{ TranslationHelper::translate('News Section', 'site') }}</a>
        </div>
    </div> --}}
        <div class="d-block d-sm-none text-center">
            <a href="{{ route('site.addAd') }}" class="theme-btn" style="width: 70%">
                <span class="far fa-plus-circle"></span> {{ TranslationHelper::translate('Add Ad', 'site') }}
            </a>
        </div>


        <div class="find-car">
            <div class="container">
                <div class="find-car-form">
                    <form method="get" action="{{ route('site.query') }}" role="search" aria-label="Search form">
                        <div class="row">
                            <div class="col-lg-11">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="search_key" class="sr-only">
                                                @if (app()->getLocale() == 'en')
                                                    Search
                                                @endif
                                                @if (app()->getLocale() == 'hi')
                                                    खोज
                                                @endif
                                                @if (app()->getLocale() == 'ar')
                                                    بحث
                                                @endif
                                            </label>
                                            <input type="text" id="search_key" name="search_key"
                                                class="form-control custom_input" autocomplete="off"
                                                @if (app()->getLocale() == 'en') placeholder="Search" 
                                                   aria-label="Search" @endif
                                                @if (app()->getLocale() == 'hi') placeholder="खोज" 
                                                   aria-label="खोज" @endif
                                                @if (app()->getLocale() == 'ar') placeholder="بحث" 
                                                   aria-label="بحث" @endif>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="city" class="sr-only">
                                                @if (app()->getLocale() == 'en')
                                                    City
                                                @endif
                                                @if (app()->getLocale() == 'hi')
                                                    शहर
                                                @endif
                                                @if (app()->getLocale() == 'ar')
                                                    المدينة
                                                @endif
                                            </label>
                                            <select name="city" id="city" class="select" aria-label="Select city">
                                                @if (app()->getLocale() == 'ar')
                                                    <option value="">المدينة</option>
                                                    <option value="">جميع المدن</option>
                                                @endif
                                                @if (app()->getLocale() == 'en')
                                                    <option value="">City</option>
                                                    <option value="">All Cities</option>
                                                @endif
                                                @if (app()->getLocale() == 'hi')
                                                    <option value="">शहर</option>
                                                    <option value="">सभी शहर</option>
                                                @endif

                                                @foreach ($cities as $city)
                                                    <option value="{{ $city->id }}">{{ $city->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="category" class="sr-only">
                                                @if (app()->getLocale() == 'en')
                                                    Category
                                                @endif
                                                @if (app()->getLocale() == 'hi')
                                                    श्रेणी
                                                @endif
                                                @if (app()->getLocale() == 'ar')
                                                    الفئة
                                                @endif
                                            </label>
                                            <select name="category" id="category" class="select"
                                                aria-label="Select category">
                                                @if (app()->getLocale() == 'ar')
                                                    <option value="">الفئة</option>
                                                @endif
                                                @if (app()->getLocale() == 'en')
                                                    <option value="">Category</option>
                                                @endif
                                                @if (app()->getLocale() == 'hi')
                                                    <option value="">श्रेणी</option>
                                                @endif
                                                {{-- Add your category options here --}}
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-1 align-self-end">
                                <button class="theme-btn" type="submit"
                                    aria-label="@if (app()->getLocale() == 'en') Search @elseif(app()->getLocale() == 'hi') खोजें @elseif(app()->getLocale() == 'ar') بحث @endif">
                                    <span class="far fa-search" aria-hidden="true"></span>
                                    <span class="sr-only">
                                        @if (app()->getLocale() == 'en')
                                            Search
                                        @endif
                                        @if (app()->getLocale() == 'hi')
                                            खोजें
                                        @endif
                                        @if (app()->getLocale() == 'ar')
                                            بحث
                                        @endif
                                    </span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="car-category py-120">
            <div class="container">
                <div class="row position-relative">
                    <div class="col-lg-6 mx-auto">
                        <div class="site-heading text-center">
                            {{-- <span class="site-title-tagline"><i  class="flaticon-star"></i>{{ TranslationHelper::translate('book now', 'site') }}</span>
                        <h2 class="site-title">{{ TranslationHelper::translate('book now', 'site') }}</h2> --}}
                            <div class="heading-divider"></div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center text-center g-4">

                    <!-- Stores -->
                    <div class="col-10 col-sm-6 col-md-4 col-lg-3">
                        <a href="{{ route('site.stores') }}"
                            class="booking wow fadeInUp d-block p-4 shadow-sm rounded-4 h-100" data-wow-delay=".1s">
                            <div class="category-img mb-3">
                                <i class="fa fa-store fa-3x icon-hover"></i>
                            </div>
                            <h5 class="cat-title mb-0">{{ TranslationHelper::translate('Stores', 'site') }}</h5>
                        </a>
                    </div>

                    {{-- <!-- Flights -->
                    <div class="col-10 col-sm-6 col-md-4 col-lg-3">
                        @auth('end-user')
                        <a href="https://flights.bkamthis.com" class="booking wow fadeInUp d-block p-4 shadow-sm rounded-4 h-100" data-wow-delay=".2s">
                            <div class="category-img mb-3">
                                <i class="fa fa-plane fa-3x icon-hover"></i>
                            </div>
                            <h5 class="cat-title mb-0">{{ TranslationHelper::translate('flights', 'site') }}</h5>
                        </a>
                        @endauth
                        @guest('end-user')
                        <a href="{{ route('site.login') }}" class="booking wow fadeInUp d-block p-4 shadow-sm rounded-4 h-100" data-wow-delay=".2s">
                            <div class="category-img mb-3">
                                <i class="fa fa-plane fa-3x icon-hover"></i>
                            </div>
                            <h5 class="cat-title mb-0">{{ TranslationHelper::translate('flights', 'site') }}</h5>
                        </a>
                        @endguest
                    </div> --}}

                    <!-- Hotels -->
                    {{-- <div class="col-10 col-sm-6 col-md-4 col-lg-3">
                        @auth('end-user')
                        <a href="https://hotel.bkamthis.com" class="booking wow fadeInUp d-block p-4 shadow-sm rounded-4 h-100" data-wow-delay=".3s">
                            <div class="category-img mb-3">
                                <i class="fa fa-hotel fa-3x icon-hover"></i>
                            </div>
                            <h5 class="cat-title mb-0">{{ TranslationHelper::translate('hotels', 'site') }}</h5>
                        </a>
                        @endauth
                        @guest('end-user')
                        <a href="{{ route('site.login') }}" class="booking wow fadeInUp d-block p-4 shadow-sm rounded-4 h-100" data-wow-delay=".3s">
                            <div class="category-img mb-3">
                                <i class="fa fa-hotel fa-3x icon-hover"></i>
                            </div>
                            <h5 class="cat-title mb-0">{{ TranslationHelper::translate('hotels', 'site') }}</h5>
                        </a>
                        @endguest
                    </div> --}}


                </div>

            </div>
        </div>

        <div class="car-category bg py-120">
            <div class="container">
                <div class="row position-relative">
                    <div class="col-lg-6 mx-auto">
                        <div class="site-heading text-center">


                            <span class="site-title-tagline"><i
                                    class="flaticon-star"></i>{{ TranslationHelper::translate('All Categories', 'site') }}</span>
                            <h3 class="site-title">{{ TranslationHelper::translate('All Categories', 'site') }}</h3>

                            <div class="heading-divider"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="row cate">
                        @foreach ($mainCategories as $cat)
                            <div class="col-6 col-md-4 col-lg-3">
                                <a href="{{ route('site.ad.show', ['id' => $cat->id]) }}"
                                    class="category-item wow fadeInUp" data-wow-delay=".25s">
                                    <div class="category-img">
                                        @if ($cat->image)
                                            <img src="https://images.bkamthis.com/{{ $cat->image }}" alt="brand"
                                                width="50" height="50" loading="lazy">
                                        @endif
                                    </div>
                                    <h5 class="cat-title">{{ $cat->name }}</h5>
                                </a>
                            </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>

        {{-- <div class="container py-120">
        <div class="row position-relative">
            <div class="col-lg-6 mx-auto">
                <div class="site-heading text-center">
                    <span class="site-title-tagline"><i  class="flaticon-star"></i>{{ TranslationHelper::translate('Latest news', 'site') }}</span>
                    <a href="{{ route('site.news') }}"><h2 class="site-title">{{ TranslationHelper::translate('Latest news', 'site') }}</h2> <div class="heading-divider"></div></a>

                </div>
            </div>
        </div>
        <div class="news-slider" >
            <div class="owl-carousel news-carousel owl-theme owl-loaded"style="direction: ltr !important">
                <div class="owl-stage-outer">
                    <div class="owl-stage">
                    @foreach ($news as $newsItem)
                        <div class="owl-item">
                            <div class="news-card">
                                <div class="news-img">
                                    <a href="{{ route('site.new.show', ['id' => $newsItem->id, 'title' => str_replace(' ', '-', $newsItem->title)]) }}">
                                        <img  src="{{ $newsItem->image && $newsItem->image !== '' ? $newsItem->image : asset('end-user/bkamthis.png') }}" alt="{{ $newsItem->title }}"   loading="lazy" />
                                    </a>
                                </div>
                                <div class="news-details">
                                    @php
                                    $date = $newsItem['date'];
                                    if (is_numeric($date)) {
                                    $parsedDate = \Carbon\Carbon::createFromTimestamp($date);
                                    }else{
                                        $parsedDate = \Carbon\Carbon::parse($date);
                                    }
                                    @endphp
                                    <div class="src">
                                        <span class="time">  {{ $parsedDate->diffForHumans() }}</span>
                                    </div>

                                    <div class="data-view">
                                        <a href="{{ route('site.new.show', ['id' => $newsItem->id, 'title' => str_replace(' ', '-', $newsItem->title)]) }}">
                                            {{ $newsItem->title }}
                                        </a>
                                        <div class="magazine">
                                            <span class="icon">
                                                <i class="fa-solid fa-bolt"></i>
                                            </span>
                                            <a href="#" class="m_src">{{ $newsItem->domain }}</a>
                                            <div class="writer">{{ $newsItem->publisher ?? 'bkamthis' }}</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="news-footer">
                                    <div class="controls">
                                        <a href="#" class="add-new-to-favorites" data-new-id="{{ $newsItem->id }}">
                                        <button type="button">
                                             <i class="fa-regular fa-heart"></i>

                                            <span>
                                                {{ $newsItem->favorites->count() }}
                                            </span>
                                        </button>
                                    </a>
                                    <a href="{{ route('site.new.show', ['id' => $newsItem->id, 'title' => str_replace(' ', '-', $newsItem->title)]) }}">
                                        <i class="fa-regular fa-message"></i>
                                            <span>
                                                {{ $newsItem->comments->count() }}
                                            </span>
                                        </a>
                                        <button type="button" onclick="share_news('{{ route('site.new.show', ['id' => $newsItem->id, 'title' => str_replace(' ', '-', $newsItem->title)])  }}')">
                                            <i class="fa-solid fa-share-nodes"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    </div>
                </div>
                <button class="owl-prev slider-btn">
                    <i class="fa-solid fa-chevron-left"></i>
                </button>
                <button class="owl-next slider-btn">
                    <i class="fa-solid fa-chevron-right"></i>
                </button>
            </div>
        </div>
        <div class="col-lg-12 col-12">
            <div class="row py-4">

                <div>
                    <div class="site-title-tagline">
                        <a href="{{ route('site.news') }}" class="theme-btn">
                            @if (app()->getLocale() == 'ar') <i class="fas fa-rotate-left"></i>
                            {{TranslationHelper::translate('see_all' ,'site' )}} @endif

                            @if (app()->getLocale() == 'en' || app()->getLocale() == 'hi') <i class="fas fa-arrow-rotate-right"></i>
                            {{TranslationHelper::translate('see_all' ,'site' )}} @endif
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}

        <div class="car-area py-120">
            @if ($Featured_ads->count() > 0)
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6 mx-auto">
                            <div class="site-heading text-center">

                                <span class="site-title-tagline"> <i class="flaticon-star"></i>
                                    {{ TranslationHelper::translate('Featured Ads', 'site') }}</span>
                                <h2 class="site-title">
                                    {{ TranslationHelper::translate('Let\'s Check Featured Ads', 'site') }}</h2>

                                <div class="heading-divider">

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        @foreach ($Featured_ads as $Featured_ad)
                            <div class="col-md-6 col-lg-4 col-xl-3">

                                <div class="car-item wow fadeInUp" data-wow-delay=".25s">

                                    <div class="car-img">


                                        <span class="car-status status-2">
                                            {{ TranslationHelper::translate($Featured_ad->AdType, 'site') }}</span>

                                        <a href="{{ route('site.show_detiles_ad', ['id' => $Featured_ad->id]) }}"
                                            style="display: block">

                                            @if ($Featured_ad->images && $Featured_ad->images->first()->filename)
                                                <img src="https://images.bkamthis.com/{{ $Featured_ad->images->first()->filename }}"
                                                    alt="ads" loading="lazy">
                                            @else
                                                <img src="{{ asset('dashboard/assets/img/ads.png') }}" alt="ads"
                                                    loading="lazy">
                                            @endif

                                        </a>
                                        <div class="car-btns">
                                            <a href="#" class="add-to-favorites"
                                                data-ad-id="{{ $Featured_ad->id }}"><i class="far fa-heart"></i></a>
                                        </div>
                                    </div>
                                    <div class="car-content">
                                        <div class="car-top">

                                            <span class="car-price">{{ number_format($Featured_ad->price, 0, '.', ',') }}
                                                {{ $currency }}</span>

                                            <h4><a
                                                    href="{{ route('site.show_detiles_ad', ['id' => $Featured_ad->id]) }}">{{ $Featured_ad->title }}</a>
                                            </h4>

                                        </div>
                                        <ul class="car-list">


                                            <li> <i class="far fa-tag"> </i> {{ $Featured_ad->category->name }} </li>
                                            <li> <i class="far fa-location-dot"> </i> {{ $Featured_ad->city->name }} </li>

                                        </ul>
                                        <div class="car-footer">
                                            @guest('end-user')
                                                @if ($Featured_ad->phone)
                                                    <a href="{{ route('site.login') }}"
                                                        class="theme-btn theme-btn2 call_btn "><span
                                                            class="far fa-phone"></span>
                                                    </a>
                                                @endif

                                                @if ($Featured_ad->whatsapp)
                                                    <a href="{{ route('site.login') }}" class="theme-btn chat_btn "><span
                                                            class="fa-brands fa-whatsapp"></span>
                                                    </a>
                                                @endif
                                                @if ($Featured_ad->email)
                                                    <a href="{{ route('site.login') }}" class="theme-btn chat_btn "><span
                                                            class="fa-solid fa-envelope"></span>
                                                    </a>
                                                @endif
                                            @endguest
                                            @auth('end-user')
                                                @if ($Featured_ad->phone)
                                                    <a href="tel:{{ $Featured_ad->phone }}"
                                                        class="theme-btn theme-btn2 call_btn " target="_blank"><span
                                                            class="far fa-phone"></span>
                                                    </a>
                                                @endif

                                                @if ($Featured_ad->whatsapp)
                                                    <a href="https://wa.me/{{ $Featured_ad->whatsapp }} "
                                                        class="theme-btn chat_btn " target="_blank"><span
                                                            class="fa-brands fa-whatsapp"></span>
                                                    </a>
                                                @endif

                                                @if ($Featured_ad->email)
                                                    <a href="mailto:{{ $Featured_ad->email }}" class="theme-btn chat_btn "
                                                        target="_blank"><span class="fa-solid fa-envelope"></span>
                                                    </a>
                                                @endif
                                            @endauth


                                        </div>

                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <div class="col-lg-12 col-12">
                            <div class="row py-4">

                                <div>
                                    <div class="site-title-tagline">
                                        <a href="{{ route('site.ad.show_featured_ad') }}" class="theme-btn">
                                            @if (app()->getLocale() == 'ar')
                                                <i class="fas fa-rotate-left"></i>
                                                {{ TranslationHelper::translate('see_all', 'site') }}
                                            @endif

                                            @if (app()->getLocale() == 'en' || app()->getLocale() == 'hi')
                                                <i class="fas fa-arrow-rotate-right"></i>
                                                {{ TranslationHelper::translate('see_all', 'site') }}
                                            @endif
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            @endif
            <br>
            <!-- car area end -->



            <!-- location area -->
            {{-- <div class="location-area py-120">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6 mx-auto">
                            <div class="site-heading text-center">

                                <span
                                    class="site-title-tagline">{{ TranslationHelper::translate('Nearby Ads', 'site') }}</span>
                                <h2 class="site-title">{{ TranslationHelper::translate('Listings By Your City', 'site') }}
                                </h2>

                                <div class="heading-divider"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center">
                        @foreach ($cities as $index => $city)
                            <div class="col-md-6 col-lg-3">
                                <a href="{{ route('site.ad.showcity', $city->id) }}" class="location-item wow fadeInUp"
                                    data-wow-delay="{{ 0.25 * ($index + 1) }}s">
                                    <div class="location-img">
                                        <img src="{{ $city->image ? 'https://images.bkamthis.com/' . $city->image : asset('dashboard/assets/img/city.png') }}"
                                            alt="{{ $city->name }}" width="200" height="200" loading="lazy"
                                            style="object-fit: cover;">
                                    </div>
                                    <div class="location-info">
                                        <h4>{{ $city->name }}</h4>
                                        <div class="location-count">
                                            <span><i class="far fa-location-dot"></i> {{ $city->active_ads_count }}</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>

                    <div class="col-lg-12 col-12">
                        <div class="row py-4">

                            <div>
                                <div class="site-title-tagline">
                                    <a href="{{ route('site.Allcity') }}" class="theme-btn">
                                        @if (app()->getLocale() == 'ar')
                                            <i class="fas fa-rotate-left"></i>
                                            {{ TranslationHelper::translate('see_all', 'site') }}
                                        @endif

                                        @if (app()->getLocale() == 'en' || app()->getLocale() == 'hi')
                                            <i class="fas fa-arrow-rotate-right"></i>
                                            {{ TranslationHelper::translate('see_all', 'site') }}
                                        @endif

                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                </div>
            </div> --}}

            <!-- location area end -->

            <!-- car area -->
            <div class="car-area bg py-120">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6 mx-auto">
                            <div class="site-heading text-center mb-4">

                                <h2 class="site-title site-title_custom">
                                    {{ TranslationHelper::translate('Discover Ads By Categories', 'site') }}</h2>

                                <div class="heading-divider"></div>
                            </div>
                        </div>
                    </div>
                    @foreach ($brands as $brand)
                        @if ($brand->ads->isNotEmpty())
                            <div class="row mb-4">
                                <div class="col-lg-12">
                                    <div class="row py-4">
                                        <div class="col-md-6 text-left">
                                            <div class="site-title site-title_custom">
                                                <h2>{{ $brand->name }}</h2>
                                            </div>
                                        </div>
                                        <div class="col-md-6 text-right">
                                            <div class="see_all_div see_all_div_custom">
                                                <a href="{{ route('site.show_ad_by_category', ['id' => $brand->id, 'name' => str_replace(' ', '-', $brand->name)]) }}"
                                                    class="theme-btn">
                                                    <i
                                                        class="fas {{ app()->getLocale() == 'ar' ? 'fa-rotate-left' : 'fa-arrow-rotate-right' }}"></i>
                                                    {{ TranslationHelper::translate('see_all', 'site') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @foreach ($brand->ads->take(4) as $basicAd)
                                    @php
                                        $image = $basicAd->images->first()?->filename;
                                        $adUrl = route('site.show_detiles_ad', $basicAd->id);
                                    @endphp

                                    <div class="col-md-6 col-lg-4 col-xl-3">
                                        <div class="car-item wow fadeInUp" data-wow-delay=".25s">
                                            <div class="car-img">
                                                <span
                                                    class="car-status status-2">{{ TranslationHelper::translate($basicAd->AdType, 'site') }}</span>
                                                <a href="{{ $adUrl }}" style="display: block">
                                                    <img src="{{ $image ? 'https://images.bkamthis.com/' . $image : asset('dashboard/assets/img/ads.png') }}"
                                                        alt="ads" loading="lazy">
                                                </a>
                                                <div class="car-btns">
                                                    <a href="#" class="add-to-favorites"
                                                        data-ad-id="{{ $basicAd->id }}">
                                                        <i class="far fa-heart"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="car-content">
                                                <div class="car-top">
                                                    <span class="car-price">
                                                        {{ number_format($basicAd->price, 0, '.', ',') }}
                                                        {{ $currency }}
                                                    </span>
                                                    <h4><a href="{{ $adUrl }}">{{ $basicAd->title }}</a></h4>
                                                </div>
                                                <ul class="car-list">
                                                    <li><i class="far fa-tag"></i> {{ $basicAd->category->name }}</li>
                                                    <li><i class="far fa-location-dot"></i> {{ $basicAd->city->name }}
                                                    </li>
                                                </ul>
                                                <div class="car-footer">
                                                    @guest('end-user')
                                                        @if ($basicAd->phone)
                                                            <a href="#" class="theme-btn theme-btn2 call_btn"><span
                                                                    class="far fa-phone"></span></a>
                                                        @endif
                                                        @if ($basicAd->whatsapp)
                                                            <a href="#" class="theme-btn chat_btn"><span
                                                                    class="fa-brands fa-whatsapp"></span></a>
                                                        @endif
                                                        @if ($basicAd->email)
                                                            <a href="#" class="theme-btn chat_btn"><span
                                                                    class="fa-solid fa-envelope"></span></a>
                                                        @endif
                                                    @endguest

                                                    @auth('end-user')
                                                        @if ($basicAd->phone)
                                                            <a href="tel:{{ $basicAd->phone }}"
                                                                class="theme-btn theme-btn2 call_btn"><span
                                                                    class="far fa-phone"></span></a>
                                                        @endif
                                                        @if ($basicAd->whatsapp)
                                                            <a href="https://wa.me/{{ $basicAd->whatsapp }}"
                                                                class="theme-btn chat_btn" target="_blank"><span
                                                                    class="fa-brands fa-whatsapp"></span></a>
                                                        @endif
                                                        @if ($basicAd->email)
                                                            <a href="mailto:{{ $basicAd->email }}"
                                                                class="theme-btn chat_btn"><span
                                                                    class="fa-solid fa-envelope"></span></a>
                                                        @endif
                                                    @endauth
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    @endforeach


                    <div class="col-lg-12 col-12">
                        <div class="row py-4">

                            <div>
                                <div class="site-title-tagline">
                                    <a href="{{ route('site.categoriesPage') }}" class="theme-btn">
                                        @if (app()->getLocale() == 'ar')
                                            <i class="fas fa-rotate-left"></i>
                                            {{ TranslationHelper::translate('see_all', 'site') }}
                                        @endif

                                        @if (app()->getLocale() == 'en' || app()->getLocale() == 'hi')
                                            <i class="fas fa-arrow-rotate-right"></i>
                                            {{ TranslationHelper::translate('see_all', 'site') }}
                                        @endif
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- car area end -->


                <!-- How to use -->
                <div class="choose-area py-120">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <div class="choose-content">
                                    <div class="site-heading wow fadeInDown" data-wow-delay=".25s">
                                        <span class="site-title-tagline text-white justify-content-start">

                                            {{ TranslationHelper::translate('How to Use', 'site') }}
                                        </span>

                                        <h2 class="site-title text-white mb-10">
                                            {{ TranslationHelper::translate('Steps to Create Your First Ad', 'site') }}
                                        </h2>

                                        <p>
                                            {{ setting('show_section_how_to_use') }}
                                        </p>
                                    </div>
                                    <div class="choose-img wow fadeInUp" data-wow-delay=".25s">
                                        <img src="{{ setting('how_section_how_to_use_img') }}" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="choose-content-wrapper wow fadeInRight" data-wow-delay=".25s">
                                    <div class="row">
                                        <div class="col-md-6 col-lg-6 mt-lg-5">
                                            <div class="choose-item">
                                                <span class="choose-count">01</span>
                                                <div class="choose-item-icon">
                                                    <img src="{{ setting('how_section_how_to_use_icon1') }}"
                                                        alt="">
                                                </div>
                                                <div class="choose-item-info">

                                                    <h3>{{ TranslationHelper::translate('Step One', 'site') }}</h3>

                                                    <h6>
                                                        {{ setting('show_section_how_to_use_step1') }}
                                                    </h6>
                                                </div>
                                            </div>
                                            <div class="choose-item mb-lg-0">
                                                <span class="choose-count">02</span>
                                                <div class="choose-item-icon">
                                                    <img src="{{ setting('how_section_how_to_use_icon2') }}"
                                                        alt="">
                                                </div>
                                                <div class="choose-item-info">

                                                    <h3>{{ TranslationHelper::translate('Step Two', 'site') }}</h3>
                                                    <h6>
                                                        {{ setting('show_section_how_to_use_step2') }}
                                                    </h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-lg-6">
                                            <div class="choose-item">
                                                <span class="choose-count">03</span>
                                                <div class="choose-item-icon">
                                                    <img src="{{ setting('how_section_how_to_use_icon3') }}"
                                                        alt="">
                                                </div>
                                                <div class="choose-item-info">

                                                    <h3>{{ TranslationHelper::translate('Step Three', 'site') }}</h3>
                                                    <h6>
                                                        {{ setting('show_section_how_to_use_step3') }}
                                                    </h6>
                                                </div>
                                            </div>
                                            <div class="choose-item mb-lg-0">
                                                <span class="choose-count">04</span>
                                                <div class="choose-item-icon">
                                                    <img src="{{ setting('how_section_how_to_use_icon4') }}"
                                                        alt="">
                                                </div>
                                                <div class="choose-item-info">

                                                    <h3>{{ TranslationHelper::translate('Step Four', 'site') }}</h3>
                                                    <h6>
                                                        {{ setting('show_section_how_to_use_step4') }}
                                                    </h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- How to use end -->


                <!-- download area -->
                <div class="download-area mb-120">
                    <div class="container">
                        <div class="download-wrapper">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="download-content">
                                        <div class="site-heading mb-4">
                                            <span class=" justify-content-start" style="color: #ff631c">

                                                {{ TranslationHelper::translate('get_our_app', 'site') }}
                                            </span>
                                            <h2 class="site-title mb-10">{{ setting('show_section_title') }}</h2>
                                            <p>
                                                {{ setting('show_section_content') }}
                                            </p>
                                        </div>
                                        <div class="download-btn">
                                            <a href="{{ setting('download_playstore', 'en') }}" target="_blank">
                                                <i class="fab fa-google-play"></i>
                                                <div class="download-btn-content">
                                                    <span> {{ TranslationHelper::translate('get_it_on', 'site') }} </span>
                                                    <strong> {{ TranslationHelper::translate('google_play', 'site') }}
                                                    </strong>
                                                </div>
                                            </a>
                                            <a href="{{ setting('download_appstore', 'en') }}" target="_blank">
                                                <i class="fab fa-app-store"></i>
                                                <div class="download-btn-content">
                                                    <span>{{ TranslationHelper::translate('get_it_on', 'site') }}</span>
                                                    <strong>{{ TranslationHelper::translate('app_store', 'site') }}
                                                    </strong>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="download-img">
                                {{-- <img src="{{ setting('show_section_img') }}" alt=""> --}}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- download area end -->


    </main>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            let owl = $('.news-carousel').owlCarousel({
                margin: 25,
                rewind: true,
                responsive: {
                    0: {
                        items: 1,
                    },
                    600: {
                        items: 2,
                    },
                    1000: {
                        items: 3,
                    },
                },
            });
            $('.owl-next').click(function() {
                owl.trigger('next.owl.carousel');
            });
            $('.owl-prev').click(function() {
                owl.trigger('prev.owl.carousel');
            });
        })
    </script>
    <script>
        function share_news(route) {
            if (navigator.share) {
                navigator
                    .share({
                        title: document.title,
                        text: 'Check out this news!',
                        // TODO: Add object id here
                        url: route,
                    })
                    .then(() => {
                        console.log('Thanks for sharing!');
                    })
                    .catch(console.error);
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            $('.add-new-to-favorites').on('click', function(event) {
                event.preventDefault();

                var newId = $(this).data('new-id');
                var url = "{{ route('site.add-new-remove-favorite', ['ad' => ':newId']) }}";
                url = url.replace(':newId', newId);

                var $heartIcon = $(this).find('i');

                $.ajax({
                    url: url,
                    method: 'GET',
                    success: function(response) {
                        // Handle success
                        $heartIcon.removeClass('far').addClass('fas').css('color', 'red');
                        console.log('Added to favorites successfully');
                    },
                    error: function(xhr, status, error) {
                        // Handle errors
                        console.error('Error adding to favorites:', error);
                    }
                });
            });


        });
    </script>
@endpush