main.js

// static/js/main.js
document.addEventListener('DOMContentLoaded', function() {
    // Loading screen dengan slideshow
    const loadingScreen = document.getElementById('loading-screen');
    const slideshow = document.getElementById('slideshow');
    
    if (loadingScreen && slideshow) {
        // Ambil foto untuk slideshow
        fetch('/slideshow_photos')
            .then(response => response.json())
            .then(photos => {
                if (photos.length > 0) {
                    let currentIndex = 0;
                    
                    // Tampilkan foto pertama
                    slideshow.style.backgroundImage = `url(/static/uploads/${photos[0].filename})`;
                    
                    // Ganti foto setiap 2 detik
                    setInterval(() => {
                        currentIndex = (currentIndex + 1) % photos.length;
                        slideshow.style.backgroundImage = `url(/static/uploads/${photos[currentIndex].filename})`;
                    }, 2000);
                } else {
                    slideshow.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100"><p class="text-white">Belum ada foto</p></div>';
                }
            })
            .catch(error => console.error('Error loading slideshow:', error));
        
        // Sembunyikan loading setelah 3 detik
        setTimeout(() => {
            loadingScreen.classList.add('hidden');
        }, 3000);
    }
    
    // Like functionality
    const likeButtons = document.querySelectorAll('.like-btn');
    likeButtons.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Cek apakah user sudah login
            {% if not current_user.is_authenticated %}
                showNotification('Silakan login terlebih dahulu!', 'warning');
                window.location.href = '/login';
                return;
            {% endif %}
            
            const photoId = this.dataset.photoId;
            const likesSpan = this.querySelector('.likes-count');
            const heartIcon = this.querySelector('i');
            
            fetch(`/like/${photoId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.liked) {
                    heartIcon.classList.remove('bi-heart');
                    heartIcon.classList.add('bi-heart-fill');
                    showNotification('Foto disukai!', 'success');
                } else {
                    heartIcon.classList.remove('bi-heart-fill');
                    heartIcon.classList.add('bi-heart');
                    showNotification('Batal suka', 'info');
                }
                likesSpan.textContent = data.likes;
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Terjadi kesalahan', 'error');
            });
        });
    });
    
    // Download tracking
    const downloadButtons = document.querySelectorAll('[href*="download"]');
    downloadButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            showNotification('Download dimulai...', 'info');
        });
    });
    
    // Auto hide flash messages
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(alert => {
        setTimeout(() => {
            alert.style.transition = 'opacity 0.5s ease';
            alert.style.opacity = '0';
            setTimeout(() => alert.remove(), 500);
        }, 3000);
    });
});

// Function untuk menampilkan notifikasi
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `notification alert alert-${type}`;
    notification.innerHTML = message;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.transition = 'opacity 0.5s ease';
        notification.style.opacity = '0';
        setTimeout(() => notification.remove(), 500);
    }, 3000);
}

// Function untuk preview foto sebelum upload
function previewPhoto(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            const preview = document.getElementById('photo-preview');
            if (preview) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            }
        }
        
        reader.readAsDataURL(input.files[0]);
    }
}

// Infinite scroll (opsional)
let loading = false;
let page = 1;

window.addEventListener('scroll', function() {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 1000) {
        if (!loading) {
            loading = true;
            page++;
            loadMorePhotos(page);
        }
    }
});

function loadMorePhotos(page) {
    fetch(`/get_photos?page=${page}`)
        .then(response => response.json())
        .then(photos => {
            if (photos.length > 0) {
                appendPhotos(photos);
                loading = false;
            }
        })
        .catch(error => {
            console.error('Error loading more photos:', error);
            loading = false;
        });
}

function appendPhotos(photos) {
    const container = document.getElementById('photos-container');
    
    photos.forEach(photo => {
        const photoHtml = `
            <div class="col-md-4 col-sm-6 mb-4 photo-item" data-photo-id="${photo.id}">
                <div class="card photo-card h-100">
                    <img src="/static/uploads/${photo.filename}" class="card-img-top" alt="${photo.caption}">
                    <div class="card-body">
                        <p class="card-text">${photo.caption || 'Foto angkatan'}</p>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <small class="text-muted">
                                <i class="bi bi-person-circle"></i> ${photo.uploader}
                            </small>
                            <small class="text-muted">
                                <i class="bi bi-calendar"></i> ${photo.upload_date}
                            </small>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <button class="btn btn-outline-danger btn-sm like-btn" data-photo-id="${photo.id}">
                                <i class="bi bi-heart${photo.user_liked ? '-fill' : ''}"></i>
                                <span class="likes-count">${photo.likes}</span>
                            </button>
                            <a href="/download/${photo.id}" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-download"></i> Download
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', photoHtml);
    });
}