// ProostenKrant JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // Auto-hide alerts after 5 seconds
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(alert => {
        setTimeout(() => {
            alert.style.opacity = '0';
            setTimeout(() => {
                alert.remove();
            }, 500);
        }, 5000);
    });

    // Form validation feedback
    const formGroups = document.querySelectorAll('.form-group');
    formGroups.forEach(group => {
        const input = group.querySelector('.form-control');
        const errorMessage = group.querySelector('.error-message');
        
        if (input && errorMessage && errorMessage.textContent.trim() !== '') {
            input.addEventListener('focus', function() {
                input.classList.remove('error');
                errorMessage.style.display = 'none';
            });
        }
    });

    // Auto-focus first input on login page
    if (document.querySelector('.login-form')) {
        const firstInput = document.querySelector('.login-form .form-control');
        if (firstInput) {
            firstInput.focus();
        }
    }

    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Image preview for article form
    const imageInputs = [document.getElementById('article_image'), document.getElementById('image')];
    imageInputs.forEach(input => {
        if (input) {
            const form = input.closest('form');
            const previewContainer = document.createElement('div');
            previewContainer.className = 'image-preview';
            previewContainer.style.display = 'none';
            previewContainer.style.marginTop = '15px';
            
            input.parentNode.parentNode.appendChild(previewContainer);
            
            input.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewContainer.innerHTML = '<img src="' + e.target.result + '" style="max-width: 200px; max-height: 200px; border-radius: 5px;" />';
                        previewContainer.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                } else {
                    previewContainer.style.display = 'none';
                }
            });
        }
    });

    // Confirm before logout
    const logoutLinks = document.querySelectorAll('.btn-logout, a[href="/logout"]');
    logoutLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            if (!confirm('Weet u zeker dat u wilt uitloggen?')) {
                e.preventDefault();
            }
        });
    });

    // Season color indicator
    const seasonCards = document.querySelectorAll('.season-card');
    seasonCards.forEach(card => {
        const bgColor = card.style.backgroundColor;
        if (bgColor) {
            card.style.borderLeft = '5px solid ' + bgColor;
        }
    });
});