@extends('layouts.app')

@section('title')
    {{ $category->name }} Classified Ads | OlcaClassified
@endsection

@section('meta_description')
    Browse {{ $category->name }} ads. Buy and sell {{ $category->name }} products on OlcaClassified.
@endsection

@section('styles')
    <style>
    .product-img-wrapper {
    width: 100%;
    height: 200px; /* fixed height for all images */
    overflow: hidden;
    border-radius: 10px;
}

.product-img-wrapper img.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* crops images to fill container */
}
        .category-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 0;
            margin-bottom: 30px;
            border-radius: 0 0 30px 30px;
        }

        .category-header h1 {
            font-size: 2.2rem;
            font-weight: bold;
        }

        .category-header .breadcrumb {
            background: transparent;
            padding: 0;
        }

        .category-header .breadcrumb-item a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
        }

        .category-header .breadcrumb-item a:hover {
            color: white;
        }

        .category-header .breadcrumb-item.active {
            color: white;
        }

        .subcategory-card {
            transition: all 0.3s ease;
            border: 1px solid #eee;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            height: 100%;
        }

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

        .subcategory-card h5 {
            margin: 10px 0 5px;
            font-size: 1rem;
        }

        .subcategory-card .count {
            color: #6c757d;
            font-size: 0.85rem;
        }

        .filter-sidebar {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .filter-sidebar h6 {
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }

        .sort-select {
            width: 200px;
        }

        @media (max-width: 768px) {
            .category-header {
                padding: 30px 0;
            }

            .category-header h1 {
                font-size: 1.8rem;
            }

            .sort-select {
                width: 100%;
            }
        }
    </style>
@endsection

@section('content')
    {{-- Category Header --}}
    <div class="category-header">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('welcome') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('categories.index') }}">Categories</a></li>
                    @if ($category->parent)
                        <li class="breadcrumb-item"><a
                                href="{{ route('categories.show', $category->parent->slug) }}">{{ $category->parent->name }}</a>
                        </li>
                    @endif
                    <li class="breadcrumb-item active" aria-current="page">{{ $category->name }}</li>
                </ol>
            </nav>

            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1>{{ $category->name }}</h1>
                    <p class="mb-0">
                        <i class="bi bi-megaphone me-2"></i>{{ $ads->total() }} ads found
                        @if ($subcategories->count() > 0)
                            <span class="mx-2">|</span>
                            <i class="bi bi-diagram-3 me-2"></i>{{ $subcategories->count() }} subcategories
                        @endif
                    </p>
                </div>
                <div class="col-md-4 text-md-end mt-3 mt-md-0">
                    <select class="form-select sort-select" id="sort-ads">
                        <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>
        </div>
    </div>

    <div class="container">
        
        
        <div class="ad-container mb-4">
           
            <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>
        
        {{-- Subcategories Grid --}}
        @if ($subcategories->count() > 0)
            <section class="mb-5">
                <h5 class="mb-3 fw-bold">Subcategories</h5>
                <div class="row g-3">
                    @foreach ($subcategories as $subcategory)
                        <div class="col-lg-2 col-md-3 col-4">
                            <a href="{{ route('categories.show', $subcategory->slug) }}" class="text-decoration-none">
                                <div class="subcategory-card">
                                    <i class="bi bi-folder-fill text-primary fs-2"></i>
                                    <h5 class="text-truncate">{{ $subcategory->name }}</h5>
                                    <div class="count">{{ $subcategory->ads_count ?? 0 }} ads</div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </section>
        @endif

        {{-- Main Content Row --}}
        <div class="row g-4">
            {{-- Filters Sidebar --}}
            <div class="col-lg-3">
                <div class="filter-sidebar">
                    <h6>Filter By</h6>

                    {{-- Price Range --}}
                    <div class="mb-4">
                        <label class="form-label fw-bold">Price Range</label>
                        <div class="d-flex gap-2">
                            <input type="number" class="form-control form-control-sm" id="min-price" placeholder="Min"
                                min="0">
                            <input type="number" class="form-control form-control-sm" id="max-price" placeholder="Max"
                                min="0">
                        </div>
                    </div>

                    {{-- Condition --}}
                    <div class="mb-4">
                        <label class="form-label fw-bold">Condition</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="condition-new">
                            <label class="form-check-label" for="condition-new">New</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="condition-used">
                            <label class="form-check-label" for="condition-used">Used</label>
                        </div>
                    </div>

                    <button class="btn btn-primary w-100" onclick="applyFilters()">
                        <i class="bi bi-funnel me-2"></i>Apply Filters
                    </button>
                </div>

                {{-- Related Categories --}}
                @if (isset($relatedCategories) && $relatedCategories->count() > 0)
                    <div class="filter-sidebar mt-4">
                        <h6>Related Categories</h6>
                        <ul class="list-unstyled">
                            @foreach ($relatedCategories as $related)
                                <li class="mb-2">
                                    <a href="{{ route('categories.show', $related->slug) }}" class="text-decoration-none">
                                        <i class="bi bi-chevron-right text-primary me-1"></i>
                                        {{ $related->name }}
                                        <span class="badge bg-light text-dark float-end">{{ $related->ads_count }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                
                
                 <div class="ad-rectangle mt-4">
                        
                        <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4155905641018537"
                            data-ad-slot="9487563407" data-ad-format="vertical" data-full-width-responsive="true"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
            </div>

            {{-- Ads Grid --}}
            <div class="col-lg-9">
                {{-- Loader --}}
                <div class="loader-overlay" id="loader" style="display: none;">
                    <div class="spinner"></div>
                </div>

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

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

@section('scripts')
    <script>
        $(document).ready(function() {
            // Initialize tooltips
            initializeTooltips();

            // Sort change handler
            $('#sort-ads').on('change', function() {
                const categoryId = {{ $category->id }};
                const sort = $(this).val();
                loadCategoryAds(categoryId, sort);
            });

            // Price filter inputs
            $('#min-price, #max-price').on('change', function() {
                applyFilters();
            });
        });

        function loadCategoryAds(categoryId, sort = 'latest', page = 1) {
            showLoader();

            const minPrice = $('#min-price').val();
            const maxPrice = $('#max-price').val();

            $.ajax({
                url: '{{ route('categories.show', $category->id) }}',
                method: 'GET',
                data: {
                    sort: sort,
                    page: page,
                    min_price: minPrice,
                    max_price: maxPrice
                },
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function(response) {
                    if (response.success) {
                        $('#ads-container').html(response.html);
                        $('#pagination-container').html(response.pagination);

                        // Reinitialize components
                        initializeTooltips();
                        initializeFavorites();

                        // Update URL
                        const url = new URL(window.location.href);
                        url.searchParams.set('sort', sort);
                        if (page > 1) url.searchParams.set('page', page);
                        window.history.pushState({}, '', url);
                    }
                },
                error: function() {
                    showNotification('Error loading ads', 'error');
                },
                complete: function() {
                    hideLoader();
                }
            });
        }

        function applyFilters() {
            const categoryId = {{ $category->id }};
            const sort = $('#sort-ads').val();
            loadCategoryAds(categoryId, sort, 1);
        }

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

            const page = $(this).attr('href').split('page=')[1];
            const categoryId = {{ $category->id }};
            const sort = $('#sort-ads').val();

            loadCategoryAds(categoryId, sort, page);
        });

        function showLoader() {
            $('#loader').fadeIn(200);
        }

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

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

        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() }}'
                    },
                    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') }}';
                        }
                    }
                });
            });
        }

        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);
        }
    </script>
@endsection