Peler

: / var / www / html / wp-content / themes / bayisihat-jurnal /
Filename : tpl-minggu.php
back
<?php
/* Template Name: Kehamilan Mingguan */
if (!defined('ABSPATH')) exit; get_header(); ?>
<?php echo bs_breadcrumbs_html(); ?>
<header class="wrap tool-hero">
  <p class="eyebrow">Penjejak percuma · Minggu 1 – 40</p>
  <h1>Kehamilan Anda, Minggu demi Minggu</h1>
  <p>Saiz bayi, perubahan badan ibu &amp; tip praktikal untuk setiap minggu — dalam Bahasa Melayu, ikut konteks Malaysia.</p>
  <p style="margin-top:1rem"><a class="btn btn--ghost" href="<?php echo esc_url(home_url('/alat/kalkulator-tarikh-bersalin/')); ?>">Tak pasti minggu ke berapa? Kira di sini →</a></p>
</header>
<div class="wrap">
  <nav class="week-nav" id="week-nav" aria-label="Pilih minggu kehamilan"></nav>
  <div class="tool-box week-card reveal" id="week-card" hidden>
    <div class="week-head">
      <h2 id="wk-title">Minggu 12</h2>
      <span class="week-size" id="wk-size">—</span>
    </div>
    <div class="tool-result__grid" style="margin:0 0 1.2rem">
      <div class="tool-stat"><b id="wk-len">—</b><span>Anggaran panjang</span></div>
      <div class="tool-stat"><b id="wk-wt">—</b><span>Anggaran berat</span></div>
      <div class="tool-stat"><b id="wk-tri">—</b><span>Trimester</span></div>
    </div>
    <div class="week-secs">
      <div class="week-sec"><h3>👶 Bayi anda minggu ini</h3><p id="wk-bayi"></p></div>
      <div class="week-sec"><h3>🤰 Badan ibu</h3><p id="wk-ibu"></p></div>
      <div class="week-sec" style="background:var(--highlight);border-color:var(--highlight-warm)"><h3>💡 Tip minggu ini</h3><p id="wk-tip"></p></div>
    </div>
    <div class="week-arrows">
      <button class="btn btn--ghost" id="wk-prev" type="button">← Minggu sebelum</button>
      <button class="btn btn--primary" id="wk-next" type="button">Minggu seterusnya →</button>
    </div>
  </div>
  <p class="tool-note" id="week-loading"><strong>Nota:</strong> Semua saiz, panjang &amp; berat adalah anggaran umum — setiap bayi membesar mengikut rentaknya sendiri. Minggu dikira dari hari pertama haid terakhir (LMP), cara yang sama digunakan di klinik. Untuk pemantauan sebenar, hadiri pemeriksaan di klinik kesihatan ikut jadual buku pink anda.</p>
</div>
<section class="wrap section reveal"><?php echo bs_newsletter_form('Ikuti kehamilan anda minggu demi minggu', 'Langgan percuma & dapatkan checklist hospital bag + jadual imunisasi (PDF).'); ?></section>
<script>
(function(){
  var DATA = null, cur = 12;
  var nav = document.getElementById('week-nav'), card = document.getElementById('week-card');
  function pillFor(n){ return nav.querySelector('[data-w="' + n + '"]'); }
  function show(n){
    if (!DATA) return;
    n = Math.max(1, Math.min(40, n));
    var d = DATA.find(function(x){ return x.week === n; });
    if (!d) return;
    cur = n;
    document.getElementById('wk-title').textContent = 'Minggu ' + n;
    document.getElementById('wk-size').textContent = d.saiz;
    document.getElementById('wk-len').textContent = d.panjang && d.panjang !== '-' ? d.panjang : '—';
    document.getElementById('wk-wt').textContent = d.berat && d.berat !== '-' ? d.berat : '—';
    document.getElementById('wk-tri').textContent = n <= 13 ? 'Pertama' : (n <= 27 ? 'Kedua' : 'Ketiga');
    document.getElementById('wk-bayi').textContent = d.bayi;
    document.getElementById('wk-ibu').textContent = d.ibu;
    document.getElementById('wk-tip').textContent = d.tip;
    document.getElementById('wk-prev').disabled = n <= 1;
    document.getElementById('wk-next').disabled = n >= 40;
    nav.querySelectorAll('.week-pill').forEach(function(p){ p.classList.remove('on'); });
    var pill = pillFor(n); if (pill) pill.classList.add('on');
    card.hidden = false;
    if (history.replaceState) history.replaceState(null, '', '#minggu-' + n);
  }
  for (var i = 1; i <= 40; i++) {
    var b = document.createElement('button');
    b.type = 'button'; b.className = 'week-pill'; b.textContent = i; b.setAttribute('data-w', i);
    b.setAttribute('aria-label', 'Minggu ' + i);
    b.addEventListener('click', function(){ show(parseInt(this.getAttribute('data-w'), 10)); });
    nav.appendChild(b);
  }
  document.getElementById('wk-prev').addEventListener('click', function(){ show(cur - 1); });
  document.getElementById('wk-next').addEventListener('click', function(){ show(cur + 1); });
  fetch('<?php echo esc_js(get_template_directory_uri()); ?>/assets/weeks.json')
    .then(function(r){ return r.json(); })
    .then(function(d){
      DATA = d;
      var m = (location.hash || '').match(/minggu-(\d+)/);
      show(m ? parseInt(m[1], 10) : 12);
    })
    .catch(function(){ document.getElementById('week-loading').innerHTML = '<strong>Maaf,</strong> data minggu gagal dimuatkan. Sila muat semula halaman.'; });
  window.addEventListener('hashchange', function(){
    var m = (location.hash || '').match(/minggu-(\d+)/);
    if (m) show(parseInt(m[1], 10));
  });
})();
</script>
<?php get_footer(); ?>