// Event Detail Page JavaScript

jQuery(document).ready(function($) {
    
    // Image Gallery Lightbox
    var currentImageIndex = 0;
    var galleryImages = [];
    
    // Collect all gallery images
    $('.gallery-item').each(function(index) {
        galleryImages.push($(this).find('img').attr('src'));
    });
    
    // Open lightbox
    $('.gallery-zoom').on('click', function() {
        var imageUrl = $(this).data('image');
        currentImageIndex = galleryImages.indexOf(imageUrl);
        showLightbox(imageUrl);
    });
    
    // Show lightbox
    function showLightbox(imageUrl) {
        $('.lightbox-image').attr('src', imageUrl);
        $('#image-lightbox').fadeIn(300);
        $('body').css('overflow', 'hidden');
        
        // Update navigation visibility
        updateLightboxNav();
    }
    
    // Close lightbox
    $('.lightbox-close, .lightbox').on('click', function(e) {
        if (e.target === this) {
            $('#image-lightbox').fadeOut(300);
            $('body').css('overflow', '');
        }
    });
    
    // Lightbox navigation
    $('.lightbox-prev').on('click', function(e) {
        e.stopPropagation();
        if (currentImageIndex > 0) {
            currentImageIndex--;
            $('.lightbox-image').attr('src', galleryImages[currentImageIndex]);
            updateLightboxNav();
        }
    });
    
    $('.lightbox-next').on('click', function(e) {
        e.stopPropagation();
        if (currentImageIndex < galleryImages.length - 1) {
            currentImageIndex++;
            $('.lightbox-image').attr('src', galleryImages[currentImageIndex]);
            updateLightboxNav();
        }
    });
    
    // Update navigation buttons
  function updateLightboxNav() {
    // Previous button
    $('.lightbox-prev')
        .toggleClass("active", currentImageIndex > 0)
        .toggleClass("non-active", currentImageIndex <= 0);

    // Next button
    $('.lightbox-next')
        .toggleClass("active", currentImageIndex < galleryImages.length - 1)
        .toggleClass("non-active", currentImageIndex >= galleryImages.length - 1);
}

    
    // Keyboard navigation
    $(document).on('keydown', function(e) {
        if ($('#image-lightbox').is(':visible')) {
            switch(e.keyCode) {
                case 27: // Escape
                    $('#image-lightbox').fadeOut(300);
                    $('body').css('overflow', '');
                    break;
                case 37: // Left arrow
                    $('.lightbox-prev').click();
                    break;
                case 39: // Right arrow
                    $('.lightbox-next').click();
                    break;
            }
        }
    });
    
    // Registration form submission
    $('.event-registration-form').on('submit', function(e) {
        e.preventDefault();
        
        var $form = $(this);
        var $submitBtn = $form.find('.btn-register');
        var originalText = $submitBtn.text();
        
        // Validate form
        var name = $form.find('input[name="name"]').val().trim();
        var email = $form.find('input[name="email"]').val().trim();
        
        if (!name || !email) {
            alert('Please fill in all required fields.');
            return;
        }
        
        // Disable submit button
        $submitBtn.text('Registering...').prop('disabled', true);
        
        // Prepare form data
        var formData = $form.serialize() + '&action=submit_event_form&nonce=' + kaunoEvents.nonce;
        
        // Submit form
        $.ajax({
            url: kaunoEvents.ajaxurl,
            type: 'POST',
            data: formData,
            success: function(response) {
                console.log(formData)
                if (response.success) {
                    // Show success message
                    showNotification('success', response.data);
                    $form[0].reset();
                } else {
                    showNotification('error', response.data || 'Registration failed. Please try again.');
                }
            },
            error: function() {
                showNotification('error', 'Network error. Please try again.');
            },
            complete: function() {
                $submitBtn.text(originalText).prop('disabled', false);
            }
        });
    });
    
    // Show notification
    function showNotification(type, message) {
        var notificationClass = type === 'success' ? 'notification-success' : 'notification-error';
        var notification = $('<div class="event-notification ' + notificationClass + '">' + message + '</div>');
        
        $('body').append(notification);
        
        setTimeout(function() {
            notification.addClass('show');
        }, 100);
        
        setTimeout(function() {
            notification.removeClass('show');
            setTimeout(function() {
                notification.remove();
            }, 300);
        }, 5000);
    }
    
    // Smooth scroll to registration form
    $('.scroll-to-registration').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $('.registration-section').offset().top - 100
        }, 800);
    });
    
    // Auto-resize textarea
    $('textarea').on('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
    });
    
    // Copy event URL to clipboard
    $('.copy-event-url').on('click', function() {
        var url = window.location.href;
        
        if (navigator.clipboard) {
            navigator.clipboard.writeText(url).then(function() {
                showNotification('success', 'Event URL copied to clipboard!');
            });
        } else {
            // Fallback for older browsers
            var textArea = document.createElement('textarea');
            textArea.value = url;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            showNotification('success', 'Event URL copied to clipboard!');
        }
    });
    
    // Lazy loading for images
    if ('IntersectionObserver' in window) {
        var imageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    var img = entry.target;
                    img.src = img.dataset.src;
                    img.classList.remove('lazy');
                    imageObserver.unobserve(img);
                }
            });
        });
        
        document.querySelectorAll('img[data-src]').forEach(function(img) {
            imageObserver.observe(img);
        });
    }
    
    // Add loading animation to images
    $('img').on('load', function() {
        $(this).addClass('loaded');
    });
    
    // Social share tracking (optional analytics)
    $('.share-btn').on('click', function() {
        var platform = $(this).hasClass('facebook') ? 'Facebook' : 
                      $(this).hasClass('twitter') ? 'Twitter' : 'LinkedIn';
        
        // Track social share event (integrate with your analytics)
        if (typeof gtag !== 'undefined') {
            gtag('event', 'share', {
                'method': platform,
                'content_type': 'event',
                'item_id': $('.event-registration-form').data('event-id')
            });
        }
    });
});

// Add notification styles
var notificationStyles = `
<style>
.event-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 10000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    max-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.event-notification.show {
    transform: translateX(0);
}

.notification-success {
    background: #10b981;
}

.notification-error {
    background: #ef4444;
}

.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.loaded {
    opacity: 1;
}
</style>
`;

jQuery('head').append(notificationStyles);