{{ 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">
 {% 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 minute waiting period. 
<br><br>
 You will be paid for both completing the training and for your waiting time.
</div>
 {% endif %}
 Thanks for your time and participation in the experiment.
 In this final page, we'd like to ask some questions about your experience of the experiment. 
<br><br>
 Please answer <strong>all</strong> of the following questions. The Submit button will appear once every question has been answered.
<br><br>

<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>

 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>

<!-- 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">
                {% for val in "1234567" %}
                <label class="likert-label">
                    <input type="radio" name="group_cohesion" value="{{ val }}" class="likert-radio">
                    <span class="likert-button">{{ val }}</span>
                </label>
                {% endfor %}
            </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>

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

</form>

<script>
const CIRCLE_RADIUS = 65;

const container     = document.getElementById('ios-container');
const rtCircle      = document.getElementById('circle-rt');
const mcCircle      = document.getElementById('circle-mc');
const youCircle     = document.getElementById('circle-you');
const hiddenField   = document.getElementById('id_ios_coordinates');
const nextWrapper   = document.getElementById('next-wrapper');
const promptWrapper = document.getElementById('prompt-wrapper');

let hasMoved = false;

function checkAllAnswered() {
    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;

    if (t1 && t2 && t3 && cohesion && hasMoved) {
        nextWrapper.style.display   = 'block';
        promptWrapper.style.display = 'none';
    } else {
        nextWrapper.style.display = 'none';
        promptWrapper.style.display = hasMoved ? 'none' : 'block';
    }
}

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);
});

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() {
    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 Scale */
.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 }}