@extends('layouts.site')
@php
    $my_name_view = 'Szkolenie - Prezentacja';
    $my_short_view_name = 'Prezentacja';
@endphp
@section('title', 'Szkolenie - Prezentacja')

@section('content')
    {{-- Ekran prezentacji: materialy i test dzialaja w tym samym panelu po prawej stronie. --}}
    <div
        class="tab-content_2 p-3 szkol-prezentacja"
        id="training-presentation"
        data-csrf="{{ csrf_token() }}"
        data-mark-read-url="{{ route('szkolenia.presentation.material.mark-read', $training->id) }}"
        data-can-start-schedule="{{ !empty($canStartBySchedule) ? 1 : 0 }}"
        data-control-mode="{{ !empty($isControlMode) ? 1 : 0 }}"
        data-schedule-block-message="{{ !$hasStarted ? 'Szkolenie bedzie dostepne po dacie i godzinie rozpoczecia.' : ($hasEnded ? 'Czas na wykonanie testu juz minal. Mozesz tylko przegladac materialy i wyniki.' : '') }}"
        style="overflow-y: auto;"
    >

        <div class="card shadow-sm mb-3" style="margin: unset;">
            <div class="row no-gutters">
                <div class="col-md-3 col-lg-3 border-right">
                    <div class="p-3">
                        <div class="text-muted">
                            <div><i style="font-size: small;">Szkolenie: </i><span class="text-secondary font-weight-bold">{{ $training->temat ?: ('#'.$training->id) }}</span></div>
                            <div><i style="font-size: small;">Data rozpoczęcia szkolenia:</i> {{ $training->data ?: '-' }} {{ $training->godzina_start ?: '00:01' }}</div>
                            <div><i style="font-size: small;">Data zakończenia szkolenia:</i> {{ $training->data_do ?: $training->data ?: '-' }} {{ $training->godzina_stop ?: '23:59' }}</div>
                            <div>
                                <i style="font-size: small;">Status:</i>
                                @if(!empty($hasEnded))
                                    <span class="text-secondary font-weight-bold">Po czasie realizacji</span>
                                @elseif(!empty($hasStarted) && !empty($isPublished))
                                    <span class="text-success font-weight-bold">Aktywny</span>
                                @elseif(empty($hasStarted) && !empty($isPublished))
                                    <span class="text-primary font-weight-bold">Zaplanowany</span>
                                @else
                                    <span class="text-secondary font-weight-bold">Nieopublikowany</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="p-3">
                        <h4 class="" style="font-style: italic; font-size: small; margin-bottom: 3px;">Materiały Szkoleniowe:</h4>

                        @php
                            // Statystyka ukonczenia materialow do poczatkowego stanu UI (przycisk testu i opis).
                            // Liczymy po unikalnym progress_key (to ten sam model co backend blokady startu testu).
                            $requiredProgressKeys = [];
                            $completedProgressKeys = [];
                            foreach ($materials as $materialStat) {
                                $progressKey = trim((string)($materialStat['progress_key'] ?? ''));
                                if ($progressKey === '') {
                                    continue;
                                }
                                $requiredProgressKeys[$progressKey] = true;
                                if (!empty($materialStat['is_completed'])) {
                                    $completedProgressKeys[$progressKey] = true;
                                }
                            }
                            $materialsTotal = count($requiredProgressKeys);
                            $materialsDone = count($completedProgressKeys);
                            $materialsPercent = $materialsTotal > 0 ? (int) round(($materialsDone / $materialsTotal) * 100) : 0;
                            $canStartByMaterials = $materialsTotal === 0 || $materialsDone >= $materialsTotal;
                            $canStartTestNow = $canStartByMaterials && !empty($canStartBySchedule) && empty($hasAttemptLimitReached);
                        @endphp

                        <div class="list-group mb-3" id="materials-plan" style="height: 25vh;overflow-y: auto;border: 1px solid silver;border-radius: 5px;">
                            @forelse($materials as $idx => $item)
                                <button
                                    type="button"
                                    class="list-group-item list-group-item-action text-left js-material-open"
                                    data-index="{{ $idx }}"
                                    data-id="{{ $item['id'] }}"
                                    data-name="{{ $item['display_name'] }}"
                                    data-size="{{ (int)($item['size'] ?? 0) }}"
                                    data-ext="{{ $item['ext'] ?? '' }}"
                                    data-viewer-kind="{{ $item['viewer_kind'] ?? 'file' }}"
                                    data-material-type="{{ $item['material_type'] ?? 'file' }}"
                                    data-preview-url="{{ $item['preview_url'] ?? '' }}"
                                    data-download-url="{{ $item['download_url'] ?? '' }}"
                                    data-is-intro="{{ (int)($item['is_intro'] ?? 0) }}"
                                    data-progress-key="{{ $item['progress_key'] ?? '' }}"
                                    data-is-completed="{{ (int)($item['is_completed'] ?? 0) }}"
                                >
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="pr-2 material-main">
                                            <span class="text-success js-material-check material-check-slot {{ !empty($item['is_completed']) ? 'is-visible' : '' }}">
                                                <i class="fas fa-check"></i>
                                            </span>
                                            <span class="badge badge-secondary mr-2 material-order-badge">{{ $idx + 1 }}</span>
                                            <i class="{{ $item['icon_class'] ?? 'far fa-file text-muted' }} mr-2"></i>
                                            {{ $item['display_name'] }}
                                        </div>
                                        <small class="badge badge-light">
                                            @if(($item['material_type'] ?? 'file') === 'link')
                                                LINK
                                            @elseif(($item['material_type'] ?? 'file') === 'intro')
                                                START
                                            @elseif(($item['material_type'] ?? 'file') === 'text')
                                                TEKST
                                            @else
                                                {{ number_format(($item['size'] ?? 0) / 1024, 0, ',', ' ') }} KB
                                            @endif
                                        </small>
                                    </div>
                                </button>
                            @empty
                                <div id="materials-plan-empty" class="w-100 h-100 d-flex align-items-center justify-content-center text-muted">
                                    Nie dodano materiałów szkoleniowych
                                </div>
                            @endforelse
                        </div>

                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <strong>Postep materialow</strong>
                                <span id="materials-progress-label">{{ $materialsPercent }}%</span>
                            </div>
                            <div class="progress" style="height: 10px;">
                                <div class="progress-bar bg-info" id="materials-progress-bar" style="width: {{ $materialsPercent }}%;"></div>
                            </div>
                        </div>

                        <div class="border-top pt-3">
                            <h5 class="mb-2"><i class="fas fa-question-circle text-primary mr-1"></i> Test wiedzy</h5>
                            @if(!empty($isReadOnlyArchive))
                                <div class="small text-muted">
                                    Szkolenie po czasie realizacji: tryb tylko do odczytu. Test nie moze byc uruchomiony.
                                </div>
                                @if(!empty($latestAttemptResultUrl))
                                    <div class="mt-2">
                                        <a href="{{ $latestAttemptResultUrl }}" class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-chart-line mr-1"></i> Zobacz moj ostatni wynik
                                        </a>
                                    </div>
                                @endif
                            @elseif($training->test && (int)$training->test->status_aktywny === 1)
                                <div class="small text-muted mb-2">
                                    {{ $training->test->nazwa }}<br>
                                    Prog zaliczenia: {{ $training->test->prog_zaliczenia }}%
                                </div>

                                @if($isEnrolled || !empty($isControlMode))
                                    @if(!empty($isControlMode))
                                        <button type="button" id="js-enable-control-mode" class="btn btn-outline-warning btn-sm btn-block mb-2">
                                            <i class="fas fa-user-shield mr-1"></i> Wlacz tryb testowy
                                        </button>
                                        <button type="button" id="js-disable-control-mode" class="btn btn-outline-secondary btn-sm btn-block mb-2 d-none">
                                            <i class="fas fa-user-times mr-1"></i> Wylacz tryb testowy
                                        </button>
                                        <div class="small text-success mt-1 mb-2 d-none" id="js-control-mode-enabled">
                                            Tryb testowy aktywny.
                                        </div>
                                    @endif

                                    @if(!empty($hasAttemptLimitReached))
                                        <div class="text-danger font-weight-bold mb-2">
                                            Wykorzystano limit podejsc
                                        </div>
                                    @else
                                        <button
                                            type="button"
                                            id="js-start-test"
                                            class="btn btn-block {{ $canStartTestNow ? 'btn-primary' : 'btn-secondary' }}"
                                            data-start-url="{{ route('szkolenia.user.test.start', $training->test->id) }}"
                                            {{ $canStartTestNow ? '' : 'disabled' }}
                                        >
                                            <i class="fas fa-play mr-1"></i> Rozpocznij test
                                        </button>
                                        <div class="small text-muted mt-2 {{ $canStartTestNow ? 'd-none' : '' }}" id="materials-required-note">
                                            @if(!$canStartByMaterials)
                                                Najpierw zapoznaj sie ze wszystkimi materialami ({{ $materialsDone }}/{{ $materialsTotal }}).
                                            @elseif(empty($canStartBySchedule))
                                                {{ !$hasStarted ? 'Szkolenie bedzie dostepne po dacie i godzinie rozpoczecia.' : 'Czas na wykonanie testu juz minal.' }}
                                            @endif
                                        </div>
                                    @endif
                                    @if(!empty($hasAnyAttempts) && !empty($attemptsHistoryUrl))
                                        <div class="mt-2">
                                            <a href="{{ $attemptsHistoryUrl }}" class="btn btn-outline-primary btn-sm btn-block">
                                                <i class="fas fa-history mr-1"></i> Pokaz moje podejscia
                                            </a>
                                        </div>
                                    @endif
                                    @if(!empty($isControlMode))
                                        <div class="small text-muted mt-2">
                                            Tryb autora/admina: uruchomienie zapisze <strong>przejscie kontrolne</strong>.
                                        </div>
                                    @endif
                                @else
                                    <div class="small text-muted">Test uruchomi tylko zapisany uczestnik.</div>
                                @endif
                            @else
                                <div class="small text-muted">Brak aktywnego testu.</div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="col-md-9 col-lg-9">
                    <div class="p-3 border-bottom d-flex justify-content-between align-items-center flex-wrap">
                        <div>
                            <h5 class="mb-0" id="workspace-title">Wybierz element planu</h5>
                            <small class="text-muted" id="workspace-meta"></small>
                        </div>

                        <div class="mt-2 mt-md-0 d-flex align-items-center flex-wrap" style="gap: .5rem;">
                            <div id="toolbar-material-actions">
                                <a class="btn btn-primary btn-sm disabled" href="#" id="viewer-download-btn">
                                    <i class="fas fa-download mr-1"></i>Pobierz
                                </a>
                            </div>
                            <div>
                                <a class="btn btn-outline-secondary btn-sm" id="js-presentation-back-btn" href="{{ $backUrl ?? route('szkolenia.presentation.index') }}">Powrot</a>
                            </div>

                            <div id="toolbar-test-actions" class="d-none">
                                <span class="mr-3 text-muted" id="test-timer-wrap">
                                    <i class="far fa-clock mr-1"></i>
                                    <strong id="test-timer">--:--</strong>
                                </span>
                                <button type="button" id="test-toolbar-summary" class="btn btn-primary btn-sm">
                                    <i class="fas fa-check-square mr-1"></i>Zakoncz test
                                </button>
                            </div>
                        </div>
                    </div>

                    <div id="test-progress-wrap" class="border-bottom d-none">
                        <div class="p-3">
                            <div id="test-progress-steps" class="test-steps" style="justify-content: center;"></div>
                        </div>
                    </div>

                    <div class="p-3 szkol-workspace" style="min-height: 61vh;">
                        <div id="workspace-empty" class="h-100 workspace-empty-panel text-muted">
                            Wybierz material albo uruchom test z panelu po lewej stronie.
                        </div>

                        <div id="material-pane" class="d-none">
                            <div id="viewer-message" class="alert alert-info d-none mb-3"></div>

                            <div id="viewer-image-wrap" class="d-none border rounded p-2 bg-white">
                                <img
                                    id="viewer-image"
                                    src=""
                                    alt="Podglad grafiki"
                                    class="img-fluid d-block mx-auto js-user-test-zoomable"
                                    data-zoom-title="Podglad grafiki"
                                    style="max-height: 600px;"
                                >
                            </div>

                            <div id="viewer-video-wrap" class="d-none border rounded p-2 bg-white">
                                <video id="viewer-video" controls class="w-100" style="max-height: 600px;">
                                    <source src="" type="">
                                    Twoja przegladarka nie obsluguje odtwarzania wideo.
                                </video>
                            </div>

                            <iframe
                                id="viewer-iframe"
                                class="w-100 border d-none"
                                style="height: 600px; background: #f5f7fb;"
                                src="about:blank"
                                title="Podglad materialu PDF"
                            ></iframe>
                        </div>

                        <div id="test-pane" class="d-none">
                            <div class="alert alert-danger d-none" id="test-error-box"></div>

                            <div class="card d-none" id="test-question-card">
                                <div class="card-header">
                                    <strong id="test-question-counter">Pytanie 1 z 1</strong>
                                </div>
                                <div class="card-body">
                                    <div class="test-question-layout">
                                        <div class="test-question-visual" id="test-question-visual">
                                            <div class="test-question-visual-placeholder">
                                                <i class="far fa-image"></i>
                                                <span>Miejsce na grafike pytania</span>
                                            </div>
                                        </div>
                                        <div class="test-question-main">
                                            <h4 class="mb-3" id="test-question-title"></h4>
                                            <div class="border-top pt-3 mb-2" id="test-question-content"></div>
                                            <div id="test-answer-container"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer d-flex justify-content-between">
                                    <button type="button" id="test-prev-btn" class="btn btn-light">
                                        <i class="fas fa-chevron-left mr-1"></i>Poprzednie
                                    </button>
                                    <button type="button" id="test-next-btn" class="btn btn-primary">
                                        Nastepne <i class="fas fa-chevron-right ml-1"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="card d-none" id="test-summary-card">
                                <div class="card-header">
                                    <strong>Podsumowanie testu</strong>
                                </div>
                                <div class="card-body">
                                    <p class="mb-2" id="test-summary-info"></p>
                                    <div id="test-summary-list"></div>
                                </div>
                                <div class="card-footer d-flex justify-content-between flex-wrap">
                                    <button type="button" class="btn btn-light mb-2 mb-md-0" id="test-summary-back">
                                        <i class="fas fa-chevron-left mr-1"></i>Wroc do pytan
                                    </button>
                                    <button type="button" class="btn btn-success" id="test-finish-submit">
                                        <i class="fas fa-check mr-1"></i>Wyslij i zakoncz test
                                    </button>
                                </div>
                            </div>

                            <div class="card d-none" id="test-result-card">
                                <div class="card-header">
                                    <strong>Wynik testu</strong>
                                </div>
                                <div class="card-body" id="test-result-body"></div>
                                <div class="card-footer">
                                    <a href="#" class="btn btn-outline-primary" id="test-result-link">
                                        Przejdz do pelnego wyniku
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Modal powiekszenia grafiki (uzytkownik: materialy + test). --}}
        <div class="modal fade user-test-image-zoom-modal" id="userTestImageZoomModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered" role="document" style="max-width: 96vw;">
                <div class="modal-content">
                    <div class="modal-header d-flex align-items-center">
                        <h5 class="modal-title mb-0 mr-3" id="userTestImageZoomTitle">Podglad grafiki</h5>
                        <div class="btn-toolbar mr-2" role="toolbar">
                            <div class="btn-group btn-group-sm mr-2" role="group">
                                <button type="button" class="btn btn-outline-secondary js-user-zoom-out">-</button>
                                <button type="button" class="btn btn-outline-secondary js-user-zoom-in">+</button>
                            </div>
                            <div class="btn-group btn-group-sm mr-2" role="group">
                                <button type="button" class="btn btn-outline-secondary js-user-zoom-reset">100%</button>
                                <button type="button" class="btn btn-outline-secondary js-user-zoom-fit">Dopasuj</button>
                            </div>
                            <span class="small text-muted align-self-center d-none d-md-inline">Koleczko myszy: zoom</span>
                        </div>
                        <button type="button" class="close ml-auto" data-dismiss="modal" aria-label="Zamknij">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body p-2">
                        <div class="user-test-image-zoom-stage border rounded bg-light">
                            <img id="user-test-image-zoom-target" src="" alt="Powiekszona grafika">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if(!empty($isControlMode))
            <div class="modal fade" id="ControlModeEnableModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Potwierdzenie trybu testowego</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            Uruchomienie testu w tym trybie zapisze <strong>przejscie kontrolne</strong>.
                            Czy na pewno chcesz wlaczyc tryb testowy?
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Anuluj</button>
                            <button type="button" class="btn btn-warning" id="js-confirm-control-mode">Wlacz tryb testowy</button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

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

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

@push('styles')
    <style>
        .szkol-prezentacja .szkol-workspace {
            background: #f3f6fa;
        }
        .workspace-empty-panel {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #materials-plan .js-material-open.is-completed {
            border-left: 3px solid #2f8f4f;
        }
        #materials-plan .material-main {
            display: inline-flex;
            align-items: center;
            min-width: 0;
        }
        #materials-plan .material-check-slot {
            width: 18px;
            min-width: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            margin-right: 1.25rem;
        }
        #materials-plan .material-check-slot.is-visible {
            visibility: visible;
        }
        #materials-plan .material-order-badge {
            min-width: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .test-steps {
            display: flex;
            align-items: center;
            overflow-x: auto;
            padding-bottom: 4px;
        }
        .test-step {
            display: inline-flex;
            align-items: center;
            margin-right: 10px;
        }
        .test-step:last-child {
            margin-right: 0;
        }
        .test-step-circle {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 2px solid #b8c7da;
            background: #ffffff;
            color: #5b6b7d;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: default;
            transition: all .2s ease;
        }
        .test-step-circle.is-current {
            border-color: #2f8f4f;
            background: #2f8f4f;
            color: #fff;
        }
        .test-step-circle.is-answered {
            border-color: #2f8f4f;
            background: #2f8f4f;
            color: #fff;
            cursor: pointer;
        }
        .test-step-circle.is-available {
            border-color: #b8c7da;
            background: #fff;
            color: #5b6b7d;
        }
        .test-step-circle.is-locked {
            border-color: #d1dbe8;
            background: #eef2f7;
            color: #8090a5;
        }
        .test-step-line {
            width: 25px;
            height: 4px;
            background: #d9e3ef;
            margin: 0 8px;
            border-radius: 2px;
        }
        .test-step-line.is-done {
            background: #2f8f4f;
        }
        .test-answer-option {

            padding: 10px 12px;
            /*margin-bottom: 10px;*/
            background: #fff;
        }
        .test-question-layout {
            display: flex;
            align-items: stretch;
            gap: 16px;
        }
        .test-question-visual {
            flex: 0 0 30%;
            max-width: 30%;
            min-height: 260px;
            border: 1px dashed #c8d5e6;
            border-radius: 8px;
            background: #f8fbff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .test-question-visual img {
            width: 100%;
            height: auto;
            object-fit: contain;
            display: block;
        }
        .test-question-visual-placeholder {
            text-align: center;
            color: #7a8da3;
            font-weight: 600;
            font-size: 14px;
            padding: 16px;
        }
        .test-question-visual-placeholder i {
            font-size: 28px;
            display: block;
            margin-bottom: 8px;
        }
        .test-question-main {
            flex: 0 0 calc(70% - 16px);
            max-width: calc(70% - 16px);
        }
        #test-answer-container {
            padding-left: 10px;
            border: 1px solid #d8e2ef;
            border-radius: 8px;
        }
        .test-answer-option label {
            margin-bottom: 0;
            font-weight: 500;
            cursor: pointer;
        }
        .js-user-test-zoomable {
            cursor: zoom-in;
        }
        .test-answer-letter {
            display: inline-block;
            width: 30px;
            font-weight: 700;
            color: #35516d;
        }
        .test-answer-text {
            display: inline-block;
            /*width: calc(100% - 34px);*/
            vertical-align: top;
        }
        .matching-dnd-wrap {
            padding: 2px 0;
        }
        .matching-dropzone {
            width: 100%;
            min-height: 38px;
            border: 1px dashed #b9c9db;
            border-radius: 6px;
            background: #ffffff;
            color: #2f445b;
            padding: 7px 10px;
            display: flex;
            align-items: center;
            transition: all .15s ease;
        }
        .matching-dropzone.is-empty {
            color: #7b8fa5;
        }
        .matching-dropzone.is-filled {
            border-style: solid;
            border-color: #2f7bdc;
            background: #f5f9ff;
            font-weight: 600;
        }
        .matching-dropzone.is-over {
            border-color: #1f66be;
            box-shadow: 0 0 0 2px rgba(47, 123, 220, .2);
            background: #eaf3ff;
        }
        .matching-pool-note {
            font-size: .88rem;
            color: #6f8197;
            margin: 6px 0 8px;
        }
        .matching-pool {
            border: 1px solid #d8e2ef;
            border-radius: 8px;
            background: #fff;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .matching-tile {
            border: 1px solid #c3d3e6;
            border-radius: 999px;
            background: #f7fbff;
            color: #294666;
            font-size: .9rem;
            font-weight: 600;
            padding: 5px 12px;
            cursor: grab;
            user-select: none;
        }
        .matching-tile:active {
            cursor: grabbing;
        }
        .matching-tile.is-dragging {
            opacity: .45;
        }
        .js-match-clear {
            min-width: 34px;
            height: 34px;
            padding: 0;
        }
        @media (max-width: 991px) {
            .test-question-layout {
                display: block;
            }
            .test-question-visual {
                max-width: 100%;
                margin-bottom: 12px;
            }
            .test-question-main {
                max-width: 100%;
            }
            #test-answer-container {
                padding-left: 0;
            }
        }
        .summary-row {
            border: 1px solid #d8e2ef;
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 8px;
            background: #fff;
        }
        .summary-row .badge {
            min-width: 88px;
        }
        .user-test-image-zoom-stage {
            height: calc(100vh - 165px);
            min-height: 360px;
            overflow: auto;
            text-align: center;
            padding: 0;
        }
        .user-test-image-zoom-stage img {
            max-width: none;
            transform-origin: center center;
            transition: transform 0.1s linear;
            display: block;
            margin: 0 auto;
        }
        .user-test-image-zoom-modal {
            z-index: 200001 !important;
        }
        .user-test-image-zoom-backdrop {
            z-index: 200000 !important;
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function ($) {
            var root = $('#training-presentation');
            if (!root.length) return;

            var csrf = root.data('csrf');
            var markReadUrl = String(root.data('mark-read-url') || '');
            var canStartBySchedule = String(root.data('can-start-schedule') || '0') === '1';
            var isControlMode = String(root.data('control-mode') || '0') === '1';
            var scheduleBlockMessage = String(root.data('schedule-block-message') || '');
            var materialBtns = $('.js-material-open').toArray();
            var openedMaterials = {};
            var pendingMaterialReads = {};

            var $title = $('#workspace-title');
            var $meta = $('#workspace-meta');
            var $toolbarMaterial = $('#toolbar-material-actions');
            var $toolbarTest = $('#toolbar-test-actions');
            var $downloadBtn = $('#viewer-download-btn');
            var $empty = $('#workspace-empty');
            var $materialPane = $('#material-pane');
            var $testPane = $('#test-pane');
            var $iframe = $('#viewer-iframe');
            var $viewerMessage = $('#viewer-message');
            var $viewerImageWrap = $('#viewer-image-wrap');
            var $viewerImage = $('#viewer-image');
            var $viewerVideoWrap = $('#viewer-video-wrap');
            var $viewerVideo = $('#viewer-video');
            var $viewerVideoSource = $viewerVideo.find('source').first();
            var $matProgressLabel = $('#materials-progress-label');
            var $matProgressBar = $('#materials-progress-bar');

            var $startBtn = $('#js-start-test');
            var $enableControlModeBtn = $('#js-enable-control-mode');
            var $disableControlModeBtn = $('#js-disable-control-mode');
            var $controlModeEnabledInfo = $('#js-control-mode-enabled');
            var $controlModeModal = $('#ControlModeEnableModal');
            var $confirmControlModeBtn = $('#js-confirm-control-mode');
            var $materialsRequiredNote = $('#materials-required-note');
            var $testProgressWrap = $('#test-progress-wrap');
            var $testSteps = $('#test-progress-steps');
            var $timerWrap = $('#test-timer-wrap');
            var $timer = $('#test-timer');
            var $toolbarSummary = $('#test-toolbar-summary');
            var $error = $('#test-error-box');
            var $questionCard = $('#test-question-card');
            var $counter = $('#test-question-counter');
            var $qTitle = $('#test-question-title');
            var $qVisual = $('#test-question-visual');
            var $qContent = $('#test-question-content');
            var $answer = $('#test-answer-container');
            var $prev = $('#test-prev-btn');
            var $next = $('#test-next-btn');
            var $summaryCard = $('#test-summary-card');
            var $summaryInfo = $('#test-summary-info');
            var $summaryList = $('#test-summary-list');
            var $summaryBack = $('#test-summary-back');
            var $finish = $('#test-finish-submit');
            var $resultCard = $('#test-result-card');
            var $resultBody = $('#test-result-body');
            var $resultLink = $('#test-result-link');
            var $zoomModal = $('#userTestImageZoomModal');
            var $zoomTarget = $('#user-test-image-zoom-target');
            var $zoomTitle = $('#userTestImageZoomTitle');
            var $zoomStage = $zoomModal.find('.user-test-image-zoom-stage');
            var zoomScale = 1;
            var zoomNaturalWidth = 0;
            var zoomNaturalHeight = 0;

            var state = {
                started: false,
                finished: false,
                finishing: false,
                loading: false,
                routes: { questions: '', save: '', finish: '', result: '' },
                questions: [],
                answers: {},
                idx: 0,
                sec: 0,
                timerHandle: null,
                controlModeArmed: !isControlMode
            };

            function esc(v) {
                return String(v || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
            }
            function renderZoomScale() {
                if (!zoomNaturalWidth || !zoomNaturalHeight) {
                    return;
                }
                $zoomTarget.css({
                    width: Math.max(1, Math.round(zoomNaturalWidth * zoomScale)) + 'px',
                    height: Math.max(1, Math.round(zoomNaturalHeight * zoomScale)) + 'px',
                    transform: 'none'
                });
            }
            function fitZoomImage() {
                var imgEl = $zoomTarget.get(0);
                var stageEl = $zoomStage.get(0);
                if (!imgEl || !stageEl || !imgEl.naturalWidth || !imgEl.naturalHeight) return;
                var maxW = stageEl.clientWidth;
                var maxH = stageEl.clientHeight;
                if (maxW <= 0 || maxH <= 0) return;
                var byW = maxW / imgEl.naturalWidth;
                var byH = maxH / imgEl.naturalHeight;
                zoomScale = Math.max(0.1, Math.min(8, Math.min(byW, byH)));
                renderZoomScale();
            }
            function openZoomModal(src, title) {
                if (!$zoomModal.length || !src) return;
                $zoomTarget.css({
                    visibility: 'hidden',
                    width: '',
                    height: '',
                    transform: 'none'
                });
                $zoomTarget.attr('src', src);
                $zoomTitle.text(title || 'Podglad grafiki');
                $zoomModal.modal('show');
            }
            function kb(b) { return (Math.round(((b || 0) / 1024) * 10) / 10).toString().replace('.', ',') + ' KB'; }
            function getRequiredProgressKeys() {
                var map = {};
                materialBtns.forEach(function (btn) {
                    var key = getProgressKey(btn);
                    if (key !== '') {
                        map[key] = true;
                    }
                });
                return Object.keys(map);
            }
            function getMaterialProgressSummary() {
                var requiredKeys = getRequiredProgressKeys();
                var done = 0;
                requiredKeys.forEach(function (key) {
                    if (openedMaterials[key]) {
                        done++;
                    }
                });
                return {
                    done: done,
                    total: requiredKeys.length
                };
            }
            function hasPendingMaterialReads() {
                return Object.keys(pendingMaterialReads).length > 0;
            }
            function parseUrlSafe(url) {
                try {
                    return new URL(String(url || ''), window.location.origin);
                } catch (e) {
                    return null;
                }
            }
            function extFromUrl(url) {
                var parsed = parseUrlSafe(url);
                if (!parsed) {
                    return '';
                }
                var path = String(parsed.pathname || '');
                var idx = path.lastIndexOf('.');
                if (idx < 0) {
                    return '';
                }
                return path.substring(idx + 1).toLowerCase();
            }
            function guessVideoMime(ext) {
                var map = {
                    mp4: 'video/mp4',
                    webm: 'video/webm',
                    ogg: 'video/ogg',
                    mov: 'video/quicktime',
                    m4v: 'video/x-m4v',
                    avi: 'video/x-msvideo',
                    wmv: 'video/x-ms-wmv',
                    mkv: 'video/x-matroska',
                    mpg: 'video/mpeg',
                    mpeg: 'video/mpeg'
                };
                return map[String(ext || '').toLowerCase()] || '';
            }
            function resolveExternalViewer(url) {
                var parsed = parseUrlSafe(url);
                if (!parsed) {
                    return { kind: 'external', url: String(url || ''), ext: '' };
                }

                var host = String(parsed.hostname || '').toLowerCase();
                var path = String(parsed.pathname || '');
                var ext = extFromUrl(url);

                if (host.indexOf('youtube.com') !== -1 || host.indexOf('youtu.be') !== -1) {
                    var videoId = '';
                    if (host.indexOf('youtu.be') !== -1) {
                        videoId = path.replace(/^\/+/, '').split('/')[0] || '';
                    } else {
                        videoId = parsed.searchParams.get('v') || '';
                        if (!videoId && path.indexOf('/embed/') === 0) {
                            videoId = path.replace('/embed/', '').split('/')[0] || '';
                        }
                    }
                    if (videoId) {
                        return {
                            kind: 'iframe',
                            url: 'https://www.youtube.com/embed/' + encodeURIComponent(videoId) + '?rel=0',
                            ext: ''
                        };
                    }
                }

                if (host.indexOf('vimeo.com') !== -1) {
                    var vimeoMatch = path.match(/\/(\d+)(?:$|\/)/);
                    if (vimeoMatch && vimeoMatch[1]) {
                        return {
                            kind: 'iframe',
                            url: 'https://player.vimeo.com/video/' + encodeURIComponent(vimeoMatch[1]),
                            ext: ''
                        };
                    }
                }

                if (['mp4', 'webm', 'ogg', 'mov', 'm4v', 'avi', 'wmv', 'mkv', 'mpg', 'mpeg'].indexOf(ext) !== -1) {
                    return {
                        kind: 'video',
                        url: String(url || ''),
                        ext: ext
                    };
                }

                return {
                    kind: 'external',
                    url: String(url || ''),
                    ext: ext
                };
            }
            function showVideo(previewUrl, ext) {
                var mime = guessVideoMime(ext);
                $viewerVideo.attr('src', '');
                if ($viewerVideoSource.length) {
                    $viewerVideoSource.attr('src', previewUrl || '');
                    if (mime) {
                        $viewerVideoSource.attr('type', mime);
                    } else {
                        $viewerVideoSource.removeAttr('type');
                    }
                } else {
                    $viewerVideo.attr('src', previewUrl || '');
                }
                $viewerVideoWrap.removeClass('d-none');
                $viewerVideo.off('error').on('error', function () {
                    var extHint = ext ? (' (' + String(ext).toUpperCase() + ')') : '';
                    showMaterialMessage(
                        'Przegladarka nie moze odtworzyc tego pliku wideo' + extHint + '. ' +
                        'Najczestsza przyczyna to nieobslugiwany kodek. Uzyj przycisku <strong>Pobierz</strong>.',
                        'warning'
                    );
                });
                if ($viewerVideo.length && $viewerVideo[0] && typeof $viewerVideo[0].load === 'function') {
                    $viewerVideo[0].load();
                }
            }
            function mode(type) {
                $empty.addClass('d-none'); $materialPane.addClass('d-none'); $testPane.addClass('d-none');
                $testProgressWrap.addClass('d-none'); $toolbarMaterial.addClass('d-none'); $toolbarTest.addClass('d-none');
                if (type === 'material') { $materialPane.removeClass('d-none'); $toolbarMaterial.removeClass('d-none'); return; }
                if (type === 'test') { $testPane.removeClass('d-none'); $testProgressWrap.removeClass('d-none'); $toolbarTest.removeClass('d-none'); return; }
                $empty.removeClass('d-none');
            }
            function showError(msg) {
                var text = msg || 'Wystapil blad.';
                $error.text(text).removeClass('d-none');
                if (typeof my_ShowAppNotification === 'function') {
                    my_ShowAppNotification('error', text);
                }
            }
            function hideError() { $error.addClass('d-none').text(''); }
            function getProgressKey(btn) {
                return String(btn.getAttribute('data-progress-key') || '');
            }
            function refreshMaterialCheckState(btn) {
                var key = getProgressKey(btn);
                var completed = key !== '' ? !!openedMaterials[key] : false;
                var $btn = $(btn);
                var $check = $btn.find('.js-material-check').first();
                if (completed) {
                    $btn.addClass('is-completed');
                    $check.addClass('is-visible');
                } else {
                    $btn.removeClass('is-completed');
                    $check.removeClass('is-visible');
                }
            }
            function updateTestStartAvailability() {
                if (!$startBtn.length) {
                    return;
                }

                var summary = getMaterialProgressSummary();
                var total = summary.total;
                var done = summary.done;
                var ready = (total === 0 || done >= total) && !hasPendingMaterialReads() && canStartBySchedule;

                // Gdy test jest juz uruchomiony, nie blokujemy przycisku "Wroc do testu".
                if (state.started && !state.finished) {
                    $startBtn.prop('disabled', false);
                    $startBtn.removeClass('btn-secondary btn-primary').addClass('btn-outline-primary');
                    if ($materialsRequiredNote.length) {
                        $materialsRequiredNote.addClass('d-none');
                    }
                    return;
                }

                if (ready) {
                    $startBtn.prop('disabled', false);
                    $startBtn.removeClass('btn-secondary btn-outline-primary').addClass('btn-primary');
                } else {
                    $startBtn.prop('disabled', true);
                    $startBtn.removeClass('btn-primary btn-outline-primary').addClass('btn-secondary');
                }
                if ($materialsRequiredNote.length) {
                    if (ready) {
                        $materialsRequiredNote.addClass('d-none');
                    } else {
                        if (!canStartBySchedule) {
                            $materialsRequiredNote.removeClass('d-none').text(scheduleBlockMessage || 'Test nie jest teraz dostepny.');
                        } else if (hasPendingMaterialReads()) {
                            $materialsRequiredNote.removeClass('d-none').text('Trwa zapisywanie postepu materialow. Zaczekaj chwile...');
                        } else {
                            $materialsRequiredNote.removeClass('d-none').text('Najpierw zapoznaj sie ze wszystkimi materialami (' + done + '/' + total + ').');
                        }
                    }
                }
            }
            function setControlModeArmed(armed) {
                state.controlModeArmed = !!armed;
                if ($enableControlModeBtn.length) {
                    $enableControlModeBtn.toggleClass('d-none', state.controlModeArmed);
                }
                if ($disableControlModeBtn.length) {
                    $disableControlModeBtn.toggleClass('d-none', !state.controlModeArmed);
                }
                if ($controlModeEnabledInfo.length) {
                    $controlModeEnabledInfo.toggleClass('d-none', !state.controlModeArmed);
                }
                updateTestStartAvailability();
            }
            function updateMaterialProgress() {
                var summary = getMaterialProgressSummary();
                var total = summary.total;
                var done = summary.done;
                var pct = total ? Math.round((done / total) * 100) : 0;
                $matProgressLabel.text(pct + '%');
                $matProgressBar.css('width', pct + '%');
                updateTestStartAvailability();
            }
            function markMaterialAsRead(progressKey) {
                if (!markReadUrl || !progressKey) {
                    return;
                }
                pendingMaterialReads[progressKey] = true;
                updateTestStartAvailability();

                $.ajax({
                    method: 'POST',
                    url: markReadUrl,
                    data: {
                        _token: csrf,
                        progress_key: progressKey
                    }
                }).done(function (res) {
                    delete pendingMaterialReads[progressKey];
                    if (!res || res.ok !== true) {
                        delete openedMaterials[progressKey];
                        materialBtns.forEach(function (btn) {
                            refreshMaterialCheckState(btn);
                        });
                    }
                    updateMaterialProgress();
                }).fail(function () {
                    delete pendingMaterialReads[progressKey];
                    delete openedMaterials[progressKey];
                    materialBtns.forEach(function (btn) {
                        refreshMaterialCheckState(btn);
                    });
                    updateMaterialProgress();
                });
            }

            function resetMaterialViewer() {
                $viewerMessage.addClass('d-none').text('').removeClass('alert-warning alert-secondary');
                $viewerImageWrap.addClass('d-none');
                $viewerImage.attr('src', '');

                $viewerVideoWrap.addClass('d-none');
                $viewerVideo.trigger('pause');
                $viewerVideo.attr('src', '');
                if ($viewerVideoSource.length) {
                    $viewerVideoSource.attr('src', '').removeAttr('type');
                }
                $viewerVideo.off('error');

                $iframe.addClass('d-none').attr('src', 'about:blank');
            }

            function showMaterialMessage(text, level) {
                var css = level === 'warning' ? 'alert-warning' : (level === 'secondary' ? 'alert-secondary' : 'alert-info');
                $viewerMessage.removeClass('d-none alert-warning alert-secondary alert-info').addClass(css).html(text);
            }

            function openMaterial(btn) {
                materialBtns.forEach(function (x) { x.classList.remove('active'); });
                btn.classList.add('active');
                var idx = parseInt(btn.getAttribute('data-index') || '0', 10);
                var name = btn.getAttribute('data-name') || '-';
                var size = parseInt(btn.getAttribute('data-size') || '0', 10);
                var ext = String(btn.getAttribute('data-ext') || '').toLowerCase();
                var viewerKind = String(btn.getAttribute('data-viewer-kind') || 'file');
                var materialType = String(btn.getAttribute('data-material-type') || 'file');
                var previewUrl = btn.getAttribute('data-preview-url') || '';
                var downloadUrl = btn.getAttribute('data-download-url') || '#';
                var progressKey = getProgressKey(btn);
                var wasOpened = !!openedMaterials[progressKey];
                if (progressKey !== '') {
                    openedMaterials[progressKey] = true;
                }
                refreshMaterialCheckState(btn);
                if (!wasOpened && progressKey !== '') {
                    markMaterialAsRead(progressKey);
                }
                updateMaterialProgress();
                $title.text(name);
                if (materialType === 'link') {
                    $meta.text('Link zewnetrzny');
                } else if (materialType === 'intro') {
                    $meta.text('Strona wprowadzajaca');
                } else if (materialType === 'text') {
                    $meta.text('Material tekstowy');
                } else {
                    $meta.text(kb(size));
                }

                if (downloadUrl) {
                    $downloadBtn.removeClass('disabled').attr('href', downloadUrl);
                    if (materialType === 'link') {
                        $downloadBtn.attr('target', '_blank').attr('rel', 'noopener');
                    } else {
                        $downloadBtn.removeAttr('target').removeAttr('rel');
                    }
                    $downloadBtn.html(materialType === 'link'
                        ? '<i class="fas fa-external-link-alt mr-1"></i>Otworz'
                        : '<i class="fas fa-download mr-1"></i>Pobierz');
                } else {
                    $downloadBtn.addClass('disabled').attr('href', '#')
                        .removeAttr('target').removeAttr('rel')
                        .html('<i class="fas fa-download mr-1"></i>Pobierz');
                }

                mode('material');
                resetMaterialViewer();

                if (viewerKind === 'pdf') {
                    $iframe.attr('src', previewUrl + '#toolbar=1&navpanes=0&scrollbar=1').removeClass('d-none');
                    return;
                }

                if (viewerKind === 'image') {
                    $viewerImage.attr('src', previewUrl);
                    $viewerImage.attr('data-zoom-title', name || 'Podglad grafiki');
                    $viewerImageWrap.removeClass('d-none');
                    return;
                }

                if (viewerKind === 'video') {
                    showVideo(previewUrl, ext);
                    return;
                }

                if (viewerKind === 'iframe') {
                    $iframe.attr('src', previewUrl).removeClass('d-none');
                    return;
                }

                if (viewerKind === 'text') {
                    $iframe.attr('src', previewUrl).removeClass('d-none');
                    return;
                }

                if (viewerKind === 'office') {
                    $iframe.attr('src', previewUrl).removeClass('d-none');
                    showMaterialMessage('Podglad dokumentu Office zalezy od mozliwosci przegladarki. Jesli dokument sie nie wyswietli, uzyj przycisku <strong>Pobierz</strong>.', 'warning');
                    return;
                }

                if (viewerKind === 'external') {
                    var external = resolveExternalViewer(previewUrl);
                    if (external.kind === 'video') {
                        showVideo(external.url, external.ext || ext);
                        return;
                    }
                    if (external.kind === 'iframe') {
                        $iframe.attr('src', external.url).removeClass('d-none');
                        showMaterialMessage('Odtwarzanie linku wideo w oknie aplikacji.', 'info');
                        return;
                    }
                    $iframe.attr('src', previewUrl).removeClass('d-none');
                    showMaterialMessage('To link zewnetrzny. Jezeli strona blokuje osadzanie, kliknij <strong>Otworz</strong>.', 'info');
                    return;
                }

                showMaterialMessage('Dla tego typu pliku podglad wewnetrzny nie jest dostepny. Uzyj przycisku <strong>Pobierz</strong>.', 'secondary');
            }

            function q(i) { return state.questions[i] || null; }
            function ans(question) { return state.answers[String(question.test_question_id)]; }
            function setAns(question, val) { state.answers[String(question.test_question_id)] = val; }
            function isAnswered(question, val) {
                if (!question) return false;
                if (question.typ_pytania === 'multiple_choice') return Array.isArray(val) && val.length > 0;
                if (question.typ_pytania === 'matching') {
                    if (!val || typeof val !== 'object') return false;
                    var rows = question.matches || [];
                    if (!rows.length) return false;
                    for (var i = 0; i < rows.length; i++) {
                        if (!String(val[String(i)] || val[i] || '').trim()) return false;
                    }
                    return true;
                }
                return String(val || '').trim() !== '';
            }
            function highestDone() {
                var m = -1;
                for (var i = 0; i < state.questions.length; i++) {
                    if (!isAnswered(q(i), ans(q(i)))) break;
                    m = i;
                }
                return m;
            }
            function renderSteps() {
                var total = state.questions.length, done = highestDone(), free = Math.min(done + 1, total - 1), html = '';
                for (var i = 0; i < total; i++) {
                    var answered = isAnswered(q(i), ans(q(i)));
                    var current = i === state.idx;
                    var locked = i > free;
                    var cls = 'test-step-circle ' + (current ? 'is-current' : (answered ? 'is-answered' : (locked ? 'is-locked' : 'is-available')));
                    var label = locked ? '<i class="fas fa-lock"></i>' : String(i + 1);
                    var clickable = answered || current;
                    html += '<div class="test-step"><button type="button" class="' + cls + '" data-index="' + i + '"' + (clickable ? '' : ' disabled') + '>' + label + '</button>';
                    if (i < total - 1) html += '<span class="test-step-line ' + (i < done ? 'is-done' : '') + '"></span>';
                    html += '</div>';
                }
                $testSteps.html(html);
            }

            function answerHtml(question, value) {
                value = value || (question.typ_pytania === 'multiple_choice' ? [] : (question.typ_pytania === 'matching' ? {} : ''));
                var html = '';
                function optionLetter(index) {
                    var n = index;
                    var out = '';
                    do {
                        out = String.fromCharCode(65 + (n % 26)) + out;
                        n = Math.floor(n / 26) - 1;
                    } while (n >= 0);
                    return out;
                }
                if (question.typ_pytania === 'single_choice' || question.typ_pytania === 'true_false') {
                    (question.answers || []).forEach(function (a, i) {
                        var v = String(a.id || a.answer_key || '');
                        var checked = String(value || '') === v ? ' checked' : '';
                        var id = 'a_' + question.test_question_id + '_' + i;
                        var letter = optionLetter(i);
                        html += '<div class="test-answer-option"><div class="custom-control custom-radio">';
                        html += '<input type="radio" class="custom-control-input js-input" data-kind="single" name="q_' + question.test_question_id + '" id="' + id + '" value="' + esc(v) + '"' + checked + '>';
                        html += '<label class="custom-control-label" for="' + id + '"><span class="test-answer-letter">' + letter + ')</span><span class="test-answer-text">' + esc(a.tresc_odpowiedzi || a.answer_key || '-') + '</span></label></div></div>';
                    });
                    return html;
                }
                if (question.typ_pytania === 'multiple_choice') {
                    var selected = Array.isArray(value) ? value.map(String) : [];
                    (question.answers || []).forEach(function (a, i) {
                        var v = String(a.id || a.answer_key || '');
                        var checked = selected.indexOf(v) !== -1 ? ' checked' : '';
                        var id = 'm_' + question.test_question_id + '_' + i;
                        var letter = optionLetter(i);
                        html += '<div class="test-answer-option"><div class="custom-control custom-checkbox">';
                        html += '<input type="checkbox" class="custom-control-input js-input" data-kind="multi" id="' + id + '" value="' + esc(v) + '"' + checked + '>';
                        html += '<label class="custom-control-label" for="' + id + '"><span class="test-answer-letter">' + letter + ')</span><span class="test-answer-text">' + esc(a.tresc_odpowiedzi || a.answer_key || '-') + '</span></label></div></div>';
                    });
                    return html;
                }
                if (question.typ_pytania === 'short_answer') {
                    return '<div class="form-group mb-0"><label><strong>Twoja odpowiedz:</strong></label><input type="text" class="form-control js-input" data-kind="short" value="' + esc(value || '') + '"></div>';
                }
                if (question.typ_pytania === 'matching') {
                    var map = (value && typeof value === 'object') ? value : {};
                    var matchingOptions = [];
                    (question.matching_options || []).forEach(function (opt) {
                        var ov = String(opt || '').trim();
                        if (!ov) return;
                        matchingOptions.push(ov);
                    });
                    var usedValues = {};
                    Object.keys(map).forEach(function (key) {
                        var used = String(map[key] || '').trim();
                        if (used) {
                            usedValues[used] = true;
                        }
                    });
                    var encodedOptions = encodeURIComponent(JSON.stringify(matchingOptions));
                    html += '<div class="matching-dnd-wrap">';
                    (question.matches || []).forEach(function (row, i) {
                        var cur = String(map[String(i)] || map[i] || '').trim();
                        var zoneClass = cur ? 'matching-dropzone is-filled js-match-dropzone' : 'matching-dropzone is-empty js-match-dropzone';
                        var zoneContent = cur ? esc(cur) : '<span class="text-muted">Upusc kafelek tutaj</span>';
                        html += '<div class="form-row mb-2 js-match-row" data-index="' + i + '">';
                        html += '<div class="col-md-6"><input readonly class="form-control" value="' + esc(row.podpytanie || '-') + '"></div>';
                        html += '<div class="col-md-6"><div class="d-flex align-items-center">';
                        html += '<div class="' + zoneClass + '" data-index="' + i + '">' + zoneContent + '</div>';
                        html += '<button type="button" class="btn btn-sm btn-outline-secondary ml-2 js-match-clear" title="Wyczysc"><i class="fas fa-times"></i></button>';
                        html += '<input type="hidden" class="js-match-input" value="' + esc(cur) + '">';
                        html += '</div></div></div>';
                    });
                    html += '<div class="matching-pool-note">Przeciagnij kafelki na odpowiednie wiersze.</div>';
                    html += '<div class="matching-pool js-match-pool" data-options-encoded="' + esc(encodedOptions) + '">';
                    matchingOptions.forEach(function (ov) {
                        if (usedValues[ov]) return;
                        html += '<button type="button" class="matching-tile js-match-tile" draggable="true" data-value="' + esc(ov) + '">' + esc(ov) + '</button>';
                    });
                    html += '</div></div>';
                    return html;
                }
                return '<div class="alert alert-warning mb-0">Nieobslugiwany typ pytania: ' + esc(question.typ_pytania) + '</div>';
            }
            function collect(question) {
                if (!question) return null;
                if (question.typ_pytania === 'single_choice' || question.typ_pytania === 'true_false') return String($answer.find('input[type="radio"]:checked').val() || '');
                if (question.typ_pytania === 'multiple_choice') {
                    var out = []; $answer.find('input[type="checkbox"]:checked').each(function () { out.push(String($(this).val())); }); return out;
                }
                if (question.typ_pytania === 'short_answer') return String($answer.find('input[type="text"]').val() || '').trim();
                if (question.typ_pytania === 'matching') {
                    var map = {};
                    $answer.find('.js-match-row').each(function () {
                        map[String($(this).data('index'))] = String($(this).find('.js-match-input').val() || '').trim();
                    });
                    return map;
                }
                return null;
            }

            function setMatchingRowValue($row, nextValue) {
                var value = String(nextValue || '').trim();
                var $zone = $row.find('.js-match-dropzone');
                var $input = $row.find('.js-match-input');
                $input.val(value);
                if (value) {
                    $zone.removeClass('is-empty').addClass('is-filled').text(value);
                } else {
                    $zone.removeClass('is-filled').addClass('is-empty').html('<span class="text-muted">Upusc kafelek tutaj</span>');
                }
            }

            function refreshMatchingPoolCurrentQuestion() {
                var question = q(state.idx);
                if (!question || question.typ_pytania !== 'matching') return;

                var $pool = $answer.find('.js-match-pool').first();
                if (!$pool.length) return;

                var options = [];
                var encoded = String($pool.attr('data-options-encoded') || '').trim();
                if (encoded) {
                    try {
                        var decoded = JSON.parse(decodeURIComponent(encoded));
                        if (Array.isArray(decoded)) {
                            options = decoded.map(function (opt) {
                                return String(opt || '').trim();
                            }).filter(function (opt) {
                                return opt !== '';
                            });
                        }
                    } catch (_e) {}
                }
                if (!options.length) {
                    options = (question.matching_options || []).map(function (opt) {
                        return String(opt || '').trim();
                    }).filter(function (opt) {
                        return opt !== '';
                    });
                }

                var usedValues = {};
                $answer.find('.js-match-row').each(function () {
                    var val = String($(this).find('.js-match-input').val() || '').trim();
                    if (val) {
                        usedValues[val] = true;
                    }
                });

                var html = '';
                options.forEach(function (opt) {
                    if (usedValues[opt]) return;
                    html += '<button type="button" class="matching-tile js-match-tile" draggable="true" data-value="' + esc(opt) + '">' + esc(opt) + '</button>';
                });
                $pool.html(html || '<span class="text-muted small">Brak dostepnych kafelkow.</span>');
            }

            function applyMatchingValue(targetIndex, selectedValue) {
                var question = q(state.idx);
                if (!question || question.typ_pytania !== 'matching') return;
                var value = String(selectedValue || '').trim();
                if (!value) return;

                var $rows = $answer.find('.js-match-row');
                $rows.each(function () {
                    var $row = $(this);
                    var idx = parseInt($row.data('index'), 10);
                    if (idx === targetIndex) return;
                    var cur = String($row.find('.js-match-input').val() || '').trim();
                    if (cur === value) {
                        setMatchingRowValue($row, '');
                    }
                });

                var $target = $rows.filter('[data-index="' + targetIndex + '"]').first();
                if (!$target.length) return;
                setMatchingRowValue($target, value);
                refreshMatchingPoolCurrentQuestion();
            }
            function save(question, value) {
                if (!question || !state.routes.save) return $.Deferred().resolve().promise();
                setAns(question, value); renderSteps();
                return $.ajax({
                    method: 'POST',
                    url: state.routes.save,
                    data: { _token: csrf, question_id: String(question.test_question_id), answer: value }
                });
            }
            function renderQuestion() {
                hideError(); $summaryCard.addClass('d-none'); $resultCard.addClass('d-none'); $questionCard.removeClass('d-none');
                var question = q(state.idx);
                if (!question) { $questionCard.addClass('d-none'); showError('Brak pytan w tescie.'); return; }
                var rawContent = question.tresc_pytania || '';
                var wrapper = $('<div>').html(rawContent);
                var $img = wrapper.find('img').first();
                var imgHtml = '';
                if ($img.length) {
                    $img.addClass('js-user-test-zoomable');
                    $img.attr('data-zoom-title', 'Grafika pytania');
                    imgHtml = $img.prop('outerHTML');
                    $img.remove();
                }
                var externalImageUrl = String(question.image_url || '').trim();

                $counter.text('Pytanie ' + (state.idx + 1) + ' z ' + state.questions.length);
                $qTitle.text(question.nazwa || ('Pytanie ' + (state.idx + 1)));
                $qContent.html(wrapper.html() || rawContent || '');
                if (externalImageUrl) {
                    $qVisual.html('<div class="w-100 p-2 text-center"><img class="js-user-test-zoomable" data-zoom-title="Grafika pytania" src="' + esc(externalImageUrl) + '" alt="Grafika pytania" style="max-width:100%; max-height:280px; object-fit:contain;"></div>');
                } else if (imgHtml) {
                    $qVisual.html('<div class="w-100 p-2">' + imgHtml + '</div>');
                } else {
                    $qVisual.html('<div class="test-question-visual-placeholder"><i class="far fa-image"></i><span>Miejsce na grafike pytania</span></div>');
                }
                $answer.html(answerHtml(question, ans(question)));
                if (question.typ_pytania === 'matching') {
                    refreshMatchingPoolCurrentQuestion();
                }
                $prev.prop('disabled', state.idx === 0);
                $next.html(state.idx >= state.questions.length - 1 ? 'Podsumowanie <i class="fas fa-list ml-1"></i>' : 'Nastepne <i class="fas fa-chevron-right ml-1"></i>');
                renderSteps();
            }
            function answeredCount() {
                var c = 0;
                state.questions.forEach(function (x) { if (isAnswered(x, ans(x))) c++; });
                return c;
            }
            function showSummary() {
                hideError(); $questionCard.addClass('d-none'); $resultCard.addClass('d-none'); $summaryCard.removeClass('d-none');
                var total = state.questions.length, done = answeredCount(), html = '';
                $summaryInfo.html('Udzielono odpowiedzi na <strong>' + done + '</strong> z <strong>' + total + '</strong> pytan.');
                state.questions.forEach(function (x, i) {
                    var doneItem = isAnswered(x, ans(x));
                    html += '<div class="summary-row d-flex justify-content-between align-items-center flex-wrap"><div class="pr-2"><strong>' + (i + 1) + '.</strong> ' + esc(x.nazwa || ('Pytanie ' + (i + 1))) + '</div>';
                    if (doneItem) html += '<div class="mt-2 mt-md-0"><span class="badge badge-success mr-2">Udzielono</span><button type="button" class="btn btn-sm btn-outline-primary js-open" data-index="' + i + '">Podglad</button></div>';
                    else html += '<span class="badge badge-warning mt-2 mt-md-0">Brak odpowiedzi</span>';
                    html += '</div>';
                });
                $summaryList.html(html);
                $finish.prop('disabled', done !== total || state.finishing || state.finished);
            }
            function showResult(payload) {
                $questionCard.addClass('d-none'); $summaryCard.addClass('d-none'); $resultCard.removeClass('d-none');
                var passed = parseInt(payload.zaliczono || 0, 10) === 1;
                var html = '<p><strong>Wynik procentowy:</strong> ' + esc(payload.wynik_procent) + '%</p>';
                html += '<p><strong>Punkty:</strong> ' + esc(payload.punkty_uzyskane) + ' / ' + esc(payload.punkty_max) + '</p>';
                html += '<p><strong>Status:</strong> ' + (passed ? '<span class="text-success font-weight-bold">Zaliczono</span>' : '<span class="text-danger font-weight-bold">Nie zaliczono</span>') + '</p>';
                $resultBody.html(html);
                $resultLink.attr('href', payload.result_url || '#');
                state.finished = true; state.finishing = false; stopTimer(); $toolbarSummary.prop('disabled', true);
                if ($startBtn.length) {
                    $startBtn.removeClass('btn-outline-primary').addClass('btn-primary')
                        .html('<i class="fas fa-redo mr-1"></i> Rozpocznij ponownie');
                }
            }
            function stopTimer() {
                if (state.timerHandle) { clearInterval(state.timerHandle); state.timerHandle = null; }
            }
            function timerText(sec) {
                sec = Math.max(0, sec);
                var m = Math.floor(sec / 60), s = sec % 60;
                return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
            }
            function startTimer() {
                stopTimer();
                if (state.sec <= 0) { $timerWrap.addClass('d-none'); return; }
                $timerWrap.removeClass('d-none'); $timer.text(timerText(state.sec));
                state.timerHandle = setInterval(function () {
                    state.sec--; $timer.text(timerText(state.sec));
                    if (state.sec <= 0) { stopTimer(); finishAttempt(true); }
                }, 1000);
            }
            function finishAttempt(fromTimer) {
                if (state.finishing || state.finished || !state.routes.finish) return;
                state.finishing = true; $finish.prop('disabled', true); $toolbarSummary.prop('disabled', true);
                save(q(state.idx), collect(q(state.idx)));
                $.ajax({ method: 'POST', url: state.routes.finish, data: { _token: csrf } })
                    .done(function (res) {
                        if (!res || res.ok !== true) {
                            state.finishing = false; $toolbarSummary.prop('disabled', false); showError((res && res.message) ? res.message : 'Nie udalo sie zakonczyc testu.'); showSummary(); return;
                        }
                        if (fromTimer) showError('Czas testu dobiegl konca. Test zostal zakonczony automatycznie.');
                        else hideError();
                        showResult(res);
                    })
                    .fail(function (xhr) {
                        state.finishing = false; $toolbarSummary.prop('disabled', false);
                        showError((xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Nie udalo sie zakonczyc testu.');
                        showSummary();
                    });
            }
            function loadQuestions() {
                hideError();
                $.ajax({
                    method: 'GET',
                    url: state.routes.questions,
                    cache: false
                }).done(function (payload) {
                    state.questions = (payload && payload.questions) ? payload.questions : [];
                    state.answers = {};
                    state.questions.forEach(function (x) { state.answers[String(x.test_question_id)] = x.user_answer; });
                    var firstPending = 0;
                    for (var i = 0; i < state.questions.length; i++) {
                        if (!isAnswered(state.questions[i], ans(state.questions[i]))) { firstPending = i; break; }
                        firstPending = i;
                    }
                    state.idx = firstPending;
                    renderQuestion();
                    startTimer();
                }).fail(function () {
                    showError('Nie udalo sie pobrac pytan testowych.');
                });
            }
            function startTest() {
                if (!$startBtn.length || state.loading) return;
                if (!canStartBySchedule) {
                    showError(scheduleBlockMessage || 'Test nie jest teraz dostepny.');
                    return;
                }
                if (hasPendingMaterialReads()) {
                    showError('Trwa zapisywanie postepu materialow. Zaczekaj chwile i sprobuj ponownie.');
                    return;
                }
                if (state.started && !state.finished) {
                    mode('test');
                    return;
                }
                var url = $startBtn.data('start-url');
                if (!url) return;
                state.loading = true;
                $startBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i>Ladowanie...');
                $.ajax({
                    method: 'POST',
                    url: url,
                    data: {
                        _token: csrf,
                        // Przekazujemy backendowi aktualny stan ukonczonych materialow.
                        // Backend i tak przyjmie tylko klucze z listy wymaganej.
                        completed_material_keys: Object.keys(openedMaterials),
                        control_mode: (isControlMode && state.controlModeArmed) ? 1 : 0,
                        control_mode_confirmed: (isControlMode && state.controlModeArmed) ? 1 : 0
                    }
                })
                    .done(function (res) {
                        if (!res || res.ok !== true) { showError((res && res.message) ? res.message : 'Nie udalo sie uruchomic testu.'); return; }
                        state.started = true; state.finished = false; state.finishing = false;
                        state.routes.questions = res.routes ? res.routes.questions : '';
                        state.routes.save = res.routes ? res.routes.save_answer : '';
                        state.routes.finish = res.routes ? res.routes.finish : '';
                        state.routes.result = res.routes ? res.routes.result : '';
                        var min = parseInt(res.limit_czasu_min || 0, 10) || 0;
                        state.sec = min > 0 ? min * 60 : 0;
                        $title.text('Test: ' + (res.test_name || 'Test'));
                        $meta.text('Tryb prezentacji testu');
                        $startBtn.removeClass('btn-primary').addClass('btn-outline-primary')
                            .html('<i class="fas fa-list-ol mr-1"></i> Wroc do testu');
                        mode('test');
                        loadQuestions();
                    })
                    .fail(function (xhr) {
                        showError((xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Nie udalo sie uruchomic testu.');
                    })
                    .always(function () {
                        state.loading = false;
                        $startBtn.prop('disabled', false);
                        if (state.started && !state.finished) {
                            $startBtn.removeClass('btn-primary').addClass('btn-outline-primary')
                                .html('<i class="fas fa-list-ol mr-1"></i> Wroc do testu');
                        } else if (state.finished) {
                            $startBtn.removeClass('btn-outline-primary').addClass('btn-primary')
                                .html('<i class="fas fa-redo mr-1"></i> Rozpocznij ponownie');
                        } else {
                            $startBtn.removeClass('btn-outline-primary').addClass('btn-primary')
                                .html('<i class="fas fa-play mr-1"></i> Rozpocznij test');
                        }
                        updateTestStartAvailability();
                    });
            }

            if ($zoomModal.length) {
                // Modal poza kontenerem roboczym: brak konfliktow z overflow i stacking context.
                if ($zoomModal.parent()[0] !== document.body) {
                    $zoomModal.appendTo('body');
                }

                $(document).on('click', '.js-user-test-zoomable', function () {
                    var src = String($(this).attr('src') || '').trim();
                    if (!src) return;
                    openZoomModal(src, String($(this).attr('data-zoom-title') || 'Podglad grafiki'));
                });

                $zoomTarget.on('load', function () {
                    var imgEl = $zoomTarget.get(0);
                    zoomNaturalWidth = imgEl ? (imgEl.naturalWidth || 0) : 0;
                    zoomNaturalHeight = imgEl ? (imgEl.naturalHeight || 0) : 0;
                    fitZoomImage();
                    $zoomTarget.css('visibility', 'visible');
                });

                $zoomModal.find('.js-user-zoom-in').on('click', function () {
                    zoomScale = Math.min(8, zoomScale + 0.2);
                    renderZoomScale();
                });
                $zoomModal.find('.js-user-zoom-out').on('click', function () {
                    zoomScale = Math.max(0.1, zoomScale - 0.2);
                    renderZoomScale();
                });
                $zoomModal.find('.js-user-zoom-reset').on('click', function () {
                    zoomScale = 1;
                    renderZoomScale();
                });
                $zoomModal.find('.js-user-zoom-fit').on('click', function () {
                    fitZoomImage();
                });

                $zoomStage.on('wheel', function (event) {
                    event.preventDefault();
                    var delta = event.originalEvent.deltaY || 0;
                    zoomScale = delta < 0 ? Math.min(8, zoomScale + 0.1) : Math.max(0.1, zoomScale - 0.1);
                    renderZoomScale();
                });

                $zoomModal.on('show.bs.modal', function () {
                    $zoomModal.css('z-index', '200001');
                    setTimeout(function () {
                        $('.modal-backdrop').last().addClass('user-test-image-zoom-backdrop');
                    }, 0);
                });
                $zoomModal.on('shown.bs.modal', function () {
                    fitZoomImage();
                });

                $zoomModal.on('hidden.bs.modal', function () {
                    $zoomTarget.attr('src', '');
                    zoomScale = 1;
                    zoomNaturalWidth = 0;
                    zoomNaturalHeight = 0;
                    $zoomTarget.css({
                        visibility: 'visible',
                        width: '',
                        height: '',
                        transform: 'none'
                    });
                });
            }

            function syncBackButtonWithNavbar() {
                var $backBtn = $('#js-presentation-back-btn');
                if (!$backBtn.length) {
                    return;
                }

                // Na breadcrumb ostatni element to biezacy widok (span),
                // wiec ostatni link wskazuje poprzednia opcje NAV.
                var $navLinks = $('a.navbar_navigate[href]');
                if (!$navLinks.length) {
                    return;
                }

                var targetHref = String($navLinks.last().attr('href') || '').trim();
                if (!targetHref) {
                    return;
                }

                try {
                    var absolute = new URL(targetHref, window.location.origin).toString();
                    var current = window.location.origin + window.location.pathname + window.location.search;
                    if (absolute !== current) {
                        $backBtn.attr('href', absolute);
                    }
                } catch (_e) {
                    $backBtn.attr('href', targetHref);
                }
            }

            materialBtns.forEach(function (btn) {
                var key = getProgressKey(btn);
                var isCompleted = String(btn.getAttribute('data-is-completed') || '0') === '1';
                if (key !== '' && isCompleted) {
                    openedMaterials[key] = true;
                }
                refreshMaterialCheckState(btn);
                btn.addEventListener('click', function () { openMaterial(btn); });
            });
            syncBackButtonWithNavbar();
            updateMaterialProgress();
            if (isControlMode) {
                setControlModeArmed(false);
                if ($controlModeModal.length && $controlModeModal.parent()[0] !== document.body) {
                    $controlModeModal.appendTo('body');
                }
                if ($enableControlModeBtn.length) {
                    $enableControlModeBtn.on('click', function () {
                        if ($controlModeModal.length && typeof $controlModeModal.modal === 'function') {
                            $controlModeModal.modal('show');
                        } else {
                            if (window.confirm('Uruchomienie testu w tym trybie zapisze przejscie kontrolne. Czy wlaczyc tryb testowy?')) {
                                setControlModeArmed(true);
                            }
                        }
                    });
                }
                if ($disableControlModeBtn.length) {
                    $disableControlModeBtn.on('click', function () {
                        setControlModeArmed(false);
                    });
                }
                if ($confirmControlModeBtn.length) {
                    $confirmControlModeBtn.on('click', function () {
                        setControlModeArmed(true);
                        if ($controlModeModal.length && typeof $controlModeModal.modal === 'function') {
                            $controlModeModal.modal('hide');
                        }
                    });
                }
            } else {
                setControlModeArmed(true);
            }
            // Jesli istnieje strona "Wprowadzenie", pokazujemy ja od razu po zaladowaniu ekranu.
            var introBtn = materialBtns.find(function (btn) {
                return String(btn.getAttribute('data-is-intro') || '0') === '1';
            });
            if (introBtn) {
                openMaterial(introBtn);
            }
            if ($startBtn.length) $startBtn.on('click', startTest);

            $toolbarSummary.on('click', function () { save(q(state.idx), collect(q(state.idx))); showSummary(); });
            $prev.on('click', function () { save(q(state.idx), collect(q(state.idx))); if (state.idx > 0) { state.idx--; renderQuestion(); } });
            $next.on('click', function () {
                var cur = q(state.idx), val = collect(cur);
                setAns(cur, val);
                if (!isAnswered(cur, val)) { showError('Aby przejsc dalej, udziel odpowiedzi na biezace pytanie.'); return; }
                save(cur, val).done(function () {
                    hideError();
                    if (state.idx >= state.questions.length - 1) showSummary();
                    else { state.idx++; renderQuestion(); }
                }).fail(function () { showError('Nie udalo sie zapisac odpowiedzi. Sprobuj ponownie.'); });
            });

            var shortDebounce = null;
            var matchingDraggedValue = '';
            $(document).on('change', '#test-answer-container .js-input', function () {
                save(q(state.idx), collect(q(state.idx))).fail(function () { showError('Nie udalo sie zapisac odpowiedzi.'); });
            });
            $(document).on('input', '#test-answer-container .js-input[data-kind="short"]', function () {
                clearTimeout(shortDebounce);
                shortDebounce = setTimeout(function () {
                    save(q(state.idx), collect(q(state.idx))).fail(function () { showError('Nie udalo sie zapisac odpowiedzi.'); });
                }, 500);
            });
            $(document).on('dragstart', '#test-answer-container .js-match-tile', function (e) {
                matchingDraggedValue = String($(this).data('value') || '').trim();
                $(this).addClass('is-dragging');
                if (e.originalEvent && e.originalEvent.dataTransfer) {
                    e.originalEvent.dataTransfer.setData('text/plain', matchingDraggedValue);
                    e.originalEvent.dataTransfer.effectAllowed = 'copy';
                }
            });
            $(document).on('dragend', '#test-answer-container .js-match-tile', function () {
                $(this).removeClass('is-dragging');
                $('#test-answer-container .js-match-dropzone').removeClass('is-over');
                matchingDraggedValue = '';
            });
            $(document).on('dragover', '#test-answer-container .js-match-dropzone', function (e) {
                e.preventDefault();
                $(this).addClass('is-over');
            });
            $(document).on('dragleave', '#test-answer-container .js-match-dropzone', function () {
                $(this).removeClass('is-over');
            });
            $(document).on('drop', '#test-answer-container .js-match-dropzone', function (e) {
                e.preventDefault();
                $(this).removeClass('is-over');
                var value = '';
                if (e.originalEvent && e.originalEvent.dataTransfer) {
                    value = String(e.originalEvent.dataTransfer.getData('text/plain') || '').trim();
                }
                if (!value) {
                    value = matchingDraggedValue;
                }
                if (!value) return;

                var idx = parseInt($(this).data('index'), 10);
                if (isNaN(idx)) return;

                applyMatchingValue(idx, value);
                save(q(state.idx), collect(q(state.idx))).fail(function () {
                    showError('Nie udalo sie zapisac odpowiedzi.');
                });
            });
            $(document).on('click', '#test-answer-container .js-match-clear', function () {
                var $row = $(this).closest('.js-match-row');
                if (!$row.length) return;
                setMatchingRowValue($row, '');
                refreshMatchingPoolCurrentQuestion();
                save(q(state.idx), collect(q(state.idx))).fail(function () {
                    showError('Nie udalo sie zapisac odpowiedzi.');
                });
            });
            $(document).on('click', '.test-step-circle', function () {
                if (state.loading || !state.started || $(this).prop('disabled')) return;
                var target = parseInt($(this).data('index'), 10);
                if (isNaN(target)) return;
                var canJump = target === state.idx || isAnswered(q(target), ans(q(target)));
                if (!canJump) return;
                save(q(state.idx), collect(q(state.idx)));
                state.idx = target;
                renderQuestion();
            });
            $(document).on('click', '.js-open', function () {
                var target = parseInt($(this).data('index'), 10);
                if (isNaN(target)) return;
                state.idx = target;
                renderQuestion();
            });
            $summaryBack.on('click', function () { $summaryCard.addClass('d-none'); $questionCard.removeClass('d-none'); });
            $finish.on('click', function () { finishAttempt(false); });
        })(jQuery);
    </script>
@endpush