const nutritionData = {
    "apricot": { 
        name: "برگه زردآلو", 
        vitA: 3604, // IU (واحد بین‌المللی)
        vitC: 1,    // mg
        iron: 2.7,  // mg
        potassium: 1162 // mg
    },
    "fig": { 
        name: "انجیر خشک", 
        vitA: 10, 
        vitC: 1.2, 
        iron: 2.0, 
        potassium: 680 
    },
    "raisin": { 
        name: "کشمش/مویز", 
        vitA: 0, 
        vitC: 2.3, 
        iron: 1.9, 
        potassium: 749 
    },
    "walnut": { 
        name: "گردو", 
        vitA: 20, 
        vitC: 1.3, 
        iron: 2.9, 
        potassium: 441 
    },
    "kiwi": { 
        name: "چیپس کیوی", 
        vitA: 87, 
        vitC: 150, // بسیار بالا
        iron: 0.5, 
        potassium: 310 
    }
};

// نیاز روزانه متوسط یک فرد بالغ (Approximate Daily Value)
const dailyNeeds = {
    vitA: 5000,   // IU
    vitC: 90,     // mg
    iron: 18,     // mg
    potassium: 4700 // mg
};

<div class="vitamin-tool-wrapper">
    <h3>🧪 آزمایشگاه ویتامین خشکبار</h3>
    
    <div class="input-section">
        <select id="fruit-selector">
            <option value="apricot">برگه زردآلو 🍑</option>
            <option value="fig">انجیر خشک</option>
            <option value="raisin">کشمش/مویز 🍇</option>
            <option value="walnut">گردو 🌰</option>
            <option value="kiwi">چیپس کیوی 🥝</option>
        </select>
        
        <input type="number" id="fruit-weight" placeholder="وزن (گرم)" value="30">
        <button onclick="addItem()" class="add-btn">افزودن به بشقاب</button>
    </div>

    <div id="selected-list">
        <p class="empty-msg">هنوز چیزی انتخاب نکرده‌اید...</p>
    </div>

    <div class="results-section">
        <h4>📊 ویتامین‌های دریافتی (درصد از نیاز روزانه):</h4>
        
        <div class="nutrient-row">
            <span>ویتامین A (چشم و پوست)</span>
            <div class="progress-bg"><div id="bar-vitA" class="progress-fill" style="width:0%">0%</div></div>
        </div>

        <div class="nutrient-row">
            <span>ویتامین C (ایمنی)</span>
            <div class="progress-bg"><div id="bar-vitC" class="progress-fill" style="width:0%">0%</div></div>
        </div>

        <div class="nutrient-row">
            <span>آهن (انرژی و خون)</span>
            <div class="progress-bg"><div id="bar-iron" class="progress-fill" style="width:0%">0%</div></div>
        </div>

        <div class="nutrient-row">
            <span>پتاسیم (فشار خون)</span>
            <div class="progress-bg"><div id="bar-potassium" class="progress-fill" style="width:0%">0%</div></div>
        </div>
    </div>
    
    <div class="total-weight-box">
        وزن کل مخلوط: <span id="total-grams">0</span> گرم
    </div>
</div>

.vitamin-tool-wrapper {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    font-family: 'Vazir', sans-serif;
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #eee;
}
.input-section {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.input-section select, .input-section input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    flex: 1;
}
.add-btn {
    background: #FF9800;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}
.add-btn:hover { background: #e68900; }

#selected-list {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    min-height: 50px;
}
.list-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 5px 0;
    font-size: 14px;
}
.remove-item { color: red; cursor: pointer; margin-right: 10px; }

.nutrient-row { margin-bottom: 15px; }
.nutrient-row span { display: block; margin-bottom: 5px; font-size: 14px; color: #555; }
.progress-bg {
    background: #eee;
    border-radius: 20px;
    height: 20px;
    width: 100%;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: #4CAF50; /* سبز ویتامین */
    color: white;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    transition: width 0.5s ease;
}
/* رنگ‌های مختلف برای هر ویتامین */
#bar-vitA { background: #FFC107; } /* نارنجی */
#bar-vitC { background: #FF5722; } /* قرمز */
#bar-iron { background: #795548; } /* قهوه‌ای */
#bar-potassium { background: #2196F3; } /* آبی */

<script>
// آرایه برای ذخیره اقلامی که کاربر اضافه کرده
let userMix = [];

function addItem() {
    const selector = document.getElementById('fruit-selector');
    const weightInput = document.getElementById('fruit-weight');
    const fruitKey = selector.value;
    const weight = parseFloat(weightInput.value);

    if (weight <= 0 || isNaN(weight)) {
        alert("لطفاً وزن معتبر وارد کنید!");
        return;
    }

    // اضافه کردن به آرایه
    userMix.push({
        key: fruitKey,
        name: nutritionData[fruitKey].name,
        weight: weight
    });

    renderList();
    calculateTotals();
}

function removeItem(index) {
    userMix.splice(index, 1); // حذف از آرایه
    renderList();
    calculateTotals();
}

function renderList() {
    const listDiv = document.getElementById('selected-list');
    listDiv.innerHTML = ""; // پاک کردن لیست قبلی

    if (userMix.length === 0) {
        listDiv.innerHTML = '<p class="empty-msg">هنوز چیزی انتخاب نکرده‌اید...</p>';
        return;
    }

    userMix.forEach((item, index) => {
        const div = document.createElement('div');
        div.className = 'list-item';
        div.innerHTML = `
            <span>${item.name} (${item.weight} گرم)</span>
            <span class="remove-item" onclick="removeItem(${index})">× حذف</span>
        `;
        listDiv.appendChild(div);
    });
}

function calculateTotals() {
    // مقادیر اولیه صفر
    let totals = { vitA: 0, vitC: 0, iron: 0, potassium: 0, weight: 0 };

    // حلقه روی آیتم‌های کاربر
    userMix.forEach(item => {
        const data = nutritionData[item.key];
        // فرمول: (مقدار در ۱۰۰ گرم * وزن کاربر) / ۱۰۰
        totals.vitA += (data.vitA * item.weight) / 100;
        totals.vitC += (data.vitC * item.weight) / 100;
        totals.iron += (data.iron * item.weight) / 100;
        totals.potassium += (data.potassium * item.weight) / 100;
        totals.weight += item.weight;
    });

    // نمایش وزن کل
    document.getElementById('total-grams').innerText = totals.weight;

    // محاسبه درصد نیاز روزانه و آپدیت نمودارها
    updateBar('bar-vitA', totals.vitA, dailyNeeds.vitA);
    updateBar('bar-vitC', totals.vitC, dailyNeeds.vitC);
    updateBar('bar-iron', totals.iron, dailyNeeds.iron);
    updateBar('bar-potassium', totals.potassium, dailyNeeds.potassium);
}

function updateBar(elementId, currentVal, dailyNeed) {
    // محاسبه درصد
    let percentage = (currentVal / dailyNeed) * 100;
    
    // محدود کردن به ۱۰۰٪ (برای گرافیک) یا گذاشتن سقف
    let displayPercent = Math.round(percentage);
    
    // انتخاب المان
    const bar = document.getElementById(elementId);
    
    // آپدیت عرض و متن
    bar.style.width = Math.min(displayPercent, 100) + "%"; // عرض از ۱۰۰ بیشتر نشود که بزند بیرون
    bar.innerText = displayPercent + "%";
    
    // تغییر رنگ اگر بیش از حد نیاز باشد (مثلاً سبز پررنگ)
    if(displayPercent > 100) {
        bar.innerText = displayPercent + "% (عالی!)";
        bar.style.backgroundColor = "#2E7D32"; 
    }
}
</script>