@extends('layouts.app')
@section('title', $article['title'] . ' — Help')
@section('page-title','Help Centre')

@push('styles')
<style>
.hc-wrap     { display:flex; gap:2rem; align-items:flex-start; }
.hc-sidebar  { width:220px; flex-shrink:0; position:sticky; top:80px; }
.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 { background:var(--body-bg); color:var(--text-1); }
.hc-cat-link.active { background:var(--ul-primary); color:#fff !important; }
.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 content styles ── */
.article-body h3  { font-size:1rem; font-weight:800; color:var(--text-1);
                     margin:1.5rem 0 .6rem; border-left:3px solid var(--ul-primary);
                     padding-left:.7rem; }
.article-body p   { font-size:.9rem; color:var(--text-2); line-height:1.8; margin-bottom:1rem; }
.article-body ol, .article-body ul { padding-left:1.4rem; margin-bottom:1rem; }
.article-body li  { font-size:.9rem; color:var(--text-2); line-height:1.75; margin-bottom:.4rem; }
.article-body code { background:var(--body-bg); border:1px solid var(--card-border);
                      padding:1px 6px; border-radius:5px; font-size:.82rem;
                      color:var(--ul-primary); font-family:'Courier New',monospace; }
/* Callout boxes */
.help-tip     { background:#f0faf4; border-left:4px solid #059669; border-radius:0 10px 10px 0;
                 padding:.8rem 1rem; margin:1rem 0; font-size:.88rem; color:#065f46; }
.help-note    { background:#e0f2fe; border-left:4px solid #0284c7; border-radius:0 10px 10px 0;
                 padding:.8rem 1rem; margin:1rem 0; font-size:.88rem; color:#0c4a6e; }
.help-warning { background:#fff8e1; border-left:4px solid #f59e0b; border-radius:0 10px 10px 0;
                 padding:.8rem 1rem; margin:1rem 0; font-size:.88rem; color:#92400e; }
.help-scenario{ background:#f8fafc; border:1.5px solid var(--card-border); border-radius:10px;
                 padding:.9rem 1.1rem; margin:1rem 0; font-size:.88rem; color:var(--text-2); }
.help-scenario strong { color:var(--ul-primary); }
/* Table */
.help-table   { width:100%; border-collapse:collapse; margin:1rem 0 1.2rem; font-size:.84rem; }
.help-table th { background:var(--ul-primary); color:#fff; padding:.55rem .9rem;
                  text-align:left; font-weight:700; }
.help-table td { padding:.5rem .9rem; border-bottom:1px solid var(--card-border);
                  color:var(--text-2); vertical-align:top; }
.help-table tr:last-child td { border-bottom:none; }
.help-table tr:nth-child(even) td { background:var(--body-bg); }
@media(max-width:768px) {
  .hc-wrap { flex-direction:column; }
  .hc-sidebar { width:100%; position:static; }
}
</style>
@endpush

@section('content')
<div class="d-flex align-items-center gap-2 mb-4 flex-wrap">
    <a href="{{ route('help.index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Help Centre
    </a>
    <nav aria-label="breadcrumb" class="d-inline-block">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('help.index') }}">Help</a></li>
            <li class="breadcrumb-item" style="color:var(--ul-primary);">
                {{ $article['category'] }}
            </li>
            <li class="breadcrumb-item active">{{ $article['title'] }}</li>
        </ol>
    </nav>
</div>

<div class="hc-wrap">
    {{-- Sidebar --}}
    <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;">All Topics</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['id']===$article['id'] ? 'active' : '' }}">
                {{ $a['title'] }}
            </a>
            @endforeach
        </div>
        @endforeach
    </nav>

    {{-- Article --}}
    <div style="flex:1;min-width:0;">
        <div class="card">
            <div class="card-body" style="padding:2rem 2.2rem;">
                <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="badge" style="background:var(--ul-primary);font-size:.7rem;">
                        {{ $article['category'] }}
                    </span>
                </div>
                <h1 style="font-size:1.6rem;font-weight:900;color:var(--text-1);margin-bottom:.4rem;">
                    {{ $article['title'] }}
                </h1>
                <p style="font-size:.88rem;color:var(--text-3);margin-bottom:1.5rem;
                           padding-bottom:1rem;border-bottom:1px solid var(--card-border);">
                    {{ $article['summary'] }}
                </p>

                <div class="article-body">
                    {!! $article['content'] !!}
                </div>
            </div>
        </div>

        {{-- Related articles --}}
        @if(count($related ?? []))
        <div class="mt-4">
            <div style="font-size:.72rem;font-weight:800;text-transform:uppercase;
                         letter-spacing:.1em;color:var(--text-3);margin-bottom:.75rem;">
                Related Articles
            </div>
            <div class="row g-3">
                @foreach($related as $rel)
                <div class="col-12 col-sm-6">
                    <a href="{{ route('help.article', $rel['id']) }}"
                       class="d-flex align-items-start gap-3 p-3 rounded-3 text-decoration-none"
                       style="border:1.5px solid var(--card-border);background:var(--card-bg);
                              color:var(--text-1);transition:all .15s;"
                       onmouseover="this.style.borderColor='var(--ul-primary)'"
                       onmouseout="this.style.borderColor='var(--card-border)'">
                        <i class="bi bi-file-text mt-1" style="color:var(--ul-primary);flex-shrink:0;"></i>
                        <div>
                            <div style="font-size:.7rem;font-weight:700;text-transform:uppercase;
                                         letter-spacing:.07em;color:var(--ul-primary);margin-bottom:.2rem;">
                                {{ $rel['category'] }}
                            </div>
                            <div class="fw-semibold" style="font-size:.87rem;">{{ $rel['title'] }}</div>
                            <div style="font-size:.78rem;color:var(--text-3);">{{ $rel['summary'] }}</div>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <div class="mt-4 text-center" style="font-size:.8rem;color:var(--text-3);">
            Was this article helpful?
            <button onclick="this.textContent='👍 Thanks!';this.disabled=true;"
                    class="btn btn-sm btn-outline-success ms-2">👍 Yes</button>
            <a href="{{ route('help.index') }}" class="btn btn-sm btn-outline-secondary ms-1">
                Browse all articles
            </a>
        </div>
    </div>
</div>
@endsection