@extends('site.layouts.master')

@section('seoTags')
    @seoTags()
@endsection
@section('title')
    <title>
        @lang('site.Premier')
    </title>
@endsection
    @php
        $seo = SEO\Models\Page::where('path',URL::full())->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
@section('content')
    <div class="premierBackground d-flex justify-content-center align-items-center">
        <div class="customWidth">
            <h1 class="SF22_30Bold SF40_50Bold-lg text-white">@lang('site.primeHead')</h1>
            <p class="time_font SF22_26Regular-lg text-white">@lang('site.primeHeadContent')</p>
        </div>
    </div>
    <div class="bg-f9f9f9 py-3">
        <div class="customWidth">
            <h2 class="SF26_31Bold SF40_48Bold-lg text-3b3b3b my-2">@lang('site.Elite-Agents')</h2>
            <p class="time_text SF20_24Regular-lg text-9b9b9b">@lang('site.Elite-Agents-contant')</p>
            <div class="swiper swiper-container w-100 my-3" style="height:620px;">
                <div class="swiper-wrapper">
                    @foreach ($agents as $agent)
                        <div class="swiper-slide">
                            <div class="shadow-sm bg-white my-3 rounded-3 p-3">
                                <a href="{{ route('site.premier-agent', $agent->id) }}"><img loading="lazy"
                                        class="rounded-3 agentImageMAxHeight w-100 mx-auto objectFit"
                                        src="{{ $agent->profile->full_profile_photo ?? asset('new_theme/image_notfound.webp') }}"
                                        alt="{{ $agent->username }}"></a>
                                <div>
                                    <p class="SF19_23Bold SF22_26Bold-lg text-3b3b3b mt-2 mb-2">{{ $agent->username }}</p>
                                    <p class="time_text SF14_16Regular-lg text-3b3b3b col-8">
                                        {{ $agent->profile->title ?? __('site.agent') }}</p>
                                    <p class="text-9b9b9b SF10_12Regular SF16_19Regular-lg">@lang('site.lastyear'):</p>
                                    <div class="d-flex px-1 justify-content-between align-items-center">
                                        <div class="bg-efefef rounded p-2 col-3">
                                            <p class="SF20_24Bold-Important mb-1">
                                                {{ $agent->profile->total_deals ?? rand(10, 30) }}
                                            </p>
                                            <small class="SF14_24Regular">@lang('site.deals')</small>
                                        </div>
                                        <div class="bg-efefef rounded py-2 px-1 col-4">
                                            <p class="SF20_24Bold-Important mb-1">
                                                &#163;{{ $agent->profile->deals_volume ?? rand(100, 120) }}M</p>
                                            <small class="SF14_24Regular">@lang('site.salesvolume')</small>
                                        </div>
                                        <div class="bg-efefef rounded p-2 col-4">
                                            <p class="SF20_24Bold-Important mb-1">
                                                &#163;{{ $agent->profile->hightest_deal ?? rand(10, 20) }}M</p>
                                            <small class="SF14_24Regular">@lang('site.Avg-price')</small>
                                        </div>
                                    </div>
                                    <p class="text-9b9b9b SF10_12Regular SF16_19Regular-lg my-3">@lang('site.textorcall'):</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="col-6 px-1">
                                            <a href="tel:{{ $agent->profile->phone }}"
                                                class="w-100 py-3 btn bg-blue SFBold14_16 text-white"><i
                                                    class="fa-solid fa-phone-volume"></i> {{ $agent->profile->phone }}</a>
                                        </div>
                                        <div class="col-6 px-1">
                                            <a href="{{ route('site.premier-agent', $agent->id) }}"
                                                class="w-100 py-3 SF12_14BoldImportant text-white btn bg-707070">
                                                @lang('site.viewprofile')
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="d-none d-lg-block swiper-button-next"></div>
                <div class="d-none d-lg-block swiper-button-prev"></div>
            </div>
            <div class="swiper swiper-container2 w-100" style="height:660px;">
                <div class="swiper-wrapper">
                    @foreach ($sold as $solo)
                        <div class="swiper-slide">
                            <div class="bg-3b3b3b py-4 px-3 my-3 d-lg-flex justify-content-lg-between align-items-lg-center">
                                <div class="col-lg-6">
                                    <span class="rounded bg-red time_text SF18_21Regular-lg px-3 py-2 text-white move_down_premier">
                                        {{ __('site.sold') . ' ' . date('d/m/Y', strtotime($solo->sold_date)) }}
                                    </span>
                                    <div class="">
                                        <img loading="lazy"
                                            src="{{ $solo->images()->first()->full_url ?? asset('new_theme/image_notfound.webp') }}"
                                            alt="Department" class="col-12 imghight">
                                    </div>
                                </div>
                                <div class="col-lg-6 px-lg-3">
                                    <p class="text-white SF18_21Medium my-3">@lang('site.soldhomes')</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        @if ($solo->request_owner)
                                            <a class="text-decoration-none col-3"
                                                href="{{ route('site.premier-agent', $solo->request_owner->agent->id) }}">
                                                <img loading="lazy"
                                                    src="{{ $solo->request_owner->agent->profile->full_profile_photo }}"
                                                    alt="agent pic" class="rounded-3 w-100 objectFit">
                                            </a>
                                            <div class="col-9 px-2">
                                                <a class="text-decoration-none mb-2"
                                                    href="{{ route('site.premier-agent', $solo->request_owner->agent->id) }}">
                                                    <p class="SF22_26Bold SF36_43Bold-lg text-white mb-0">
                                                        {{ $solo->request_owner->agent->username }}</p>
                                                </a>
                                                <p class="SF18_21Regular text-white">@lang('site.agent')</p>
                                            </div>
                                        @endif
                                    </div>
                                    <p class="text-white SF22_26Regular my-3">{{ $solo->location->compound->name }}
                                        @if ($solo->location->compound->name)
                                            ,
                                        @endif
                                        {{ $solo->location->city->name ?? $solo->location->governorate->name }}
                                    </p>
                                    <p class="SF22_26Bold price-commas text-white">
                                        {{ $solo->site_price }} {{ $solo->site_currency }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="d-none d-lg-block swiper-button-next"></div>
                <div class="d-none d-lg-block swiper-button-prev"></div>
            </div>
            <div class="my-3 bg-white p-3 d-lg-flex justify-content-lg-between align-items-lg-center">
                <p
                    class="text-blue SF22_26Bold SF28_48Bold-lg mb-0 @if (app()->getlocale() == 'ar') border-lg-left @else border-lg-right @endif">
                    @lang('site.readytosell')
                </p>
                <div class="line my-3 border-red d-lg-none"></div>
                <p
                    class="text-3b3b3b SF18_30Regular SF22_35Regular-lg mb-0 @if (app()->getlocale() == 'ar') me-lg-3 @else ms-lg-3 @endif">
                    @lang('site.readytosellcontent')
                </p>
            </div>
            <div class="d-lg-flex justify-content-lg-between align-items-lg-center my-lg-3">
                <div class="col-lg-5">
                    <img loading="lazy" class="rounded-3 w-100 prepare_home_content" src="{{ asset('new_theme/dining.webp') }}"
                        alt="3d">
                    <img loading="lazy" class="rounded-3 w-100 stun_image_content d-none" src="{{ asset('new_theme/aerial.webp') }}"
                        alt="3d">
                    <img loading="lazy" class="rounded-3 w-100 3d_walk_content d-none" src="{{ asset('new_theme/3d.webp') }}"
                        alt="3d">
                </div>
                <div class="col-lg-7 px-lg-3">
                    <div class="owl-carousel my-3">
                        <p role="button" id="prepare_home" class="text-decoration-none p-2 my-2 rounded-3 activetab">
                            @lang('site.HOME_PREPARATION')</p>
                        <p role="button" id="stun_image" class="text-decoration-none p-2 my-2 rounded-3 notactivetab">
                            @lang('site.STUNNING_IMAGERY')</p>
                        <p role="button" id="3d_walk" class="text-decoration-none p-2 my-2 rounded-3 notactivetab">
                            @lang('site.3D_WALKTHROUGHS')</p>
                    </div>
                    <div class="my-3 prepare_home_content">
                        <p class="text-blue SF22_26Bold SF28_48Bold-lg mb-2">@lang('site.maxsale')</p>
                        <p class="text-9b9b9b SF18_35Regular SF22_35Regular-lg">@lang('site.maxsalecontent')</p>
                    </div>
                    <div class="my-3 stun_image_content d-none">
                        <p class="text-9b9b9b SF18_35Regular SF22_35Regular-lg">@lang('site.stuntext')</p>
                    </div>
                    <div class="my-3 3d_walk_content d-none">
                        <p class="text-9b9b9b SF18_35Regular SF22_35Regular-lg">@lang('site.3dtext')</p>
                    </div>
                </div>
            </div>
            <div>
                <p class="text-3b3b3b SF18_25Bold SF22_26Bold-lg col-lg-5 text-uppercase">@lang('site.scheduleconsultation')</p>
                <form action="{{ route('site.askforconsultation') }}" method="POST">
                    @csrf
                    <div class="d-lg-flex justify-content-lg-between">
                        <div class="w-48">
                            <div class="form-group my-2 mb-lg-3">
                                <label for="name" class="SF20_30Bold text-3b3b3b">@lang('site.Name'):</label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}"
                                    class="form-control evaluatePlaceholder py-lg-3" placeholder="@lang('site.Enter your name here')">
                                @error('name')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group my-2 mb-lg-3">
                                <label for="email" class="SF20_30Bold text-3b3b3b">@lang('site.Email_Address'):</label>
                                <input type="email" name="email" id="email" value="{{ old('email') }}"
                                    class="form-control evaluatePlaceholder py-lg-3" placeholder="@lang('site.Enter email address here')">
                                @error('email')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group my-2 mb-lg-3">
                                <label for="phone" class="SF20_30Bold text-3b3b3b">@lang('site.Phone_Number'):</label>
                                <input type="text" name="phone" id="phone" value="{{ old('phone') }}"
                                    class="form-control evaluatePlaceholder py-lg-3" placeholder="@lang('site.Enter phone number here')">
                                @error('phone')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="w-48">
                            <div class="form-group my-2 mb-lg-4">
                                <label for="location" class="SF20_30Bold text-3b3b3b">@lang('site.Location'):</label>
                                <textarea class="form-control evaluatePlaceholder" name="location" rows="7"
                                    autocomplete="off" placeholder="{{ __('site.talkaboutarea') }}"
                                    value="{{ old('location') }}"></textarea>
                                @error('location')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group my-3">
                                <button class="btn bg-red SF18_21Bold text-white py-3 col-12"
                                    type="submit">{{ __('site.Send') }}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="line"></div>
@endsection
@section('script')
    <script>
        var swiper = new Swiper('.swiper-container', {
            spaceBetween: 10,
            slidesPerView: 1,
            freeMode: true,
            direction: 'vertical', // Set vertical direction by default
            thumbs: {
                swiper: swiper,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                // Switch to horizontal layout on desktop screens
                990: {
                    direction: 'horizontal',
                    spaceBetween: 10,
                    slidesPerView: 3,
                },
                1300: {
                    direction: 'horizontal',
                    spaceBetween: 10,
                    slidesPerView: 4,
                }
            }
        });

        var mydir = $("html").attr("dir");

        // Determine if RTL
        var isRtl = mydir === 'rtl';

        // Swiper options
        var swiperOptions = {
            spaceBetween: 30,
            slidesPerView: 1.2,
            autoWidth: true,
            freeMode: true,
            initialSlide: 0,
            centeredSlides: true,
            direction: isRtl ? 'horizontal' : 'vertical', // Adjust direction based on RTL
            rtl: isRtl,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                990: {
                    direction: 'horizontal', // Horizontal on larger screens
                    spaceBetween: 70,
                    slidesPerView: 1.2,
                }
            }
        };

        // Initialize Swiper
        var swiper2 = new Swiper('.swiper-container2', swiperOptions);

        $(document).ready(function() {
            $('[id^=prepare_home]').click();
        });
        $('[id^=prepare_home]').on("click", function() {
            $('[id^=stun_image]').removeClass('activetab');
            $('[id^=stun_image]').addClass('notactivetab');
            $('[id^=3d_walk]').removeClass('activetab');
            $('[id^=3d_walk]').addClass('notactivetab');
            $('[id^=prepare_home]').addClass('activetab');
            $('[id^=prepare_home]').removeClass('notactivetab');
            $('.stun_image_content').addClass('d-none');
            $('.3d_walk_content').addClass('d-none');
            $('.prepare_home_content').removeClass('d-none');
        });
        $('[id^=stun_image]').on("click", function() {
            $('[id^=stun_image]').removeClass('notactivetab');
            $('[id^=stun_image]').addClass('activetab');
            $('[id^=3d_walk]').removeClass('activetab');
            $('[id^=3d_walk]').addClass('notactivetab');
            $('[id^=prepare_home]').addClass('notactivetab');
            $('[id^=prepare_home]').removeClass('activetab');
            $('.stun_image_content').removeClass('d-none');
            $('.3d_walk_content').addClass('d-none');
            $('.prepare_home_content').addClass('d-none');
        });
        $('[id^=3d_walk]').on("click", function() {
            $('[id^=stun_image]').removeClass('activetab');
            $('[id^=stun_image]').addClass('notactivetab');
            $('[id^=3d_walk]').removeClass('notactivetab');
            $('[id^=3d_walk]').addClass('activetab');
            $('[id^=prepare_home]').addClass('notactivetab');
            $('[id^=prepare_home]').removeClass('activetab');
            $('.stun_image_content').addClass('d-none');
            $('.3d_walk_content').removeClass('d-none');
            $('.prepare_home_content').addClass('d-none');
        });
        $(".owl-carousel").owlCarousel({
            autoWidth: true,
            margin: 10,
        });
    </script>
@endsection