@extends('layouts.site')

@section('title','Baza Wiedzy - Panel Administratora')

@section('content')

<style>
    :root {
        --kb-bg: #f3f7fb;
        --kb-card: #ffffff;
        --kb-border: #d6e3f0;
        --kb-text: #1f2d3d;
        --kb-primary-soft: #e7f1fb;
        --kb-panel-h: calc(100vh - 160px);
    }

    .kb-wrap {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 16px;
        align-items: stretch;
        height: var(--kb-panel-h);
        min-height: 560px;
    }

    .kb-sidebar {
        position: relative;
        top: 0;
        background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
        border: 1px solid var(--kb-border);
        border-radius: 8px;
        padding: 12px;
        box-shadow: 0 8px 24px rgba(11, 47, 83, 0.08);
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .kb-brand {
        margin-bottom: 12px;
        padding: 10px 12px;
        border-radius: 6px;
        background: var(--kb-primary-soft);
        border: 1px solid #c9def3;
    }

    .kb-brand h5 {
        margin: 0;
        color: #174c7a;
        font-weight: 700;
        font-size: 15px;
    }

    .kb-brand p {
        margin: 4px 0 0 0;
        color: #315f87;
        font-size: 12px;
    }

    .kb-search-group {
        margin-bottom: 10px;
    }

    .kb-search-group input {
        width: 100%;
        border: 1px solid #b9d2ea;
        border-radius: 6px;
        padding: 10px 12px;
        font-size: 13px;
        color: #123a5e;
        background: #fff;
        outline: none;
    }

    .kb-search-group input:focus {
        border-color: #4c94d3;
        box-shadow: 0 0 0 3px rgba(76, 148, 211, 0.15);
    }

    .kb-search-info {
        min-height: 18px;
        margin: 3px 0 9px 0;
        color: #4a6077;
        font-size: 12px;
    }

    .kb-toc {
        border-top: 1px solid #d4e2ef;
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
    }

    .kb-toc h6 {
        margin: 0 0 8px 0;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-size: 11px;
        color: #4d6780;
    }

    .kb-toc-list {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: none;
        min-height: 0;
        flex: 1 1 auto;
        overflow: auto;
    }

    .kb-toc-item {
        margin-bottom: 3px;
    }

    .kb-admin-toc-link {
        display: block;
        padding: 7px 8px;
        border-radius: 6px;
        color: #2a4663;
        font-size: 12px;
        text-decoration: none;
        line-height: 1.3;
        border: 1px solid transparent;
    }

    .kb-admin-toc-link:hover,
    .kb-admin-toc-link:focus {
        background: #edf5fd;
        border-color: #c4dbf0;
        color: #174c7a;
        text-decoration: none;
    }

    .kb-admin-toc-link.active {
        background: #dfefff;
        border-color: #8ab6df;
        color: #0f3f67;
        font-weight: 700;
    }

    .kb-main {
        background: var(--kb-bg);
        border: 1px solid var(--kb-border);
        border-radius: 8px;
        padding: 12px;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .kb-hero {
        background: linear-gradient(130deg, #e8f2fb 0%, #f4fbff 56%, #e8f7ef 100%);
        border: 1px solid #c8dff3;
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 14px;
    }

    .kb-hero h3 {
        margin: 0 0 8px 0;
        color: #183d61;
        font-size: 22px;
        font-weight: 700;
    }

    .kb-hero p {
        margin: 0;
        color: #375a7a;
        font-size: 14px;
    }

    .kb-admin-section {
        background: var(--kb-card);
        border: 1px solid var(--kb-border);
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 12px;
        scroll-margin-top: 70px;
    }

    .kb-admin-section h4 {
        margin: 0 0 8px 0;
        color: var(--kb-text);
        font-size: 18px;
        font-weight: 700;
    }

    .kb-admin-section p {
        margin: 0 0 8px 0;
        color: #2e455d;
        font-size: 14px;
    }

    .kb-admin-section ul {
        margin: 0 0 8px 16px;
        color: #24384d;
        font-size: 14px;
    }

    .kb-note {
        border-left: 4px solid #63a3d8;
        background: #f1f8ff;
        color: #214b6f;
        border-radius: 6px;
        padding: 9px 11px;
        margin: 10px 0;
        font-size: 13px;
    }

    .kb-shot {
        margin-top: 10px;
        border: 2px dashed #aac7e2;
        border-radius: 6px;
        background: #f8fbff;
        padding: 12px;
    }

    .kb-shot-title {
        margin: 0 0 5px 0;
        color: #1e507d;
        font-size: 13px;
        font-weight: 700;
    }

    .kb-shot p {
        margin: 0;
        color: #4b6885;
        font-size: 12px;
    }

    .kb-view-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        border: 1px solid #cfe0f2;
        border-radius: 6px;
        overflow: hidden;
    }

    .kb-view-table th,
    .kb-view-table td {
        border: 1px solid #d8e6f3;
        padding: 8px 10px;
        vertical-align: top;
        font-size: 13px;
        color: #2a4460;
    }

    .kb-view-table th {
        background: #eaf3fc;
        color: #1c4a74;
        font-weight: 700;
    }

    .kb-shot-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .kb-step {
        border: 1px solid #d3e3f2;
        border-radius: 6px;
        background: #f9fcff;
        padding: 10px;
        margin-bottom: 8px;
        font-size: 13px;
        color: #2d4f70;
    }

    .kb-hidden {
        display: none !important;
    }

    .tab-content_2 {
        height: calc(100vh - 225px);
    }

    @media (max-width: 991px) {
        .kb-wrap {
            grid-template-columns: 1fr;
            height: auto;
            min-height: 0;
        }

        .kb-sidebar {
            position: static;
            overflow: visible;
        }

        .kb-toc-list {
            max-height: 300px;
        }

        .kb-main {
            overflow: visible;
        }

        .kb-shot-grid {
            grid-template-columns: 1fr;
        }
    }
</style>


    <div class="row">
        <div class="col-sm-12">
            <div class="kb-wrap">
                <aside class="kb-sidebar">
                    <div class="kb-brand">
                        <h5>Baza Wiedzy - Panel Administratora</h5>
                        <p>Instrukcja dla modulu administracyjnego</p>
                    </div>

                    <div class="kb-search-group">
                        <input id="kbAdminSearchInput" type="text" placeholder="Wyszukaj funkcje panelu admin..." autocomplete="off">
                    </div>
                    <div id="kbAdminSearchInfo" class="kb-search-info"></div>

                    <nav class="kb-toc">
                        <h6>Spis tresci</h6>
                        <ul class="kb-toc-list">
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-start">1. Zakres i role</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-layout">2. Nawigacja i layout</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-slowniki">3. Slowniki i tabele AJAX</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-crud">4. Operacje CRUD i modale</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-role">5. Uzytkownicy, role i uprawnienia</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-struktura">6. Struktura organizacyjna</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-export">7. Eksporty i raporty</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-praktyki">8. Dobre praktyki i bezpieczenstwo</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-map">9. Mapa widokow administratora</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-components">10. Komponenty i konfiguracja</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-scenarios">11. Scenariusze operacyjne</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-2fa">12. Uwierzytelnianie 2FA</a></li>
                            <li class="kb-toc-item"><a class="kb-admin-toc-link" href="#adm-sec-shots">13. Lista screenshotow panelu admin</a></li>
                        </ul>
                    </nav>
                </aside>

                <section class="kb-main" id="kbAdminMainContent">
                    <div class="kb-hero">
                        <h3>Dokumentacja panelu administratora</h3>
                        <p>
                            Zakladka obejmuje obsluge slownikow, kont uzytkownikow, struktury organizacyjnej,
                            komponentow tabeli i modalnych formularzy oraz standardy eksportu.
                        </p>
                    </div>

                    <article id="adm-sec-start" class="kb-admin-section">
                        <h4>1. Zakres i role</h4>
                        <ul>
                            <li>Panel administratora jest przeznaczony dla osob z rolami administracyjnymi.</li>
                            <li>Dostep do funkcji jest kontrolowany uprawnieniami i zakresem odpowiedzialnosci.</li>
                            <li>Brak uprawnien oznacza ukrycie opcji menu i brak dostepu do danych.</li>
                        </ul>
                    </article>

                    <article id="adm-sec-layout" class="kb-admin-section">
                        <h4>2. Nawigacja i layout</h4>
                        <ul>
                            <li>Menu po lewej stronie grupuje widoki administratora i slowniki aplikacji.</li>
                            <li>W naglowku widoku widoczne sa akcje eksportu, filtracji i zamkniecia strony.</li>
                            <li>Tabele i modale dzialaja wedlug wspolnego standardu komponentow globalnych.</li>
                        </ul>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut: menu panelu administratora</p>
                            <p>Sugerowany plik: <code>admin-01-menu.png</code></p>
                        </div>
                    </article>

                    <article id="adm-sec-slowniki" class="kb-admin-section">
                        <h4>3. Slowniki i tabele AJAX</h4>
                        <ul>
                            <li>Widoki slownikowe dzialaja na komponencie tabeli globalnej (DataGrid).</li>
                            <li>Dostepne sa: filtrowanie, wyszukiwanie, paginacja, wybor kolumn i eksport.</li>
                            <li>Ustawienia tabeli moga byc zapamietywane per uzytkownik i per tabela.</li>
                        </ul>
                    </article>

                    <article id="adm-sec-crud" class="kb-admin-section">
                        <h4>4. Operacje CRUD i modale</h4>
                        <ul>
                            <li>Dodawanie, edycja i usuwanie realizowane sa przez globalne komponenty modalne.</li>
                            <li>Walidacja i komunikaty sa ujednolicone we wszystkich formularzach.</li>
                            <li>Po zapisie rekord moze zostac podswietlony jako ostatnio edytowany.</li>
                        </ul>
                    </article>

                    <article id="adm-sec-role" class="kb-admin-section">
                        <h4>5. Uzytkownicy, role i uprawnienia</h4>
                        <ul>
                            <li>Lista uzytkownikow umozliwia przypisywanie rol i zarzadzanie statusem kont.</li>
                            <li>Role aplikacyjne definiuja zakres dostepu do funkcji i modulow.</li>
                            <li>Zmiany uprawnien powinny byc wykonywane ostroznie i testowane po zapisie.</li>
                        </ul>
                    </article>

                    <article id="adm-sec-struktura" class="kb-admin-section">
                        <h4>6. Struktura organizacyjna</h4>
                        <ul>
                            <li>Widok drzewa prezentuje zaleznosci miedzy komorkami organizacyjnymi.</li>
                            <li>Dostepne sa formularze add/edit/delete oraz powiazania z pracownikami.</li>
                            <li>Usuwanie jest blokowane przy aktywnych powiazaniach i zwraca komunikat.</li>
                        </ul>
                    </article>

                    <article id="adm-sec-export" class="kb-admin-section">
                        <h4>7. Eksporty i raporty</h4>
                        <ul>
                            <li>Wspierane formaty: DOC, PDF, PNG, HTML oraz wydruk.</li>
                            <li>Eksport odzwierciedla ustawienia widoku (filtry, kolumny, sortowanie).</li>
                            <li>Dla tabel szerokich stosowany jest uklad poziomy (landscape).</li>
                        </ul>
                    </article>

                    <article id="adm-sec-praktyki" class="kb-admin-section">
                        <h4>8. Dobre praktyki i bezpieczenstwo</h4>
                        <ul>
                            <li>Przed usunieciem rekordu sprawdzaj powiazania z innymi tabelami.</li>
                            <li>Przetestuj zmiany uprawnien na koncie testowym.</li>
                            <li>Po duzych zmianach wykonuj eksport kontrolny i weryfikacje danych.</li>
                        </ul>
                        <div class="kb-note">Zakladka Panel Administratora jest widoczna tylko dla uzytkownikow z uprawnieniami administracyjnymi.</div>
                    </article>

                    <article id="adm-sec-map" class="kb-admin-section">
                        <h4>9. Mapa widokow administratora</h4>
                        <table class="kb-view-table">
                            <thead>
                                <tr>
                                    <th>Widok / trasa</th>
                                    <th>Zakres</th>
                                    <th>Najwazniejsze funkcje</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>m_admin_tree_struktura_graph</code></td>
                                    <td>Graficzne drzewo struktury organizacyjnej.</td>
                                    <td>Rozwijanie/zwijanie galezi, szybka edycja, eksport i wydruk grafu.</td>
                                </tr>
                                <tr>
                                    <td><code>m_admin_struktura_index_component</code></td>
                                    <td>Lista komorek organizacyjnych.</td>
                                    <td>Tabela AJAX, CRUD modalny, filtrowanie, eksport i podglad szczegolow.</td>
                                </tr>
                                <tr>
                                    <td><code>m_admin_osoby_list_component</code></td>
                                    <td>Lista osob i powiazan.</td>
                                    <td>Zarzadzanie rekordami osob, przypisania dzialow i kont APP.</td>
                                </tr>
                                <tr>
                                    <td><code>m_admin_users_list</code></td>
                                    <td>Konta aplikacyjne.</td>
                                    <td>CRUD kont, role, statusy i relacje z osobami.</td>
                                </tr>
                                <tr>
                                    <td><code>admin/app-settings</code></td>
                                    <td>Ustawienia aplikacji (panel administratora).</td>
                                    <td>Zarzadzanie globalna polityka 2FA: disabled / optional / required.</td>
                                </tr>
                                <tr>
                                    <td><code>2fa*</code></td>
                                    <td>Konfiguracja i challenge 2FA uzytkownika.</td>
                                    <td>Wlaczenie TOTP, potwierdzenie kodu, challenge logowania i kody awaryjne.</td>
                                </tr>
                                <tr>
                                    <td><code>m_admin_role_app_list</code></td>
                                    <td>Role aplikacyjne.</td>
                                    <td>Dodawanie/usuwanie rol i kontrola powiazan z funkcjami.</td>
                                </tr>
                                <tr>
                                    <td><code>m_slownik_ajax_*</code></td>
                                    <td>Slowniki aplikacji (globalny DataGrid).</td>
                                    <td>Filtry, kolumny, wyszukiwanie, paginacja, eksport i zapamietywanie ustawien.</td>
                                </tr>
                                <tr>
                                    <td><code>m_slownik_ajax_index_component/{tabela}</code></td>
                                    <td>Widok generyczny slownika.</td>
                                    <td>Konfiguracja etykiet, filtrow i mapowania wartosci (np. TAK/NIE, nazwy zamiast ID).</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut: menu panelu admin i aktywny widok</p>
                            <p>Sugerowany plik: <code>admin-02-mapa-widokow.png</code></p>
                        </div>
                    </article>

                    <article id="adm-sec-components" class="kb-admin-section">
                        <h4>10. Komponenty i konfiguracja</h4>
                        <p>Panel administratora korzysta z tych samych komponentow globalnych co ODO, rozszerzonych o konfiguracje tabel slownikowych.</p>
                        <table class="kb-view-table">
                            <thead>
                                <tr>
                                    <th>Komponent</th>
                                    <th>Co konfiguruje</th>
                                    <th>Uwagi wdrozeniowe</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>ajax-crud-table</code></td>
                                    <td>Kolumny, akcje, endpoint listy i CRUD.</td>
                                    <td>Domyslnie sortowanie: ID ASC, domyslna liczba rekordow na strone zgodna z konfiguracja globalna.</td>
                                </tr>
                                <tr>
                                    <td><code>ajax-filters</code></td>
                                    <td>Filtry slownikowe (wiele na jednym widoku).</td>
                                    <td>Tryb auto-bind i stan filtrow: aktywne/nieaktywne.</td>
                                </tr>
                                <tr>
                                    <td><code>column-visibility-selector</code></td>
                                    <td>Widocznosc i kolejnosc kolumn.</td>
                                    <td>Kolumna Lp zawsze pierwsza, Akcje zawsze ostatnia.</td>
                                </tr>
                                <tr>
                                    <td><code>search-columns-selector</code></td>
                                    <td>Wybor kolumn do wyszukiwania.</td>
                                    <td>Nie przeszukuje kolumn ukrytych.</td>
                                </tr>
                                <tr>
                                    <td><code>ajax-table-export-buttons</code></td>
                                    <td>Eksport tabeli zgodnie z aktualnym filtrem i kolumnami.</td>
                                    <td>Eksportuje tylko aktualnie odfiltrowane dane i kolumny widoczne na widoku.</td>
                                </tr>
                                <tr>
                                    <td><code>global-form-modal</code></td>
                                    <td>Standard modal add/edit/delete/status/info.</td>
                                    <td>Oddzielenie wygladu od logiki - zmiana stylu nie narusza logiki zapisu.</td>
                                </tr>
                            </tbody>
                        </table>
                    </article>

                    <article id="adm-sec-scenarios" class="kb-admin-section">
                        <h4>11. Scenariusze operacyjne</h4>
                        <div class="kb-step"><strong>Scenariusz 1 - Dodanie rekordu slownika:</strong> wejdz na wybrany widok slownika AJAX, kliknij add, uzupelnij dane, zapisz i sprawdz podswietlenie nowego rekordu.</div>
                        <div class="kb-step"><strong>Scenariusz 2 - Zmiana widoku tabeli:</strong> ukryj czesc kolumn, zmien kolejnosc drag&drop i przeladuj widok - ustawienia powinny byc zachowane.</div>
                        <div class="kb-step"><strong>Scenariusz 3 - Praca na filtrach:</strong> ustaw filtry i wyszukiwanie, sprawdz licznik rekordow oraz eksport aktualnego wyniku.</div>
                        <div class="kb-step"><strong>Scenariusz 4 - Operacje na strukturze:</strong> sproboj usunac rekord powiazany - system powinien pokazac komunikat i zamknac modal.</div>
                        <div class="kb-step"><strong>Scenariusz 5 - Wlaczenie i weryfikacja 2FA:</strong> ustaw polityke optional/required w <code>admin/app-settings</code>, wlacz TOTP na koncie testowym, wyloguj sie i sprawdz challenge kodem TOTP oraz recovery code.</div>
                        <div class="kb-shot-grid">
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz 1</p>
                                <p>Sugerowany plik: <code>admin-03-dodanie-slownika.png</code></p>
                            </div>
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz 2</p>
                                <p>Sugerowany plik: <code>admin-04-kolumny-tabeli.png</code></p>
                            </div>
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz 3</p>
                                <p>Sugerowany plik: <code>admin-05-filtry-i-eksport.png</code></p>
                            </div>
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz 4</p>
                                <p>Sugerowany plik: <code>admin-06-walidacja-usuwania.png</code></p>
                            </div>
                        </div>
                    </article>

                    <article id="adm-sec-2fa" class="kb-admin-section">
                        <h4>12. Uwierzytelnianie 2FA</h4>
                        <p>System obsluguje 2FA z metoda TOTP i kodami awaryjnymi oraz jest przygotowany do przyszlej metody SMS.</p>
                        <ul>
                            <li>Globalna polityka 2FA jest konfigurowana w widoku <code>admin/app-settings</code>.</li>
                            <li>Tryby polityki: <code>disabled</code>, <code>optional</code>, <code>required</code>.</li>
                            <li>W trybie <code>required</code> uzytkownik bez skonfigurowanego 2FA po loginie haslem jest kierowany do wymuszonej konfiguracji.</li>
                            <li>W trybie <code>optional</code> challenge wystepuje tylko dla kont z aktywnym 2FA.</li>
                            <li>Kody awaryjne sa jednorazowe i po uzyciu sa usuwane z puli.</li>
                            <li>Sekret TOTP i kody awaryjne sa przechowywane w formie szyfrowanej.</li>
                        </ul>
                        <div class="kb-note">Na obecnym etapie integracja SMSAPI nie jest aktywna. Architektura zawiera placeholder pod metode SMS 2FA.</div>
                        <table class="kb-view-table">
                            <thead>
                                <tr>
                                    <th>Obszar</th>
                                    <th>Trasa / widok</th>
                                    <th>Opis</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Ustawienia globalne</td>
                                    <td><code>admin/app-settings</code></td>
                                    <td>Zarzadzanie polityka 2FA dla calej aplikacji.</td>
                                </tr>
                                <tr>
                                    <td>Ustawienia uzytkownika</td>
                                    <td><code>2fa</code></td>
                                    <td>Wlaczenie, potwierdzenie, wylaczenie 2FA i regeneracja kodow awaryjnych.</td>
                                </tr>
                                <tr>
                                    <td>Challenge logowania</td>
                                    <td><code>2fa/challenge</code>, <code>2fa/verify</code></td>
                                    <td>Drugi etap logowania: kod TOTP albo recovery code.</td>
                                </tr>
                                <tr>
                                    <td>Wymuszona konfiguracja</td>
                                    <td><code>2fa/required-setup</code></td>
                                    <td>Flow aktywowany przy polityce required, gdy konto nie ma 2FA.</td>
                                </tr>
                            </tbody>
                        </table>
                    </article>

                    <article id="adm-sec-shots" class="kb-admin-section">
                        <h4>13. Lista screenshotow panelu admin</h4>
                        <ul>
                            <li>Menu admin i grupy modulow.</li>
                            <li>Widok DataGrid z aktywnymi filtrami.</li>
                            <li>Komponent wyboru kolumn i wyboru kolumn do wyszukiwania.</li>
                            <li>Modal add / edit / delete / status / info.</li>
                            <li>Widok struktury organizacyjnej (lista + graf).</li>
                            <li>Widok kont APP i zarzadzanie rolami.</li>
                            <li>Komunikaty walidacji i komunikaty bledow operacji.</li>
                            <li>Eksport tabeli i raportu grafu.</li>
                            <li>Widok Ustawienia aplikacji z polityka 2FA.</li>
                            <li>Widok challenge 2FA i wymuszonej konfiguracji 2FA.</li>
                        </ul>
                        <div class="kb-note">Kazdy screenshot dodawaj z podpisem: "co widzimy", "jakie dzialanie wykonano", "jaki efekt uzyskano".</div>
                    </article>
                </section>
            </div>
        </div>
    </div>


@endsection

@section('menu')
    @include('sites.admin.menu_admin')
@endsection

@section('navbar')
    @include('sites.admin._navbar_m_admin_site')

    <i class="fas fa-chevron-right separator"></i>
    <span class="navbar_navigate" title="Aktywna Strona">
        Baza Wiedzy
    </span>
@endsection

@push('scripts')
<script>
    (function () {
        var normalize = function (text) {
            return (text || '')
                .toLowerCase()
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '');
        };

        var initKnowledgeBaseSearch = function (config) {
            var searchInput = document.getElementById(config.searchInputId);
            var searchInfo = document.getElementById(config.searchInfoId);
            var tocLinks = Array.prototype.slice.call(document.querySelectorAll(config.tocLinkSelector));
            var sections = Array.prototype.slice.call(document.querySelectorAll(config.sectionSelector));

            if (!searchInput || !searchInfo || !tocLinks.length || !sections.length) {
                return;
            }

            var applySearch = function () {
                var query = normalize(searchInput.value.trim());
                var tokens = query === '' ? [] : query.split(/\s+/).filter(Boolean);
                var visibleCount = 0;

                sections.forEach(function (section) {
                    var haystack = normalize(section.innerText);
                    var visible = tokens.length === 0 || tokens.every(function (token) {
                        return haystack.indexOf(token) !== -1;
                    });

                    section.classList.toggle('kb-hidden', !visible);
                    if (visible) {
                        visibleCount += 1;
                    }

                    var linked = document.querySelector(config.tocLinkSelector + '[href="#' + section.id + '"]');
                    if (linked && linked.parentElement) {
                        linked.parentElement.classList.toggle('kb-hidden', !visible);
                    }
                });

                if (tokens.length === 0) {
                    searchInfo.textContent = '';
                } else {
                    searchInfo.textContent = 'Wyniki wyszukiwania: ' + visibleCount;
                }
            };

            searchInput.addEventListener('input', applySearch);
            applySearch();

            var setActiveLink = function (id) {
                tocLinks.forEach(function (link) {
                    var active = link.getAttribute('href') === '#' + id;
                    link.classList.toggle('active', active);
                });
            };

            var observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        setActiveLink(entry.target.id);
                    }
                });
            }, {
                root: null,
                rootMargin: '-24% 0px -65% 0px',
                threshold: 0
            });

            sections.forEach(function (section) {
                observer.observe(section);
            });

            tocLinks.forEach(function (link) {
                link.addEventListener('click', function () {
                    setActiveLink((link.getAttribute('href') || '').replace('#', ''));
                });
            });
        };

        initKnowledgeBaseSearch({
            searchInputId: 'kbAdminSearchInput',
            searchInfoId: 'kbAdminSearchInfo',
            tocLinkSelector: '.kb-admin-toc-link',
            sectionSelector: '.kb-admin-section'
        });
    })();
</script>
@endpush