<?php
function devsaccounting_render_image_modal() {
    ?>
    <!-- Add CSS for hover effect -->
    <style>
        .simple-image-modal:hover img {
            transform: scale(1.02);
        }
    </style>
    
    <!-- Add simple modal HTML -->
    <div id="simpleImageModal"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; justify-content: center; align-items: center;">
        <div style="position: relative; max-width: 90vw; max-height: 90vh;">
            <img id="modalImage" src="" alt="" style="max-width: 100%; max-height: 80vh; display: block;">
            <button onclick="closeModal()"
                style="position: absolute; top: -40px; right: 0; background: none; border: none; color: white; font-size: 30px; cursor: pointer;">×</button>
        </div>
    </div>
    
    <script>
        // Simple modal functionality
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.simple-image-modal').forEach(function (trigger) {
                trigger.addEventListener('click', function () {
                    const src = this.getAttribute('data-src');
                    const alt = this.getAttribute('data-alt');
                    document.getElementById('modalImage').src = src;
                    document.getElementById('modalImage').alt = alt;
                    document.getElementById('simpleImageModal').style.display = 'flex';
                    document.body.style.overflow = 'hidden';
                });
            });

            // Close modal
            document.getElementById('simpleImageModal').addEventListener('click', function (e) {
                if (e.target === this) {
                    closeModal();
                }
            });
        });

        function closeModal() {
            document.getElementById('simpleImageModal').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // Close on escape
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') {
                closeModal();
            }
        });
    </script>
    <?php
}
add_action('devsaccounting_after_item_details_image', 'devsaccounting_render_image_modal');
?>
