@extends('layouts.app')
@section('contentSection')
    @include('inc.purpose-banners', [
        'purpose' => 'Buy',
        'pt' => 'Commercial',
        'title' => 'Commercial Property For Sale',
        'sub_title' =>
            'Our real estate company has exclusive commercial for buy listings that are perfect for international clients.',
    ])
    <section class="property-city pb0">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="theme-title">
                        <h3 style="color: #ffffff; font-size: 30px;">Commercial Property for Sale</h3>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="shop_single_tab_content style2 mt30">
                        <ul class="nav nav-tabs prop-nav-home" id="myTab" role="tablist">
                            @foreach (App\Models\Attribute::whereType('city')->get() as $key => $city)
                                <li class="nav-item">
                                    <a class="nav-link {{ $key == 0 ? 'active' : '' }}" id="{{ $city->slug }}-tab"
                                        data-toggle="tab" href="#{{ $city->slug }}-content" role="tab"
                                        aria-controls="{{ $city->slug }}-content"
                                        aria-selected="true">{{ $city->name }}</a>
                                </li>
                            @endforeach
                        </ul>
                        <div class="tab-content" id="myTabContent2">
                            @foreach (App\Models\Attribute::whereType('city')->get() as $key => $city)
                                <div class="tab-pane {{ $key == 0 ? 'fade show active' : '' }}"
                                    id="{{ $city->slug }}-content" role="tabpanel"
                                    aria-labelledby="{{ $city->slug }}-tab">
                                    <div class="container-fluid">
                                        @php
                                            $listings = \App\Models\Listing::where('status', 1)
                                                ->where('purpose_id', 36)
                                                ->where('property_type_title', 'Commercial')
                                                ->where('city_id', $city->id)
                                                ->paginate(3);
                                        @endphp
                                        <div class="row" id="listing-container-{{ $city->id }}">
                                            @if (count($listings) > 0)
                                                @include('inc.listings', ['listings' => $listings])
                                            @else
                                                <div class="col-md-12 text-center">
                                                    <div class="alert alert-danger">
                                                        <h4 class="m0 text-center">No Properties Found.</h4>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        @if ($listings->hasMorePages())
                                            <div class="text-center mt-3">
                                                <button class="btn theme-btn load-more-btn" data-city="{{ $city->id }}"
                                                    data-page="2">
                                                    Load More
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
   <section id="property-city" class="property-city pb60">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="theme-title">
                        <h3 style="color: #ffffff; font-size: 30px;">Your trusted partner for Buying, Renting, and Selling Real Estate</h3>
                    </div>
                    <p class="text-center" style="font-size: 21px;">Navigating the property buying process is easier with the right support. We connect discerning buyers with top-tier agents for a seamless experience.</p>
                </div>
            </div><br><br>
            <div class="row">
                <div class="col-md-4">
                    <div class="properti_city">
                        <div class="thumb"><img class="img-fluid theme-border w100"
                                src="{{ asset('assets/images/home/service1.webp') }}" alt="Buy and Rent Property in Dubai | Lux Realty LLC">
                        </div><br>
                        <h3 class="theme-color text-center">Qualified Agents</h3>
                        <p class="text-center" style="font-size:18px">Our team of experienced agents is committed to delivering a personalized service tailored to your needs. With in-depth market knowledge, we make selling or renting your property a smooth and straightforward process. You can count on us to guide you every step of the way and help you achieve the best possible outcome.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="properti_city">
                        <div class="thumb"><img class="img-fluid theme-border w100"
                                src="{{ asset('assets/images/home/service2.webp') }}" alt="Buy and Rent Property in Dubai | Lux Realty LLC">
                        </div><br>
                        <h3 class="theme-color text-center">Excellent service</h3>
                        <p class="text-center" style="font-size:18px">
                            We are committed to delivering a tailored experience, offering you a personalised plan along with a dedicated point of contact to support you throughout your Sales or Rental journey. Our specialist departments provide comprehensive services, including Financing, Tax Planning, Insurance, Legal Advice, and more.
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="properti_city">
                        <div class="thumb"><img class="img-fluid theme-border w100"
                                src="{{ asset('assets/images/home/service3.webp') }}" alt="Buy and Rent Property in Dubai | Lux Realty LLC">
                        </div><br>
                        <h3 class="theme-color text-center">Customer Care</h3>
                        <p class="text-center" style="font-size:18px">
                            At Lux Realty, exceptional customer care is the cornerstone of our business.
We are committed to placing our clients’ needs first, ensuring a seamless and satisfying experience at every stage. Our dedication to service excellence means you can trust us to act in your best interests and consistently deliver results that exceed expectations.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('pageSpecificScripts')
    <script src="{{ asset('assets/js/search.js') }}?{{ app_version() }} "></script>
    <script>
        $(document).on('click', '.load-more-btn', function() {
            var button = $(this);
            var cityId = button.data('city');
            var page = button.data('page');

            $.ajax({
                url: "{{ route('load-more-listings') }}",
                type: "GET",
                data: {
                    city_id: cityId,
                    page: page,
                    purpose_id: 36,
                    property_type: 'Commercial',
                },
                beforeSend: function() {
                    button.text('Loading...');
                    button.addClass('section-disabled');
                },
                success: function(response) {
                    if ($.trim(response)) { // Ensure response is not empty
                        $('#listing-container-' + cityId).append(response.html); // Append new listings
                        button.data('page', page + 1); // Increment page number
                        button.text('Load More');
                        button.removeClass('section-disabled');
                        if (!response.hasMore) {
                            button.hide();
                        }
                        $(".tab-pane.active .fp_single_item_slider").each(function() {
                            $(this).owlCarousel({
                                loop: false,
                                margin: 15,
                                dots: false,
                                nav: true,
                                rtl: false,
                                autoplayHoverPause: false,
                                autoplay: false,
                                smartSpeed: 2000,
                                singleItem: true,
                                navText: [
                                    '<i class="flaticon-left-arrow-1"></i>',
                                    '<i class="flaticon-right-arrow"></i>'
                                ],
                                responsive: {
                                    320: {
                                        items: 1,
                                        center: false
                                    },
                                    480: {
                                        items: 1,
                                        center: false
                                    },
                                    600: {
                                        items: 1,
                                        center: false
                                    },
                                    768: {
                                        items: 1
                                    },
                                    992: {
                                        items: 1
                                    },
                                    1200: {
                                        items: 1
                                    }
                                }
                            })
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText); // Log the error
                    button.text('Load More');
                    button.removeClass('section-disabled');
                    alert('Something went wrong. Please try again.');
                }
            });
        });
    </script>
@endsection