@extends('user.master')

@section('title', 'Car Listing')

@section('content')
    <!-- Banner Section Start -->
    <div class="container-fluid p-0">
        <div class="impl_page_banner_section">
            <div class="impl_page_wrapper">
                <div class="container-fluid impl_container">
                    <div class="impl_page_heading">
                        <h3>Car Listing</h3>
                        <p>
                            <a href="{{ route('user.home') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                                    className="size-6">
                                    <path
                                        d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z" />
                                    <path
                                        d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" />
                                </svg>
                                Home
                            </a>
                            <span> > Car Listing</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Banner Section End -->

    <!-- Define handleFilterSubmit function immediately so it's available for onclick -->
    <script>
        // Define function immediately so it's available when button onclick fires
        window.handleFilterSubmit = function() {
            console.log('handleFilterSubmit called (early definition)');
            
            // If jQuery is available and functions are defined, use them
            if (typeof jQuery !== 'undefined' && typeof window.getFilterParams === 'function' && typeof window.performFilter === 'function') {
                try {
                    const params = window.getFilterParams();
                    params.page = 1;
                    window.performFilter(params);
                } catch (error) {
                    console.error('Error in handleFilterSubmit:', error);
                }
                return false;
            }
            
            // Otherwise, wait and retry
            console.log('Functions not ready, will retry...');
            setTimeout(function() {
                if (typeof window.handleFilterSubmit === 'function') {
                    window.handleFilterSubmit();
                }
            }, 100);
            return false;
        };
    </script>

    <div class="impl_section_wrapper impl_listing_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-8" data-aos="fade-right">
                    <div class="row">
                        <div class="col-12">
                            <div class="impl_sort_heading">
                                <div class="impl_sort_left">
                                    <h6 id="listing-count">Showing {{ $cars->firstItem() ?? 0 }}-{{ $cars->lastItem() ?? 0 }} of {{ $cars->total() }} Listings</h6>
                                </div>
                                <div class="impl_sort_right">
                                    <div class="impl_filter_dd">
                                        <span>
                                            <select name="order" id="order">
                                                <option value="" {{ request('order') == '' ? 'selected' : '' }}>Default Order</option>
                                                <option value="high" {{ request('order') == 'high' ? 'selected' : '' }}>Price: High to Low</option>
                                                <option value="low" {{ request('order') == 'low' ? 'selected' : '' }}>Price: Low to High</option>
                                                <option value="new" {{ request('order') == 'new' ? 'selected' : '' }}>New Car First</option>
                                                <option value="old" {{ request('order') == 'old' ? 'selected' : '' }}>Old Car First</option>
                                            </select>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Loading Indicator -->
                        <div id="listing-loader" class="col-12 text-center" style="display: none; padding: 40px;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-3">Loading cars...</p>
                        </div>
                        <!-- Results Container -->
                        <div id="listing-results" class="row">
                            @include('user.partials.listing-results', ['cars' => $cars])
                        </div>
                        <!-- Pagination Container -->
                        <div id="listing-pagination">
                            @include('user.partials.listing-pagination', ['cars' => $cars])
                        </div>

                    </div>
                </div>
                <div class="col-lg-4" data-aos="fade-left">
                    <div class="row">
                        <div class="col-12">
                            <div class="impl_fiter_box">

                                <form method="GET" action="{{ route('user.listing') }}" id="filterForm">
                                    <div class="row">

                                        {{-- Heading --}}
                                        <div class="col-12">
                                            <div class="impl_fiter_heading">
                                                <h5>Search Cars</h5>
                                            </div>
                                        </div>

                                        {{-- Brand --}}
                                        <div class="col-12">
                                            <div class="impl_filter_dd">
                                                <span>
                                                    <select name="brand" id="brand" class="form-control">
                                                        <option value="">Brand</option>
                                                        @foreach ($brands as $brand)
                                                            <option value="{{ $brand->id }}"
                                                                {{ request('brand') == $brand->id ? 'selected' : '' }}>
                                                                {{ $brand->brand_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </span>
                                            </div>

                                            {{-- Year --}}
                                            <div class="impl_filter_dd">
                                                <span>
                                                    <select name="year" id="year">
                                                        <option value="">Year</option>
                                                        @foreach ($years as $year)
                                                            <option value="{{ $year }}"
                                                                {{ request('year') == $year ? 'selected' : '' }}>
                                                                {{ $year }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </span>
                                            </div>

                                            {{-- Body Type --}}
                                            <div class="impl_filter_dd">
                                                <span>
                                                    <select name="body_type" id="body_type">
                                                        <option value="">Type</option>
                                                        @foreach ($bodyTypes as $type)
                                                            <option value="{{ $type->id }}"
                                                                {{ request('body_type') == $type->id ? 'selected' : '' }}>
                                                                {{ $type->body_type_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </span>
                                            </div>

                                            {{-- Transmission --}}
                                            <div class="impl_filter_dd">
                                                <span>
                                                    <select name="transmission" id="transmission">
                                                        <option value="">Transmission</option>
                                                        @foreach ($transmissions as $transmission)
                                                            <option value="{{ $transmission->id }}"
                                                                {{ request('transmission') == $transmission->id ? 'selected' : '' }}>
                                                                {{ $transmission->transmission_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </span>
                                            </div>

                                            {{-- Fuel Type --}}
                                            <div class="impl_filter_dd">
                                                <span>
                                                    <select name="fuel_type" id="fuel_type">
                                                        <option value="">Fuel Type</option>
                                                        @foreach ($fuelTypes as $fuelType)
                                                            <option value="{{ $fuelType->id }}"
                                                                {{ request('fuel_type') == $fuelType->id ? 'selected' : '' }}>
                                                                {{ $fuelType->fuel_type_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </span>
                                            </div>

                                            {{-- Seater --}}
                                            <div class="impl_filter_dd">
                                                <span>
                                                    <select name="seater" id="seater">
                                                        <option value="">Seater</option>
                                                        @foreach ($seaters as $seater)
                                                            <option value="{{ $seater->id }}"
                                                                {{ request('seater') == $seater->id ? 'selected' : '' }}>
                                                                {{ $seater->seater_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </span>
                                            </div>

                                            {{-- Engine Type --}}
                                            <div class="impl_filter_dd">
                                                <span>
                                                    <select name="engine_type" id="engine_type">
                                                        <option value="">Engine Type</option>
                                                        @foreach ($engineTypes as $engineType)
                                                            <option value="{{ $engineType->id }}"
                                                                {{ request('engine_type') == $engineType->id ? 'selected' : '' }}>
                                                                {{ $engineType->engine_type_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </span>
                                            </div>

                                            {{-- Ownership --}}
                                            <div class="impl_filter_dd">
                                                <span>
                                                    <select name="ownership" id="ownership">
                                                        <option value="">Ownership</option>
                                                        @foreach ($ownerships as $ownership)
                                                            <option value="{{ $ownership->id }}"
                                                                {{ request('ownership') == $ownership->id ? 'selected' : '' }}>
                                                                {{ $ownership->ownership_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </span>
                                            </div>
                                        </div>

                                        {{-- Color --}}
                                        <div class="col-12">
                                            <div class="impl_filter_heading">
                                                <p>COLOR</p>
                                            </div>

                                            <ul class="impl_select_color">
                                                @foreach ($colors as $color)
                                                    <li>
                                                        <input type="checkbox" name="color[]"
                                                            id="color_{{ $color->id }}" value="{{ $color->id }}"
                                                            {{ in_array($color->id, (array) request('color')) ? 'checked' : '' }}>
                                                        <label for="color_{{ $color->id }}">
                                                            {{ $color->color_name }}
                                                        </label>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>

                                        {{-- Price --}}
                                        <div class="col-12">
                                            <div class="impl_filter_heading">
                                                <p>Price</p>
                                            </div>

                                            <div class="impl_range_slider">
                                                <div class="impl_progress"></div>
                                            </div>

                                            <div class="range-input">
                                                <input type="range" class="range-min" name="min_price" 
                                                    min="0" max="{{ $maxPriceDefault }}" 
                                                    value="{{ request('min_price', 0) }}"
                                                    step="1000">

                                                <input type="range" class="range-max" name="max_price" 
                                                    min="0" max="{{ $maxPriceDefault }}" 
                                                    value="{{ request('max_price', $maxPriceDefault) }}"
                                                    step="1000">
                                            </div>

                                            <div class="price-input">
                                                <input type="number" class="input-min"
                                                    value="{{ request('min_price', 0) }}" disabled>
                                                <input type="number" class="input-max"
                                                    value="{{ request('max_price', $maxPriceDefault) }}" disabled>
                                            </div>
                                        </div>

                                        {{-- Button --}}
                                        <div class="col-12">
                                            <div class="impl_filter_btn" style="display: flex; gap: 10px;">
                                                <button type="button" id="filterSubmitBtn" class="impl_btn" style="flex: 1;">Search</button>
                                                <button type="button" id="clearFilterBtn" class="impl_btn" style="flex: 1; background: #6c757d; border-color: #6c757d;">Clear Filter</button>
                                            </div>
                                        </div>

                                    </div>
                                </form>

                            </div>
                        </div>



                    </div>
                </div>

            </div>
        </div>
    </div>

@endsection
@section('css')
<style>
    .impl_pagination ul li a.active {
        background: var(--impl-gradient-color);
        color: var(--impl-white-color);
    }
    .impl_pagination ul li.disabled span {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    /* Loading Spinner */
    .spinner-border {
        display: inline-block;
        width: 3rem;
        height: 3rem;
        vertical-align: text-bottom;
        border: 0.25em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner-border 0.75s linear infinite;
    }
    
    @keyframes spinner-border {
        to { transform: rotate(360deg); }
    }
    
    .text-primary {
        color: var(--impl-primary-color) !important;
    }
    
    /* Fade animation */
    #listing-results {
        transition: opacity 0.3s ease-in-out;
    }
    
    #listing-results.fading {
        opacity: 0.5;
    }
    
    /* Smooth scroll to top on filter */
    html {
        scroll-behavior: smooth;
    }
</style>
@endsection
@section('javascript')
    <!-- Range Slider JS -->
    <script src="{{ asset('theme/assets/js/range-slider.js') }}"></script>
    <script src="{{ asset('theme/assets/js/swiper-bundle.min.js') }}"></script>
    <script src="{{ asset('theme/assets/js/aos.js') }}"></script>
    <script src="{{ asset('theme/assets/js/magnific-popup.min.js') }}"></script>
    <script src="{{ asset('theme/assets/js/custom.js') }}"></script>
    
    <script>
        // Pass price defaults to JavaScript
        window.priceDefaults = {
            min: 0,
            max: {{ $maxPriceDefault }}
        };
    </script>
    
    <script>
        // Define global handler function BEFORE the IIFE to ensure it's available for onclick handlers
        // This must be defined early so the onclick attribute can call it
        window.handleFilterSubmit = function() {
            console.log('handleFilterSubmit called');
            
            // Wait for jQuery to be available
            if (typeof jQuery === 'undefined' || typeof $ === 'undefined') {
                console.log('jQuery not ready, retrying in 100ms...');
                setTimeout(window.handleFilterSubmit, 100);
                return false;
            }
            
            // Wait for filter functions to be available
            if (typeof window.getFilterParams !== 'function' || typeof window.performFilter !== 'function') {
                console.log('Filter functions not ready, retrying in 100ms...');
                setTimeout(window.handleFilterSubmit, 100);
                return false;
            }
            
            // All functions are ready, execute filter
            try {
                const params = window.getFilterParams();
                params.page = 1; // Reset to page 1 when applying new filters
                window.performFilter(params);
            } catch (error) {
                console.error('Error in handleFilterSubmit:', error);
            }
            
            return false;
        };
        
        // Check jQuery availability
        if (typeof jQuery === 'undefined') {
            console.error('jQuery is not loaded!');
        }
        
        (function($) {
            'use strict';
            
            let ajaxRequest = null;
            const listingUrl = '{{ route("user.listing") }}';
            
            // Function to save filter state to localStorage (excluding page)
            function saveFilterState(params) {
                const filterState = {};
                if (params.brand) filterState.brand = params.brand;
                if (params.year) filterState.year = params.year;
                if (params.body_type) filterState.body_type = params.body_type;
                if (params.transmission) filterState.transmission = params.transmission;
                if (params.fuel_type) filterState.fuel_type = params.fuel_type;
                if (params.seater) filterState.seater = params.seater;
                if (params.engine_type) filterState.engine_type = params.engine_type;
                if (params.ownership) filterState.ownership = params.ownership;
                if (params.order) filterState.order = params.order;
                if (params.min_price) filterState.min_price = params.min_price;
                if (params.max_price) filterState.max_price = params.max_price;
                if (params.color && params.color.length > 0) filterState.color = params.color;
                
                localStorage.setItem('listingFilters', JSON.stringify(filterState));
            }
            
            // Function to load filter state from localStorage
            function loadFilterState() {
                try {
                    const saved = localStorage.getItem('listingFilters');
                    if (saved) {
                        return JSON.parse(saved);
                    }
                } catch (e) {
                    console.error('Error loading filter state:', e);
                }
                return {};
            }
            
            // Function to perform AJAX filter request
            window.performFilter = function(params) {
                // Cancel previous request if exists
                if (ajaxRequest) {
                    ajaxRequest.abort();
                }
                
                // Save filter state to localStorage (excluding page)
                saveFilterState(params);
                
                // Show loading indicator
                $('#listing-loader').show();
                $('#listing-results').addClass('fading');
                $('#listing-pagination').hide();
                
                // Perform AJAX request
                console.log('AJAX request with params:', params);
                console.log('Order parameter:', params.order);
                ajaxRequest = $.ajax({
                    url: listingUrl,
                    type: 'GET',
                    data: params,
                    dataType: 'json',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(response) {
                        if (response.success) {
                            console.log('AJAX success, current page:', response.current_page);
                            
                            // Update results
                            $('#listing-results').html(response.html);
                            
                            // Update pagination
                            $('#listing-pagination').html(response.pagination);
                            
                            // Update count
                            const countText = 'Showing ' + response.from + '-' + response.to + ' of ' + response.total + ' Listings';
                            $('#listing-count').text(countText);
                            
                            // Update URL with clean format - only show page number
                            const newUrl = new URL(window.location.origin + window.location.pathname);
                            // Only add page parameter if it's not page 1
                            if (params.page && parseInt(params.page) > 1) {
                                newUrl.searchParams.set('page', params.page);
                            }
                            
                            window.history.pushState({}, '', newUrl);
                            
                            // Reinitialize AOS if available
                            if (typeof AOS !== 'undefined') {
                                AOS.refresh();
                            }
                            
                            // Scroll to top smoothly
                            $('html, body').animate({
                                scrollTop: $('.impl_listing_wrapper').offset().top - 100
                            }, 300);
                        }
                    },
                    error: function(xhr, status, error) {
                        if (status !== 'abort') {
                            console.error('Filter error:', error);
                            alert('An error occurred while filtering. Please try again.');
                        }
                    },
                    complete: function() {
                        // Hide loading indicator
                        $('#listing-loader').hide();
                        $('#listing-results').removeClass('fading');
                        $('#listing-pagination').show();
                        ajaxRequest = null;
                        
                        // Re-attach pagination click handlers after content update
                        setTimeout(function() {
                            attachPaginationHandlers();
                            console.log('Pagination handlers reattached after AJAX update');
                        }, 100);
                    }
                });
            }
            
            // Function to get all filter values
            window.getFilterParams = function() {
                const params = {};
                
                // Get select values
                params.brand = $('#brand').val() || '';
                params.year = $('#year').val() || '';
                params.body_type = $('#body_type').val() || '';
                params.transmission = $('#transmission').val() || '';
                params.fuel_type = $('#fuel_type').val() || '';
                params.seater = $('#seater').val() || '';
                params.engine_type = $('#engine_type').val() || '';
                params.ownership = $('#ownership').val() || '';
                params.order = $('#order').val() || '';
                
                // Get checkbox values (colors)
                const colors = [];
                $('input[name="color[]"]:checked').each(function() {
                    colors.push($(this).val());
                });
                if (colors.length > 0) {
                    params.color = colors;
                }
                
                // Get price range
                const minPrice = $('input[name="min_price"]').val();
                const maxPrice = $('input[name="max_price"]').val();
                if (minPrice) params.min_price = minPrice;
                if (maxPrice) params.max_price = maxPrice;
                
                return params;
            };
            
            // handleFilterSubmit is already defined globally before the IIFE
            // It will automatically have access to window.getFilterParams and window.performFilter
            // once they are defined above
            
            // Function to perform pagination (uses saved filters, doesn't re-apply from form)
            function performPagination(page) {
                // Get saved filters from localStorage (not from form)
                const savedFilters = loadFilterState();
                savedFilters.page = parseInt(page);
                
                console.log('Pagination: Using saved filters, page:', savedFilters.page);
                
                // Use performFilter but don't save again (filters already saved)
                // Cancel previous request if exists
                if (ajaxRequest) {
                    ajaxRequest.abort();
                }
                
                // Show loading indicator
                $('#listing-loader').show();
                $('#listing-results').addClass('fading');
                $('#listing-pagination').hide();
                
                // Perform AJAX request with saved filters
                ajaxRequest = $.ajax({
                    url: listingUrl,
                    type: 'GET',
                    data: savedFilters,
                    dataType: 'json',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(response) {
                        if (response.success) {
                            console.log('Pagination success, current page:', response.current_page);
                            
                            // Update results
                            $('#listing-results').html(response.html);
                            
                            // Update pagination
                            $('#listing-pagination').html(response.pagination);
                            
                            // Update count
                            const countText = 'Showing ' + response.from + '-' + response.to + ' of ' + response.total + ' Listings';
                            $('#listing-count').text(countText);
                            
                            // Update URL with clean format - only show page number
                            const newUrl = new URL(window.location.origin + window.location.pathname);
                            if (page > 1) {
                                newUrl.searchParams.set('page', page);
                            }
                            
                            window.history.pushState({}, '', newUrl);
                            
                            // Reinitialize AOS if available
                            if (typeof AOS !== 'undefined') {
                                AOS.refresh();
                            }
                            
                            // Scroll to top smoothly
                            $('html, body').animate({
                                scrollTop: $('.impl_listing_wrapper').offset().top - 100
                            }, 300);
                        }
                    },
                    error: function(xhr, status, error) {
                        if (status !== 'abort') {
                            console.error('Pagination error:', error);
                            alert('An error occurred while loading the page. Please try again.');
                        }
                    },
                    complete: function() {
                        // Hide loading indicator
                        $('#listing-loader').hide();
                        $('#listing-results').removeClass('fading');
                        $('#listing-pagination').show();
                        ajaxRequest = null;
                        
                        // Re-attach pagination click handlers after content update
                        setTimeout(function() {
                            attachPaginationHandlers();
                            console.log('Pagination handlers reattached after AJAX update');
                        }, 100);
                    }
                });
            }
            
            // Pagination link handler (using event delegation for dynamically loaded content)
            function attachPaginationHandlers() {
                // Remove old handlers and attach new ones
                $(document).off('click', '.pagination-link');
                $(document).on('click', '.pagination-link', function(e) {
                    // Check if this is a direct navigation (e.g., right-click, ctrl+click, or middle mouse button)
                    if (e.ctrlKey || e.metaKey || e.button === 1 || e.button === 2) {
                        // Allow default behavior for direct navigation
                        return true;
                    }
                    
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const $link = $(this);
                    const page = $link.data('page') || $link.attr('data-page');
                    
                    console.log('Pagination clicked, page:', page);
                    
                    if (page) {
                        // Use saved filters from localStorage, just change page
                        performPagination(parseInt(page));
                    } else {
                        console.error('No page number found on pagination link');
                        // Fallback: allow default navigation
                        return true;
                    }
                    return false;
                });
                
                // Also attach click handler directly to pagination container as backup
                $('#listing-pagination').off('click', 'a.pagination-link');
                $('#listing-pagination').on('click', 'a.pagination-link', function(e) {
                    // Check if this is a direct navigation
                    if (e.ctrlKey || e.metaKey || e.button === 1 || e.button === 2) {
                        return true;
                    }
                    
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const $link = $(this);
                    const page = $link.data('page') || $link.attr('data-page');
                    
                    console.log('Pagination backup handler clicked, page:', page);
                    
                    if (page) {
                        // Use saved filters from localStorage, just change page
                        performPagination(parseInt(page));
                    } else {
                        // Fallback: allow default navigation
                        return true;
                    }
                    return false;
                });
            }
            
            // Expose attachPaginationHandlers globally for AJAX callbacks
            window.attachPaginationHandlers = attachPaginationHandlers;
            
            // Function to initialize form filters from URL parameters or localStorage
            function initializeFiltersFromUrl() {
                const urlParams = new URLSearchParams(window.location.search);
                const savedFilters = loadFilterState();
                
                // Priority: URL params > localStorage > default
                // Set brand
                const brand = urlParams.get('brand') || savedFilters.brand || '';
                if (brand) {
                    $('#brand').val(brand);
                }
                
                // Set year
                const year = urlParams.get('year') || savedFilters.year || '';
                if (year) {
                    $('#year').val(year);
                }
                
                // Set body type
                const bodyType = urlParams.get('body_type') || savedFilters.body_type || '';
                if (bodyType) {
                    $('#body_type').val(bodyType);
                }
                
                // Set transmission
                const transmission = urlParams.get('transmission') || savedFilters.transmission || '';
                if (transmission) {
                    $('#transmission').val(transmission);
                }
                
                // Set order
                const order = urlParams.get('order') || savedFilters.order || '';
                if (order) {
                    $('#order').val(order);
                }
                
                // Set colors
                const urlColors = urlParams.getAll('color[]');
                const savedColors = savedFilters.color || [];
                const colors = urlColors.length > 0 ? urlColors : savedColors;
                if (colors.length > 0) {
                    $('input[name="color[]"]').prop('checked', false);
                    colors.forEach(function(colorId) {
                        $('#color_' + colorId).prop('checked', true);
                    });
                }
                
                // Set price range
                const minPrice = urlParams.get('min_price') || savedFilters.min_price || '0';
                const maxPrice = urlParams.get('max_price') || savedFilters.max_price || '{{ $maxPriceDefault }}';
                if (minPrice !== null && minPrice !== '') {
                    $('input[name="min_price"]').val(minPrice);
                    $('.input-min').val(minPrice);
                }
                if (maxPrice !== null && maxPrice !== '') {
                    $('input[name="max_price"]').val(maxPrice);
                    $('.input-max').val(maxPrice);
                }
                
                console.log('Filters initialized from URL/localStorage');
            }
            
            // Initialize when document is ready
            $(document).ready(function() {
                console.log('Listing AJAX filter initialized');
                
                // Check if URL has filter parameters (not just page)
                const urlParams = new URLSearchParams(window.location.search);
                const hasFilterParams = urlParams.has('brand') || urlParams.has('year') || 
                                      urlParams.has('body_type') || urlParams.has('transmission') ||
                                      urlParams.has('fuel_type') || urlParams.has('seater') ||
                                      urlParams.has('engine_type') || urlParams.has('ownership') ||
                                      urlParams.has('color[]') || urlParams.has('min_price') ||
                                      urlParams.has('max_price') || urlParams.has('order');
                
                // Initialize form filters from URL parameters or localStorage on page load
                initializeFiltersFromUrl();
                
                // If URL had filter parameters, clean the URL and save filters to localStorage
                if (hasFilterParams) {
                    const page = urlParams.get('page');
                    const cleanUrl = new URL(window.location.origin + window.location.pathname);
                    if (page && parseInt(page) > 1) {
                        cleanUrl.searchParams.set('page', page);
                    }
                    window.history.replaceState({}, '', cleanUrl);
                    
                    // Save current filters to localStorage
                    const params = window.getFilterParams();
                    saveFilterState(params);
                }
                
                // Test if elements exist
                console.log('Filter button exists:', $('#filterSubmitBtn').length > 0);
                console.log('Filter form exists:', $('#filterForm').length > 0);
                console.log('Order dropdown exists:', $('#order').length > 0);
                if ($('#order').length > 0) {
                    console.log('Order dropdown current value:', $('#order').val());
                }
                
                // Filter form submit button - multiple approaches for reliability
                $('#filterSubmitBtn').off('click').on('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('Filter button clicked (direct handler)');
                    const params = window.getFilterParams();
                    console.log('Filter params:', params);
                    params.page = 1; // Reset to first page on new filter
                    window.performFilter(params);
                    return false;
                });
                
                // Also use event delegation as backup
                $(document).off('click', '#filterSubmitBtn').on('click', '#filterSubmitBtn', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('Filter button clicked (delegated handler)');
                    const params = window.getFilterParams();
                    params.page = 1;
                    window.performFilter(params);
                    return false;
                });
                
                // Handle form submit as fallback
                $('#filterForm').off('submit').on('submit', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('Filter form submitted');
                    const params = window.getFilterParams();
                    params.page = 1;
                    window.performFilter(params);
                    return false;
                });
                
                // Clear filter button handler
                $('#clearFilterBtn').off('click').on('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('Clear filter button clicked');
                    
                    // Clear all select dropdowns
                    $('#brand').val('');
                    $('#year').val('');
                    $('#body_type').val('');
                    $('#transmission').val('');
                    $('#fuel_type').val('');
                    $('#seater').val('');
                    $('#engine_type').val('');
                    $('#ownership').val('');
                    $('#order').val('');
                    
                    // Clear all color checkboxes
                    $('input[name="color[]"]').prop('checked', false);
                    
                    // Reset price sliders to default values
                    const maxPriceDefault = {{ $maxPriceDefault }};
                    const rangeInput = document.querySelectorAll(".range-input input");
                    const priceInput = document.querySelectorAll(".price-input input");
                    const range = document.querySelector(".impl_range_slider .impl_progress");
                    
                    if (rangeInput.length >= 2 && priceInput.length >= 2 && range) {
                        // Reset range inputs
                        rangeInput[0].value = 0;
                        rangeInput[1].value = maxPriceDefault;
                        
                        // Reset price inputs
                        priceInput[0].value = 0;
                        priceInput[1].value = maxPriceDefault;
                        
                        // Update visual progress bar
                        range.style.left = (0 / rangeInput[0].max) * 100 + "%";
                        range.style.right = 100 - (maxPriceDefault / rangeInput[1].max) * 100 + "%";
                    }
                    
                    // Clear localStorage
                    localStorage.removeItem('listingFilters');
                    
                    // Redirect to listing page without any query parameters
                    window.location.href = "{{ route('user.listing') }}";
                });
                
                // Filters only apply when Search button is clicked
                // Removed auto-submit on filter changes - user must click Search button
                
                // Initialize pagination handlers
                attachPaginationHandlers();
                console.log('Pagination handlers attached');
                
                // Test if pagination links exist
                setTimeout(function() {
                    const paginationLinks = $('.pagination-link');
                    console.log('Pagination links found:', paginationLinks.length);
                    if (paginationLinks.length > 0) {
                        console.log('First pagination link:', paginationLinks.first().attr('data-page'));
                    }
                }, 500);
                
                // Handle browser back/forward buttons
                window.addEventListener('popstate', function() {
                    // Get page number from URL if present
                    const urlParams = new URLSearchParams(window.location.search);
                    const page = urlParams.get('page');
                    
                    // Get filter values from form (which should have been restored from localStorage)
                    const params = window.getFilterParams();
                    if (page) {
                        params.page = parseInt(page);
                    } else {
                        params.page = 1;
                    }
                    window.performFilter(params);
                });
                
                // Clear filter state when user navigates away from listing page
                $(window).on('beforeunload', function() {
                    // Only clear if navigating to a different page (not just filtering)
                    if (!window.location.pathname.includes('/listing')) {
                        localStorage.removeItem('listingFilters');
                    }
                });
            });
        })(jQuery);
    </script>
@endsection