@extends('site.layouts.master')

@php
    $lastSegment = request()->segment(count(request()->segments()));
    if (request()->property_type_id) {
        if (LaravelLocalization::getCurrentLocale() == 'ar') {
            $Ttype = App\PropertyType::where('id', request()->property_type_id)->first()->label_ar;
        } else {
            $Ttype = App\PropertyType::where('id', request()->property_type_id)->first()->label;
        }
    } else {
        if (LaravelLocalization::getCurrentLocale() == 'ar') {
            $Ttype = 'عقارات';
            $Ttypea = 'وحدات';
        } else {
            $Ttype = 'Properties';
            $Ttypea = 'Units';
        }
    }

    if (request()->sub_type_id) {
        if (LaravelLocalization::getCurrentLocale() == 'ar') {
            $Tsubtype = App\SubType::where('id', request()->sub_type_id)->first()->sub_type_name_ar;
        } else {
            $Tsubtype = App\SubType::where('id', request()->sub_type_id)->first()->sub_type_name;
        }
    } else {
        LaravelLocalization::getCurrentLocale() == 'ar' ? ($Tsubtype = 'العقارات') : ($Tsubtype = 'properties');
    }

    $Tcompound = null;
    $Tlocation = null;
    $address = strip_tags(request()->address);
   if (empty($address) && $lastSegment == 'custom-search') {
    $compoundId = is_array(request()->compound) ? (request()->compound[0] ?? null) : request()->compound;
    $districtId = is_array(request()->district) ? (request()->district[0] ?? null) : request()->district;
    $cityId = is_array(request()->city) ? (request()->city[0] ?? null) : request()->city;
    $governorateId = is_array(request()->governorate) ? (request()->governorate[0] ?? null) : request()->governorate;

    if (!empty($compoundId)) {
        $Tlocation = App\Compound::find($compoundId)?->name;
    } elseif (!empty($districtId)) {
        $Tlocation = App\District::find($districtId)?->name;
    } elseif (!empty($cityId)) {
        $Tlocation = App\City::find($cityId)?->name;
    } elseif (!empty($governorateId)) {
        $Tlocation = App\Governorate::find($governorateId)?->name;
    }
}
    if (!empty($address)) {
        if (strpos($address, ',') > 0) {
            $data = explode(',', $address);
            $count = count($data);
            if ($count > 3) {
                $Tcompound = $data[0];
                $Tdistrict = $data[1];
                $Tcity = $data[2];
                $Tgovernorate = $data[3];
            } elseif ($count > 2) {
                $Tdistrict = $data[0];
                $Tcity = $data[1];
                $Tgovernorate = $data[2];
            } elseif ($count > 1) {
                $Tcity = $data[0];
                $Tgovernorate = $data[1];
            } else {
                $Tgovernorate = $data[0];
            }

            if (isset($Tdistrict)) {
                //$Tlocation = $Tdistrict;
                $Tlocation = App\District::where('district_name_en', $Tdistrict)
                    ->orWhere('district_name_ar', $Tdistrict)
                    ->first()?->name;
            } elseif (isset($Tcity)) {
                //$Tlocation = $Tcity;
                $Tlocation = App\City::where('city_name_en', $Tcity)->orWhere('city_name_ar', $Tcity)->first()?->name;
            } elseif (isset($Tgovernorate)) {
                //$Tlocation = $Tgovernorate;
                $Tlocation = App\Governorate::where('governorate_name_en', $Tgovernorate)
                    ->orWhere('governorate_name_ar', $Tgovernorate)
                    ->first()?->name;
            }
        } elseif (str_contains(url()->full(), 'district')) {
            $Tlocation = App\District::where('district_name_en', 'like', '%' . $address . '%')
                ->orWhere('district_name_ar', 'like', '%' . $address . '%')
                ->first()?->name;
        } elseif (str_contains(url()->full(), 'city')) {
            $Tlocation = App\City::where('city_name_en', 'like', '%' . $address . '%')
                ->orWhere('city_name_ar', 'like', '%' . $address . '%')
                ->first()?->name;
        } elseif (str_contains(url()->full(), 'governorate')) {
            $Tlocation = App\Governorate::where('governorate_name_en', 'like', '%' . $address . '%')
                ->orWhere('governorate_name_ar', 'like', '%' . $address . '%')
                ->first()?->name;
        } else {
            //$Tlocation = $address;
            $Tlocation = App\Compound::where('compound_name_en', 'like', '%' . $address . '%')
                ->orWhere('compound_name_ar', 'like', '%' . $address . '%')
                ->first()?->name;
        }
    }
    if (empty($Tlocation) && isset(request()->query()['location'])) {
        if (str_contains(request()->query()['location'], ',')) {
            $locArr = explode(',', request()->query()['location']);
            if ($locArr[0] == 'governorate') {
                $Tlocation = App\Governorate::find($locArr[1])?->name;
            }
            if ($locArr[0] == 'city') {
                $Tlocation = App\City::find($locArr[1])?->name;
            }
            if ($locArr[0] == 'district') {
                $Tlocation = App\District::find($locArr[1])?->name;
            }
            if ($locArr[0] == 'compound') {
                $Tlocation = App\Compound::find($locArr[1])?->name;
            }
        }
    }

    if (LaravelLocalization::getCurrentLocale() == 'ar') {
        $Tend = ", شاهد $Ttype الان";
    } else {
        $Tend = ", view $Ttype now";
    }

    if (LaravelLocalization::getCurrentLocale() == 'ar') {
        $Tmid = ", يمكنك عرض $Tsubtype و التواصل مع احد خبراء ريماكس المهاجر";
    } else {
        $Tsubtype != 'properties' ? ($newTsubtype = 'the ' . $Tsubtype) : ($newTsubtype = $Tsubtype);
        $Tmid = ", you can view $newTsubtype and contact with one of remax elmohager agents";
    }

    if (LaravelLocalization::getCurrentLocale() == 'ar') {
        $Tstart = "نقدم لك مجموعة من افضل $Tsubtype";
    } else {
        $Tsubtype != 'properties' ? ($nTsubtype = $Tsubtype . 's') : ($nTsubtype = $Tsubtype);
        $Tstart = "we present to you a collection of best $nTsubtype";
    }

    if ($Tcompound != null || $Tlocation != null) {
        $in = __('site.In');
    } else {
        $in = null;
    }

    $desArr = [$Tstart, $in, $Tcompound, $Tlocation, $Tmid, $Tend];
    $description = '';
    foreach ($desArr as $des) {
        if ($des != null) {
            if (end($desArr) == $des) {
                $description .= $des;
            } else {
                $description .= $des . ' ';
            }
        }
    }

    if (request()->property_for) {
        if (LaravelLocalization::getCurrentLocale() == 'ar') {
            if (request()->property_for == 'Sale') {
                $Tfor = 'للبيع';
            } elseif (request()->property_for == 'Rent') {
                $Tfor = 'للايجار';
            } else {
                $Tfor = 'للبيع او الايجار';
            }
        } else {
            $Tfor = 'For ' . request()->property_for;
        }
    } else {
        if (LaravelLocalization::getCurrentLocale() == 'ar') {
            if (isset($for)) {
                if ($for == 'Sale') {
                    $Tfor = 'للبيع';
                } elseif ($for == 'Rent') {
                    $Tfor = 'للايجار';
                } else {
                    $Tfor = 'للبيع او الايجار';
                }
            } else {
                $Tfor = 'للبيع';
            }
        } else {
            if (isset($for)) {
                $Tfor = 'For ' . $for;
            } else {
                $Tfor = 'For Sale';
            }
        }
    }
    if(count(request()->segments()) == 3){
        $mcom = App\Compound::where('compound_name_en', str_replace('-', ' ', request()->segments()[2]))
            ->orWhere('compound_name_ar', str_replace('-', ' ', request()->segments()[2]))
            ->first();
    }else{
        $mcom = App\Compound::where('compound_name_en', str_replace('-', ' ', request()->segments()[1]))
            ->orWhere('compound_name_ar', str_replace('-', ' ', request()->segments()[1]))
            ->first();
    }
    $seoRow = App\SeoPages::where('path', url()->current())->first();
    if ($seoRow == null) {
        $seoRow = '';
    }
    if ($lastSegment == 'custom-search') {
        $user = auth()->guard('web')->user()?->id;
    } else {
        $user = 'none';
    }
    if (!isset($landingPage)) {
        $landingPage = (object) ['slug_en' => null, 'slug_ar' => null];
    }
    if(count(request()->segments()) == 3){
        $com_name = str_replace('-', ' ', request()->segments()[2]);
    }else{
        $com_name = str_replace('-', ' ', request()->segments()[1]);
    }
    $com = App\Compound::where('compound_name_en', $com_name)->orWhere('compound_name_ar', $com_name)->first();
    if(empty($com))$dis = App\District::where('district_name_en', $com_name)->orWhere('district_name_ar', $com_name)->first();
    if(empty($dis))$cit = App\City::where('city_name_en', $com_name)->orWhere('city_name_ar', $com_name)->first();
    if(empty($cit))$gov = App\Governorate::where('governorate_name_en', $com_name)->orWhere('governorate_name_ar', $com_name)->first();
    if(empty($ty))$ty = DB::table('property_types')->where('label', $com_name)->orWhere('label_ar', $com_name)->first();
    if (!empty($com)) {
        if (request()->segments()[0] == 'ar') {
            $opposite_slug = str_replace(' ', '-', $com->city->city_name_en.'/'.$com->compound_name_en);
        }
        if (request()->segments()[0] == 'en') {
            $opposite_slug = str_replace(' ', '-', $com->city->city_name_ar.'/'.$com->compound_name_ar);
        }
    }
    if (!empty($dis)) {
        if (request()->segments()[0] == 'ar') {
            $opposite_slug = str_replace(' ', '-', $dis->city->city_name_en.'/'.$dis->district_name_en);
        }
        if (request()->segments()[0] == 'en') {
            $opposite_slug = str_replace(' ', '-', $dis->city->city_name_ar.'/'.$dis->district_name_ar);
        }
    }
    if (!empty($cit)) {
        if (request()->segments()[0] == 'ar') {
            $opposite_slug = str_replace(' ', '-', $cit->governorate->governorate_name_en.'/'.$cit->city_name_en);
        }
        if (request()->segments()[0] == 'en') {
            $opposite_slug = str_replace(' ', '-', $cit->governorate->governorate_name_ar.'/'.$cit->city_name_ar);
        }
    }
    if (!empty($gov)) {
        if (request()->segments()[0] == 'ar') {
            $opposite_slug = str_replace(' ', '-', 'govs/'.$gov->governorate_name_en);
        }
        if (request()->segments()[0] == 'en') {
            $opposite_slug = str_replace(' ', '-', 'govs/'.$gov->governorate_name_ar);
        }
    }
    if (!empty($ty)) {
        if (request()->segments()[0] == 'ar') {
            $opposite_slug = str_replace(' ', '-', $ty->label);
        }
        if (request()->segments()[0] == 'en') {
            $opposite_slug = str_replace(' ', '-', $ty->label_ar);
        }
    }
@endphp
@section('metatags')
    @if(!empty($seoRow))
        @php
            $segment = request()->segments()[2] ?? null;
            $defaultTitle = 'RE/MAX ALMOHAGER ريـ/ـماكس المهاجر';
        @endphp

        @if(!$segment || !Route::is('site.' . $segment))
            @section('seoTags')
                @seoTags()
            @endsection
        @else
            <title>{{ $seoRow->title }}</title>
            <meta name="og:title" content="{{ $seoRow->meta_title ?? $defaultTitle }}">
            <meta name="og:keywords" content="{{ $seoRow->meta_keywords }}">
            <meta name="og:description" content="{{ $seoRow->description ?? $defaultTitle }}">
        @endif
    @endif
    @if (!empty($seoRow->meta_title))
        <meta name="title" content="{{ $seoRow->meta_title }}">
    @endif
    @if (!empty($seoRow->meta_keywords))
        <meta name="keywords" content="{{ $seoRow->meta_keywords }}">
    @endif
    <meta name="description" content="{{ $seoRow->description ?? '' }}">
    @if (!isset($opposite_slug))
        <link rel="canonical" href="{{str_replace('public/', '', url()->full())}}">
        <link rel="alternate" hreflang="@if (app()->getLocale() == 'ar'){{'en'}}@else{{'ar'}}@endif"
            href="@if (app()->getLocale() == 'en' && str_contains(url()->current(), '/en/')){{str_replace('/en/', '/ar/', str_replace('public/', '', url()->full()))}}@else{{str_replace('/ar/', '/en/', str_replace('public/', '', url()->full()))}}@endif">
        <link rel="alternate"
            hreflang="@if (app()->getLocale() == 'ar'){{'ar'}}@else{{'en'}}@endif"
            href="{{str_replace('public/', '', url()->full())}}">
    @else
        <link rel="Canonical" href="{{str_replace('public/', '', url()->full())}}">
        <link rel="alternate"
            hreflang="@if (app()->getLocale() == 'ar'){{'en'}}@else{{'ar'}}@endif"
            href="@if (app()->getLocale() == 'en' && str_contains(url()->current(), '/en/')){{'https://nileestate.com/ar/'.$opposite_slug}}@else{{'https://nileestate.com/en/'.$opposite_slug}}@endif">
        <link rel="alternate"
            hreflang="@if (app()->getLocale() == 'ar'){{'ar'}}@else{{'en'}}@endif"
            href="{{str_replace('public/', '', url()->full())}}">
    @endif
    <link rel="preload" href="{{ $properties->first()?->images()->first()?->full_url }}" as="image">
@endsection
@if (empty($seoRow->title))
    @section('title')
        @if ($lastSegment == $landingPage->slug_en || $lastSegment == $landingPage->slug_ar)
            @if (LaravelLocalization::getCurrentLocale() == 'ar')
                <title class="text-capitalize">{{ $landingPage->header_ar }} , @lang('site.Egypt')</title>
            @else
                <title class="text-capitalize">{{ $landingPage->header_en }} , @lang('site.Egypt')</title>
            @endif
        @elseif(!empty($mcom))
            <title class="text-capitalize">
                {{ __('site.mcom-props') . ' ' . $mcom->name }} , @lang('site.Egypt')
            </title>
        @elseif(Route::is('site.recentlyReduced'))
            <title class="text-capitalize">
                {{ __('site.Properties_reduced') }} , @lang('site.Egypt')
            </title>
        @elseif(Route::is('site.sold'))
            <title class="text-capitalize">
                {{ __('site.recent_sold') }} , @lang('site.Egypt')
            </title>
        @elseif(Route::is('site.rented'))
            <title class="text-capitalize">
                {{ __('site.recent_rented') }} , @lang('site.Egypt')
            </title>
        @elseif(isset($typeHeader))
            <title class="text-capitalize">{{ $typeHeader }} , @lang('site.Egypt')</title>
        @elseif(isset($governorateHeader))
            <title class="text-capitalize">{{ $governorateHeader }} , @lang('site.Egypt')</title>
        @elseif(isset($cityHeader))
            <title class="text-capitalize">{{ $cityHeader }} , @lang('site.Egypt')</title>
        @elseif(isset($districtHeader))
            <title class="text-capitalize">{{ $districtHeader }} , @lang('site.Egypt')</title>
        @elseif(isset($compoundHeader))
            <title class="text-capitalize">{{ $compoundHeader }} , @lang('site.Egypt')</title>
        @else
            <title class="text-capitalize">
                @if(empty($Tcompound) && empty($Tlocation))
                    {{ $Ttype . ' ' . $Tfor . ' ' . $in . ' ' . $Tcompound . $Tlocation }} , @lang('site.Egypt') {{ '|' . $properties->total() }}
                @else
                    {{ $Ttype . ' ' . $Tfor . ' ' . $in . ' ' . $Tcompound . $Tlocation . '|' . $properties->total() }}
                @endif
            </title>
        @endif
    @endsection
@endif
@section('content')
    @if (in_array(request()->for, ['Sale', 'Rent', 'swap', 'Business']))
        <div class="d-none">
            {{ Breadcrumbs::render('Properties', request()) }}
        </div>
    @elseif(Route::is('site.participation'))
        <div class="d-none">
            {{ Breadcrumbs::render('Participation') }}
        </div>
    @elseif(Route::is('site.properties.incomeProperties.index'))
        <div class="d-none">
            {{ Breadcrumbs::render('Income-Properties') }}
        </div>
    @elseif(Route::is('site.auctions.index'))
        <div class="d-none">
            {{ Breadcrumbs::render('Auctions') }}
        </div>
    @elseif(Route::is('site.exclusive'))
        <div class="d-none">
            {{ Breadcrumbs::render('Exclusive') }}
        </div>
    @elseif(Route::is('site.mortage'))
        <div class="d-none">
            {{ Breadcrumbs::render('Mortage') }}
        </div>
    @elseif(Route::is('site.foreclosure'))
        <div class="d-none">
            {{ Breadcrumbs::render('Foreclosure') }}
        </div>
    @elseif(Route::is('site.servicedApartment'))
        <div class="d-none">
            {{ Breadcrumbs::render('Serviced Apartment') }}
        </div>
    @elseif(isset($governorateHeader))
        <div class="d-none">
           @if (Breadcrumbs::exists($properties->first()->location->governorate->name))
    {{ Breadcrumbs::render($properties->first()->location->governorate->name) }}
@endif
        </div>
    @elseif(isset($cityHeader))
        <div class="d-none">
           @if (app()->getLocale() == 'ar')
    @if (Breadcrumbs::exists('مدينة-' . $properties->first()->location->city->name))
        {{ Breadcrumbs::render('مدينة-' . $properties->first()->location->city->name) }}
    @endif
@else
    @if (Breadcrumbs::exists($properties->first()->location->city->name . '-city'))
        {{ Breadcrumbs::render($properties->first()->location->city->name . '-city') }}
    @endif
@endif
        </div>
    @elseif(isset($districtHeader))
       <div class="d-none">
    @if (app()->getLocale() == 'ar')
        @if (Breadcrumbs::exists($properties->first()->location->city->name.'-مدينة-حى-'.$properties->first()->location->district->name))
            {{ Breadcrumbs::render($properties->first()->location->city->name.'-مدينة-حى-' . $properties->first()->location->district->name) }}
        @endif
    @else
        @if (Breadcrumbs::exists($properties->first()->location->city->name . '-city-'.$properties->first()->location->district->name . '-district'))
            {{ Breadcrumbs::render($properties->first()->location->city->name . '-city-'.$properties->first()->location->district->name . '-district') }}
        @endif
    @endif
</div>

    @elseif(isset($compoundHeader) && urldecode(request()->url()) != 'https://nileestate.com/ar/طريق-مصر-اسكندرية-الصحراوى/جولف-السليمانية' && urldecode(request()->url()) != 'https://nileestate.com/en/Cairo-Alexandria-Desert-Road/Golf-Solimania')
        <div class="d-none">
           @if (app()->getLocale() == 'ar')
    @if (Breadcrumbs::exists('كمبوند-' . $properties->first()?->location?->compound?->name))
        {{ Breadcrumbs::render('كمبوند-' . $properties->first()?->location?->compound?->name) }}
    @endif
@else
    @if (Breadcrumbs::exists($properties->first()?->location?->compound?->name . '-compound'))
        {{ Breadcrumbs::render($properties->first()?->location?->compound?->name . '-compound') }}
    @endif
@endif
        </div>
    @elseif(isset($typeHeader))
        <div class="d-none">
            {{ Breadcrumbs::render($properties->first()->property_type->label) }}
        </div>
    @endif
    @isset($breadcrumbSchema)
        {!! $breadcrumbSchema !!}
    @endisset
    @isset($blogPostSchema)
        {!! $blogPostSchema !!}
    @endisset
    <div class="search-area search-style customWidth px-0" id="search-area-1">
        <!-- <div id="searchIcon" style="cursor: pointer;" class="d-flex justify-content-center align-items-center"><span class="py-1 px-2 border rounded">@lang('site.Filter Results') <i class="fa-solid fa-filter"></i> <sup title="@lang('site.Click To Open Search Dialog')"><i class="fa-regular fa-circle-question"></i></sup></span></div> -->
        <div id="searchDiv" class=" container-fluid">
            <form action="{{ route('site.customSearch') }}" method="GET" class="m-0">
                <div class="row">
                    <div class="col-12 row px-0 mx-auto align-items-center">
                        <div class="col-md-2 col-12 px-1">
                         <div class="form-group my-2 position-relative">
    <select class="w-100 px-3 rounded-2 border-707070 py-2 propertyFor"
        style="
            appearance:none;
            -webkit-appearance:none;
            -moz-appearance:none;
            padding-{{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:32px;
        "
        name="property_for"
        data-url="{{ route('site.changeForm', request()->query()) }}"
        data-page="home">

        <option disabled selected value="0">{{ __('site.Property_For') }}</option>

        <option value="Sale" @if(isset($_GET['property_for']))@if($_GET['property_for'] == 'Sale') selected @endif @endif>
            {{ __('site.For_Sale') }}
        </option>

        <option value="Rent" @if(isset($_GET['property_for']))@if($_GET['property_for'] == 'Rent') selected @endif @endif>
            {{ __('site.For_Rent') }}
        </option>

        <option value="rentAndBuy" @if(isset($_GET['property_for']))@if($_GET['property_for'] == 'rentAndBuy') selected @endif @endif>
            {{ __('site.For_Rent_and_Buy') }}
        </option>

        <option value="newProject" @if(isset($_GET['property_for']))@if($_GET['property_for'] == 'newProject') selected @endif @endif>
            {{ __('site.newProject') }}
        </option>

        <option value="Business" @if(isset($_GET['property_for']))@if($_GET['property_for'] == 'Business') selected @endif @endif>
            {{ __('site.Business') }}
        </option>

    </select>

    <i class="fa-solid fa-angle-down position-absolute"
       style="
           {{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:12px;
           top:50%;
           transform:translateY(-50%);
           pointer-events:none;
       "></i>
</div>
                        </div>
                        <div class="col-md-2 col-12 px-1">
   <div class="form-group my-2 position-relative">
    <select class="w-100 px-3 rounded-2 border-707070 py-2 propertyType"
        style="
            appearance:none;
            -webkit-appearance:none;
            -moz-appearance:none;
            padding-{{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:32px;
        "
        name="property_type_id">

        <option disabled selected value="0">{{ __('site.Property_Types') }}</option>

        @foreach ($types as $type)
            <option value="{{ $type->id }}"
                @if(isset($_GET['property_type_id']))
                    @if($_GET['property_type_id'] == $type->id) selected @endif
                @endif>
                {{ $type->label }}
            </option>
        @endforeach
    </select>

    <i class="fa-solid fa-angle-down position-absolute"
       style="
           {{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:12px;
           top:50%;
           transform:translateY(-50%);
           pointer-events:none;
       "></i>
</div>
</div>
                       <div class="col-md-2 col-12 px-1">
   @php
    $selectedGovernorate = request('governorate');
@endphp

<div class="form-group my-2 position-relative">
    <select class="w-100 px-3 rounded-2 border-707070 py-2"
        style="
            appearance:none;
            -webkit-appearance:none;
            -moz-appearance:none;
            padding-{{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:32px;
        "
        name="governorate"
        autocomplete="off">

        <option value="">@lang('site.Governorate')</option>
        @foreach (App\Governorate::orderBy('governorate_name_en')->where('country_id',1)->get() as $governorate)
            <option value="{{ $governorate->id }}" {{ (string)$selectedGovernorate === (string)$governorate->id ? 'selected' : '' }}>
                {{ $governorate->name }}
            </option>
        @endforeach
    </select>

    <i class="fa-solid fa-angle-down position-absolute"
       style="
           {{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:12px;
           top:50%;
           transform:translateY(-50%);
           pointer-events:none;
       "></i>
</div>
</div>


<!-- <div class="col-lg-1 col-md-2 col-12 my-2 px-1">
    <button type="button"
            id="showmore"
            class="btn w-100 py-2 d-flex align-items-center justify-content-center"
            style="background:#f5f5f5; border:1px solid #ddd; color:#333;">

        <i class="fa-solid fa-sliders me-2"></i>
        <span>Filters</span>

    </button>
</div> -->

 <!-- <div class="row">
                            <div class="col-12" id="insertFilterForm"></div>
                        </div> -->



                        <!-- <div class="col-12 col-md-1 px-0 my-2 mx-2">
                            <div class="">
                                <label class="text-3b3b3b">
                                    <input type="checkbox" value="district" name="district_compound_check[]">
                                    @lang('site.District')
                                </label>
                            </div>
                            <div class="">
                                <label class="text-3b3b3b">
                                    <input type="checkbox" value="compound" name="district_compound_check[]">
                                    @lang('site.compound')
                                </label>
                            </div>
                        </div> -->
                        <style>
                            .select2-container--default .select2-search--inline .select2-search__field{
                                width:initial!important;
                            }
                        </style>

                       <div class="col-lg-2 col-md-6 col-6 my-2 px-1 position-relative">
    <select
        class="w-100 px-3 rounded-2 border-707070 py-2"
        style="
            appearance:none;
            -webkit-appearance:none;
            -moz-appearance:none;
            padding-{{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:32px;
        "
        id="city_select"
        name="city"
        autocomplete="off">

        <option value="">@lang('site.City')</option>
    </select>

    <i class="fa-solid fa-angle-down position-absolute"
       style="
           {{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:12px;
           top:50%;
           transform:translateY(-50%);
           pointer-events:none;
       "></i>
</div>


    </div>


<!-- <div class="col-lg-2 col-md-6 col-12 px-1 my-2">
    <select id="quick_property_for" class="form-control border-707070 py-2">
        <option value="">All</option>
        <option value="Sale">For Sale</option>
        <option value="Rent">For Rent</option>
    </select>
</div> -->

<div class="col-lg-2 col-md-6 col-6 px-1 my-2 position-relative">
    <select
        id="district_select"
        class="w-100 px-3 rounded-2 border-707070 py-2"
        style="
            appearance:none;
            -webkit-appearance:none;
            -moz-appearance:none;
            padding-{{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:32px;
        "
        name="district"
        autocomplete="off">

       <option value="" selected>
    {{ app()->getLocale() == 'ar' ? 'الكل' : 'All' }}
</option>
    </select>

    <i class="fa-solid fa-angle-down position-absolute"
       style="
           {{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:12px;
           top:50%;
           transform:translateY(-50%);
           pointer-events:none;
       "></i>
</div>

<div class="col-lg-2 col-md-6 col-6 px-1 my-2 position-relative">
    <select
        id="compound_select"
        class="w-100 px-3 rounded-2 border-707070 py-2"
        style="
            appearance:none;
            -webkit-appearance:none;
            -moz-appearance:none;
            padding-{{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:32px;
        "
        name="compound"
        autocomplete="off">

        <option value="" selected>
    {{ app()->getLocale() == 'ar' ? 'الكل' : 'All' }}
</option>
    </select>

    <i class="fa-solid fa-angle-down position-absolute"
       style="
           {{ app()->getLocale() == 'ar' ? 'left' : 'right' }}:12px;
           top:50%;
           transform:translateY(-50%);
           pointer-events:none;
       "></i>
</div>

<div class="col-lg-2 col-md-6 col-6 px-1 my-2">
    <div class="price-filter-wrap" id="priceFilterWrap">
        <button type="button"
            class="w-100 px-3 rounded-2 border-707070 py-2 bg-white d-flex justify-content-between align-items-center"
            id="priceFilterBtn"
            style="text-align:start; direction:{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }};">

            <span>Price</span>
            <i class="fa-solid fa-angle-down"></i>
        </button>

        <div class="price-dropdown" id="priceDropdown"
             style="text-align:{{ app()->getLocale() == 'ar' ? 'right' : 'left' }};">
            <div class="price-tabs">
                <button type="button" class="price-tab active">List price</button>
            </div>

            <div class="price-chart" style="direction:ltr;">
               <div class="price-bars"
     style="direction:{{ app()->getLocale() == 'ar' ? 'ltr' : 'ltr' }};
            text-align:right;">
                    <span class="bar" style="height:125px"></span>
                    <span class="bar" style="height:38px"></span>
                    <span class="bar" style="height:38px"></span>
                    <span class="bar" style="height:35px"></span>
                    <span class="bar" style="height:50px"></span>
                    <span class="bar" style="height:50px"></span>
                    <span class="bar" style="height:66px"></span>
                    <span class="bar" style="height:47px"></span>
                    <span class="bar" style="height:82px"></span>
                    <span class="bar" style="height:49px"></span>
                    <span class="bar" style="height:89px"></span>
                    <span class="bar" style="height:48px"></span>
                    <span class="bar" style="height:55px"></span>
                    <span class="bar" style="height:48px"></span>
                    <span class="bar" style="height:60px"></span>
                    <span class="bar" style="height:24px"></span>
                    <span class="bar" style="height:40px"></span>
                    <span class="bar" style="height:25px"></span>
                    <span class="bar" style="height:41px"></span>
                    <span class="bar" style="height:46px"></span>
                    <span class="bar" style="height:53px"></span>
                    <span class="bar" style="height:36px"></span>
                    <span class="bar" style="height:50px"></span>
                    <span class="bar" style="height:18px"></span>
                    <span class="bar" style="height:34px"></span>
                    <span class="bar" style="height:20px"></span>
                    <span class="bar" style="height:23px"></span>
                    <span class="bar" style="height:14px"></span>
                    <span class="bar" style="height:25px"></span>
                    <span class="bar" style="height:48px"></span>
                    <span class="bar" style="height:35px"></span>
                    <span class="bar" style="height:18px"></span>
                    <span class="bar" style="height:10px"></span>
                    <span class="bar" style="height:12px"></span>
                    <span class="bar" style="height:10px"></span>
                    <span class="bar" style="height:8px"></span>
                    <span class="bar" style="height:6px"></span>
                    <span class="bar" style="height:5px"></span>
                    <span class="bar" style="height:4px"></span>
                    <span class="bar" style="height:3px"></span>
                    <span class="bar" style="height:3px"></span>
                    <span class="bar" style="height:2px"></span>
                    <span class="bar" style="height:2px"></span>
                    <span class="bar" style="height:2px"></span>
                    <span class="bar" style="height:6px"></span>
                </div>

                <div class="range-track-wrap" style="direction:ltr;">
                    <div class="range-track"></div>
                    <div class="range-active" id="rangeActive"></div>

                    <input type="range" id="minRange" min="1000" max="50000000000" step="1000" value="1000">
                    <input type="range" id="maxRange" min="1000" max="50000000000" step="1000" value="50000000000">

                    <div class="range-label min-label" id="minLabel">50k</div>
                    <div class="range-label max-label" id="maxLabel">1,000,000,000 EGP</div>
                </div>
            </div>

            <div class="price-inputs-row"
                 style="direction:{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }};">
                <input type="text"
                    id="minInput"
                    name="price_from"
                    placeholder="Enter min"
                    value="{{ request('price_from') }}"
                    style="text-align:{{ app()->getLocale() == 'ar' ? 'right' : 'left' }};">

                <span class="dash">-</span>

                <input type="text"
                    id="maxInput"
                    name="price_to"
                    placeholder="Enter max"
                    value="{{ request('price_to') }}"
                    style="text-align:{{ app()->getLocale() == 'ar' ? 'right' : 'left' }};">
            </div>

            <div class="price-actions"
                 style="direction:{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }};">
                <button type="button" class="reset-btn" id="priceResetBtn">Reset</button>
                <button type="submit" class="done-btn">Done</button>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-2 col-md-6 col-6 px-1 my-2">
        <div class="beds-baths-wrap" id="bedsBathsWrap">
       <button type="button"
    class="w-100 px-3 rounded-2 border-707070 py-2 bg-white d-flex justify-content-between align-items-center"
    id="bedsBathsBtn">
    <span id="bedsBathsBtnText">Beds/baths</span>
    <i class="fa-solid fa-angle-down"></i>
</button>

        <div class="beds-baths-dropdown" id="bedsBathsDropdown">
            <div class="bb-section">
                <div class="bb-title-row">
                    <span class="bb-title">Beds</span>
                </div>

                <div class="bb-options" data-target="beds">
                    <button type="button" class="bb-chip active" data-value="">Any</button>
                    <button type="button" class="bb-chip" data-value="1">1</button>
                    <button type="button" class="bb-chip" data-value="2">2</button>
                    <button type="button" class="bb-chip" data-value="3">3</button>
                    <button type="button" class="bb-chip" data-value="4">4</button>
                    <button type="button" class="bb-chip" data-value="5">5+</button>
                </div>
            </div>

            <div class="bb-section">
    <div class="bb-title-row">
        <span class="bb-title">Baths</span>
    </div>

    <div class="bb-options" data-target="baths">
        <button type="button" class="bb-chip active" data-value="">Any</button>
        <button type="button" class="bb-chip" data-value="1">1</button>
        <button type="button" class="bb-chip" data-value="2">2</button>
        <button type="button" class="bb-chip" data-value="3">3</button>
        <button type="button" class="bb-chip" data-value="4">4</button>
        <button type="button" class="bb-chip" data-value="5">5+</button>
    </div>
</div>

            <div class="bb-actions">
                <button type="button" class="bb-reset" id="bedsBathsReset">Reset</button>
                <button type="button" class="bb-done" id="bedsBathsDone">Done</button>
            </div>
        </div>

        <input type="hidden" name="quick_beds" id="bedsHidden" value="{{ request('quick_beds') }}">
        <input type="hidden" name="quick_baths" id="bathsHidden" value="{{ request('quick_baths') }}">
    </div>
</div>

<div class="col-lg-1 col-md-2 col-12 my-2 px-1">
    <button type="submit" class="btn btn-primary w-100 py-2">
        @lang('site.quick_search')
    </button>
</div>
                        <div class="d-none" style="width:165px;" id="newoption2">
                            <div class="form-group buy">
                                <label class="text-3b3b3b custlabel">
                                    <input type="checkbox" name="longTerm"
                                        @if(request()->has('longTerm') && request()->longTerm == 'on') checked @endif>
                                    @lang('site.Long Term')
                                </label>
                            </div>
                            <div class="form-group buy">
                                <label class="text-3b3b3b custlabel">
                                    <input type="checkbox" name="shortTerm"
                                        @if(request()->has('shortTerm') && request()->shortTerm == 'on') checked @endif>
                                    @lang('site.Short Term')
                                </label>
                            </div>
                        </div>

                        <!-- <div class="text-center col-12 col-lg-1">
                            <button type="submit" class="search_button SF16_19BoldImportant text-uppercase">
                                @lang('site.quick_search')
                            </button>
                        </div> -->
                    </div>
                </div>
                <a class="text-3b3b3b SF16_19Regular SF18_21Regular-lg text-decoration-underline" href="{{ route('site.whereCanLive') }}">@lang('site.wherecanlive')</a>
            </form>
        </div>
    </div>
    <div class="pt-2 pb-3 bg-f9f9f9">
        @if($lastSegment != 'custom-search')
            @if((isset($typeHeader) || isset($governorateHeader) || isset($cityHeader) || isset($districtHeader) || isset($compoundHeader) || Route::is('site.recentlyReduced') || Route::is('site.sold') || Route::is('site.rented') || isset($mcom) || isset($for)) && empty($seoRow->title))
                @isset($typeHeader)
                    <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">{{ $typeHeader }} , @lang('site.Egypt')</h1>
                @elseif(isset($governorateHeader))
                    <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">{{ $governorateHeader }} , @lang('site.Egypt')</h1>
                @elseif(isset($cityHeader))
                    <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">{{ $cityHeader }} , @lang('site.Egypt')</h1>
                @elseif(isset($districtHeader))
                    <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">{{ $districtHeader }} , @lang('site.Egypt')</h1>
                @elseif(isset($compoundHeader))
                    <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">{{ $compoundHeader }} , @lang('site.Egypt')</h1>
                @elseif(Route::is('site.recentlyReduced'))
                    <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">
                        {{ __("site.Properties_reduced") }} , @lang('site.Egypt')
                    </h1>
                @elseif(Route::is('site.sold'))
                    <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">
                        {{ __("site.recent_sold") }} , @lang('site.Egypt')
                    </h1>
                @elseif(Route::is('site.rented'))
                    <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">
                        {{ __("site.recent_rented") }} , @lang('site.Egypt')
                    </h1>
                @elseif(!empty($mcom))
                    <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">
                        {{ __("site.mcom-props").' '.$mcom->name }} , @lang('site.Egypt')
                    </h1>
                @elseif(isset($for))
                    <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">
                            {{ __("site.Properties_for_$for") }} , @lang('site.Egypt')
                    </h1>
                @else
                    <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">
                        {{ __("site.Properties") }} , @lang('site.Egypt')
                    </h1>
                @endisset
            @elseif(!empty($seoRow))
                <h1 class="text-center SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-1 text-capitalize mt-4">
                    {{$seoRow->title}} @if(!str_contains($seoRow->title,'Egypt') && !str_contains($seoRow->title,'مصر')) , @lang('site.Egypt') @endif
                </h1>
            @endif
        @endif
        <div class="customWidth">
            @if(!empty($titleIntro))
                <div class="my-4 text-3b3b3b col-12 col-lg-9 mx-0" style="text-align: justify;"><span style="text-align: justify;">{{ $titleIntro }}</span></div>
            @endif
            @if (!empty($seoRow))
                @php
                    if (LaravelLocalization::getCurrentLocale() == 'ar') {
                        $content = $seoRow->content_top_ar;
                    } else {
                        $content = $seoRow->content_top;
                    }
                @endphp
                @if (!empty($content) && strip_tags(htmlspecialchars_decode($content)) != '.')
                    <div class="d-block d-lg-flex justify-content-around">
                        <div class="py-4 @if(empty($nearCompounds)) mx-auto @endif">
                            <div id="seeDIV2" class="my-3 py-4 changeLink text-justify font_regular">
                                {!! $content !!}
                            </div>
                            {{-- <div class="text-center my-4">
                                <a href="" id="see"><small>{{__('site.see_more')}}</small></a>
                            </div> --}}
                        </div>
                        @if(!empty($nearCompounds))
                        <div class="py-4 col-12 col-lg-3">
                            <div class="card shadow-box my-3 px-2 py-3 changeLink mx-3 text-justify font_regular">
                                <p class="SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-3">
                                    @lang('site.most_important_compounds_in_the_area')
                                </p>
                                <div>
                                    <ul class="ulStyleControl" style="list-style: disc">
                                        @foreach ($nearCompounds ?? [] as $compound)
                                            <li>
                                                <div class="pb-1">
                                                    <a class="SFBold14_16 text-9b9b9b text-decoration-none"
                                                        href="{{ route('site.'.str_replace(' ','-',$compound->name)) }}">{{ $compound->name }}</a>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                @endif
            @endif
            @if (str_contains(url()->current(), '/Business'))
                <div class="d-flex justify-content-around col-lg-6 mx-auto py-3">
                    <a href="{{ route('buy_business') }}" target="_blank"
                        class="businessBut btn bg-blue text-white SF20_24Bold-Important">@lang('site.buy_a_business') <i class="mx-3">
                            @if (app()->getLocale() == 'ar')
                                &#x2196;
                            @else
                                &#x2197;
                            @endif
                        </i></a>
                    <a href="{{ route('sell_business') }}" target="_blank"
                        class="businessBut btn bg-blue text-white SF20_24Bold-Important">@lang('site.sell_a_business') <i class="mx-3">
                            @if (app()->getLocale() == 'ar')
                                &#x2196;
                            @else
                                &#x2197;
                            @endif
                        </i></a>
                </div>
            @endif
            <div>
                <div class="d-flex flex-wrap justify-content-between align-items-center text-end mt-2 mb-3 mx-0">
                    <div class="d-flex flex-wrap justify-content-between align-items-center col-12 col-lg-9">
                        <div class="d-flex flex-wrap justify-content-between align-items-center col-12 col-lg-4">
                            <div class="d-flex justify-content-between align-items-center">
                                <p class="SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue mb-1 col-lg-3 @if(app()->getLocale() == 'ar') ms-3 @else me-3 @endif">
                                    @lang('site.Results')
                                </p>
                                <p class="footer_contact m-0 mx-3 text-dark col-7 @if ($lastSegment == 'custom-search') col-lg-5 @endif">{{ $properties->total() }} @lang('site.properties')</p>
                                @if ($lastSegment == 'custom-search')
                                    <div class="mx-0 mx-lg-3 mt-3 mt-lg-0 col-4 col-lg-5">
                                        <a id="savesearchbutton" href="#"
                                            class="btn bg-transparent py-2 px-2 border border-1 time_text text-3b3b3b text-decoration-underline"
                                            title="@lang('site.Save_Search')" data-bs-toggle="modal" data-bs-target="#exampleModal2" style="font-size:14px !important;">
                                            <p class="mb-1">@lang('site.Save_Search')</p>
                                        </a>

                                        <!-- Modal -->
                                        <div class="modal fade my-4 py-4" id="exampleModal2" tabindex="-1" role="dialog"
                                            aria-labelledby="exampleModalLabel2" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <p class="fw-bold modal-title mx-auto" id="exampleModalLabel">@lang('site.Save_Search')
                                                        </p>
                                                        <button type="button" class="close ml-1" data-bs-dismiss="modal"
                                                            aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    @if (session()->get('message'))
                                                        <div class="alert alert-success">
                                                            {{ session()->get('message') }}
                                                        </div>
                                                    @endif
                                                    @if (session()->get('message1'))
                                                        <div class="alert alert-danger">
                                                            {{ session()->get('message1') }}
                                                        </div>
                                                    @endif
                                                    <form action="{{ route('site.saveSearch') }}" class="text-center"
                                                        method="POST">
                                                        @csrf
                                                        <input type="hidden" id="gtokenSearch" name="gToken">
                                                        <input type="hidden" name="searchUrl" value="{{ url()->full() }}">
                                                        <p>@lang('site.searchsavequote')</p>
                                                        <input class="my-2 col-11 mx-auto form-control"
                                                            placeholder="@lang('site.givenametoyoursearch')" type="text" name="name"
                                                            value="{{ old('name') }}">
                                                        <p>@lang('site.notificationevery')</p>
                                                        <div class="mx-3 d-inline-block">
                                                            <input id="never" class="showRadio" type="radio"
                                                                value="never" name="frequency">
                                                            <label for="never">
                                                                @lang('site.never')
                                                            </label>
                                                        </div>
                                                        <div class="mx-3 d-inline-block">
                                                            <input id="daily" class="showRadio" type="radio"
                                                                value="daily" name="frequency">
                                                            <label for="daily">
                                                                @lang('site.daily')
                                                            </label>
                                                        </div>
                                                        <div class="mx-3 d-inline-block">
                                                            <input id="weekly" class="showRadio" type="radio"
                                                                value="weekly" name="frequency">
                                                            <label for="weekly">
                                                                @lang('site.weekly')
                                                            </label>
                                                        </div>
                                                        @foreach ($errors->search->all() as $error)
                                                            <p class="text-danger">{{ $error }}</p>
                                                        @endforeach
                                                        <div class="modal-footer">
                                                            <a onclick="Captcha('gtokenSearch')" class="bg-danger btn btn-danger" href="#"
                                                                style="font-size: 14px;">@lang('site.Save_Search')</a>
                                                            <button hidden type="submit"
                                                                id="doSubmitWithCaptchagtokenSearch"></button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="col-3">
                            </div>
                        </div>
                        <div class="col-5 col-lg-2 mt-3 mt-lg-0 text-start text-lg-end">
                            <select class="px-1 py-2 rounded time_text text-3b3b3b border-d1d1d1" style="font-size:14px !important;" id="sort-select"
                                name="location">
                                <option value="" selected disabled>@lang('site.sort_by')</option>
                                <option class="price"
                                    {{ request('sort_by') == 'price' && request('sort') == 'asc' ? 'selected' : '' }}
                                    value="asc">
                                    {{ __('site.Price Low to High') }}</option>
                                <option class="price"
                                    {{ request('sort_by') == 'price' && request('sort') == 'desc' ? 'selected' : '' }}
                                    value="desc">
                                    {{ __('site.Price High to Low') }}</option>
                                <option class="date"
                                    {{ request('sort_by') == 'date' && request('sort') == 'asc' ? 'selected' : '' }}
                                    value="asc">
                                    {{ __('site.Date Old to New') }}</option>
                                <option class="date"
                                    {{ request('sort_by') == 'date' && request('sort') == 'desc' ? 'selected' : '' }}
                                    value="desc">
                                    {{ __('site.Date New to Old') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="text-start d-none d-lg-block col-12 col-lg-3">
                        @if ($lastSegment != $landingPage->slug_en && $lastSegment != $landingPage->slug_ar)
                            <p class="SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue mt-1 mb-2 col-4 px-lg-3 w-100">
                                @lang('site.Hot Spots')
                            </p>
                        @endif
                    </div>
                </div>
                <div class="d-lg-flex justify-content-lg-between">
                    <div class="col-12 px-0 col-lg-9">

                       @forelse ($properties as $property)
    @php
        $Tfor == 'FOR RENT' || $Tfor == 'للايجار'
            ? ($price = $property->options->per_month)
            : ($price = $property->options->sale_price);
        $Tfor == 'FOR RENT' || $Tfor == 'للايجار'
            ? ($currency = $property->options->rent_currency)
            : ($currency = $property->options->sale_currency);
        $mon = '';
        if ($Tfor == 'FOR RENT') {
            $mon = '/month';
        }
        if ($Tfor == 'للايجار') {
            $mon = '/شهر';
        }
        if ($property->property_for == 'Rent') {
            $property_for = 'Rent';
        } else {
            $property_for = 'Sale';
        }
    @endphp
    @if($property->site_status == 1)
<div>
    @include('site.template.property-index-horizontal', [
        'property' => $property,
        'agent' => $property->request_owner?->agent,
        'loop' => $loop
    ])
</div>
@endif

@empty
<div style="text-align:center; padding:40px;">
    <div style="font-weight:bold; margin-top:20px; font-size:18px; color:#333;">
        No Result Found
    </div>
</div>
@endforelse
                        <div id="post-data"></div>
                        @if($properties->total() > 6)
                        <div class="text-center">
                            <a href="#" id="load_more"
                                class="btn button_see_more_transparent border px-5 py-3">@lang('site.Load More Properties') <i
                                    class="mx-3">
                                    @if (app()->getLocale() == 'ar')
                                        &#x2196;
                                    @else
                                        &#x2197;
                                    @endif
                                </i></a>
                        </div>
                        @endif
                        @if(!empty($similar_properties))
                            <p class="SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue mt-5 mb-4">@lang('site.Related_Properties')</p>
                            @foreach ($similar_properties ?? [] as $similar_property)
                                @php
                                    $Tfor == 'FOR RENT' || $Tfor == 'للايجار'
                                        ? ($price = $similar_property->options->per_month)
                                        : ($price = $similar_property->options->sale_price);
                                    $Tfor == 'FOR RENT' || $Tfor == 'للايجار'
                                        ? ($currency = $similar_property->options->rent_currency)
                                        : ($currency = $similar_property->options->sale_currency);
                                    $mon = '';
                                    if ($Tfor == 'FOR RENT') {
                                        $mon = '/month';
                                    }
                                    if ($Tfor == 'للايجار') {
                                        $mon = '/شهر';
                                    }
                                    if ($property->property_for == 'Rent') {
                                        $property_for = 'Rent';
                                    } else {
                                        $property_for = 'Sale';
                                    }
                                @endphp
                                <div>
                                    @include('site.template.property-index-horizontal', [
                                        'property' => $similar_property,
                                        'agent' => $similar_property->request_owner->agent,
                                        'loop' => $loop
                                    ])
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class="d-none d-lg-block col-lg-3 px-lg-3">
                        @if(!empty($properties->first()->compound->project) && Route::is('site.'.str_replace(' ','-',$properties->first()->compound->name)))
                            @php
                                $project = $properties->first()->compound->project;
                                $developer = App\Developer::find($properties->first()->compound->developer_id);
                            @endphp
                            <div class="shadow-sm p-3 rounded-3 bg-white my-3">
                                <div class="d-flex justify-content-around align-items-center">
                                    @if($developer)
                                    <div class="d-flex align-items-center">
                                        <a href="{{ route('developers.show', $developer->slug) }}" class="text-decoration-none">
                                            <div class="py-2">
                                                <img loading="lazy" width="100" height="100" class="rounded-circle border objectFit" src="{{ $developer->logo?->full_url }}" alt="developer_logo" title="developer_logo">
                                            </div>
                                        </a>
                                    </div>
                                    @endif
                                    <p class="time_text SF22_26Regular-lg text-3b3b3b mx-3 mb-0">{{ $project->compound->name }} @lang('site.In') {{ $project->compound->city->name }} @lang('site.By') {{ $project->compound->developer?->name }}</p>
                                </div>
                                <div>
                                    <p class="home_property_title SF18_21Bold-lg m-0 mb-1">@lang('site.Starting Price')</p>
                                    <p class="SF16_19Bold SF18_21Bold-lg m-0 mb-1 text-red"><span class="price-commas">{{ $project->starting_price_primery }}</span> @lang('site.EGP')</p>
                                    <p class="SF16_19Bold SF18_21Bold-lg m-0 mb-1 text-9b9b9b">@lang('site.Down Payment'):</p>
                                    <p class="SF16_19Bold SF18_21Bold-lg m-0 mb-1 text-707070"><span class="price-commas">{{ $project->down_payment ?? '1' }}</span> @lang('site.EGP')</p>
                                    <p class="home_property_title SF18_21Bold-lg m-0 text-red mb-1">@lang('site.Contact_Us')</p>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        @if ($project->agent->profile->phone != null)
                                            <a rel="nofollow" href="#"
                                                class="reveal_number showNumberCustom col-3 text-decoration-none SFBold11_13 py-2 px-1">
                                                <i class="fa-solid fa-phone-volume"></i>
                                                <span class="d-none d-xxl-inline-block"> @lang('site.Call')</span>
                                                <input class="url" type="hidden" value="{{ route('site.addclick') }}"
                                                    hidden>
                                                <input class="type" type="hidden" value="property" hidden>
                                                <input class="pr_id" type="hidden" value="{{ $project->id }}" hidden>
                                                <input class="phone_clicks" type="hidden" value="{{ $_SERVER['REMOTE_ADDR'] }}"
                                                    hidden>
                                            </a>
                                            <a rel="nofollow"
                                                class="reveal_number-phone showNumberCustom2 col-3 text-decoration-none SFBold11_13 py-2 px-1"
                                                href="tel:{{ $project->agent->profile->phone }}">
                                                <i class="fa-solid fa-phone-volume"></i> {{ $project->agent->profile->phone }}
                                            </a>
                                            <a rel="nofollow" target="_blank" onclick="callTrackingApi({{ $property->id }})"
                                                class="whatsApp-Icon col-3 text-decoration-none SFBold11_13 py-2 px-1"
                                                href="https://api.whatsapp.com/send?phone=+2{{ $project->agent->profile->phone }}&text=@lang('site.Hello'), %0A @lang('site.wouldLike') %0A {{ $project->compound->name }} @lang('site.compound') %0A @lang('site.Link:') {{ url()->current() }} %0A @lang('site.anyChange')">
                                                <i class="fa-brands fa-whatsapp" style="font-size: 14px"></i> <span class="d-none d-xxl-inline-block"> @lang('site.WhatsAppMe')</span>
                                            </a>
                                            <a rel="nofollow" class="emailIcon col-4 text-decoration-none SFBold11_13 py-2 px-1 bg-dark"
                                                href="mailto:{{ $project->agent->email }}">
                                                <i class="fa-regular fa-envelope" style="font-size: 14px"></i> <span class="d-none d-xxl-inline-block"> @lang('site.Email')</span>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if ($lastSegment != $landingPage->slug_en && $lastSegment != $landingPage->slug_ar)
                            <div class="mb-3">
                                @if (count(App\HotspotArea::getAll()))
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-12 px-0">
                                                <div id="hotspot_carousel">
                                                    @foreach (App\HotspotArea::getAll() as $hotspot)
                                                        @php
                                                            $hotspot->name_en = str_replace(
                                                                ' ',
                                                                '-',
                                                                $hotspot->name_en,
                                                            );
                                                        @endphp
                                                        <a class="hotspot__item"
                                                            href="@if(!str_contains($hotspot->link,'Nile')) {{ $hotspot->link }} @else @if (app()->getLocale() == 'ar') {{ route('site.arabic-' . $hotspot->name_en) }} @else {{ route('site.' . $hotspot->name_en) }} @endif @endif"
                                                            rel="noopener noreferrer">
                                                            <div class="hotspot_img__container changeWH rounded">
                                                                <img loading="lazy"
                                                                    src="{{ $hotspot->image?->full_url ?? '' }}"
                                                                    alt="{{ $hotspot->image->alt ?? 'image' }}" title="{{ $hotspot->image->alt ?? 'image' }}">
                                                                <div class="hotspot__title">
                                                                    {{ str_replace('-', ' ', $hotspot->name) }}
                                                                </div>
                                                            </div>
                                                        </a>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endif
                        @if(!empty($searches))
                            <div class="d-none d-lg-block card shadow-box my-3 px-2 py-3" style="background-color: #f4f5f6;">
                                <p class="SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-3">
                                    @lang('site.Popular Searches')
                                </p>
                                <div class="">
                                    <ul class="ulStyleControl" style="list-style: disc">
                                        @foreach ($searches ?? [] as $search)
                                            @if(Route::has('site.'.str_replace(' ','-',$search->search_content)))
                                            <li>
                                                <div class="pb-1">
                                                    <a class="SFBold14_16 text-decoration-none" style="color:#888;"
                                                        href="{{ route('site.'.str_replace(' ','-',$search->search_content)) }}">{{ $search->search_content }}</a>
                                                </div>
                                            </li>
                                            @endif
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="d-block d-lg-none">
                @if(!empty($properties->first()->compound->project) && Route::is('site.'.str_replace(' ','-',$properties->first()->compound->name)))
                    @php
                        $project = $properties->first()->compound->project;
                        $developer = App\Developer::find($properties->first()->compound->developer_id);
                    @endphp
                    <div class="shadow-sm p-3 rounded-3 bg-white my-3">
                        <div class="d-flex justify-content-around align-items-center">
                            @if($developer)
                            <div class="d-flex align-items-center">
                                <a href="{{ route('developers.show', $developer->slug) }}" class="text-decoration-none">
                                    <div class="py-2">
                                        <img loading="lazy" width="100" height="100" class="rounded-circle border objectFit" src="{{ $developer->logo?->full_url }}" alt="developer_logo" title="developer_logo">
                                    </div>
                                </a>
                            </div>
                            @endif
                            <p class="time_text SF22_26Regular-lg text-3b3b3b mx-3 mb-0">{{ $project->compound->name }} @lang('site.In') {{ $project->compound->city->name }} @lang('site.By') {{ $project->compound->developer?->name }}</p>
                        </div>
                        <div>
                            <p class="home_property_title SF18_21Bold-lg m-0 mb-1">@lang('site.Starting Price')</p>
                            <p class="SF16_19Bold SF18_21Bold-lg m-0 mb-1 text-red"><span class="price-commas">{{ $project->starting_price_primery }}</span> @lang('site.EGP')</p>
                            <p class="SF16_19Bold SF18_21Bold-lg m-0 mb-1 text-9b9b9b">@lang('site.Down Payment'):</p>
                            <p class="SF16_19Bold SF18_21Bold-lg m-0 mb-1 text-707070"><span class="price-commas">{{ $project->down_payment ?? '1' }}</span> @lang('site.EGP')</p>
                            <p class="home_property_title SF18_21Bold-lg m-0 text-red mb-1">@lang('site.Contact_Us')</p>
                            <div class="d-flex justify-content-between align-items-center mt-2">
                                @if ($project->agent->profile->phone != null)
                                    <a rel="nofollow" href="#"
                                        class="reveal_number showNumberCustom col-3 text-decoration-none SFBold11_13 py-2 px-1">
                                        <i class="fa-solid fa-phone-volume"></i>
                                        @lang('site.Call')
                                        <input class="url" type="hidden" value="{{ route('site.addclick') }}"
                                            hidden>
                                        <input class="type" type="hidden" value="property" hidden>
                                        <input class="pr_id" type="hidden" value="{{ $project->id }}" hidden>
                                        <input class="phone_clicks" type="hidden" value="{{ $_SERVER['REMOTE_ADDR'] }}"
                                            hidden>
                                    </a>
                                    <a rel="nofollow"
                                        class="reveal_number-phone showNumberCustom2 col-3 text-decoration-none SFBold11_13 py-2 px-1"
                                        href="tel:{{ $project->agent->profile->phone }}">
                                        <i class="fa-solid fa-phone-volume"></i> {{ $project->agent->profile->phone }}
                                    </a>
                                    <a rel="nofollow" target="_blank" onclick="callTrackingApi({{ $property->id }})"
                                        class="whatsApp-Icon col-3 text-decoration-none SFBold11_13 py-2 px-1"
                                        href="https://api.whatsapp.com/send?phone=+2{{ $project->agent->profile->phone }}&text=@lang('site.Hello'), %0A @lang('site.wouldLike') %0A {{ $project->compound->name }} @lang('site.compound') %0A @lang('site.Link:') {{ url()->current() }} %0A @lang('site.anyChange')">
                                        <i class="fa-brands fa-whatsapp" style="font-size: 14px"></i> @lang('site.WhatsAppMe')
                                    </a>
                                    <a rel="nofollow" class="emailIcon col-4 text-decoration-none SFBold11_13 py-2 px-1 bg-dark"
                                        href="mailto:{{ $project->agent->email }}">
                                        <i class="fa-regular fa-envelope" style="font-size: 14px"></i> @lang('site.Email')
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
                @if ($lastSegment != 'custom-search' && $lastSegment != $landingPage->slug_en && $lastSegment != $landingPage->slug_ar)
                    <div class="my-3">
                        <p class="SF20_24Bold-Important fw-bold text-blue my-3">
                            @lang('site.Hot Spots')
                        </p>
                        @if (count(App\HotspotArea::getAll()))
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-12 px-0">
                                        <div id="hotspot_carousel" class="owl-carousel owl-theme">
                                            @foreach (App\HotspotArea::getAll() as $hotspot)
                                                @php
                                                    $hotspot->name_en = str_replace(' ', '-', $hotspot->name_en);
                                                @endphp
                                                <a class="hotspot__item"
                                                    href="@if (app()->getLocale('ar')) {{ route('site.arabic-' . $hotspot->name_en) }} @else {{ route('site.' . $hotspot->name_en) }} @endif"
                                                    rel="noopener noreferrer">
                                                  <div class="hotspot_img__container rounded">
    <img loading="lazy"
         src="{{ $hotspot->image?->full_url ?? '' }}"
         alt="{{ $hotspot->image->alt ?? 'image' }}"
         title="{{ $hotspot->image->alt ?? 'image' }}">

    <div class="hotspot__title">
        {{ str_replace('-', ' ', $hotspot->name) }}
    </div>
</div>
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                @endif
            </div>
            <div class="d-block d-lg-none card shadow-box my-3 px-2 py-3">
                <p class="SF20_24Bold-Important fw-bold text-blue my-3">
                    @lang('site.Popular Searches')
                </p>
                <div class="">
                    <ul class="ulStyleControl d-flex flex-wrap" style="list-style: disc">
                        @foreach ($searches ?? [] as $search)
                            <li class="col-6">
                                <div class="pb-1">
                                    <a class="SFBold14_16 text-9b9b9b text-decoration-none"
                                        href="{{ route('site.secondarySearch', ['search_kind2' => 'property','search_kind' => 'keyword&id', 'keyword' => $search->search_content]) }}">{{ $search->search_content }}</a>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="d-flex justify-content-center">
                <div class="d-none compareBar compareBar2 mx-auto justify-content-around align-items-center" id="compareBar">
                    <div class="text-center">
                        <div class="d-flex align-items-center">
                            <i class="fa fa-2x fa-times-circle text-secondary" role="button" id="barCancel" aria-hidden="true"></i>
                            <button id="compareBut" class="btn btn-outline-danger mx-3 SF14_16Regular" data-bs-toggle="modal" data-bs-target="#compareModal">@lang('site.Compare')</button>
                        </div>
                        <div class="modal fade" id="compareModal" tabindex="-1" role="dialog"  data-backdrop="static" data-keyboard="false" aria-labelledby="compareModal" aria-hidden="true">
                            <div class="modal-dialog" style="max-width:1200px !important;" role="document">
                              <div class="modal-content">
                                <div class="modal-header align-items-center">
                                  <h5 class="modal-title SF16_19Bold">@lang('site.units_compare')</h5>
                                  <a type="button" class="close mx-0 text-decoration-none text-3b3b3b" data-bs-dismiss="modal"
                                    aria-label="Close" id="closeModal">
                                    <span aria-hidden="true" class="SF16_19Bold">&times;</span>
                                  </a>
                                </div>
                                <div id="compareBody" class="modal-body">
                                    <div class="d-flex" id="compareData">

                                    </div>
                                </div>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="line my-5"></div>
            @if ($seoRow != null)
                @php
                    if (LaravelLocalization::getCurrentLocale() == 'ar') {
                        $title = $seoRow->title_ar;
                        $content = $seoRow->content_ar;
                    } else {
                        $title = $seoRow->title;
                        $content = $seoRow->content;
                    }
                @endphp
                @if (!empty($content))
                    <div class="d-block d-lg-flex jusitfy-content-around">
                        <div class="py-4 col-12 col-lg-9 @if(app()->getLocale() == 'ar') ms-auto @else me-auto @endif">
                            <div id="seeDIV" class="card shadow-box my-3 p-4 changeLink text-justify font_regular">
                                <p class="h3 fw-bold">{{$title}}</p>
                                {!! $content !!}
                            </div>
                            {{-- <div class="text-center my-4">
                                <a href="" id="see"><small>{{__('site.see_more')}}</small></a>
                            </div> --}}
                        </div>
                        @if(!empty($nearCompounds))
                        <div class="py-4 col-12 col-lg-3">
                            <div class="card shadow-box my-3 px-2 py-3 changeLink mx-3 text-justify font_regular">
                                <p class="SF20_24Bold-Important fw-bold SFBlack26_31-lg text-blue my-3">
                                    @lang('site.most_important_compounds_in_the_area')
                                </p>
                                <div>
                                    <ul class="ulStyleControl" style="list-style: disc">
                                        @foreach ($nearCompounds ?? [] as $compound)
                                            <li>
                                                <div class="pb-1">
                                                    <a class="SFBold14_16 text-9b9b9b text-decoration-none"
                                                        href="{{ route('site.'.str_replace(' ','-',$compound->name)) }}">{{ $compound->name }}</a>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                @endif
            @endif
        @if(str_contains(url()->current(),'custom-search') || str_contains(url()->current(),'reduced') || str_contains(url()->current(),'sold') || str_contains(url()->current(),'rent'))
        <div class="d-none col-11 mx-auto my-2 d-md-flex flex-wrap justify-content-start">
            @if(!empty($gov_IDS[0]))
            <div class="col-3">
                <div id="seeDIV22" class="px-1 seemore2">
                    <p class="text-blue fw-bold my-0">@lang('site.Property') @if(Lang::has('site.For_'.$for)) @lang('site.For_'. $for) @else @lang('site.'.$for) @endif @lang('site.By Governorates')</p>
                    @foreach ($gov_IDS as $link)
                        <div class="">
                            @if(!empty($link->governorate->name))
                            <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?governorate='.$link->governorate_id.'&property_for='.$for }}@if(str_contains(url()->current(),'reduced')){{ '&price_reduced=on' }} @elseif(str_contains(url()->current(),'sold') || str_contains(url()->current(),'rent')) {{ '&includeunderofferandsold=on' }} @endif">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->governorate->name }}</a>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
            @if(!empty($city_IDS[0]))
            <div class="col-3">
                <div id="seeDIV3" class="px-1 seemore2">
                    <p class="text-blue fw-bold my-0">@lang('site.Property') @if(Lang::has('site.For_'.$for)) @lang('site.For_'. $for) @else @lang('site.'.$for) @endif @lang('site.By Cities')</p>
                    @foreach ($city_IDS as $link)
                        <div class="">
                            @if(!empty($link->city->name))
                            <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?city='.$link->city_id.'&property_for='.$for }}@if(str_contains(url()->current(),'reduced')){{ '&price_reduced=on' }} @elseif(str_contains(url()->current(),'sold') || str_contains(url()->current(),'rent')) {{ '&includeunderofferandsold=on' }} @endif">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->city->name }}</a>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
            @if(!empty($district_IDS[0]))
            <div class="col-3">
                <div id="seeDIV4" class="px-1 seemore2">
                    <p class="text-blue fw-bold my-0">@lang('site.Property') @if(Lang::has('site.For_'.$for)) @lang('site.For_'. $for) @else @lang('site.'.$for) @endif @lang('site.By Districts')</p>
                    @foreach ($district_IDS as $link)
                        <div class="">
                            @if(!empty($link->district->name))
                            <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?district='.$link->district_id.'&property_for='.$for }}@if(str_contains(url()->current(),'reduced')){{ '&price_reduced=on' }} @elseif(str_contains(url()->current(),'sold') || str_contains(url()->current(),'rent')) {{ '&includeunderofferandsold=on' }} @endif">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->district->name }}</a>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
            @if(!empty($compound_IDS[0]))
            <div class="col-3">
                <div id="seeDIV5" class="px-1 seemore2">
                    <p class="text-blue fw-bold my-0">@lang('site.Property') @if(Lang::has('site.For_'.$for)) @lang('site.For_'. $for) @else @lang('site.'.$for) @endif @lang('site.By Compounds')</p>
                    @foreach ($compound_IDS as $link)
                        <div class="">
                            @if(!empty($link->compound->name))
                            <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?compound='.$link->compound_id.'&property_for='.$for }}@if(str_contains(url()->current(),'reduced')){{ '&price_reduced=on' }} @elseif(str_contains(url()->current(),'sold') || str_contains(url()->current(),'rent')) {{ '&includeunderofferandsold=on' }} @endif">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->compound->name }}</a>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    @else
        <div class="d-none col-11 mx-auto my-2 d-md-flex flex-wrap justify-content-start">
            @if(!empty($gov_IDS[0]))
            <div class="col-3">
                <div id="seeDIV22" class="px-1 seemore2">
                    <p class="text-blue fw-bold my-0">@lang('site.Property') @if(Lang::has('site.For_'.$for)) @lang('site.For_'. $for) @else @lang('site.'.$for) @endif @lang('site.By Governorates')</p>
                    @foreach ($gov_IDS as $link)
                        @if(!empty($link->governorate->name))
                        <div class="">
                            @if($for == 'Rent')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?governorate='.$link->governorate_id.'&property_for=Rent' }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->governorate->name }}</a>
                            @elseif($for == 'Business')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?governorate='.$link->governorate_id.'&property_for=Business'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->governorate->name }}</a>
                            @elseif($for == 'swap')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?governorate='.$link->governorate_id.'&is_exchange=on'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->governorate->name }}</a>
                            @else
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?governorate='.$link->governorate_id.'&property_for=Sale'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->governorate->name }}</a>
                            @endif
                        </div>
                        @endif
                    @endforeach
                </div>
            </div>
            @endif
            @if(!empty($city_IDS[0]))
            <div class="col-3">
                <div id="seeDIV3" class="px-1 seemore2">
                    <p class="text-blue fw-bold my-0">@lang('site.Property') @if(Lang::has('site.For_'.$for)) @lang('site.For_'. $for) @else @lang('site.'.$for) @endif @lang('site.By Cities')</p>
                    @foreach ($city_IDS as $link)
                        @if(!empty($link->city->name))
                        <div class="">
                            @if($for == 'Rent')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?city='.$link->city_id.'&property_for=Rent' }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->city->name }}</a>
                            @elseif($for == 'Business')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?city='.$link->city_id.'&property_for=Business'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->city->name }}</a>
                            @elseif($for == 'swap')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?city='.$link->city_id.'&is_exchange=on'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->city->name }}</a>
                            @else
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?city='.$link->city_id.'&property_for=Sale' }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->city->name }}</a>
                            @endif
                        </div>
                        @endif
                    @endforeach
                </div>
            </div>
            @endif
            @if(!empty($district_IDS[0]))
            <div class="col-3">
                <div id="seeDIV4" class="px-1 seemore2">
                    <p class="text-blue fw-bold my-0">@lang('site.Property') @if(Lang::has('site.For_'.$for)) @lang('site.For_'. $for) @else @lang('site.'.$for) @endif @lang('site.By Districts')</p>
                    @foreach ($district_IDS as $link)
                        @if(!empty($link->district->name))
                        <div class="">
                            @if($for == 'Rent')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?district='.$link->district_id.'&property_for=Rent' }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->district->name }}</a>
                            @elseif($for == 'Business')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?district='.$link->district_id.'&property_for=Business'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->district->name }}</a>
                            @elseif($for == 'swap')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?district='.$link->district_id.'&is_exchange=on'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->district->name }}</a>
                            @else
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?district='.$link->district_id.'&property_for=Sale' }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->district->name }}</a>
                            @endif
                        </div>
                        @endif
                    @endforeach
                </div>
            </div>
            @endif
            @if(!empty($compound_IDS[0]))
            <div class="col-3">
                <div id="seeDIV5" class="px-1 seemore2">
                    <p class="text-blue fw-bold my-0">@lang('site.Property') @if(Lang::has('site.For_'.$for)) @lang('site.For_'. $for) @else @lang('site.'.$for) @endif @lang('site.By Compounds')</p>
                    @foreach ($compound_IDS as $link)
                        @if(!empty($link->compound->name))
                        <div class="">
                            @if($for == 'Rent')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?compound='.$link->compound_id.'&property_for=Rent' }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->compound->name }}</a>
                            @elseif($for == 'Business')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?compound='.$link->compound_id.'&property_for=Business'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->compound->name }}</a>
                            @elseif($for == 'swap')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?compound='.$link->compound_id.'&is_exchange=on'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->compound->name }}</a>
                            @else
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?compound='.$link->compound_id.'&property_for=Sale' }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->compound->name }}</a>
                            @endif
                        </div>
                        @endif
                    @endforeach
                </div>
            </div>
            @endif
            @if(!empty($cheap_IDS[0]))
            <div class="col-3">
                <div id="seeDIV6" class="px-1 seemore2">
                    <p class="text-blue fw-bold my-0">@lang('site.Search For Cheap') @lang('site.Property') @if(Lang::has('site.For_'.$for)) @lang('site.For_'. $for) @else @lang('site.'.$for) @endif</p>
                    @foreach ($cheap_IDS as $link)
                        @if(!empty($link->district->name))
                        <div class="">
                            @if($for == 'Rent')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?district='.$link->district_id.'&is_chance=on&property_for=Rent' }}">@lang('site.Cheap') @lang('site.Property') @lang('site.For '. $for .' In') {{ $link->district->name }}</a>
                            @elseif($for == 'Business')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?district='.$link->district_id.'&is_chance=on&property_for=Business'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->district->name }}</a>
                            @elseif($for == 'swap')
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?district='.$link->district_id.'&is_chance=on&is_exchange=on'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->district->name }}</a>
                            @else
                                <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?district='.$link->district_id.'&is_chance=on&property_for=Sale' }}">@lang('site.Cheap') @lang('site.Property') @lang('site.For '. $for .' In') {{ $link->district->name }}</a>
                            @endif
                        </div>
                        @endif
                    @endforeach
                </div>
            </div>
            @endif
            @if(!empty($luxury_IDS[0]))
                <div class="col-3">
                    <div id="seeDIV7" class="px-1 seemore2">
                        <h5>@lang('site.Search For Luxury Property') @if(Lang::has('site.For_'.$for)) @lang('site.For_'. $for) @else @lang('site.'.$for) @endif</h5>
                        @foreach ($luxury_IDS as $link)
                            @if(!empty($link->city->name))
                            <div class="">
                                @if($for == 'Rent')
                                    <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?city='.$link->city_id.'&is_luxury=on&property_for=Rent' }}">@lang('site.Luxury Property') @lang('site.For '. $for .' In') {{ $link->city->name }}</a>
                                @elseif($for == 'Business')
                                    <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?city='.$link->city_id.'&is_luxury=on&property_for=Business'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->city->name }}</a>
                                @elseif($for == 'swap')
                                    <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?city='.$link->city_id.'&is_luxury=on&is_exchange=on'  }}">@lang('site.Property') @lang('site.For '. $for .' In') {{ $link->city->name }}</a>
                                @else
                                    <a class="d-none d-md-block text-decoration-underline text-gray small" target="_blank" href="{{ 'https://nileestate.com/'.app()->getLocale().'/custom-search?city='.$link->city_id.'&is_luxury=on&property_for=Sale' }}">@lang('site.Luxury Property') @lang('site.For '. $for .' In') {{ $link->city->name }}</a>
                                @endif
                            </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    @endif
        </div>
    </div>

    <style>

.price-filter-wrap{
    position: relative;
    width: 100%;
}




.select2-container .select2-selection--multiple,
.select2-container .select2-selection--single {
    width: 100% !important;
    min-height: 42px !important;
    border: 1px solid #707070 !important;
    border-radius: .375rem !important;
    background: #fff !important;
    padding: .375rem .75rem !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple {
    padding-right: 32px !important;
}

.select2-container--default .select2-selection--multiple:after,
.select2-container--default .select2-selection--single:after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 0 !important;
    height: auto !important;
}

.price-filter-btn{
    width: 100%;
    height: 48px;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-size: 18px;
    color: #2f2f2f;
    cursor: pointer;
}

.price-filter-btn.active{
    border-color: #0f8b8d;
    box-shadow: 0 0 0 2px rgba(15,139,141,.08);
}

.price-dropdown{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    width: 480px;
    max-width: calc(100vw - 24px);
    background: #f3f3f3;
    border-radius: 16px;
    padding: 20px 20px 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
    z-index: 9999;
    display: none;
}

@media (max-width: 767px){
    .price-dropdown{
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}

.price-dropdown.show{
    display: block;
}

.price-tabs{
    display: flex;
    gap: 28px;
    margin-bottom: 18px;
}

.price-tab{
    background: transparent;
    border: 0;
    padding: 0 0 10px;
    font-size: 16px;
    color: #111;
    cursor: pointer;
}

.price-tab.active{
    font-weight: 700;
    border-bottom: 4px solid #232323;
}

.price-chart{
    margin-bottom: 16px;
}

.price-bars{
    height: 90px;
    display: flex;
    align-items: end;
    gap: 4px;
    padding: 0 8px;
    margin-bottom: 6px;
    overflow: hidden;
}



.price-bars .bar{
    width: 7px;
    background: #1e73e8;
    border-radius: 8px 8px 0 0;
    display: inline-block;
    flex: 0 0 auto;
}

.range-track-wrap{
    --thumb-size: 22px;
    --thumb-radius: 11px;
    position: relative;
    height: 58px;
    padding-inline: 0;
    box-sizing: border-box;
}

.range-track{
    position: absolute;
      left: 0;
    right: 0;
    top: 14px;
    height: 4px;
    background: #1e73e8;
    border-radius: 999px;
}

.range-active{
    position: absolute;
    top: 14px;
    height: 4px;
    background: #1e73e8;
    border-radius: 999px;
}

.range-track-wrap input[type="range"]{
    position: absolute;

    top: -6px;
    left: 0;
    right: 0;
    width: 100%;
    height: 36px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
}

.range-track-wrap input[type="range"]::-webkit-slider-runnable-track{
    height: 4px;
    background: transparent;
}

.range-track-wrap input[type="range"]::-moz-range-track{
    height: 4px;
    background: transparent;
}

.range-track-wrap input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background: #f3f3f3;
    border: 2px solid #1e73e8;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    pointer-events: auto;
    cursor: pointer;
    margin-top: -9px;
}

.range-track-wrap input[type="range"]::-moz-range-thumb{
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background: #f3f3f3;
    border: 2px solid #1e73e8;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    pointer-events: auto;
    cursor: pointer;
}

.range-label{
    position: absolute;
    top: 24px;
    font-size: 14px;
    color: #666;
    line-height: 1;
}

.min-label{
    left: 0;
}

.max-label{
    right: 0;
}

.price-inputs-row{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.price-inputs-row input{
    flex: 1;
    height: 48px;
    border: 1px solid #a9a9a9;
    border-radius: 10px;
    background: #f3f3f3;
    padding: 0 14px;
    font-size: 16px;
    color: #555;
}

.price-inputs-row .dash{
    font-size: 22px;
    color: #6b6b6b;
}

.price-actions{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}

.reset-btn{
    border: 0;
    background: transparent;
    color: #1e73e8;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.done-btn{
    min-width: 110px;
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: #df3341;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 991px){
    .price-dropdown{
        width: 420px;
        max-width: 92vw;
        right: 0;
        left: auto;
        padding: 18px 14px 16px;
    }

    .price-tabs{
        gap: 18px;
        margin-bottom: 14px;
    }

    .price-tab{
        font-size: 15px;
    }

    .price-bars{
        height: 72px;
        gap: 3px;
        padding: 0 4px;
    }

    .price-bars .bar{
        width: 6px;
    }



    .range-label{
        font-size: 13px;
    }

    .price-inputs-row{
        gap: 8px;
    }

    .price-inputs-row input{
        height: 44px;
        font-size: 15px;
        padding: 0 12px;
    }

    .price-inputs-row .dash{
        font-size: 18px;
    }

    .reset-btn{
        font-size: 15px;
    }

    .done-btn{
        min-width: 96px;
        height: 44px;
        font-size: 15px;
    }
}

@media (max-width: 575px){
    .price-dropdown{
        width: 340px;
        max-width: 92vw;
        padding: 16px 12px 14px;
    }

    .price-tabs{
        gap: 14px;
        margin-bottom: 12px;
    }

    .price-tab{
        font-size: 14px;
        padding-bottom: 8px;
    }

    .price-tab.active{
        border-bottom: 3px solid #232323;
    }

    .price-bars{
        height: 60px;
        gap: 2px;
        padding: 0 2px;
    }

    .price-bars .bar{
        width: 5px;
    }

    .range-track{
        left: 4px;
        right: 4px;
    }

    .range-track-wrap input[type="range"]{
        left: 4px;
        right: 4px;
        width: calc(100% - 8px);
    }

    .range-label{
        font-size: 12px;
    }

    .price-inputs-row{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .price-inputs-row .dash{
        display: none;
    }

    .price-inputs-row input{
        height: 42px;
        font-size: 14px;
    }

    .price-actions{
        justify-content: space-between;
        margin-top: 14px;
    }

    .reset-btn{
        font-size: 14px;
    }

    .done-btn{
        min-width: 88px;
        height: 42px;
        font-size: 14px;
    }
}

#insertFilterForm {
    position: absolute;
    top: 150px;           /* نزله تحت زي ما تحب */
    left: 0;              /* بداية من اليسار بالنسبة للLTR */
    right: 0;             /* بداية من اليمين بالنسبة للRTL */
    margin: 0 auto;       /* لتوسيط البوكس في كل اللغات */
    width: 820px;         /* عرض ثابت على الديسكتوب */
    max-height: 75vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
    display: none;
    z-index: 1000;
    box-sizing: border-box;
}

#angle {
    transition: transform 0.3s ease;
}

#angle.up {
    transform: rotate(180deg);
}

#showmore {
    position: relative;
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

@media (max-width: 767px) {

    #search-area-1 {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px 4px !important;
    }

    #search-area-1 .col-lg-1.col-md-2.col-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    #search-area-1 .col-md-2.col-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    #search-area-1 select,
    #search-area-1 button {
        height: 38px !important;
        padding: 6px 8px !important;
        font-size: 13px !important;
    }

    #search-area-1 .form-group {
        margin: 4px 0 !important;
    }

    #insertFilterForm {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0,0,0,.15);
        max-height: 75vh;
        overflow-y: auto;
        display: none;
        z-index: 1000;
        box-sizing: border-box;
        padding: 15px;
    }

    #insertFilterForm.open {
        display: block;
    }
}

@media (max-width: 991px) {

    #hotspot_carousel {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    #hotspot_carousel .owl-stage-outer,
    #hotspot_carousel .owl-stage,
    #hotspot_carousel .owl-item {
        width: 100% !important;
        display: contents !important;
    }

}


@media (max-width: 991px) {

    #hotspot_carousel {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 10px;
    }

    #hotspot_carousel .owl-stage-outer,
    #hotspot_carousel .owl-stage {
        display: contents !important;
    }

    #hotspot_carousel .owl-item {
        width: 100% !important;
        margin: 0 !important;
    }

    .hotspot__item {
        width: 100%;
    }

}

.price-dropdown{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    width: 480px;
    max-width: calc(100vw - 24px);
    background: #f3f3f3;
    border-radius: 16px;
    padding: 20px 20px 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
    z-index: 9999;
    display: none;
}

.beds-baths-wrap{
    position: relative;
    width: 100%;
}

.beds-baths-btn{
    width: 100%;
    height: 48px;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-size: 18px;
    color: #2f2f2f;
    cursor: pointer;
}

.beds-baths-btn.active{
    border-color: #1e73e8;
    box-shadow: 0 0 0 2px rgba(30,115,232,.08);
}

.beds-baths-dropdown{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 540px;
    max-width: 92vw;
    background: #f3f3f3;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
    z-index: 9999;
    display: none;
}

.beds-baths-dropdown.show{
    display: block;
}

.bb-section + .bb-section{
    margin-top: 24px;
}

.bb-title-row{
    margin-bottom: 12px;
}

.bb-title{
    font-size: 20px;
    font-weight: 700;
    color: #111;
}

.bb-options{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: #f7f7f7;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    padding: 10px;
}

.bb-chip{
    min-width: 64px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #222;
    font-size: 16px;
    cursor: pointer;
}

.bb-chip.active{
    background: #e9f8fb;
    border-color: #14899a;
    color: #14899a;
    font-weight: 700;
}

.bb-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin-top: 26px;
}

.bb-reset{
    border: 0;
    background: transparent;
    color: #14899a;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.bb-done{
    min-width: 120px;
    height: 52px;
    border: 0;
    border-radius: 10px;
    background: #df3341;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 991px){
    .beds-baths-wrap{
        width: 100%;
    }

    .beds-baths-btn{
        height: 44px;
        font-size: 15px;
        padding: 0 12px;
    }

    .beds-baths-dropdown{
        width: 380px;
        max-width: calc(100vw - 24px);
        right: 0;
        left: auto;
        transform: none;
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .bb-title{
        font-size: 16px;
    }

    .bb-section + .bb-section{
        margin-top: 16px;
    }

    .bb-options{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
    }

    .bb-chip{
        min-width: 56px;
        height: 40px;
        padding: 0 10px;
        font-size: 14px;
    }

    .bb-actions{
        margin-top: 14px;
        gap: 12px;
        justify-content: space-between;
    }

    .bb-done{
        min-width: 90px;
        height: 42px;
        font-size: 14px;
    }

    .bb-reset{
        font-size: 14px;
    }
}

@media (max-width: 767px){
    .beds-baths-btn{
        height: 42px;
        font-size: 14px;
        padding: 0 10px;
    }

    .beds-baths-dropdown{
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        transform: none;
        padding: 14px 12px 12px;
        border-radius: 12px;
    }

    .bb-title{
        font-size: 15px;
    }

    .bb-options{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
    }

    .bb-chip{
        min-width: 0;
        width: 100%;
        height: 38px;
        padding: 0 8px;
        font-size: 13px;
    }

    .bb-actions{
        justify-content: space-between;
        margin-top: 12px;
        gap: 10px;
    }

    .bb-done{
        min-width: 82px;
        height: 40px;
        font-size: 13px;
    }

    .bb-reset{
        font-size: 13px;
    }
}

@media (max-width: 575px){
    .beds-baths-dropdown{
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        padding: 12px 10px 10px;
        border-radius: 10px;
    }

    .bb-options{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 6px;
    }

    .bb-chip{
        height: 36px;
        font-size: 12px;
    }

    .bb-done{
        min-width: 74px;
        height: 38px;
        font-size: 12px;
    }

    .bb-reset{
        font-size: 12px;
    }
}

html[lang="ar"] .range-track-wrap {
    transform: scaleX(-1);
}

html[lang="ar"] .range-track-wrap .range-label {
    transform: scaleX(-1);
}

/* السعر زي beds/baths على الموبايل فقط */
@media (max-width: 768px){

    .price-filter-wrap{
        position: relative;
    }

    .price-dropdown{
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: auto;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        z-index: 9999;
        overflow: hidden;
    }

    .price-chart{
        width: 100%;
        overflow: hidden;
    }

    .price-bars{
        width: 100%;
        height: 60px;
        gap: 1px;
        overflow: hidden;
    }

    .price-bars .bar{
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    .range-track-wrap{
        width: 100%;
        overflow: hidden;
    }

    .price-inputs-row{
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
    }

    .price-inputs-row input{
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .range-label{
        font-size: 10px;
        white-space: nowrap;
    }
}


</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div id="chatBotContainer">

    <button id="chatBotToggle">
        <i class="fa-solid fa-robot"></i>
    </button>

    <div id="chatBotBox">

        <div class="chat-header">
            <span>AI Assistant</span>
            <button id="closeChatBot">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <div id="chatMessages"></div>

        <div class="chat-input-area">
            <input type="text" id="chatInput" placeholder="Type your message...">

            <button id="sendMessage">
                <i class="fa-solid fa-paper-plane"></i>
            </button>
        </div>

    </div>

</div>

<style>
#chatBotContainer{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:999999;
}

html[dir="rtl"] #chatBotContainer{
    right:auto;
    left:20px;
}

#chatBotToggle{
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    background:#0d6efd;
    color:#fff;
    font-size:24px;
    box-shadow:0 4px 15px rgba(0,0,0,.2);
    cursor:pointer;
}

#chatBotBox{
    width:350px;
    height:500px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 10px 35px rgba(0,0,0,.2);
    overflow:hidden;
    display:none;
    flex-direction:column;
    position:absolute;
    bottom:80px;
    right:0;
}

html[dir="rtl"] #chatBotBox{
    right:auto;
    left:0;
}

.chat-header{
    background:#0d6efd;
    color:#fff;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:bold;
}

#closeChatBot{
    background:none;
    border:none;
    color:#fff;
    font-size:18px;
    cursor:pointer;
}

#chatMessages{
    flex:1;
    padding:15px;
    overflow-y:auto;
    background:#f7f7f7;
}

.chat-message{
    margin-bottom:10px;
}

.user-message{
    text-align:right;
}

.bot-message{
    text-align:left;
}

.message-bubble{
    display:inline-block;
    padding:10px 14px;
    border-radius:14px;
    max-width:80%;
    font-size:14px;
}

.user-message .message-bubble{
    background:#0d6efd;
    color:#fff;
}

.bot-message .message-bubble{
    background:#e9ecef;
    color:#222;
}

.chat-input-area{
    display:flex;
    border-top:1px solid #eee;
}

#chatInput{
    flex:1;
    border:none;
    padding:14px;
    outline:none;
}

#sendMessage{
    width:60px;
    border:none;
    background:#0d6efd;
    color:#fff;
}

@media(max-width:768px){

    #chatBotBox{
        width:320px;
        height:450px;
    }

}

.chat-property-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    margin-bottom:12px;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
    border:1px solid #eee;
}

.chat-property-img{
    width:100%;
    height:150px;
    object-fit:cover;
    display:block;
}

.chat-property-body{
    padding:10px;
}

.chat-property-title{
    font-weight:700;
    font-size:14px;
    color:#222;
    margin-bottom:6px;
}

.chat-property-price{
    color:#0d6efd;
    font-weight:700;
    margin-bottom:5px;
}

.chat-property-location{
    color:#666;
    font-size:13px;
    margin-bottom:8px;
}

.chat-property-link{
    display:block;
    text-align:center;
    background:#0d6efd;
    color:#fff !important;
    padding:8px;
    border-radius:8px;
    text-decoration:none;
    font-size:13px;
}


.chat-title{
    font-size:16px;
    font-weight:700;
    margin:12px 0 8px;
    color:#222;
}

.chat-list-item{
    padding:8px 12px;
    margin:6px 0;
    background:#f7f7f7;
    border-radius:12px;
    line-height:1.8;
}

.chat-response{
    line-height:1.9;
}


@media (max-width: 768px){
    #chatBotContainer{
        bottom: 5px !important;
        right: 10px !important;
    }

    html[dir="rtl"] #chatBotContainer{
        right: auto !important;
        left: 10px !important;
    }

    #chatBotBox{
        height: 360px !important;
        bottom: 70px !important;
        max-height: calc(100vh - 90px) !important;
    }
}
</style>

<script>
const chatBotToggle = document.getElementById("chatBotToggle");
const chatBotBox = document.getElementById("chatBotBox");
const closeChatBot = document.getElementById("closeChatBot");
const sendMessageBtn = document.getElementById("sendMessage");
const chatInput = document.getElementById("chatInput");
const chatMessages = document.getElementById("chatMessages");

chatBotToggle.addEventListener("click", () => {
    chatBotBox.style.display = "flex";
});

closeChatBot.addEventListener("click", () => {
    chatBotBox.style.display = "none";
});

function appendMessage(message, type){

    const wrapper = document.createElement("div");
    wrapper.classList.add("chat-message", type);

    wrapper.innerHTML = `
        <div class="message-bubble">
            ${message}
        </div>
    `;

    chatMessages.appendChild(wrapper);

    chatMessages.scrollTop = chatMessages.scrollHeight;
}

async function sendMessage(){

    const message = chatInput.value.trim();

    if(!message) return;

    appendMessage(message, "user-message");

    chatInput.value = "";

    try{

        const response = await fetch("/chat",{
            method:"POST",
            headers:{
                "Content-Type":"application/json",
                "X-CSRF-TOKEN":"{{ csrf_token() }}"
            },
            body:JSON.stringify({
                message:message
            })
        });

        const data = await response.json();

        appendMessage(data.response || "No response", "bot-message");

    }catch(error){

        appendMessage("Error occurred", "bot-message");

    }
}

sendMessageBtn.addEventListener("click", sendMessage);

chatInput.addEventListener("keypress", function(e){

    if(e.key === "Enter"){
        sendMessage();
    }

});
</script>
@endsection
@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var imgElements = document.querySelectorAll('.property-image');

            imgElements.forEach(function(imgElement) {
                var realSrc = imgElement.getAttribute('image-data');
                var img = new Image();
                img.src = realSrc;

                img.onload = function() {
                    // Replace the placeholder src with the real image URL
                    imgElement.src = realSrc;
                };
            });
        });

        $(document).ready(function () {
    function applyQuickFilters() {
        const url = new URL(window.location.href);

        const propertyFor = $('#quick_property_for').val();
        const priceRange  = $('#quick_price_range').val();
        const beds        = $('#quick_beds').val();
        const baths       = $('#quick_baths').val();

        if (propertyFor !== '') {
            url.searchParams.set('quick_property_for', propertyFor);
        } else {
            url.searchParams.delete('quick_property_for');
        }

        if (priceRange !== '') {
            url.searchParams.set('quick_price_range', priceRange);
        } else {
            url.searchParams.delete('quick_price_range');
        }

        if (beds !== '') {
            url.searchParams.set('quick_beds', beds);
        } else {
            url.searchParams.delete('quick_beds');
        }

        if (baths !== '') {
            url.searchParams.set('quick_baths', baths);
        } else {
            url.searchParams.delete('quick_baths');
        }

        window.location.href = url.toString();
    }

    $('#quick_property_for, #quick_price_range, #quick_beds, #quick_baths').on('change', function () {
        applyQuickFilters();
    });

    const params = new URLSearchParams(window.location.search);

    $('#quick_property_for').val(params.get('quick_property_for') || '');
    $('#quick_price_range').val(params.get('quick_price_range') || '');
    $('#quick_beds').val(params.get('quick_beds') || '');
    $('#quick_baths').val(params.get('quick_baths') || '');
});

document.addEventListener('DOMContentLoaded', function () {
    const btn = document.getElementById('priceFilterBtn');
    const dropdown = document.getElementById('priceDropdown');
    const minRange = document.getElementById('minRange');
    const maxRange = document.getElementById('maxRange');
    const minInput = document.getElementById('minInput');
    const maxInput = document.getElementById('maxInput');
    const minLabel = document.getElementById('minLabel');
    const maxLabel = document.getElementById('maxLabel');
    const rangeActive = document.getElementById('rangeActive');
    const resetBtn = document.getElementById('priceResetBtn');
    const propertyForSelect = document.querySelector('select[name="property_for"]');

    if (
        !btn ||
        !dropdown ||
        !minRange ||
        !maxRange ||
        !minInput ||
        !maxInput ||
        !minLabel ||
        !maxLabel ||
        !rangeActive ||
        !resetBtn
    ) {
        return;
    }

    function buildValues(ranges) {
        const values = [];

        ranges.forEach(range => {
            for (let v = range.from; v <= range.to; v += range.step) {
                if (values[values.length - 1] !== v) {
                    values.push(v);
                }
            }
        });

        return values;
    }

    const SALE_VALUES = buildValues([
        { from: 500000, to: 5000000, step: 100000 },
        { from: 5000000, to: 20000000, step: 500000 },
        { from: 20000000, to: 50000000, step: 1000000 },
        { from: 50000000, to: 100000000, step: 5000000 },
        { from: 100000000, to: 300000000, step: 10000000 },
        { from: 300000000, to: 1000000000, step: 50000000 },
        { from: 1000000000, to: 5000000000, step: 100000000 },
        { from: 5000000000, to: 50000000000, step: 1000000000 }
    ]);

    const RENT_VALUES = buildValues([
        { from: 1000, to: 10000, step: 1000 },
        { from: 10000, to: 30000, step: 2000 },
        { from: 30000, to: 100000, step: 5000 },
        { from: 100000, to: 300000, step: 10000 },
        { from: 300000, to: 500000, step: 20000 },
        { from: 500000, to: 1000000, step: 50000 },
        { from: 1000000, to: 5000000, step: 500000 },
        { from: 5000000, to: 30000000, step: 1000000 },
        { from: 30000000, to: 100000000, step: 5000000 }
    ]);

    function getMode() {
        return propertyForSelect && propertyForSelect.value === 'Rent' ? 'Rent' : 'Sale';
    }

    function getValues() {
        return getMode() === 'Rent' ? RENT_VALUES : SALE_VALUES;
    }

    function formatPrice(value) {
        return Number(value).toLocaleString('en-US') + ' EGP';
    }

    function formatInputValue(value) {
        return value ? Number(value).toLocaleString('en-US') : '';
    }

    function unformatInputValue(value) {
        return parseInt(String(value).replace(/,/g, ''), 10) || 0;
    }

    function nearestIndex(values, target, mode = 'nearest') {
        target = parseInt(target || 0, 10);

        if (!target) return null;

        if (mode === 'floor') {
            let idx = 0;
            for (let i = 0; i < values.length; i++) {
                if (values[i] <= target) idx = i;
                else break;
            }
            return idx;
        }

        if (mode === 'ceil') {
            for (let i = 0; i < values.length; i++) {
                if (values[i] >= target) return i;
            }
            return values.length - 1;
        }

        let nearest = 0;
        let minDiff = Math.abs(values[0] - target);

        for (let i = 1; i < values.length; i++) {
            const diff = Math.abs(values[i] - target);
            if (diff < minDiff) {
                minDiff = diff;
                nearest = i;
            }
        }

        return nearest;
    }

    function updateTrack(minIndex, maxIndex, lastIndex) {
    const left = (minIndex / lastIndex) * 100;
    const right = (maxIndex / lastIndex) * 100;

    rangeActive.style.left = left + '%';
    rangeActive.style.width = (right - left) + '%';
}

    function syncUI(changedBy = null) {
        const values = getValues();
        const lastIndex = values.length - 1;

        let minIndex = parseInt(minRange.value, 10);
        let maxIndex = parseInt(maxRange.value, 10);

        if (isNaN(minIndex) || minIndex < 0) minIndex = 0;
        if (isNaN(maxIndex) || maxIndex > lastIndex) maxIndex = lastIndex;

        if (minIndex >= maxIndex) {
            if (changedBy === 'min') {
                minIndex = Math.max(0, maxIndex - 1);
            } else {
                maxIndex = Math.min(lastIndex, minIndex + 1);
            }
        }

        minRange.value = minIndex;
        maxRange.value = maxIndex;

        const minValue = values[minIndex];
        const maxValue = values[maxIndex];

        minLabel.textContent = formatPrice(minValue);
        maxLabel.textContent = formatPrice(maxValue);

        minInput.value = minIndex === 0 ? '' : formatInputValue(minValue);
        maxInput.value = maxIndex === lastIndex ? '' : formatInputValue(maxValue);

        updateTrack(minIndex, maxIndex, lastIndex);
    }

    function setupRangesFromMode() {
        const values = getValues();
        const lastIndex = values.length - 1;

        minRange.min = 0;
        minRange.max = lastIndex;
        minRange.step = 1;

        maxRange.min = 0;
        maxRange.max = lastIndex;
        maxRange.step = 1;

        let minIndex = 0;
        let maxIndex = lastIndex;

        const minVal = unformatInputValue(minInput.value);
        const maxVal = unformatInputValue(maxInput.value);

        if (minVal) {
            const idx = nearestIndex(values, minVal, 'floor');
            if (idx !== null) minIndex = idx;
        }

        if (maxVal) {
            const idx = nearestIndex(values, maxVal, 'ceil');
            if (idx !== null) maxIndex = idx;
        }

        if (minIndex >= maxIndex) {
            minIndex = 0;
            maxIndex = lastIndex;
        }

        minRange.value = minIndex;
        maxRange.value = maxIndex;

        syncUI();
    }

    btn.addEventListener('click', function (e) {
        e.stopPropagation();
        dropdown.classList.toggle('show');
        btn.classList.toggle('active');
    });

    dropdown.addEventListener('click', function (e) {
        e.stopPropagation();
    });

    document.addEventListener('click', function () {
        dropdown.classList.remove('show');
        btn.classList.remove('active');
    });

    minRange.addEventListener('input', function () {
        syncUI('min');
    });

    maxRange.addEventListener('input', function () {
        syncUI('max');
    });

    minInput.addEventListener('change', function () {
        const values = getValues();
        const idx = nearestIndex(values, this.value, 'floor');
        minRange.value = idx === null ? 0 : idx;
        syncUI('min');
    });

    maxInput.addEventListener('change', function () {
        const values = getValues();
        const idx = nearestIndex(values, this.value, 'ceil');
        maxRange.value = idx === null ? values.length - 1 : idx;
        syncUI('max');
    });

    resetBtn.addEventListener('click', function () {
        const values = getValues();
        minRange.value = 0;
        maxRange.value = values.length - 1;
        minInput.value = '';
        maxInput.value = '';
        syncUI();
    });

    if (propertyForSelect) {
        propertyForSelect.addEventListener('change', function () {
            minInput.value = '';
            maxInput.value = '';
            setupRangesFromMode();
        });
    }

    setupRangesFromMode();
});

document.addEventListener('DOMContentLoaded', function () {
    const btn = document.getElementById('bedsBathsBtn');
    const dropdown = document.getElementById('bedsBathsDropdown');
    const doneBtn = document.getElementById('bedsBathsDone');
    const resetBtn = document.getElementById('bedsBathsReset');
    const bedsHidden = document.getElementById('bedsHidden');
    const bathsHidden = document.getElementById('bathsHidden');
    const btnText = document.getElementById('bedsBathsBtnText');
    const form = btn ? btn.closest('form') : null;

    if (!btn || !dropdown || !doneBtn || !resetBtn || !bedsHidden || !bathsHidden || !btnText || !form) {
        return;
    }

    function setActiveFromValue(groupName, value) {
        const group = dropdown.querySelector('.bb-options[data-target="' + groupName + '"]');
        if (!group) return;

        group.querySelectorAll('.bb-chip').forEach(chip => {
            chip.classList.remove('active');
        });

        const target =
            group.querySelector('.bb-chip[data-value="' + value + '"]') ||
            group.querySelector('.bb-chip[data-value=""]');

        if (target) {
            target.classList.add('active');
        }
    }

    function getActiveValue(groupName) {
        const group = dropdown.querySelector('.bb-options[data-target="' + groupName + '"]');
        if (!group) return '';

        const active = group.querySelector('.bb-chip.active');
        return active ? active.getAttribute('data-value') : '';
    }

    function updateButtonText() {
        const beds = bedsHidden.value;
        const baths = bathsHidden.value;

        if (!beds && !baths) {
            btnText.textContent = 'Beds/baths';
            return;
        }

        let text = '';
        if (beds) text += beds + '+ beds';
        if (beds && baths) text += ' · ';
        if (baths) text += baths + '+ baths';

        btnText.textContent = text;
    }

    btn.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        dropdown.classList.toggle('show');
        btn.classList.toggle('active');
    });

    dropdown.addEventListener('click', function (e) {
        e.stopPropagation();
    });

    document.addEventListener('click', function () {
        dropdown.classList.remove('show');
        btn.classList.remove('active');
    });

    dropdown.querySelectorAll('.bb-options').forEach(group => {
        group.querySelectorAll('.bb-chip').forEach(chip => {
            chip.addEventListener('click', function () {
                group.querySelectorAll('.bb-chip').forEach(c => c.classList.remove('active'));
                this.classList.add('active');
            });
        });
    });

    resetBtn.addEventListener('click', function () {
        bedsHidden.value = '';
        bathsHidden.value = '';

        setActiveFromValue('beds', '');
        setActiveFromValue('baths', '');
        updateButtonText();
    });

    doneBtn.addEventListener('click', function () {
        bedsHidden.value = getActiveValue('beds');
        bathsHidden.value = getActiveValue('baths');
        updateButtonText();
        form.submit();
    });

    setActiveFromValue('beds', bedsHidden.value || '');
    setActiveFromValue('baths', bathsHidden.value || '');
    updateButtonText();
});


$(document).ready(function () {
    $('select[name="governorate"]').on('change', function () {
        let governorateId = $(this).val();

        $('#city_select').html('<option value="">City</option>');
        $('#district_select').html('<option value="" disabled>District</option>').trigger('change');
        $('#compound_select').html('<option value="" disabled>Compound</option>').trigger('change');

        if (governorateId) {
            $.ajax({
                url: "{{ url('/getgovernoratecities') }}",
                type: "GET",
                data: { gover: governorateId },
                success: function (data) {
                    $('#city_select').html('<option value="">@lang("site.City")</option>');
                    $.each(data, function (key, city) {
                        $('#city_select').append('<option value="' + city.id + '">' + city.name + '</option>');
                    });
                }
            });
        }
    });

    $('#city_select').on('change', function () {
        let cityId = $(this).val();

        $('#district_select').html('<option value="" disabled>District</option>').trigger('change');
        $('#compound_select').html('<option value="" disabled>Compound</option>').trigger('change');

        if (cityId) {
            $.ajax({
                url: "{{ url('/getcitydistricts') }}",
                type: "GET",
                data: { city: cityId },
                success: function (data) {
                    $('#district_select').html('<option value="" disabled>@lang("site.District")</option>');
                    $.each(data, function (key, district) {
                        $('#district_select').append('<option value="' + district.id + '">' + district.name + '</option>');
                    });
                    $('#district_select').trigger('change');
                }
            });

            $.ajax({
                url: "{{ url('/getcitycompounds') }}",
                type: "GET",
                data: { city: cityId },
                success: function (data) {
                    $('#compound_select').html('<option value="" disabled>@lang("site.compound")</option>');
                    $.each(data, function (key, compound) {
                        $('#compound_select').append('<option value="' + compound.id + '">' + compound.name + '</option>');
                    });
                    $('#compound_select').trigger('change');
                }
            });
        }
    });
});

$(document).ready(function () {
    let allText = "{{ app()->getLocale() == 'ar' ? 'الكل' : 'All' }}";

    let selectedCityId = @json(request('city') ?? null);
    let selectedDistrictId = @json(request('district') ?? null);
    let selectedCompoundId = @json(request('compound') ?? null);

    function resetDistricts() {
        $('#district_select').empty();
        $('#district_select').append('<option value="" selected>' + allText + '</option>');
    }

    function resetCompounds() {
        $('#compound_select').empty();
        $('#compound_select').append('<option value="" selected>' + allText + '</option>');
    }

    function loadCities() {
        let gover = $('[name="governorate"]').val();

        $('#city_select').empty();
        $('#city_select').append('<option value="">@lang("site.City")</option>');

        resetDistricts();
        resetCompounds();

        if (!gover) {
            return;
        }

        $.ajax({
            url: "{{ route('site.getgovernoratecities') }}",
            type: 'GET',
            data: {
                gover: gover
            },
            dataType: 'json',
            success: function (res) {
                $('#city_select').empty();
                $('#city_select').append('<option value="">@lang("site.City")</option>');

                if (res && res.length > 0) {
                    res.forEach(function (city) {
                        let selected = String(city.id) === String(selectedCityId) ? 'selected' : '';
                        $('#city_select').append(
                            '<option value="' + city.id + '" ' + selected + '>' + city.name + '</option>'
                        );
                    });
                }

                if (selectedCityId) {
                    $('#city_select').val(String(selectedCityId));
                    loadDistricts();
                    loadCompounds();
                }
            }
        });
    }

    function loadDistricts() {
        let city = $('#city_select').val();

        resetDistricts();

        if (!city) {
            return;
        }

        $.ajax({
            url: "{{ route('site.getcitydistricts') }}",
            type: 'GET',
            data: {
                city: city
            },
            dataType: 'json',
            success: function (res) {
                resetDistricts();

                if (res && res.length > 0) {
                    res.forEach(function (district) {
                        let selected = String(district.id) === String(selectedDistrictId) ? 'selected' : '';
                        $('#district_select').append(
                            '<option value="' + district.id + '" ' + selected + '>' + district.name + '</option>'
                        );
                    });
                }

                if (selectedDistrictId) {
                    $('#district_select').val(String(selectedDistrictId));
                } else {
                    $('#district_select').val('');
                }
            }
        });
    }

    function loadCompounds() {
        let city = $('#city_select').val();

        resetCompounds();

        if (!city) {
            return;
        }

        $.ajax({
            url: "{{ route('site.getcitycompounds') }}",
            type: 'GET',
            data: {
                city: city
            },
            dataType: 'json',
            success: function (res) {
                resetCompounds();

                if (res && res.length > 0) {
                    res.forEach(function (compound) {
                        let selected = String(compound.id) === String(selectedCompoundId) ? 'selected' : '';
                        $('#compound_select').append(
                            '<option value="' + compound.id + '" ' + selected + '>' + compound.name + '</option>'
                        );
                    });
                }

                if (selectedCompoundId) {
                    $('#compound_select').val(String(selectedCompoundId));
                } else {
                    $('#compound_select').val('');
                }
            }
        });
    }

    $('[name="governorate"]').off('change').on('change', function () {
        selectedCityId = null;
        selectedDistrictId = null;
        selectedCompoundId = null;

        loadCities();
    });

    $('#city_select').off('change').on('change', function () {
        selectedCityId = $(this).val();
        selectedDistrictId = null;
        selectedCompoundId = null;

        loadDistricts();
        loadCompounds();
    });

    if ($('[name="governorate"]').val()) {
        loadCities();
    } else {
        resetDistricts();
        resetCompounds();
    }
});


function loadMore(page) {
    var url = window.location.href;
    if (url.includes('?')) url = url + '&page=' + page;
    else url = url + '?page=' + page;

    $.ajax({
        url: url,
        type: 'get',
        beforeSend: function() {
            $('.ajax-load').show();
        }
    })
    .done(function(data) {
        if (data.html == "") {
            $('.ajax-load').html('@lang('site.no_more_records')');
            return;
        } else {
            console.log(data.html);
            $('.ajax-load').hide();
            $('#post-data').append(data.html);

            $('.CompareCheckbox').on('click', function() {
                if (check.length < 5 || check.includes($(this).val())) {
                    check = $('.CompareCheckbox:checked').map(function() {
                        return $(this).val();
                    }).get();

                    if (check.length == 1) {
                        $('#compareBar').removeClass('d-none');
                        $('#compareBar').addClass('d-flex');
                    }

                    if (check.length < 1) {
                        $('#compareBar').addClass('d-none');
                        $('#compareBar').removeClass('d-flex');
                    }
                } else {
                    if (alerted == false) {
                        alert("@lang('site.only 5 items allowed at once')");
                        alerted = true;
                    }
                    $(this).prop('checked', false);
                }
            });

            $(".price-commas").each(function() {
                var num = $(this).text();
                var num_parts = num.toString().split(".");
                num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                $(this).html(num_parts.join("."));
            });

            var imgElements = document.querySelectorAll('.property-image');

            imgElements.forEach(function(imgElement) {
                var realSrc = imgElement.getAttribute('image-data');
                var img = new Image();
                img.src = realSrc;

                img.onload = function() {
                    imgElement.src = realSrc;
                };
            });
        }
    })
    .fail(function(jqXHR, ajaxOptions, thrownError) {
        alert('@lang('site.something_went_wrong')');
    });
}

var page = 1;

$('#load_more').click(function(e) {
    e.preventDefault();
    page++;
    loadMore(page);
});

$(".reveal_number").on("click", function(e) {
    e.preventDefault();

    $(this).hide();
    $(this).next(".reveal_number-phone").fadeIn();

    let url = $(this).children('.url').val();
    let ty = $(this).children('.type').val();
    let pr = $(this).children('.pr_id').val();
    let ip = $(this).children('.phone_clicks').val();

    $.ajax({
        url: url,
        data: {
            ty: ty,
            pr: pr,
            ip: ip
        },
        success: function(result) {
            console.log(result.data);
        },
        error: function(errors) {
            console.log(errors);
        }
    });
});

$('#for_select').change(function() {
    if ($(this).val() == 'newProject') {
        $('#is_chance').addClass('d-none');
        $('#is_auction').addClass('d-none');
        $('#is_serviced_property').addClass('d-none');
        $('#is_participation').addClass('d-none');
        $('#is_mortage').addClass('d-none');
    } else {
        $('#is_auction').removeClass('d-none');
        $('#is_serviced_property').removeClass('d-none');
        $('#is_chance').removeClass('d-none');
        $('#is_participation').removeClass('d-none');
        $('#is_mortage').removeClass('d-none');
    }
});

$('#finishing_status').click(function() {
    $('#finishing_status2').toggleClass('d-none');
});

$('.propertyFor,.propertyType').on('change', function() {
    var f = $('.propertyFor').val();
    var t = $('.propertyType').val();

    if (f == 'Rent' && t) {
        $('#newoption2').removeClass('d-none');
    } else {
        $('#newoption2').addClass('d-none');
    }

    if (f && t) {
        $('#showmore').removeClass('d-none');
        $('#insertFilterForm').slideToggle(0);
    }
});

$('.propertyFor').on('change', function() {
    if ($('#insertFilterForm').height() > 1) $('#insertFilterForm').slideToggle(0);
});

$('.propertyType').on('change', function() {
    if ($('#insertFilterForm').height() > 1) $('#insertFilterForm').slideToggle(0);
});

$('#showmore').on('click', function() {
    const $form = $('#insertFilterForm');
    $form.slideToggle(500);
    $('#angle').toggleClass('fa-angle-down fa-angle-up');
});

let xx = "<br />
<b>Warning</b>:  Undefined variable $errors in <b>/home/nilecp/public_html/resources/views/site/pages/properties/index.blade.php</b> on line <b>3727</b><br />
<br />
<b>Warning</b>:  Attempt to read property "search" on null in <b>/home/nilecp/public_html/resources/views/site/pages/properties/index.blade.php</b> on line <b>3727</b><br />
<br />
<b>Fatal error</b>:  Uncaught Error: Call to a member function all() on null in /home/nilecp/public_html/resources/views/site/pages/properties/index.blade.php:3727
Stack trace:
#0 {main}
  thrown in <b>/home/nilecp/public_html/resources/views/site/pages/properties/index.blade.php</b> on line <b>3727</b><br />