{{ block title }}
 Feedback
{{ endblock }}
{{ block content }}
<form method="post" id="feedback-form">
<input type="hidden" name="ios_coordinates" id="id_ios_coordinates" value="">

<div class="card bg-mid m-0">
<h4 class="card-header">Provide your feedback</h4>
<div class="card-body">

    <!-- Design decision: three mutually exclusive status banners.
         is_single takes priority over committed check because a single
         participant technically did commit, but never ran the experiment. -->
    {{ if player.participant.is_single }}
    <div style="background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
        <strong>Thank you for your patience.</strong>
        <br><br>
        Unfortunately, we were unable to form a group within the waiting period.
        <br><br>
        You will be paid for both completing the training and for your waiting time.
    </div>
    {{ elif not player.participant.committed }}
    <div style="background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
        <strong>Thank you for completing the training.</strong>
        <br><br>
        As you did not proceed to the group phase, you will be paid for completing the training.
    </div>
    {{ endif }}

    Thanks for your time and participation.
    {{ if not player.participant.is_single }}
    In this final page, we'd like to ask some questions about your experience.
    {{ endif }}
    <br><br>

    <!-- Design decision: "please answer all" prompt is only meaningful when there
         are actually required questions — i.e. committed, non-single participants.
         Non-committed participants see only an optional training comment and can
         submit immediately. -->
    {{ if player.participant.committed and not player.participant.is_single }}
    Please answer <strong>all</strong> of the following questions. The Submit button will appear once every question has been answered.
    <br><br>
    {{ endif }}

    <!-- Design decision: experiment-specific questions (feedback 1-3, cohesion, IOS)
         are only shown to participants who committed AND were successfully grouped.
         Participants who did not commit or were left single never saw the main
         experiment, so these questions are not applicable to them. -->
    {{ if player.participant.committed and not player.participant.is_single }}

    <div style="margin-bottom: 20px;">
        <label for="id_feedback_1" style="font-weight: bold; display: block; margin-bottom: 6px;">
            1. Was one robot best throughout the experiment?
        </label>
        <textarea id="id_feedback_1" name="feedback_1" rows="4"
            style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; resize: vertical;"></textarea>
    </div>

    <div style="margin-bottom: 20px;">
        <label for="id_feedback_2" style="font-weight: bold; display: block; margin-bottom: 6px;">
            2. What did you think of the Mission Commander?
        </label>
        <textarea id="id_feedback_2" name="feedback_2" rows="4"
            style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; resize: vertical;"></textarea>
    </div>

    <div style="margin-bottom: 20px;">
        <label for="id_feedback_3" style="font-weight: bold; display: block; margin-bottom: 6px;">
            3. Overall, did your research team vote for better robots than the Mission Commander?
        </label>
        <textarea id="id_feedback_3" name="feedback_3" rows="4"
            style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; resize: vertical;"></textarea>
    </div>

    {{ endif }}

    <!-- Design decision: optional training comment is shown to participants who
         completed training but did not commit, AND to is_single participants who
         timed out waiting (they also only experienced training). Field is
         blank=True and excluded from checkAllAnswered, so it never gates submit. -->
    {{ if not player.participant.committed or player.participant.is_single }}
    <div style="margin-bottom: 20px;">
        <label for="id_training_feedback" style="font-weight: bold; display: block; margin-bottom: 6px;">
            If you would like to, please leave any comments about your experience doing the training. This can help us improve the experience of future participants.
        </label>
        <textarea id="id_training_feedback" name="training_feedback" rows="4"
            style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; resize: vertical;"></textarea>
    </div>
    {{ endif }}

    If you wish to contact us about issues or other details that you think are important, please write to us at <a href="mailto:collectivemindslab@csh.ac.at">collectivemindslab@csh.ac.at</a>
    <br><br>
</div>
</div>

<br>

{{ if player.participant.committed and not player.participant.is_single }}

<!-- GROUP COHESION SECTION -->
<div class="card bg-mid m-0">
    <h4 class="card-header">🤝 Team Dynamics</h4>
    <div class="card-body">
        <p class="instruction-text">
            <strong>On a scale of 1–7, how much do you feel your Research Team worked together during the experiment?</strong>
        </p>
        <div class="likert-container">
            <span class="likert-endpoint">1<br><span class="likert-endpoint-label">Worked against<br>each other</span></span>
            <div class="likert-buttons">
                <label class="likert-label"><input type="radio" name="group_cohesion" value="1" class="likert-radio"><span class="likert-button">1</span></label>
                <label class="likert-label"><input type="radio" name="group_cohesion" value="2" class="likert-radio"><span class="likert-button">2</span></label>
                <label class="likert-label"><input type="radio" name="group_cohesion" value="3" class="likert-radio"><span class="likert-button">3</span></label>
                <label class="likert-label"><input type="radio" name="group_cohesion" value="4" class="likert-radio"><span class="likert-button">4</span></label>
                <label class="likert-label"><input type="radio" name="group_cohesion" value="5" class="likert-radio"><span class="likert-button">5</span></label>
                <label class="likert-label"><input type="radio" name="group_cohesion" value="6" class="likert-radio"><span class="likert-button">6</span></label>
                <label class="likert-label"><input type="radio" name="group_cohesion" value="7" class="likert-radio"><span class="likert-button">7</span></label>
            </div>
            <span class="likert-endpoint">7<br><span class="likert-endpoint-label">Fully<br>cooperated</span></span>
        </div>
    </div>
</div>

<br>

<!-- IOS SECTION -->
<div class="card bg-mid m-0">
    <h4 class="card-header">👥 Feelings of Closeness</h4>
    <div class="card-body">
        <p class="instruction-text">
            The circles below represent <strong>You</strong>, your <strong>Research Team</strong>, and the <strong>Mission Commander</strong>.
            Drag the circles to show how close you feel to each.
            <strong>More overlap = greater closeness.</strong>
        </p>

        <div id="ios-container">
            <div class="ios-circle" id="circle-rt">
                <span class="circle-label">Research<br>Team</span>
            </div>
            <div class="ios-circle" id="circle-mc">
                <span class="circle-label">Mission<br>Commander</span>
            </div>
            <div class="ios-circle" id="circle-you">
                <span class="circle-label">You</span>
            </div>
        </div>

        <div id="prompt-wrapper" style="text-align: center; margin-top: 15px; color: #888; font-style: italic;">
            For an answer to be submitted, move at least one circle.
        </div>
    </div>
</div>

<br>

{{ endif }}

<div id="next-wrapper" style="display: none; text-align: center;">
    <button type="submit" class="next-button">Submit</button>
</div>

</form>

<script>
// Design decision: completedExperiment drives which fields checkAllAnswered
// requires before revealing the submit button. Participants who did not
// complete the main experiment bypass the three text areas, cohesion, and IOS.
{{ if player.participant.committed and not player.participant.is_single }}
const completedExperiment = true;
{{ else }}
const completedExperiment = false;
{{ endif }}

const CIRCLE_RADIUS = 65;

const container     = document.getElementById('ios-container');
const hiddenField   = document.getElementById('id_ios_coordinates');
const nextWrapper   = document.getElementById('next-wrapper');
const promptWrapper = document.getElementById('prompt-wrapper');

// Design decision: declared at module scope so updateData() can reference them.
// Originally declared with const inside initPositions(), which put them out of
// scope for updateData() — causing a ReferenceError on every drag that silently
// prevented checkAllAnswered() from running after hasMoved was set.
let rtCircle  = null;
let mcCircle  = null;
let youCircle = null;

let hasMoved = false;

function checkAllAnswered() {
    let ready;

    if (completedExperiment) {
        const t1       = document.getElementById('id_feedback_1').value.trim() !== '';
        const t2       = document.getElementById('id_feedback_2').value.trim() !== '';
        const t3       = document.getElementById('id_feedback_3').value.trim() !== '';
        const cohesion = document.querySelector('input[name="group_cohesion"]:checked') !== null;
        ready = t1 && t2 && t3 && cohesion && hasMoved;

        if (promptWrapper) {
            promptWrapper.style.display = hasMoved ? 'none' : 'block';
        }
    } else {
        // Design decision: training_feedback is optional and intentionally excluded
        // here — non-committed and is_single participants have no required fields,
        // so submit is always available immediately.
        ready = true;
    }

    nextWrapper.style.display = ready ? 'block' : 'none';
}

if (completedExperiment) {
    document.getElementById('id_feedback_1').addEventListener('input', checkAllAnswered);
    document.getElementById('id_feedback_2').addEventListener('input', checkAllAnswered);
    document.getElementById('id_feedback_3').addEventListener('input', checkAllAnswered);
    document.querySelectorAll('input[name="group_cohesion"]').forEach(function(radio) {
        radio.addEventListener('change', checkAllAnswered);
    });
}

// Run once on load so the submit button appears immediately for short-path participants
checkAllAnswered();

function clamp(val, min, max) {
    return Math.max(min, Math.min(max, val));
}

function getCircleCenterFraction(circle) {
    const cRect = container.getBoundingClientRect();
    const oRect = circle.getBoundingClientRect();
    return {
        x: parseFloat(((oRect.left + CIRCLE_RADIUS - cRect.left) / cRect.width).toFixed(4)),
        y: parseFloat(((oRect.top  + CIRCLE_RADIUS - cRect.top)  / cRect.height).toFixed(4))
    };
}

function updateData() {
    const data = {
        you:               getCircleCenterFraction(youCircle),
        research_team:     getCircleCenterFraction(rtCircle),
        mission_commander: getCircleCenterFraction(mcCircle),
        circle_radius_fraction: parseFloat((CIRCLE_RADIUS / container.getBoundingClientRect().width).toFixed(4))
    };
    hiddenField.value = JSON.stringify(data);
}

function makeDraggable(circle) {
    let isDragging = false;
    let offsetX = 0;
    let offsetY = 0;

    function startDrag(clientX, clientY) {
        isDragging = true;
        const rect = circle.getBoundingClientRect();
        offsetX = clientX - (rect.left + CIRCLE_RADIUS);
        offsetY = clientY - (rect.top  + CIRCLE_RADIUS);
        circle.style.zIndex = 10;
        circle.style.cursor = 'grabbing';
    }

    function moveDrag(clientX, clientY) {
        if (!isDragging) return;
        const cRect = container.getBoundingClientRect();

        let newCX = (clientX - offsetX) - cRect.left;
        let newCY = (clientY - offsetY) - cRect.top;

        newCX = clamp(newCX, CIRCLE_RADIUS, cRect.width  - CIRCLE_RADIUS);
        newCY = clamp(newCY, CIRCLE_RADIUS, cRect.height - CIRCLE_RADIUS);

        circle.style.left = (newCX - CIRCLE_RADIUS) + 'px';
        circle.style.top  = (newCY - CIRCLE_RADIUS) + 'px';

        if (!hasMoved) { hasMoved = true; }
        updateData();
        checkAllAnswered();
    }

    function endDrag() {
        isDragging = false;
        circle.style.zIndex = 1;
        circle.style.cursor = 'grab';
    }

    circle.addEventListener('mousedown', (e) => { e.preventDefault(); startDrag(e.clientX, e.clientY); });
    document.addEventListener('mousemove', (e) => moveDrag(e.clientX, e.clientY));
    document.addEventListener('mouseup', endDrag);

    circle.addEventListener('touchstart', (e) => { e.preventDefault(); const t = e.touches[0]; startDrag(t.clientX, t.clientY); }, { passive: false });
    document.addEventListener('touchmove', (e) => { if (!isDragging) return; e.preventDefault(); const t = e.touches[0]; moveDrag(t.clientX, t.clientY); }, { passive: false });
    document.addEventListener('touchend', endDrag);
}

function initPositions() {
    if (!completedExperiment) return;

    rtCircle  = document.getElementById('circle-rt');
    mcCircle  = document.getElementById('circle-mc');
    youCircle = document.getElementById('circle-you');

    const W = container.offsetWidth;
    const H = container.offsetHeight;

    youCircle.style.left = (W * 0.50 - CIRCLE_RADIUS) + 'px';
    youCircle.style.top  = (H * 0.50 - CIRCLE_RADIUS) + 'px';

    rtCircle.style.left = (W * 0.17 - CIRCLE_RADIUS) + 'px';
    rtCircle.style.top  = (H * 0.50 - CIRCLE_RADIUS) + 'px';

    mcCircle.style.left = (W * 0.83 - CIRCLE_RADIUS) + 'px';
    mcCircle.style.top  = (H * 0.50 - CIRCLE_RADIUS) + 'px';

    makeDraggable(youCircle);
    makeDraggable(rtCircle);
    makeDraggable(mcCircle);

    updateData();
}

window.addEventListener('load', initPositions);
</script>

{{ endblock }}

{{ block styles }}
<style>
#ios-container {
    position: relative;
    width: 100%;
    max-width: 620px;
    height: 280px;
    margin: 20px auto 0 auto;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    background-color: #f0f4f8;
    overflow: hidden;
}

.ios-circle {
    position: absolute;
    width:  130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.3;
    color: white;
    user-select: none;
    -webkit-user-select: none;
}

#circle-you {
    background-color: rgba(49, 130, 189, 0.75);
    cursor: grab;
    z-index: 3;
    border: 3px solid rgba(49, 130, 189, 0.95);
}

#circle-rt {
    background-color: rgba(56, 161, 105, 0.70);
    cursor: grab;
    z-index: 1;
    border: 3px solid rgba(56, 161, 105, 0.95);
}

#circle-mc {
    background-color: rgba(210, 90, 60, 0.70);
    cursor: grab;
    z-index: 1;
    border: 3px solid rgba(210, 90, 60, 0.95);
}

.circle-label {
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.instruction-text {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 5px;
}

.likert-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 15px 0 5px 0;
    flex-wrap: wrap;
}

.likert-endpoint {
    font-size: 13px;
    font-weight: bold;
    color: #555;
    text-align: center;
    line-height: 1.4;
    min-width: 70px;
}

.likert-endpoint-label {
    font-weight: normal;
    font-size: 12px;
    color: #777;
}

.likert-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.likert-label { cursor: pointer; margin: 0; }

.likert-radio { display: none; }

.likert-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #008CBA;
    background-color: white;
    color: #008CBA;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.likert-radio:checked + .likert-button {
    background-color: #008CBA;
    color: white;
}

.likert-label:hover .likert-button { background-color: #e0f2fa; }

.next-button {
    background-color: white;
    color: black;
    border: 2px solid #008CBA;
    font-size: 16px;
    padding: 10px 24px;
    cursor: pointer;
    border-radius: 12px;
}

.next-button:hover  { background-color: #008CBA; color: white; }
.next-button:active { background-color: #005f8b; color: white; border: 2px solid #005f8b; }

.card {
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 12px;
}

.card-header {
    background-color: #4a90e2;
    color: white;
    padding: 0.6rem 1rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
    text-align: center;
}

.card-body {
    padding: 1rem;
    background-color: white;
}

@media (max-width: 480px) {
    #ios-container { height: 240px; }
    .likert-button { width: 32px; height: 32px; font-size: 13px; }
    .likert-endpoint { min-width: 55px; font-size: 12px; }
}
</style>
{{ endblock }}