@php
    use App\Models\Backend\ContentArticle;

    $terms = ContentArticle::with('translations')
        ->where('article_portal_category', 'redd-plus')
        ->where('article_category', 'GLOSSARY')
        ->where('article_status', 'ACTIVE')
        ->orderBy('article_sorting')
        ->get();
@endphp

<style>
.hero-glossary{
  background:url('/assets/redd-plus/gl_hero_bg.png') center/cover no-repeat;
  padding:4rem 0 4.5rem;
}
.hero-glossary h1{
  color:var(--green-800);font-weight:700;
  font-size:clamp(2.4rem,4.5vw,3.3rem);
}
.hero-glossary p{font-size:1.1rem;font-weight:500;max-width:340px;}
.term-search{
  background:#fff;border:1px solid #e2ddd0;border-radius:50rem;
  display:flex;align-items:center;
  max-width:400px;padding:.35rem .5rem .35rem 1.2rem;
  box-shadow:0 6px 18px rgba(46,74,53,.06);
}
.term-search input{
  border:0;outline:0;flex:1;font-size:.95rem;font-weight:500;
  color:var(--ink);background:transparent;padding:.5rem 0;
}
.term-search input::placeholder{color:#9aa59c;}
.term-search .divider{width:1px;height:24px;background:#e2ddd0;margin:0 .4rem;}
.term-search .bi{color:var(--green-800);font-size:1.2rem;padding:.4rem .7rem;}

.letter-bar{display:flex;flex-wrap:wrap;gap:.4rem;}
.letter-btn{
  min-width:38px;height:38px;
  border:1px solid #e2ddd0;background:#fff;color:var(--ink);
  border-radius:.5rem;font-weight:600;font-size:.9rem;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s ease;cursor:pointer;
}
.letter-btn:hover{border-color:var(--green-800);color:var(--green-900);}
.letter-btn.active{
  border-color:var(--green-800);color:var(--green-800);
  background:var(--green-100);font-weight:700;
}
.letter-btn:disabled{opacity:.35;pointer-events:none;}

.glossary-card{
  background:#fdfcf9;
  border:1px solid #ece8db;
  border-radius:1rem;
  box-shadow:0 8px 24px rgba(46,74,53,.05);
  padding:.5rem 2rem;
}
.term-row{
  display:flex;gap:1.5rem;
  padding:1.6rem 0;
  border-bottom:1px solid #e8e4d8;
}
.term-row:last-child{border-bottom:0;}
.term-name{
  flex:0 0 150px;
  color:var(--green-800);font-weight:700;font-size:1.1rem;
  border-right:1px solid #e2ddd0;
  padding-right:1rem;
}
.term-def{margin:0;font-weight:500;font-size:.98rem;line-height:1.7;}

.footer-glossary{
  background:url('/assets/redd-plus/gl_footer_bg.png') center bottom/cover no-repeat;
  padding:6rem 0 2.5rem;
  margin-top:2rem;
}
.footer-glossary a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;
  display:inline-flex;align-items:center;gap:.55rem;
}
.footer-glossary a:hover{color:var(--green-800);}
.footer-glossary .bi{color:var(--green-900);font-size:1.05rem;}

@media (max-width: 575.98px){
  .term-row{flex-direction:column;gap:.5rem;}
  .term-name{flex:none;border-right:0;border-bottom:1px solid #e2ddd0;padding:0 0 .5rem;}
}

.footer-faq{background:url("/assets/redd-plus/faq_footer_bg.png") center bottom/cover no-repeat;padding:6rem 0 3rem;margin-top:2rem;}.footer-faq a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.55rem;}.footer-faq a:hover{color:var(--green-800);}.footer-faq .bi{color:var(--green-900);font-size:1.1rem;}
</style><header class="hero-glossary">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h1>Glossary</h1>
        <p class="mt-3 mb-4">Key terms and definitions used in the context of REDD+ Malaysia.</p>
        <div class="term-search">
          <input type="search" id="termSearch" placeholder="Search terms..." aria-label="Search terms">
          <span class="divider"></span>
          <i class="bi bi-search"></i>
        </div>
      </div>
    </div>
  </div>
</header>

<main class="container py-4" style="max-width:900px;">
  <div class="letter-bar py-3" id="letterBar" role="tablist" aria-label="Filter terms by letter"></div>

  <div class="glossary-card mt-2" id="glossaryList">
    @foreach($terms as $item)
      @php
        $t = $item->translations->first();
        $term = $t?->article_translation_title ?? 'Untitled';
        $def = strip_tags($t?->article_translation_content ?? '');
        $letter = strtoupper(substr(trim($term), 0, 1));
      @endphp
      <div class="term-row" data-letter="{{ $letter }}">
        <div class="term-name">{{ $term }}</div>
        <p class="term-def">{{ $def }}</p>
      </div>
    @endforeach
  </div>

  <p id="noResults" class="text-center fw-semibold mt-4 d-none">No terms match your search.</p>

  <div id="paginationControls" class="d-flex align-items-center justify-content-center gap-3 mt-4">
    <button id="prevPage" class="btn btn-sm" style="border:1px solid #e2ddd0;background:#fff;color:var(--ink);border-radius:.5rem;padding:.45rem 1rem;font-weight:600;font-size:.85rem;" disabled>
      <i class="bi bi-chevron-left me-1"></i> Prev
    </button>
    <span id="pageInfo" class="fw-semibold" style="font-size:.88rem;color:var(--ink);"></span>
    <button id="nextPage" class="btn btn-sm" style="border:1px solid #e2ddd0;background:#fff;color:var(--ink);border-radius:.5rem;padding:.45rem 1rem;font-weight:600;font-size:.85rem;">
      Next <i class="bi bi-chevron-right ms-1"></i>
    </button>
  </div>
</main>


<style>
.footer-redd-article {
  background: url('/assets/redd-plus/faq_footer_bg.png') center bottom/cover no-repeat;
  padding: 4rem 0 2.5rem;
}
.footer-redd-article a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .85rem;
}
.footer-redd-article a:hover { color: var(--green-800); }
.footer-redd-article .bi { color: var(--green-800); font-size: 1.1rem; }
.footer-redd-article .f-divider { width: 1px; height: 26px; background: #cfc9b8; }
</style>

    <footer class="footer-redd-article">
      <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center gap-4">
          <img src="/assets/redd-plus/logo.png" alt="REDD+ Malaysia" height="46">
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="https://redd.nres.gov.my"><i class="bi bi-globe2"></i> redd.nres.gov.my</a>
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="mailto:redd@nres.gov.my"><i class="bi bi-envelope"></i> redd@nres.gov.my</a>
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="tel:+60380008000"><i class="bi bi-telephone"></i> +603 8000 8000</a>
        </div>
      </div>
    </footer>
</div>
</footer>

<script>
const rows = document.querySelectorAll('.term-row');
const bar = document.getElementById('letterBar');
const searchBox = document.getElementById('termSearch');
const noResults = document.getElementById('noResults');
const prevBtn = document.getElementById('prevPage');
const nextBtn = document.getElementById('nextPage');
const pageInfo = document.getElementById('pageInfo');
const paginationWrap = document.getElementById('paginationControls');
let activeLetter = 'All';
let currentPage = 1;
const perPage = 10;

const lettersUsed = new Set([...rows].map(r => r.dataset.letter));
const letters = ['All', ...Array.from({length:26}, (_,i) => String.fromCharCode(65+i))];
letters.forEach(l => {
  const b = document.createElement('button');
  b.className = 'letter-btn' + (l === 'All' ? ' active' : '');
  b.textContent = l;
  if (l !== 'All' && !lettersUsed.has(l)) b.disabled = true;
  b.addEventListener('click', () => {
    bar.querySelectorAll('.letter-btn').forEach(x => x.classList.remove('active'));
    b.classList.add('active');
    activeLetter = l;
    searchBox.value = '';
    currentPage = 1;
    applyFilter();
  });
  bar.appendChild(b);
});

function applyFilter(){
  const term = searchBox.value.trim().toLowerCase();
  let matched = [];

  rows.forEach(r => {
    const byLetter = activeLetter === 'All' || r.dataset.letter === activeLetter;
    const byText = term === '' || r.textContent.toLowerCase().includes(term);
    const show = term === '' ? byLetter : byText;
    r.style.display = 'none';
    if (show) matched.push(r);
  });

  const total = matched.length;
  const totalPages = Math.max(1, Math.ceil(total / perPage));
  if (currentPage > totalPages) currentPage = totalPages;

  const start = (currentPage - 1) * perPage;
  const end = start + perPage;
  matched.forEach((r, i) => {
    r.style.display = (i >= start && i < end) ? '' : 'none';
  });

  noResults.classList.toggle('d-none', total > 0);

  if (total > perPage) {
    paginationWrap.classList.remove('d-none');
    prevBtn.disabled = currentPage <= 1;
    nextBtn.disabled = currentPage >= totalPages;
    pageInfo.textContent = 'Page ' + currentPage + ' of ' + totalPages;
  } else {
    paginationWrap.classList.add('d-none');
  }
}

prevBtn.addEventListener('click', () => { currentPage--; applyFilter(); });
nextBtn.addEventListener('click', () => { currentPage++; applyFilter(); });
searchBox.addEventListener('input', () => { currentPage = 1; applyFilter(); });

applyFilter();
</script>