@extends('layouts.base')
@push('css')
    <link href="{{ asset('assets/custom/css/frontend/modules/products/style.css') }}?v=2" rel="stylesheet">
    <style>
        /* Enhanced Category Pills Design */
        .category-filter-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }
        
        .filter-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 25px;
            color: white;
        }
        
        .filter-title {
            font-weight: 600;
            font-size: 1.25rem;
            margin: 0;
            display: flex;
            align-items: center;
        }
        
        .filter-title i {
            font-size: 1.5rem;
            margin-right: 10px;
        }
        
        .clear-filter {
            color: white;
            text-decoration: none;
            font-size: 0.95rem;
            padding: 8px 16px;
            background: rgba(255,255,255,0.2);
            border-radius: 30px;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .clear-filter:hover {
            background: rgba(255,255,255,0.3);
            color: white;
            transform: translateY(-2px);
        }
        
        .category-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 0;
        }
        
        .category-pill {
            padding: 12px 24px;
            border-radius: 40px;
            background: rgba(255,255,255,0.15);
            color: white;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .category-pill i {
            font-size: 1.1rem;
        }
        
        .category-pill:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }
        
        .category-pill.active {
            background: white;
            color: #667eea;
            border-color: #fff;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }
        
        .category-pill.all-pill {
            background: rgba(0,0,0,0.3);
        }
        
        .category-pill.all-pill.active {
            background: white;
            color: #333;
        }
        
        .category-pill .count {
            background: rgba(0,0,0,0.2);
            padding: 2px 8px;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-left: 5px;
        }
        
        .category-pill.active .count {
            background: #667eea;
            color: white;
        }
        
        /* Selected Category Info */
        .selected-category-info {
            background: white;
            border-left: 5px solid #667eea;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .category-badge {
            background: #667eea;
            color: white;
            padding: 8px 20px;
            border-radius: 40px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .results-count {
            color: #666;
            font-size: 0.95rem;
        }
        
        .results-count strong {
            color: #333;
            font-size: 1.2rem;
        }
        
        /* Loading Spinner */
        .filter-loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-left: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            background: #f8f9fa;
            border-radius: 20px;
        }
        
        .empty-state i {
            font-size: 4rem;
            color: #dee2e6;
            margin-bottom: 20px;
        }
        
        .empty-state h4 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .empty-state p {
            color: #666;
        }
        
        @media (max-width: 768px) {
            .category-filter-section {
                padding: 20px;
            }
            
            .category-pill {
                padding: 10px 18px;
                font-size: 0.85rem;
            }
            
            .selected-category-info {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }
        }
    </style>
    
<!-- Add these styles to your CSS -->
<style>
    .hover-effect {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .hover-effect:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }
    
    .category-pill.loading {
        position: relative;
        overflow: hidden;
    }
    
    .category-pill.loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        animation: loading 1.5s infinite;
    }
    
    @keyframes loading {
        100% {
            left: 100%;
        }
    }
    
    .selected-category-info {
        background: white;
        border-left: 5px solid #667eea;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .category-badge {
        background: #667eea;
        color: white;
        padding: 8px 20px;
        border-radius: 40px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    
    .results-count {
        color: #666;
        font-size: 0.95rem;
    }
    
    .results-count strong {
        color: #333;
        font-size: 1.2rem;
    }
    
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        background: #f8f9fa;
        border-radius: 20px;
    }
    
    .empty-state i {
        font-size: 4rem;
        color: #dee2e6;
        margin-bottom: 20px;
    }
</style>
@endpush

@section('content')
    @include('modules.templates.banner', [
        'feature_image_url' => isset($bannerData['feature_image_url']) ? $bannerData['feature_image_url'] : asset('assets/images/case-study.jpg'),
        'title' => isset($bannerData['title']) ? $bannerData['title'] : '',
        'description' => isset($bannerData['description']) ? $bannerData['description'] : '',
    ])

    <section class="py-5">
        <div class="container">
            @if(isset($categories) && $categories->count())
                <div class="category-filter-section">
                    <div class="filter-header">
                        <h5 class="filter-title">
                            <i class="bi bi-funnel-fill"></i>
                            Kategorien durchsuchen
                        </h5>
                        @if(isset($selectedCategoryId) && $selectedCategoryId)
                            <a href="javascript:void(0);" 
                               class="clear-filter" 
                               onclick="filterByCategory('')">
                                <i class="bi bi-x-circle"></i>
                                Filter zurücksetzen
                            </a>
                        @endif
                    </div>
                    
                    <div class="category-pills">
                        <!-- All Categories Pill -->
                        <a href="javascript:void(0);" 
                           class="category-pill all-pill {{ !isset($selectedCategoryId) || !$selectedCategoryId ? 'active' : '' }}"
                           onclick="filterByCategory('')">
                            <i class="bi bi-grid"></i>
                            Alle Kategorien
                            <span class="count">{{ $totalCount ?? $categories->sum('items_count') }}</span>
                        </a>
                        
                        <!-- Category Pills -->
                        @foreach($categories as $category)
                            <a href="javascript:void(0);" 
                               class="category-pill {{ isset($selectedCategoryId) && (int)$selectedCategoryId === (int)$category->id ? 'active' : '' }}"
                               onclick="filterByCategory('{{ $category->id }}')">
                                @if($category->icon)
                                    <i class="bi bi-{{ $category->icon }}"></i>
                                @else
                                    <i class="bi bi-folder"></i>
                                @endif
                                {{ $category->title }}
                                <span class="count">{{ $category->items_count ?? 0 }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
            
            <!-- Selected Category Info -->
            @if(isset($selectedCategoryId) && $selectedCategoryId && isset($selectedCategory))
                <div class="selected-category-info">
                    <div class="category-badge">
                        <i class="bi bi-folder-check"></i>
                        {{ $selectedCategory->title }}
                    </div>
                    <div class="results-count">
                        Anzahl Ergebnisse: <strong>{{ count($listresults ?? []) }}</strong>
                    </div>
                </div>
            @endif
            
            <!-- Items Grid -->
            <div class="row g-4" id="listItemsGrid">
                @if(empty($listresults) || count($listresults) === 0)
                    <div class="col-12">
                        <div class="empty-state">
                            <i class="bi bi-inbox"></i>
                            <h4>Keine Einträge gefunden</h4>
                            <p>Passen Sie die Filter an, um weitere Ergebnisse zu sehen.</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>

    @include('modules.templates.copyright')
@endsection

@push('js')
<script>
    // Store initial data
    let currentItems = @json(isset($listresults) && !empty($listresults) ? $listresults : []);
    const detailPageBaseUrl = "{{ $moduleBaseUrl ?? '' }}";
    let isLoading = false;
    let currentRequest = null;

    // Filter function with AJAX using jQuery
    function filterByCategory(categoryId) {
        if (isLoading) return;
        
        isLoading = true;
        
        // Update URL without page reload
        const url = new URL(window.location.href);
        if (categoryId) {
            url.searchParams.set('category_id', categoryId);
        } else {
            url.searchParams.delete('category_id');
        }
        window.history.pushState({}, '', url);
        
        // Add loading state to pills
        $('.category-pill').css({
            'opacity': '0.6',
            'pointer-events': 'none'
        });
        
        // Add loading class to active pill
        $('.category-pill.active').addClass('loading');
        
        // Show loading in grid
        showLoadingInGrid();
        
        // Abort previous request if exists
        if (currentRequest) {
            currentRequest.abort();
        }
        
        // Make AJAX request using jQuery
        currentRequest = $.ajax({
            url: window.location.pathname,
            method: 'GET',
            data: {
                category_id: categoryId,
                ajax: 1
            },
            dataType: 'json',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                currentItems = response.items || [];
                
                // Re-render the grid
                renderListItems(currentItems);
                
                // Update active states
                updateActiveStates(categoryId);
                
                // Update category info section
                if (response.selectedCategory) {
                    updateCategoryInfo(response.selectedCategory, response.totalCount);
                } else {
                    hideCategoryInfo();
                }
                
                // Update counts in pills if provided
                if (response.categoryCounts) {
                    updateCategoryCounts(response.categoryCounts, response.totalCount);
                }
            },
            error: function(xhr, status, error) {
                if (status !== 'abort') {
                    console.error('AJAX Error:', error);
                    showErrorInGrid();
                }
            },
            complete: function() {
                isLoading = false;
                currentRequest = null;
                
                // Remove loading states
                $('.category-pill').css({
                    'opacity': '1',
                    'pointer-events': 'auto'
                });
                $('.category-pill').removeClass('loading');
            }
        });
    }
    
    // Show loading spinner in grid
    function showLoadingInGrid() {
        $('#listItemsGrid').html(`
            <div class="col-12 text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        `);
    }
    
    // Show error message in grid
    function showErrorInGrid() {
        $('#listItemsGrid').html(`
            <div class="col-12">
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    Fehler beim Laden der Einträge.
                    <button type="button" class="btn btn-sm btn-outline-danger ms-3" onclick="location.reload()">
                        <i class="bi bi-arrow-repeat me-1"></i>
                        Erneut versuchen
                    </button>
                </div>
            </div>
        `);
    }
    
    // Update active states for pills
    function updateActiveStates(categoryId) {
        $('.category-pill').each(function() {
            const onclick = $(this).attr('onclick') || '';
            
            if (onclick.includes("filterByCategory('')") && !categoryId) {
                $(this).addClass('active');
            } else if (onclick.includes(`filterByCategory('${categoryId}')`)) {
                $(this).addClass('active');
            } else {
                $(this).removeClass('active');
            }
        });
    }
    
    // Update category info section
    function updateCategoryInfo(category, totalCount) {
        let container = $('.selected-category-info');
        
        if (container.length === 0) {
            // Create if doesn't exist
            const newInfo = $(`
                <div class="selected-category-info">
                    <div class="category-badge">
                        <i class="bi bi-folder-check"></i>
                        ${category.title}
                    </div>
                    <div class="results-count">
                        Anzahl Ergebnisse: <strong>${currentItems.length}</strong>
                    </div>
                </div>
            `);
            $('.category-filter-section').after(newInfo);
        } else {
            container.show();
            container.find('.category-badge').html(`
                <i class="bi bi-folder-check"></i>
                ${category.title}
            `);
            container.find('.results-count strong').text(currentItems.length);
        }
    }
    
    // Hide category info
    function hideCategoryInfo() {
        $('.selected-category-info').hide();
    }
    
    // Update category counts
    function updateCategoryCounts(counts, totalCount) {
        // Update All Categories pill
        const allPill = $('.category-pill.all-pill');
        allPill.find('.count').text(totalCount || 0);
        
        // Update individual category pills
        $('.category-pill').each(function() {
            const onclick = $(this).attr('onclick') || '';
            const countSpan = $(this).find('.count');
            
            const match = onclick.match(/filterByCategory\('(\d+)'\)/);
            if (match && counts[match[1]] !== undefined) {
                countSpan.text(counts[match[1]]);
            }
        });
    }
    
    // Render list items
    function renderListItems(items) {
        const grid = $('#listItemsGrid');
        
        if (!items || items.length === 0) {
            grid.html(`
                <div class="col-12">
                    <div class="empty-state">
                        <i class="bi bi-inbox"></i>
                        <h4>Keine Einträge gefunden</h4>
                        <p>Passen Sie die Filter an, um weitere Ergebnisse zu sehen.</p>
                    </div>
                </div>
            `);
            return;
        }
        
        // Use existing renderListItems function from your render-list.js
        if (typeof window.renderListItems === 'function') {
            window.renderListItems(items);
        } else {
            // Fallback rendering
            let html = '';
            items.forEach(item => {
                html += `
                    <div class="col-md-4 mb-4">
                        <div class="card h-100 shadow-sm hover-effect">
                            <img src="${item.feature_image_url || '{{ asset('images/default.jpg') }}'}" 
                                 class="card-img-top" 
                                 alt="${item.title}"
                                 style="height: 200px; object-fit: cover;">
                            <div class="card-body">
                                <h5 class="card-title">${item.title}</h5>
                                <p class="card-text text-muted">${item.short_introduction || ''}</p>
                            </div>
                            <div class="card-footer bg-transparent border-0">
                                <a href="${detailPageBaseUrl}/${item.id}" class="btn btn-outline-primary btn-sm">
                                    Mehr erfahren <i class="bi bi-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                `;
            });
            grid.html(html);
        }
    }
    
    // Initialize on page load
    $(document).ready(function() {
        // Initial render
        renderListItems(currentItems);
        
        // Setup any additional event listeners
        if (typeof setupEventListeners === 'function') {
            setupEventListeners();
        }
        
        // Handle browser back/forward buttons
        window.addEventListener('popstate', function() {
            const urlParams = new URLSearchParams(window.location.search);
            filterByCategory(urlParams.get('category_id') || '');
        });
        
        // Optional: Add loading effect to category pills on click
        $(document).on('click', '.category-pill', function(e) {
            if (!isLoading) {
                $(this).addClass('loading-effect');
            }
        });
    });
</script>
    <script src="{{ asset('assets/custom/js/frontend/modules/render-list.js') }}?v=2"></script>
@endpush