Peler

: / var / www / html / wp-content / themes / bayisihat-jurnal /
Filename : tpl-alat-ovulasi.php
back
<?php
/* Template Name: Alat — Kalkulator Ovulasi */
if (!defined('ABSPATH')) exit; get_header(); ?>
<?php echo bs_breadcrumbs_html(); ?>
<header class="wrap tool-hero">
  <p class="eyebrow">Alat percuma</p>
  <h1>Kalkulator Ovulasi &amp; Masa Subur</h1>
  <p>Kalkulator ini bantu anda kira tarikh ovulasi dan tetingkap subur berdasarkan kitaran haid, supaya lebih mudah merancang masa terbaik untuk cuba hamil. Cukup masukkan tarikh hari pertama haid akhir dan panjang kitaran anda, biar kami kira selebihnya.</p>
</header>
<div class="wrap">
  <div class="tool-box reveal">
    <form class="tool-form" id="ov-form" onsubmit="return false">
      <div class="tool-field">
        <label for="ov-lmp">Hari pertama haid terakhir (LMP)</label>
        <input type="date" id="ov-lmp" required>
      </div>
      <div class="tool-field" style="max-width:220px">
        <label for="ov-cycle">Purata kitaran haid (hari)</label>
        <select id="ov-cycle"><?php for($i=21;$i<=35;$i++){ echo '<option value="'.$i.'"'.($i===28?' selected':'').'>'.$i.' hari</option>'; } ?></select>
      </div>
      <button class="btn btn--primary" id="ov-btn" type="submit">Kira Masa Subur</button>
    </form>
    <div class="tool-result" id="ov-result" aria-live="polite">
      <p class="eyebrow" style="margin-bottom:.2rem">Tetingkap subur terdekat anda</p>
      <div class="tool-result__big" id="ov-window">—</div>
      <p id="ov-note" style="color:var(--muted);font-size:.98rem"></p>
      <div class="tool-result__grid">
        <div class="tool-stat"><b id="ov-date">—</b><span>Anggaran hari ovulasi</span></div>
        <div class="tool-stat"><b id="ov-edd">—</b><span>Anggaran EDD jika hamil kitaran ini</span></div>
      </div>
      <div id="ov-next" style="margin-top:1.4rem"></div>
    </div>
  </div>
  <p class="tool-note"><strong>Bagaimana ia dikira?</strong> Kalkulator ini menjangka tarikh ovulasi anda dengan mengira hari pertama haid akhir ditambah dengan panjang kitaran haid tolak 14 hari. Daripada tarikh itu, tetingkap subur dikira bermula 5 hari sebelum ovulasi sehingga 1 hari selepasnya, iaitu tempoh peluang paling tinggi untuk hamil. Kaedah ini paling berkesan untuk kitaran haid yang tetap, dan kurang tepat kalau kitaran anda tidak menentu. Ingat, ini hanyalah anggaran berdasarkan formula biasa, bukan pengesahan perubatan. Kalau anda sukar hamil selepas mencuba atau kitaran haid sangat tidak teratur, sila rujuk doktor atau klinik kesihatan untuk pemeriksaan lanjut.</p>
</div>
<?php $faq = bs_faq(); if ($faq): ?>
<section class="wrap section"><div class="faq" style="max-width:760px;margin:0 auto"><h2>Soalan Lazim</h2>
<?php foreach ($faq as $f): if(empty($f['q'])||empty($f['a'])) continue; ?>
  <details class="faq__item"><summary><?php echo esc_html($f['q']); ?></summary><div class="faq__a"><?php echo esc_html($f['a']); ?></div></details>
<?php endforeach; ?></div></section>
<?php endif; ?>
<section class="wrap section reveal"><?php echo bs_newsletter_form('Merancang kehamilan? Ikuti panduan kami', 'Langgan untuk tips kesuburan, kehamilan & penjagaan bayi terus ke e-mel anda.'); ?></section>
<script>
(function(){
  var BM=['Jan','Feb','Mac','Apr','Mei','Jun','Jul','Ogos','Sep','Okt','Nov','Dis'];
  var msDay=86400000;
  function fmt(d){return d.getDate()+' '+BM[d.getMonth()]+' '+d.getFullYear();}
  function fmtShort(d){return d.getDate()+' '+BM[d.getMonth()];}
  var form=document.getElementById('ov-form');
  form.addEventListener('submit',function(){
    var v=document.getElementById('ov-lmp').value; if(!v)return;
    var lmp=new Date(v+'T00:00:00');
    var cycle=parseInt(document.getElementById('ov-cycle').value,10)||28;
    var today=new Date(); today.setHours(0,0,0,0);
    var rows='', firstWin='', firstOv=null;
    for(var n=0;n<4;n++){
      var start=new Date(lmp.getTime()+n*cycle*msDay);
      var ov=new Date(start.getTime()+(cycle-14)*msDay);
      var fs=new Date(ov.getTime()-5*msDay), fe=new Date(ov.getTime()+1*msDay);
      if(fe<today) continue; // skip past windows
      if(!firstOv){
        firstOv=ov; firstWin=fmt(fs)+' hingga '+fmt(fe);
        document.getElementById('ov-window').textContent=fmtShort(fs)+' – '+fmt(fe);
        document.getElementById('ov-date').textContent=fmt(ov);
        var edd=new Date(ov.getTime()+266*msDay);
        document.getElementById('ov-edd').textContent=fmt(edd);
        document.getElementById('ov-note').textContent='Peluang hamil paling tinggi dalam tetingkap ini, terutama 2 hari sebelum ovulasi.';
      } else {
        rows+='<div class="tool-stat" style="text-align:left"><b>'+fmtShort(fs)+' – '+fmtShort(fe)+'</b><span>Ovulasi ~'+fmtShort(ov)+'</span></div>';
      }
    }
    document.getElementById('ov-next').innerHTML = rows ? '<p class="eyebrow" style="margin:.2rem 0 .6rem">Tetingkap subur akan datang</p><div class="tool-result__grid">'+rows+'</div>' : '';
    document.getElementById('ov-result').classList.add('show');
  });
})();
</script>
<?php get_footer(); ?>