<?php
defined('ABSPATH') || exit;

$product_id = get_the_ID();
$product = wc_get_product($product_id);

if ($product && $product->is_type('variable')) {
    $variations = $product->get_available_variations();
    
    if (!empty($variations)) {
        ?>
        <form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="<?php echo absint($product_id); ?>">
            <input type="hidden" name="product_id" value="<?php echo absint($product_id); ?>" />
            <input type="hidden" name="variation_id" class="variation_id" value="" />
            
            <div class="variation-wrapper">
                <?php
                foreach ($variations as $variation) {
                    $variation_id = absint($variation['variation_id']);
                    $variation_product = wc_get_product($variation_id);
                    
                    if (!$variation_product) {
                        continue;
                    }
                    
                    $price_html = $variation_product->get_price_html();
                    $image_url = esc_url($variation['image']['url']);
                    $title = esc_html($variation_product->get_name());
                    $bestseller = $variation_product->get_meta('bestseller') === 'yes' 
                        ? '<span class="bestseller-tag">Bestseller</span>' 
                        : '';
                    $stock_status = $variation_product->is_in_stock() ? '' : 'out-of-stock';
                    
                    ?>
                    <div class="variation-item <?php echo $stock_status; ?>" 
                         data-variation-id="<?php echo $variation_id; ?>"
                         data-product-id="<?php echo absint($product_id); ?>">
                        <div class="variation-content">
                            <div class="variation-image">
                                <img src="<?php echo $image_url; ?>" 
                                     alt="<?php echo esc_attr($title); ?>" 
                                     loading="lazy" />
                            </div>
                            <div class="variation-info">
                                <h3><?php echo $title . ' ' . $bestseller; ?></h3>
                                <p class="variation-price"><?php echo $price_html; ?></p>
                                <?php if (!$variation_product->is_in_stock()) : ?>
                                    <p class="stock-status">Out of Stock</p>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    <?php
                }
                ?>
            </div>

            <div class="woocommerce-variation-add-to-cart variations_button robin-button">
                <?php 
                do_action('woocommerce_before_add_to_cart_button');
                do_action('woocommerce_before_add_to_cart_quantity');
                
                woocommerce_quantity_input(array(
                    'min_value'   => apply_filters('woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product),
                    'max_value'   => apply_filters('woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product),
                    'input_value' => isset($_POST['quantity']) ? wc_stock_amount(wp_unslash($_POST['quantity'])) : $product->get_min_purchase_quantity(),
                ));
                
                do_action('woocommerce_after_add_to_cart_quantity');
                ?>
                
                <button type="submit" 
                        class="single_add_to_cart_button btn btn-primary button alt" 
                        <?php echo !$product->is_in_stock() ? 'disabled' : ''; ?>>
                    <?php echo esc_html($product->single_add_to_cart_text()); ?>
                </button>
                
                <?php 
                do_action('woocommerce_after_add_to_cart_button');
                ?>
                
                <input type="hidden" name="add-to-cart" value="<?php echo absint($product->get_id()); ?>" />
            </div>
        </form>
        <?php
    } else {
        echo '<p>' . esc_html__('No variations available.', 'woocommerce') . '</p>';
    }
}
?>

.variation-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.variation-item {
    display: flex;
    align-items: center;
    border: 1px solid ;
    border-radius: 8px;
    padding: 10px;
    transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer;
}

.variation-item:hover {
    border-color: #0073e6;
    box-shadow: 0px 4px 8px rgba(0, 115, 230, 0.2);
}

.variation-item.selected {
    border-color: #0073e6;
    background: rgba(0, 115, 230, 0.1);
    box-shadow: 0px 4px 8px rgba(0, 115, 230, 0.3);
}

/* Layout */
.variation-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.variation-image img {
    width: 80px;
    height: auto;
    border-radius: 5px;
}

.variation-info {
    flex-grow: 1;
    padding-left: 15px;
}

.variation-info h3 {
    font-size: 16px;
    margin: 0;
    font-weight: 600;
}

.variation-price {
    font-size: 14px;
    color: #333;
    margin-top: 5px;
}

/* Bestseller Tag */
.bestseller-tag {
    background: #ff6600;
    color: white;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 12px;
    margin-left: 10px;
}

.robin-button {
    display: flex
;
    padding: 20px;
}
.variation-item.out-of-stock {
    opacity: 0.6;
    cursor: not-allowed;
    border-color: #ccc;
}

.variation-item.out-of-stock:hover {
    border-color: #ccc;
    box-shadow: none;
}

document.addEventListener("DOMContentLoaded", function () {
    const variationItems = document.querySelectorAll(".variation-item");
    const mainImage = document.querySelector(".woocommerce-product-gallery img");
    const form = document.querySelector(".variations_form");
    const variationInput = form?.querySelector("input[name='variation_id']");
    const addToCartButton = form?.querySelector(".single_add_to_cart_button");

    if (!form || !variationInput) return;

    variationItems.forEach((item) => {
        item.addEventListener("click", function (e) {
            e.preventDefault();
            
            if (this.classList.contains('out-of-stock')) return;

            // Update selection UI
            variationItems.forEach((el) => el.classList.remove("selected"));
            this.classList.add("selected");

            // Get variation data
            const variationId = this.getAttribute("data-variation-id");
            const variationImage = this.querySelector(".variation-image img")?.src;

            // Update form
            variationInput.value = variationId;
            
            // Update main image
            if (mainImage && variationImage) {
                mainImage.src = variationImage;
                mainImage.srcset = variationImage;
            }

            // Trigger WooCommerce variation change event
            const event = new Event('change');
            variationInput.dispatchEvent(event);
            
            // Enable add to cart button
            addToCartButton.disabled = false;
        });
    });

    // Trigger click on first available variation
    const firstAvailable = document.querySelector(".variation-item:not(.out-of-stock)");
    if (firstAvailable) {
        firstAvailable.click();
    }
});