{{-- resources/views/partials/search-results.blade.php --}}
<div class="container-fluid px-0">
    @if ($ads->count() > 0)
        {{-- Results Header --}}
        <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
            <div>
                <h5 class="mb-1">Search Results</h5>
                <p class="text-muted mb-0">
                    <i class="bi bi-grid-3x3-gap-fill me-1"></i>
                    {{ $ads->total() ?? $ads->count() }} ads found
                </p>
            </div>

            {{-- View Toggle & Sort Options --}}
            <div class="d-flex gap-2 mt-3 mt-sm-0">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-secondary active" id="grid-view">
                        <i class="bi bi-grid-3x3-gap-fill"></i>
                    </button>
                    <button type="button" class="btn btn-outline-secondary" id="list-view">
                        <i class="bi bi-list-ul"></i>
                    </button>
                </div>

                <select class="form-select form-select-sm w-auto" id="sort-ads">
                    <option value="latest">Latest</option>
                    <option value="price_low">Price: Low to High</option>
                    <option value="price_high">Price: High to Low</option>
                    <option value="popular">Most Popular</option>
                </select>
            </div>
        </div>

        {{-- Google AdSense Banner (Top) --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="ad-container text-center p-3 bg-light rounded-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>

        {{-- Ads Grid/List Container --}}
        <div class="row g-4" id="ads-container">
            @foreach ($ads as $index => $ad)
                {{-- Ad Item --}}
                <div class="col-lg-4 col-md-6 col-sm-12 ad-item" data-ad-id="{{ $ad->id }}">
                    <div class="card h-100 border-0 shadow-sm hover-shadow transition">
                        {{-- Image Section --}}
                        <div class="position-relative">
                            <a href="{{ route('ads.show', $ad->slug) }}" class="text-decoration-none">
                                <div class="ratio ratio-4x3 bg-light rounded-top overflow-hidden">
                                   @if ($ad->mainImage)
                                        <img src="{{ asset('storage/' . $ad->mainImage->image_path) }}"
                                            class="object-fit-cover" alt="{{ $ad->title }}" loading="lazy"
                                            onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                                    @else
                                        <img src="{{ asset('storage/product_images/default.png') }}"
                                            class="object-fit-cover" alt="No Image">
                                    @endif
                                </div>
                            </a>

                            {{-- Wishlist Button --}}
                            @php
                                $isFavorited = auth()->check() && in_array($ad->id, $favoriteAdIds ?? []);
                            @endphp
                            <button
                                class="btn btn-sm position-absolute top-0 end-0 m-2 rounded-circle bg-white shadow-sm favorite-btn {{ $isFavorited ? 'text-danger' : 'text-secondary' }}"
                                data-ad-id="{{ $ad->id }}" onclick="toggleWishlist(this)" data-bs-toggle="tooltip"
                                title="{{ $isFavorited ? 'Remove from wishlist' : 'Add to wishlist' }}">
                                <i class="bi {{ $isFavorited ? 'bi-heart-fill' : 'bi-heart' }} fs-5"></i>
                            </button>

                            {{-- Condition Badge --}}
                            @if (isset($ad->condition))
                                <span
                                    class="position-absolute bottom-0 start-0 m-2 badge bg-{{ $ad->condition === 'new' ? 'success' : 'info' }}">
                                    {{ ucfirst($ad->condition) }}
                                </span>
                            @endif
                        </div>

                        {{-- Ad Details --}}
                        <div class="card-body">
                            <a href="{{ route('ads.show', $ad->slug) }}" class="text-decoration-none">
                                <h6 class="card-title text-dark mb-2 fw-semibold text-truncate">
                                    {{ $ad->title ?? 'Untitled' }}
                                </h6>
                            </a>

                            <div class="d-flex align-items-center gap-2 mb-2">
                                <span class="badge bg-light text-dark rounded-pill">
                                    <i class="bi bi-geo-alt-fill text-primary me-1"></i>
                                    {{ $ad->state ?? 'Location N/A' }}
                                </span>
                                <span class="badge bg-light text-dark rounded-pill">
                                    <i class="bi bi-clock-history text-primary me-1"></i>
                                    {{ $ad->created_at->diffForHumans() }}
                                </span>
                            </div>

                            {{-- Price Section --}}
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div>
                                    @if ($ad->is_free || (isset($ad->price) && $ad->price == 0))
                                        FREE
                                    @else
                                        <span class="h5 fw-bold text-primary mb-0">
                                            {{ config('app.currency_symbol', '$') }}{{ number_format($ad->price, 2) }}
                                        </span>
                                    @endif
                                </div>

                                {{-- Seller Info (if available) --}}
                                @if (isset($ad->user))
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-person-circle text-secondary me-1"></i>
                                        <small class="text-muted">{{ $ad->user->name ?? 'Seller' }}</small>
                                    </div>
                                @endif
                            </div>

                            {{-- Quick Actions --}}
                            <div class="d-flex gap-2 mt-3 pt-2 border-top">
                                <a href="{{ route('ads.show', $ad->slug )}}"
                                    class="btn btn-sm btn-outline-primary flex-grow-1" data-bs-toggle="tooltip"
                                    title="View Details">
                                    <i class="bi bi-eye me-1"></i> View
                                </a>
                                <!--<button class="btn btn-sm btn-outline-secondary share-btn"-->
                                <!--    data-ad-id="{{ $ad->id }}" data-ad-slug="{{ $ad->slug }}" data-bs-toggle="tooltip" title="Share">-->
                                <!--    <i class="bi bi-share"></i>-->
                                <!--</button>-->
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Insert AdSense between ads (every 6th item) --}}
                @if (($index + 1) % 6 == 0 && !$loop->last)
                    <div class="col-12 my-4">
                        <div class="ad-container text-center p-3 bg-light rounded-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>
                @endif
            @endforeach
        </div>

        {{-- Pagination --}}
        @if (method_exists($ads, 'links'))
            <div class="d-flex justify-content-center mt-5">
                {{ $ads->links() }}
            </div>
        @endif
    @else
        {{-- No Results Found - Enhanced Empty State --}}
        <div class="text-center py-5 my-5">
            <div class="mb-4">
                <i class="bi bi-search-heart display-1 text-primary opacity-25"></i>
            </div>
            <h3 class="fw-bold mb-3">No Ads Found</h3>
            <p class="text-muted mb-4 mx-auto" style="max-width: 400px;">
                We couldn't find any ads matching your search. Try adjusting your filters or browse our categories.
            </p>

            <div class="d-flex flex-wrap gap-3 justify-content-center">
                <button class="btn btn-primary rounded-pill px-4 py-2 clear-search" onclick="clearSearch()">
                    <i class="bi bi-grid-3x3-gap-fill me-2"></i>
                    Show All Ads
                </button>
                <a href="{{ route('categories.index') }}" class="btn btn-outline-secondary rounded-pill px-4 py-2">
                    <i class="bi bi-collection me-2"></i>
                    Browse Categories
                </a>
            </div>

            {{-- Suggested Categories --}}
            <div class="mt-5">
                <h6 class="text-muted mb-3">Popular Categories</h6>
                <div class="d-flex flex-wrap gap-2 justify-content-center">
                    <a href="#"
                        class="badge bg-light text-dark text-decoration-none px-3 py-2 rounded-pill">Electronics</a>
                    <a href="#"
                        class="badge bg-light text-dark text-decoration-none px-3 py-2 rounded-pill">Furniture</a>
                    <a href="#"
                        class="badge bg-light text-dark text-decoration-none px-3 py-2 rounded-pill">Cars</a>
                    <a href="#"
                        class="badge bg-light text-dark text-decoration-none px-3 py-2 rounded-pill">Jobs</a>
                    <a href="#"
                        class="badge bg-light text-dark text-decoration-none px-3 py-2 rounded-pill">Real Estate</a>
                </div>
            </div>
        </div>
    @endif
</div>

{{-- JavaScript Enhancements --}}
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize tooltips
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });

            // Grid/List View Toggle
            const gridViewBtn = document.getElementById('grid-view');
            const listViewBtn = document.getElementById('list-view');
            const adsContainer = document.getElementById('ads-container');

            if (gridViewBtn && listViewBtn && adsContainer) {
                gridViewBtn.addEventListener('click', function() {
                    gridViewBtn.classList.add('active');
                    listViewBtn.classList.remove('active');

                    document.querySelectorAll('.ad-item').forEach(item => {
                        item.classList.remove('col-12');
                        item.classList.add('col-lg-4', 'col-md-6');

                        // Adjust card layout for grid
                        const card = item.querySelector('.card');
                        if (card) {
                            card.classList.remove('flex-row');
                        }
                    });

                    // Save preference
                    localStorage.setItem('adsViewMode', 'grid');
                });

                listViewBtn.addEventListener('click', function() {
                    listViewBtn.classList.add('active');
                    gridViewBtn.classList.remove('active');

                    document.querySelectorAll('.ad-item').forEach(item => {
                        item.classList.remove('col-lg-4', 'col-md-6');
                        item.classList.add('col-12');

                        // Adjust card layout for list
                        const card = item.querySelector('.card');
                        if (card) {
                            card.classList.add('flex-row');
                            // Additional list view styling can be added here
                        }
                    });

                    // Save preference
                    localStorage.setItem('adsViewMode', 'list');
                });

                // Load saved preference
                const savedView = localStorage.getItem('adsViewMode');
                if (savedView === 'list') {
                    listViewBtn.click();
                }
            }

            // Sort functionality
            const sortSelect = document.getElementById('sort-ads');
            if (sortSelect) {
                sortSelect.addEventListener('change', function() {
                    const sortValue = this.value;
                    // Add your sorting logic here (AJAX call or form submission)
                    // window.location.href = updateQueryStringParameter(window.location.href, 'sort', sortValue);
                });
            }

            // Share button functionality
            document.querySelectorAll('.share-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const adId = this.dataset.adId;
                    const slug = this.dataset.adSlug;
                    
                    if (navigator.share) {
                        navigator.share({
                            title: 'Check out this ad',
                            url: window.location.origin + '/ads/' + slug
                        }).catch(console.error);
                    } else {
                        // Fallback
                        navigator.clipboard.writeText(window.location.origin + '/ads/' + adId).then(
                            () => {
                                // Show toast notification
                                showToast('Link copied to clipboard!');
                            });
                    }
                });
            });
        });

        // Wishlist toggle function
        function toggleWishlist(button) {
            event.preventDefault();
            event.stopPropagation();

            const adId = button.dataset.adId;
            const icon = button.querySelector('i');
            const isFavorited = icon.classList.contains('bi-heart-fill');

            // Add your AJAX call here to toggle wishlist
            fetch(`/wishlist/toggle/${adId}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        if (isFavorited) {
                            icon.classList.remove('bi-heart-fill', 'text-danger');
                            icon.classList.add('bi-heart', 'text-secondary');
                            button.classList.remove('text-danger');
                            button.classList.add('text-secondary');
                            button.setAttribute('data-bs-original-title', 'Add to wishlist');
                        } else {
                            icon.classList.remove('bi-heart', 'text-secondary');
                            icon.classList.add('bi-heart-fill', 'text-danger');
                            button.classList.remove('text-secondary');
                            button.classList.add('text-danger');
                            button.setAttribute('data-bs-original-title', 'Remove from wishlist');
                        }

                        // Update tooltip
                        if (typeof bootstrap !== 'undefined') {
                            const tooltip = bootstrap.Tooltip.getInstance(button);
                            if (tooltip) {
                                tooltip.dispose();
                                new bootstrap.Tooltip(button);
                            }
                        }
                    }
                })
                .catch(error => console.error('Error:', error));
        }

        // Toast notification function
        function showToast(message, type = 'success') {
            // Create toast container if it doesn't exist
            let toastContainer = document.querySelector('.toast-container');
            if (!toastContainer) {
                toastContainer = document.createElement('div');
                toastContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
                document.body.appendChild(toastContainer);
            }

            // Create toast element
            const toastId = 'toast-' + Date.now();
            const toastHtml = `
        <div id="${toastId}" class="toast align-items-center text-white bg-${type} border-0" 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>
    `;

            toastContainer.insertAdjacentHTML('beforeend', toastHtml);

            // Initialize and show toast
            const toastElement = document.getElementById(toastId);
            const toast = new bootstrap.Toast(toastElement, {
                autohide: true,
                delay: 3000
            });
            toast.show();

            // Remove toast after it's hidden
            toastElement.addEventListener('hidden.bs.toast', function() {
                this.remove();
            });
        }
    </script>
@endpush

{{-- Additional CSS --}}
@push('styles')
    <style>
        /* Custom Styles */
        .hover-shadow {
            transition: all 0.3s ease;
        }

        .hover-shadow:hover {
            transform: translateY(-5px);
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
        }

        .transition {
            transition: all 0.3s ease;
        }

        .object-fit-cover {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

        /* List view specific styles */
        .card.flex-row {
            flex-direction: row;
        }

        .card.flex-row .ratio {
            width: 200px;
            min-width: 200px;
        }

        .card.flex-row .card-body {
            flex: 1;
        }

        /* Ad container styles */
        .ad-container {
            min-height: 90px;
            background: linear-gradient(45deg, #f8f9fa 0%, #e9ecef 100%);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .card.flex-row {
                flex-direction: column;
            }

            .card.flex-row .ratio {
                width: 100%;
            }
        }

        /* Pagination styling */
        .pagination {
            gap: 5px;
        }

        .page-link {
            border-radius: 8px;
            color: #6c757d;
        }

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

        /* Wishlist button animation */
        .favorite-btn {
            transition: all 0.3s ease;
        }

        .favorite-btn:hover {
            transform: scale(1.1);
        }

        /* Skeleton loading animation (optional) */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }
    </style>
@endpush