<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>تابلو قیمت طلا</title>
<style>
.gold-wrapper {
  direction: rtl;
  max-width: 400px;
  margin: 20px auto;
  padding: 15px;
  border: 2px solid #d4af37;
  border-radius: 12px;
  background: #fffdf5;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  font-family: "Tahoma", sans-serif;
}

.gold-title {
  font-size: 18px;
  font-weight: 700;
  color: #b8860b;
  margin-bottom: 12px;
  text-align: center;
}

.gold-boxes {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.gold-box {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  color: #fff;
  text-align: center;
  transition: background 0.3s ease;
}

.buy-box {
  background: #2e7d32; /* سبز */
}
.buy-box:hover {
  background: #1b5e20;
}

.sell-box {
  background: #c62828; /* قرمز */
}
.sell-box:hover {
  background: #8e0000;
}

.gold-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.gold-price {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

/* فلش تغییر قیمت */
.price-up::after {
  content: "▲";
  color: #00ff00;
  font-size: 14px;
}
.price-down::after {
  content: "▼";
  color: #ff0000;
  font-size: 14px;
}

.gold-price-footer {
  margin-top: 10px;
  font-size: 12px;
  color: #555;
  text-align: center;
}
</style>
</head>
<body>

<div class="gold-wrapper">
  <div class="gold-title">نقد شده فردا</div>
  <div class="gold-boxes">
    <div class="gold-box buy-box">
      <div class="gold-label">خرید</div>
      <div class="gold-price"><span id="buy-gram">--</span> تومان</div>
    </div>
    <div class="gold-box sell-box">
      <div class="gold-label">فروش</div>
      <div class="gold-price"><span id="sell-gram">--</span> تومان</div>
    </div>
  </div>
  <div class="gold-price-footer">آخرین بروزرسانی: <span id="updated-at">--</span></div>
</div>

<script>
  var url = "/wp-json/gold/v1/latest?id=16d0268e-4522-4101-9d5a-feb2c21218a1";
  var prevBuy = 0, prevSell = 0;

  function refreshGoldPrice(){
    fetch(url, { cache: "no-store" })
      .then(r => r.json())
      .then(d => {
        if(!d || d.code) return;
        var buyEl = document.getElementById('buy-gram');
        var sellEl = document.getElementById('sell-gram');
        var ua = document.getElementById('updated-at');

        var newBuy = parseInt(d.buy_gram18.replace(/,/g,'')) || 0;
        var newSell = parseInt(d.sell_gram18.replace(/,/g,'')) || 0;

        // فلش خرید
        if(newBuy > prevBuy){
          buyEl.classList.remove('price-down');
          buyEl.classList.add('price-up');
        } else if(newBuy < prevBuy){
          buyEl.classList.remove('price-up');
          buyEl.classList.add('price-down');
        }
        // فلش فروش
        if(newSell > prevSell){
          sellEl.classList.remove('price-down');
          sellEl.classList.add('price-up');
        } else if(newSell < prevSell){
          sellEl.classList.remove('price-up');
          sellEl.classList.add('price-down');
        }

        buyEl.textContent = d.buy_gram18;
        sellEl.textContent = d.sell_gram18;
        ua.textContent = d.updated_at;

        prevBuy = newBuy;
        prevSell = newSell;
      })
      .catch(()=>{});
  }

  refreshGoldPrice();
  setInterval(refreshGoldPrice, 5000);
</script>

</body>
</html>
