@extends('site.layouts.master')

@section('seoTags')
    @seoTags()
@endsection
@php
    $seoRow = App\SeoPages::where('path', url()->current())->first();
@endphp
@section('metatags')
    @if (!empty($seoRow))
        <meta name="description" content="{{ $seoRow->description ?? '' }}">
    @endif
    <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())}}">
@endsection
@if (empty($seoRow->title))
    @section('title')
        <title>@lang('site.Exclusive')</title>
    @endsection
@endif
@section('content')
    <div class="customWidth mt-lg-3">
        <div id="main" class="d-lg-flex justify-content-around">
            <div class="col-12 col-lg-9">
                <div class="d-none d-lg-block banner my-3">
                    <img loading="lazy" class="w-100" src="{{ asset('new_theme/Mask Group 17.webp') }}" alt="exclusive banner">
                </div>
                <div>
                    <p class="SFBlack22_26">@lang('site.ADVANTAGES OF EXCLUSIVE CONTRACTING WITH RE/MAX ALMOHAGER')</p>
                    <p class="SF16_19Regular text-707070" style="line-height: 25px !important">@lang('site.exclusive_quote')</p>
                </div>
                <div class="d-lg-none custBorder rounded-4 my-4">
                    <div class="rounded-2 bg-3b3b3b px-2 py-4">
                        <div class="d-flex justify-content-center align-items-start">
                            <img loading="lazy" class="px-3" src="{{ asset('new_theme/logo-balloon.svg') }}" alt=" logo">
                            <p class="SFBlack26_31 text-white px-3">
                                @lang('site.RE/MAX ALMOHAGER Exclusive Package')
                            </p>
                        </div>
                        <a href="#Subscribe"
                            class="bg-red text-white d-block text-center text-decoration-none rounded-3 text-uppercase SF16_19Bold py-3">@lang('site.Subscribe')</a>
                    </div>
                </div>
                <div class="d-lg-none bg-red rounded-3 p-3">
                    <div class="d-flex justify-content-between align-items-end">
                        <p class="col-6 SFBlack26_31 text-white">
                            @lang('site.Properties_for_Exclusive')
                        </p>
                        <p class="col-4 SF18_21Regular text-white">
                            {{ $properties->total() }} @lang('site.properties')
                        </p>
                    </div>
                    <select class="w-100 px-1 py-3 rounded-2 bg-transparent border-d1d1d1 text-white" id="sort-select"
                        name="location">
                        <option value="" selected disabled>@lang('site.sort_by')</option>
                        <option class="price" style="color:#3b3b3b"
                            {{ request('sort_by') == 'price' && request('sort') == 'asc' ? 'selected' : '' }} value="asc">
                            {{ __('site.Price Low to High') }}</option>
                        <option class="price" style="color:#3b3b3b"
                            {{ request('sort_by') == 'price' && request('sort') == 'desc' ? 'selected' : '' }} value="desc">
                            {{ __('site.Price High to Low') }}</option>
                        <option class="date" style="color:#3b3b3b"
                            {{ request('sort_by') == 'date' && request('sort') == 'asc' ? 'selected' : '' }} value="asc">
                            {{ __('site.Date Old to New') }}</option>
                        <option class="date" style="color:#3b3b3b"
                            {{ request('sort_by') == 'date' && request('sort') == 'desc' ? 'selected' : '' }} value="desc">
                            {{ __('site.Date New to Old') }}</option>
                    </select>
                </div>
                <div class="d-none d-lg-flex justify-content-lg-between align-items-lg-center bg-red rounded-3 p-3">
                    <h1 class="col-5 SFBlack40_48-lg text-white">
                        @lang('site.Properties_for_Exclusive')
                    </h1>
                    <div class="col-3 text-end">
                        <p class="SF18_21Regular text-white">
                            {{ $properties->total() }} @lang('site.properties')
                        </p>
                        <select class="w-100 px-1 py-3 rounded-2 bg-transparent border-d1d1d1 text-white" id="sort-select2"
                            name="location">
                            <option value="" selected disabled>@lang('site.sort_by')</option>
                            <option class="price" style="color:#3b3b3b"
                                {{ request('sort_by') == 'price' && request('sort') == 'asc' ? 'selected' : '' }} value="asc">
                                {{ __('site.Price Low to High') }}</option>
                            <option class="price" style="color:#3b3b3b"
                                {{ request('sort_by') == 'price' && request('sort') == 'desc' ? 'selected' : '' }} value="desc">
                                {{ __('site.Price High to Low') }}</option>
                            <option class="date" style="color:#3b3b3b"
                                {{ request('sort_by') == 'date' && request('sort') == 'asc' ? 'selected' : '' }} value="asc">
                                {{ __('site.Date Old to New') }}</option>
                            <option class="date" style="color:#3b3b3b"
                                {{ request('sort_by') == 'date' && request('sort') == 'desc' ? 'selected' : '' }} value="desc">
                                {{ __('site.Date New to Old') }}</option>
                        </select>
                    </div>
                </div>
                <div id="scrollContainer" class="d-lg-flex flex-wrap justify-content-lg-between">
                    @foreach ($properties as $property)
                        @php
                            $property->property_for == 'Rent' ? ($price = $property->options->per_month) : ($price = $property->options->sale_price);
                            $property->property_for == 'Rent' ? ($currency = $property->options->rent_currency) : ($currency = $property->options->sale_currency);
                            $mon = '';
                            if ($property->property_for == 'Rent') {
                                $mon = '/month';
                            }
                            if ($property->property_for == 'Rent') {
                                $property_for = 'Rent';
                            } else {
                                $property_for = 'Sale';
                            }
                        @endphp
                            @include('site.template.property-index-horizontal', [
                                'property' => $property,
                                'agent' => $property->request_owner->agent,
                            ])
                    @endforeach
                    <div id="post-data" class="d-block d-lg-flex flex-wrap justify-content-lg-between"></div>
                    <div class="text-center">
                        <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 class="line mt-4"></div>
            </div>
            <div id="fixedBanner" class="d-none d-lg-block col-lg-3 px-lg-4 text-lg-center">
                <div class="d-none d-lg-block custBorder rounded-4 my-4 mt-lg-3">
                    <div class="rounded-2 bg-3b3b3b px-2 py-4 text-lg-center">
                        <div class="d-flex d-lg-block justify-content-center align-items-start">
                            <img loading="lazy" class="px-3 px-lg-0 w-75" src="{{ asset('new_theme/logo-balloon.svg') }}" alt=" logo">
                            <p class="SF32_38Black text-white px-3 mt-lg-3">
                                @lang('site.RE/MAX ALMOHAGER Exclusive Package')
                            </p>
                        </div>
                        <a href="#Subscribe"
                            class="bg-red text-white d-block text-center text-decoration-none rounded-3 text-uppercase SF16_19Bold py-3">@lang('site.Subscribe')</a>
                    </div>
                </div>
            </div>
        </div>
        <div id="scrollContainerEnd" class="py-4">
            @if ($seoRow != null)
                @php
                    if (LaravelLocalization::getCurrentLocale() == 'ar') {
                        $content = $seoRow->content_ar;
                    } else {
                        $content = $seoRow->content;
                    }
                @endphp
                @if (isset($content))
                    <div id="seeDIV" class="card shadow-box my-3 px-2 py-3 changeLink mx-3 text-justify">
                        {!! $content !!}
                    </div>
                    {{-- <div class="text-center my-4">
                        <a href="" id="see"><small>{{__('site.see_more')}}</small></a>
                    </div> --}}
                @endif
            @endif
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(".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);
                }
            });
        });
        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;
                };
            });
        });
        $('[id^="sort-select"]').change(function() {
            var selectedValue = $(this).children('option:selected');
    console.log(selectedValue);
            var optionClass = selectedValue.attr('class');
            switch (optionClass) {
                case 'price':
                    applySortFilter('price', selectedValue.val());
                    break;
                case 'date':
                    applySortFilter('date', selectedValue.val());
                    break;
            }
        });

        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);
                        $(".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("."));
                        });
                        $('.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);
                            }
                        })
                        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;
                            };
                        });
                    }
                })
                .fail(function(jqXHR, ajaxOptions, thrownError) {
                    alert('@lang('site.something_went_wrong')');
                })
        }
        var page = 1;
        $('#load_more').click(function(e) {
            e.preventDefault();
            page++;
            loadMore(page);
        })
        $(window).scroll(function() {
            $('#fixedBanner').addClass('position-fixed top-0 @if(app()->getLocale() == "ar") start-0 @else end-0 @endif');
            var scrollPosition = $(this).scrollTop();
            var bannerHeight = $('#fixedBanner').outerHeight(); // Adjust this value based on your banner's height
            var scrollThreshold = $('#scrollContainerEnd').offset().top;; // Adjust this value based on where you want the class to be applied
            var scrollContainer = $('#scrollContainer').offset().top;
            if (scrollPosition > scrollContainer && scrollPosition < (scrollThreshold - bannerHeight + 100)) {
                $('#fixedBanner').addClass('position-fixed top-0 @if(app()->getLocale() == "ar") start-0 @else end-0 @endif');
                $('#main').removeClass('d-lg-flex');
                $('#main').addClass('d-block');
            } else {
                $('#fixedBanner').removeClass('position-fixed top-0 @if(app()->getLocale() == "ar") start-0 @else end-0 @endif');
                $('#main').addClass('d-lg-flex');
                $('#main').removeClass('d-block');
            }
        });
    </script>
    @include('site.layouts.js.applySort')
@endsection