@extends('layouts.site')
@php
    $my_name_view = 'Test - Wynik';
    $my_short_view_name = 'Wynik testu';
@endphp
@section('title', 'Test - Wynik')

@section('content')
    @php
        $navbarStackForBack = my_SzkolNavbarBuild($my_name_view ?? null, $my_short_view_name ?? null);
        $defaultBackUrl = route('szkolenia.user.my-trainings');
        $backUrl = $defaultBackUrl;

        if (is_array($navbarStackForBack) && count($navbarStackForBack) >= 2) {
            $previousNode = $navbarStackForBack[count($navbarStackForBack) - 2] ?? null;
            $previousPath = is_array($previousNode) ? trim((string) ($previousNode['path'] ?? '')) : '';
            if ($previousPath !== '') {
                $backUrl = url($previousPath);
            }
        }
    @endphp

    {{-- Ekran wyniku testu dla uzytkownika. --}}
    <div class="tab-content_2 p-3"  style="overflow-y: auto;">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">Wynik testu</h4>
            <a class="btn btn-primary" href="{{ $backUrl }}">Powrot</a>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-1"><strong>Test:</strong> {{ optional($attempt->test)->nazwa }}</div>
                    <div class="col-md-6 mb-1"><strong>Szkolenie:</strong> {{ optional($attempt->training)->temat }}</div>
                    <div class="col-md-4 mb-1"><strong>Nr podejscia:</strong> {{ $attempt->nr_podejscia }}</div>
                    <div class="col-md-4 mb-1"><strong>Wynik:</strong> {{ $attempt->wynik_procent }}%</div>
                    <div class="col-md-4 mb-1"><strong>Punkty:</strong> {{ $attempt->punkty_uzyskane }} / {{ $attempt->punkty_max }}</div>
                    @if((int)($attempt->czy_przejscie_kontrolne ?? 0) === 1)
                        <div class="col-md-12 mb-1"><strong>Tryb:</strong> <span class="badge badge-warning">Przejscie kontrolne</span></div>
                    @endif
                    <div class="col-md-12 mt-2">
                        @if((int)$attempt->zaliczono === 1)
                            <span class="badge badge-success p-2">ZALICZONO</span>
                        @else
                            <span class="badge badge-danger p-2">NIE ZALICZONO</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header">Szczegoly oceny</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm table-striped mb-0">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Tresc pytania</th>
                            <th>Typ</th>
                            <th>Poprawna</th>
                            <th>Punkty</th>
                            <th class="text-center">Szczegoly</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($details as $idx => $row)
                            @php
                                $questionPayload = (array) ($row['question'] ?? []);
                                $questionTitle = trim((string) ($questionPayload['nazwa'] ?? ''));
                                $questionTextRaw = trim((string) ($questionPayload['tresc_pytania'] ?? ''));
                                $questionText = $questionTextRaw !== '' ? strip_tags($questionTextRaw) : '-';
                                $correctAnswerText = trim((string) ($row['correct_answer_text'] ?? ''));
                                if ($correctAnswerText === '') {
                                    $correctAnswerText = '-';
                                }
                            @endphp
                            <tr>
                                <td>{{ $idx + 1 }}</td>
                                <td title="{{ $questionText }}">
                                    {{ \Illuminate\Support\Str::limit($questionText, 120) }}
                                </td>
                                <td>{{ $row['type'] ?? '-' }}</td>
                                <td>
                                    @if(!empty($row['is_correct']))
                                        <span class="badge badge-success">TAK</span>
                                    @else
                                        <span class="badge badge-danger">NIE</span>
                                    @endif
                                </td>
                                <td>{{ $row['points_earned'] ?? 0 }} / {{ $row['points_max'] ?? 0 }}</td>
                                <td class="text-center">
                                    <button
                                        type="button"
                                        class="btn btn-sm btn-outline-primary js-open-question-preview"
                                        data-toggle="modal"
                                        data-target="#QuestionPreviewModal"
                                        data-question-title="{{ $questionTitle !== '' ? $questionTitle : ('Pytanie #'.($idx + 1)) }}"
                                        data-question-text="{{ $questionText }}"
                                        data-user-answer="{{ trim((string) ($row['user_answer_text'] ?? '-')) !== '' ? trim((string) ($row['user_answer_text'] ?? '-')) : '-' }}"
                                        data-correct-answer="{{ $correctAnswerText }}"
                                        data-is-correct="{{ !empty($row['is_correct']) ? '1' : '0' }}"
                                    >
                                        Podglad
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center">Brak szczegolow.</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="modal fade" id="QuestionPreviewModal" tabindex="-1" role="dialog" aria-labelledby="QuestionPreviewModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="QuestionPreviewModalLabel">Podglad pytania</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-2"><strong id="question-preview-title">-</strong></div>
                        <div class="mb-3" id="question-preview-text">-</div>
                        <hr>
                        <div class="mb-2">
                            <strong id="question-preview-user-label">Twoja odpowiedz:</strong>
                            <div id="question-preview-user-answer" class="mt-1">-</div>
                        </div>
                        <div class="mb-2 d-none" id="question-preview-correct-wrap">
                            <strong>Odpowiedz prawidlowa:</strong>
                            <div id="question-preview-answer" class="mt-1 text-success font-weight-bold">-</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

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

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

@push('scripts')
    <script>
        $(document).on('click', '.js-open-question-preview', function () {
            var $modal = $('#QuestionPreviewModal');
            if ($modal.length && $modal.parent()[0] !== document.body) {
                $modal.appendTo('body');
            }
        });

        $(document).on('click', '.js-open-question-preview', function () {
            var $btn = $(this);
            $('#question-preview-title').text(String($btn.data('question-title') || '-'));
            $('#question-preview-text').text(String($btn.data('question-text') || '-'));
            var isCorrect = String($btn.data('is-correct') || '0') === '1';
            var userAnswer = String($btn.data('user-answer') || '-');
            var correctAnswer = String($btn.data('correct-answer') || '-');

            var $user = $('#question-preview-user-answer');
            $user
                .text(userAnswer)
                .removeClass('text-success text-danger font-weight-bold')
                .addClass(isCorrect ? 'text-success' : 'text-danger')
                .addClass('font-weight-bold');

            var $userLabel = $('#question-preview-user-label');
            if (isCorrect) {
                $userLabel.html('Twoja odpowiedz <em class="text-success">(prawidlowa)</em>:');
            } else {
                $userLabel.html('Twoja odpowiedz <em class="text-danger">(nieprawidlowa)</em>:');
            }

            var $correctWrap = $('#question-preview-correct-wrap');
            $('#question-preview-answer').text(correctAnswer);
            $correctWrap.toggleClass('d-none', isCorrect);
        });

        $(document).on('shown.bs.modal', '#QuestionPreviewModal', function () {
            $('body').addClass('test-result-preview-open');
            var $modal = $(this);
            $modal.css({
                zIndex: 200050,
                pointerEvents: 'auto'
            });
            $modal.find('.modal-dialog, .modal-content').css('pointer-events', 'auto');
            $('.modal-backdrop').last().css('z-index', 200040);
        });
        $(document).on('hidden.bs.modal', '#QuestionPreviewModal', function () {
            $('body').removeClass('test-result-preview-open');
            $(this).removeAttr('style');
            $(this).find('.modal-dialog, .modal-content').removeAttr('style');
        });
    </script>
@endpush

@push('styles')
    <style>
        #QuestionPreviewModal {
            z-index: 200050 !important;
            pointer-events: auto !important;
        }
        #QuestionPreviewModal .modal-dialog,
        #QuestionPreviewModal .modal-content {
            pointer-events: auto !important;
        }
        #question-preview-user-answer,
        #question-preview-answer {
            margin-left: 5rem;
        }
        body.test-result-preview-open .modal-backdrop.show {
            z-index: 200040 !important;
        }
    </style>
@endpush