@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.($isBn ? 'ইউজার ম্যানুয়াল' : 'User Manual'))

@section('content')
@php
    $active = $activeSection;
@endphp
<div class="container-fluid py-3 um-page {{ $isBn ? 'um-bn' : 'um-en' }}">
    <div class="um-hero mb-3">
        <div class="d-flex flex-wrap justify-content-between align-items-start" style="gap:12px;">
            <div>
                <div class="um-kicker">{{ $isBn ? 'সহায়িকা' : 'Help center' }}</div>
                <h3 class="mb-1 um-title">{{ $isBn ? 'ইউজার ম্যানুয়াল গাইড' : 'User Manual Guide' }}</h3>
                <p class="mb-0 um-subtitle">
                    {{ $isBn
                        ? 'ফিচার ও ওয়ার্কফ্লো সহজ ভাষায় — উদাহরণসহ, যাতে কোন সেটিং কী করে মনে থাকে।'
                        : 'Plain-language help for Features and workflows — with examples so you remember what each setting does.' }}
                </p>
            </div>
            <div class="d-flex flex-wrap align-items-center" style="gap:8px;">
                <div class="um-lang" role="group" aria-label="{{ $isBn ? 'ভাষা' : 'Language' }}">
                    <a href="{{ route('admin.user_manual.lang', ['lang' => 'en', 'section' => $active]) }}"
                       class="um-lang__btn {{ $lang === 'en' ? 'is-active' : '' }}">English</a>
                    <a href="{{ route('admin.user_manual.lang', ['lang' => 'bn', 'section' => $active]) }}"
                       class="um-lang__btn {{ $lang === 'bn' ? 'is-active' : '' }}">বাংলা</a>
                </div>
                <a href="{{ route('website.settings') }}#feaures" class="btn btn-sm btn-light border">
                    {{ $isBn ? 'ফিচার খুলুন' : 'Open Features' }}
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-3 mb-3">
            <div class="card um-nav border-0 shadow-sm sticky-top" style="top: 70px;">
                <div class="card-header bg-white border-0 pb-0">
                    <div class="font-weight-bold">{{ $isBn ? 'বিষয়সমূহ' : 'Topics' }}</div>
                </div>
                <div class="px-3 pt-2 pb-2">
                    <input type="search" id="umTopicSearch" class="form-control form-control-sm um-search"
                           placeholder="{{ $isBn ? 'বিষয় খুঁজুন…' : 'Search topics…' }}">
                </div>
                <div class="um-topic-scroll">
                    @foreach($groups as $groupName => $topics)
                        <div class="um-group" data-um-group>
                            <div class="um-group__label">{{ $groupName }}</div>
                            <div class="list-group list-group-flush um-topic-list">
                                @foreach($topics as $topic)
                                    <a href="{{ route('admin.user_manual', ['section' => $topic['key']]) }}"
                                       data-um-label="{{ strtolower($topic['title'].' '.$topic['key']) }}"
                                       class="list-group-item list-group-item-action um-topic {{ $active === $topic['key'] ? 'active' : '' }}">
                                        <i class="mdi {{ $topic['icon'] }} um-topic__icon"></i>
                                        <span>{{ $topic['title'] }}</span>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="col-lg-9">
            <div class="card um-main border-0 shadow-sm">
                <div class="card-header bg-white um-main__head">
                    <div class="d-flex align-items-center" style="gap:10px;">
                        <span class="um-main__icon"><i class="mdi {{ $activeIcon }}"></i></span>
                        <div>
                            <h4 class="mb-0">{{ $activeTitle }}</h4>
                            <div class="text-muted small">
                                {{ $isBn ? 'ধাপ ও উদাহরণসহ ব্যাখ্যা' : 'Steps and examples included' }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body um-content">
                    @include($contentView, ['isBn' => $isBn, 'lang' => $lang])
                </div>
            </div>
        </div>
    </div>
</div>

@push('css')
<style>
    .um-page { --um-accent: #2f6fed; --um-bg: #f4f7fb; }
    .um-hero {
        background: linear-gradient(135deg, #eef4ff 0%, #f8fafc 55%, #ffffff 100%);
        border: 1px solid #e3ebf5;
        border-radius: 14px;
        padding: 18px 20px;
    }
    .um-kicker {
        font-size: 0.75rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #5b6b7c;
        font-weight: 600;
        margin-bottom: 4px;
    }
    .um-title { font-weight: 700; color: #1f2a37; }
    .um-subtitle { color: #5b6b7c; max-width: 46rem; }
    .um-lang {
        display: inline-flex;
        background: #fff;
        border: 1px solid #d7e0ea;
        border-radius: 999px;
        overflow: hidden;
        padding: 3px;
    }
    .um-lang__btn {
        display: inline-block;
        padding: 5px 14px;
        font-size: 0.82rem;
        font-weight: 600;
        color: #4b5c6b;
        text-decoration: none !important;
        border-radius: 999px;
    }
    .um-lang__btn.is-active {
        background: var(--um-accent);
        color: #fff;
    }
    .um-nav { border-radius: 14px; overflow: hidden; }
    .um-search { border-radius: 8px; }
    .um-topic-scroll { max-height: 68vh; overflow-y: auto; padding-bottom: 8px; }
    .um-group__label {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #8a97a6;
        padding: 10px 16px 4px;
    }
    .um-topic {
        border: 0 !important;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 16px !important;
        font-size: 0.9rem;
        color: #334155;
    }
    .um-topic__icon { color: #7b8b9c; font-size: 1.05rem; width: 1.2rem; }
    .um-topic.active {
        background: #eaf1ff !important;
        color: var(--um-accent) !important;
        font-weight: 600;
        border-left: 3px solid var(--um-accent) !important;
    }
    .um-topic.active .um-topic__icon { color: var(--um-accent); }
    .um-main { border-radius: 14px; overflow: hidden; }
    .um-main__head { border-bottom: 1px solid #eef2f6; padding: 16px 20px; }
    .um-main__icon {
        width: 42px; height: 42px; border-radius: 12px;
        background: #eaf1ff; color: var(--um-accent);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.35rem;
    }
    .um-page .um-content { font-size: 0.96rem; line-height: 1.65; color: #2c3a4a; }
    .um-page.um-bn .um-content { line-height: 1.8; }
    .um-page .um-content h5 {
        margin-top: 1.35rem;
        margin-bottom: .6rem;
        font-weight: 700;
        color: #1f2a37;
        font-size: 1.05rem;
    }
    .um-page .um-content h5:first-child { margin-top: 0; }
    .um-page .um-content ul, .um-page .um-content ol { padding-left: 1.2rem; }
    .um-page .um-example {
        background: #f5f9ff;
        border: 1px solid #d9e6fb;
        border-left: 4px solid var(--um-accent);
        border-radius: 10px;
        padding: 12px 14px;
        margin: 14px 0;
    }
    .um-page .um-example strong { display: block; margin-bottom: 4px; color: #1f4db8; }
    .um-page .um-tip {
        background: #fff8e8;
        border: 1px solid #f0e0b2;
        border-radius: 10px;
        padding: 10px 12px;
        margin: 14px 0;
    }
    .um-page .table { background: #fff; }
</style>
@endpush

@push('script')
<script>
(function () {
    var input = document.getElementById('umTopicSearch');
    if (!input) return;
    input.addEventListener('input', function () {
        var q = (this.value || '').toLowerCase().trim();
        document.querySelectorAll('[data-um-group]').forEach(function (group) {
            var visible = 0;
            group.querySelectorAll('a[data-um-label]').forEach(function (a) {
                var label = a.getAttribute('data-um-label') || '';
                var show = !q || label.indexOf(q) !== -1;
                a.style.display = show ? '' : 'none';
                if (show) visible++;
            });
            group.style.display = visible ? '' : 'none';
        });
    });
})();
</script>
@endpush
@endsection