// 1. اضافه کردن فیلد "میزان سدیم" به تب "همگانی" در صفحه ویرایش محصول
add_action( 'woocommerce_product_options_general_product_data', 'amir_add_sodium_field' );

function amir_add_sodium_field() {
    woocommerce_wp_text_input( array(
        'id'            => '_sodium_mg',
        'label'         => __( 'میزان سدیم (mg در ۱۰۰ گرم)', 'woocommerce' ),
        'description'   => __( 'مثلاً برای پسته شور: 400', 'woocommerce' ),
        'desc_tip'      => true,
        'type'          => 'number',
        'custom_attributes' => array(
            'step' => 'any',
            'min' => '0'
        )
    ));
}

// 2. ذخیره کردن مقدار وارد شده
add_action( 'woocommerce_process_product_meta', 'amir_save_sodium_field' );

function amir_save_sodium_field( $post_id ) {
    $sodium_val = $_POST['_sodium_mg'];
    if ( ! empty( $sodium_val ) ) {
        update_post_meta( $post_id, '_sodium_mg', esc_attr( $sodium_val ) );
    }
}

add_action( 'woocommerce_single_product_summary', 'amir_render_sodium_widget', 25 );

function amir_render_sodium_widget() {
    global $post;
    $sodium = get_post_meta( $post->ID, '_sodium_mg', true );

    // اگر محصول فیلد سدیم نداشت، ویجت را نشان نده
    if ( empty( $sodium ) ) return;

    ?>
    <div class="sodium-calculator-box" data-sodium="<?php echo esc_attr($sodium); ?>">
        <h4>🧂 سنجش فشار خون (سدیم)</h4>
        
        <div class="input-row">
            <label>چند گرم میل می‌کنید؟</label>
            <input type="number" id="gram-input" value="30" min="0">
            <span>گرم</span>
        </div>

        <div class="result-area">
            <div class="progress-container">
                <div class="progress-bar" id="sodium-bar" style="width: 0%;"></div>
            </div>
            <p class="feedback-text">
                <span id="sodium-val">0</span> میلی‌گرم سدیم 
                (<span id="percent-val">0</span>% نیاز روزانه)
            </p>
            <p class="salt-equivalent">
                معادل <span id="salt-val">0</span> گرم نمک طعام
            </p>
        </div>
    </div>
    <?php
}

<style>
.sodium-calculator-box {
    background: #fdfdfd; border: 1px solid #e0e0e0; border-radius: 8px;
    padding: 15px; margin: 20px 0; font-family: inherit;
}
.sodium-calculator-box h4 { margin-top: 0; color: #555; font-size: 14px; }
.input-row { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.input-row input { width: 70px; padding: 5px; text-align: center; border: 1px solid #ccc; border-radius: 4px; }

/* نوار پیشرفت */
.progress-container {
    width: 100%; height: 10px; background: #eee; border-radius: 5px; overflow: hidden; margin-bottom: 8px;
}
.progress-bar {
    height: 100%; width: 0%; background: #4caf50; transition: width 0.3s ease, background 0.3s ease;
}
.feedback-text { font-size: 13px; font-weight: bold; color: #333; margin: 0; }
.salt-equivalent { font-size: 11px; color: #888; margin-top: 5px; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const box = document.querySelector('.sodium-calculator-box');
    if (!box) return;

    const sodiumPer100 = parseFloat(box.dataset.sodium);
    const input = document.getElementById('gram-input');
    const bar = document.getElementById('sodium-bar');
    const sodiumText = document.getElementById('sodium-val');
    const percentText = document.getElementById('percent-val');
    const saltText = document.getElementById('salt-val');

    const DAILY_LIMIT = 2300; // میلی‌گرم (استاندارد جهانی)

    function updateCalc() {
        let weight = parseFloat(input.value) || 0;
        
        // محاسبه مقدار دریافتی
        let intake = (sodiumPer100 * weight) / 100;
        let percentage = (intake / DAILY_LIMIT) * 100;
        
        // محاسبه معادل نمک (فرمول: سدیم ضربدر 2.5)
        let salt = (intake * 2.5) / 1000; // تبدیل به گرم

        // به‌روزرسانی متن‌ها
        sodiumText.textContent = Math.round(intake);
        percentText.textContent = percentage.toFixed(1);
        saltText.textContent = salt.toFixed(2);

        // آپدیت نوار و تغییر رنگ
        bar.style.width = Math.min(percentage, 100) + '%';

        if (percentage < 10) {
            bar.style.backgroundColor = '#4caf50'; // سبز (ایمن)
        } else if (percentage < 30) {
            bar.style.backgroundColor = '#ff9800'; // نارنجی (هشدار)
        } else {
            bar.style.backgroundColor = '#f44336'; // قرمز (خطر)
        }
    }

    // اجرا هنگام لود و هنگام تایپ
    input.addEventListener('input', updateCalc);
    updateCalc();
});
</script>