<?php
/**
 * Event gallery component
 */
if (!defined('ABSPATH')) exit;

// Get gallery settings
$em_show_event_gallery = $event_settings['em_show_event_gallery'] ?? 'no';
$em_gallery_heading = $event_settings['em_gallery_heading'] ?? 'Event Gallery';
$em_slide_ids = $event_settings['em_event_gallery'] ?? array();

// Only show if gallery is enabled and has images
if ($em_show_event_gallery !== 'yes' || empty($em_slide_ids)) {
    return;
}

// Check if magazine layout
$layout_preference = $event_settings['em_layout_preference'] ?? 'default';
$rounded_class = ($layout_preference === 'magazine') ? 'em-rounded-2xl' : '';
?>
<section class="em-bg-white em-p-5 em-border em-border-slate-200 em-shadow-sm em-animate-fade-in em-animate-delay-300 <?php echo esc_attr($rounded_class); ?>">
    <h2 class="em-text-lg em-font-bold em-text-slate-900 em-mb-4">Past Highlights</h2>
    <div class="em-grid em-grid-cols-3 sm:em-grid-cols-3 em-gap-3">
        <?php
        $count = 0;
        $max_images = 3; // Free version: Limited to 3 images (upgrade to Pro for unlimited)
        foreach ($em_slide_ids as $attachment_id) {
            if ($count >= $max_images) break;

            $image_url = wp_get_attachment_image_url($attachment_id, 'medium');
            $image_full = wp_get_attachment_image_url($attachment_id, 'full');
            $image_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);

            if ($image_url) {
                $count++;
                ?>
                <img class="em-w-full em-h-24 em-object-cover em-rounded-lg em-cursor-pointer em-gallery-item em-transition-transform em-duration-300 hover:em-scale-105"
                     src="<?php echo esc_url($image_url); ?>"
                     alt="<?php echo esc_attr($image_alt ?: 'Gallery image ' . $count); ?>"
                     data-image="<?php echo esc_url($image_full); ?>"
                     data-index="<?php echo $count; ?>">
                <?php
            }
        }

        // Placeholder fills removed in free version (used external CDN)
        ?>
    </div>
</section>

<!-- Gallery Lightbox Modal -->
<div style="display:none"  id="em-gallery-lightbox" class="em-fixed em-inset-0 em-bg-black em-bg-opacity-90 em-z-50 em-hidden em-flex em-items-center em-justify-center">
    <div class="em-relative em-max-w-4xl em-max-h-full em-p-4">
        <button type="button" id="em-close-lightbox" 
                class="em-absolute em-top-4 em-right-4 em-text-white em-text-2xl em-z-10 em-bg-black em-bg-opacity-50 em-rounded-full em-w-10 em-h-10 em-flex em-items-center em-justify-center hover:em-bg-opacity-70 em-transition-all">
            &times;
        </button>
        
        <div class="em-relative">
            <img id="em-lightbox-image" src="" alt="" class="em-max-w-full em-max-h-screen em-object-contain">
            
            <!-- Navigation arrows -->
            <button type="button" id="em-prev-image" 
                    class="em-absolute em-left-4 em-top-1/2 em-transform em--translate-y-1/2 em-text-white em-text-2xl em-bg-black em-bg-opacity-50 em-rounded-full em-w-12 em-h-12 em-flex em-items-center em-justify-center hover:em-bg-opacity-70 em-transition-all">
                &#8249;
            </button>
            <button type="button" id="em-next-image" 
                    class="em-absolute em-right-4 em-top-1/2 em-transform em--translate-y-1/2 em-text-white em-text-2xl em-bg-black em-bg-opacity-50 em-rounded-full em-w-12 em-h-12 em-flex em-items-center em-justify-center hover:em-bg-opacity-70 em-transition-all">
                &#8250;
            </button>
        </div>
        
        <div class="em-text-center em-mt-4">
            <span id="em-image-counter" class="em-text-white em-text-sm"></span>
        </div>
    </div>
</div>

<script>
jQuery(document).ready(function($) {
    var galleryImages = [];
    var currentImageIndex = 0;
    
    // Collect all gallery images
    $('.em-gallery-item').each(function(index) {
        galleryImages.push({
            url: $(this).data('image'),
            index: index
        });
    });
    
    // Open lightbox when gallery item is clicked
    $('.em-gallery-item').on('click', function() {
        currentImageIndex = $(this).data('index') - 1;
        showLightboxImage();
        $('#em-gallery-lightbox').removeClass('em-hidden');
        $('body').addClass('em-overflow-hidden');
    });
    
    // Close lightbox
    $('#em-close-lightbox, #em-gallery-lightbox').on('click', function(e) {
        if (e.target === this) {
            $('#em-gallery-lightbox').addClass('em-hidden');
            $('body').removeClass('em-overflow-hidden');
        }
    });
    
    // Navigate images
    $('#em-prev-image').on('click', function() {
        currentImageIndex = currentImageIndex > 0 ? currentImageIndex - 1 : galleryImages.length - 1;
        showLightboxImage();
    });
    
    $('#em-next-image').on('click', function() {
        currentImageIndex = currentImageIndex < galleryImages.length - 1 ? currentImageIndex + 1 : 0;
        showLightboxImage();
    });
    
    // Keyboard navigation
    $(document).on('keydown', function(e) {
        if (!$('#em-gallery-lightbox').hasClass('em-hidden')) {
            if (e.key === 'Escape') {
                $('#em-gallery-lightbox').addClass('em-hidden');
                $('body').removeClass('em-overflow-hidden');
            } else if (e.key === 'ArrowLeft') {
                $('#em-prev-image').click();
            } else if (e.key === 'ArrowRight') {
                $('#em-next-image').click();
            }
        }
    });
    
    function showLightboxImage() {
        if (galleryImages[currentImageIndex]) {
            $('#em-lightbox-image').attr('src', galleryImages[currentImageIndex].url);
            $('#em-image-counter').text((currentImageIndex + 1) + ' / ' + galleryImages.length);
        }
    }
    
    // Show more gallery functionality
    $('#em-show-more-gallery').on('click', function() {
        $('.em-gallery-item:hidden').slice(0, 8).fadeIn();
        if ($('.em-gallery-item:hidden').length === 0) {
            $(this).hide();
        }
    });
    
    // Initially hide images beyond the first 8
    $('.em-gallery-item:gt(7)').hide();
});
</script>
