@extends('hms.layout')
@section('title','Help centre')
@section('content')
<div class="mb-3">
 <h2 class="h5 mb-1">Help centre</h2>
 <p class="text-muted small mb-3">Search guides and frequently asked questions for the functions available to your account.</p>
 <div class="row g-2">
  <div class="col-md-8"><label for="help-search" class="form-label">Search help and FAQs</label><input id="help-search" type="search" class="form-control" placeholder="Try: book appointment, reset password, invoice, triage..." autocomplete="off"></div>
  <div class="col-md-4"><label for="help-category" class="form-label">Category</label><select id="help-category" class="form-select"><option value="">All categories</option>@foreach($topics->pluck('category')->unique()->sort() as $category)<option value="{{ $category }}">{{ ucfirst($category) }}</option>@endforeach</select></div>
 </div>
 <div class="small text-muted mt-2" id="help-count" role="status" aria-live="polite"></div>
</div>
<div class="row g-3" id="help-results">
@foreach($topics as $topic)
<div class="col-12 col-lg-6 help-topic" data-category="{{ $topic['category'] }}" data-search="{{ mb_strtolower($topic['title'].' '.$topic['summary'].' '.$topic['steps'].' '.$topic['faq'].' '.$topic['category']) }}">
 <article class="card h-100 p-3">
  <div class="d-flex justify-content-between align-items-start gap-2 mb-2"><h3 class="h6 mb-0">{{ $topic['title'] }}</h3><span class="badge text-bg-light text-capitalize">{{ $topic['category'] }}</span></div>
  <p class="small mb-2"><strong>{{ $topic['summary'] }}</strong></p>
  <p class="small mb-2">{{ $topic['steps'] }}</p>
  <details class="mb-2"><summary class="small fw-semibold">Frequently asked question</summary><p class="small mt-2 mb-0">{{ $topic['faq'] }}</p></details>
  <div class="mt-auto pt-2"><a class="btn btn-sm btn-outline-primary" href="{{ route($topic['route']) }}">Open function</a></div>
 </article>
</div>
@endforeach
</div>
<div class="card p-4 text-center d-none" id="help-empty"><strong>No matching help articles</strong><p class="small text-muted mb-0">Try another keyword or choose All categories.</p></div>
<script>
document.addEventListener('DOMContentLoaded',function(){
 const search=document.getElementById('help-search'),category=document.getElementById('help-category'),cards=[...document.querySelectorAll('.help-topic')],count=document.getElementById('help-count'),empty=document.getElementById('help-empty');
 function filter(){
  const words=search.value.toLocaleLowerCase().trim().split(/\s+/).filter(Boolean);
  let visible=0;
  cards.forEach(card=>{const match=(!category.value||card.dataset.category===category.value)&&words.every(word=>card.dataset.search.includes(word));card.classList.toggle('d-none',!match);if(match)visible++;});
  count.textContent=visible+' of '+cards.length+' help articles';empty.classList.toggle('d-none',visible!==0);
 }
 search.addEventListener('input',filter);category.addEventListener('change',filter);filter();
});
</script>
@endsection