{{ block title }}
    {{ t.comp_title }}
{{ endblock }}

{{ block content }}

<div class="alert alert-warning shadow-sm mb-4">
    <i class="bi bi-pencil-square"></i>
    {{ t.comp_alert|safe }}
</div>

<div class="alert alert-info shadow-sm mb-4">
    {{ t.comp_reminder|safe }}
</div>

<div id="comp-i18n" class="d-none" aria-hidden="true"
  data-msg-select="{{ t.comp_select }}"
  data-msg-correct="{{ t.comp_correct }}"
  data-msg-incorrect="{{ t.comp_incorrect }}"
  data-label-check="{{ t.comp_check }}"
  data-label-continue="{{ t.comp_continue }}"
  data-label-retry="{{ t.comp_try_again }}"
></div>

<div id="card-q1" class="card mb-4 shadow-sm">
    <div class="card-body">
        <h5 class="card-title mb-3">{{ t.comp_q1_title }}</h5>
        {{ formfield 'comp_q1' label=t.comp_q1_label }}
        <div class="feedback-msg mt-2" style="display:none;"></div>
    </div>
</div>

<div id="card-q2" class="card mb-4 shadow-sm">
    <div class="card-body">
        <h5 class="card-title mb-3">{{ t.comp_q2_title }}</h5>
        {{ formfield 'comp_q2' label=t.comp_q2_label }}
        <div class="feedback-msg mt-2" style="display:none;"></div>
    </div>
</div>

<div id="card-q3" class="card mb-4 shadow-sm">
    <div class="card-body">
        <h5 class="card-title mb-3">{{ t.comp_q3_title }}</h5>
        {{ formfield 'comp_q3' label=t.comp_q3_label }}
        <div class="feedback-msg mt-2" style="display:none;"></div>
    </div>
</div>

<div class="d-flex justify-content-end mt-4">
    <button type="button" id="action-btn" class="btn btn-primary btn-lg px-4">{{ t.comp_check }}</button>
</div>

<div id="hidden-next" style="display:none;">
    {{ next_button label=t.btn_next }}
</div>

{{ endblock }}

{{ block styles }}
<style>
    .otree-body {
        max-width: 800px;
        margin: 40px auto;
        font-family: 'Inter', -apple-system, system-ui, sans-serif;
        color: #333;
    }
    .card {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        background-color: #fff;
        transition: border-color 0.3s ease;
    }
    .card-title {
        font-size: 1.15rem;
        font-weight: 600;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px;
        margin-bottom: 15px;
        color: #2c3e50;
    }
    .btn-primary {
        padding: 10px 30px;
        font-weight: 600;
        border-radius: 4px;
    }

    .card.border-correct { border-color: #198754; }
    .card.border-wrong   { border-color: #dc3545; }

    .form-check.highlight-correct label {
        color: #198754;
        font-weight: 700;
    }
    .form-check.highlight-correct {
        background-color: #d1e7dd;
        border-radius: 6px;
        padding-top: 4px;
        padding-bottom: 4px;
        margin-bottom: 4px;
    }
    .form-check.highlight-wrong label {
        color: #dc3545;
        font-weight: 700;
    }
    .form-check.highlight-wrong {
        background-color: #f8d7da;
        border-radius: 6px;
        padding-top: 4px;
        padding-bottom: 4px;
        margin-bottom: 4px;
    }

    .feedback-msg {
        font-size: 0.95rem;
        font-weight: 600;
    }
    .feedback-msg.correct { color: #198754; }
    .feedback-msg.wrong   { color: #dc3545; }
</style>
{{ endblock }}

{{ block scripts }}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var solutions = {comp_q1: '3', comp_q2: '2', comp_q3: '2'};
        var fields = ['comp_q1', 'comp_q2', 'comp_q3'];
        var cardIds = ['card-q1', 'card-q2', 'card-q3'];
        var btn = document.getElementById('action-btn');
        var state = 'check';
        var i18n = document.getElementById('comp-i18n').dataset;
        var MSG_SELECT = i18n.msgSelect;
        var MSG_CORRECT = i18n.msgCorrect;
        var MSG_INCORRECT = i18n.msgIncorrect;
        var LABEL_CHECK = i18n.labelCheck;
        var LABEL_CONTINUE = i18n.labelContinue;
        var LABEL_RETRY = i18n.labelRetry;

        btn.addEventListener('click', function () {

            if (state === 'next') {
                document.querySelectorAll('input[type="radio"]').forEach(function (r) {
                    r.disabled = false;
                });
                fields.forEach(function (field) {
                    var radios = document.querySelectorAll('input[name="' + field + '"]');
                    var correctAlreadyChecked = false;
                    radios.forEach(function (r) {
                        if (r.checked && r.value === solutions[field]) correctAlreadyChecked = true;
                    });
                    if (!correctAlreadyChecked) {
                        radios.forEach(function (r) { r.checked = false; });
                        radios.forEach(function (r) {
                            if (r.value === solutions[field]) r.checked = true;
                        });
                    }
                });
                document.querySelector('#hidden-next button').click();
                return;
            }

            if (state === 'retry') {
                fields.forEach(function (field, idx) {
                    var card = document.getElementById(cardIds[idx]);
                    var radios = card.querySelectorAll('input[name="' + field + '"]');
                    var feedbackEl = card.querySelector('.feedback-msg');

                    var wasCorrect = false;
                    radios.forEach(function (r) {
                        if (r.checked && r.value === solutions[field]) wasCorrect = true;
                    });

                    if (!wasCorrect) {
                        card.querySelectorAll('.form-check').forEach(function (fc) {
                            fc.classList.remove('highlight-correct', 'highlight-wrong');
                        });
                        card.classList.remove('border-correct', 'border-wrong');
                        feedbackEl.style.display = 'none';
                        feedbackEl.classList.remove('correct', 'wrong');
                        radios.forEach(function (r) {
                            r.checked = false;
                            r.disabled = false;
                        });
                    }
                });
                btn.textContent = LABEL_CHECK;
                btn.className = 'btn btn-primary btn-lg px-4';
                state = 'check';
                return;
            }

            var allCorrect = true;

            fields.forEach(function (field, idx) {
                var card = document.getElementById(cardIds[idx]);
                var radios = card.querySelectorAll('input[name="' + field + '"]');
                var feedbackEl = card.querySelector('.feedback-msg');
                var selected = null;

                card.querySelectorAll('.form-check').forEach(function (fc) {
                    fc.classList.remove('highlight-correct', 'highlight-wrong');
                });
                card.classList.remove('border-correct', 'border-wrong');
                feedbackEl.style.display = 'none';
                feedbackEl.classList.remove('correct', 'wrong');

                radios.forEach(function (r) {
                    if (r.checked) selected = r.value;
                });

                if (!selected) {
                    allCorrect = false;
                    card.classList.add('border-wrong');
                    feedbackEl.textContent = MSG_SELECT;
                    feedbackEl.classList.add('wrong');
                    feedbackEl.style.display = 'block';
                    return;
                }

                if (selected === solutions[field]) {
                    var chosenCheck = getFormCheck(radios, selected);
                    if (chosenCheck) chosenCheck.classList.add('highlight-correct');
                    card.classList.add('border-correct');
                    feedbackEl.innerHTML = '<i class="bi bi-check-circle-fill me-1"></i> ' + MSG_CORRECT;
                    feedbackEl.classList.add('correct');
                    feedbackEl.style.display = 'block';
                } else {
                    allCorrect = false;
                    var wrongCheck = getFormCheck(radios, selected);
                    if (wrongCheck) wrongCheck.classList.add('highlight-wrong');
                    var rightCheck = getFormCheck(radios, solutions[field]);
                    if (rightCheck) rightCheck.classList.add('highlight-correct');
                    card.classList.add('border-wrong');
                    feedbackEl.innerHTML = '<i class="bi bi-x-circle-fill me-1"></i> ' + MSG_INCORRECT;
                    feedbackEl.classList.add('wrong');
                    feedbackEl.style.display = 'block';
                }

                radios.forEach(function (r) { r.disabled = true; });
            });

            if (allCorrect) {
                btn.textContent = LABEL_CONTINUE;
                btn.className = 'btn btn-success btn-lg px-4';
                state = 'next';
            } else {
                btn.textContent = LABEL_RETRY;
                btn.className = 'btn btn-outline-secondary btn-lg px-4';
                state = 'retry';
            }
        });

        function getFormCheck(radios, value) {
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].value === value) return radios[i].closest('.form-check');
            }
            return null;
        }
    });
</script>
{{ endblock }}