@extends('layouts.front')

@push('css')

@endpush

@section('content')
    <!-- ============================ Main Section Start ================================== -->
    <section class="gray py-5">
        <div class="container">
			<div id="sliderCarousel" class="carousel slide mb-4" data-bs-ride="carousel">
				<div class="carousel-inner">
										@if (count($advertisements) > 0) @foreach ($advertisements as $image)
							<div class="carousel-item {{ $i++ === 0 ? 'active' : '' }}">
								<img src="{{ asset('assets/images/'.$image->photo) }}" class="d-block w-100" alt="">
							</div>
						@endforeach
					@else
						<p>No images found for slider.</p>
					@endif
				</div>
			</div>
            <div class="row">

                <div class="col-xl-3 col-lg-4 col-md-12 col-sm-12">
                    <div class="bg-white rounded mb-4">

                        <div class="sidebar_header d-flex align-items-center justify-content-between px-4 py-3 br-bottom">
                            <h4 class="ft-medium fs-lg mb-0">@lang('')</h4>
                            <div class="ssh-header">
                                <a href="javascript:void(0);" class="clear_all ft-medium text-muted" id="clearAll">@lang('Clear All')</a>
                                <a href="#search_open" data-bs-toggle="collapse" aria-expanded="false" role="button" class="collapsed _filter-ico ml-2"><i class="lni lni-text-align-right"></i></a>
                            </div>
                        </div>

                        <!-- Find New Property -->
                        <div class="sidebar-widgets collapse miz_show" id="search_open" data-bs-parent="#search_open">
                            <div class="search-inner">

                                <div class="side-filter-box">
                                    <div class="side-filter-box-body">

                                        <!-- Category -->
                                        <div class="inner_widget_link">
                                            <h6 class="ft-medium">@lang('Category')</h6>
                                            <ul class="no-ul-list filter-list">
                                                @foreach ($categories as $key => $category)
                                                    <li>
                                                        <input id="cat{{$key}}" class="checkbox-custom search_cat" value="{{ $category->slug }}" type="checkbox">
                                                        <label for="cat{{$key}}" class="checkbox-custom-label">{{ $category->title }}</label>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>

                                        <!-- Location -->
                                        <div class="inner_widget_link">
                                            <h6 class="ft-medium">@lang('Location')</h6>
                                            <ul class="no-ul-list filter-list">
                                                @foreach ($locations as $key => $location)
                                                    <li>
                                                        <input id="loc{{$key}}" class="checkbox-custom search_loc" value="{{ $location->id }}" type="checkbox">
                                                        <label for="loc{{$key}}" class="checkbox-custom-label">{{ $location->name }}</label>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>

                                        <!-- Features -->
                                        <div class="inner_widget_link">
                                            <h6 class="ft-medium">@lang('Type')</h6>
                                            <ul class="no-ul-list filter-list">
                                                <li>
                                                    <input id="type4" class="checkbox-custom search_type" value="doctor" type="checkbox">
                                                    <label for="type4" class="checkbox-custom-label">@lang('Doctor')</label>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- Sidebar End -->

                </div>

                <!-- Item Wrap Start -->
                <div class="col-xl-9 col-lg-8 col-md-12 col-sm-12">

                    <!-- row -->
                    <div class="row justify-content-center gx-3" id="show_search_items">
                        @includeIf('partials.front.listing')
                    </div>
                    <!-- row -->

                </div>

            </div>
        </div>
    </section>
    <!-- ============================ Main Section End ================================== -->

    <!-- ======================= Newsletter Start ============================ -->
    @include('partials.front.cta')
    <!-- ======================= Newsletter Start ============================ -->

    <!-- ============================ Footer Start ================================== -->
    @include('partials.front.footer')
    <!-- ============================ Footer End ================================== -->

    <form id="search_item" class="d-none" action="{{route('front.listing')}}" method="get">
        <input type="text" name="type[]" id="type" value="">
        <input type="text" name="location[]" id="location" value="">
		<input type="text" name="category[]" id="categories" value="">
        <button type="submit" id="search_btn_submit" class="d-none"></button>
    </form>
@endsection

@push('js')
<script>
    'use strict';
	
	$(document).ready(function() {
        // Function to get URL parameters
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        }

        // Set initial checkbox states based on URL parameters
        function setInitialCheckboxes() {
            const categoryParam = getUrlParameter('category');
            if (categoryParam) {
                const catArray = categoryParam.split(',');
                $('.search_cat').each(function() {
                    if (catArray.includes($(this).val())) {
                        $(this).prop('checked', true);
                    }
                });
            }
        }

        // Call this on page load
        setInitialCheckboxes();

        // Function to update the URL and reload listings
        function updateListings() {
            const params = new URLSearchParams(window.location.search);
            
            // Get all checked filters
            const checkedCategories = $('.search_cat:checked').map(function() {
                return $(this).val();
            }).get();

            // Update URL parameters
            params.delete('category');
            params.delete('page'); // Reset to first page when filters change

            if (checkedCategories.length > 0) {
                params.append('category', checkedCategories.join(','));
            }

            // Show loading indicator
            $('#show_search_items').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x"></i></div>');

            // Make AJAX request
            $.ajax({
                url: window.location.pathname + '?' + params.toString(),
                type: 'GET',
                dataType: 'html',
                success: function(response) {
                    $('#show_search_items').html(response);
                    // Update browser URL without reload
                    history.pushState(null, null, window.location.pathname + '?' + params.toString());
                },
                error: function(xhr) {
                    $('#show_search_items').html('<div class="alert alert-danger">Error loading listings</div>');
                }
            });
        }

        // Filter change handlers
        $('.search_cat').change(function() {
            updateListings();
        });

        // Clear all filters
        $('#clearAll').click(function() {
            $('.search_cat').prop('checked', false);
            $('select[name="category[]"]').val('');
            updateListings();
        });

        // Handle pagination clicks
        $(document).on('click', '.pagination a', function(e) {
            e.preventDefault();
            let url = $(this).attr('href');
            
            // Show loading indicator
            $('#show_search_items').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x"></i></div>');
            
            // Get the listings via AJAX
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'html',
                success: function(response) {
                    $('#show_search_items').html(response);
                    // Update browser URL
                    history.pushState(null, null, url);
                    // Scroll to top of listings
                    $('html, body').animate({
                        scrollTop: $('#show_search_items').offset().top - 100
                    }, 500);
                },
                error: function(xhr) {
                    $('#show_search_items').html('<div class="alert alert-danger">Error loading listings</div>');
                }
            });
        });

        // Handle browser back/forward buttons
        window.onpopstate = function() {
            location.reload();
        };
    });
</script>
@endpush