@extends('layouts.app')
@section('contentSection')
    @include('inc.banners', [
        'title' => 'Find Your Dream Home',
        'sub_title' => 'Dubai • Abu Dhabi • Sharjah • Ajman',
    ])

    <section id="property-city" class="property-city pb60">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div style="margin-bottom:0" class="main-title text-center">
                        <h3>Buy • Rent • Sell</h3>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="theme-title p-2">
                        <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>

    <section class="real-estate-section">
        <div class="row m-0">
            <div class="col-md-6 text-container">
                <h3>Interested in Selling your home?</h3>
                <p>Partner with Lux Realty to buy or sell your property and secure the highest possible return on your investment.</p>
                <div class="d-flex">
                    <a href="/contact-us" class="contact-btn w-auto">CONTACT US</a>
                </div>
            </div>
            <div class="col-md-6 image-container p-0">
                <img class="img-fluid w100" src="{{ asset('assets/images/home/interested.webp') }}" alt="Buy and Rent Property in Dubai | Lux Realty LLC">
            </div>
        </div>
    </section>

    <section class="property-city pb60">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div style="margin-bottom:0" class="main-title text-center">
                        <h3>Featured Property</h3>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="theme-title">
                        <h3 style="color: #ffffff;">Featured 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('is_featured', 1)
                                                ->where('city_id', $city->id)
                                                ->paginate(3);
                                        @endphp
                                        <div class="row home-feature-box justify-content-center"
                                            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 class="property-city pb60" style="background-color: #D19C15;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div style="margin-bottom:0" class="main-title text-center">
                        <h3 class="text-white">Explore States</h3>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="theme-title-inverse">
                        <h3 style="font-size: 30px;" >Find out more about the Real Estate market in UAE</h3>
                    </div>

                </div>
            </div>
        </div>
        <br><br>
        <div class="cities-main-container">
            @foreach (App\Models\Attribute::whereType('city')->where('is_featured', 1)->get() as $key => $city)
                <div class="cities-child1 {{ $key % 2 != 0 ? 'mt50' : '' }}">
                    <div class="cities-child2">
                        <div class="cities-child3">
                            <div class="cities-child4">
                                <div class="cities-child5"
                                    style="background-image: url({{ $city->getThumbImagePublicUrlAttribute() }});">
                                    <a href="/search-results?city={{ $city->slug }}"
                                        class="grid-item-link hover-effect-flat">
                                        <div class="grid-item-text-wrap">
                                            <div class="grid-item-subtitle">{{ count($city->city_listings) }} Properties
                                            </div>
                                            <div class="grid-item-title">{{ $city->name }}</div>
                                            <div class="grid-item-text-link">More Details</div>
                                            <div class="grid-item-icon">
                                                <i class="fa fa-angle-right"></i>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="property-city pb60">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div style="margin-bottom:0" class="main-title text-center">
                        <h2>Property for Sale in Dubai</h2>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="theme-title">
                        <h3 style="color: #ffffff; font-size: 30px;">Property for sale </h3>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="feature_property_slider_sale">
                        @foreach (App\Models\Attribute::whereSlug('dubai')->first()->sale_listings as $listing)
                            <div class="item">
                                <div data-listing-id="{{ $listing->p_id }}"
                                    data-listing-img="{{ $listing->getThumbImagePublicUrlAttribute() }}"
                                    data-listing-price="{{ $listing->price }}"
                                    data-listing-title="{{ $listing->title }}"
                                    class="feat_property feat_property_cus home7 style4">
                                    <div class="thumb">
                                        <img class="low-opacity img-whp view-property image-fix-box"
                                            src="{{ $listing->getThumbImagePublicUrlAttribute() }}"
                                            alt="{{ $listing->title }}">
                                        <div class="thmb_cntnt style2">
                                            @if ($listing->is_featured == 1)
                                                <ul class="tag mb0">
                                                    <li class="list-inline-item">Featured</li>
                                                </ul>
                                            @endif
                                        </div>
                                        <div class="thmb_cntnt style3">
                                            @if ($listing->price)
                                                <a class="fp_price">AED
                                                    {{ number_format($listing->price) }}
                                                    @if ($listing->purpose && $listing->purpose->id == 37 && $listing->rent_frequency)
                                                        / {{ $listing->rent_frequency->name }}
                                                    @endif
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="details">
                                        <div class="tc_content view-property">
                                            @if ($listing->property_type)
                                                <p class="text-thm">{{ $listing->property_type->name }}</p>
                                            @endif
                                            <h4>{{ $listing->title }}</h4>
                                            @if ($listing->getHK())
                                                <p><span class="flaticon-placeholder"></span>
                                                    {{ $listing->getHK() }}
                                                </p>
                                            @endif
                                        </div>
                                        <div class="fp_footer">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <a data-url="{{ env('APP_URL') . '/property/' . $listing->p_id }}"
                                                        class="property-email-btn btn btn-block theme-btn"><i
                                                            class="fa fa-envelope-o"></i>
                                                        Email</a>
                                                </div>
                                                <div class="col-md-6">
                                                    <a href="https://wa.me/+971503879245?text=Hello, I am interested in {{ env('APP_URL') . '/property/' . $listing->p_id }}"
                                                        target="_blank" class="btn btn-block theme-btn"><i
                                                            class="fa fa-whatsapp"></i>
                                                        Whatsapp</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="our-testimonials" style="background-color: #000000;">
        <div class="container ovh">
            <div class="row">
                <div class="col-lg-6 offset-lg-3">
                    <div class="main-title text-center">
                        <h3 class="text-white">Testimonials</h3><br>
                        <h3 class="theme-color">Insights From Our Valued Clients</h3>
                        </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="testimonial_slider_home9">
                        @foreach (App\Models\Testimonial::whereStatus(1)->get() as $testi)
                            <div class="item">
                                <div class="testimonial_post">
                                    <div class="details">
                                        <div class="icon text-thm"><span class="fa fa-quote-left"></span></div>
                                        <p>
                                            {{ $testi->message }}
                                        </p>
                                    </div>
                                    <div class="thumb">
                                        <img src="{{ $testi->getThumbImagePublicUrlAttribute() }}"
                                            alt="{{ $testi->title }}">
                                        <h4 class="title">{{ $testi->title }} <br><small
                                                class="text-thm">{{ $testi->designation }}</small>
                                        </h4>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section 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;">Blogs</h3>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="feature_property_slider_sale">
                        @foreach (App\Models\Post::whereStatus(1)->latest()->take(10)->get() as $post)
                            <div class="item">
                                <div class="feat_property">
                                    <div class="thumb">
                                        <a href="/post/{{ $post->slug }}"><img class="img-whp"
                                                src="{{ $post->getThumbImagePublicUrlAttribute() }}"
                                                alt="{{ $post->title }}"></a>
                                    </div>
                                    <div class="details">
                                        <div class="tc_content">
                                            <p class="text-thm">{{ $post->category ? $post->category->title : '' }}</p>
                                            <a href="/post/{{ $post->slug }}">
                                                <h4>{{ $post->title }}</h4>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="sign_up_modal modal fade bd-example-modal-lg property-email-modal" tabindex="-1" role="dialog"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body container pb20">
                    <div class="row">
                        <div class="col-lg-12">
                            <form class="contact_form" action="/contact-inquiry" method="post">
                                @csrf
                                <input type="hidden" name="page_ref" id="pageRef">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input required maxlength="30" name="contact_name" class="form-control"
                                                type="text" placeholder="Name">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input onkeypress="return onlyNumberKey(event)" maxlength="20"
                                                name="contact_phone" class="form-control required phone" required
                                                type="phone" placeholder="Phone">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input maxlength="30" name="contact_email"
                                                class="form-control required email" required type="email"
                                                placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <select required name="contact_type" class="form-control">
                                                <option value="Tenant">I'm a Tenant</option>
                                                <option value="Agent">I'm an Agent</option>
                                                <option value="Investor">I'm an Investor</option>
                                                <option value="Buyer">I'm a Buyer</option>
                                                <option value="Seller">I'm a Seller</option>
                                                <option value="Other">Other</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-group mb0">
                                            <button type="submit" class="btn btn-lg theme-btn-inverse btn-block">Send
                                                Message</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('pageSpecificScripts')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script src="{{ asset('assets/js/search.js') }}?{{ app_version() }} "></script>
    <script src="{{ asset('assets/js/sweetalert.min.js') }}"></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,
                    featured: 1,
                    page: page
                },
                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();
                        }
                    }
                },
                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>
    <script type="text/javascript">
        $('body').on('click', '.property-email-btn', function() {
            let url = $(this).attr('data-url');
            $('#pageRef').val(url);
            $('.property-email-modal').modal('show');
        })
    </script>
    @if (Session::has('cerrors'))
        <script type="text/javascript">
            swal({
                html: "true",
                title: "",
                text: "<ul style='text-align: left;list-style: disc;margin-left: 15px;'>@foreach (Session::get('cerrors') as $error) <li>{{ $error }}</li> @endforeach</ul>",
                type: "error"
            });
        </script>
    @endif
    @if (Session::has('csuccess'))
        <script type="text/javascript">
            swal({
                title: "",
                text: 'Message sent successfully.',
                type: "success"
            });
        </script>
    @endif
@endsection