path: root/static/blog-script.js

// DOM Elements
const searchInput = document.getElementById('searchInput');
const searchBtn = document.getElementById('searchBtn');
const blogGrid = document.getElementById('blogGrid');
const categoryLinks = document.querySelectorAll('.category-link');
const sortSelect = document.getElementById('sortBy');
const paginationNumbers = document.querySelectorAll('.pagination-number');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

// Blog posts data (in a real app, this would come from an API)
const blogPosts = Array.from(document.querySelectorAll('.blog-post'));

// Search functionality
const performSearch = () => {
    const searchTerm = searchInput.value.toLowerCase().trim();

    blogPosts.forEach(post => {
        const title = post.querySelector('.post-title').textContent.toLowerCase();
        const excerpt = post.querySelector('.post-excerpt').textContent.toLowerCase();
        const category = post.querySelector('.post-category').textContent.toLowerCase();

        const matches = title.includes(searchTerm) || 
                       excerpt.includes(searchTerm) || 
                       category.includes(searchTerm);

        post.style.display = matches || searchTerm === '' ? 'block' : 'none';
    });

    // Update results count
    const visiblePosts = blogPosts.filter(post => post.style.display !== 'none');
    updateResultsMessage(visiblePosts.length, searchTerm);
};

const updateResultsMessage = (count, searchTerm) => {
    let existingMessage = document.querySelector('.search-results-message');

    if (existingMessage) {
        existingMessage.remove();
    }

    if (searchTerm) {
        const message = document.createElement('div');
        message.className = 'search-results-message';
        message.style.cssText = `
            padding: 1rem;
            background: var(--surface);
            border-radius: 0.5rem;
            margin-bottom: 2rem;
            color: var(--text-secondary);
            text-align: center;
        `;
        message.textContent = `Found ${count} article${count !== 1 ? 's' : ''} for "${searchTerm}"`;

        blogGrid.parentNode.insertBefore(message, blogGrid);
    }
};

// Search event listeners
searchBtn.addEventListener('click', performSearch);
searchInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        performSearch();
    }
});

// Real-time search
searchInput.addEventListener('input', () => {
    if (searchInput.value.length > 2 || searchInput.value.length === 0) {
        performSearch();
    }
});

// Category filtering
categoryLinks.forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();

        // Update active state
        categoryLinks.forEach(l => l.classList.remove('active'));
        link.classList.add('active');

        const category = link.dataset.category;

        blogPosts.forEach(post => {
            if (category === 'all') {
                post.style.display = 'block';
            } else {
                const postCategory = post.dataset.category;
                post.style.display = postCategory === category ? 'block' : 'none';
            }
        });

        // Clear search when filtering by category
        searchInput.value = '';
        const existingMessage = document.querySelector('.search-results-message');
        if (existingMessage) {
            existingMessage.remove();
        }

        // Update pagination
        updatePagination();
    });
});

// Sorting functionality
sortSelect.addEventListener('change', () => {
    const sortBy = sortSelect.value;
    const postsArray = Array.from(blogPosts);

    postsArray.sort((a, b) => {
        const dateA = new Date(a.querySelector('.post-date').textContent);
        const dateB = new Date(b.querySelector('.post-date').textContent);

        switch (sortBy) {
            case 'newest':
                return dateB - dateA;
            case 'oldest':
                return dateA - dateB;
            case 'popular':
                // In a real app, this would sort by view count or engagement
                return Math.random() - 0.5;
            default:
                return 0;
        }
    });

    // Re-append sorted posts to the grid
    postsArray.forEach(post => {
        blogGrid.appendChild(post);
    });
});

// Pagination functionality
let currentPage = 1;
const postsPerPage = 6;

const updatePagination = () => {
    const visiblePosts = blogPosts.filter(post => post.style.display !== 'none');
    const totalPages = Math.ceil(visiblePosts.length / postsPerPage);

    // Show/hide posts based on current page
    visiblePosts.forEach((post, index) => {
        const startIndex = (currentPage - 1) * postsPerPage;
        const endIndex = startIndex + postsPerPage;

        if (index >= startIndex && index < endIndex) {
            post.style.display = 'block';
        } else {
            post.style.display = 'none';
        }
    });

    // Update pagination buttons
    prevBtn.disabled = currentPage === 1;
    nextBtn.disabled = currentPage === totalPages || totalPages === 0;

    // Update page numbers
    paginationNumbers.forEach((btn, index) => {
        btn.classList.toggle('active', index + 1 === currentPage);
    });
};

// Pagination event listeners
prevBtn.addEventListener('click', () => {
    if (currentPage > 1) {
        currentPage--;
        updatePagination();
        scrollToTop();
    }
});

nextBtn.addEventListener('click', () => {
    const visiblePosts = blogPosts.filter(post => post.style.display !== 'none');
    const totalPages = Math.ceil(visiblePosts.length / postsPerPage);

    if (currentPage < totalPages) {
        currentPage++;
        updatePagination();
        scrollToTop();
    }
});

paginationNumbers.forEach((btn, index) => {
    btn.addEventListener('click', () => {
        currentPage = index + 1;
        updatePagination();
        scrollToTop();
    });
});

const scrollToTop = () => {
    blogGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
};

// Newsletter form handlers
document.querySelectorAll('.newsletter-form, .newsletter-form-large').forEach(form => {
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        const email = form.querySelector('input[type="email"]').value;

        if (email) {
            showToast(`Thanks for subscribing! We'll send updates to ${email}`, 'success');
            form.reset();
        }
    });
});

// Toast notification function
const showToast = (message, type = 'success') => {
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.style.cssText = `
        position: fixed;
        top: 2rem;
        right: 2rem;
        background: ${type === 'success' ? 'var(--success)' : 'var(--error)'};
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 0.5rem;
        box-shadow: var(--shadow-lg);
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    `;
    toast.textContent = message;

    document.body.appendChild(toast);

    // Show toast
    setTimeout(() => {
        toast.style.transform = 'translateX(0)';
    }, 100);

    // Hide toast
    setTimeout(() => {
        toast.style.transform = 'translateX(100%)';
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 300);
    }, 4000);
};

// Read more link handlers
document.querySelectorAll('.read-more').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const postTitle = link.closest('.blog-post').querySelector('.post-title').textContent;
        showToast(`Opening article: "${postTitle}"`, 'success');

        // In a real app, this would navigate to the full article
        setTimeout(() => {
            window.location.href = `article.html?title=${encodeURIComponent(postTitle)}`;
        }, 1000);
    });
});

// Navbar background on scroll
window.addEventListener('scroll', () => {
    const navbar = document.querySelector('.navbar');
    if (window.scrollY > 50) {
        navbar.style.background = 'rgba(255, 255, 255, 0.98)';
    } else {
        navbar.style.background = 'rgba(255, 255, 255, 0.95)';
    }
});

// Intersection Observer for animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, observerOptions);

// Observe blog posts for animation
document.querySelectorAll('.blog-post').forEach(post => {
    post.style.opacity = '0';
    post.style.transform = 'translateY(30px)';
    post.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    observer.observe(post);
});

// Initialize page
document.addEventListener('DOMContentLoaded', () => {
    updatePagination();

    // Add loading animation to hero elements
    const heroTitle = document.querySelector('.hero-title');
    const heroSubtitle = document.querySelector('.hero-subtitle');
    const heroSearch = document.querySelector('.hero-search');

    [heroTitle, heroSubtitle, heroSearch].forEach((element, index) => {
        if (element) {
            element.style.opacity = '0';
            element.style.transform = 'translateY(30px)';
            element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';

            setTimeout(() => {
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
            }, 200 + (index * 200));
        }
    });
});

// Button click handlers
document.querySelectorAll('.btn').forEach(btn => {
    btn.addEventListener('click', (e) => {
        const buttonText = btn.textContent.toLowerCase();

        if (buttonText.includes('trial') || buttonText.includes('start')) {
            e.preventDefault();
            showToast('Starting your free trial! Redirecting to registration...', 'success');
            setTimeout(() => {
                window.location.href = 'signup.html';
            }, 2000);
        }
    });
});

// Sidebar sticky behavior enhancement
window.addEventListener('scroll', () => {
    const sidebar = document.querySelector('.blog-sidebar');
    const footer = document.querySelector('.footer');

    if (sidebar && footer) {
        const sidebarRect = sidebar.getBoundingClientRect();
        const footerRect = footer.getBoundingClientRect();

        if (footerRect.top < window.innerHeight && sidebarRect.bottom > footerRect.top) {
            sidebar.style.transform = `translateY(${footerRect.top - sidebarRect.bottom - 20}px)`;
        } else {
            sidebar.style.transform = 'translateY(0)';
        }
    }
});