const fiberData = {
    "fig": { name: "انجیر خشک", fiber: 9.8, image: "fig-icon.png" }, // پادشاه فیبر
    "prune": { name: "آلو خشک", fiber: 7.1, image: "prune-icon.png" },
    "date": { name: "خرما", fiber: 6.7, image: "date-icon.png" },
    "apricot": { name: "برگه زردآلو", fiber: 7.3, image: "apricot-icon.png" },
    "apple": { name: "چیپس سیب (با پوست)", fiber: 8.7, image: "apple-icon.png" },
    "raisin": { name: "کشمش", fiber: 3.7, image: "raisin-icon.png" },
    "pear": { name: "گلابی خشک", fiber: 7.5, image: "pear-icon.png" }
};

<div class="fiber-calc-container">
    <div class="header-box">
        <h3>🌾 محاسبه‌گر فیبر روزانه</h3>
        <p>آیا امروز به اندازه کافی فیبر خورده‌اید؟ (هدف: ۳۰ گرم)</p>
    </div>

    <div class="input-area">
        <label>میوه خشک را انتخاب کنید:</label>
        <select id="fiber-product">
            <option value="fig">انجیر خشک (بمب فیبر)</option>
            <option value="prune">آلو بخارا (ضد یبوست)</option>
            <option value="apple">چیپس سیب</option>
            <option value="apricot">قیسی / زردآلو</option>
            <option value="pear">گلابی خشک</option>
            <option value="date">خرما</option>
            <option value="raisin">کشمش</option>
        </select>

        <label>مقدار مصرف (گرم):</label>
        <div class="input-group">
            <input type="number" id="fiber-weight" value="50" placeholder="مثلاً ۵۰">
            <button onclick="addFiberItem()" class="add-btn">افزودن +</button>
        </div>
    </div>

    <ul id="added-items-list"></ul>

    <div class="result-area">
        <div class="progress-container">
            <div class="progress-bar" id="fiber-bar" style="width: 0%;">0%</div>
        </div>
        <p class="status-text">مجموع فیبر دریافتی: <span id="total-fiber-display">0</span> گرم</p>
        
        <div id="fiber-advice" class="advice-box" style="display:none;"></div>
    </div>
</div>

.fiber-calc-container {
    background: #fff; border: 1px solid #e0e0e0; border-radius: 12px;
    padding: 20px; max-width: 500px; margin: 20px auto; font-family: 'Vazir', sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.header-box h3 { color: #2e7d32; margin-bottom: 5px; }
.header-box p { font-size: 13px; color: #666; }

.input-area select, .input-area input {
    width: 100%; padding: 10px; margin-top: 5px; margin-bottom: 15px;
    border: 1px solid #ccc; border-radius: 6px;
}
.add-btn {
    background: #2e7d32; color: white; border: none; padding: 10px 20px;
    border-radius: 6px; cursor: pointer; width: 100%; font-size: 16px;
}
.add-btn:hover { background: #1b5e20; }

#added-items-list {
    list-style: none; padding: 0; margin: 20px 0; border-top: 1px dashed #eee;
}
#added-items-list li {
    display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f9f9f9; font-size: 14px;
}
.delete-btn { color: red; cursor: pointer; margin-right: 10px; font-weight: bold;}

.progress-container {
    width: 100%; background-color: #e0e0e0; border-radius: 20px; margin-top: 20px; overflow: hidden;
}
.progress-bar {
    height: 25px; background-color: #4caf50; text-align: center;
    line-height: 25px; color: white; font-size: 12px; width: 0%; transition: width 0.5s;
}
.advice-box {
    margin-top: 15px; padding: 10px; background: #fff3e0; border-radius: 8px;
    border-right: 4px solid #ff9800; font-size: 13px; line-height: 1.6;
}

<script>
const fiberDb = {
    "fig": { name: "انجیر خشک", fiber: 9.8 },
    "prune": { name: "آلو خشک", fiber: 7.1 },
    "apple": { name: "چیپس سیب", fiber: 8.7 },
    "apricot": { name: "قیسی", fiber: 7.3 },
    "pear": { name: "گلابی خشک", fiber: 7.5 },
    "date": { name: "خرما", fiber: 6.7 },
    "raisin": { name: "کشمش", fiber: 3.7 }
};

let currentItems = [];
const DAILY_GOAL = 30; // گرم

function addFiberItem() {
    const key = document.getElementById('fiber-product').value;
    const weight = parseFloat(document.getElementById('fiber-weight').value);

    if (!weight || weight <= 0) { alert("وزن را وارد کنید!"); return; }

    const itemFiber = (fiberDb[key].fiber * weight) / 100;

    currentItems.push({
        name: fiberDb[key].name,
        weight: weight,
        fiber: itemFiber
    });

    updateUI();
}

function removeItem(index) {
    currentItems.splice(index, 1);
    updateUI();
}

function updateUI() {
    // 1. آپدیت لیست
    const listEl = document.getElementById('added-items-list');
    listEl.innerHTML = "";
    let totalFiber = 0;

    currentItems.forEach((item, index) => {
        totalFiber += item.fiber;
        listEl.innerHTML += `<li>
            <span>${item.name} (${item.weight}g)</span>
            <span>${item.fiber.toFixed(1)}g فیبر <span class="delete-btn" onclick="removeItem(${index})">×</span></span>
        </li>`;
    });

    // 2. آپدیت نوار پیشرفت
    const percentage = Math.min((totalFiber / DAILY_GOAL) * 100, 100);
    const bar = document.getElementById('fiber-bar');
    
    bar.style.width = percentage + "%";
    bar.innerText = Math.round(percentage) + "%";
    
    // تغییر رنگ نوار بر اساس پیشرفت
    if (percentage < 50) bar.style.backgroundColor = "#ff9800"; // نارنجی
    else if (percentage < 100) bar.style.backgroundColor = "#4caf50"; // سبز
    else bar.style.backgroundColor = "#2196f3"; // آبی (بیش از حد)

    document.getElementById('total-fiber-display').innerText = totalFiber.toFixed(1);

    // 3. پیام هوشمند (Smart Advice)
    const adviceBox = document.getElementById('fiber-advice');
    
    if (totalFiber === 0) {
        adviceBox.style.display = 'none';
    } else if (totalFiber < 15) {
        adviceBox.style.display = 'block';
        adviceBox.innerHTML = "⚠️ فیبر دریافتی شما کم است. پیشنهاد: <strong>۵ عدد انجیر خشک</strong> به لیست اضافه کنید تا ۱۰ گرم فیبر بگیرید. <a href='/product/fig'>خرید انجیر »</a>";
    } else if (totalFiber < 30) {
        adviceBox.style.display = 'block';
        adviceBox.innerHTML = "✅ خوب پیش می‌روید! با افزودن کمی <strong>آلو خشک</strong>، به هدف روزانه می‌رسید. <a href='/product/prune'>خرید آلو »</a>";
    } else {
        adviceBox.style.display = 'block';
        adviceBox.innerHTML = "🎉 عالی! شما نیاز فیبر روزانه خود را تأمین کردید. سلامت گوارش شما تضمین است.";
    }
}
</script>