@extends('site.layouts.master')

@section('seoTags')
  @seoTags()
@endsection

@php
$seo = SEO\Models\Page::where('path',URL::full())->first();
@endphp

@section('title')
<title>@lang('site.Our_Agents')</title>
@endsection

@section('metatags')
<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

@section('content')

<style>
.top-agents-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.top-agent-card {
    width: 420px;
    max-width: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.top-agent-img-wrap {
    position: relative;
    width: 100%;
    height: 230px;
    background: #eee;
    overflow: hidden;
}

.top-agent-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.top-agent-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #a96f61;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 14px;
    text-transform: uppercase;
}

html[dir="rtl"] .top-agent-badge {
    left: auto;
    right: 10px;
}

.top-agent-body {
    padding: 16px;
    text-align: left;
}

html[dir="rtl"] .top-agent-body {
    text-align: right;
}

.top-agent-name {
    font-size: 20px;
    font-weight: 800;
    color: #000;
    margin-bottom: 4px;
}

.top-agent-title {
    font-size: 16px;
    color: #111;
    margin-bottom: 10px;
}

.top-agent-stats {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 10px;
    text-align: center;
}

.top-agent-stat {
    flex: 1;
    text-align: center;
}

.top-agent-stat strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #111;
    margin-bottom: 2px;
}

.top-agent-stat span {
    display: block;
    font-size: 12px;
    color: #555;
}

.top-agent-actions {
    display: flex;
    gap: 10px;
}

.top-agent-contact {
    flex: 1;
    display: block;
    height: 42px;
    line-height: 40px;
    text-align: center;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

.top-agent-call {
    border: 1px solid #111;
    color: #000;
}

.top-agent-call:hover {
    background: #000;
    color: #fff;
}

.top-agent-whatsapp {
    background: #25D366;
    color: #fff;
}

.top-agent-whatsapp:hover {
    opacity: 0.9;
    color: #fff;
}

@media (max-width: 991px) {
    .top-agent-card {
        width: 100%;
    }

    .top-agent-img-wrap {
        height: 220px;
    }
}
</style>
<div class="d-none">
    {{ Breadcrumbs::render('Agents') }}
</div>

{!! $breadcrumbSchema !!}

<div class="agentsBackground p-3 pt-lg-5">
    <div class="d-flex justify-content-between justify-content-lg-center align-items-center">
        <div class="col-3 col-lg-2 mx-lg-2">
            <img class="imageWidth" src="{{ asset('assets/site/img/brands/logo-balloon.svg') }}" alt="logo-balloon">
        </div>
        <div class="col-8 col-lg-5 mx-lg-2">
            <p class="SF14_26Medium SF22_30Medium-lg text-white mb-0">@lang('site.weare')</p>
            <h1 class="SF30_34Black SF70_90Black-lg text-white">@lang('site.REMAX') <sup>&reg;</sup></h1>
            <p class="SF14_26Medium SF22_30Medium-lg text-white">@lang('site.A Business That Builds Businesses')</p>
        </div>
    </div>
</div>

<div class="bg-f9f9f9 py-4">
    <div class="customWidth mx-auto">

        <p class="SF22_30Bold SF40_50Bold-lg text-red">@lang('site.agent_marketing')</p>
        <p class="SF18_25Regular SF28_34Regular-lg text-3b3b3b">@lang('site.agent_marketing_content')</p>
        <p class="SF18_21Medium SF22_30Medium-lg text-9b9b9b">- @lang('site.agent_marketing_content2')</p>
        <p class="SF18_21Medium SF22_30Medium-lg text-9b9b9b">- @lang('site.agent_marketing_content3')</p>
        <p class="SF18_21Medium SF22_30Medium-lg text-9b9b9b">- @lang('site.agent_marketing_content4')</p>
        <p class="SF18_21Medium SF22_30Medium-lg text-9b9b9b">- @lang('site.agent_marketing_content5')</p>
        <p class="SF18_21Medium SF22_30Medium-lg text-9b9b9b">- @lang('site.agent_marketing_content6')</p>
        <p class="SF18_21Medium SF22_30Medium-lg text-9b9b9b">- @lang('site.agent_marketing_content7')</p>
        <p class="SF18_21Medium SF22_30Medium-lg text-9b9b9b">- @lang('site.agent_marketing_content8')</p>
        <p class="SF18_21Medium SF22_30Medium-lg text-9b9b9b">- @lang('site.agent_marketing_content9')</p>
        <p class="SF18_21Medium SF22_30Medium-lg text-9b9b9b">- @lang('site.agent_marketing_content10')</p>
        <p class="SF18_21Medium SF22_30Medium-lg text-9b9b9b">- @lang('site.agent_marketing_content11')</p>
        <p class="SF18_21Medium SF22_30Medium-lg text-9b9b9b">- @lang('site.agent_marketing_content12')</p>
        <p class="SF18_25Bold SF22_35Bold-lg text-blue my-4">@lang('site.agent_marketing_content13')</p>

        <div class="d-lg-flex justify-content-lg-between">
            @if (isset($monthStar))
                @php
                    $monthStarSlug = trim(preg_replace('/[^a-z0-9]+/i', '-', strtolower($monthStar->username)), '-');
                @endphp
                <div class="bg-3b3b3b rounded-3 p-4 text-center my-3 w-48 d-flex flex-column align-items-center">
                    <p class="text-white SF22_50Medium SF32_50Medium-lg">@lang('site.Our_Month_Star')</p>
                    <img loading="lazy" class="d-block rounded-3 maxWidth" src="{{ $monthStar->profile->full_profile_photo }}" alt="{{ $monthStar->username }}">
                    <a class="d-block text-white SF24_29Bold SF36_43Bold-lg text-decoration-none my-3" href="{{ route('site.agent-details', $monthStarSlug) }}">{{ $monthStar->username }}</a>
<p class="text-white SF18_21Regular my-3">
    @php
        $title = $monthStar->profile->title ?? 'Property Consultant';

        if(app()->getLocale() == 'ar') {

            $titles = [
                'Super Admin' => 'المدير العام',
                'Senior Property Consultant' => 'مستشار عقاري أول',
                'Broker Owner' => 'مالك ومدير الوساطة',
                'Property Consultant' => 'مستشار عقاري',
                'Luxury Expert' => 'خبير العقارات الفاخرة',
                'Sales Manager' => 'مدير المبيعات',
                'Team Leader' => 'قائد الفريق',
                'Marketing Specialist' => 'أخصائي تسويق عقاري',
            ];

            $title = $titles[$title] ?? $title;
        }
    @endphp

    {{ $title }}
</p>                    <div class="d-flex justify-content-between align-items-center col-8 col-lg-5 mx-auto">
                        <a class="text-decoration-none col-3 text-center" href="{{ $monthStar->profile->linkedin_url }}"><i class="fa-brands fa-2x fa-linkedin text-white"></i></a>
                        <a class="text-decoration-none col-3 text-center" href="{{ $monthStar->profile->facebook_url }}"><i class="fa-brands fa-2x fa-square-facebook text-white"></i></a>
                        <a class="text-decoration-none col-3 text-center" href="{{ $monthStar->profile->twitter_url }}"><i class="fa-brands fa-2x fa-square-x-twitter text-white"></i></a>
                    </div>
                </div>
            @endif

            @if (isset($quarterStar))
                @php
                    $quarterStarSlug = trim(preg_replace('/[^a-z0-9]+/i', '-', strtolower($quarterStar->username)), '-');
                @endphp
                <div class="bg-3b3b3b rounded-3 p-4 text-center my-3 w-48 d-flex flex-column align-items-center">
<p class="text-white SF22_50Medium SF32_50Medium-lg">
    {{ app()->getLocale() == 'ar' ? 'أفضل خبير عقاري خلال الربع سنة الماضية' : __('site.Our_Quarter_Star') }}
</p>                    <img loading="lazy" class="d-block rounded-3 maxWidth" src="{{ $quarterStar->profile->full_profile_photo }}" alt="{{ $quarterStar->username }}">
                    <a class="d-block text-white SF24_29Bold SF36_43Bold-lg text-decoration-none my-3" href="{{ route('site.agent-details', $quarterStarSlug) }}">{{ $quarterStar->username }}</a>
<p class="text-white SF18_21Regular my-3">
    @php
        $title = $quarterStar->profile->title ?? 'Property Consultant';

        if(app()->getLocale() == 'ar') {

            $titles = [
                'Super Admin' => 'المدير العام',
                'Senior Property Consultant' => 'مستشار عقاري أول',
                'Broker Owner' => 'مالك ومدير الوساطة',
                'Property Consultant' => 'مستشار عقاري',
                'Luxury Expert' => 'خبير العقارات الفاخرة',
                'Sales Manager' => 'مدير المبيعات',
                'Team Leader' => 'قائد الفريق',
                'Marketing Specialist' => 'أخصائي تسويق عقاري',
            ];

            $title = $titles[$title] ?? $title;
        }
    @endphp

    {{ $title }}
</p>                    <div class="d-flex justify-content-between align-items-center col-8 col-lg-5 mx-auto">
                        <a class="text-decoration-none col-3 text-center" href="{{ $quarterStar->profile->linkedin_url }}"><i class="fa-brands fa-2x fa-linkedin text-white"></i></a>
                        <a class="text-decoration-none col-3 text-center" href="{{ $quarterStar->profile->facebook_url }}"><i class="fa-brands fa-2x fa-square-facebook text-white"></i></a>
                        <a class="text-decoration-none col-3 text-center" href="{{ $quarterStar->profile->twitter_url }}"><i class="fa-brands fa-2x fa-square-x-twitter text-white"></i></a>
                    </div>
                </div>
            @endif
        </div>

        <p class="SF22_50Bold SF40_50Bold-lg text-3b3b3b my-4 text-center">@lang('site.Top Agents')</p>

        <div class="top-agents-grid">
            @foreach ($agents as $agent)
                @php
                    $agentSlug = trim(preg_replace('/[^a-z0-9]+/i', '-', strtolower($agent->username)), '-');
                @endphp

                <div class="top-agent-card">

                    <a href="{{ route('site.agent-details', $agentSlug) }}">
                        <div class="top-agent-img-wrap">
                            <span class="top-agent-badge">Luxury Expert</span>
                            <img loading="lazy"
                                 class="top-agent-img"
                                 src="{{ $agent->profile->full_profile_photo ?? asset('new_theme/image_notfound.webp') }}"
                                 alt="{{ app()->getLocale() == 'ar' ? ($agent->username_ar ?? $agent->username) : $agent->username }}">
                        </div>
                    </a>

                    <div class="top-agent-body">
                        <p class="top-agent-name">{{ app()->getLocale() == 'ar' ? ($agent->username_ar ?? $agent->username) : $agent->username }}</p>

                        <p class="top-agent-title">
    @php
        $title = $agent->profile->title ?? 'Property Consultant';

        if(app()->getLocale() == 'ar') {

            $titles = [
                'Super Admin' => 'المدير العام',
                'Senior Property Consultant' => 'مستشار عقاري أول',
                'Property Consultant' => 'مستشار عقاري',
                'Luxury Expert' => 'خبير العقارات الفاخرة',
                'Sales Manager' => 'مدير المبيعات',
                'Team Leader' => 'قائد الفريق',
                'Marketing Specialist' => 'أخصائي تسويق عقاري',
            ];

            $title = $titles[$title] ?? $title;
        }
    @endphp

    {{ $title }}
</p>

                        @if(!empty($agent->profile->hightest_deal) || !empty($agent->profile->deals_volume) || !empty($agent->profile->total_deals))
                            <div class="top-agent-stats">

                                @if(!empty($agent->profile->hightest_deal))
                                    <div class="top-agent-stat">
                                        <strong>&#163;{{ $agent->profile->hightest_deal }}M</strong>
                                        <span>@lang('site.Avg-price')</span>
                                    </div>
                                @endif

                                @if(!empty($agent->profile->deals_volume))
                                    <div class="top-agent-stat">
                                        <strong>&#163;{{ $agent->profile->deals_volume }}M</strong>
                                        <span>@lang('site.salesvolume')</span>
                                    </div>
                                @endif

                                @if(!empty($agent->profile->total_deals))
                                    <div class="top-agent-stat">
                                        <strong>{{ $agent->profile->total_deals }}</strong>
                                        <span>@lang('site.deals')</span>
                                    </div>
                                @endif

                            </div>
                        @endif

                        <div class="top-agent-actions">
                            <a href="tel:{{ $agent->profile->phone }}" class="top-agent-contact top-agent-call">
                                Call
                            </a>

                            <a href="https://api.whatsapp.com/send?phone=+2{{ $agent->profile->phone }}" class="top-agent-contact top-agent-whatsapp">
                                WhatsApp
                            </a>
                        </div>
                    </div>

                </div>
            @endforeach
        </div>

        <p class="SF22_50Bold SF40_50Bold-lg text-3b3b3b my-4 text-center">@lang('site.REMAX ElMOHAGER Members')</p>

        @include('site.template.agents-index-card')

        <div id="post-data"></div>
        <div class="ajax-load"></div>

        <div class="text-center my-5">
            <a href="" id="load_more" 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>
@endsection

@section('script')
<script>
    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('<p class="text-center text-red">@lang('site.no_more_records')</p>');
                return
            } else {
                console.log(data.html);
                $('.ajax-load').hide();
                $('#post-data').append(data.html);
            }
        })
        .fail(function(jqXHR, ajaxOptions, thrownError) {
            alert('@lang('site.something_went_wrong')');
        })
    }

    var page = 1;

    $('#load_more').click(function(e) {
        e.preventDefault();
        page++;
        loadMore(page);
    })
</script>
@endsection