/**
 * Feature Description Modal JavaScript
 * Handles modal open/close functionality for feature descriptions
 */
(function($) {
    'use strict';
    
    $(document).ready(function() {
        // Handle "Xem thêm" button clicks
        $(document).on('click', '.btn-read-more', function(e) {
            e.preventDefault();
            var modalId = $(this).data('modal-id');
            var $modal = $('#' + modalId);
            
            if ($modal.length) {
                $modal.show();
                $('body').addClass('modal-open');
                
                // Focus on modal for accessibility
                $modal.find('.modal-close').focus();
            }
        });
        
        // Handle modal close button clicks
        $(document).on('click', '.modal-close', function(e) {
            e.preventDefault();
            closeModal($(this).closest('.feature-description-modal'));
        });
        
        // Handle clicking outside modal to close
        $(document).on('click', '.feature-description-modal', function(e) {
            if (e.target === this) {
                closeModal($(this));
            }
        });
        
        // Handle ESC key to close modal
        $(document).on('keydown', function(e) {
            if (e.keyCode === 27) { // ESC key
                var $openModal = $('.feature-description-modal:visible');
                if ($openModal.length) {
                    closeModal($openModal);
                }
            }
        });
        
        // Function to close modal
        function closeModal($modal) {
            $modal.hide();
            $('body').removeClass('modal-open');
        }
        
        // Add CSS for body scroll lock when modal is open
        if (!$('#feature-description-modal-styles').length) {
            $('head').append(`
                <style id="feature-description-modal-styles">
                    body.modal-open {
                        overflow: hidden;
                    }
                </style>
            `);
        }
    });
    
})(jQuery);
