@extends('layouts.app')

@section('title', 'Blogs - Primary Learning Tutor')

@section('content')
<div class="container py-5">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-4 fw-bold mb-3">📝 Our Blog</h1>
            <p class="lead text-muted">Discover helpful articles, tips, and insights about learning and education!</p>
        </div>
    </div>

    <!-- Search Section with Autocomplete -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">🔍 Search Blogs</h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('blogs.index') }}" class="row g-3">
                <div class="col-12 col-md-8">
                    <div class="position-relative">
                        <input type="text" 
                               class="form-control form-control-lg" 
                               id="searchInput" 
                               name="search" 
                               value="{{ request('search') }}" 
                               placeholder="Search blogs by title, content, or category..."
                               autocomplete="off">
                        <div id="autocompleteDropdown" class="autocomplete-dropdown"></div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <select class="form-select form-select-lg" id="category" name="category" onchange="this.form.submit()">
                        <option value="">All Categories</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat }}" {{ request('category') == $cat ? 'selected' : '' }}>
                                {{ $cat }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-md-1">
                    <button type="submit" class="btn btn-primary btn-lg w-100">🔍</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Blog Posts -->
    @if($blogs->count() > 0)
        <div class="row g-4">
            @foreach($blogs as $blog)
                <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                    <div class="card h-100 blog-card shadow-sm" style="transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;" 
                         onclick="window.location.href='{{ route('blogs.show', $blog->slug) }}'">
                        @if($blog->featured_image)
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($blog->featured_image) }}" 
                                 class="card-img-top" 
                                 alt="{{ $blog->title }}"
                                 style="height: 200px; object-fit: cover;">
                        @else
                            <div class="card-img-top bg-gradient d-flex align-items-center justify-content-center" 
                                 style="height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                <span style="font-size: 4rem;">📝</span>
                            </div>
                        @endif
                        <div class="card-body d-flex flex-column">
                            <div class="mb-2">
                                @if($blog->category)
                                    <span class="badge bg-primary mb-2">{{ $blog->category }}</span>
                                @endif
                                @if($blog->tags && count($blog->tags) > 0)
                                    @foreach(array_slice($blog->tags, 0, 2) as $tag)
                                        <span class="badge bg-secondary mb-2">{{ $tag }}</span>
                                    @endforeach
                                @endif
                            </div>
                            <h5 class="card-title fw-bold">{{ $blog->title }}</h5>
                            @if($blog->excerpt)
                                <p class="card-text text-muted flex-grow-1">{{ Str::limit($blog->excerpt, 120) }}</p>
                            @else
                                <p class="card-text text-muted flex-grow-1">{{ Str::limit(strip_tags($blog->content), 120) }}</p>
                            @endif
                            <div class="mt-auto">
                                <div class="d-flex justify-content-between align-items-center text-muted small">
                                    <span>
                                        @if($blog->author_name)
                                            👤 {{ $blog->author_name }}
                                        @elseif($blog->author)
                                            👤 {{ $blog->author->name }}
                                        @endif
                                    </span>
                                    <span>👁️ {{ $blog->view_count }} views</span>
                                </div>
                                @if($blog->published_at)
                                    <small class="text-muted d-block mt-1">
                                        📅 {{ $blog->published_at->format('M d, Y') }}
                                    </small>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="mt-4">
            {{ $blogs->links() }}
        </div>
    @else
        <div class="text-center py-5">
            <div style="font-size: 4rem; margin-bottom: 16px;">📝</div>
            <h4>No blogs found</h4>
            <p class="text-muted">
                @if(request('search') || request('category'))
                    Try adjusting your search or filters, or check back later for new blogs!
                @else
                    Check back later for new blog posts!
                @endif
            </p>
            @if(request('search') || request('category'))
                <a href="{{ route('blogs.index') }}" class="btn btn-primary">View All Blogs</a>
            @endif
        </div>
    @endif
</div>
@endsection

@push('styles')
<style>
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.autocomplete-item {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background-color: #f8f9fa;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.autocomplete-item-category {
    font-size: 0.85rem;
    color: #666;
}

.autocomplete-item-url {
    font-size: 0.75rem;
    color: #999;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .display-4 {
        font-size: 2rem;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    .blog-card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .form-control-lg,
    .form-select-lg {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
    
    .autocomplete-dropdown {
        max-height: 200px;
    }
    
    .autocomplete-item {
        padding: 10px 12px;
    }
}

@media (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .display-4 {
        font-size: 1.75rem;
    }
    
    .card-header h5 {
        font-size: 1rem;
    }
    
    .blog-card .card-img-top {
        height: 150px !important;
    }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const autocompleteDropdown = document.getElementById('autocompleteDropdown');
    let autocompleteTimeout;
    let selectedIndex = -1;
    let suggestions = [];

    if (!searchInput || !autocompleteDropdown) return;

    // Handle input
    searchInput.addEventListener('input', function() {
        const query = this.value.trim();
        
        clearTimeout(autocompleteTimeout);
        
        if (query.length < 2) {
            hideAutocomplete();
            return;
        }

        autocompleteTimeout = setTimeout(() => {
            fetchSuggestions(query);
        }, 300);
    });

    // Handle keyboard navigation
    searchInput.addEventListener('keydown', function(e) {
        if (!autocompleteDropdown.style.display || autocompleteDropdown.style.display === 'none') {
            return;
        }

        if (e.key === 'ArrowDown') {
            e.preventDefault();
            selectedIndex = Math.min(selectedIndex + 1, suggestions.length - 1);
            updateSelection();
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            selectedIndex = Math.max(selectedIndex - 1, -1);
            updateSelection();
        } else if (e.key === 'Enter' && selectedIndex >= 0) {
            e.preventDefault();
            const selected = suggestions[selectedIndex];
            if (selected) {
                window.location.href = selected.url;
            }
        } else if (e.key === 'Escape') {
            hideAutocomplete();
        }
    });

    // Hide autocomplete when clicking outside
    document.addEventListener('click', function(e) {
        if (!searchInput.contains(e.target) && !autocompleteDropdown.contains(e.target)) {
            hideAutocomplete();
        }
    });

    function fetchSuggestions(query) {
        fetch(`{{ route('blogs.autocomplete') }}?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                suggestions = data;
                displaySuggestions(data);
            })
            .catch(error => {
                console.error('Error fetching suggestions:', error);
                hideAutocomplete();
            });
    }

    function displaySuggestions(data) {
        if (data.length === 0) {
            hideAutocomplete();
            return;
        }

        autocompleteDropdown.innerHTML = '';
        selectedIndex = -1;

        data.forEach((item, index) => {
            const itemDiv = document.createElement('div');
            itemDiv.className = 'autocomplete-item';
            itemDiv.dataset.index = index;
            itemDiv.innerHTML = `
                <div class="autocomplete-item-title">${escapeHtml(item.title)}</div>
                ${item.category ? `<div class="autocomplete-item-category">📂 ${escapeHtml(item.category)}</div>` : ''}
                <div class="autocomplete-item-url">${escapeHtml(item.url)}</div>
            `;
            
            itemDiv.addEventListener('click', function() {
                window.location.href = item.url;
            });

            autocompleteDropdown.appendChild(itemDiv);
        });

        autocompleteDropdown.style.display = 'block';
    }

    function updateSelection() {
        const items = autocompleteDropdown.querySelectorAll('.autocomplete-item');
        items.forEach((item, index) => {
            if (index === selectedIndex) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });
    }

    function hideAutocomplete() {
        autocompleteDropdown.style.display = 'none';
        selectedIndex = -1;
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
});
</script>
@endpush