Juice 4 000 mAh trådlös powerbank

<?php
function generate_custom_product_table() {
    global $product;

    if ( !$product || !$product->is_type( 'variable' ) ) {
        return; // Only run on variable products
    }

    $available_variations = $product->get_available_variations();
    $attributes = $product->get_attributes();

    $color_info = [];
    $size_info = [];
    $variations_data = [];
    $empty_prices = [];
    $price_bar = null;

    // Fetch attributes for colors and sizes
    if ( isset($attributes['pa_color']) ) {
        $attribute_color = $attributes['pa_color'];
        $attributes_color = wc_get_product_terms($product->get_id(), $attribute_color->get_name(), ['fields' => 'all']);
    }

    if ( isset($attributes['pa_size']) ) {
        $attribute_size = $attributes['pa_size'];
        $attributes_size = wc_get_product_terms($product->get_id(), $attribute_size->get_name(), ['fields' => 'all']);
    }

    // Process each variation
    foreach ( $available_variations as $variation ) {
        $variable_product = wc_get_product( $variation['variation_id'] );
        $price_1 = $variable_product->get_regular_price();
        $prices = get_post_meta( $variation['variation_id'], '_tiered_prices', true );
        $variation_main_image = get_post_meta($variation['variation_id'], '_external_variation_main_image', true);
        $gallery_image_filenames = get_post_meta($variation['variation_id'], '_external_variation_gallery_images', true);
        $hexadecimal = get_post_meta($variation['variation_id'], '_variation_color_hexadecimal', true);

        if (!is_array($prices) || empty($prices)) {
            $empty_prices[] = count($variations_data);
            $price_bar = $prices;
        }

        // Ensure gallery images array
        if (!is_array($gallery_image_filenames)) {
            $gallery_image_filenames = [];
        }
        array_unshift($gallery_image_filenames, $variation_main_image);

        // Process color info
        $color_slug = $variation['attributes']['attribute_pa_color'];
        $color_name = '';
        foreach ($attributes_color as $attribute) {
            if ($attribute->slug == $color_slug) {
                $color_name = $attribute->name;
                break;
            }
        }

        $color_info[] = [
            "name" => $color_name,
            "slug" => $color_slug,
            "hexadecimal" => $hexadecimal,
        ];

        // Process size info if available
        $size_slug = $variation['attributes']['attribute_pa_size'] ?? null;
        if ($size_slug) {
            $size_name = '';
            foreach ($attributes_size as $attribute) {
                if ($attribute->slug == $size_slug) {
                    $size_name = $attribute->name;
                    break;
                }
            }

            $size_info[] = [
                "name" => $size_name,
                "slug" => $size_slug,
            ];
        }

        // Format prices
        $formatted_prices = is_array($prices) ? array_map(function($price) {
            return number_format($price, 2, ',', ' ') . ' kr';
        }, $prices) : 0;

        $variations_data[] = [
            'variation_id' => $variation['variation_id'],
            'color_slug' => $color_slug,
            'size_slug' => $size_slug,
            'prices' => $formatted_prices,
            'color_info' => $color_info,
            'size_info' => $size_info,
            'gallery_image_urls' => $gallery_image_filenames,
            'sku' => $variation['sku']
        ];
    }

    // Filter unique colors and sizes
    $unique_colors = array_values(array_unique($color_info, SORT_REGULAR));
    $unique_sizes = array_values(array_unique($size_info, SORT_REGULAR));



    // Start output buffering to capture the HTML
    ob_start();
    ?>

    <form id="data-form" data-product-id="<?php echo esc_attr($product->get_id()); ?>" data-price-volume='<?php echo esc_attr(wp_json_encode($variations_data)); ?>' data-base-url="<?php echo esc_attr(BASE_URL); ?>"></form>
<div class="square-container">
        <?php foreach ($unique_colors as $color): ?>
            <div class="square color" style="background-color: #<?php echo esc_attr($color['hexadecimal'][0]); ?>;" data-value="<?php echo esc_attr($color['slug']); ?>">
                <div class="tooltip"><?php echo esc_html($color['name']); ?></div>
            </div>
        <?php endforeach; ?>
    </div>
    <?php if (!empty($unique_sizes)): ?>
    <div class="square-container color-container">
        
            <?php 
            $xtraText = "";
            foreach ($unique_sizes as $size): 
                if (strpos($size["name"], "pages") !== false) {
                // Remove "pages" from the string
                $text = str_replace("pages", "", $size["name"]);
                $text = trim($text);
                $xtraText = "Pages";
            }else{

                 $text = $size["name"];
                 
            }?>
                <div class="square size" data-value="<?php echo esc_attr($size['slug']); ?>"><?php echo esc_html($text); ?></div>
            <?php endforeach; 
            if($xtraText){ ?>
                <div><?php echo $xtraText ; ?></div>
            <?php 
            } ?>
       
    </div>
    <?php endif; ?>
    <table class="table custom-table price-table">
        <tr class="tr row-volume">
            <td class="td number-cell">Volym</td>
            <?php foreach ($variations_data[0]['prices'] as $volume => $price): ?>
                <td class="th number-cell"><?php echo esc_html($volume); ?>+</td>
            <?php endforeach; ?>
        </tr>
        <tr class="tr row-price">
            <td class="td">Pris / st</td>
            <?php foreach ($variations_data[0]['prices'] as $volume => $price): ?>
                <td class="td"><?php echo esc_html($price); ?></td>
            <?php endforeach; ?>
        </tr>
    </table>

    <style>
        .table { border-collapse: collapse; width: auto; margin: 10px 0; }
        .td, .th { padding: 10px; }
        .th { border-bottom: 1px solid gray; }
        
        .tooltip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: black; color: white; padding: 5px; border-radius: 3px; white-space: nowrap; }
        .square:hover .tooltip { display: block; }
    </style>

    <?php
    // Return the captured HTML
    return ob_get_clean();
}

// Use in a Bricks code block like this:
echo generate_custom_product_table();
?>