////Show attribute size & color under each product on shop archive

function get_color_hex($color_name) {
// Add your color map here
$color_map = array(
'black' => '#000000',
'denim' => '#1560BD',
// Add other color mappings as needed
);

// Convert to lowercase and remove spaces for case-insensitive matching
$key = str_replace(' ', '', strtolower($color_name));

// Check if the color is in the map
if (isset($color_map[$key])) {
    // Return the hex code if available
    return $color_map[$key];
} else {
    // Try to fetch the hex code using a different method
    $term = get_term_by('name', $color_name, 'pa_color');

    if ($term && !is_wp_error($term)) {
        $color_hex = get_term_meta($term->term_id, 'product_attribute_color', true);

        // Check if a valid hex code is returned
        if ($color_hex) {
            return $color_hex;
        } else {
            // Return an empty string if color hex is not available
            return '';
        }
    }

    // If no valid hex code is found, return an empty string
    return '';
}

}

function custom_display_attributes() {
global $product;

if ($product && ($product->is_type('variable') || $product->is_type('variation'))) {
    $size_attribute = 'pa_size';   // Change 'pa_size' to your actual size attribute name.
    $color_attribute = 'pa_color'; // Change 'pa_color' to your actual color attribute name.

    $color_values = explode(', ', $product->get_attribute($color_attribute));
    $size_value = $product->get_attribute($size_attribute);

    // Check if the product has a color match
    $has_color_match = false;
    foreach ($color_values as $color) {
        if (get_color_hex($color) !== '' && !str_starts_with($color, 'var')) {
            $has_color_match = true;
            break;
        }
    }

    echo '<div class="attributes-wrapper">';

    if ($has_color_match) {
        echo '<div class="color-attributes">';

        // Display each color as an RGB color box or a product photo
        foreach ($color_values as $color) {
            // Fetch the hex code for the color
            $color_hex = get_color_hex($color);

            // Display the color as a box or product photo
            if ($color_hex !== '' && !str_starts_with($color, 'var')) {
                echo '<span class="attribute" style="background-color: ' . esc_attr($color_hex) . '; width: 20px; height: 20px; display: inline-block; margin-right: 5px; border-radius: 50%;"></span>';
            } else {
                // Display a placeholder image for multicolor products
                echo '<span class="attribute gradient-box" style="background: linear-gradient(to bottom right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff); width: 20px; height: 20px; display: inline-block; margin-right: 5px; border-radius: 50%;"></span>';
            }
        }

        echo '</div>';
    } else {
        // Display a zoomed-in image for products with color variations starting with 'var'
        $has_var_color = false;
        foreach ($color_values as $color) {
            if (str_starts_with($color, 'var')) {
                $has_var_color = true;
                break;
            }
        }

        if ($has_var_color) {
            $zoomed_image_url = esc_url(get_the_post_thumbnail_url($product->get_id(), 'full'));

            if ($zoomed_image_url) {
                echo '<div class="zoomed-image">';
                echo '<div class="circle-container" style="width: 20px; height: 20px; overflow: hidden; border-radius: 50%;">';
                echo '<img src="' . $zoomed_image_url . '" alt="' . esc_attr($product->get_title()) . '" style="width: 100%; height: auto; transform: scale(30.5);"/>';
                echo '</div>';
                echo '</div>';
            }
        }
    }

    if ($size_value) {
        echo '<div class="size-attributes">';
        echo '<span class="attribute">' . $size_value . '</span>';
        echo '</div>';
    }

    echo '</div>';
}

}

add_action('woocommerce_after_shop_loop_item_title', 'custom_display_attributes', 15);