jQuery(function($) {
    // 1. 加载定制选项
    function loadCustomOptions() {
        let productId = $('button.single_add_to_cart_button').val() ||
            $('input[name="add-to-cart"]').val();

        if (!productId) {
            console.error('无法获取产品ID');
            return;
        }

        $.ajax({
            url: wc_custom_params.ajax_url,
            type: 'POST',
            data: {
                action: 'get_custom_product_options',
                product_id: productId,
                security: wc_custom_params.nonce
            },
            success: function(response) {
                if (response.success) {
                    renderCustomOptions(response.data);
                    removeStickyBar(); // 初始化时移除粘性栏
                }
            },
            error: function(xhr, status, error) {
                console.error('加载定制选项失败:', error);
            }
        });
    }

    // 2. 渲染定制选项
    function renderCustomOptions(data) {
        let titleHtml = `<H5>Customize The Product <span style="font-size:1.2em">✎</span></H5>`;
        let finalHtml = `<div class="custom-options-wrapper">${titleHtml}`;

        // 1. 尺码选项（单选样式）
        if (data.sizes && data.sizes.length > 0) {
            let sizeHtml = `
            <div class="size-option-group">
                <label class="custom-option-title">Size <span style="color: #e12a4f;">*</span></label>
                <div class="size-options" style="display: flex; flex-wrap: wrap; gap: 10px;margin-bottom: 10px;">
                    <style>
                        .size-selectable {
                            padding: 8px 12px;
                            border: 1px solid #ddd;
                            border-radius: 4px;
                            cursor: pointer;
                        }
                        .size-selectable.selected {
                            border-color: #e12a4f;
                            background: #fff;
                            box-shadow: 0 0 0 1px #e12a4f;
                            font-weight: 500;
                        }
                    </style>
                    ${data.sizes.map(size => `
                        <div class="size-selectable" 
                            data-value="${size.name}"
                            style="min-width: 40px; text-align: center;">
                            ${size.name}
                        </div>
                    `).join('')}
                </div>
                <div class="size-error" style="color: #e12a4f; display: none; margin-top: 5px;">Please Select Size</div>
            </div>`;
            finalHtml += sizeHtml;
        }

        // 2. 颜色选项（单选样式）
        if (data.colors && data.colors.length > 0) {
            let colorHtml = `
            <div class="color-option-group">
                <label class="custom-option-title">Color <span style="color: #e12a4f;">*</span></label>
                <div class="color-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;">
                    <style>
                        .color-selectable {
                            padding: 8px 12px;
                            border: 1px solid #ddd;
                            border-radius: 4px;
                            cursor: pointer;
                        }
                        .color-selectable.selected {
                            border-color: #e12a4f;
                            background: #fff;
                            box-shadow: 0 0 0 1px #e12a4f;
                            font-weight: 500;
                        }
                    </style>
                    ${data.colors.map(color => `
                        <div class="color-selectable" 
                            data-value="${color.name}">
                            <span class="color-text">${color.name}</span>
                        </div>
                    `).join('')}
                </div>
                <div class="color-error" style="color: #e12a4f; display: none; margin-top: 5px;">Please Select Color</div>
            </div>`;
            finalHtml += colorHtml;
        }

        // 3. 补丁选项
        if (data.patches && data.patches.length > 0) {
            let patchHtml = `
            <div class="custom-option-group">
                <label class="custom-option-title">Patch List</label>
                <div class="patch-options" style="display: flex; flex-wrap: wrap; gap: 10px;">
                    <style>
                        .patch-selectable {
                            width: 80px;
                            cursor: pointer; 
                            border: 2px solid transparent; 
                            border-radius: 8px;
                            transition: all 0.3s;
                            padding: 6px;
                        }
                        .patch-selectable.selected {
                            border-color: #e12a4f !important;
                            box-shadow: 0 0 5px rgba(225, 42, 79, 0.5);
                        }
                    </style>
                    ${data.patches.map(patch => `
                        <div class="patch-selectable" 
                            data-price="${patch.price}" 
                            data-value="${patch.img}">
                            <img src="${patch.img}" alt="补丁" style="width: 60px; height: 60px; object-fit: contain;">
                            <div class="m-price" style="color: rgb(225, 42, 79); margin-left: 0px;">
                                +$${patch.price}
                            </div>
                        </div>
                    `).join('')}
                </div>
            </div>`;
            finalHtml += patchHtml;
        }

        // 4. 球员选项
        if (data.patches && data.patches.length > 0) {
            let playerHtml = `
            <div class="custom-option-group">
                <label class="custom-option-title">Player Customization</label>
                <div class="player-options" style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px;">
                    <style>
                        .player-option {
                            padding: 8px 12px;
                            border: 1px solid #ddd;
                            border-radius: 4px;
                            cursor: pointer;
                            transition: all 0.3s;
                            text-align: center;
                            min-width: 120px;
                        }
                        .player-option:hover {
                            border-color: #aaa;
                        }
                        .player-option.selected {
                            border-color: #e12a4f;
                            background: #fff;
                            box-shadow: 0 0 0 1px #e12a4f;
                            font-weight: 500;
                        }
                    </style>
                    <div class="player-option selected" data-type="player-none">
                        Blank (No Name/Number)
                    </div>
                    ${data.players && data.players.length > 0 ? `
                    <div class="player-option" data-type="player-select">
                        Choose A Player
                    </div>
                    ` : ''}
                    <div class="player-option" data-type="player-custom">
                        Add Yours (+$5 each)
                    </div>
                </div>
                
                <!-- 选择球员的选项 -->
                ${data.players && data.players.length > 0 ? `
                <div id="player-select-container" style="display: none; margin-top: 10px;">
                    <select id="player-list" style="width: 100%; padding: 8px;">
                        <option value="" selected>-- Please select --</option>
                        ${data.players.map(player => `
                            <option value="${player.name_number}" data-price="${player.price}">
                                ${player.name_number} &nbsp;&nbsp;&nbsp;&nbsp;(+$${player.price})
                            </option>
                        `).join('')}
                    </select>
                </div>
                ` : ''}
                
                <!-- 自定义输入的选项 -->
                <div id="player-custom-container" style="display: none; margin-top: 10px;">
                    <div style="display: flex; gap: 10px; margin-bottom: 10px;">
                        <input type="text" id="custom-player-name" 
                               placeholder="Player Name (A-Z, max 15 letters)" 
                               maxlength="15"
                               pattern="[A-Za-z ]{1,15}"
                               style="flex: 1; padding: 8px;">
                        <input type="number" id="custom-player-number" 
                               placeholder="Number (0-99)"
                               min="0"
                               max="99"
                               style="width: 50%; padding: 8px;">
                    </div>
                    <div style="color: #666; font-size: 0.9em;">
                        Note: Each custom field (name or number) will add $5 to the price
                    </div>
                    <div id="custom-player-error" style="color: #e12a4f; display: none; margin-top: 5px;">
                        Please enter at least one valid field (name or number)
                    </div>
                    <div id="number-error" style="color: #e12a4f; display: none; margin-top: 5px;">
                        Number must be between 0 and 99
                    </div>
                </div>
            </div>`;
            finalHtml += playerHtml;
        }

        // 5. 价格汇总区域
        if ((data.patches && data.patches.length > 0) || (data.players && data.players.length > 0)) {
            finalHtml += `
            <div class="custom-option-group" style="display: flex; justify-content: space-between;">
                <div id="customization-fee">
                    <label class="custom-option-title">Customization fee：</label>
                    <span class="price-display" style="color: #e12a4f;"></span>
                </div>
                <div>
                    <label class="custom-option-title">Subtotal：</label>
                    <span id="total-price" class="price-display" style="color: #e12a4f;">Calculating...</span>
                </div>
            </div>`;
        }

        finalHtml += `</div>`;

        // 插入HTML到页面
        if ((data.sizes && data.sizes.length > 0) || (data.colors && data.colors.length > 0) ||
            (data.patches && data.patches.length > 0) || (data.players && data.players.length > 0)) {
            $(".cart").before(finalHtml);

            // 绑定事件 - 尺码选择
            $(".size-selectable").on("click", function() {
                $(this).addClass("selected").siblings().removeClass("selected");
                $(this).closest('.size-option-group').find('.size-error').hide();
            });

            // 绑定事件 - 颜色选择
            $(".color-selectable").on("click", function() {
                $(this).addClass("selected").siblings().removeClass("selected");
                $(this).closest('.color-option-group').find('.color-error').hide();
            });

            // 绑定事件 - 补丁选择
            $(".patch-selectable").on("click", function() {
                $(this).toggleClass("selected").siblings().removeClass("selected");
                updatePrice();
            });

            // 绑定事件 - 球员选项切换
            $(".player-option").on("click", function() {
                $(this).addClass("selected")
                    .siblings(".player-option").removeClass("selected");

                const type = $(this).data("type");
                if (type === "player-select") {
                    $("#player-select-container").show();
                    $("#player-custom-container").hide();
                } else if (type === "player-custom") {
                    $("#player-select-container").hide();
                    $("#player-custom-container").show();
                } else {
                    $("#player-select-container").hide();
                    $("#player-custom-container").hide();
                }

                updatePrice();
            });

            // 绑定事件 - 球员列表选择
            $('#player-list').on('change', updatePrice);

            // 绑定事件 - 自定义球员姓名输入
            $("#custom-player-name").on("input", function() {
                $(this).val($(this).val().replace(/[^A-Za-z ]/g, ''));
                updatePrice();
            });

            // 绑定事件 - 自定义球员号码输入
            $("#custom-player-number").on("input", function() {
                let number = $(this).val();
                $(this).val(number.replace(/[^0-9]/g, ''));

                if (number !== "") {
                    let num = parseInt(number);
                    if (num < 0 || num > 99) {
                        $("#number-error").show();
                    } else {
                        $("#number-error").hide();
                    }
                } else {
                    $("#number-error").hide();
                }

                updatePrice();
            });

            // 初始价格计算
            updatePrice();
        }
    }

    // 3. 更新价格显示
    function updatePrice() {
        let quantity = parseInt($('input.qty').val()) || 1;
        let basePrice = parseFloat($(".price .woocommerce-Price-amount").eq(1).text().replace(/[^\d.]/g, '')) ||
            parseFloat($(".price .woocommerce-Price-amount").eq(0).text().replace(/[^\d.]/g, ''));

        let patchPrice = $(".patch-selectable.selected").data("price") || 0;

        let playerPrice = 0;
        if ($(".player-option[data-type='player-select']").hasClass("selected")) {
            playerPrice = $("#player-list option:selected").data("price") || 0;
        } else if ($(".player-option[data-type='player-custom']").hasClass("selected")) {
            const hasName = $("#custom-player-name").val().trim().length > 0;
            const numberValue = $("#custom-player-number").val().trim();
            const hasValidNumber = numberValue !== "" && parseInt(numberValue) >= 0 && parseInt(numberValue) <= 99;

            playerPrice = (hasName ? 5 : 0) + (hasValidNumber ? 5 : 0);
        }

        let customizationFeePerItem = patchPrice + playerPrice;
        let totalPrice = (basePrice + customizationFeePerItem) * quantity;

        let $priceContainer = $(".custom-option-group").last();
        if (customizationFeePerItem > 0) {
            $priceContainer.show();
            $('#customization-fee').show().find('.price-display').text(
                `+$${(customizationFeePerItem * quantity).toFixed(2)}`
            );
            $('#total-price').text('$' + totalPrice.toFixed(2));
        } else {
            $priceContainer.hide();
        }
    }

    // 4. 添加定制数据到表单
    function addCustomDataToForm($form) {
        let selectedSize = $('.size-selectable.selected');
        let selectedColor = $('.color-selectable.selected');
        let selectedPatch = $('.patch-selectable.selected');

        $form.find('input[name^="custom_"]').remove();

        // 尺码数据
        if ($('.size-option-group').length > 0) {
            if (!selectedSize.length) {
                $('.size-option-group .size-error').show();
                return false;
            }
            $form.append(`<input type="hidden" name="custom_size" value="${selectedSize.data('value')}">`);
        }

        // 颜色数据
        if ($('.color-option-group').length > 0) {
            if (!selectedColor.length) {
                $('.color-option-group .color-error').show();
                return false;
            }
            $form.append(`<input type="hidden" name="custom_color" value="${selectedColor.data('value')}">`);
        }

        // 补丁数据
        if (selectedPatch.length) {
            $form.append(`<input type="hidden" name="custom_patch" value="${selectedPatch.data('value')}">`);
            $form.append(`<input type="hidden" name="custom_patch_image" value="${selectedPatch.find('img').attr('src')}">`);
            $form.append(`<input type="hidden" name="custom_patch_price" value="${selectedPatch.data('price')}">`);
        }

        // 球员数据
        if ($(".player-option[data-type='player-select']").hasClass("selected")) {
            let selectedPlayer = $('#player-list option:selected');
            if (selectedPlayer.val()) {
                $form.append(`<input type="hidden" name="custom_player" value="${selectedPlayer.val()}">`);
                $form.append(`<input type="hidden" name="custom_player_price" value="${selectedPlayer.data('price')}">`);
            }
        } else if ($(".player-option[data-type='player-custom']").hasClass("selected")) {
            let playerName = $("#custom-player-name").val().trim();
            let playerNumber = $("#custom-player-number").val().trim();

            if (playerNumber !== "") {
                let num = parseInt(playerNumber);
                if (num < 0 || num > 99) {
                    $("#number-error").show();
                    return false;
                }
            }

            if (!playerName && !playerNumber) {
                $("#custom-player-error").show();
                return false;
            }

            $("#custom-player-error").hide();
            $("#number-error").hide();

            let customValue = `${playerName || ''} #${playerNumber ? `${playerNumber}` : ''}`;
            let customPrice = (playerName ? 5 : 0) + (playerNumber ? 5 : 0);

            $form.append(`<input type="hidden" name="custom_player" value="${customValue}">`);
            $form.append(`<input type="hidden" name="custom_player_price" value="${customPrice}">`);
            $form.append(`<input type="hidden" name="custom_player_name" value="${playerName}">`);
            $form.append(`<input type="hidden" name="custom_player_number" value="${playerNumber}">`);
        }

        return true;
    }

    // 5. 添加到购物车
    $(document).on('click', '.single_add_to_cart_button', function(e) {
        e.preventDefault();
        let $form = $('form.cart');
        if (!addCustomDataToForm($form)) {
            $('html, body').animate({
                scrollTop: $('.custom-option-group .required').first().offset().top - 100
            }, 500);
            return;
        }
        $form.submit();
    });

    // 6. Buy Now操作
    $(document).on('click', '.pisol_single_buy_now', function(e) {
        e.preventDefault();
        const $form = $('form.cart');
        if (!addCustomDataToForm($form)) {
            $('html, body').animate({
                scrollTop: $('.custom-option-group .required').first().offset().top - 100
            }, 500);
            return;
        }

        $form.append('<input type="hidden" name="buy_now" value="1">');

        const formData = new FormData($form[0]);
        fetch($form.attr('action'), {
            method: 'POST',
            body: formData,
            headers: {
                'Cache-Control': 'no-cache'
            }
        }).then(response => {
            if (response.redirected) {
                window.location.href = response.url;
            }
        });
    });

    // 7. 数量变化
    $(document).on('change', 'input.qty', function() {
        updatePrice();
    });

    // 初始化
    loadCustomOptions();
});<div class="woocommerce-notices-wrapper"></div><p class="woocommerce-result-count hide-for-medium">
	Showing 1&ndash;16 of 173 results</p>
<form class="woocommerce-ordering" method="get">
		<select
		name="orderby"
		class="orderby"
					aria-label="Shop order"
			>
					<option value="menu_order"  selected='selected'>Default sorting</option>
					<option value="popularity" >Sort by popularity</option>
					<option value="rating" >Sort by average rating</option>
					<option value="date" >Sort by latest</option>
					<option value="price" >Sort by price: low to high</option>
					<option value="price-desc" >Sort by price: high to low</option>
			</select>
	<input type="hidden" name="paged" value="1" />
	<input type="hidden" name="add_to_wishlist" value="158613" /></form>
<div class="products <br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function flatsome_product_row_classes() in /data1/www/wwwroot/madazd.com/wp-content/themes/flatsome/woocommerce/loop/loop-start.php:16
Stack trace:
#0 /data1/www/wwwroot/madazd.com/wp-content/plugins/woocommerce/includes/wc-core-functions.php(346): include()
#1 /data1/www/wwwroot/madazd.com/wp-content/plugins/woocommerce/includes/wc-template-functions.php(1148): wc_get_template()
#2 /data1/www/wwwroot/madazd.com/wp-content/plugins/woocommerce/includes/shortcodes/class-wc-shortcode-products.php(654): woocommerce_product_loop_start()
#3 /data1/www/wwwroot/madazd.com/wp-content/plugins/woocommerce/includes/shortcodes/class-wc-shortcode-products.php(100): WC_Shortcode_Products-&gt;product_loop()
#4 /data1/www/wwwroot/madazd.com/wp-content/plugins/woocommerce/includes/class-wc-template-loader.php(427): WC_Shortcode_Products-&gt;get_content()
#5 /data1/www/wwwroot/madazd.com/wp-content/plugins/woocommerce/includes/class-wc-template-loader.php(326): WC_Template_Loader::unsupported_theme_t in <b>/data1/www/wwwroot/madazd.com/wp-content/themes/flatsome/woocommerce/loop/loop-start.php</b> on line <b>16</b><br />