{% extends "global/Page.html" %}

{% block title %}Preference Ranking{% endblock %}

{% block content %}
<style>
    .container { margin: 0 auto; padding: 2rem; max-width: 720px; text-align: center; }
    .question { font-size: 14pt; margin-top: 1.5rem; }
    .ranking-wrap { display: inline-block; margin: 1.5rem auto 0; }
    .ranking-row {
        display: grid;
        grid-template-columns: 70px 360px;
        gap: 12px; align-items: center; margin: 6px 0;
    }
    .endpoint-label {
        text-align: right; font-weight: bold; color: purple;
        font-size: 12pt; white-space: nowrap;
    }
    .endpoint-label.empty { visibility: hidden; }
    .option-card {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 14px; background: #f9f9f9;
        border: 1px solid #bbb; border-radius: 6px;
        font-size: 13pt; text-align: left; cursor: grab;
        user-select: none; transition: box-shadow 0.15s, background 0.15s;
    }
    .option-card:hover { background: #f2f2f2; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
    .option-card.dragging { opacity: 0.5; cursor: grabbing; }
    .option-card.drop-target { border-color: #2a5e9a; background: #e8f0fb; }
    .drag-handle { color: #999; font-size: 16pt; line-height: 1; cursor: grab; user-select: none; }
    .option-text { flex: 1; }
    .confirm-row { margin-top: 1.5rem; font-size: 12pt; }
    .confirm-row label { cursor: pointer; }
    .confirm-row input { transform: scale(1.2); margin-right: 6px; vertical-align: middle; }
</style>

<div class="container">

    <div class="question">
        Please rank the options below from best (top) to worst (bottom),<br>
        based on your own, personal preference.<br>
        Ties are not allowed.
    </div>

    <div class="ranking-wrap">
        <div id="ranking-host"></div>
    </div>

    <div class="question">
        For payment: we'll randomly pick two options and give you the one you ranked higher.
    </div>
    <div style="margin-top: 0.6rem;">
        (<b>Important:</b> Because any two options could be chosen, the way to get what you
        really prefer (among the two things chosen) is to rank the <i>entire</i> list truthfully.)
    </div>

    <!-- Hidden field populated by JS before submit -->
    <input type="hidden" id="ranking_hidden" name="ranking" value="">

    <!-- Confirmation checkbox (name="confirmed" → player.confirmed) -->
    <div class="confirm-row">
        <label>
            <input type="checkbox" id="confirm_order" name="confirmed">
            I confirm that the entire list above is ordered from most-preferred to least-preferred.
        </label>
    </div>
    {% formfield_errors 'ranking' %}
    {% formfield_errors 'confirmed' %}

    <div style="margin-top: 1.5rem;">{% next_button %}</div>

</div>

<script>
    var OPTIONS                 = js_vars.OPTIONS;
    var RANDOMIZE_INITIAL_ORDER = js_vars.RANDOMIZE_INITIAL_ORDER;

    function escapeHtml(s) {
        return String(s)
            .replace(/&/g, '&amp;').replace(/</g, '&lt;')
            .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
    }

    function shuffle(arr) {
        for (var i = arr.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var t = arr[i]; arr[i] = arr[j]; arr[j] = t;
        }
        return arr;
    }

    function buildRanking() {
        var host  = document.getElementById('ranking-host');
        var items = OPTIONS.slice();
        if (RANDOMIZE_INITIAL_ORDER) shuffle(items);
        host.innerHTML = '';
        items.forEach(function (text, idx) {
            var row   = document.createElement('div');
            row.className = 'ranking-row';
            var label = document.createElement('div');
            label.className = 'endpoint-label empty';
            row.appendChild(label);
            var card  = document.createElement('div');
            card.className = 'option-card';
            card.draggable = true;
            card.dataset.optionText = text;
            card.innerHTML =
                '<span class="drag-handle" aria-hidden="true">&#9776;</span>' +
                '<span class="option-text">' + escapeHtml(text) + '</span>';
            row.appendChild(card);
            host.appendChild(row);
        });
        attachDragHandlers();
        refreshEndpointLabels();
    }

    function refreshEndpointLabels() {
        var rows = document.querySelectorAll('#ranking-host .ranking-row');
        rows.forEach(function (row, i) {
            var label = row.querySelector('.endpoint-label');
            label.classList.add('empty');
            label.textContent = '';
            if (i === 0) { label.classList.remove('empty'); label.textContent = 'Best →'; }
            else if (i === rows.length - 1) { label.classList.remove('empty'); label.textContent = 'Worst →'; }
        });
    }

    function getCurrentOrdering() {
        var cards = document.querySelectorAll('#ranking-host .option-card');
        var order = [];
        cards.forEach(function (card) { order.push(card.dataset.optionText); });
        return order;
    }

    var dragSrc = null;

    function attachDragHandlers() {
        document.querySelectorAll('#ranking-host .option-card').forEach(function (card) {
            card.addEventListener('dragstart', onDragStart);
            card.addEventListener('dragend',   onDragEnd);
            card.addEventListener('dragover',  onDragOver);
            card.addEventListener('dragleave', onDragLeave);
            card.addEventListener('drop',      onDrop);
        });
    }

    function onDragStart(e) {
        dragSrc = this; this.classList.add('dragging');
        if (e.dataTransfer) {
            e.dataTransfer.effectAllowed = 'move';
            try { e.dataTransfer.setData('text/plain', ''); } catch (err) {}
        }
    }
    function onDragEnd() {
        this.classList.remove('dragging');
        document.querySelectorAll('.option-card.drop-target').forEach(function (el) { el.classList.remove('drop-target'); });
        dragSrc = null;
    }
    function onDragOver(e) {
        if (e.preventDefault) e.preventDefault();
        if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
        if (this !== dragSrc) this.classList.add('drop-target');
        return false;
    }
    function onDragLeave() { this.classList.remove('drop-target'); }
    function onDrop(e) {
        if (e.stopPropagation) e.stopPropagation();
        if (!dragSrc || dragSrc === this) return false;
        var srcRow    = dragSrc.parentNode;
        var targetRow = this.parentNode;
        var host      = srcRow.parentNode;
        var allRows   = Array.prototype.slice.call(host.children);
        var srcIdx    = allRows.indexOf(srcRow);
        var targetIdx = allRows.indexOf(targetRow);
        if (srcIdx > targetIdx) host.insertBefore(srcRow, targetRow);
        else host.insertBefore(srcRow, targetRow.nextSibling);
        this.classList.remove('drop-target');
        refreshEndpointLabels();
        document.getElementById('confirm_order').checked = false;
        return false;
    }

    // Populate hidden ranking field before form submits
    document.addEventListener('DOMContentLoaded', function () {
        buildRanking();
        document.querySelector('.otree-form').addEventListener('submit', function () {
            document.getElementById('ranking_hidden').value = JSON.stringify(getCurrentOrdering());
        });
    });
</script>
{% endblock %}