@extends('layouts.app')
@section('title','Help Centre')
@section('page-title','Help Centre')

@push('styles')
<style>
/* ── Help Centre layout ──────────────────────────────── */
.hc-wrap       { display:flex; gap:2rem; align-items:flex-start; }
.hc-sidebar    { width:220px; flex-shrink:0; position:sticky; top:80px; }
.hc-main       { flex:1; min-width:0; }
.hc-cat-link   { display:block; padding:.4rem .9rem; border-radius:8px; font-size:.83rem;
                  font-weight:600; color:var(--text-2); text-decoration:none; transition:all .12s; }
.hc-cat-link:hover, .hc-cat-link.active { background:var(--ul-primary); color:#fff; }
.hc-cat-group  { margin-bottom:1.25rem; }
.hc-cat-head   { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
                  color:var(--text-3); padding:.2rem .9rem .4rem; }
.article-card  { display:block; padding:1.1rem 1.4rem; border-radius:14px; text-decoration:none;
                  border:1.5px solid var(--card-border); margin-bottom:.75rem;
                  background:var(--card-bg); transition:all .15s; color:var(--text-1); }
.article-card:hover { border-color:var(--ul-primary); transform:translateY(-2px);
                       box-shadow:0 6px 24px rgba(0,0,0,.1); }
.article-card .ac-cat { font-size:.7rem; font-weight:700; text-transform:uppercase;
                         letter-spacing:.08em; color:var(--ul-primary); margin-bottom:.3rem; }
.article-card .ac-title { font-weight:700; font-size:.95rem; margin-bottom:.25rem; }
.article-card .ac-summary { font-size:.83rem; color:var(--text-2); line-height:1.5; }
.search-box    { position:relative; }
.search-box input { padding:.7rem 1rem .7rem 2.8rem; border-radius:12px; font-size:.95rem;
                     border:2px solid var(--card-border); width:100%;
                     background:var(--card-bg); color:var(--text-1); }
.search-box input:focus { outline:none; border-color:var(--ul-primary);
                            box-shadow:0 0 0 3px rgba(29,144,128,.15); }
.search-box .si { position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
                   color:var(--text-3); font-size:1.05rem; }
.category-section { margin-bottom:2.5rem; }
.cat-section-head { font-size:.72rem; font-weight:800; text-transform:uppercase;
                     letter-spacing:.1em; color:var(--text-3);
                     border-bottom:2px solid var(--card-border); padding-bottom:.5rem;
                     margin-bottom:1rem; }
@media(max-width:768px){
  .hc-wrap { flex-direction:column; }
  .hc-sidebar { width:100%; position:static; }
}
</style>
@endpush

@section('content')
<div class="page-header">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
            <h1>Help Centre</h1>
            <nav aria-label="breadcrumb"><ol class="breadcrumb">
                <li class="breadcrumb-item active">Browse all help articles</li>
            </ol></nav>
        </div>
        <div style="font-size:.83rem;color:var(--text-3);">
            <i class="bi bi-journal-text me-1"></i>{{ array_sum(array_map('count', $categories)) }} articles
        </div>
    </div>
</div>

{{-- Search --}}
<form method="GET" action="{{ route('help.index') }}" class="mb-4">
    <div class="search-box">
        <i class="bi bi-search si"></i>
        <input type="text" name="q" value="{{ $query }}"
               placeholder="Search help articles — e.g. &quot;timesheet&quot;, &quot;GPS clock-in&quot;, &quot;payslip&quot;…"
               autofocus>
    </div>
</form>

@if($query && count($articles))
{{-- Search results --}}
<div class="mb-3 d-flex align-items-center justify-content-between">
    <div style="font-size:.87rem;color:var(--text-2);">
        <strong>{{ count($articles) }}</strong> result{{ count($articles)!=1?'s':'' }} for
        "<strong>{{ e($query) }}</strong>"
    </div>
    <a href="{{ route('help.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
</div>
@foreach($articles as $a)
<a href="{{ route('help.article', $a['id']) }}" class="article-card">
    <div class="ac-cat">{{ $a['category'] }}</div>
    <div class="ac-title">{{ $a['title'] }}</div>
    <div class="ac-summary">{{ $a['summary'] }}</div>
</a>
@endforeach

@elseif($query)
<div class="text-center py-5" style="color:var(--text-3);">
    <i class="bi bi-search d-block mb-2" style="font-size:2.5rem;opacity:.3;"></i>
    <div class="fw-semibold mb-1">No results for "{{ e($query) }}"</div>
    <div style="font-size:.84rem;">Try different keywords, or browse all articles below.</div>
    <a href="{{ route('help.index') }}" class="btn btn-outline-primary mt-3">Browse All Articles</a>
</div>
@endif

@if(!$query)
<div class="hc-wrap">
    {{-- Sidebar navigation --}}
    <nav class="hc-sidebar">
        <div style="font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
                    color:var(--text-3);margin-bottom:.75rem;">Contents</div>
        @foreach($categories as $cat => $arts)
        <div class="hc-cat-group">
            <div class="hc-cat-head">{{ $cat }}</div>
            @foreach($arts as $a)
            <a href="{{ route('help.article', $a['id']) }}" class="hc-cat-link">
                {{ $a['title'] }}
            </a>
            @endforeach
        </div>
        @endforeach
    </nav>

    {{-- Article grid --}}
    <div class="hc-main">
        @foreach($categories as $cat => $arts)
        <div class="category-section" id="cat-{{ Str::slug($cat) }}">
            <div class="cat-section-head">{{ $cat }}</div>
            @foreach($arts as $a)
            <a href="{{ route('help.article', $a['id']) }}" class="article-card">
                <div class="ac-cat">{{ $a['category'] }}</div>
                <div class="ac-title">{{ $a['title'] }}</div>
                <div class="ac-summary">{{ $a['summary'] }}</div>
            </a>
            @endforeach
        </div>
        @endforeach
    </div>
</div>
@endif

@endsection