@extends('admin.layout')

@section('title', __('Aide'))

@push('head')
    <link rel="stylesheet" href="@assetV('css/aide.css')">
@endpush

@section('content')

    <div class="pagetitle">
        <h1>{{ __('Aide') }}</h1>
        <p class="mb-0">
            {{ __('Comment se servir d\'ACPORTAIL, écran par écran. Vous ne voyez que ce que votre rôle vous permet de faire : :roles.', [
                'roles' => Auth::user()->getRoleNames()->map(fn ($r) => __(ucfirst($r)))->implode(', ') ?: __('aucun'),
            ]) }}
        </p>
    </div>

    <section class="section aide">

        {{-- Première connexion : on arrive ici avant le tableau de bord
             (AuthenticatedSessionController::store). --}}
        @if ($premiereVisite)
            <div class="card aide-accueil mb-4">
                <div class="card-body pt-3">
                    <h2 class="h5 fw-bold mb-2">
                        <i class="bi bi-emoji-smile me-1"></i>
                        {{ __('Bienvenue sur ACPORTAIL, :prenom !', ['prenom' => Auth::user()->prenom]) }}
                    </h2>
                    <p class="mb-2">{{ __('Avant de commencer, prenez deux minutes pour parcourir les sujets ci-dessous : ils expliquent les écrans auxquels vous avez accès et les gestes qui s\'y font.') }}</p>
                    <ul class="mb-3">
                        <li>{{ __('Commencez par « Premiers pas » : le menu, les messages, le bouton « Annuler ».') }}</li>
                        <li>{{ __('L\'aide reste dans le menu, tout en bas. Une pastille s\'y allume quand un sujet vous concernant est ajouté.') }}</li>
                    </ul>
                    <a href="{{ route('dashboards.index') }}" class="btn btn-primary btn-sm">
                        {{ __('J\'ai compris, aller au tableau de bord') }} <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </div>
        @endif

        <div class="row g-4">

            {{-- Sommaire : colonne fixe sur ordinateur, rangée de pastilles
                 qui défile sur téléphone. --}}
            <div class="col-lg-3">
                <nav class="aide-sommaire" aria-label="{{ __('Sommaire') }}">
                    <div class="aide-recherche mb-3">
                        <i class="bi bi-search"></i>
                        <input type="search" class="form-control" id="aide-recherche" autocomplete="off"
                            placeholder="{{ __('Chercher dans l\'aide…') }}" aria-label="{{ __('Chercher dans l\'aide') }}">
                    </div>
                    <ul class="aide-themes">
                        @foreach ($themes as $cleTheme => $theme)
                            <li data-theme-lien="{{ $cleTheme }}">
                                <a href="#theme-{{ $cleTheme }}">
                                    <i class="bi {{ $theme['icone'] }}"></i>
                                    <span>{{ __($theme['titre']) }}</span>
                                    @if (collect($theme['sujets'])->contains('nouveau', true))
                                        <span class="badge rounded-pill bg-primary">{{ __('Nouveau') }}</span>
                                    @endif
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </nav>
            </div>

            <div class="col-lg-9">
                @foreach ($themes as $cleTheme => $theme)
                    <div class="card aide-theme mb-4" id="theme-{{ $cleTheme }}" data-theme="{{ $cleTheme }}">
                        <div class="card-body pt-3">
                            <h2 class="h5 fw-bold mb-3">
                                <i class="bi {{ $theme['icone'] }} me-1"></i> {{ __($theme['titre']) }}
                            </h2>

                            <div class="accordion" id="accordeon-{{ $cleTheme }}">
                                @foreach ($theme['sujets'] as $cle => $sujet)
                                    <div class="accordion-item" id="sujet-{{ $cle }}" data-sujet>
                                        <h3 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#contenu-{{ $cle }}"
                                                aria-expanded="false" aria-controls="contenu-{{ $cle }}">
                                                <i class="bi {{ $sujet['icone'] }} me-2"></i>
                                                <span>{{ __($sujet['titre']) }}</span>
                                                @if ($sujet['nouveau'])
                                                    <span class="badge rounded-pill bg-primary ms-2">{{ __('Nouveau') }}</span>
                                                @endif
                                            </button>
                                        </h3>
                                        <div id="contenu-{{ $cle }}" class="accordion-collapse collapse">
                                            <div class="accordion-body">
                                                @include('admin.support.sujets.' . $cle)
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach

                <div class="card d-none" id="aide-rien">
                    <div class="card-body pt-3" data-modele="{{ __('Aucun sujet ne parle de « :mot ».') }}"></div>
                </div>

                <p class="small mb-0">
                    {{ __('Une question qui ne figure pas ici ? Demandez-la, elle y sera ajoutée.') }}
                </p>
            </div>
        </div>
    </section>

@endsection

@push('scripts')
    <script src="@assetV('js/aide.js')"></script>
@endpush