@extends('site.layouts.master')

@section('seoTags')
    @seoTags()
@endsection
@section('title')
    <title>
      @lang('site.Premier_Agent')
{{ app()->getLocale() == 'ar'
    ? ($agent?->username_ar ?? $agent?->username)
    : $agent?->username }}
    </title>
@endsection
@php
    $seo = SEO\Models\Page::where('path', URL::current())
    ->orWhere('path', url()->current())
    ->orWhere('path', request()->path())
    ->first();
@endphp
@section('metatags')
    @if (!empty($seo))
        <meta name="title" content="{{ $seo->meta_title ?? $seo->title }}">
        <meta name="keywords" content="{{ $seo->meta_keywords }}">
        <meta name="description" content="{{ $seo->description }}">
    @endif
    <link rel="canonical" href="{{str_replace('public/', '', url()->current())}}">
    <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()->current()))}}@else{{str_replace('/ar/', '/en/', str_replace('public/', '', url()->current()))}}@endif">
    <link rel="alternate" hreflang="@if (app()->getLocale() == 'ar'){{'ar'}}@else{{'en'}}@endif"
        href="{{str_replace('public/', '', url()->current())}}">
@endsection
@php
    $firstname = explode(' ', trim($agent?->username ?? ''))[0] ?? '';
@endphp
@section('content')
    <section>
        <div class="divBackground">
            <div class="d-flex flex-wrap justify-content-center col-10 mx-auto">
                <div class="col-12 col-md-5 infoagentbackcolor" style="min-height:500px;">
                    <div class="d-flex justify-content-between">
                        <div class="col-6">
                            <p class="text-white h6 fw-bold my-2" style="font-size: 1rem">@lang('site.RE/MAX ALMOHAGER Partners')</p>
                            <h1 class="p namestyle namestyleLarge" style="font-size:41px;">
    {{ app()->getLocale() == 'ar'
        ? ($agent?->username_ar ?? $agent?->username)
        : $agent?->username }}
</h1>
                        </div>
                        <div class="col-1 pt-4">
                            <img style="filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(90deg) brightness(106%) contrast(101%);width:40px" src="https://nileestate.com/assets/site/img/favicon.ico">
                        </div>
                    </div>
                    <hr class="linestyle col-3 mx-0 my-2">
                    <a class="text-decoration-none" href="tel:{{ $agent?->profile?->phone }}">
                        <p class="namestyle namestyleMedium mb-1" style="font-size:16px;font-family:'Noto Sans', 'Noto Sans Arabic'">@lang('site.Mobile') # {{ $agent?->profile?->phone }}</p>
                    </a>
                    @if(!empty($agent?->email))
    <a class="text-decoration-none" href="mailto:{{ $agent?->email }}">
        <p class="namestyle namestyleMedium mb-1" style="font-size:16px;font-family:'Noto Sans', 'Noto Sans Arabic'">
            @lang('site.Email') # {{ $agent?->email }}
        </p>
    </a>
@endif
                    <div style="padding:1px 0 0 0;background-color:#b38375;width:23%;"></div>
                    <p class="namestyle namestyleMedium mb-2" style="font-size:16px;font-family:'Noto Sans', 'Noto Sans Arabic'"><span class="text-white">@lang('site.Experience'):
                        @if(!empty($agent?->profile?->experience_years)) </span>{{ str_replace('Years','',$agent?->profile?->experience_years) }} @lang('site.Years')</p> @endif
                    <div>
                        <p class="h6 text-white">{{ $count }} @lang('site.Properties Closed in'):</p>
                        <p class="mb-2">
                            @foreach ($cities as $city)
                                <a class="text-info {{ $loop->index >= 5 ? 'd-none links' : '' }}"
                                    href="{{ route('site.customSearch', ['address' => $city->name,'location' => 'city,' . $city->id,'agent' => $agent?->id]) }}">
                                    {{ $city->name }}
                                </a>
                                @if ($loop->iteration != $loop->count)
                                    <span class="{{ $loop->index >= 9 ? 'd-none links' : '' }}">{{ '.' }}</span>
                                @endif
                            @endforeach
                            @if (count($cities) > 2)
                                <a href="javascript:void(0);" style="color: #e5a997;font-weight:600;" class="d-block" id="see-more">@lang('site.View More')</a>
                            @endif
                        </p>
                    </div>
                    <p class="namestyleMedium font-weight-bold mb-2">@lang('site.Meet With') {{ $firstname }}
                    </p>
                    <a href="javascript:void(0);" class="btn bg-red text-white" data-bs-toggle="modal"
                        data-bs-target="#exampleModal">@lang('site.Get in touch')</a>
                        <div class="d-flex gap-3 mt-3">

    <a href="{{ $agent?->profile?->linkedin ?? '#' }}" target="_blank">
        <i class="fa-brands fa-linkedin" style="font-size:22px;color:#fff;"></i>
    </a>

    <a href="{{ $agent?->profile?->facebook ?? '#' }}" target="_blank">
        <i class="fa-brands fa-facebook" style="font-size:22px;color:#fff;"></i>
    </a>

    <a href="{{ $agent?->profile?->twitter ?? '#' }}" target="_blank">
        <i class="fa-brands fa-x-twitter" style="font-size:22px;color:#fff;"></i>
    </a>

</div>
                </div>
                <div class="col-12 col-md-5 mx-4 my-3 my-md-0 py-0 px-0 px-md-3">
                    <img class="rounded w-100" style="height:500px;object-fit:cover;object-position: top;"
                        src="{{ $agent?->profile?->full_profile_photo ?? asset('assets/site/image_notfound.jpg') }}"
                        alt="{{ $agent?->username }}">
                </div>
            </div>
        </div>
        <div class="col-9 mx-auto my-4 d-flex flex-wrap justify-content-around align-items-center">
            <div class="col-12 col-md-3 text-center">
                <p class="fontbig fw-bold" style="color: #b38375;font-size:29px;">{{ $agent?->profile?->total_deals }}</p>
                <p class="fontbig3">@lang('site.TOTAL DEALS')</p>
            </div>
            <div style="border-left:1px solid #999;height:50px"></div>
            <div class="col-12 col-md-3 text-center">
                <p class="fontbig fw-bold price-commas" style="color: #b38375;font-size:29px;">&#163;{{ $agent?->profile?->deals_volume }}M</p>
                <p class="fontbig3">@lang('site.DEAL VOLUME')</p>
            </div>
            <div style="border-left:1px solid #999;height:50px"></div>
            <div class="col-12 col-md-3 text-center ">
                <p class="fontbig fw-bold price-commas" style="color: #b38375;font-size:29px;">&#163;{{ $agent?->profile?->hightest_deal }}M</p>
                <p class="fontbig3">@lang('site.HIGHEST DEAL PRICE')</p>
            </div>
        </div>
    </section>
    <section class="col-11 col-lg-10 px-lg-5 my-4 mx-auto">
        <p class="text-dark fontbig2 text-uppercase my-4 fw-bold">@lang('site.About') {{ $firstname }}</p>
        <hr class="linestyle col-1 mx-0">
        <p class="text-dark fontbig3">
            @if (LaravelLocalization::getCurrentLocale() == 'ar') {{$agent?->profile?->brief_bio_ar}} @else {{$agent?->profile?->brief_bio}} @endif
        </p>
        <div class="my-3">
            <div>
                <p class="text-body font-weight-bold fontbig3 mt-4"> @lang('site.By') {{ $agent?->username }} : </p>
            </div>
            <div class="mx-auto my-4 py-4 p-0 d-flex flex-wrap justify-content-around align-items-end">
                <a id="active_listing" class="fw-bold activetab">{{ $agent?->username }} @lang('site.Active_Listing')</a>
                <a id="requests" class="fw-bold notactivetab">{{ $agent?->username }} @lang('site.Requests')</a>
                <a id="rented" class="fw-bold notactivetab">{{ $agent?->username }} @lang('site.Rented')</a>
                <a id="sold" class="fw-bold notactivetab">{{ $agent?->username }} @lang('site.Sold')</a>
            </div>
            <div class="active_listing_content d-none">
                <div class="row">
                    @include('site.template.agents-details-properties-card', ['properties' => $properties])
                    <div id="post-data-properties"></div>
                    <div class="ajax-load"></div>
                    <div class="text-center">
                        <a href="" id="load_more_properties" data-type="properties"
                            class="btn button_see_more_transparent border px-5 py-3">@lang('site.load_more')
                            <i class="mx-3">
                                @if (app()->getLocale() == 'ar')
                                    &#x2196;
                                @else
                                    &#x2197;
                                @endif
                            </i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="requests_content d-none">
                <div class="row">
                    @include('site.template.similarRequest', ['requests' => $requests])
                    <div id="post-data-requests"></div>
                    <div class="ajax-load"></div>
                    <div class="text-center">
                        <a href="" id="load_more_requests" data-type="requests"
                            class="btn button_see_more_transparent border px-5 py-3">@lang('site.load_more')
                            <i class="mx-3">
                                @if (app()->getLocale() == 'ar')
                                    &#x2196;
                                @else
                                    &#x2197;
                                @endif
                            </i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="rented_content d-none">
                <div class="row">
                    @include('site.template.agents-details-properties-card', ['properties' => $rented])
                    <div id="post-data-rented"></div>
                    <div class="ajax-load"></div>
                    <div class="text-center">
                        <a href="" id="load_more_rented" data-type="rented"
                            class="btn button_see_more_transparent border px-5 py-3">@lang('site.load_more')
                            <i class="mx-3">
                                @if (app()->getLocale() == 'ar')
                                    &#x2196;
                                @else
                                    &#x2197;
                                @endif
                            </i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="sold_content d-none">
                <div class="row">
                    @include('site.template.agents-details-properties-card', ['properties' => $sold])
                    <div id="post-data-sold"></div>
                    <div class="ajax-load"></div>
                    <div class="text-center">
                        <a href="" id="load_more_sold" data-type="sold"
                            class="btn button_see_more_transparent border px-5 py-3">@lang('site.load_more')
                            <i class="mx-3">
                                @if (app()->getLocale() == 'ar')
                                    &#x2196;
                                @else
                                    &#x2197;
                                @endif
                            </i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade my-1" id="exampleModal" data-bs-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog my-1" role="document">
                <div class="modal-content p-2">
                    <div class="modal-header p-1">
                        <button type="button" class="close mx-0 bg-transparent border-0" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <h5 class="text-center mx-auto titleColor">{{ __('site.schudle_meeting') }}</h5>
                    <p class="m-0 text-3b3b3b SFRegular15_18">@lang('site.Choose a Prefer time to you')</p>
                    <form action="{{ route('admin.showing.store') }}" class="showingForm text-center" method="POST">
                        @csrf
                        <input type="hidden" id="gtokenSH" name="gToken">
                        <div class="form-group d-flex justify-content-around"
                            @if (LaravelLocalization::getCurrentLocale() == 'ar') dir="ltr" @endif>
                            <div id="request_showing_carousel" class="px-0 col-10 my-1 owl-carousel owl-theme"
                                data-toggle="buttons">
                                @for ($i = 1; $i < 15; $i++)
                                    <div id="{{ $i }}"
                                        class="post1 home_property_title text-707070"
                                        @if (date('d-m-Y', strtotime(old('date'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="background-color:#aaaaaa;" @endif>
                                        <p class="p-0 mb-1" @if (date('d-m-Y', strtotime(old('date'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                            @lang('site.' . date('l', strtotime(today() . '+ ' . $i . ' day')))</p>
                                        <p class="d-inline-block p-0 m-0"
                                            @if (date('d-m-Y', strtotime(old('date'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                            {{ date('d', strtotime(today() . '+ ' . $i . ' day')) }}
                                        </p>
                                        <p class="d-inline-block p-0 m-0"
                                            @if (date('d-m-Y', strtotime(old('date'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                            @lang('site.' . date('M', strtotime(today() . '+ ' . $i . ' day')))</p>
                                    </div>
                                @endfor
                            </div>
                        </div>
                        <input id='date1' name="date" type="text" value="{{ old('date') }}" hidden readonly>
                        <div class="form-group d-flex justify-content-around"
                            @if (LaravelLocalization::getCurrentLocale() == 'ar') dir="ltr" @endif>
                            <div id="request_time_carousel" class="px-0 col-10 my-1 owl-carousel owl-theme"
                                data-toggle="buttons">
                                @for ($j = 10; $j < 14; $j++)
                                    @php
                                        if (!isset($noon3)) {
                                            $noon3 = false;
                                        }
                                        if ($j == 12 && $noon3 == false) {
                                            $noon3 = true;
                                        }
                                    @endphp
                                    @php
                                        if ($j == 11 && $noon3 == true) {
                                            break;
                                        }
                                    @endphp
                                    @php
                                        if ($j == 13) {
                                            $j = 1;
                                        }
                                    @endphp
                                    @if ($noon3 == true)
                                        @php $t = __('site.pm'); @endphp
                                    @else
                                        @php $t = __('site.am'); @endphp
                                    @endif
                                    <div id="{{ $j }}"
                                     class="postTime1 px-4 py-2 border rounded-3 text-707070 home_property_title"
                                        @if (old('time') == $j . ' ' . $t) style="background-color:#aaaaaa;" @endif>
                                        <p class="p-0 m-0" @if (old('time') == $j . ' ' . $t) style="color:#fff;" @endif>
                                            {{ $j . ' ' . $t }}</p>
                                    </div>
                                @endfor
                            </div>
                        </div>
                        <input id='time1' name="time" type="text" value="{{ old('time') }}" hidden readonly>
                        <p class="m-0 text-3b3b3b SFRegular15_18 @if(app()->getLocale() == 'ar') text-end @else text-start @endif">
                            @lang('site.second_date')<small>(@lang('site.optional'))</small></p>
                        <div class="form-group d-flex justify-content-around"
                            @if (LaravelLocalization::getCurrentLocale() == 'ar') dir="ltr" @endif>
                            <div id="request_showing_carousel2" class="px-0 col-10 my-1 owl-carousel owl-theme"
                                data-toggle="buttons">
                                @for ($i = 2; $i < 15; $i++)
                                    <div id="{{ $i }}"
                                        class="post2 rounded-3 border home_property_title p-1 mx-2  text-707070"
                                        @if (date('d-m-Y', strtotime(old('date2'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="background-color:#aaaaaa;" @endif>
                                        <p class="p-0 mb-1" @if (date('d-m-Y', strtotime(old('date2'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                            @lang('site.' . date('l', strtotime(today() . '+ ' . $i . ' day')))</p>
                                        <p class="d-inline-block p-0 m-0"
                                            @if (date('d-m-Y', strtotime(old('date2'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                            {{ date('d', strtotime(today() . '+ ' . $i . ' day')) }}
                                        </p>
                                        <p class="d-inline-block p-0 m-0"
                                            @if (date('d-m-Y', strtotime(old('date2'))) == date('d-m-Y', strtotime(today() . '+ ' . $i . ' day'))) style="color:#fff;" @endif>
                                            @lang('site.' . date('M', strtotime(today() . '+ ' . $i . ' day')))</p>
                                    </div>
                                @endfor
                            </div>
                        </div>
                        <input id='date2' name="date2" type="text" value="{{ old('date2') }}" hidden readonly>
                        <div class="form-group d-flex justify-content-around"
                            @if (LaravelLocalization::getCurrentLocale() == 'ar') dir="ltr" @endif>

                            <div id="request_time_carousel2" class="px-0 col-10 my-1 owl-carousel owl-theme"
                                data-toggle="buttons">
                                @for ($a = 10; $a < 14; $a++)
                                    @php
                                        if (!isset($noon4)) {
                                            $noon4 = false;
                                        }
                                        if ($a == 12 && $noon4 == false) {
                                            $noon4 = true;
                                        }
                                    @endphp
                                    @php
                                        if ($a == 11 && $noon4 == true) {
                                            break;
                                        }
                                    @endphp
                                    @php
                                        if ($a == 13) {
                                            $a = 1;
                                        }
                                    @endphp
                                    @if ($noon4 == true)
                                        @php $c = __('site.pm'); @endphp
                                    @else
                                        @php $c = __('site.am'); @endphp
                                    @endif
                                    <div id="{{ $a }}"
                                     class="postTime2 px-4 py-2 border rounded-3 text-707070 home_property_title"
                                        @if (old('time2') == $a . ' ' . $c) style="background-color:#aaaaaa;" @endif>
                                        <p class="p-0 m-0" @if (old('time2') == $a . ' ' . $c) style="color:#fff;" @endif>
                                            {{ $a . ' ' . $c }}</p>
                                    </div>
                                @endfor
                            </div>
                        </div>
                        <input id='time2' name="time2" type="text" value="{{ old('time2') }}" hidden readonly>
                        <div class="d-flex flex-wrap justify-content-around align-items-center">
                           <div id="first"
     title="@lang('site.inperson_quote')"
     class="postMethod1 border my-1 py-2 px-3 d-flex align-items-center rounded-3 SFBold12_14Bold text-707070"
     @if (old('method') == 'in person')
         style="background-color:#E82C2D; color:#fff !important;"
     @endif>

    <input type="radio"
           name="method"
           value="in person"
           @if (old('method') == 'in person') checked @endif
           style="display:none;">

    <i class="fa-solid fa-user me-2"></i>


    <span>@lang('site.in_person')</span>
</div>

                           <div id="second"
     title="@lang('site.virtual_quote')"
     class="postMethod1 border my-1 py-2 px-3 d-flex align-items-center rounded-3 SFBold12_14Bold text-707070"
     @if (old('method') == 'virtual')
         style="background-color:#E82C2D; color:#fff !important;"
     @endif>

    <input type="radio"
           name="method"
           value="virtual"
           @if (old('method') == 'virtual') checked @endif
           style="display:none;">

    <!-- 🎥 VIRTUAL ICON -->
    <i class="fa-solid fa-phone-volume me-2"></i>

    <span>@lang('site.virtual')</span>
</div>

                        </div>
                        <input class="my-2 col-11 mx-auto form-control" hidden type="text" name="title"
                            value="@lang('site.Premier_Agent') {{ $agent?->username }}">
                        <input class="my-2 col-11 mx-auto form-control" hidden type="text" name="agent_email"
                            value="{{ $agent?->email }}">
                        <input class="my-2 col-11 mx-auto form-control" hidden type="text" name="agent_id"
                            value="{{ $agent?->id }}">
                        <input class="my-2 col-11 mx-auto form-control" hidden type="text" name="property_id"
                            value="Meeting">
                        <input
                            class="my-2 col-11 mx-auto form-control SFBold12_14Light py-2 shadow-none bg-white placeholder text-707070"
                            placeholder="@lang('site.Name')" type="text" name="name" value="{{ old('name') }}">
                        <input
                            class="my-2 col-11 mx-auto form-control SFBold12_14Light py-2 shadow-none bg-white placeholder text-707070"
                            placeholder="@lang('site.Email')" type="text" name="email" value="{{ old('email') }}">
                        <input
                            class="my-2 col-11 mx-auto form-control SFBold12_14Light py-2 shadow-none bg-white placeholder text-707070"
                            placeholder="@lang('site.Mobile')" type="text" name="mobile" value="{{ old('mobile') }}">
                        <div
                            class="d-none form-group col-11 px-0 my-2 mx-auto selectvert SFBold12_14Light py-2 shadow-none bg-white placeholder text-707070">
                            <select class="mx-auto form-control" name="methodType">
                                <option value="" disabled selected>Virtual Method</option>
                                <option value="FaceTime">FaceTime</option>
                                <option value="Google Meet">Google Meet</option>
                                <option value="Zoom">Zoom</option>
                                <option value="WhatsApp">WhatsApp</option>
                            </select>
                        </div>
                        <div class="d-none form-group col-11 px-0 my-2 mx-auto selectvertData">
                        </div>
                        <textarea class="my-2 w-100 rounded-2 px-3 SFBold12_14Light py-2 shadow-none bg-white placeholder text-707070"
                            name="message" id="message" cols="50" rows="1" placeholder="{{ __('site.notes') }}">{{ old('message') }}</textarea>
                        @foreach ($errors->showing->all() as $error)
                            <p class="text-danger">{{ $error }}</p>
                        @endforeach
                        <div class="modal-footer">
                            <a onclick="Captcha('gtokenSH')" class="bg-danger btn btn-danger SFBold14_16 w-100 py-2"
                                style="font-size: 14px;">{{ __('site.submit') }}</a>
                            <button hidden type="submit" id="doSubmitWithCaptchagtokenSH"></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="card border-0 shadow-box my-3 py-3">
            <div class="text-center my-4">
                @if($agent?->id)
                    <a class="btn btn-dark text-center"
                       href="{{ route('site.addReview', $agent->id) }}">
                        @lang('site.add review')
                    </a>
                @endif
            </div>
            <div class="bg-light mx-auto px-0 py-1 d-flex justify-content-around rounded col-12">
                <button id="reviews_tab"
                    class="bg-transparent text-707070 SFBold12_14Bold SFBold15_18-lg py-2 px-1 my-0 mx-2 rounded active_tab">@lang('site.reviews')</button>
                <button id="certificates_tab"
                    class="bg-transparent text-707070 SFBold12_14Bold SFBold15_18-lg py-2 px-1 my-0 mx-2 border-d1d1d1 rounded ">@lang('site.certificates')</button>
                <button id="awards_tab"
                    class="bg-transparent text-707070 SFBold12_14Bold SFBold15_18-lg py-2 px-1 my-0 mx-2 border-d1d1d1 rounded ">@lang('site.awards')</button>
            </div>
            <div class="reviews_form">
                <h3 class="px-4">@lang('site.customer_feedback_index')</h3>
                <div class="px-4">
                    @if(!empty($reviews) && count($reviews) > 0)
                    @php
                            $reviewsArr = $reviews->toArray();
                            $ratings = array_map(function($review) {
                                return $review['rate'];
                            }, $reviewsArr);
                            $ratingCounts = array_count_values($ratings);
                            $sumCount = array_sum($ratingCounts);
                            $maxCount = max($ratingCounts);
                            $allRatings = range(5, 1, -1);
                    @endphp
                    <h6 class="fw-bold px-3">@lang('site.all_reviews') {{ $sumCount }}</h6>
                    @foreach($allRatings as $rating)
                        @php
                            $count = $ratingCounts[$rating] ?? 0;
                            $percentage = $sumCount ? ($count / $sumCount) * 100 : 0;
                        @endphp
                        <div class="bar-container">
                            <span class="barlabel darkBlue">{{ $rating }}</span>
                            <div class="bar-background">
                                <div class="bar" style="width: {{ $percentage }}%;"></div>
                            </div>
                            <span class="barlabel">{{ $count }}</span>
                        </div>
                    @endforeach
                    @endif
                    <h3>@lang('site.reviews')</h3>
                    @if(!empty($reviews))
                        @foreach ($reviews as $key => $review)
                            <div class="review-item justify-content-between my-3" data-index="{{ $key }}">
                                <div class="col-1">
                                    <img class="w-100" width="100" height="100" style="object-fit:cover;" src="{{ $review->image }}" alt="image">
                                </div>
                                <div class="col-11 px-3">
                                    <p>
                                        @for ($i = 1; $i < 6; $i++)
                                            <i class="fa-solid fa-star @if($i <= $review->rate) Gold @endif"></i>
                                        @endfor
                                    </p>
                                    {{-- <p style="font-size:25px;font-weight:bold;">{{ $review->content }}</p> --}}
                                    <p id="review-content-{{ $review->id }}" class="d-inline" style="font-size:25px;font-weight:bold;" data-full-content="{{ $review->content }}" data-truncated-content="{{ Str::limit($review->content, 250) }}">
                                        {{ Str::limit($review->content, 250) }}
                                    </p>
                                    @if (strlen($review->content) > 250)
                                        <button id="toggle-btn-{{ $review->id }}" class="toggle-btn d-inline" style="font-size:16px;background-color: transparent;border: none;color: #006ab3;" data-id="{{ $review->id }}">
                                            @lang('site.see_more')
                                        </button>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                        @if($reviews->count() > 5)
                        <div class="text-center my-4">
                            <button id="loadMore" class="btn btn-primary">Load More</button>
                        </div>
                        @endif
                    @endif
                </div>
            </div>
            <div class="certificates_form d-none">
                <h3 class="px-4">@lang('site.certificates')</h3>
                @if(!empty($certificates))
                <div class="d-flex flex-wrap align-items-center">
                    @foreach ($certificates ?? [] as $certificate)
                        <div class="col-4 px-4 mb-4">
                            <img class="w-100" width="250" height="250" style="object-fit:cover;" src="{{ $certificate->image }}" alt="image">
                            <p class="fw-bold">{{ $certificate->title }}</p>
                        </div>
                    @endforeach
                </div>
                @endif
            </div>
            <div class="awards_form d-none">
                <h3 class="px-4">@lang('site.awards')</h3>
                @if(!empty($awards))
                <div class="d-flex flex-wrap align-items-center">
                    @foreach ($awards ?? [] as $award)
                        <div class="col-4 px-4 mb-4">
                            <img class="w-100" width="250" height="250" style="object-fit:cover;" src="{{ $award->image }}" alt="image">
                            <p class="fw-bold">{{ $award->title }}</p>
                        </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </section>
    <div class="bg-e7e2da py-2">
        <div class="col-10 px-lg-5 my-4 mx-auto">
            <p class="namestyleLarge text-body text-center">@lang('site.list home') <span class="fw-bold">{{ $agent?->username }}</span> @lang('site.for rent on www.nileestate.com for free')</p>
            <div class="text-center">
                <a class="btn btn-primary mx-auto p-2" href="{{ route('site.add-property') }}">@lang('site.Add_Property')</a>
            </div>
          </div>
          <div class="col-10 px-lg-5 my-4 mx-auto">
    <div class="col-lg-6 col-md-12 mx-auto">
        @if ($errors->any())
            <div class="alert alert-danger text-center">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (session()->has('msg'))
            <div class="alert alert-info text-center">
                <ul>
                    <li>{{ session()->get('msg') }}</li>
                </ul>
            </div>
        @endif

        <div class="sidebar mbl">
            <div class="contact-1 contact-agent widget">
                <h5 class="sidebar-title text-center">{{__('site.Send_Massage')}}</h5>
                @include('site.pages.forms.contactAgentForm',['common'=>true,'title'=>'Agent Contact','gtoken'=>'gtokenagent'])
            </div>
        </div>
    </div>
</div>
        </div>
    </div>
    <div class="py-5 px-lg-5 primerBackgroundImage">
        <div class="demBackground col-lg-6 rounded text-white p-3 mx-5">
            <h4>@lang('site.The Pinnacle of Service: RE/MAX ALMOHAGER’s Premier Agents')</h4>
            <p class="text-white text-justify fontbig2">@lang('site.agentPhrase1')</p>
            <p class="text-white text-justify fontbig2">@lang('site.agentPhrase2')</p>
            <p class="text-white text-justify fontbig2">@lang('site.agentPhrase3')</p>
        </div>
    </div>
    <div class="d-none topBarScroll fixed-top px-5 py-2" style="background-color:#3d3935;">
        <div class="d-flex justify-content-between align-items-center w-75 mx-auto">
            <div class="d-flex align-items-center col-lg-5">
                <img class="rounded mx-3" style="object-fit:cover;" width="60" height="60"
                            src="{{ $agent?->profile?->full_profile_photo ?? asset('assets/site/image_notfound.jpg') }}"
                            alt="{{ $agent?->username }}">
                <div class="col-5">
                    <p class="text-white h6 fw-bold my-2" style="font-size: .75rem">@lang('site.RE/MAX ALMOHAGER Partners')</p>
                    <p class="p namestyle namestyleLarge mb-0" style="font-size:20px;">
    {{ app()->getLocale() == 'ar'
        ? ($agent?->username_ar ?? $agent?->username)
        : $agent?->username }}
</p>
                </div>
            </div>
            <div class="d-flex align-items-center col-lg-5">
                <a href="javascript:void(0);" class="btn bg-red text-white" data-bs-toggle="modal"
                        data-bs-target="#exampleModal">@lang('site.Get in touch')</a>
            </div>
        </div>
    </div>
@endsection
@section('script')
<style>


#request_showing_carousel .owl-item,
#request_showing_carousel2 .owl-item {
    padding: 0 4px !important;
}

#request_showing_carousel .post1,
#request_showing_carousel2 .post2 {
    margin: 0 !important;
}


.selectvert {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto 12px auto !important;
}

.selectvert select {
    width: 100% !important;
    height: 48px !important;
    padding: 10px 14px !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    color: #707070 !important;
    background-color: #fff !important;
    font-size: 14px !important;
    display: block !important;
    box-sizing: border-box !important;
}

.selectvertData input {
    width: 100% !important;
    height: 48px !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}


#request_showing_carousel .owl-item,
#request_showing_carousel2 .owl-item {
    padding: 0 6px;
}

.post1,
.post2 {
    width: 86px;
    height: 100px;
    background: #fff;
   border: 1px solid #eeeeee;
    border-radius: 2px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    transition: all .2s ease;
}

.post1 p:nth-child(1),
.post2 p:nth-child(1) {
    font-size: 11px;
    font-weight: 500;
    color: #777;
    margin: 0;
    text-transform: uppercase;
}

.post1 p:nth-child(2),
.post2 p:nth-child(2) {
    font-size: 34px;
    font-weight: 600;
    color: #555;
    line-height: 1;
    margin: 4px 0;
}

.post1 p:nth-child(3),
.post2 p:nth-child(3) {
    font-size: 11px;
    font-weight: 500;
    color: #777;
    margin: 0;
    text-transform: uppercase;
}

.post1.active,
.post2.active {
    border: 3px solid #8a8a8a;
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

.post1:hover,
.post2:hover {
    border-color: #bdbdbd;
}



#request_showing_carousel .post1,
#request_showing_carousel2 .post2 {
    border: 1px solid #ededed !important;
}

#request_showing_carousel .post1.active,
#request_showing_carousel2 .post2.active {
    border: 2px solid #8a8a8a !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28);
}




.postTime1,
.postTime2 {
    width: 86px !important;
    height: 44px !important;

    background: #fff !important;
    border: 1px solid #ededed !important;
    border-radius: 2px !important;

    display: flex !important;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    transition: all .2s ease;
}



.postTime1:hover,
.postTime2:hover {
    border-color: #bdbdbd !important;
}

.postTime1.active,
.postTime2.active {
    border: 4px solid #8a8a8a !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

.postTime1.active p,
.postTime2.active p {
    color: #222 !important;
}





#request_showing_carousel,
#request_showing_carousel2 {
    overflow: hidden;
}

#request_showing_carousel .owl-stage,
#request_showing_carousel2 .owl-stage {
    display: flex;
    flex-wrap: nowrap !important;
}


#request_showing_carousel,
#request_showing_carousel2 {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}


#request_showing_carousel::-webkit-scrollbar,
#request_showing_carousel2::-webkit-scrollbar {
    height: 4px;
}





</style>

    <script>
        $(document).on("scroll", function () {
            const scrollThreshold = 800;
            const element = $(".topBarScroll");

            if ($(window).scrollTop() > scrollThreshold) {
                element.removeClass("d-none");
            } else {
                element.addClass("d-none");
            }
        });
        $(document).ready(function() {
            $('#see-more').on('click', function() {
                $('.links').toggleClass('d-none');
                $(this).text($(this).text() === 'View More' || $(this).text() === 'رؤية المزيد'  ? '{{ __("site.View Less") }}'  : '{{ __("site.View More") }}');
            });
        });
        $(document).ready(function() {
            const urlSearchParams = new URLSearchParams(window.location.search);
            const params = Object.fromEntries(urlSearchParams.entries());
            let value = params.tab;
            if(value) $('[id^=' + value + ']').click();
            if(!value) $('[id^=active_listing]').click();
        });
        $('[id^=active_listing]').on("click", function() {
            $('[id^=rented]').removeClass('activetab');
            $('[id^=rented]').addClass('notactivetab');
            $('[id^=sold]').removeClass('activetab');
            $('[id^=sold]').addClass('notactivetab');
            $('[id^=requests]').removeClass('activetab');
            $('[id^=requests]').addClass('notactivetab');
            $('[id^=active_listing]').addClass('activetab');
            $('[id^=active_listing]').removeClass('notactivetab');
            $('[class^=rented_content]').addClass('d-none');
            $('[class^=sold_content]').addClass('d-none');
            $('[class^=requests_content]').addClass('d-none');
            $('[class^=active_listing_content]').removeClass('d-none');
            changeTabUrl('active_listing');
        });

        $('[id^=rented]').on("click", function() {
            $('[id^=rented]').addClass('activetab');
            $('[id^=rented]').removeClass('notactivetab');
            $('[id^=sold]').removeClass('activetab');
            $('[id^=sold]').addClass('notactivetab');
            $('[id^=requests]').removeClass('activetab');
            $('[id^=requests]').addClass('notactivetab');
            $('[id^=active_listing]').removeClass('activetab');
            $('[id^=active_listing]').addClass('notactivetab');
            $('[class^=rented_content]').removeClass('d-none');
            $('[class^=sold_content]').addClass('d-none');
            $('[class^=active_listing_content]').addClass('d-none');
            $('[class^=requests_content]').addClass('d-none');
            changeTabUrl('rented');
        });
        $('[id^=sold]').on("click", function() {
            $('[id^=rented]').removeClass('activetab');
            $('[id^=rented]').addClass('notactivetab');
            $('[id^=sold]').addClass('activetab');
            $('[id^=sold]').removeClass('notactivetab');
            $('[id^=requests]').removeClass('activetab');
            $('[id^=requests]').addClass('notactivetab');
            $('[id^=active_listing]').removeClass('activetab');
            $('[id^=active_listing]').addClass('notactivetab');
            $('[class^=rented_content]').addClass('d-none');
            $('[class^=sold_content]').removeClass('d-none');
            $('[class^=active_listing_content]').addClass('d-none');
            $('[class^=requests_content]').addClass('d-none');
            changeTabUrl('sold');
        });
        $('[id^=requests]').on("click", function() {
            $('[id^=rented]').removeClass('activetab');
            $('[id^=rented]').addClass('notactivetab');
            $('[id^=sold]').removeClass('activetab');
            $('[id^=sold]').addClass('notactivetab');
            $('[id^=requests]').addClass('activetab');
            $('[id^=requests]').removeClass('notactivetab');
            $('[id^=active_listing]').removeClass('activetab');
            $('[id^=active_listing]').addClass('notactivetab');
            $('[class^=rented_content]').addClass('d-none');
            $('[class^=sold_content]').addClass('d-none');
            $('[class^=requests_content]').removeClass('d-none');
            $('[class^=active_listing_content]').addClass('d-none');
            changeTabUrl('requests');
        });
        function changeTabUrl(t) {
            const url = new URL(window.location.href);

            url.searchParams.set('tab', t);

            if (url.searchParams.has('page')) {
                url.searchParams.set('page', '1');
            }

            // Update the address bar without reloading the whole page.
            window.history.replaceState({}, '', url.toString());
        }
        $(document).ready(function() {
            const reviewsPerPage = 5;
            let currentPage = 1;

            function showReviews(page) {
                const start = (page - 1) * reviewsPerPage;
                const end = page * reviewsPerPage;

                // Hide all reviews initially
                $('.review-item').hide();

                // Show only the reviews for the current page
                $('.review-item').each(function(index) {
                    if (index >= start && index < end) {
                        $(this).addClass('d-flex');
                        $(this).show();
                    }
                });
            }

            // Show the first set of reviews initially
            showReviews(currentPage);

            // Check if the "Load More" button exists
            $('#loadMore').on('click', function() {
                currentPage++;
                showReviews(currentPage);

                // Hide the "Load More" button if no more reviews are available
                if (currentPage * reviewsPerPage >= $('.review-item').length) {
                    $(this).hide();
                }
            });
        });

        $('[id^=reviews_tab]').on("click", function() {
            $('[id^=reviews_tab]').addClass('active_tab');
            $('[id^=certificates_tab]').removeClass('active_tab');
            $('[id^=awards_tab]').removeClass('active_tab');
            $('[id^=reviews_tab]').removeClass('border-d1d1d1');
            $('[id^=certificates_tab]').addClass('border-d1d1d1');
            $('[id^=awards_tab]').addClass('border-d1d1d1');
            $('[class^=reviews_form]').addClass('tab_content');
            $('[class^=reviews_form]').removeClass('d-none');
            $('[class^=certificates_form]').removeClass('tab_content');
            $('[class^=certificates_form]').addClass('d-none');
            $('[class^=awards_form]').removeClass('tab_content');
            $('[class^=awards_form]').addClass('d-none');
        });
        $('[id^=certificates_tab]').on("click", function() {
            $('[id^=awards_tab]').removeClass('active_tab');
            $('[id^=certificates_tab]').addClass('active_tab');
            $('[id^=reviews_tab]').removeClass('active_tab');
            $('[id^=awards_tab]').addClass('border-d1d1d1');
            $('[id^=certificates_tab]').removeClass('border-d1d1d1');
            $('[id^=reviews_tab]').addClass('border-d1d1d1');
            $('[class^=awards_form]').removeClass('tab_content');
            $('[class^=awards_form]').addClass('d-none');
            $('[class^=certificates_form]').addClass('tab_content');
            $('[class^=certificates_form]').removeClass('d-none');
            $('[class^=reviews_form]').removeClass('tab_content');
            $('[class^=reviews_form]').addClass('d-none');
        });
        $('[id^=awards_tab]').on("click", function() {
            $('[id^=awards_tab]').addClass('active_tab');
            $('[id^=reviews_tab]').removeClass('active_tab');
            $('[id^=certificates_tab]').removeClass('active_tab');
            $('[id^=awards_tab]').removeClass('border-d1d1d1');
            $('[id^=reviews_tab]').addClass('border-d1d1d1');
            $('[id^=certificates_tab]').addClass('border-d1d1d1');
            $('[class^=awards_form]').addClass('tab_content');
            $('[class^=awards_form]').removeClass('d-none');
            $('[class^=reviews_form]').removeClass('tab_content');
            $('[class^=reviews_form]').addClass('d-none');
            $('[class^=certificates_form]').removeClass('tab_content');
            $('[class^=certificates_form]').addClass('d-none');
        });
        function loadMore(page, type) {
            const url = new URL(window.location.href);
            url.searchParams.set('page', page);
            url.searchParams.set('type', type);

            $.ajax({
                    url: url.toString(),
                    type: 'get',
                    beforeSend: function() {
                        $('.ajax-load').show();
                    }
                })
                .done(function(data) {
                    if (data.html == "") {
                        $('.ajax-load').html('<p class="text-center text-red">@lang('site.no_more_records')</p>');
                        return
                    } else {
                        console.log(data.html);
                        $('.ajax-load').hide();
                        $('#post-data-'+type).append(data.html);
                    }
                })
                .fail(function(jqXHR, ajaxOptions, thrownError) {
                    alert('@lang('site.something_went_wrong')');
                })
        }
        var page = 1;
        $('[id^=load_more]').click(function(e) {
            e.preventDefault();
            page++;
            loadMore(page,$(this).attr('data-type'));
        })
        for (let i = 0; i < 8; i++) {
            $('#right' + (i + 1)).on("click", function() {
                $('.owl-next').eq(i).click();
            });
            $('#left' + (i + 1)).on("click", function() {
                $('.owl-prev').eq(i).click();
            });
        }
        for (let o = 1; o < 3; o++) {
            $('.post' + o).on("click", function(e) {
                let x = $(".post" + o).map(function() {
                    return this;
                }).get();
                x.forEach(e => {
                    e.style = "background-color:#fff;";
                    let ch = e.children;
                    $.each(ch, (index, c) => {
                        c.style.color = "#707070";
                    });
                });
                let int = $(this).attr('id');
                const divelement = this.children;
               $('.post' + o).removeClass('active');
$(this).addClass('active');

                const date = new Date();
                const wd = new Date()
                wd.setDate(date.getDate() + parseInt(int))
                let day = wd.getDate();
                let month = wd.getMonth() + 1;
                let year = wd.getFullYear();
                let Dt = `${day}-${month}-${year}`;
                $('#date' + o).val(Dt);
            });
        }
        for (let p = 1; p < 3; p++) {
            $('.postTime' + p).on("click", function(e) {
                e.preventDefault();

                $('.postTime' + p).removeClass('active');
                $(this).addClass('active');

                $('#time' + p).val($.trim($(this).text()));
            });
        }
        for (let u = 1; u < 2; u++) {
            $('.postMethod' + u).on("click", function(e) {
                let x = $(".postMethod" + u).map(function() {
                    return this;
                }).get();
                x.forEach(e => {
                    e.style = "background-color:#fff;color:#37404d;";
                });
                this.style = "background-color:#d85252;color:#fff !important;";
                let h = $(this).attr('id');
                $('#' + h + ' input:radio').prop('checked', true);

                if ($('#' + h + ' input:radio').val() == 'virtual') {
                    $('.selectvert').removeClass('d-none');
                    $('.selectvertData').removeClass('d-none');
                } else {
                    $('.selectvert').addClass('d-none');
                    $('.selectvertData').addClass('d-none');
                }
            });
        }
        $('[name="methodType"]').on('change', function() {
            console.log($('.selectvertData'));
            if ($(this).val() == 'FaceTime') $('.selectvertData').html(
                `<input class="my-2 col-12 mx-auto form-control" placeholder="Mobile number or Apple ID" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`
            );
            if ($(this).val() == 'Google Meet') $('.selectvertData').html(
                `<input class="my-2 col-12 mx-auto form-control" placeholder="Google Meet Mobile number" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`
            );
            if ($(this).val() == 'Skype') $('.selectvertData').html(
                `<input class="my-2 col-12 mx-auto form-control" placeholder="Skype ID" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`
            );
            if ($(this).val() == 'Zoom') $('.selectvertData').html(
                `<input class="my-2 col-12 mx-auto form-control" placeholder="Email" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`
            );
            if ($(this).val() == 'WhatsApp') $('.selectvertData').html(
                `<input class="my-2 col-12 mx-auto form-control" placeholder="WhatsApp number" type="text" name="methodTypeData" value="{{ old('methodTypeData') }}">`
            );
        });
   const isRTL = $('html').attr('dir') === 'rtl';

$(".owl-carousel").owlCarousel({
    nav: true,
    dots: false,
    autoWidth: true,
    loop: false,
    margin: 3,
    rtl: isRTL,
});




        $(document).ready(function () {
            $('.toggle-btn').on('click', function () {
                const reviewId = $(this).data('id');
                const contentElement = $(`#review-content-${reviewId}`);
                const fullContent = contentElement.data('full-content');
                const truncatedContent = contentElement.data('truncated-content');
                if ($.trim($(this).text()) === "{{ __('site.see_more') }}") {
                    contentElement.text(fullContent);
                    $(this).text("{{ __('site.see_less') }}");
                } else {
                    contentElement.text(truncatedContent);
                    $(this).text("{{ __('site.see_more') }}");
                }
            });
        });
    </script>
@endsection