@extends('docs.public.layout')

@section('title', $article['title'] ?? _lang('Documentation'))

@push('styles')
<style>
    /* Article reads large & comfortable (cap width for line length on huge screens) */
    .doc-article { max-width: 1100px; margin-inline: auto; font-size: 1.15rem; }
    .doc-head { display: flex; align-items: center; gap: 1.1rem; }
    .doc-head .ic { width: 72px; height: 72px; border-radius: 1rem; display: inline-flex;
        align-items: center; justify-content: center; font-size: 2.3rem; background: #eff6ff; color: var(--wk-blue); }
    .doc-head h2 { font-size: 2.1rem; }
    .doc-head .summary { font-size: 1.15rem; }
    .doc-section-title { font-weight: 800; color: var(--wk-dark); margin: 2.4rem 0 1rem;
        font-size: 1.5rem; display: flex; align-items: center; gap: .6rem; }
    .doc-section-title i { color: var(--wk-blue); font-size: 1.4rem; }
    /* The main "purpose" block — the big, easy-to-read intro */
    .doc-purpose { background: #fff; border: 1px solid #eef2f7; border-left: 5px solid var(--wk-blue);
        border-radius: .8rem; padding: 1.6rem 1.9rem; color: #1e293b; line-height: 2.1;
        font-size: 1.45rem; box-shadow: 0 6px 20px -16px rgba(15,23,42,.4); }
    .field-table { font-size: 1.05rem; }
    .field-table th { background: #f1f5f9; font-size: .9rem; text-transform: uppercase; letter-spacing: .3px; color: var(--wk-grey); padding: .8rem 1rem; }
    .field-table td { vertical-align: top; padding: .8rem 1rem; }
    .field-table .fname { font-weight: 700; color: var(--wk-dark); white-space: nowrap; }
    .field-table .fconnect { color: var(--wk-blue); font-size: 1rem; }
    .doc-steps { counter-reset: s; list-style: none; padding: 0; }
    .doc-steps li { counter-increment: s; position: relative; padding: .9rem 0 .9rem 3rem; border-bottom: 1px dashed #eef2f7; line-height: 1.9; font-size: 1.2rem; }
    .doc-steps li::before { content: counter(s); position: absolute; left: 0; top: .85rem;
        width: 2.1rem; height: 2.1rem; background: var(--wk-blue); color: #fff; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; }
    .doc-tip { display: flex; gap: .7rem; padding: 1rem 1.2rem; background: #fffbeb;
        border: 1px solid #fde68a; border-radius: .7rem; margin-bottom: .7rem; color: #78350f; line-height: 1.85; font-size: 1.18rem; }
    .doc-tip i { color: #d97706; margin-top: .25rem; font-size: 1.3rem; }
    .related-pill { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #e2e8f0;
        border-radius: 999px; padding: .55rem 1.1rem; color: #334155; font-size: 1.05rem; background: #fff; }
    .related-pill:hover { border-color: #93c5fd; color: var(--wk-blue); }
    @media (max-width: 575.98px) {
        .doc-purpose { font-size: 1.2rem; padding: 1.1rem 1.2rem; line-height: 1.95; }
        .doc-section-title { font-size: 1.3rem; }
        .doc-head h2 { font-size: 1.6rem; }
        .doc-steps li, .doc-tip { font-size: 1.08rem; }
    }
</style>
@endpush

@section('content')
    <nav class="mb-3" style="font-size:.85rem;">
        <a href="{{ route('help.public.center') }}" class="text-muted">
            <i class="bi bi-life-preserver"></i> {{ _lang('Documentation') }}</a>
        <span class="text-muted mx-1">/</span>
        <span>{{ $article['title'] }}</span>
    </nav>

    <div class="doc-head mb-2">
        <span class="ic"><i class="{{ $article['icon'] }}"></i></span>
        <div>
            <h2 class="mb-0 fw-bold">{{ $article['title'] }}</h2>
            <p class="text-muted mb-0">{{ $article['summary'] }}</p>
        </div>
    </div>

    <div class="doc-section-title"><i class="bi bi-bullseye"></i> {{ _lang('Purpose') }}</div>
    <div class="doc-purpose">{{ $article['purpose'] }}</div>

    @if (! empty($article['fields']))
        <div class="doc-section-title"><i class="bi bi-input-cursor-text"></i> {{ _lang('Fields — what each one does') }}</div>
        <div class="table-responsive">
            <table class="table table-bordered field-table mb-0 bg-white">
                <thead>
                    <tr>
                        <th style="width:24%;">{{ _lang('Field') }}</th>
                        <th>{{ _lang('Purpose / Meaning') }}</th>
                        <th style="width:28%;">{{ _lang('Where it is used') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($article['fields'] as $f)
                        <tr>
                            <td class="fname">{{ $f['name'] }}</td>
                            <td>{{ $f['desc'] }}</td>
                            <td class="fconnect">{{ $f['connect'] ?? '—' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <p class="text-muted mt-1" style="font-size:.78rem;">{{ _lang('Fields marked * are required.') }}</p>
    @endif

    @if (! empty($article['steps']))
        <div class="doc-section-title"><i class="bi bi-list-ol"></i> {{ _lang('How to use') }}</div>
        <ol class="doc-steps">
            @foreach ($article['steps'] as $s)
                <li>{{ $s }}</li>
            @endforeach
        </ol>
    @endif

    @if (! empty($article['tips']))
        <div class="doc-section-title"><i class="bi bi-lightbulb"></i> {{ _lang('Important tips') }}</div>
        @foreach ($article['tips'] as $t)
            <div class="doc-tip"><i class="bi bi-exclamation-circle-fill"></i><span>{{ $t }}</span></div>
        @endforeach
    @endif

    @if ($related->count())
        <div class="doc-section-title"><i class="bi bi-link-45deg"></i> {{ _lang('Related topics') }}</div>
        <div class="d-flex flex-wrap gap-2">
            @foreach ($related as $r)
                <a href="{{ route('help.public.show', $r['key']) }}" class="related-pill">
                    <i class="{{ $r['icon'] }}"></i> {{ $r['title'] }}
                </a>
            @endforeach
        </div>
    @endif

    <div class="mt-4">
        <a href="{{ route('help.public.center') }}" class="btn btn-outline-primary btn-sm">
            <i class="bi bi-arrow-left me-1"></i> {{ _lang('All documentation') }}</a>
    </div>
@endsection