@extends('tenant.layouts.main')
@section('title')
    <title>Homevana</title>
@endsection
@section('content')
<main class="main">
    <div class="inner-app-main">
        <section class="section lyt-section mt-27">
            <div class="bs-form typ-form-padding">
                <div class="bs-flex-lyt mobile-flex-col mobile-flex-col2 typ-gap-24">
                    {{-- <div class="bs-select-base">
                        <label for="location"><span class="icon icon-location"></span></label>
                        <input type="text" class="form-control" id="location" name="location" placeholder="Enter an  city, locality, address">
                    </div> --}}

                    <div class="bs-select-base">
                        <div class="dropdown-arrow">
                            <span class="icon icon-dropdown-arrow1"></span>
                        </div>
                        <label for="city">
                            <span class="icon icon-location"></span>
                        </label>
                        <select class="input-select dynamic" name="city" id="city">
                            <option value="" selected disabled> City</option>
                            <option value="0"> All</option>
                            @foreach ($cities as $city)
                            <option value="{{$city->id}}">{{$city->city_name}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="bs-select-base">
                        <div class="dropdown-arrow">
                            <span class="icon icon-dropdown-arrow1"></span>
                        </div>
                        <label for="locality">
                            <span class="icon icon-locality"></span>
                        </label>
                        <select class="input-select" name="locality" id="locality">
                            <option value="" selected disabled> Locality</option>
                            <option value="0">All</option>
                            @foreach ($localities as $locality)
                            <option value="{{$locality->id}}">{{$locality->locality_name}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="bs-select-base">
                        <div class="dropdown-arrow">
                            <span class="icon icon-dropdown-arrow1"></span>
                        </div>
                        <label for="home">
                            <span class="icon icon-home"></span>
                        </label>
                        <select class="input-select" name="property_type" id="home">
                            <option value="" selected disabled> Home</option>
                            <option value="0">All</option>
                            <option value="Commercial">Commercial</option>
                            <option value="ready_to_move_in">Ready to move in</option>
                            <option value="under_construction">Under construction</option>
                            <option value="office">Office</option>
                        </select>
                    </div>
                    <div class="bs-select-base">
                        <div class="dropdown-arrow">
                            <span class="icon icon-dropdown-arrow1"></span>
                        </div>
                        <label for="money">
                            <span class="icon icon-money"></span>
                        </label>
                        <select class="input-select" name="money" id="money">
                            <option value="" selected disabled> Price Range</option>
                            <option value="0">All</option>
                            <option value="below 10000">
                                below 10000
                            </option>
                            <option value="10000 to 30000">
                                10000 to 30000
                            </option>
                            <option value="30000 to 60000">
                                30000 to 60000
                            </option>
                            <option value="60000 to 1 Lac">
                                60000 to 1 Lac
                            </option>
                            <option value="above 1 Lac">
                                above 1 Lac
                            </option>
                            
                        </select>
                    </div>
                    <div class="bs-select-base">
                        <div class="dropdown-arrow">
                            <span class="icon icon-dropdown-arrow1"></span>
                        </div>
                        <label for="features">
                            <span class="icon icon-house"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span>
                        </label>
                        <select class="input-select" name="features" id="features">
                            <option value="" selected disabled> Features</option>
                            <option value="0">All</option>
                            <option value="Emergency Exit">
                                Emergency Exit
                            </option>
                            <option value="CCTV">
                                CCTV
                            </option>
                            <option value="Free Wi-Fi">
                                Free Wi-Fi
                            </option>
                            <option value="Free Parking In The Area">
                                Free Parking In The Area
                            </option>
                            <option value="Laundry Service">
                                Laundry Service
                            </option>
                            <option value="Elevator Lift">
                                Elevator Lift
                            </option>
                            <option value="Air Conditioning">
                                Air Conditioning
                            </option>
                            <option value="Skyline view">
                                Skyline view
                            </option>
                            <option value="Sea view">
                                Sea view
                            </option>
                            <option value="Kids play area">
                                Kids play area
                            </option>
                            <option value="Security Guard">
                                Security Guard
                            </option>
                            <option value="Terrace">
                                Terrace
                            </option>
                        </select>
                    </div>

                    <div>
                        <button id="searchFilter" class="bs-btn typ-blue-btn btn-size typ-br-8px">Search <span class="icon-white icon-search"></span></button>
                    </div>
                </div>
                <div id="errmsg" class="customError mt-3"></div>
            </div>
        </section>
        <section class="section lyt-section mt-42">
            <div class="bs-flex-lyt upper-flex">
                <div>
                    <h2 class="bs-heading typ-27 typ-800">Property list</h2>
                    <!-- <p class="bs-para typ-14 typ-medium">Showing <span class="typ-blue">1-6 of 10</span>
                        Listings</p> -->
                </div>
            </div>
        </section>
        <section class="lyt-section typ-property">
            <div class="property--height">
                <div class="bs-grid-box typ-property-mobile" id="property-container">
                    @foreach ($properties as $property)
                    <div class="bs-card">
                        <div class="card typ-property">
                            <a href="{{ route('view-tenant-property-detail',[$property->id]) }}">
                                <div class="bs-swiper">
                                    <div class="swiper propertySwiper">
                                        <div class="swiper-wrapper">
                                            @foreach ($property_images as $property_image)
                                            @if ($property->id == $property_image->property_id)
                                            <div class="swiper-slide">
                                                <img src="{{ asset('storage/'.$property_image->image) }}"
                                                    class="img-fluid typ-w-100" alt="house">
                                            </div>
                                            @endif
                                            @endforeach
                                        </div>
                                        <div class="swiper-pagination"></div>
                                    </div>
                                </div>
                            </a>
                            <div class="card--body">
                                <div class="card--flex">
                                    <h2 class="card-city">{{$property->city_name}}, {{$property->state}}</h2>
                                    <p class="card--dates">{{ \Carbon\Carbon::parse($property->created_at)->format('F j, Y') }}</p>
                                </div>
                                <h3 class="card-name">{{$property->property_name}}</h3>
                                <h4 class="card-price"><span class="rs">₹</span> {{ number_format($property->rent_amount) }}*</h4>
                                <div>
                                    <p class="card-desc">{{$property->description}}
                                    </p>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div>
                                    <div class="card--flex--bottom">
                                        <div class="flex-item">
                                            <span class="icon icon-bed"></span>
                                            <h4 class="card--facility">Bed : {{$property->min_beds}}</h4>
                                        </div>
                                        <div class="flex-item">
                                            <span class="icon icon-bath"></span>
                                            <h4 class="card--facility">Baths : {{$property->min_bath}}</h4>
                                        </div>
                                        <div class="flex-item">
                                            <span class="icon icon-sq-feet"></span>
                                            <h4 class="card--facility">Sq Ft : {{$property->area}}</h4>
                                        </div>
                                    </div>
                                    <div class="btn-flexes">
                                        <a href="{{ route('message-homevana-tenant') }}" class="bs-btn typ-green-btn">Buy Now</a>
                                        <a href="{{ route('view-tenant-property-detail',[$property->id]) }}" class="bs-btn typ-blue-border">Details</a>
                                        <a href="{{ route('message-homevana-tenant') }}" class="bs-btn typ-gry-border">Request Callback</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach

                </div>
            </div>
            <div class="bs-pagination-strip" id="bottomData">
                <p class="bs-para typ-16 typ-black">
                    Showing
                    <span>{{ $properties->firstItem() }}</span>
                    to
                    <span>{{ $properties->lastItem() }}</span>
                    of
                    <span>{{ $properties->total() }}</span>
                    Listings
                </p>

                <nav aria-label="Page navigation" id="pagination-container">
                  {{ $properties->links('tenant.properties.pagination') }}
                </nav>

           </div>
        </section>
    </div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('.dynamic').change(function(){
        console.log("changed");
        var id = $('.dynamic').val();
        console.log('id>>>',id);
        const token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ route('locality-tenant.fetch') }}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': token
            },
            data: {
                id: id
            },
            success: function(result){
                console.log('result>>', result);
                if(result.status == 200){
                    console.log(result.localitydata);
                    var select_option = '<option value="" selected disabled>Locality</option><option value="0">All</option>';
                    result.localitydata.forEach((item) => {
                        select_option += '<option value="' + item["id"] + '">' + item['locality_name'] + '</option>';
                    });

                    $('#locality').html(select_option);
                    $('#locality').trigger('change');
                } else {
                    $('#locality').html('<option value="0">All</option>');
                }
            },
            error: function(xhr, status, error){
                console.error('AJAX Error: ', status, error);
                $('#locality').html('<option value="0">All</option>');
            }
        });
    });
});


var selectedFilters = [];

$('#searchFilter').on('click', function(event) {
    var propertyType = $('select[name="property_type"]').val();
    var features = $('select[name="features"]').val();
    var money = $('select[name="money"]').val();
    var city = $('select[name="city"]').val();
    var locality = $('select[name="locality"]').val();
    // alert(city);

    if(propertyType == null && features == null && money == null && city == null && locality == null){
        $("#errmsg").html("Please select an option");
    }else{
        $("#errmsg").html("");
        selectedFilters = [{
            propertyType: propertyType,
            features: features,
            city: city,
            locality: locality,
            money: money
        }];
        performAjaxRequest(selectedFilters, 1);
    }
});

function performAjaxRequest(filterValues, page) {
    console.log('Data to be sent:', filterValues);
    const token = '{{csrf_token()}}';
    $.ajax({
        url: "{{ route('filter-tenant-properties') }}",
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': token
        },
        data: {
            filterValues: filterValues,
            page: page
        },
        success: function (response) {
            if (response.status == 200) {
                $('#bottomData').show();
                updatePropertyContainer(response, response.property_images);
            } else {
                // $('#property-container').html('data not found');
                $('#bottomData').hide();
                var container = $('#property-container');
                container.empty();
                $('#property-container').html(
                                            '<div class="bs-card typ-no-result p-4">' +
                                                '<div class="text-center mb-15">' +
                                                    '<img src="assets/images/no-results.svg" class="img-fluid max-213" alt="">' +
                                                    '</div>' +
                                                    '<h2 class="bs-heading typ-800 text-center">Sorry, we couldn\'t find your result</h2>' +
                                            '</div>'
                );
            }
        },
        error: function (error) {
            console.error('AJAX error:', error);
        }
    });
}


function formatfostedDate(dateString) {
        var date = new Date(dateString);
        var options = { month: 'long', day: 'numeric', year: 'numeric' };
        return date.toLocaleDateString('en-US', options);
    }

    function numberFormat(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function updatePropertyContainer(response, property_images) {
    var container = $('#property-container');
    var paginationContainer = $('#pagination-container');
    var paginationText = $('.bs-pagination-strip p.bs-para');
    container.empty();
    var propertyDetailsUrl = @json(route('view-tenant-property-detail', ['slug_placeholder']));
    var byNowRoute = "{{ route('message-homevana-tenant') }}";
    var baseImageUrl = '{{ asset('storage') }}';

    response.data.data.forEach(function (item) {
        var imagesHtml = '';

        property_images.forEach(function (image) {
            if (item.id === image.property_id) {
                imagesHtml += '<div class="swiper-slide">' +
                                '<img src="' + baseImageUrl + '/' + image.image + '" class="img-fluid typ-w-100" alt="house">' +
                              '</div>';
            }
        });

        var cardHtml = '<div class="bs-card">' +
                           '<div class="card typ-property">' +
                               '<a href="' + propertyDetailsUrl.replace('slug_placeholder', item.id) + '">' +
                                   '<div class="bs-swiper">' +
                                       '<div class="swiper propertySwiper">' +
                                           '<div class="swiper-wrapper">' +
                                               imagesHtml +
                                           '</div>' +
                                           '<div class="swiper-pagination"></div>' +
                                       '</div>' +
                                   '</div>' +
                               '</a>' +
                               '<div class="card--body">' +
                                   '<div class="card--flex">' +
                                       '<h2 class="card-city">' + item.city_name + ', ' + item.state + '</h2>' +
                                       '<p class="card--dates">' + formatfostedDate(item.created_at) + '</p>' +
                                   '</div>' +
                                   '<h3 class="card-name">' + item.property_name + '</h3>' +
                                   '<h4 class="card-price"><span class="rs">₹</span> ' + numberFormat(item.rent_amount) + '*</h4>' +
                                   '<div>' +
                                       '<p class="card-desc">' + item.description + '</p>' +
                                   '</div>' +
                               '</div>' +
                               '<div class="card-footer">' +
                                   '<div>' +
                                       '<div class="card--flex--bottom">' +
                                           '<div class="flex-item">' +
                                               '<span class="icon icon-bed"></span>' +
                                               '<h4 class="card--facility">Bed : ' + item.min_beds + '</h4>' +
                                           '</div>' +
                                           '<div class="flex-item">' +
                                               '<span class="icon icon-bath"></span>' +
                                               '<h4 class="card--facility">Baths : ' + item.min_bath + '</h4>' +
                                           '</div>' +
                                           '<div class="flex-item">' +
                                               '<span class="icon icon-sq-feet"></span>' +
                                               '<h4 class="card--facility">Sq Ft : ' + item.area + '</h4>' +
                                           '</div>' +
                                       '</div>' +
                                       '<div class="btn-flexes">' +
                                           '<a href="' + byNowRoute +'" class="bs-btn typ-green-btn">Buy Now</a>' +
                                           '<a href="' + propertyDetailsUrl.replace('slug_placeholder', item.id) + '" class="bs-btn typ-blue-border">Details</a>' +
                                           '<a href="' + byNowRoute +'" class="bs-btn typ-gry-border">Request Callback</a>' +
                                       '</div>' +
                                   '</div>' +
                               '</div>' +
                           '</div>' +
                       '</div>';

        container.append(cardHtml);
    });

    var swipers = document.querySelectorAll('.propertySwiper');
    swipers.forEach(function (swiperElement) {
        new Swiper(swiperElement, {
            loop: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            breakpoints: {
                640: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
                1024: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                },
            },
        });
    });

    paginationText.html(`
        Showing
        <span>${response.firstItem}</span>
        to
        <span>${response.lastItem}</span>
        of
        <span>${response.total}</span>
        Listings
    `);

    paginationContainer.html(response.pagination);
}

$(document).ready(function () {
    $(document).on('click', '#pagination-container a', function (event) {
        event.preventDefault();
        var page = $(this).attr('href').split('page=')[1];
        performAjaxRequest(selectedFilters, page);
    });
});



</script>
@endsection