jQuery(document).ready(function($) {
    // Images data passed from PHP
    var images = window.cgp_images || [];
    var currentIndex = 0;

    // Function to update the large image display
    function updateLargeImage(index) {
        var image = images[index];
        $('#cgp-large-image').attr('src', image.url);
        $('#cgp-large-image').attr('alt', image.title);
        currentIndex = index;
    }

    // Show the gallery view when "View Gallery" button is clicked
    $('.cgp-show-all-button').on('click', function() {
        $('.cgp-gallery-view').fadeIn();
        $('body').css('overflow', 'hidden');
    });

    // Close the gallery view when the close button is clicked
    $('.cgp-gallery-close').on('click', function() {
        $('.cgp-gallery-view').fadeOut();
        $('body').css('overflow', 'auto');
    });

    // Initialize Isotope after images have loaded
    var $grid = $('.cgp-thumbnail-images').imagesLoaded(function() {
        $grid.isotope({
            itemSelector: '.cgp-thumbnail-image',
            layoutMode: 'fitRows',
            filter: '*'
        });
    });

    // Function to get selected filters
    function getSelectedFilters() {
        var categoryValues = [];
        var tagValues = [];

        // Check if "All" is selected
        if ($('.cgp-category-checkbox[value="all"]').is(':checked')) {
            categoryValues.push('*');
        } else {
            $('.cgp-category-checkbox:checked').each(function() {
                if ($(this).val() !== 'all') {
                    categoryValues.push('.cat-' + $(this).val());
                }
            });
        }

        if ($('.cgp-tag-checkbox[value="all"]').is(':checked')) {
            tagValues.push('*');
        } else {
            $('.cgp-tag-checkbox:checked').each(function() {
                if ($(this).val() !== 'all') {
                    tagValues.push('.tag-' + $(this).val());
                }
            });
        }

        var searchTerm = $('#cgp-search-input').val().toLowerCase();
        var searchFilter = searchTerm ? '[data-title*="' + searchTerm + '"]' : '';

        var filters = [];

        if (categoryValues.length > 0) {
            filters.push(categoryValues.join(','));
        }

        if (tagValues.length > 0) {
            filters.push(tagValues.join(','));
        }

        var filterValue = filters.length > 0 ? filters.join(',') : '*';

        if (searchFilter) {
            filterValue = filterValue !== '*' ? filterValue + searchFilter : searchFilter;
        }

        return filterValue;
    }

    // Event handler for checkbox change
    $('.cgp-category-checkbox, .cgp-tag-checkbox').on('change', function() {
        // Uncheck "All" if other checkboxes are selected
        if ($(this).val() !== 'all' && $(this).is(':checked')) {
            $(this).closest('.cgp-filter-group').find('.cgp-category-checkbox[value="all"], .cgp-tag-checkbox[value="all"]').prop('checked', false);
        }

        // Uncheck other checkboxes if "All" is selected
        if ($(this).val() === 'all' && $(this).is(':checked')) {
            $(this).closest('.cgp-filter-group').find('.cgp-category-checkbox, .cgp-tag-checkbox').not(this).prop('checked', false);
        }

        var filterValue = getSelectedFilters();
        $grid.isotope({ filter: filterValue });

        // If current large image is filtered out, update it to the first visible thumbnail
        var $visibleThumbs = $grid.find('.cgp-thumbnail-image:visible');
        if ($visibleThumbs.length > 0) {
            var firstIndex = $visibleThumbs.first().data('index');
            updateLargeImage(firstIndex);
        } else {
            $('#cgp-large-image').attr('src', '').attr('alt', 'No image');
        }
    });

    // Search functionality
    $('#cgp-search-input').on('keyup', function() {
        var filterValue = getSelectedFilters();
        $grid.isotope({ filter: filterValue });

        // If current large image is filtered out, update it to the first visible thumbnail
        var $visibleThumbs = $grid.find('.cgp-thumbnail-image:visible');
        if ($visibleThumbs.length > 0) {
            var firstIndex = $visibleThumbs.first().data('index');
            updateLargeImage(firstIndex);
        } else {
            $('#cgp-large-image').attr('src', '').attr('alt', 'No image');
        }
    });

    // Click event for thumbnail images
    $('.cgp-thumbnail-image').on('click', function() {
        var index = $(this).data('index');
        updateLargeImage(index);
    });

    // Initialize the large image display
    updateLargeImage(0);
});