<?php
/**
 * Plugin Name: WooCommerce Gallery Hover for Elementor Loop
 * Description: Affiche la première image de la galerie produit au survol de l'image mise en avant dans les boucles Elementor.
 * Version: 1.0.0
 * Author: Wycan
 * Requires Plugins: woocommerce
 */

if (!defined('ABSPATH')) {
    exit;
}

/**
 * Vérifie que WooCommerce est actif avant d'exécuter le plugin.
 */
function wc_gallery_hover_init() {
    if (!class_exists('WooCommerce')) {
        return;
    }

    add_action('wp_footer', 'wc_gallery_hover_render');
}
add_action('plugins_loaded', 'wc_gallery_hover_init');

/**
 * Injecte le CSS + JS et les données de galerie dans le footer.
 */
function wc_gallery_hover_render() {
    $products = wc_get_products([
        'status' => 'publish',
        'limit'  => -1,
        'return' => 'ids',
    ]);

    $gallery_data = [];

    foreach ($products as $product_id) {
        $product = wc_get_product($product_id);
        if (!$product) {
            continue;
        }

        $gallery_ids = $product->get_gallery_image_ids();
        if (!empty($gallery_ids)) {
            $img_url = wp_get_attachment_image_url($gallery_ids[0], 'large');
            if ($img_url) {
                $gallery_data[$product_id] = $img_url;
            }
        }
    }

    if (empty($gallery_data)) {
        return;
    }
    ?>
    <style id="wc-gallery-hover-css">
        img.secondary-image-hover {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            opacity: 0 !important;
            transition: opacity 0.35s ease !important;
            pointer-events: none !important;
        }
        .e-loop-item:hover img.secondary-image-hover {
            opacity: 1 !important;
        }
    </style>
    <script id="wc-gallery-hover-js">
    document.addEventListener('DOMContentLoaded', function () {
        var galleryData = <?php echo wp_json_encode($gallery_data); ?>;

        document.querySelectorAll('.e-loop-item').forEach(function (item) {
            var match = item.className.match(/post-(\d+)/);
            if (!match) return;

            var postId = match[1];
            if (!galleryData[postId]) return;

            var imgWidget = item.querySelector('.elementor-widget-theme-post-featured-image');
            if (!imgWidget) return;

            var mainImg = imgWidget.querySelector('img');
            if (!mainImg) return;

            var container = mainImg.parentElement;
            container.style.position = 'relative';
            container.style.overflow = 'hidden';

            var secondary = document.createElement('img');
            secondary.src = galleryData[postId];
            secondary.classList.add('secondary-image-hover');
            secondary.alt = mainImg.alt || '';
            secondary.loading = 'lazy';
            container.appendChild(secondary);
        });
    });
    </script>
    <?php
}