@extends('layouts.app')
@section('contentSection')
    <section id="desktop-header-search" class="advanced-search advanced-search-nav " data-hidden="0" data-sticky="0">
        <div class="container cusatom-container">
            <form class="houzez-search-form-js advanced-search-from" method="get" autocomplete="off"
                  action="/offplan-search-results">
                <input id="products-search-sort" type="hidden" name="sort" value="{{ request()->get('sort') }}">
                <input type="hidden" id="location_ref" name="location_ref" value="{{ request()->get('location_ref') }}">
                <div class="advanced-search-v1 ">
                    <div class="d-flex flex-column flex-md-row">
                        <div class="flex-search flex-grow-1">
                            <div class="form-group">
                                <select data-live-search="true" class="form-control selectpicker" name="location"
                                        id="userlocation">
                                    @if (request()->location)
                                        <option>{{ request()->location }}</option>
                                    @else
                                        <option value="">Location</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="flex-search fields-width">
                            <div class="form-group">
                                <input maxlength="10" onkeypress="return onlyNumberKey(event)" name="min_area"
                                       type="text" class="form-control"
                                       value="{{ request()->has('min_area') ? request()->input('min_area') : '' }}"
                                       placeholder="Min. Area">
                            </div>
                        </div>
                        <div class="flex-search fields-width">
                            <div class="form-group">
                                <input maxlength="10" onkeypress="return onlyNumberKey(event)" name="max_area"
                                       type="text" class="form-control"
                                       value="{{ request()->has('max_area') ? request()->input('max_area') : '' }}"
                                       placeholder="Max. Area">
                            </div>
                        </div>
                        <div class="flex-search fields-width">
                            <div class="form-group">
                                <input maxlength="10" onkeypress="return onlyNumberKey(event)" name="min_price"
                                       type="text" class="form-control"
                                       value="{{ request()->has('min_price') ? request()->input('min_price') : '' }}"
                                       placeholder="Min. Price">
                            </div>
                        </div>
                        <div class="flex-search fields-width">
                            <div class="form-group">
                                <input maxlength="10" onkeypress="return onlyNumberKey(event)" name="max_price"
                                       type="text" class="form-control"
                                       value="{{ request()->has('max_price') ? request()->input('max_price') : '' }}"
                                       placeholder="Max. Price">
                            </div>
                        </div>
                        <div class="flex-search btn-no-right-padding">
                            <button type="submit" class="btn btn-block form-control theme-btn-inverse ">Search</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <section class="our-listing pb30-991 pt10">
        <div class="container cusatom-container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="breadcrumb_content style2 mb0-991">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a class="theme-color" href="/">Home</a></li>
                            <li class="breadcrumb-item active text-blank" aria-current="page">Search Results
                            </li>
                        </ol>
                        <h2 class="breadcrumb_title">Search Results</h2>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="listing_list_style mb20-xsd tal-991">
                        <ul class="mb0">
                            <li class="list-inline-item"><a style="display: block" id="showList"
                                                            class="cursor-pointer"><span
                                        class="fa fa-th-list"></span></a></li>
                            <li class="list-inline-item"><a style="display: block" id="showGrid"
                                                            class="cursor-pointer"><span class="fa fa-th-large"></span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-lg-8">
                    <div class="row">
                        <div class="grid_list_search_result">
                            <div class="col-sm-12 col-md-4 col-lg-4 col-xl-5">
                                <div class="left_area tac-xsd">
                                    <p class="font-weight-bold">{{ number_format($pros->total()) }} Results Found</p>
                                </div>
                            </div>
                            @if ($pros->total() > 0)
                                <div class="col-sm-12 col-md-8 col-lg-8 col-xl-7">
                                    <div class="right_area text-right tac-xsd">
                                        <ul>
                                            <li class="list-inline-item"><span class="shrtby">Sort by:</span>
                                                <select name="sort" class="selectpicker show-tick sortProducts">
                                                    <option
                                                        {{ request()->has('sort') && request()->input('sort') == 5 ? 'selected' : '' }}
                                                        value="5">Date - New to Old
                                                    </option>
                                                    <option
                                                        {{ request()->has('sort') && request()->input('sort') == 4 ? 'selected' : '' }}
                                                        value="4">Date - Old to New
                                                    </option>
                                                    <option
                                                        {{ request()->has('sort') && request()->input('sort') == 1 ? 'selected' : '' }}
                                                        value="1">Price - Low to High
                                                    </option>
                                                    <option
                                                        {{ request()->has('sort') && request()->input('sort') == 2 ? 'selected' : '' }}
                                                        value="2">Price - High to Low
                                                    </option>
                                                    <option
                                                        {{ request()->has('sort') && request()->input('sort') == 3 ? 'selected' : '' }}
                                                        value="3">Featured Listings First
                                                    </option>
                                                    <option
                                                        {{ request()->has('sort') && request()->input('sort') == 6 ? 'selected' : '' }}
                                                        value="6">Title - ASC
                                                    </option>
                                                    <option
                                                        {{ request()->has('sort') && request()->input('sort') == 7 ? 'selected' : '' }}
                                                        value="7">Title - DESC
                                                    </option>
                                                </select>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div id="listV" class="row">
                        @foreach ($pros as $listing)
                            <div class="col-lg-12 new-search-result offplan-search">
                                <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 list">
                                    <div class="thumb m-0 w-100">
                                        <img class="img-whp view-property"
                                             src="{{ $listing->getThumbImagePublicUrlAttribute() }}"
                                             alt="{{ $listing->title }}">
                                        <div class="dtls_headr feature-tag">
                                            <ul class="tag">
                                                @if ($listing->is_featured == 1)
                                                    <li class="list-inline-item">Featured</li>
                                                @endif
                                                @if ($listing->sale_status)
                                                    <li class="list-inline-item">{{ $listing->sale_status->name }}
                                                    </li>
                                                @endif
                                                @if ($listing->cheque)
                                                    <li class="list-inline-item">{{$listing->cheque->name}}</li>
                                                @endif
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="details w-100 view-property">
                                        <div class="view-property-inner">
                                            <div class="d-flex flex-column justify-content-between">
                                                <h4 class="font-weight-bold">{!! $listing->title !!}</h4>
                                                @if ($listing->getHK())
                                                    <p><span class="flaticon-placeholder"></span>
                                                        {{ $listing->getHK() }}
                                                    </p>
                                                @endif
                                            </div>
                                            <div class="d-flex flex-column align-itemsm-md-end justify-content-between">
                                                @if ($listing->area)
                                                    <p class="fp_price"><span
                                                            class="font-weight-bold">Area (sqft):</span>
                                                        {{ number_format($listing->area) }}{{ $listing->max_area ? '-' . number_format($listing->max_area) : '' }}
                                                    </p>
                                                @endif
                                                <div class="">
                                                    <div class="dtls_headr d-flex justify-content-sm-end">
                                                        @if ($listing->price)
                                                            <a class="fp_price float-right ">
                                                                Starting From<br>
                                                                AED
                                                                {{ number_format($listing->price) }}
                                                                @if ($listing->purpose && $listing->purpose->id == 37 && $listing->rent_frequency)
                                                                    / {{ $listing->rent_frequency->name }}
                                                                @endif
                                                            </a>
                                                        @endif
                                                    </div>
                                                    <div class="fp_footer p-0">
                                                        <div class="fp_pdate float-right">
                                                            <a
                                                                class="btn theme-btn-inverse cursor-pointer text-white font-weight-bold">Details</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div style="display: none;" id="gridV" class="row">
                        @foreach ($pros as $listing)
                            <div class="col-md-6 col-lg-6">
                                <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"
                                             src="{{ $listing->getThumbImagePublicUrlAttribute() }}"
                                             alt="{{ $listing->title }}">
                                        <div class="thmb_cntnt style2">
                                            <ul class="tag mb0">
                                                @if ($listing->is_featured == 1)
                                                    <li class="list-inline-item">Featured</li>
                                                @endif
                                                @if ($listing->sale_status)
                                                    <li class="list-inline-item">{{ $listing->sale_status->name }}
                                                    </li>
                                                @endif
                                                @if ($listing->cheque)
                                                    <li class="list-inline-item">{{ $listing->cheque->name }}
                                                    </li>
                                                @endif
                                            </ul>
                                        </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 view-property">
                                        <div class="tc_content">
                                            <h4>{!! $listing->title !!}</h4>
                                            @if ($listing->getHK())
                                                <p><span class="flaticon-placeholder"></span>
                                                    {{ $listing->getHK() }}
                                                </p>
                                            @endif
                                        </div>
                                        <div class="fp_footer">
                                            <div class="fp_pdate float-right">
                                                <a class="btn theme-btn-inverse cursor-pointer text-white">Details</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @if ($pros->hasMorePages())
                        <div class="col-lg-12 mt20">
                            <div class="text-center mt-3">
                                <button class="btn theme-btn load-more-btn"
                                        data-page="2">
                                    Load More
                                </button>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="col-lg-4 col-xl-4">
                    <div class="sidebar_listing_grid1 dn-991">
                        <div class="sidebar_feature_listing">
                            <h4 class="title">Recently Viewed</h4>
                            <div id="recentlyViewedContainer"></div>
                        </div>
                        <div class="terms_condition_widget">
                            <h4 class="title">Featured Properties</h4>
                            <div class="sidebar_feature_property_slider">
                                @foreach (App\Models\Listing::where('purpose_id', 38)->where('status', 1)->where('is_featured', 1)->get() 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">
                                            <div class="thumb view-property">
                                                <img class="low-opacity img-whp"
                                                     src="{{ $listing->getThumbImagePublicUrlAttribute() }}"
                                                     alt="{!! $listing->title !!}">
                                                <div class="thmb_cntnt">
                                                    <ul class="tag mb0">
                                                        <li class="list-inline-item">Featured</li>
                                                    </ul>
                                                    <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>
                                                    <address class="item-address">
                                                        {!! $listing->title !!}
                                                    </address>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="sidebar_feature_listing">
                            <h4 class="title">Latest Posts</h4>
                            @foreach (App\Models\Post::whereStatus(1)->latest()->take(5)->get() as $post)
                                <div class="media">
                                    <img style="width: 30%" class="align-self-start mr-3"
                                         src="{{ $post->getThumbImagePublicUrlAttribute() }}" alt="{{ $post->title }}">
                                    <div class="media-body">
                                        <a href="/post/{{ $post->slug }}">
                                            <h5 class="mt-0 post_title">{{ $post->title }}</h5>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('pageSpecificScripts')
    <script>
        $(document).on('click', '.load-more-btn', function () {
            var button = $(this);
            var page = button.data('page');
            const currentUrl = window.location.href;
            const urlParams = new URLSearchParams(new URL(currentUrl).search);
            const params = {page: page};
            urlParams.forEach((value, key) => {
                params[key] = value;
            });
            $.ajax({
                url: "{{ route('load-more-listings-inner-offplan') }}",
                type: "GET",
                data: params,
                beforeSend: function () {
                    button.text('Loading...');
                    button.addClass('section-disabled');
                },
                success: function (response) {
                    if ($.trim(response)) {
                        $('#listV').append(response.list);
                        $('#gridV').append(response.grid);
                        button.data('page', page + 1);
                        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>
        $('body').on('change', '.sortProducts', function (e) {
            let selectedValue = e.target.value;
            let currentUrl = new URL(window.location.href);
            currentUrl.searchParams.set('sort', selectedValue);
            window.location.href = currentUrl;
        });
        $('body').on('click', '#showList', function () {
            $("#listV").show();
            $("#gridV").hide();
        });
        $('body').on('click', '#showGrid', function () {
            $("#gridV").show();
            $("#listV").hide();
        });
    </script>
@endsection