@extends('layouts.site')

@php
    $my_name_view = 'SZKOL - Baza Wiedzy';
    $my_short_view_name = 'Baza wiedzy';
@endphp

@section('title','Baza Wiedzy')

@section('content')

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

    .kb-module-tabs {
        border-bottom: 1px solid #c8d8e8;
        margin-bottom: 10px;
    }

    .kb-module-tabs .nav-link {
        border: 1px solid #c8d8e8;
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
        color: #2b4e6f !important;
        font-weight: 600;
        background: #e8f0f8;
        margin-right: 6px;
        padding: 8px 14px;
        transition: all .15s ease-in-out;
    }

    .kb-module-tabs .nav-link:hover,
    .kb-module-tabs .nav-link:focus {
        color: #123f67 !important;
        background: #dce9f6;
        border-color: #8fb6d9;
    }

    .kb-module-tabs .nav-link.active {
        color: #0f3f67 !important;
        background: #ffffff !important;
        border-color: #7faad1 !important;
        box-shadow: inset 0 3px 0 #4e8ec4;
    }

    .kb-module-content .tab-pane {
        background: transparent;
    }

    .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-toc-link,
    .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-toc-link:hover,
    .kb-toc-link:focus,
    .kb-admin-toc-link:hover,
    .kb-admin-toc-link:focus {
        background: #edf5fd;
        border-color: #c4dbf0;
        color: #174c7a;
        text-decoration: none;
    }

    .kb-toc-link.active,
    .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-section,
    .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-section h4,
    .kb-admin-section h4 {
        margin: 0 0 8px 0;
        color: var(--kb-text);
        font-size: 18px;
        font-weight: 700;
    }

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

    .kb-section ul,
    .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-inline-tag {
        display: inline-block;
        border: 1px solid #c6d9ec;
        background: #f5faff;
        border-radius: 999px;
        color: #21517a;
        padding: 2px 9px;
        font-size: 11px;
        margin: 0 6px 6px 0;
    }

    .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 SZKOL</h5>
                        <p>Dokumentacja użytkownika aplikacji</p>
                    </div>

                    <div class="kb-search-group">
                        <input id="kbSearchInput" type="text" placeholder="Wyszukaj funkcje, widok lub temat..." autocomplete="off">
                    </div>
                    <div id="kbSearchInfo" class="kb-search-info"></div>

                    <nav class="kb-toc">
                        <h6>Spis treści</h6>
                        <ul id="kbTocList" class="kb-toc-list">
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-start">1. Start i zakres dokumentacji</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-login">2. Logowanie i bezpieczenstwo</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-layout">3. Uklad aplikacji i nawigacja</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-panel">4. Panel glowny ODO</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-procesy-kafelki">5. Zarzadzanie: Procesy Kafelki</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-procesy-lista">6. Zarzadzanie: Procesy Lista</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-umowy">7. Zarzadzanie: Umowy Powierzenia</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-udostepnienia">8. Zarzadzanie: Udostepnienia Danych</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-upowaznienia">9. Zarzadzanie: Upoważnienia do PDO</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-szkolenia">10. Zarzadzanie: Szkolenia ODO</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-analiza">11. Zarzadzanie: Analizy Ryzyka</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zarz-dpia">12. Zarzadzanie: Oceny Skutkow (DPIA)</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-rej-czynnosci">13. Rejestr Czynności</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-rej-kategorii">14. Rejestr Kategorii Czynności</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-rej-umow">15. Rejestr Umów Powierzenia</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-rej-udostepnien">16. Rejestr Udostepnien</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-rej-upowaznien">17. Rejestr Upowaznien</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-dokumenty">18. Dokumenty: Generator i Lista</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-zgloszenia">19. Zgłoszenia i obieg informacji</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-funkcje-wspolne">20. Funkcje wspolne (filtry, export, modal)</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-dobre-praktyki">21. Dobre praktyki pracy</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-troubleshooting">22. Najczestsze problemy i rozwiazania</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-mapa-widokow">23. Mapa widoków ODO i funkcjonalnosci</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-komponenty-globalne">24. Komponenty globalne - jak używać</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-scenariusze-pracy">25. Scenariusze pracy krok po kroku</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-screenshot-plan">26. Lista zrzutow ekranowych do uzupełnienia</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-szkol-updates-blockady">27. Aktualizacje: blokady i statusy szkolenia</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-szkol-updates-presentation">28. Aktualizacje: prezentacja i testy użytkownika</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-szkol-updates-raporty">29. Aktualizacje: raporty i eksporty</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-szkol-updates-admin">30. Aktualizacje: panel administratora szkolenia</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-szkol-updates-testy">31. Aktualizacje: konfiguracja testów i pytań</a></li>
                            <li class="kb-toc-item"><a class="kb-toc-link" href="#sec-szkol-updates-dashboard">32. Aktualizacje: dashboard i nawigacja m_szkol</a></li>
                        </ul>
                    </nav>
                </aside>

                <section class="kb-main" id="kbMainContent">
                    <div class="kb-hero">
                        <h3>Dokumentacja użytkownika SZKOL</h3>
                        <p>
                            Ten material prowadzi krok po kroku przez glowny przeplyw pracy: od logowania, przez obsługę moduow,
                            po eksport danych i zgłoszenia. Sekcje są przygotowane pod uzupelnienie o zrzuty ekranowe.
                        </p>
                    </div>

                    <article id="sec-start" class="kb-section">
                        <h4>1. Start i zakres dokumentacji</h4>
                        <p>Dokumentacja obejmuje działanie aplikacji ODO od momentu wejscia do systemu az po codzienna prace na rejestrach i formularzach.</p>
                        <p>Material jest napisany tak, aby nowy użytkownik mogl samodzielnie wykonać podstawowe i zaawansowane operacje.</p>
                        <div>
                            <span class="kb-inline-tag">Logowanie</span>
                            <span class="kb-inline-tag">Nawigacja</span>
                            <span class="kb-inline-tag">Rejestry</span>
                            <span class="kb-inline-tag">Zarzadzanie</span>
                            <span class="kb-inline-tag">Eksport</span>
                        </div>
                    </article>

                    <article id="sec-login" class="kb-section">
                        <h4>2. Logowanie i bezpieczenstwo</h4>
                        <ul>
                            <li>Użytkownik otwiera strone logowania i podaje login oraz hasło.</li>
                            <li>Po poprawnym logowaniu system przekierowuje do obszaru aplikacji.</li>
                            <li>Uprawnienia do funkcji są nadawane rolami i zakresem dostępu.</li>
                            <li>Brak uprawnień powoduje ukrycie opcji menu lub brak możliwości operacji.</li>
                        </ul>
                        <div class="kb-note">Rekomendacja: po zakończeniu pracy wyloguj się i nie pozostawiaj aktywnej sesji bez nadzoru.</div>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut ekranu: logowanie</p>
                            <p>Podmien zawartosc tymczasowa na screenshot ekranu logowania i komunikatów walidacyjnych.</p>
                        </div>
                    </article>

                    <article id="sec-layout" class="kb-section">
                        <h4>3. Uklad aplikacji i nawigacja</h4>
                        <ul>
                            <li>Lewa kolumna: menu glowne z grupami funkcji.</li>
                            <li>Gorny pasek: breadcrumb i szybki podgląd aktualnego miejsca.</li>
                            <li>Środek: glowna przestrzen robocza aktualnego widoku.</li>
                            <li>Wiele list posiada ten sam standard: filtry, tabela, akcje, modale i export.</li>
                        </ul>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut ekranu: uklad po zalogowaniu</p>
                            <p>Sugerowany plik: <code>01-uklad-aplikacji.png</code></p>
                        </div>
                    </article>

                    <article id="sec-panel" class="kb-section">
                        <h4>4. Panel glowny ODO</h4>
                        <p>Panel glowny sluzy jako punkt startowy i dashboard nawigacyjny. Z tego miejsca przechodzisz do kluczowych modułów.</p>
                        <ul>
                            <li>Przejście do modułów zarzadzania i rejestrów.</li>
                            <li>Kontrola kontekstu organizacyjnego (zależne od uprawnień).</li>
                            <li>Szybki dostęp do codziennie uzywanych obszarow.</li>
                        </ul>
                    </article>

                    <article id="sec-procesy-kafelki" class="kb-section">
                        <h4>5. Zarzadzanie: Procesy Kafelki</h4>
                        <p>Widok kafelkowy wspiera szybkie przejście do procesów wedlug obszarow organizacyjnych.</p>
                        <ul>
                            <li>Nawigacja po jednostkach i procesach.</li>
                            <li>Podgląd statusu i podstawowych metryk procesu.</li>
                            <li>Przejście do szczegółów procesu.</li>
                        </ul>
                    </article>

                    <article id="sec-procesy-lista" class="kb-section">
                        <h4>6. Zarzadzanie: Procesy Lista</h4>
                        <p>Centralny widok listy procesów. Umożliwia wyszukiwanie, filtrowanie i akcje na rekordach.</p>
                        <ul>
                            <li>Filtry statusu i kryteriow wyszukiwania.</li>
                            <li>Operacje na rekordzie: edycja, podgląd, usuwanie, pliki.</li>
                            <li>Eksport listy do DOC/XLS/CSV/PDF.</li>
                        </ul>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut ekranu: tabela procesów i przyciski akcji</p>
                            <p>Sugerowany plik: <code>02-procesy-lista.png</code></p>
                        </div>
                    </article>

                    <article id="sec-zarz-umowy" class="kb-section">
                        <h4>7. Zarzadzanie: Umowy Powierzenia</h4>
                        <ul>
                            <li>Dodawanie i edycja umów powierzenia.</li>
                            <li>Powiązanie umowy z podmiotem, zakresem i okresem obowiazywania.</li>
                            <li>Obsługa dokumentów powiazanych z umowa.</li>
                            <li>Zmiany statusu i usuwanie rekordów.</li>
                        </ul>
                    </article>

                    <article id="sec-zarz-udostepnienia" class="kb-section">
                        <h4>8. Zarzadzanie: Udostepnienia Danych</h4>
                        <ul>
                            <li>Rejestrowanie podmiotu wnioskujacego i celu udostepnienia.</li>
                            <li>Obsługa statusu zatwierdzenia przez IOD.</li>
                            <li>Zapisywanie daty faktycznego udostepnienia.</li>
                            <li>Historia operacji i edycja wpisów.</li>
                        </ul>
                    </article>

                    <article id="sec-zarz-upowaznienia" class="kb-section">
                        <h4>9. Zarzadzanie: Upoważnienia do PDO</h4>
                        <ul>
                            <li>Nadawanie upowaznien i okreslanie zakresu.</li>
                            <li>Data nadania i data odebrania upoważnienia.</li>
                            <li>Status aktualnosci i przeglad szczegółów osoby.</li>
                            <li>Obsuga dokumentów PDF upowaznien.</li>
                        </ul>
                    </article>

                    <article id="sec-zarz-szkolenia" class="kb-section">
                        <h4>10. Zarzadzanie: Szkolenia ODO</h4>
                        <ul>
                            <li>Planowanie szkolen i rejestracja uczestnikow.</li>
                            <li>Statusy procesu szkoleniowego.</li>
                            <li>Wydruki list i raporty szkoleniowe.</li>
                        </ul>
                    </article>

                    <article id="sec-zarz-analiza" class="kb-section">
                        <h4>11. Zarzadzanie: Analizy Ryzyka</h4>
                        <ul>
                            <li>Tworzenie analiz i podpinanie procesów.</li>
                            <li>Ocena postępu analizy i status roboczy/zapisany.</li>
                            <li>Druk podglądu oraz eksport.</li>
                        </ul>
                    </article>

                    <article id="sec-zarz-dpia" class="kb-section">
                        <h4>12. Zarzadzanie: Oceny Skutkow (DPIA)</h4>
                        <ul>
                            <li>Tworzenie oceny skutkow dla wskazanych procesów.</li>
                            <li>Kontrola stanu wykonania i dat zatwierdzenia.</li>
                            <li>Widoki podglądu i raportowania.</li>
                        </ul>
                    </article>

                    <article id="sec-rej-czynnosci" class="kb-section">
                        <h4>13. Rejestr Czynności</h4>
                        <ul>
                            <li>Wybieranie ADO i zatwierdzenie wyboru jako warunek aktywacji eksportu.</li>
                            <li>Widok danych adresowych i szczegółów rejestru.</li>
                            <li>Eksport danych i wydruki wg ustalonego standardu.</li>
                        </ul>
                        <div class="kb-note">Jezeli ADO nie jest wybrane, akcje eksportu są nieaktywne, a system wyświetla komunikat podpowiedzi.</div>
                    </article>

                    <article id="sec-rej-kategorii" class="kb-section">
                        <h4>14. Rejestr Kategorii Czynności</h4>
                        <ul>
                            <li>Widok rozszerzonych danych kategorii przetwarzan.</li>
                            <li>Informacje o srodkach bezpieczenstwa i transferach danych.</li>
                            <li>Eksport dokumentacyjny w orientacji poziomej.</li>
                        </ul>
                    </article>

                    <article id="sec-rej-umow" class="kb-section">
                        <h4>15. Rejestr Umów Powierzenia</h4>
                        <ul>
                            <li>Lista umów z danymi podmiotu i zakresem umowy.</li>
                            <li>Status obowiazywania i historia dokumentów.</li>
                            <li>Standardowy eksport listy.</li>
                        </ul>
                    </article>

                    <article id="sec-rej-udostepnien" class="kb-section">
                        <h4>16. Rejestr Udostepnien</h4>
                        <ul>
                            <li>Rejestrowanie celu i podstawy prawnej udostepnienia.</li>
                            <li>Daty potwierdzenia oraz daty faktycznego udostepnienia.</li>
                            <li>Status obslugi wpisu i filtrowanie listy.</li>
                        </ul>
                    </article>

                    <article id="sec-rej-upowaznien" class="kb-section">
                        <h4>17. Rejestr Upowaznien</h4>
                        <ul>
                            <li>Podgląd numerow upowaznien, statusów i zakresu.</li>
                            <li>Dane osoby i przynaleznosc do komorek organizacyjnych.</li>
                            <li>Eksport zbiorczy i wydruki dokumentów.</li>
                        </ul>
                    </article>

                    <article id="sec-dokumenty" class="kb-section">
                        <h4>18. Dokumenty: Generator i Lista</h4>
                        <ul>
                            <li>Wzory dokumentów: tworzenie i utrzymanie szablonów.</li>
                            <li>Wygenerowane dokumenty: lista, filtrowanie, pobieranie.</li>
                            <li>Spojnosc z danymi z rejestrów i procesów.</li>
                        </ul>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut ekranu: generator dokumentów</p>
                            <p>Sugerowany plik: <code>03-generator-dokumentów.png</code></p>
                        </div>
                    </article>

                    <article id="sec-zgloszenia" class="kb-section">
                        <h4>19. Zgłoszenia i obieg informacji</h4>
                        <ul>
                            <li>Formularz: potrzeba kontaktu z IOD.</li>
                            <li>Formularz: zgłoszenie nowego procesu.</li>
                            <li>Formularz: zgłoszenie naruszenia.</li>
                            <li>Widok "Moje zgłoszenia" do sledzenia statusów.</li>
                        </ul>
                    </article>

                    <article id="sec-funkcje-wspolne" class="kb-section">
                        <h4>20. Funkcje wspolne (filtry, export, modal)</h4>
                        <ul>
                            <li>Filtrowanie i sortowanie tabel po kolumnach.</li>
                            <li>Wspolny zestaw eksportu: DOC, XLS, CSV, PDF.</li>
                            <li>Okna modalne zgodne ze standardem globalnym.</li>
                            <li>Powiadomienia po akcjach zapisu/usunięcia/aktualizacji.</li>
                        </ul>
                        <div class="kb-note">W eksportach listowych stosowany jest standard ukladu landscape dla PDF i DOC tam, gdzie tabela wymaga szerokiego ukladu.</div>
                    </article>

                    <article id="sec-dobre-praktyki" class="kb-section">
                        <h4>21. Dobre praktyki pracy</h4>
                        <ul>
                            <li>Przed eksportem ustaw filtry i status, aby raport odzwierciedlal oczekiwany zakres.</li>
                            <li>Regularnie uzupelniaj dane slownikowe i statusowe.</li>
                            <li>Nie usuwaj rekordów bez sprawdzenia powiązań i historii dokumentów.</li>
                            <li>W zgloszeniach dodawaj komplet informacji, aby skrocic czas obslugi.</li>
                        </ul>
                    </article>

                    <article id="sec-troubleshooting" class="kb-section">
                        <h4>22. Najczestsze problemy i rozwiazania</h4>
                        <ul>
                            <li>Brak przycisków lub sekcji: sprawdź role i zakres uprawnień.</li>
                            <li>Brak eksportu: sprawdź czy wymagany kontekst (np. wybor ADO) został zatwierdzony.</li>
                            <li>Nieprawidłowe dane na liscie: odswiez filtry i ustawienia sortowania.</li>
                            <li>Brak reakcji po kliknieciu: sprawdź czy popup/modal nie jest blokowany przez przegladarke.</li>
                        </ul>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut ekranu: przyklady komunikatów i błędów</p>
                            <p>Sugerowany plik: <code>04-komunikaty-systemowe.png</code></p>
                        </div>
                    </article>

                    <article id="sec-mapa-widokow" class="kb-section">
                        <h4>23. Mapa widoków ODO i funkcjonalnosci</h4>
                        <p>Ponizej znajduje się praktyczna mapa najwazniejszych widoków ODO wraz z zakresem operacji, jakie użytkownik może wykonać.</p>
                        <table class="kb-view-table">
                            <thead>
                                <tr>
                                    <th>Widok / trasa</th>
                                    <th>Przeznaczenie</th>
                                    <th>Kluczowe operacje</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>m_odo_proces_kafelki_dzial</code></td>
                                    <td>Szybki podgląd procesów po komorkach organizacyjnych.</td>
                                    <td>Wejscie do listy procesów, podgląd statusów i przejście do szczegółów procesu.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_lista_index</code></td>
                                    <td>Glowna lista procesów w ukladzie tabelarycznym.</td>
                                    <td>Filtry, wyszukiwanie, sortowanie, add/edit/delete, statusy, eksport i wydruk.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_lista_info/{id}</code><br><code>m_odo_proces_lista_info_extend/{id}</code></td>
                                    <td>Szczegóły procesu oraz dane rozszerzone.</td>
                                    <td>Edycja danych procesu, zarzadzanie plikami i umowami powiazanymi z procesem.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_umowy_powierzenia_rejestr*</code></td>
                                    <td>Operacje na umowach powierzenia PDO.</td>
                                    <td>CRUD, zmiana statusu, przypisywanie do procesów, eksporty i podglady.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_udostepnienia_danych_rejestr*</code></td>
                                    <td>Rejestr udostepnien danych i obsługa statusów.</td>
                                    <td>Dodawanie wpisów, walidacja, zmiana statusu i kontrola dat potwierdzenia.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_upowaznienia_rejestr*</code></td>
                                    <td>Rejestr upowaznien do przetwarzania danych.</td>
                                    <td>Zarzadzanie statusem upoważnienia, eksporty i widoki szczegolowe.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_proces_szkolenia_rejestr*</code></td>
                                    <td>Ewidencja szkolen i uczestnikow.</td>
                                    <td>CRUD szkolen, lista uczestnikow, import z CSV, kontrola duplikatow.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_analiza_ryzyka_index</code><br><code>m_odo_ocena_skutkow_index</code></td>
                                    <td>Obsługa analiz ryzyka i ocen skutkow (DPIA).</td>
                                    <td>Tworzenie i edycja analiz, podglady raportow, eksporty i wydruki.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_rejestr_* </code></td>
                                    <td>Rejestry formalne ODO (czynności, kategorie, umowy, udostepnienia, upoważnienia).</td>
                                    <td>Przeglad i utrzymanie danych rejestrowych, eksport dokumentacyjny.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_dokumenty_wzory</code><br><code>m_odo_dokumenty_lista</code></td>
                                    <td>Generator dokumentów i lista dokumentów wygenerowanych.</td>
                                    <td>Tworzenie dokumentu z danych systemowych, pobieranie i archiwizacja.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_zgl_rejestr_zgloszen</code></td>
                                    <td>Obsługa zgłoszeń użytkownika.</td>
                                    <td>Podgląd statusów zgłoszeń i historia obiegu informacji.</td>
                                </tr>
                                <tr>
                                    <td><code>m_odo_statystyka_proces_*</code></td>
                                    <td>Wykresy i raporty statystyczne.</td>
                                    <td>Widoki kolowe i zbiorcze, eksporty DOC/PDF/PNG/HTML/Print.</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="kb-shot">
                            <p class="kb-shot-title">Miejsce na zrzut: mapa menu ODO i aktywne grupy</p>
                            <p>Sugerowany plik: <code>05-mapa-widoków-odo.png</code></p>
                        </div>
                    </article>

                    <article id="sec-komponenty-globalne" class="kb-section">
                        <h4>24. Komponenty globalne - jak używać</h4>
                        <p>Modul ODO wykorzystuje wspolne komponenty. Prawidlowe uzycie zapewnia spojna walidacje, styl i zachowanie we wszystkich widokach.</p>
                        <table class="kb-view-table">
                            <thead>
                                <tr>
                                    <th>Komponent</th>
                                    <th>Zastosowanie</th>
                                    <th>Jak używać na widoku</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>global-form-modal</code></td>
                                    <td>Okna modalne add/edit/delete/info/status.</td>
                                    <td>Przekaz id modala, tytul, akcje formularza i pola. Logike zapisu pozostawiasz w kontrolerze.</td>
                                </tr>
                                <tr>
                                    <td><code>view-export-buttons</code></td>
                                    <td>Eksport calego widoku: DOC/PDF/PNG/HTML + wydruk.</td>
                                    <td>Ustaw <code>target-selector</code> i <code>filename-prefix</code>; dla szerokich tabel włącz <code>doc-landscape</code>.</td>
                                </tr>
                                <tr>
                                    <td><code>view-graph-export-buttons</code></td>
                                    <td>Eksport widoków grafowych (np. drzewo struktury).</td>
                                    <td>Użyj na widokach z grafami i ustaw selektor kontenera z grafem.</td>
                                </tr>
                                <tr>
                                    <td><code>ajax-crud-table</code></td>
                                    <td>Globalna tabela DataGrid (index + CRUD + AJAX).</td>
                                    <td>Konfigurujesz kolumny, filtry, akcje, endpoint danych i endpointy operacji.</td>
                                </tr>
                                <tr>
                                    <td><code>ajax-search-box</code> + <code>search-columns-selector</code></td>
                                    <td>Wyszukiwanie tekstowe i wybor kolumn przeszukiwania.</td>
                                    <td>Kolumny ukryte nie są przeszukiwane; licznik pokazuje liczbe aktywnych kolumn.</td>
                                </tr>
                                <tr>
                                    <td><code>column-visibility-selector</code></td>
                                    <td>Wlaczanie/ukrywanie kolumn i ich kolejnosc.</td>
                                    <td>Kolumna Lp jest stale pierwsza, Akcje stale ostatnia.</td>
                                </tr>
                                <tr>
                                    <td><code>ajax-filters</code> + <code>ajax-filters-status-indicator</code></td>
                                    <td>Filtry slownikowe i status ich aktywnosci.</td>
                                    <td>Dla zdefiniowanych filtrów wyświetla status i przycisk czyszczenia filtrów.</td>
                                </tr>
                                <tr>
                                    <td><code>ajax-pagination-controls</code> + <code>records-per-page-selector</code> + <code>ajax-records-count</code></td>
                                    <td>Paginacja i informacje o rekordach.</td>
                                    <td>Pokazuje liczbe rekordów po filtrach oraz liczbe wszystkich rekordów.</td>
                                </tr>
                                <tr>
                                    <td><code>view-close-button</code></td>
                                    <td>Zamykanie aktualnego widoku i powrót do nadrzednego.</td>
                                    <td>Dodawaj w prawym gornym rogu sekcji z akcjami.</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="kb-note">Komponenty powinny być stosowane bez zmiany logiki biznesowej. Najpierw przepiecie stylu i walidacji, potem ewentualna refaktoryzacja danych.</div>
                    </article>

                    <article id="sec-scenariusze-pracy" class="kb-section">
                        <h4>25. Scenariusze pracy krok po kroku</h4>
                        <div class="kb-step"><strong>Scenariusz A - Dodanie procesu:</strong> wejdz na <code>m_odo_proces_lista_index</code>, kliknij add, uzupełnij pola wymagane, zapisz, sprawdź komunikat i podswietlenie rekordu.</div>
                        <div class="kb-step"><strong>Scenariusz B - Zmiana statusu:</strong> na liscie kliknij status, zweryfikuj dane informacyjne w modalu, zatwierdz akcje i sprawdź powiadomienie.</div>
                        <div class="kb-step"><strong>Scenariusz C - Eksport raportu:</strong> ustaw filtry, wybierz kolumny, uruchom eksport PDF/DOC i porownaj, czy plik odzwierciedla aktualny widok.</div>
                        <div class="kb-step"><strong>Scenariusz D - Obsługa plików:</strong> w szczegolach procesu dodaj załącznik, sprawdź walidacje pola pliku, potwierdz widoczność pliku w sekcji "Załączniki".</div>
                        <div class="kb-step"><strong>Scenariusz E - Rejestr czynności:</strong> wybierz ADO i zatwierdz wybor, wygeneruj eksport i sprawdź podzial sekcji na strony.</div>
                        <div class="kb-shot-grid">
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz A</p>
                                <p>Sugerowany plik: <code>06-scenariusz-dodanie-procesu.png</code></p>
                            </div>
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz B</p>
                                <p>Sugerowany plik: <code>07-scenariusz-zmiana-statusu.png</code></p>
                            </div>
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz C</p>
                                <p>Sugerowany plik: <code>08-scenariusz-eksport.png</code></p>
                            </div>
                            <div class="kb-shot">
                                <p class="kb-shot-title">Miejsce na zrzut: scenariusz D</p>
                                <p>Sugerowany plik: <code>09-scenariusz-załączniki.png</code></p>
                            </div>
                        </div>
                    </article>

                    <article id="sec-screenshot-plan" class="kb-section">
                        <h4>26. Lista zrzutow ekranowych do uzupełnienia</h4>
                        <ul>
                            <li>Widok logowania i komunikaty walidacji.</li>
                            <li>Panel glowny ODO po zalogowaniu.</li>
                            <li>Procesy lista: filtry, akcje i statusy.</li>
                            <li>Szczegóły procesu i sekcja załączników.</li>
                            <li>Modal add/edit/delete/status/info zgodny ze standardem.</li>
                            <li>Rejestr czynności: wybor ADO i eksport.</li>
                            <li>Dokumenty: wzory i lista dokumentów.</li>
                            <li>Statystyki: wykresy i tabela porownawcza.</li>
                            <li>Zgłoszenia: formularze i lista "Moje zgłoszenia".</li>
                        </ul>
                        <div class="kb-note">Kazdy screenshot powinien zawierac krótki podpis: co użytkownik robi, jaki jest efekt i gdzie to widac na ekranie.</div>
                    </article>

                    <article id="sec-szkol-updates-blockady" class="kb-section">
                        <h4>27. Aktualizacje: blokady i statusy szkolenia</h4>
                        <p>W module m_szkol wdrożono rozszerzone reguły blokowania edycji i operacji na szkoleniu po zmianie statusu lub po rozpoczęciu testów.</p>
                        <ul>
                            <li>Dla statusu <strong>Zatwierdzony</strong> blokowane są akcje edycji i usuwania szkolenia (widoki list oraz szczegółów).</li>
                            <li>Po publikacji (zatwierdzeniu) zablokowane jest dodawanie i usuwanie uczestników.</li>
                            <li>Dla e-Learningu w trybie <strong>Szkolenie Wewnętrzne</strong> edycja wyników uczestników jest blokowana (tylko podgląd).</li>
                            <li>Jeżeli co najmniej jedna osoba wykonała test kontrolny, edycja wyników oraz modyfikacje uczestników pozostają zablokowane.</li>
                            <li>Na wybranych widokach ukrywane są ikony/akcje oznaczone jako niedostępne dla bieżącego statusu.</li>
                        </ul>
                        <div class="kb-note">Zasada biznesowa: po przejściu szkolenia do etapu realizacji/publikacji system preferuje integralność danych nad elastycznością edycji.</div>
                    </article>

                    <article id="sec-szkol-updates-presentation" class="kb-section">
                        <h4>28. Aktualizacje: prezentacja i testy użytkownika</h4>
                        <ul>
                            <li>Widok <code>/szkolenia/user/my-trainings</code> otrzymał rozszerzone statusy kafelków (aktywne, zaliczone, limit podejść).</li>
                            <li>Domyślne filtrowanie listy: <strong>Status = Aktywne</strong> oraz <strong>Wynik/Postęp = Do zrobienia</strong>; jeśli brak rekordów, stosowany jest fallback.</li>
                            <li>Kliknięcie w kafelek szkolenia otwiera szkolenie (nie tylko przycisk).</li>
                            <li>W prezentacji szkolenia zapamiętywany jest wylosowany zestaw pytań do momentu zapisu podejścia.</li>
                            <li>Przy nowym podejściu odpowiedzi są resetowane, aby nie przenosić poprzednich zaznaczeń.</li>
                            <li>Dla pytań typu „dopasowanie par” przypisany element znika z listy dostępnych wyborów.</li>
                            <li>Jeżeli wykorzystano limit podejść, przycisk startu testu jest zastępowany komunikatem i przyciskiem do listy podejść.</li>
                            <li>Widok wyniku testu zawiera podgląd treści pytania, Twojej odpowiedzi i odpowiedzi prawidłowej (z kolorowaniem poprawności).</li>
                        </ul>
                    </article>

                    <article id="sec-szkol-updates-raporty" class="kb-section">
                        <h4>29. Aktualizacje: raporty i eksporty</h4>
                        <ul>
                            <li>Dodano raport kompleksowy szkolenia (HTML/PDF/DOCX) dostępny z poziomu listy uczestników szkolenia.</li>
                            <li>Raport posiada konfigurację sekcji i pól (w tym konfigurację kolumn list uczestników).</li>
                            <li>Wspierane są wykresy analityczne w wariantach: pionowy słupkowy oraz donut.</li>
                            <li>Raporty generowane są w orientacji pionowej (portrait).</li>
                            <li>Dostępna jest prezentacja list obecnych i nieobecnych jako osobnych sekcji konfigurowanych w ustawieniach raportu.</li>
                            <li>Sekcja materiałów szkoleniowych została uproszczona do listy punktowanej z pomijaniem kategorii o wartości 0.</li>
                        </ul>
                    </article>

                    <article id="sec-szkol-updates-admin" class="kb-section">
                        <h4>30. Aktualizacje: panel administratora szkolenia</h4>
                        <ul>
                            <li>Widok <code>/szkolenia/admin/trainings/{id}</code> otrzymał uspójnioną nawigację zakładkową i klikalne kafelki sekcji.</li>
                            <li>W sekcji uczestników dodano kolumny <strong>Stanowisko</strong> i <strong>Komórka org.</strong> wraz z filtrami i sortowaniem.</li>
                            <li>Tabela uczestników wspiera przewijanie pionowe wierszy ze stałym nagłówkiem.</li>
                            <li>Dodawanie uczestników odbywa się modalnie (wielopoziomowo) i pozostawia użytkownika na tym samym widoku/zakładce.</li>
                            <li>Usuwanie uczestnika szkolenia posiada modal potwierdzający zgodny ze standardem aplikacji.</li>
                            <li>Kolumna „Zaliczono” pokazuje „-” przed podejściem do testu oraz „TAK/NIE” po zakończonych podejściach.</li>
                        </ul>
                    </article>

                    <article id="sec-szkol-updates-testy" class="kb-section">
                        <h4>31. Aktualizacje: konfiguracja testów i pytań</h4>
                        <ul>
                            <li>Widok edycji testu (<code>/szkolenia/admin/tests/{id}/edit</code>) został uporządkowany do układu analogicznego jak w szkoleniach.</li>
                            <li>Zakładka „Pytania statyczne” jest widoczna dla trybu doboru pytań: <strong>Statyczny</strong>.</li>
                            <li>Dodawanie pytań odbywa się przez wysuwane okno z listą pytań, wyszukiwarką i wyborem wielokrotnym (checkbox).</li>
                            <li>Dostępne są akcje „zaznacz widoczne / odznacz widoczne” dla pytań po filtracji.</li>
                            <li>Usuwanie pytania z testu korzysta z modala potwierdzenia (zamiast alert).</li>
                            <li>Na widoku tworzenia testu dla konkretnego szkolenia pole wyboru szkolenia jest zablokowane (kontekst szkolenia narzucony trasą).</li>
                            <li>Domyślna nazwa nowego testu: <strong>Test wiedzy</strong>.</li>
                        </ul>
                    </article>

                    <article id="sec-szkol-updates-dashboard" class="kb-section">
                        <h4>32. Aktualizacje: dashboard i nawigacja m_szkol</h4>
                        <ul>
                            <li>Dodano nowy dashboard modułu m_szkol w pastelowej stylistyce z klikalnymi kafelkami KPI.</li>
                            <li>Kafelki przekierowują do odpowiednich widoków z filtrem zgodnym z kontekstem kafelka.</li>
                            <li>Rozszerzono logikę breadcrumb/my_navbar: wejście bezpośrednio z menu resetuje ścieżkę do <code>home &gt; bieżący widok</code>.</li>
                            <li>Przyciski „Powrót” na kluczowych widokach testów/prezentacji wykorzystują kontekst nawigacji zamiast prostego <code>back()</code>.</li>
                            <li>Wprowadzono kontrolę sesji na poziomie interfejsu, aby odświeżyć widok po wygaśnięciu sesji i bezpiecznie zamknąć dostęp do danych.</li>
                        </ul>
                    </article>
                </section>
            </div>
        </div>
    </div>

@endsection

@section('menu')
    @include('sites.szkol.menu_szkol')
@endsection

@section('navbar')
    @include('sites.szkol._navbar_szkol')
@endsection

@push('scripts')
    <x-knowledge-base.toc-sync-script
        search-input-id="kbSearchInput"
        search-info-id="kbSearchInfo"
        toc-link-selector=".kb-toc-link"
        section-selector=".kb-section"
    />
@endpush