@extends('layouts.app');


@section('styles')
    <style>
        .price-input {
            width: 100%;
            height: 38px;
            padding: 0 10px;
            font-size: 16px;
            border-radius: 8px;
            border: 1px solid #ddd;
        }

        .price-input:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
        }

        .apply-filter-btn {
            color: white;
            padding: 12px 20px;
            font-size: 16px;

            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .apply-filter-btn i {
            margin-right: 8px;
        }

        .input-group {
            margin-bottom: 20px;
        }
    </style>
@endsection

@section('content')
@if(session('error'))
<div id="flash-message" class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif
    <div class="container-fluid bg-success py-3 rounded">

        <div class="row">
            <div class="col-12 text-center">
                {{-- <p class="text-white">Google Ads area</p> --}}
                <div>
                    <!-- Google AdSense responsive ad -->
                    <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"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-4">
        <div class="row g-4">
            <!-- Left Column: Categories -->
            <div class="col-md-3 col-12  mb-4">
                <button class="navbar-toggler d-md-none mb-3" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarCat" aria-controls="navbarCat" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span> Categories
                </button>



                <div class="collapse d-md-block category-tab p-3 rounded card shadow-sm" id="navbarCat">

                    <h4 class="mb-4"><b>Categories</b></h4>
                    <div class="row">
                        @foreach ($categories as $category)
                            <div class="col-12 mb-3">
                                <a href="javascript:void(0)"
                                    class="text-decoration-none text-dark d-flex justify-content-between align-items-center p-2 rounded border border-light hover-effect category-toggle"
                                    data-toggle="{{ $category->id }}">
                                    <h6 class="card-title mb-0 d-inline-block"><span
                                            class="small">{{ $category->name }}</span></h6>

                                    @if ($category->children->count() > 0)
                                        <span class="toggle-icon">
                                            <i class="fas fa-chevron-down"></i>
                                        </span>
                                    @endif
                                </a>

                                @if ($category->children->count() > 0)
                                    <div id="category-{{ $category->id }}" class="category-children"
                                        style="display: none; padding-left: 20px;">
                                        @foreach ($category->children as $child)
                                            <a href="javascript:void(0)"
                                                class="text-decoration-none text-dark d-flex justify-content-between align-items-center p-2 rounded border border-light hover-effect category-toggle"
                                                data-toggle="{{ $child->id }}">
                                                <h6 class="card-title mb-0 d-inline-block"><span
                                                        class="small">{{ $child->name }}</span></h6>

                                                @if ($child->children->count() > 0)
                                                    <span class="toggle-icon">
                                                        <i class="fas fa-chevron-down"></i>
                                                    </span>
                                                @endif
                                            </a>

                                            @if ($child->children->count() > 0)
                                                <div id="category-{{ $child->id }}" class="category-children"
                                                    style="display: none; padding-left: 20px;">
                                                    @foreach ($child->children as $grandchild)
                                                        <a href="javascript:void(0)"
                                                            class="text-decoration-none text-dark d-flex justify-content-between align-items-center p-2 rounded border border-light hover-effect category-toggle"
                                                            data-toggle="{{ $grandchild->id }}">
                                                            <h6 class="card-title mb-0 d-inline-block">
                                                                <span class="small"> {{ $grandchild->name }}</span>
                                                            </h6>
                                                            @if ($grandchild->children->count() > 0)
                                                                <span class="toggle-icon">
                                                                    <i class="fas fa-chevron-down"></i>
                                                                </span>
                                                            @endif
                                                        </a>

                                                        @if ($grandchild->children->count() > 0)
                                                            <div id="category-{{ $grandchild->id }}"
                                                                class="category-children"
                                                                style="display: none; padding-left: 20px;">
                                                                @foreach ($grandchild->children as $greatgrandchild)
                                                                    <a href="javascript:void(0)"
                                                                        class="text-decoration-none text-dark d-flex justify-content-between align-items-center p-2 rounded border border-light hover-effect">
                                                                        <h6 class="card-title mb-0">
                                                                            {{ $greatgrandchild->name }}</h6>
                                                                    </a>
                                                                @endforeach
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>

                </div>
                <hr>

                <!-- Location wise Search -->
                <form id="filter-form" class="form-inline">
                    <div class="p-3 rounded card shadow-sm mt-2">
                        <h4 class="mb-4"><b>Location</b></h4>
                        <div class="row">
                            <div class="mb-3">
                                <select name="location" id="location" class="form-select">
                                    <option value="">Select a Location</option>
                                    @foreach ($locations as $location)
                                        <option value="{{ $location->name }}">{{ $location->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <hr>

                    <!-- Price wise Search -->
                    <div class="p-3 rounded card shadow-sm mt-2">
                        <h4 class="mb-4"><b>Price</b></h4>
                        <div class="row">
                            <div class="col-12">
                                <div class="input-group mb-3">
                                    <div class="input-group-text">$</div>
                                    <input type="number" class="form-control price-input" name="min_price" id="min_price"
                                        placeholder="From" value="0" />
                                    <span class="input-group-text">to</span>
                                    <input type="number" class="form-control price-input" name="max_price" id="max_price"
                                        placeholder="To" />
                                </div>

                                <button class="apply-filter-btn btn_all_button" type="submit">
                                    <i class="bi bi-funnel"></i> Apply Filter
                                </button>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <!-- Brand wise Search -->
                    <div class="p-3 rounded card shadow-sm mt-2">
                        <h4 class="mb-4"><b>Brand</b></h4>
                        <div class="row">
                            <div class="mb-3">
                                <select name="brand" id="brand" class="form-select">
                                    <option value="">Choose a Brand</option>
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div> <!-- End of left side Main Container -->


            <!-- Right Column: Main Content Start -->
            <div class="col-md-9">
                <div class="bg-danger text-white p-3 rounded">
                    {{-- <p>Paid Ads of site User here</p> --}}
                    <div>
                        <!-- Google AdSense responsive ad -->
                        <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"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
                </div>

                <!-- Right Column: Main Content -->
<!-- Loader -->
<div id="loader" style="display:none; text-align:center;">
    <div class="spinner"></div>
</div>

<!-- Results -->
<div id="search-results"></div>

                <div class="container lp-products-container">
                    <div id="ads-container" class="row g-4">
                        <!-- Product Card -->
                        @foreach ($ads as $index => $ad)
                            <div class="col-lg-4 col-md-6 col-sm-12" id="ad-item">
                                <a href="{{ route('ads.show', $ad->id) }}" class="lp-product-link">
                                    <div class="lp-product-card">
                                        <div class="lp-product-img-wrapper">
                                            @if ($ad->images->count() > 0)
                                                <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}"
                                                    class="lp-product-img" alt="product Image"
                                                    onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                                                <span class="lp-wishlist-icon favorite-btn"
                                                    data-ad-id="{{ $ad->id }}"
                                                    onclick="toggleWishlist(this)">&#10084;</span>
                                            @else
                                                <img src="{{ asset('storage/product_images/default.png') }}"
                                                    class="lp-product-img" alt="No Image">
                                            @endif

                                        </div>
                                        @php
                                            $isFavorited = in_array($ad->id, $favoriteAdIds);
                                        @endphp

                                        <div class="d-flex justify-content-end me-2">
                                            <button
                                                class="btn btn-sm favorite-btn {{ $isFavorited ? 'btn-danger' : 'btn-outline-danger' }}"
                                                data-ad-id="{{ $ad->id }}">
                                                <i class="bi {{ $isFavorited ? 'bi-heart-fill' : 'bi-heart' }}"></i>
                                                {{ $isFavorited ? 'Favorited' : 'Favorite' }}
                                            </button>
                                        </div>
                                        <hr>
                                        <div class="lp-product-info">
                                            <p class="lp-product-name card-title">{{ $ad->title ?? '' }}</p>
                                            <p class="lp-product-location card-state">State: {{ $ad->state ?? '' }}</p>
                                            <p class="lp-product-upload-time">Uploaded: {{ $ad->created_at }}</p>
                                            <span class="lp-product-price">{{ config('app.currency_symbol') }}
                                                {{ number_format($ad->price, 2) }}</span>
                                        </div>



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

                            <!-- Display Google Ad after every 12th -->
                            @if (($index + 1) % 12 == 0)
                                <div class="col-12">
                                    <div>
                                        <!-- Google AdSense responsive ad -->
                                        <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"></ins>
                                        <script>
                                            (adsbygoogle = window.adsbygoogle || [])
                                            .push({});
                                        </script>
                                    </div>
                                </div>
                            @endif
                        @endforeach

                        {{-- <div class="d-flex justify-content-end mt-4">
                            {{ $ads->links() }}
                        </div> --}}

                        <!-- Pagination Links -->
                        {{-- <div class="d-flex justify-content-start mt-4">
                            {{ $ads->onEachSide(1)->links('pagination::bootstrap-5') }}
                        </div> --}}
                        <div class="col-12 d-flex justify-content-center">
                            {{ $ads->links('pagination::bootstrap-5') }}
                        </div>

                        {{-- <!-- Showing X to Y of Z results -->
                        <div class="d-flex justify-content-start mt-2">
                            <p>Showing {{ $ads->firstItem() }} to {{ $ads->lastItem() }} of {{ $ads->total() }} results
                            </p>
                        </div> --}}
                    </div>
                    <hr>


                    <!-- Popular Ads -->
                    <div class="row mt-5 shadow">
                        <h3 class="col-12 text-center mt-3">Popular Ads</h3>
                        @foreach ($popularAds as $ad)
                            <div class="col-md-3 col-sm-6 mb-4">
                                <a href="{{ route('ads.show', $ad->id) }}" class="lp-product-link">
                                    <div class="lp-product-card">
                                        <div class="lp-product-img-wrapper">
                                            @if ($ad->images->count() > 0)
                                                <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}"
                                                    class="lp-product-img" alt="User Profile Image"
                                                    onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                                            @else
                                                <img src="{{ asset('storage/product_images/default.png') }}"
                                                    class="card-img-top" alt="No Image">
                                            @endif
                                        </div>
                                        <hr>
                                        <div class="lp-product-info">
                                            <p class="lp-product-name">{{ $ad->title ?? '' }}</p>
                                            {{-- <p class="lp-product-location">Location: {{$ad->location->name}}</p> --}}
                                            <p class="lp-product-upload-time">Uploaded: {{ $ad->created_at }}</p>
                                            <span class="">Price : {{ config('app.currency_symbol') }}
                                                {{ number_format($ad->price, 2) }}</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>

                    <!-- Recently Uploaded Ads -->
                    <div class="row mt-5 shadow">
                        <h3 class="col-12 text-center mt-3">Recently Uploaded Ads</h3>
                        @foreach ($recentAds as $ad)
                            <div class="col-md-3 col-sm-6 mb-4">
                                <a href="{{ route('ads.show', $ad->id) }}" class="lp-product-link">
                                    <div class="lp-product-card">
                                        <div class="lp-product-img-wrapper">
                                            @if ($ad->images->count() > 0)
                                                <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}"
                                                    class="lp-product-img" alt="User Profile Image"
                                                    onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                                            @else
                                                <img src="{{ asset('storage/product_images/default.png') }}"
                                                    class="card-img-top" alt="No Image">
                                            @endif
                                        </div>
                                        <hr>
                                        <div class="lp-product-info">
                                            <p class="lp-product-name">{{ $ad->title ?? '' }}</p>
                                            {{-- <p class="lp-product-location">Location: {{$ad->location->name}}</p> --}}
                                            <p class="lp-product-upload-time">Uploaded: {{ $ad->created_at }}</p>
                                            <span class="">Price : {{ config('app.currency_symbol') }}
                                                {{ number_format($ad->price, 2) }}</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection



{{-- @section('rightads')
     <p>Right Ads</p>
    <img src="https://lh3.googleusercontent.com/9XANu0kkl94p8G9WgLUL14Ot1ROi1a1Hbw1Tpzb78Z9HaMsxywAA0sbLm0cwWt15PIfIHxUmds_7QONbYkowaWAMXbBSKFCb6SwfyKOWRV4FfHqJOXdqCVvwEPfEJiIRRmCf5frq8W8YcLbi9fj5dvFJezbcTpgqz-OKcWh9MaI0Pj6IaKgrQPkTq6dgjSQIpkqhdbJYWPMLvWrHxiyPWDZEmMGRIzd8cidTCVQHG3uPk8MowwnBpgy2Ptr3U_PU8JtuN3u90Xnp-noeGSYOMOmgRWBFig1rokY9AQjAPp6-e40OTGSjdpmJhomrVDyLZIBtPvOwS9_5TlNmtLG2x5i23rBQmuVyqSAJsshervLggFikmPGHx4VxfaRbiih2pH47F6mvjbY5U14yKCGFEO8PqdYmBpAS2hWjme5evNuN8Uj6fbvXMAAQ1KCOVfPHEtjz0LPJrntsGj_cy0RiVvN2YV6CMe2c0YPadHRDbKUbwQdod99HB6q6nSzzm8qWXmpaY8QSe9A0wdm7Uf5mNE8vNNGMLIg4UBgxZNfrGeom_Rvubt2SOufPsV8-RT7ZCsumOg=s0"
        alt="Left Ad"> 
        
@endsection --}}


@section('leftads')
    {{-- <div>
        <!-- Google AdSense responsive ad -->
        <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"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div> --}}
    <p>Left Ads</p>
    <img src="https://i.postimg.cc/R01Nmbtf/pexels-julian-dahl-2149417377-30600481.jpg" alt="Left Ad">
@endsection


@section('scripts')
    <script>
        function toggleWishlist(element) {


            //  element.classList.toggle('active');
        }


        document.querySelectorAll('.category-toggle').forEach(function(toggle) {
            toggle.addEventListener('click', function() {
                const categoryId = this.getAttribute('data-toggle');
                const categoryChildren = document.getElementById('category-' + categoryId);
                const icon = this.querySelector('.toggle-icon');

                // If the category has children
                if (categoryChildren && categoryChildren.children.length > 0) {
                    // Toggle the display of the child categories
                    if (categoryChildren.style.display === 'none' || categoryChildren.style.display ===
                        '') {
                        categoryChildren.style.display = 'block';
                        icon.style.transform = 'rotate(180deg)';
                    } else {
                        categoryChildren.style.display = 'none';
                        icon.style.transform = 'rotate(0deg)';
                    }
                } else {
                    // If the category has no children, fetch the ads
                    fetchCategoryAds(categoryId);
                }
            });
        });


        function fetchCategoryAds(categoryId) {
             console.log('category only child :' + categoryId);
            $.ajax({
                url: '{{ route('ads.search') }}',
                method: 'GET',
                data: {
                    category_id: categoryId
                },
                beforeSend: function() {
                $('#loader').show(); // Show loader before request
                },
                success: function(response) {
                    $('#ads-container').html(response.ads);
                },
                 complete: function() {
                $('#loader').hide(); // Hide loader after request is done
    },
                error: function(xhr, status, error) {
                    console.error("Error fetching ads:", error);
                }
            });
        }

        $('#filter-form').submit(function(e) {
            e.preventDefault();
            applyFilters();
        });
        $('#location').change(function() {
            applyFilters();
        });
        $('#brand').change(function() {
            applyFilters();
        });

        function applyFilters(page = 1) {
            var location = $('#location').val() || '';
            var brand = $('#brand').val() || '';
            var minPrice = $('#min_price').val() || '';
            var maxPrice = $('#max_price').val() || '';

            $.ajax({
                url: '{{ route('ads.filterByBrandLocationPrice') }}',
                method: 'GET',
                data: {
                    location: location,
                    brand: brand,
                    min_price: minPrice,
                    max_price: maxPrice,
                    page: page
                },
                success: function(response) {
                    $('#ads-container').html(response.ads);

                }
            });
        }


        // 🔹 Handle pagination inside filtered results
        $(document).on('click', '.pagination a', function(e) {
            e.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
            applyFilters(page);
        });



        $(document).ready(function() {
            // Trigger the filtering main category and all its child
            $('#category-filter').change(function() {
                var categoryId = $(this).val();
                console.log(categoryId);
                applyCategoryFilter(categoryId);
            });

            // Function to apply the filter and fetch filtered ads via AJAX
            function applyCategoryFilter(categoryId) {
                // console.log('this is the only main category filter with all its child');
                $.ajax({
                    url: '{{ route('ads.filter') }}',
                    method: 'GET',
                    data: {
                        category_id: categoryId
                    },
                    success: function(response) {
                        $('#ads-container').html(response.ads);
                    },
                    error: function(xhr, status, error) {
                        console.error("Error fetching ads:", error);
                    }
                });
            }
        });

        
        // Auto close after 3 seconds
        setTimeout(() => {
            let el = document.getElementById('flash-message');
            if (el) {
                el.style.transition = "opacity 0.5s ease";
                el.style.opacity = 0;
                setTimeout(() => el.remove(), 500);
            }
        }, 3000);
    
    </script>
@endsection


@push('scripts')
    <script>
        $(document).ready(function() {
            // this is the search for title and tags base in the navbar
            let debounceTimer;
            $('#search-input').on('input', function() {
                clearTimeout(debounceTimer);

                debounceTimer = setTimeout(() => {
                    let searchQuery = $('#search-input').val().trim();
                    console.log('calling search: ' + searchQuery);
                    if (searchQuery.length < 2) return;

                    $('#ads-container').empty();

                    $.ajax({
                        url: '{{ route('ads.filterByTitleOrTags') }}',
                        method: 'GET',
                        data: {
                            search: searchQuery
                        },
                        success: function(response) {
                            $('#ads-container').empty();

                            if (response.ads.length > 0) {
                                response.ads.forEach(function(ad, index) {
                                    let adHtml = `
                            <div class="col-md-4 col-sm-6" id="ad-item">
                               <a href="/ads/${ad.id}" class="lp-product-link">
                                    <div class="lp-product-card">
                                        <div class="lp-product-img-wrapper mb-2">
                                            ${ad.images.length > 0 
                                                ? `<img src="/storage/${ad.images[0].image_path}" 
                                                                                                                                                                                                                                    class="lp-product-img" 
                                                                                                                                                                                                                                    alt="Ad Image"
                                                                                                                                                                                                                                    onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">`
                                                : `<img src="{{ asset('storage/product_images/default.png') }}" 
                                                                                                                                                                                                                                    class="lp-product-img" 
                                                                                                                                                                                                                                    alt="No Image">`
                                            }
                                            <div class="d-flex justify-content-end mb-2 me-3">
                                                <button class="btn btn-sm favorite-btn ${ad.is_favorited ? 'btn-danger' : 'btn-outline-danger'}" 
                                                        data-ad-id="${ad.id}">
                                                    <i class="bi ${ad.is_favorited ? 'bi-heart-fill' : 'bi-heart'}"></i>
                                                    ${ad.is_favorited ? 'Favorited' : 'Favorite'}
                                                </button>
                                            </div> 
                                        </div>
                                

                                        <div class="lp-product-info mt-4">
                                            <p class="lp-product-name">${ad.title ?? ''}</p>
                                            <p class="lp-product-location">Location: ${ad.state ?? ''}</p>
                                            <p class="lp-product-upload-time">Uploaded: ${ad.created_at}</p>
                                            <span class="lp-product-price">Price: ${ad.currency_symbol} ${ad.price}</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        `;
                                    $('#ads-container').append(adHtml);

                                    // Inject ad block every 12th
                                    if ((index + 1) % 12 === 0) {
                                        let adContainer = `
                                <div class="col-12">
                                    <div class="google-ad bg-success text-center">
                                        <label class="text-white">Google Ads here</label>
                                        <ins class="adsbygoogle"
                                            style="display:block"
                                            data-ad-client="ca-pub-XXXXXXX"
                                            data-ad-slot="XXXXXXX"
                                            data-ad-format="auto"></ins>
                                    </div>
                                </div>
                            `;
                                        $('#ads-container').append(adContainer);

                                        // Dynamically load Google Ads
                                        let script = document.createElement(
                                            'script');
                                        script.src =
                                            "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
                                        script.async = true;
                                        script.onload = function() {
                                            (adsbygoogle = window
                                                .adsbygoogle || []).push
                                                ({});
                                        };
                                        document.body.appendChild(script);
                                    }


                                });

                            } else {
                                $('#ads-container').html('<p>No results found.</p>');
                            }
                        },
                        error: function(error) {
                            console.log("Error:", error);
                        }
                    });

                }, 500); // 500ms debounce delay
            });


            // this is the search by location base in the navbar
            $('#location-input').on('input', function() {
                let searchQuery = $('#location-input').val();
                console.log('calling search ' + searchQuery);
                $('#ads-container').empty();
                $.ajax({
                    url: '{{ route('ads.filterByLocation') }}',
                    method: 'GET',
                    data: {
                        location: searchQuery
                    },
                    success: function(response) {
                        $('#ads-container').empty();
                        console.log('filled');
                        if (response.ads.length > 0) {
                            response.ads.forEach(function(ad, index) {
                                let adHtml = `
                            <div class="col-md-4 col-sm-6" id="ad-item">
                                <a href="/ads/${ad.id}" class="lp-product-link">
                                    <div class="lp-product-card">
                                        <div class="lp-product-img-wrapper">
                                            ${ad.images.length > 0 
                                                ? `<img src="/storage/${ad.images[0].image_path}" 
                                                                                                                                                                                                                                    class="lp-product-img" 
                                                                                                                                                                                                                                    alt="Ad Image"
                                                                                                                                                                                                                                    onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">`
                                                : `<img src="{{ asset('storage/product_images/default.png') }}" 
                                                                                                                                                                                                                                    class="lp-product-img" 
                                                                                                                                                                                                                                    alt="No Image">`
                                            }
                                        </div>
                                        <hr>
                                        <div class="lp-product-info">
                                            <p class="lp-product-name">${ad.title ?? ''}</p>
                                            <p class="lp-product-location">State: ${ad.state}</p>
                                            <p class="lp-product-upload-time">Uploaded: ${ad.created_at}</p>
                                            <span class="lp-product-price">Price: ${ad.currency_symbol} ${ad.price}</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        `;
                                $('#ads-container').append(adHtml);
                                // // Display Google Ad after every 12th ad
                                if ((index + 1) % 12 === 0) {
                                    let adContainer = `
                                <div class="col-12">
                                    <div class="google-ad bg-success text-center">
                                        <label class="text-white">Google Ads here</label>
                                        <ins class="adsbygoogle"
                                            style="display:block"
                                            data-ad-client="ca-pub-XXXXXXX"
                                            data-ad-slot="XXXXXXX"
                                            data-ad-format="auto"></ins>
                                    </div>
                                </div>
                            `;
                                    $('#ads-container').append(adContainer);

                                    // Dynamically load the Google Ads script
                                    var script = document.createElement('script');
                                    script.src =
                                        "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
                                    script.async = true;
                                    script.onload = function() {
                                        (adsbygoogle = window.adsbygoogle || [])
                                        .push({});
                                    };
                                    document.body.appendChild(
                                        script
                                    );
                                }

                                // Display Google Ad after every 12th ad

                            });
                        } else {
                            $('#ads-container').html('<p>No results found.</p>');
                        }
                    },
                    error: function(error) {
                        console.log("Error:", error);
                    }
                });
            });


            // this is the search by postal code base in the navbar
            $('#postcode-input').on('input', function() {
                let searchQuery = $('#postcode-input').val();
                console.log('calling search ' + searchQuery);
                $('#ads-container').empty();
                $.ajax({
                    url: '{{ route('ads.filterByPostcode') }}',
                    method: 'GET',
                    data: {
                        postcode: searchQuery
                    },
                    success: function(response) {
                        $('#ads-container').empty();
                        if (response.ads.length > 0) {
                            response.ads.forEach(function(ad, index) {
                                // Create HTML structure for each ad
                                let adHtml = `
                            <div class="col-md-4 col-sm-6" id="ad-item">
                                <a href="/ads/${ad.id}" class="lp-product-link">
                                    <div class="lp-product-card">
                                        <div class="lp-product-img-wrapper">
                                            ${ad.images.length > 0 ? 
                                                `<img src="/storage/${ad.images[0].image_path}" class="lp-product-img" alt="Ad Image">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         <span class="lp-wishlist-icon" onclick="toggleWishlist(this)">&#10084;</span>` : 
                                                `<img src="https://via.placeholder.com/150" class="card-img-top" alt="No Image">`
                                            }
                                        </div>
                                        <hr>
                                        <div class="lp-product-info">
                                            <p class="lp-product-name">${ad.title ?? ''}</p>
                                            <p class="lp-product-location">state: ${ad.state ?? 'unknown'}</p>
                                            <p class="lp-product-upload-time">Uploaded: ${ad.created_at}</p>
                                            <span class="lp-product-price">Price: ${ad.currency_symbol} ${ad.price}</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        `;
                                $('#ads-container').append(adHtml);
                                // // Display Google Ad after every 12th ad
                                if ((index + 1) % 12 === 0) {
                                    let adContainer = `
                                <div class="col-12">
                                    <div class="google-ad bg-success text-center">
                                        <label class="text-white">Google Ads here</label>
                                        <ins class="adsbygoogle"
                                            style="display:block"
                                            data-ad-client="ca-pub-XXXXXXX"
                                            data-ad-slot="XXXXXXX"
                                            data-ad-format="auto"></ins>
                                    </div>
                                </div>
                            `;
                                    $('#ads-container').append(adContainer);

                                    // Dynamically load the Google Ads script
                                    var script = document.createElement('script');
                                    script.src =
                                        "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
                                    script.async = true;
                                    script.onload = function() {
                                        (adsbygoogle = window.adsbygoogle || [])
                                        .push({});
                                    };
                                    document.body.appendChild(
                                        script
                                    );
                                }

                                // Display Google Ad after every 12th ad

                            });
                        } else {
                            $('#ads-container').html('<p>No results found.</p>');
                        }
                    },
                    error: function(error) {
                        console.log("Error:", error);
                    }
                });
            });


            //add favourite ads for users
            $('.favorite-btn').click(function() {
                event.preventDefault(); // Prevent any default link behavior
                event.stopPropagation();
                const adId = $(this).data('ad-id');
                const btn = $(this);

                $.post(`/ads/${adId}/favorite`, {
                    _token: '{{ csrf_token() }}'
                }, function(res) {
                    if (res.favorited) {
                        alert('Added to favorites!');
                        btn.removeClass('btn-outline-danger').addClass('btn-danger')
                            .html('<i class="bi bi-heart-fill"></i> Favorited');
                    } else {
                        alert('Remove from favorites!');
                        btn.removeClass('btn-danger').addClass('btn-outline-danger')
                            .html('<i class="bi bi-heart"></i> Favorite');
                    }
                });
            });
        });
    </script>
@endpush