@extends('layouts.app')

@section('title', $topic['title'] . ' — Help Center')
@section('nav_help', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')
<div class="max-w-3xl"
     x-data="{}"
     x-init="try {
         var r = JSON.parse(localStorage.getItem('pms-help-read') || '[]');
         if (r.indexOf('{{ $topic['slug'] }}') === -1) { r.push('{{ $topic['slug'] }}'); localStorage.setItem('pms-help-read', JSON.stringify(r)); }
     } catch (e) {}">

    {{-- Breadcrumb + position in the sequence --}}
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-5">
        <a href="{{ route('help.index') }}"
           class="inline-flex items-center gap-1.5 text-gray-400 hover:text-gray-600 text-sm transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Help Center
        </a>
        <span class="text-[11px] font-semibold text-gray-400 uppercase tracking-wide">
            Topic {{ $topic['number'] }} of {{ $total }}
        </span>
    </div>

    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl">
        <div class="px-6 pt-6 pb-4 border-b border-gray-50">
            <h1 class="text-lg font-bold text-gray-800">{{ $topic['title'] }}</h1>
            <p class="text-gray-400 text-sm mt-1">{{ $topic['summary'] }}</p>
        </div>

        <div class="px-6 py-5 help-body">
            @include('help.topics.' . $topic['slug'])
        </div>

        @isset($topic['try'])
        <div class="px-6 pb-6">
            <a href="{{ route($topic['try']['route']) }}"
               class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-teal-600 hover:bg-teal-700 rounded-lg transition-colors">
                {{ $topic['try']['label'] }}
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                </svg>
            </a>
        </div>
        @endisset
    </div>

    {{-- Related topics — the cross-links that connect the path --}}
    @if ($related->isNotEmpty())
    <div class="mt-5">
        <p class="text-[11px] font-bold text-gray-400 uppercase tracking-wide mb-2">Related topics</p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
            @foreach ($related as $rel)
            <a href="{{ route('help.show', $rel['slug']) }}"
               class="flex items-center gap-3 px-4 py-3 bg-white border-[0.5px] border-gray-200 rounded-xl hover:border-teal-300 hover:bg-teal-50/30 transition-colors group">
                <span class="flex-shrink-0 w-6 h-6 rounded-full bg-gray-50 border-[0.5px] border-gray-200 text-[11px] font-bold text-gray-500 flex items-center justify-center group-hover:border-teal-300 group-hover:text-teal-700">{{ $rel['number'] }}</span>
                <span class="text-xs font-semibold text-gray-700 group-hover:text-teal-700 truncate">{{ $rel['title'] }}</span>
            </a>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Sequential prev / next --}}
    <div class="mt-5 flex flex-col sm:flex-row gap-2 {{ $prev ? 'sm:justify-between' : 'sm:justify-end' }}">
        @if ($prev)
        <a href="{{ route('help.show', $prev['slug']) }}"
           class="flex-1 sm:max-w-[49%] px-4 py-3 bg-white border-[0.5px] border-gray-200 rounded-xl hover:border-teal-300 transition-colors group">
            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wide">&larr; Previous topic</p>
            <p class="text-xs font-semibold text-gray-700 group-hover:text-teal-700 mt-0.5 truncate">{{ $prev['number'] }}. {{ $prev['title'] }}</p>
        </a>
        @endif
        @if ($next)
        <a href="{{ route('help.show', $next['slug']) }}"
           class="flex-1 sm:max-w-[49%] px-4 py-3 bg-white border-[0.5px] border-gray-200 rounded-xl hover:border-teal-300 transition-colors group sm:text-right">
            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wide">Next topic &rarr;</p>
            <p class="text-xs font-semibold text-gray-700 group-hover:text-teal-700 mt-0.5 truncate">{{ $next['number'] }}. {{ $next['title'] }}</p>
        </a>
        @endif
    </div>
</div>
@endsection