{{-- resources/views/home.blade.php --}}
@extends('layouts.app')

@section('styles')
    <style>
        /* Category Tree Styles */
        .category-tree {
            max-height: 500px;
            overflow-y: auto;
            scrollbar-width: thin;
        }

        .category-tree::-webkit-scrollbar {
            width: 5px;
        }

        .category-tree::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 5px;
        }

        .category-item {
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }

        .category-item:hover {
            background-color: #f8f9fa;
            border-left-color: #0d6efd;
        }

        .category-children {
            margin-left: 1.5rem;
            border-left: 2px dashed #dee2e6;
            padding-left: 1rem;
        }

        .toggle-icon {
            transition: transform 0.3s ease;
        }

        .toggle-icon.rotated {
            transform: rotate(180deg);
        }

        /* Price Input Styles */
        .price-input-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .price-input {
            flex: 1;
            height: 38px;
            padding: 0 10px;
            font-size: 16px;
            border-radius: 8px;
            border: 1px solid #ddd;
            transition: all 0.3s ease;
        }

        .price-input:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
            outline: none;
        }

        /* Filter Button */
        .apply-filter-btn {
            background: linear-gradient(45deg, #0d6efd, #0b5ed7);
            color: white;
            padding: 12px 20px;
            font-size: 16px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            border-radius: 8px;
        }

        .apply-filter-btn:hover {
            background: linear-gradient(45deg, #0b5ed7, #0a58ca);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
        }

        /* Product Card Styles - Responsive */
        .product-card {
            transition: all 0.3s ease;
            border: 1px solid #eee;
            border-radius: 12px;
            overflow: hidden;
            background: white;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
            border-color: transparent;
        }

        .product-img-wrapper {
            position: relative;
            width: 100%;
            padding-top: 75%;
            /* 4:3 Aspect Ratio */
            overflow: hidden;
            background: #f8f9fa;
        }

        .product-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .product-card:hover .product-img {
            transform: scale(1.05);
        }

        /* Hide floating heart icon completely */
        .wishlist-icon {
            display: none !important;
        }

        /* Product Info Styles */
        .product-info {
            padding: 15px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .product-info h6 {
            font-size: 1rem;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 2.4rem;
        }

        .product-info .meta-info {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 10px;
            font-size: 0.85rem;
            color: #6c757d;
        }

        .product-info .meta-info span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .product-info .price-section {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }

        .product-info .price {
            font-size: 1.2rem;
            font-weight: bold;
            color: #0d6efd;
        }

        .product-info .price.free {
            color: #28a745;
        }

        .favorite-btn {
            padding: 5px 12px;
            font-size: 0.85rem;
        }

        .favorite-btn i {
            margin-right: 4px;
        }

        /* Loading Spinner */
        .loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            display: none;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #0d6efd;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Breadcrumb Styles */
        .breadcrumb-container {
            background: linear-gradient(45deg, #f8f9fa, #e9ecef);
            padding: 12px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .breadcrumb-item+.breadcrumb-item::before {
            content: "›";
            font-size: 18px;
            line-height: 1;
            color: #6c757d;
        }

        .breadcrumb-item a {
            color: #0d6efd;
            text-decoration: none;
        }

        .breadcrumb-item a:hover {
            color: #0a58ca;
            text-decoration: underline;
        }

        .breadcrumb-item.active {
            color: #6c757d;
            font-weight: 500;
        }

        /* Alert Styles */
        .alert-dismissible {
            border-radius: 10px;
            border-left-width: 4px;
        }

        /* Pagination Styles - Responsive */
        .pagination {
            flex-wrap: wrap;
            gap: 5px;
            justify-content: center;
        }

        .pagination .page-item {
            margin: 2px;
        }

        .pagination .page-link {
            padding: 8px 12px;
            border-radius: 8px !important;
            min-width: 40px;
            text-align: center;
            color: #0d6efd;
            transition: all 0.3s ease;
        }

        .pagination .page-link:hover {
            background: #0d6efd;
            color: white;
            transform: translateY(-2px);
        }

        .page-item.active .page-link {
            background: #0d6efd;
            border-color: #0d6efd;
        }

        #pagination-container {
            overflow-x: auto;
            padding: 10px 0;
            -webkit-overflow-scrolling: touch;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .category-tree {
                max-height: 300px;
            }

            .product-img-wrapper {
                padding-top: 100%;
                /* 1:1 Aspect Ratio for mobile */
            }

            .breadcrumb-container {
                font-size: 14px;
                padding: 10px 15px;
            }

            .product-info h6 {
                font-size: 0.95rem;
                min-height: 2.2rem;
            }

            .product-info .meta-info {
                font-size: 0.8rem;
                gap: 8px;
            }

            .product-info .price {
                font-size: 1.1rem;
            }

            .favorite-btn {
                padding: 4px 10px;
                font-size: 0.8rem;
            }
        }

        @media (max-width: 576px) {
            .pagination .page-link {
                padding: 6px 10px;
                min-width: 35px;
                font-size: 14px;
            }

            .product-info {
                padding: 12px;
            }

            .product-info h6 {
                font-size: 0.9rem;
                min-height: 2rem;
            }

            .favorite-btn span {
                display: none;
                /* Hide text on very small screens */
            }

            .favorite-btn i {
                margin-right: 0;
            }
        }

        /* Grid System - Responsive */
        .row.g-4 {
            --bs-gutter-y: 1.5rem;
        }

        @media (min-width: 576px) {
            .col-sm-12 {
                flex: 0 0 auto;
                width: 100%;
            }
        }

        @media (min-width: 768px) {
            .col-md-6 {
                flex: 0 0 auto;
                width: 50%;
            }
        }

        @media (min-width: 992px) {
            .col-lg-4 {
                flex: 0 0 auto;
                width: 33.33333333%;
            }
        }
    </style>
@endsection

@section('content')
    <div class="container mt-4">
        {{-- Flash Messages --}}
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if (session('status'))
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <i class="bi bi-info-circle-fill me-2"></i>
                {{ session('status') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- Breadcrumb --}}
        <div class="d-flex justify-content-between align-items-center mb-3">

            {{-- Breadcrumb --}}
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('welcome') }}">
                            <i class="bi bi-house-door-fill me-1"></i>Home
                        </a>
                    </li>
                    <li class="breadcrumb-item active">Categories</li>
                </ol>
            </nav>

            {{-- Button --}}
            {{-- <a href="{{ route('categories.index') }}" class="btn btn-outline-primary">
                <i class="bi bi-grid"></i> View All Categories
            </a> --}}

            <div class="d-flex gap-2">

               

                <a href="{{ route('categories.index') }}" class="btn btn-outline-primary">
                    <i class="bi bi-grid"></i> View All Categories
                </a>

            </div>

        </div>
        
        
         <!-- Popular Categories -->
        <div class="card shadow-sm mb-4">
            <div class="card-body">

                <h5 class="mb-3 fw-bold">
                    <i class="bi bi-grid-fill text-primary"></i>
                    Popular Categories
                </h5>

                <div class="row text-center">

                    <div class="col-md-2 col-6 mb-3">
                        <a href="{{ url('/categories/electronics') }}" class="text-decoration-none">
                            <i class="bi bi-phone fs-3 text-primary"></i>
                            <div>Electronics</div>
                        </a>
                    </div>

                    <div class="col-md-2 col-6 mb-3">
                        <a href="{{ url('/categories/vehicle-auto-bike-boat') }}" class="text-decoration-none">
                            <i class="bi bi-car-front fs-3 text-primary"></i>
                            <div>Vehicles</div>
                        </a>
                    </div>

                    <div class="col-md-2 col-6 mb-3">
                        <a href="{{ url('/categories/real-estate') }}" class="text-decoration-none">
                            <i class="bi bi-house fs-3 text-primary"></i>
                            <div>Real Estate</div>
                        </a>
                    </div>

                    <div class="col-md-2 col-6 mb-3">
                        <a href="{{ url('/categories/jobs') }}" class="text-decoration-none">
                            <i class="bi bi-briefcase fs-3 text-primary"></i>
                            <div>Jobs</div>
                        </a>
                    </div>

                    <div class="col-md-2 col-6 mb-3">
                        <a href="{{ url('/categories/services') }}" class="text-decoration-none">
                            <i class="bi bi-tools fs-3 text-primary"></i>
                            <div>Services</div>
                        </a>
                    </div>

                    <div class="col-md-2 col-6 mb-3">
                        <a href="{{ url('/categories/pets') }}" class="text-decoration-none">
                            <i class="bi bi-heart fs-3 text-primary"></i>
                            <div>Pets</div>
                        </a>
                    </div>

                </div>

            </div>
        </div>

        <div class="row g-4">
            {{-- Left Column: Filters --}}
            <div class="col-md-3 col-12">
                {{-- Mobile Filter Toggle --}}
                <button class="btn btn-primary w-100 d-md-none mb-3" type="button" data-bs-toggle="collapse"
                    data-bs-target="#filterPanel">
                    <i class="bi bi-sliders2 me-2"></i>Show Filters
                    <i class="bi bi-chevron-down float-end"></i>
                </button>

                {{-- Filter Panel --}}
                <div class="collapse d-md-block" id="filterPanel">
                    {{-- Categories Section --}}
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white py-3">
                            <h5 class="mb-0 fw-bold">
                                <i class="bi bi-grid-3x3-gap-fill me-2 text-primary"></i>
                                Categories
                            </h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="category-tree p-3">
                                @foreach ($categories as $category)
                                    @include('partials.category-item', [
                                        'category' => $category,
                                        'level' => 0,
                                    ])
                                @endforeach
                            </div>
                        </div>
                    </div>

                    {{-- Filter Form --}}
                    <form id="filter-form" class="filter-form">
                        @csrf

                        {{-- Location Filter --}}
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-white py-3">
                                <h5 class="mb-0 fw-bold">
                                    <i class="bi bi-geo-alt-fill me-2 text-primary"></i>
                                    Location
                                </h5>
                            </div>
                            <div class="card-body">
                                <select name="location" id="location" class="form-select">
                                    <option value="">All Locations</option>
                                    @foreach ($locations as $location)
                                        <option value="{{ $location->name }}"
                                            {{ request('location') == $location->name ? 'selected' : '' }}>
                                            {{ $location->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Price Filter --}}
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-white py-3">
                                <h5 class="mb-0 fw-bold">
                                    <i class="bi me-2 text-primary"> {{ config('app.currency_symbol') }}</i>
                                    Price Range
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="price-input-group">
                                    <div class="input-group">
                                        <span class="input-group-text">{{ config('app.currency_symbol', '£') }}</span>
                                        <input type="number" class="form-control price-input" name="min_price"
                                            id="min_price" placeholder="Min" value="{{ request('min_price', 0) }}"
                                            min="0" step="0.01">
                                    </div>
                                    <span class="text-muted">to</span>
                                    <div class="input-group">
                                        <span class="input-group-text">{{ config('app.currency_symbol', '£') }}</span>
                                        <input type="number" class="form-control price-input" name="max_price"
                                            id="max_price" placeholder="Max" value="{{ request('max_price') }}"
                                            min="0" step="0.01">
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Brand Filter --}}
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-white py-3">
                                <h5 class="mb-0 fw-bold">
                                    <i class="bi bi-tag-fill me-2 text-primary"></i>
                                    Brand
                                </h5>
                            </div>
                            <div class="card-body">
                                <select name="brand" id="brand" class="form-select">
                                    <option value="">All Brands</option>
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->id }}"
                                            {{ request('brand') == $brand->id ? 'selected' : '' }}>
                                            {{ $brand->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Apply Filters Button --}}
                        <button type="submit" class="apply-filter-btn">
                            <i class="bi bi-funnel me-2"></i>Apply Filters
                        </button>

                        {{-- Clear Filters --}}
                        <button type="button" class="btn btn-outline-secondary w-100 mt-2" onclick="clearAllFilters()">
                            <i class="bi bi-arrow-counterclockwise me-2"></i>Clear All Filters
                        </button>
                    </form>
                </div>
            </div>

            {{-- Right Column: Main Content --}}
            <div class="col-md-9">
                {{-- Google AdSense Top --}}
                <div class="card bg-light border-0 mb-4">
                    <div class="card-body text-center p-3">
                        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                        <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4155905641018537"
                            data-ad-slot="9487563407" data-ad-format="auto" data-full-width-responsive="true"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
                </div>

                {{-- Results Header --}}
                <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
                    <div>
                        <h5 class="mb-1" id="results-title">Latest Ads</h5>
                        <p class="text-muted mb-0">
                            <i class="bi bi-grid-3x3-gap-fill me-1"></i>
                            <span id="total-results">{{ $ads->total() }}</span> ads found
                        </p>
                    </div>

                    {{-- Sort Options --}}
                    <div class="mt-3 mt-sm-0">
                        <select class="form-select form-select-sm" id="sort-ads" style="width: auto;">
                            <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Latest</option>
                            <option value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>Price: Low to
                                High</option>
                            <option value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>Price: High
                                to Low</option>
                            <option value="popular" {{ request('sort') == 'popular' ? 'selected' : '' }}>Most Popular
                            </option>
                        </select>
                    </div>
                </div>

                {{-- Loader --}}
                <div class="loader-overlay" id="loader">
                    <div class="spinner"></div>
                </div>

                {{-- Ads Container --}}
                <div id="ads-container">
                    @include('partials.ads-grid', [
                        'ads' => $ads,
                        'favoriteAdIds' => $favoriteAdIds ?? [],
                    ])
                </div>

                {{-- Pagination Container --}}
                <div id="pagination-container" class="d-flex justify-content-center mt-4">
                    {{ $ads->withQueryString()->links('pagination::bootstrap-5') }}
                </div>

                {{-- Popular Ads Section --}}
                @if (isset($popularAds) && $popularAds->count() > 0)
                    <hr class="my-5">
                    <div class="popular-ads-section">
                        <h3 class="text-center mb-4 fw-bold">
                            <i class="bi bi-star-fill text-warning me-2"></i>
                            Popular Ads
                        </h3>
                        <div class="row g-4">
                            @foreach ($popularAds as $ad)
                                <div class="col-md-3 col-6">
                                    @include('partials.ad-card-mini', ['ad' => $ad])
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Recent Ads Section --}}
                @if (isset($recentAds) && $recentAds->count() > 0)
                    <hr class="my-5">
                    <div class="recent-ads-section">
                        <h3 class="text-center mb-4 fw-bold">
                            <i class="bi bi-clock-history text-primary me-2"></i>
                            Recently Uploaded
                        </h3>
                        <div class="row g-4">
                            @foreach ($recentAds as $ad)
                                <div class="col-md-3 col-6">
                                    @include('partials.ad-card-mini', ['ad' => $ad])
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Google AdSense Bottom --}}
                <div class="card bg-light border-0 mt-5">
                    <div class="card-body text-center p-3">
                        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                        <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4155905641018537"
                            data-ad-slot="9487563407" data-ad-format="auto" data-full-width-responsive="true"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            console.log('Document ready - initializing...');

            // Initialize tooltips
            initializeTooltips();

            // Category toggle functionality
            initializeCategoryToggles();

            // Filter form submission
            initializeFilterForm();

            // Sort change handler
            initializeSort();

            // Favorite button handler
            initializeFavorites();

            // Initialize breadcrumb from URL parameters
            initializeBreadcrumb();

            // Initialize pagination
            initializePagination();
        });

        // ============================================
        // Tooltips
        // ============================================
        function initializeTooltips() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        }

        // ============================================
        // Category Tree Functions
        // ============================================
        function initializeCategoryToggles() {
            $('.category-toggle').off('click').on('click', function(e) {
                e.preventDefault();
                e.stopPropagation();

                const $this = $(this);
                const categoryId = $this.data('id');
                const categoryName = $this.data('name');
                const $children = $('#category-' + categoryId);
                const $icon = $this.find('.toggle-icon i');

                if ($children.length && $children.children().length > 0) {
                    if ($children.is(':visible')) {
                        $children.slideUp(300);
                        if ($icon.length) {
                            $icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
                        }
                    } else {
                        $children.slideDown(300);
                        if ($icon.length) {
                            $icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
                        }
                    }
                } else {
                    fetchCategoryAds(categoryId, categoryName);
                }
            });
        }

        function fetchCategoryAds(categoryId, categoryName) {
            showLoader();
            updateBreadcrumb(categoryName, categoryId);

            $.ajax({
                url: '{{ route('category.ads') }}',
                method: 'GET',
                data: {
                    category_id: categoryId,
                    sort: $('#sort-ads').val()
                },
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function(response) {
                    if (response.success) {
                        $('#ads-container').html(response.html);
                        $('#pagination-container').html(response.pagination);
                        $('#results-title').text(categoryName + ' Ads');
                        $('#total-results').text(response.total);

                        updateUrlParameter('category', categoryId);
                        updateUrlParameter('category_name', encodeURIComponent(categoryName));
                    } else {
                        showNotification(response.message || 'Error loading ads', 'error');
                    }
                },
                error: function() {
                    showNotification('Failed to load ads. Please try again.', 'error');
                },
                complete: function() {
                    hideLoader();
                }
            });
        }

        // ============================================
        // Filter Functions
        // ============================================
        function initializeFilterForm() {
            $('#filter-form').on('submit', function(e) {
                e.preventDefault();
                applyFilters();
            });

            $('#location, #brand').on('change', function() {
                applyFilters();
            });
        }

        function applyFilters(page = 1) {
            showLoader();

            var formData = $('#filter-form').serialize();
            formData += '&page=' + page;
            formData += '&sort=' + $('#sort-ads').val();

            $.ajax({
                url: '{{ route('filter.ads') }}',
                method: 'GET',
                data: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function(response) {
                    if (response.success) {
                        $('#ads-container').html(response.html);
                        $('#pagination-container').html(response.pagination);
                        $('#results-title').text('Filtered Ads');
                        $('#total-results').text(response.total);

                        updateBreadcrumb('Filtered Results', null);
                        updateUrlWithFilters(formData);
                    } else {
                        showNotification(response.message || 'Error applying filters', 'error');
                    }
                },
                error: function() {
                    showNotification('Error applying filters. Please try again.', 'error');
                },
                complete: function() {
                    hideLoader();
                }
            });
        }

        function clearAllFilters() {
            $('#filter-form')[0].reset();
            $('#min_price').val('');
            $('#max_price').val('');
            applyFilters();
        }

        // ============================================
        // Pagination Functions
        // ============================================
        function initializePagination() {
            $(document).off('click', '.pagination a').on('click', '.pagination a', function(e) {
                e.preventDefault();

                var page = $(this).attr('href').split('page=')[1];
                var url = new URL($(this).attr('href'));
                var categoryId = url.searchParams.get('category');

                showLoader();

                if (categoryId) {
                    var categoryName = $('#current-category-breadcrumb').text();

                    $.ajax({
                        url: '{{ route('category.ads') }}',
                        method: 'GET',
                        data: {
                            category_id: categoryId,
                            page: page,
                            sort: $('#sort-ads').val()
                        },
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        success: function(response) {
                            if (response.success) {
                                $('#ads-container').html(response.html);
                                $('#pagination-container').html(response.pagination);
                                $('#results-title').text(categoryName + ' Ads');
                                $('#total-results').text(response.total);

                                initializeFavorites();
                                initializeTooltips();

                                $('html, body').animate({
                                    scrollTop: $('#ads-container').offset().top - 100
                                }, 500);

                                updateUrlParameter('category', categoryId);
                                updateUrlParameter('page', page);
                            }
                        },
                        error: function() {
                            showNotification('Error loading page', 'error');
                        },
                        complete: function() {
                            hideLoader();
                        }
                    });
                } else {
                    var formData = $('#filter-form').serialize();
                    formData += '&page=' + page;
                    formData += '&sort=' + $('#sort-ads').val();

                    $.ajax({
                        url: '{{ route('filter.ads') }}',
                        method: 'GET',
                        data: formData,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        success: function(response) {
                            if (response.success) {
                                $('#ads-container').html(response.html);
                                $('#pagination-container').html(response.pagination);
                                $('#results-title').text('Filtered Ads');
                                $('#total-results').text(response.total);

                                initializeFavorites();
                                initializeTooltips();

                                $('html, body').animate({
                                    scrollTop: $('#ads-container').offset().top - 100
                                }, 500);

                                updateUrlParameter('page', page);
                            }
                        },
                        error: function() {
                            showNotification('Error loading page', 'error');
                        },
                        complete: function() {
                            hideLoader();
                        }
                    });
                }
            });
        }

        // ============================================
        // Sort Functions
        // ============================================
        function initializeSort() {
            $('#sort-ads').on('change', function() {
                var categoryId = getUrlParameter('category');

                if (categoryId) {
                    var categoryName = $('#current-category-breadcrumb').text();
                    fetchCategoryAds(categoryId, categoryName);
                } else {
                    applyFilters();
                }
            });
        }

        // ============================================
        // Favorite Functions
        // ============================================
        function initializeFavorites() {
            $(document).off('click', '.favorite-btn').on('click', '.favorite-btn', function(e) {
                e.preventDefault();
                e.stopPropagation();

                const $btn = $(this);
                const adId = $btn.data('ad-id');

                $.ajax({
                    url: '{{ route('favorite.toggle') }}',
                    method: 'POST',
                    data: {
                        ad_id: adId,
                        _token: '{{ csrf_token() }}'
                    },
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(response) {
                        if (response.success) {
                            if (response.favorited) {
                                $btn.removeClass('btn-outline-danger').addClass('btn-danger');
                                $btn.find('i').removeClass('bi-heart').addClass('bi-heart-fill');
                                $btn.html('<i class="bi bi-heart-fill"></i> Favorited');
                                showNotification('Added to favorites!', 'success');
                            } else {
                                $btn.removeClass('btn-danger').addClass('btn-outline-danger');
                                $btn.find('i').removeClass('bi-heart-fill').addClass('bi-heart');
                                $btn.html('<i class="bi bi-heart"></i> Favorite');
                                showNotification('Removed from favorites!', 'success');
                            }
                        } else if (response.message === 'Please login to add favorites') {
                            window.location.href = '{{ route('login') }}';
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 401) {
                            window.location.href = '{{ route('login') }}';
                        } else {
                            showNotification('Error toggling favorite', 'error');
                        }
                    }
                });
            });
        }

        // ============================================
        // Breadcrumb Functions
        // ============================================
        function initializeBreadcrumb() {
            var categoryId = getUrlParameter('category');
            var categoryName = getUrlParameter('category_name');

            if (categoryId && categoryName) {
                updateBreadcrumb(decodeURIComponent(categoryName), categoryId);
            }
        }

        function updateBreadcrumb(categoryName, categoryId) {
            var $breadcrumb = $('#breadcrumb');
            $breadcrumb.find('.breadcrumb-item.active').remove();

            if (categoryName) {
                $breadcrumb.append(`
                    <li class="breadcrumb-item active" data-category-id="${categoryId || ''}">
                        ${categoryName}
                    </li>
                `);
            } else {
                $breadcrumb.append('<li class="breadcrumb-item active">All Categories</li>');
            }
        }

        // ============================================
        // URL Helper Functions
        // ============================================
        function updateUrlParameter(key, value) {
            var url = new URL(window.location.href);
            url.searchParams.set(key, value);
            window.history.pushState({}, '', url);
        }

        function updateUrlWithFilters(formData) {
            var url = new URL(window.location.href);
            var params = new URLSearchParams(formData);

            url.search = '';
            params.forEach(function(value, key) {
                if (value) {
                    url.searchParams.set(key, value);
                }
            });

            window.history.pushState({}, '', url);
        }

        function getUrlParameter(name) {
            var url = new URL(window.location.href);
            return url.searchParams.get(name);
        }

        // ============================================
        // Loader Functions
        // ============================================
        function showLoader() {
            $('#loader').fadeIn(200);
        }

        function hideLoader() {
            $('#loader').fadeOut(200);
        }

        // ============================================
        // Notification Functions
        // ============================================
        function showNotification(message, type = 'success') {
            $('.toast-notification').remove();

            var toastHtml = `
                <div class="toast-notification position-fixed bottom-0 end-0 m-3" style="z-index: 9999;">
                    <div class="toast align-items-center text-white bg-${type} border-0 show" role="alert">
                        <div class="d-flex">
                            <div class="toast-body">
                                ${message}
                            </div>
                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                        </div>
                    </div>
                </div>
            `;

            $('body').append(toastHtml);

            setTimeout(function() {
                $('.toast-notification').fadeOut(300, function() {
                    $(this).remove();
                });
            }, 3000);
        }

        // Handle browser back/forward buttons
        window.addEventListener('popstate', function() {
            location.reload();
        });
    </script>
@endsection