@extends('layouts.front')
<style>
    #suggestions {
        max-width: 100%;
        /* border: 1px solid #ccc; */
        border-radius: 5px;
        position: absolute;
        z-index: 1000;
        background-color: white;
    }

    #suggestions ul {
        list-style-type: none;
        padding: 8px;
        margin: 0;
    }



    #suggestions li:hover {
        background-color: #f0f0f0;
    }

    .d-flex {
        display: flex;
    }

    .justify-content-between {
        justify-content: space-between;
    }

    .list-group-item span:first-child {
        flex: 1;
        text-align: left;
    }

    .list-group-item span:last-child {
        flex: 1;
        text-align: right;
    }

    .relative {
        position: relative;
    }
</style>
@push('css')
@endpush
@section('content')
    @if (in_array('Banner', $home_modules))
        <!-- ============================ Hero Banner  Start================================== -->
        <div class="image-cover hero-banner"
            style="background:url({{ asset('assets/images/' . $ps->hero_photo) }}) no-repeat;" data-overlay="6">
            <div class="container">
                <h1 class="big-header-capt mb-1">{{ $ps->banner_title }}</h1>
                <form action="{{ url('listing') }}" method="get">

                    <div class="property-search-type">
                        <label class="active"><input name="type" type="radio" value="for_sell">@lang('For Sell')</label>
                        <label><input name="type" type="radio" value="for_rent">@lang('For Rent')</label>
                        <label><input name="type" type="radio" value="for_pg">@lang('For PG')</label>
                    </div>
                    <div class="full-search-2 eclip-search italian-search hero-search-radius">
                        <div class="hero-search-content">
                            <div class="row">

                                <div class="col-lg-3 col-md-3 col-sm-12 small-padd">
                                    <div class="form-group">
                                        <div class="input-with-icon b-l b-r">
                                            <select id="location" class="form-control" name ="location_id">
                                                <option value="">&nbsp;</option>
                                                <optgroup label="Top Cities">
                                                    @foreach ($locations->where('is_top_city', 1) as $data)
                                                        <option value="{{ $data->id }}">{{ $data->name }}</option>
                                                    @endforeach
                                                </optgroup>
                                                <optgroup label="Other Cities">
                                                    @foreach ($locations->where('is_top_city', 0) as $data)
                                                        <option value="{{ $data->id }}">{{ $data->name }}</option>
                                                    @endforeach
                                                </optgroup>
                                            </select>
                                            <i class="ti-location-pin"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12 small-padd">
                                    <div class="form-group relative">
                                        <div class="input-with-icon">
                                            <input type="text" class="form-control b-r" id="locality-search"
                                                name="name" placeholder="@lang('Search for locality, landmark, project, or builder')">
                                            <div class="w-100" id="suggestions"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-1 col-md-1 col-sm-12 small-padd">

                                </div>
                                <input type="hidden" name="autoSubmit" value="1">

                                <div class="col-lg-2 col-md-2 col-sm-12 small-padd">
                                    <div class="form-group">
                                        <button type="submit" class="btn search-btn">@lang('Search')</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- ============================ Hero Banner End ================================== -->
    @endif

    @if (in_array('Explore Property', $home_modules))
        <!-- ============================ Latest Property For Sale Start ================================== -->
        <section class="gray">
            <div class="container">

                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="sec-heading center mb-3">
                            <h2>{{ $ps->explore_ptitle }}</h2>
                            <p>{{ $ps->explore_psub }}</p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="property-slide">

                            @foreach ($properties as $key => $data)
                                <!-- Single Property -->
                                <div class="single-items">
                                    <a href="{{ route('front.property.details', $data->slug) }}">
                                        <div class="property_item classical-list">
                                            <div class="image">
                                                <img src="{{ asset('assets/images/' . $data->photo) }}"
                                                    alt="latest property" class="img-fluid"
                                                    style="height:400px;width:350px">
                                                <div class="sb-date">
                                                    <span class="tag"><i
                                                            class="ti-calendar"></i>{{ $data->created_at->diffForHumans() }}</span>
                                                </div>
                                                <span
                                                    class="tag_t">{{ $data->type == 'for_rent' ? __('For Rent') : __('For Sale') }}</span>
                                            </div>

                                            <div class="proerty_content">
                                                <div class="proerty_text">
                                                    <h3 class="captlize">{{ $data->name }}</h3>
                                                    <p class="proerty_price">{{ showAmount($data->price) }}</p>
                                                </div>
                                                <p class="property_add">{{ $data->real_address }}</p>

                                                <div class="property_meta">
                                                    <div class="list-fx-features">
                                                        <div class="listing-card-info-icon">
                                                            <span class="inc-fleat inc-bed">{{ $data->bed }}
                                                                @lang('Beds')</span>
                                                        </div>
                                                        <div class="listing-card-info-icon">
                                                            <span class="inc-fleat inc-type">{{ $data->year_built }}
                                                                @lang('Built')</span>
                                                        </div>
                                                        <div class="listing-card-info-icon">
                                                            <span class="inc-fleat inc-area">{{ $data->square }}
                                                                @lang('sqft')</span>
                                                        </div>
                                                        <div class="listing-card-info-icon">
                                                            <span class="inc-fleat inc-bath">{{ $data->bathroom }}
                                                                @lang('Bath')</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="property_links">
                                                    <button type="button"
                                                        class="btn btn-theme-light">@lang('Property Detail')</button>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

            </div>
        </section>
        <!-- ============================ Latest Property For Sale End ================================== -->
    @endif

    @if (in_array('Location', $home_modules))
        <!-- ============================ Property Location Start ================================== -->
        <section>
            <div class="container">

                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <div class="sec-heading center">
                            <h2>{{ $ps->location_title }}</h2>
                            <p>{{ $ps->location_subtitle }}</p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    @foreach ($locations_for_section as $key => $data)
                        <!-- Single Location Listing -->
                        <div class="col-lg-3 col-md-3 col-sm-6">
                            <div class="location-listing">
                                <div class="location-listing-thumb">
                                    <a href="{{ route('front.listing', ['location_id' => $data->id]) }}"><img
                                            src="{{ asset('assets/images/' . $data->photo) }}" class="img-fluid"
                                            alt="" /></a>
                                </div>
                                <div class="location-listing-caption">
                                    <h4><a
                                            href="{{ route('front.listing', ['location_id' => $data->id]) }}">{{ $data->name }}</a>
                                    </h4>
                                    <!--<span class="theme-cl">{{ count($data->properties) }} @lang('Property')</span>-->
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>
        <!-- ============================ Property Location End ================================== -->
    @endif

    @if (in_array('Testimonials', $home_modules))
        <!-- ============================ Smart Testimonials ================================== -->
        <section class="image-cover pb-0"
            style="background:#122947 url({{ asset('assets/front/img/pattern.png') }}) no-repeat;">
            <div class="container">
                <div class="row align-items-center">

                    <div class="col-lg-6 col-md-7">
                        <h2 class="text-light">{{ $ps->review_title }}</h2>

                        <div class="smart-textimonials smart-light" id="smart-textimonials">
                            @foreach ($testimonials as $key => $data)
                                <!-- Single Item -->
                                <div class="item">
                                    <div class="smart-tes-content">
                                        <p>
                                            @php
                                                echo $data->details;
                                            @endphp
                                        </p>
                                    </div>

                                    <div class="smart-tes-author">
                                        <div class="st-author-box">
                                            <div class="st-author-thumb">
                                                <img src="{{ asset('assets/images/' . $data->photo) }}" class="img-fluid"
                                                    alt="" />
                                            </div>
                                            <div class="st-author-info">
                                                <h4 class="st-author-title">{{ $data->title }}</h4>
                                                <span class="st-author-subtitle">{{ $data->subtitle }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>

                    <div class="col-lg-6 col-md-5">
                        <img src="{{ asset('assets/images/' . $ps->review_photo) }}" class="img-fluid" alt="">
                    </div>

                </div>
            </div>
        </section>
        <!-- ============================ Smart Testimonials End ================================== -->
    @endif

    @if (in_array('Blogs', $home_modules))
        <!-- ================================= Blog Slider ================================== -->
        <section>
            <div class="container">

                <div class="row">
                    <div class="col text-center">
                        <div class="sec-heading center">
                            <h2>{{ $ps->blog_title }}</h2>
                            <p>
                                @php
                                    echo $ps->blog_subtitle;
                                @endphp
                            </p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div id="blogCarousel" class="carousel slide" data-bs-ride="carousel">
                        <!-- Indicators -->
                        <div class="carousel-indicators">
                            @foreach ($blogs->chunk(3) as $key => $chunk)
                                <button type="button" data-bs-target="#blogCarousel"
                                    data-bs-slide-to="{{ $key }}" class="{{ $key === 0 ? 'active' : '' }}"
                                    aria-current="true" aria-label="Slide {{ $key + 1 }}"></button>
                            @endforeach
                        </div>

                        <!-- Slides -->
                        <div class="carousel-inner">
                            @foreach ($blogs->chunk(3) as $key => $chunk)
                                <div class="carousel-item {{ $key === 0 ? 'active' : '' }}">
                                    <div class="row">
                                        @foreach ($chunk as $data)
                                            <div class="col-lg-4 col-md-6">
                                                <div class="blog-wrap-grid">
                                                    <div class="blog-thumb">
                                                        <a href="{{ route('blog.details', $data->slug) }}">
                                                            <img src="{{ asset('assets/images/' . $data->photo) }}"
                                                                class="img-fluid" alt="" />
                                                        </a>
                                                    </div>

                                                    <div class="blog-info">
                                                        <span class="post-date"><i
                                                                class="ti-calendar"></i>{{ Carbon\Carbon::parse($data->created_at)->format('d M Y') }}</span>
                                                    </div>

                                                    <div class="blog-body">
                                                        <h4 class="bl-title">
                                                            <a
                                                                href="{{ route('blog.details', $data->slug) }}">{{ $data->title }}</a>
                                                        </h4>
                                                        <p>{{ Str::limit(strip_tags($data->details), 100) }}</p>
                                                        <a href="{{ route('blog.details', $data->slug) }}"
                                                            class="bl-continue">@lang('Continue')</a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <!-- Controls -->
                        <button class="carousel-control-prev" type="button" data-bs-target="#blogCarousel"
                            data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#blogCarousel"
                            data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
            </div>
        </section>
        <!-- ================= Blog Slider End ================= -->
    @endif

    @if (in_array('CTAs', $home_modules))
        <!-- ============================ Call To Action ================================== -->
        @includeIf('partials.front.cta')
        <!-- ============================ Call To Action End ================================== -->
    @endif

@endsection

@push('js')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#locality-search').on('focus', function() {
                fetchSuggestions('');
            });

            $('#locality-search').on('input', function() {
                var query = $(this).val();
                fetchSuggestions(query);
            });

            function fetchSuggestions(query) {
                var location = $('#location').find(':selected').text();
                var type = $('input[name="type"]:checked').val();

                $.ajax({
                    url: "{{ route('front.getSuggestions') }}",
                    type: "GET",
                    data: {
                        query: query,
                        location: location,
                        type: type
                    },
                    success: function(data) {
                        renderSuggestions(data, query);
                    },
                    error: function() {
                        $('#suggestions').html('<p>Something went wrong. Please try again.</p>');
                    }
                });
            }

            function renderSuggestions(data, query) {
                if (data.length === 0) {
                    $('#suggestions').html('<p>No data available for the selected location</p>');
                } else {
                    var list = '<ul class="list-group">';
                    data.forEach(function(item) {
                        var displayText = item.result ? item.result.Property + ', ' + item.result
                            .City : item.locality;
                        var matchText = item.match;

                        list +=
                            '<li class="list-group-item suggestion-item d-flex justify-content-between align-items-center" ' +
                            'data-value="' + displayText + '">' +
                            '<span>' + displayText + '</span>' +
                            '<small class="text-muted">' + matchText + '</small>' +
                            '</li>';
                    });
                    list += '</ul>';
                    $('#suggestions').html(list);
                }
            }
            $(document).on('click', '.suggestion-item', function() {
                var value = $(this).data('value');
                $('#locality-search').val(value);
                $('#suggestions').html('');
            });
        });
    </script>
@endpush