Peler

: / var / www / html / wp-content / themes / bayisihat-jurnal /
Filename : tpl-alat-nama.php
back
<?php
/* Template Name: Alat — Nama Bayi */
if (!defined('ABSPATH')) exit; get_header(); ?>
<?php echo bs_breadcrumbs_html(); ?>
<header class="wrap tool-hero">
  <p class="eyebrow">Alat percuma</p>
  <h1>Cari Nama Bayi Islam &amp; Maksudnya</h1>
  <p>Ratusan nama bayi lelaki &amp; perempuan pilihan beserta maksud — tapis ikut jantina, huruf pangkal, atau cari terus.</p>
</header>
<div class="wrap">
  <div class="tool-box reveal">
    <form class="tool-form name-filters" onsubmit="return false" id="nama-form">
      <div class="tool-field" style="max-width:190px">
        <label for="nama-g">Jantina</label>
        <select id="nama-g"><option value="">Semua</option><option value="L">Lelaki</option><option value="P">Perempuan</option></select>
      </div>
      <div class="tool-field" style="max-width:160px">
        <label for="nama-huruf">Huruf pangkal</label>
        <select id="nama-huruf"><option value="">Semua</option><?php foreach(range('A','Z') as $h){ echo '<option>'.$h.'</option>'; } ?></select>
      </div>
      <div class="tool-field">
        <label for="nama-cari">Cari nama / maksud</label>
        <input type="search" id="nama-cari" placeholder="cth: cahaya, Aisyah…">
      </div>
      <button class="btn btn--ghost" id="nama-rawak" type="button">🎲 Nama rawak</button>
    </form>
    <p class="name-count" id="nama-count">Memuatkan nama…</p>
    <div class="name-grid" id="nama-grid"></div>
    <p style="margin-top:1.2rem;text-align:center"><button class="btn btn--primary" id="nama-more" type="button" hidden>Papar lagi</button></p>
  </div>
  <p class="tool-note"><strong>Nota:</strong> Maksud nama adalah ringkasan umum daripada bahasa asal (kebanyakannya Arab). Sebelum membuat keputusan muktamad, elok sahkan ejaan Jawi &amp; maksud dengan rujukan agama atau ustaz — dan pastikan sedap disebut bersama nama bapa. Baca juga: <a href="<?php echo esc_url(home_url('/nama-bayi-islam-maksud/')); ?>">panduan memilih nama bayi</a>.</p>
</div>
<section class="wrap section reveal"><?php echo bs_newsletter_form(); ?></section>
<script>
(function(){
  var DATA = [], shown = 60, filtered = [];
  var grid = document.getElementById('nama-grid'), count = document.getElementById('nama-count'), more = document.getElementById('nama-more');
  function esc(s){ var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
  function render(){
    grid.innerHTML = '';
    filtered.slice(0, shown).forEach(function(n){
      var el = document.createElement('div'); el.className = 'name-card';
      el.innerHTML = '<b>' + esc(n.n) + '</b><small>' + esc(n.m) + '</small>' +
        '<span class="name-origin">' + (n.g === 'L' ? '👦 Lelaki' : '👧 Perempuan') + (n.a ? ' · ' + esc(n.a) : '') + '</span>';
      grid.appendChild(el);
    });
    count.textContent = filtered.length + ' nama dijumpai' + (filtered.length > shown ? ' (paparan ' + shown + ')' : '');
    more.hidden = filtered.length <= shown;
  }
  function apply(){
    var g = document.getElementById('nama-g').value;
    var h = document.getElementById('nama-huruf').value.toLowerCase();
    var q = document.getElementById('nama-cari').value.trim().toLowerCase();
    filtered = DATA.filter(function(n){
      if (g && n.g !== g) return false;
      if (h && n.n.charAt(0).toLowerCase() !== h) return false;
      if (q && n.n.toLowerCase().indexOf(q) === -1 && n.m.toLowerCase().indexOf(q) === -1) return false;
      return true;
    });
    shown = 60; render();
  }
  fetch('<?php echo esc_js(get_template_directory_uri()); ?>/assets/names.json')
    .then(function(r){ return r.json(); })
    .then(function(d){ DATA = d; apply(); })
    .catch(function(){ count.textContent = 'Maaf, data nama gagal dimuatkan. Sila muat semula halaman.'; });
  ['nama-g','nama-huruf'].forEach(function(id){ document.getElementById(id).addEventListener('change', apply); });
  document.getElementById('nama-cari').addEventListener('input', apply);
  more.addEventListener('click', function(){ shown += 60; render(); });
  document.getElementById('nama-rawak').addEventListener('click', function(){
    var g = document.getElementById('nama-g').value;
    var pool = DATA.filter(function(n){ return !g || n.g === g; });
    filtered = pool.slice().sort(function(){ return Math.random() - .5; }).slice(0, 6);
    shown = 6; render();
    count.textContent = '6 cadangan rawak — tekan lagi untuk set baru 🎲';
  });
})();
</script>
<?php get_footer(); ?>