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

@section('content')
    {{-- Ekran rozwiazywania testu. Pytania sa pobierane przez AJAX. --}}
    <div class="tab-content_2 p-3" id="attempt-page"  style="overflow-y: auto;"
         data-questions-url="{{ route('szkolenia.user.test.questions', $attempt->id) }}"
         data-save-url="{{ route('szkolenia.user.test.save-answer', $attempt->id) }}"
         data-finish-url="{{ route('szkolenia.user.test.finish', $attempt->id) }}"
         data-csrf="{{ csrf_token() }}"
         data-limit-min="{{ (int)($attempt->test->limit_czasu_min ?? 0) }}">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">Test: {{ $attempt->test->nazwa }}</h4>
            <span class="badge badge-info">Podejscie nr {{ $attempt->nr_podejscia }}</span>
        </div>

        <div class="alert alert-secondary">
            <div class="d-flex justify-content-between align-items-center">
                <span>Stan testu: <strong id="attempt-status-label">{{ $attempt->status }}</strong></span>
                <span id="attempt-timer-wrap" class="d-none">Pozostaly czas: <strong id="attempt-timer">--:--</strong></span>
            </div>
        </div>

        <div id="question-list">
            <div class="text-muted">Ladowanie pytan...</div>
        </div>

        {{-- Modal powiekszenia grafiki pytania (widok uzytkownika test_start). --}}
        <div class="modal fade user-test-image-zoom-modal" id="userTestStartImageZoomModal" 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="userTestStartImageZoomTitle">Podglad grafiki pytania</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-start-zoom-out">-</button>
                                <button type="button" class="btn btn-outline-secondary js-user-start-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-start-zoom-reset">100%</button>
                                <button type="button" class="btn btn-outline-secondary js-user-start-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-start-image-zoom-target" src="" alt="Powiekszona grafika pytania">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <form method="POST" action="{{ route('szkolenia.user.test.finish', $attempt->id) }}" id="finish-form" class="mt-3">
            @csrf
            <button class="btn btn-success" type="submit">Zakoncz test i oblicz wynik</button>
        </form>
    </div>
@endsection

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

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

@push('scripts')
    <script>
        (function () {
            // Ten skrypt obsluguje caly flow rozwiazywania testu po stronie uzytkownika.
            var page = $('#attempt-page');
            if (!page.length) {
                return;
            }

            var questionsUrl = page.data('questions-url');
            var saveUrl = page.data('save-url');
            var csrf = page.data('csrf');
            var questionList = $('#question-list');
            var timerWrap = $('#attempt-timer-wrap');
            var timerLabel = $('#attempt-timer');
            var finishForm = $('#finish-form');
            var limitMin = parseInt(page.data('limit-min'), 10) || 0;
            var timerHandle = null;
            var remainingSeconds = limitMin > 0 ? limitMin * 60 : 0;
            var zoomModal = $('#userTestStartImageZoomModal');
            var zoomTarget = $('#user-test-start-image-zoom-target');
            var zoomTitle = $('#userTestStartImageZoomTitle');
            var zoomStage = zoomModal.find('.user-test-image-zoom-stage');
            var zoomScale = 1;
            var zoomNaturalWidth = 0;
            var zoomNaturalHeight = 0;

            function escAttr(v) {
                return String(v || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
            }

            function renderTimer() {
                var min = Math.floor(remainingSeconds / 60);
                var sec = remainingSeconds % 60;
                timerLabel.text(String(min).padStart(2, '0') + ':' + String(sec).padStart(2, '0'));
            }

            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 pytania');
                zoomModal.modal('show');
            }

            function startTimerIfNeeded() {
                if (remainingSeconds <= 0) {
                    return;
                }
                timerWrap.removeClass('d-none');
                renderTimer();
                timerHandle = setInterval(function () {
                    remainingSeconds -= 1;
                    renderTimer();
                    if (remainingSeconds <= 0) {
                        clearInterval(timerHandle);
                        finishForm.submit();
                    }
                }, 1000);
            }

            function saveAnswer(questionId, answerValue) {
                return $.ajax({
                    method: 'POST',
                    url: saveUrl,
                    data: {
                        _token: csrf,
                        question_id: questionId,
                        answer: answerValue
                    }
                }).done(function () {
                    $('#attempt-status-label').text('submitted');
                });
            }

            function renderSingleChoice(q) {
                var html = '<div class="mt-2">';
                (q.answers || []).forEach(function (a) {
                    var value = String(a.id || a.answer_key || '');
                    var checked = String(q.user_answer || '') === value ? 'checked' : '';
                    html += '<div class="custom-control custom-radio">';
                    html += '<input type="radio" class="custom-control-input js-answer-single" name="q_' + q.test_question_id + '" id="ans_' + q.test_question_id + '_' + value + '" value="' + value + '" ' + checked + '>';
                    html += '<label class="custom-control-label" for="ans_' + q.test_question_id + '_' + value + '">' + (a.tresc_odpowiedzi || a.answer_key || '-') + '</label>';
                    html += '</div>';
                });
                html += '</div>';
                return html;
            }

            function renderMultipleChoice(q) {
                var selected = Array.isArray(q.user_answer) ? q.user_answer.map(String) : [];
                var html = '<div class="mt-2">';
                (q.answers || []).forEach(function (a) {
                    var value = String(a.id || a.answer_key || '');
                    var checked = selected.indexOf(value) !== -1 ? 'checked' : '';
                    html += '<div class="custom-control custom-checkbox">';
                    html += '<input type="checkbox" class="custom-control-input js-answer-multi" data-question="' + q.test_question_id + '" id="ans_' + q.test_question_id + '_' + value + '" value="' + value + '" ' + checked + '>';
                    html += '<label class="custom-control-label" for="ans_' + q.test_question_id + '_' + value + '">' + (a.tresc_odpowiedzi || a.answer_key || '-') + '</label>';
                    html += '</div>';
                });
                html += '</div>';
                return html;
            }

            function renderShortAnswer(q) {
                var value = q.user_answer || '';
                return '<input type="text" class="form-control mt-2 js-answer-short" data-question="' + q.test_question_id + '" value="' + String(value).replace(/"/g, '&quot;') + '" placeholder="Wpisz odpowiedz">';
            }

            function renderMatching(q) {
                var userMap = (q.user_answer && typeof q.user_answer === 'object') ? q.user_answer : {};
                var matchingOptions = [];
                (q.matching_options || []).forEach(function (opt) {
                    var val = String(opt || '').trim();
                    if (!val) return;
                    matchingOptions.push(val);
                });

                var usedValues = {};
                Object.keys(userMap).forEach(function (key) {
                    var val = String(userMap[key] || '').trim();
                    if (val) {
                        usedValues[val] = true;
                    }
                });

                var encodedOptions = encodeURIComponent(JSON.stringify(matchingOptions));
                var html = '<div class="mt-2 matching-dnd-wrap js-matching-wrap" data-question="' + q.test_question_id + '" data-options-encoded="' + escAttr(encodedOptions) + '">';
                (q.matches || []).forEach(function (pair, idx) {
                    var current = String(userMap[String(idx)] || '').trim();
                    var zoneClass = current ? 'matching-dropzone is-filled js-match-dropzone' : 'matching-dropzone is-empty js-match-dropzone';
                    var zoneContent = current ? escAttr(current) : '<span class="text-muted">Upusc kafelek tutaj</span>';
                    html += '<div class="form-row mb-2 js-match-row" data-question="' + q.test_question_id + '" data-index="' + idx + '">';
                    html += '<div class="col-md-6"><input type="text" class="form-control" value="' + String(pair.podpytanie || '').replace(/"/g, '&quot;') + '" readonly></div>';
                    html += '<div class="col-md-6"><div class="d-flex align-items-center">';
                    html += '<div class="' + zoneClass + '" data-index="' + idx + '">' + 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="' + escAttr(current) + '">';
                    html += '</div></div></div>';
                });
                html += '<div class="matching-pool-note">Przeciagnij kafelki na odpowiednie wiersze.</div>';
                html += '<div class="matching-pool js-match-pool">';
                matchingOptions.forEach(function (val) {
                    if (usedValues[val]) return;
                    html += '<button type="button" class="matching-tile js-match-tile" draggable="true" data-value="' + escAttr(val) + '">' + escAttr(val) + '</button>';
                });
                html += '</div>';
                html += '</div>';
                return html;
            }

            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 getMatchingOptionsByQuestion(qid) {
                var $wrap = $('.js-matching-wrap[data-question="' + qid + '"]').first();
                if (!$wrap.length) {
                    return [];
                }

                var raw = String($wrap.attr('data-options-encoded') || '').trim();
                if (!raw) {
                    return [];
                }

                try {
                    var parsed = JSON.parse(decodeURIComponent(raw));
                    if (!Array.isArray(parsed)) {
                        return [];
                    }
                    return parsed.map(function (opt) {
                        return String(opt || '').trim();
                    }).filter(function (opt) {
                        return opt !== '';
                    });
                } catch (_e) {
                    return [];
                }
            }

            function refreshMatchingPool(qid) {
                if (!qid) return;
                var $wrap = $('.js-matching-wrap[data-question="' + qid + '"]').first();
                if (!$wrap.length) return;

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

                var options = getMatchingOptionsByQuestion(qid);
                var usedValues = {};
                $('.js-match-row[data-question="' + qid + '"]').each(function () {
                    var val = String($(this).find('.js-match-input').val() || '').trim();
                    if (val) {
                        usedValues[val] = true;
                    }
                });

                var html = '';
                options.forEach(function (val) {
                    if (usedValues[val]) return;
                    html += '<button type="button" class="matching-tile js-match-tile" draggable="true" data-value="' + escAttr(val) + '">' + escAttr(val) + '</button>';
                });

                $pool.html(html || '<span class="text-muted small">Brak dostepnych kafelkow.</span>');
            }

            function collectMatchingMapByQuestion(qid) {
                var map = {};
                $('.js-match-row[data-question="' + qid + '"]').each(function () {
                    var index = String($(this).data('index'));
                    map[index] = String($(this).find('.js-match-input').val() || '').trim();
                });
                return map;
            }

            function applyMatchingValue(qid, targetIndex, selectedValue) {
                var value = String(selectedValue || '').trim();
                if (!qid || !value) return;

                var $rows = $('.js-match-row[data-question="' + qid + '"]');
                $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);
                refreshMatchingPool(qid);
            }

            function renderQuestions(payload) {
                var html = '';
                (payload.questions || []).forEach(function (q, index) {
                    html += '<div class="card mb-3" data-question-id="' + q.test_question_id + '">';
                    html += '<div class="card-header">Pytanie ' + (index + 1) + ' <span class="badge badge-light ml-2">' + q.typ_pytania + '</span></div>';
                    html += '<div class="card-body">';
                    html += '<div class="mb-2"><strong>' + (q.nazwa || '') + '</strong></div>';
                    html += '<div>' + (q.tresc_pytania || '') + '</div>';
                    if (q.image_url) {
                        html += '<div class="mt-2 text-center"><img class="img-fluid js-user-test-zoomable" data-zoom-title="Grafika pytania" style="max-height:260px; cursor:zoom-in;" src="' + escAttr(q.image_url) + '" alt="Grafika pytania"></div>';
                    }

                    if (q.typ_pytania === 'single_choice' || q.typ_pytania === 'true_false') {
                        html += renderSingleChoice(q);
                    } else if (q.typ_pytania === 'multiple_choice') {
                        html += renderMultipleChoice(q);
                    } else if (q.typ_pytania === 'short_answer') {
                        html += renderShortAnswer(q);
                    } else if (q.typ_pytania === 'matching') {
                        html += renderMatching(q);
                    }

                    html += '</div></div>';
                });

                questionList.html(html || '<div class="text-muted">Brak pytan w tescie.</div>');

                $('.js-matching-wrap').each(function () {
                    var qid = String($(this).data('question') || '').trim();
                    if (qid) {
                        refreshMatchingPool(qid);
                    }
                });
            }

            // Pobieramy dane testu po zaladowaniu strony.
            $.get(questionsUrl).done(function (payload) {
                renderQuestions(payload);
                startTimerIfNeeded();
            }).fail(function () {
                questionList.html('<div class="alert alert-danger mb-0">Nie udalo sie pobrac pytan.</div>');
            });

            // Single choice / true-false.
            $(document).on('change', '.js-answer-single', function () {
                var card = $(this).closest('.card');
                var qid = card.data('question-id');
                var value = $(this).val();
                saveAnswer(String(qid), value);
            });

            // Multiple choice.
            $(document).on('change', '.js-answer-multi', function () {
                var qid = $(this).data('question');
                var selected = [];
                $('.js-answer-multi[data-question="' + qid + '"]:checked').each(function () {
                    selected.push(String($(this).val()));
                });
                saveAnswer(String(qid), selected);
            });

            // Short answer (lekki debounce).
            var shortInputTimeout = null;
            $(document).on('input', '.js-answer-short', function () {
                var input = $(this);
                clearTimeout(shortInputTimeout);
                shortInputTimeout = setTimeout(function () {
                    saveAnswer(String(input.data('question')), input.val());
                }, 500);
            });

            // Matching drag&drop.
            var matchingDraggedValue = '';
            $(document).on('dragstart', '.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', '.js-match-tile', function () {
                $(this).removeClass('is-dragging');
                $('.js-match-dropzone').removeClass('is-over');
                matchingDraggedValue = '';
            });
            $(document).on('dragover', '.js-match-dropzone', function (e) {
                e.preventDefault();
                $(this).addClass('is-over');
            });
            $(document).on('dragleave', '.js-match-dropzone', function () {
                $(this).removeClass('is-over');
            });
            $(document).on('drop', '.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 $row = $(this).closest('.js-match-row');
                var qid = String($row.data('question'));
                var idx = parseInt($row.data('index'), 10);
                if (!qid || isNaN(idx)) return;

                applyMatchingValue(qid, idx, value);
                saveAnswer(qid, collectMatchingMapByQuestion(qid));
            });
            $(document).on('click', '.js-match-clear', function () {
                var $row = $(this).closest('.js-match-row');
                var qid = String($row.data('question'));
                if (!qid) return;
                setMatchingRowValue($row, '');
                refreshMatchingPool(qid);
                saveAnswer(qid, collectMatchingMapByQuestion(qid));
            });

            if (zoomModal.length) {
                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 pytania'));
                });

                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-start-zoom-in').on('click', function () {
                    zoomScale = Math.min(8, zoomScale + 0.2);
                    renderZoomScale();
                });
                zoomModal.find('.js-user-start-zoom-out').on('click', function () {
                    zoomScale = Math.max(0.1, zoomScale - 0.2);
                    renderZoomScale();
                });
                zoomModal.find('.js-user-start-zoom-reset').on('click', function () {
                    zoomScale = 1;
                    renderZoomScale();
                });
                zoomModal.find('.js-user-start-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'
                    });
                });
            }
        })();
    </script>
    <style>
        .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;
        }
        .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