{% block title %}Attività di opinione{% endblock %}

{% block content %}
<style>
    body {
        font-size: 18px;  /* try 16–20px depending on preference */
    }
</style>
<p>
    <i>Immagini che Le venga chiesto di svolgere la seguente attività. La preghiamo di leggere attentamente le istruzioni, poiché Le porremo alcune domande su di esse.</i>
</p>
<button class="btn btn-primary" type="button" id="instructBtn">Istruzioni</button>

<div id="instructions" style="display: none; margin-top: 15px;">

<p>
    Vorremmo invitarLa a rispondere ad alcune domande sulla Sua esperienza professionale, ad esempio: "Quali competenze ha trovato più preziose nella Sua carriera?". 
    Alcune informazioni chiave tratte dalle Sue risposte potranno essere condivise in forma anonima su <a href="https://www.scuoleapertemilano.it/-/parlami-di-scuola-al-via-una-ricerca-sulle-secondarie-di-i-grado" target="_blank" rel="noopener noreferrer">questo sito web</a> e saranno accessibili a tutti gli studenti interessati a conoscere meglio la Sua professione e il Suo percorso di carriera.<br>

    {{ player.text_seen }}
</p>

<button class="btn btn-primary" type="button" id="questionBtn">Domanda</button>

<div id="questionText" style="display: none; margin-top: 15px;">

<h5>Tra i seguenti soggetti, chi ritiene trarrà beneficio dalla condivisione delle Sue risposte?</h5>
<p>La preghiamo di ordinare i seguenti potenziali beneficiari da chi beneficia di più (1) a chi beneficia di meno (5):</p>

<form method="post">
    <!-- hidden input oTree will save -->
    <input type="hidden" name="ranked_beneficiaries" id="id_ranked_beneficiaries" />

    <div style="max-width:700px; margin:auto;">

        <!-- Ranking (vertical) -->
        <div>
            <p>In alto = chi beneficia di più</p>
            <div id="ranked-wrapper">
                <div class="slot" data-rank="1"><span class="placeholder">Rilascia qui</span></div>
                <div class="slot" data-rank="2"><span class="placeholder">Rilascia qui</span></div>
                <div class="slot" data-rank="3"><span class="placeholder">Rilascia qui</span></div>
                <div class="slot" data-rank="4"><span class="placeholder">Rilascia qui</span></div>
                <div class="slot" data-rank="5"><span class="placeholder">Rilascia qui</span></div>
            </div>
            <p>In basso = chi beneficia di meno</p>
        </div>

        <!-- Options (horizontal) -->
        <div style="margin-top:30px;">
            <h6>Potenziali beneficiari:</h6>
            <div id="pool" class="pool-horizontal">
                {% for id, label in items %}
                    <div class="item" data-id="{{ id }}">{{ label }}</div>
                {% endfor %}
            </div>
        </div>

    </div>
    <br>
        <div style="display:flex; justify-content:center;">
            <button class="btn btn-primary" id="submit-btn" type="submit">Avanti</button>
        </div>
</form>

</div>
</div>
    {% include "_templates/global/scripts.html" %}

    {% include "_templates/global/styles.html" %}

    <input type="hidden" name="fullscreen_popup_log" id="fullscreen_popup_log" value="{{ player.field_maybe_none('fullscreen_popup_log') }}">

<style>
.pool-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    background: #fafafa;
    border-radius: 6px;
    min-height: 80px;
}

.item {
    background: white;
    border: 1px solid #bbb;
    border-radius: 6px;
    padding: 10px;
    cursor: grab;
    width: 280px;        /* key for horizontal layout */
    text-align: center;
}

.slot {
    position: relative;
    border: 2px dashed #ccc;
    border-radius: 6px;
    min-height: 48px;
    padding: 8px 8px 8px 30px; /* space for number */
    margin-bottom: 10px;
    background: #fff;
}

.slot::before {
    content: attr(data-rank);
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    background: #d5e8eb;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.placeholder {
    color: #999;
    font-style: italic;
}
</style>

<!-- SortableJS CDN (works well for drag & drop and touch devices) -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>
    document.getElementById('questionBtn').addEventListener('click', function () {
        document.getElementById('questionText').style.display = 'block';
    });
    document.getElementById('instructBtn').addEventListener('click', function () {
        document.getElementById('instructions').style.display = 'block';
    });

document.addEventListener('DOMContentLoaded', function() {
    const pool = document.getElementById('pool');
    const slots = document.querySelectorAll('.slot');
    const hiddenInput = document.getElementById('id_ranked_beneficiaries');
    const form = document.querySelector('form');

    // Make both lists sortable and allow dragging from pool to ranked and back.
    Sortable.create(pool, {
        group: 'shared',
        animation: 150,
    });

    // each slot is its own sortable container
    slots.forEach(slot => {
        Sortable.create(slot, {
            group: 'shared',
            animation: 150,
            swapThreshold: 0.7,
            onAdd: function (evt) {
                // allow only one item per slot
                const items = slot.querySelectorAll('.item');
                if (items.length > 1) {
                    // move the previous one back to the pool
                    pool.appendChild(items[0]);
                }
                updatePlaceholders();
            },
            onRemove: function () {
                updatePlaceholders();
            }
        });
    });

    function updatePlaceholders() {
        slots.forEach(slot => {
            const item = slot.querySelector('.item');
            let placeholder = slot.querySelector('.placeholder');

            if (item && placeholder) {
                placeholder.remove();
            } else if (!item && !placeholder) {
                const rank = slot.dataset.rank;
                placeholder = document.createElement('span');
                placeholder.className = 'placeholder';
                placeholder.textContent = rank + '. Drop here';
                slot.appendChild(placeholder);
            }
        });
    }

    // on submit, validate that ranked contains all items and save as JSON ordered array of ids (top to bottom)
    form.addEventListener('submit', function (event) {
        const ordered = [];

        slots.forEach(slot => {
            const item = slot.querySelector('.item');
            if (item) {
                ordered.push(item.dataset.id);
            }
        });

        if (ordered.length !== 5) {
            event.preventDefault();
            alert('La preghiamo di inserire tutte e 5 le opzioni nella classifica prima di continuare.');
            return;
        }

        hiddenInput.value = JSON.stringify(ordered);
    });

    updatePlaceholders();
});
        document.addEventListener('DOMContentLoaded', function () {
            const isFullscreen =
                !!document.fullscreenElement ||
                (window.innerHeight >= screen.height - 5 &&
                window.innerWidth >= screen.width - 5);

                const field = document.getElementById('fullscreen_popup_log');

            // clean initial value
            if (field.value === 'None') {
                field.value = '';
            }
            if (!isFullscreen) {
                const field = document.getElementById('fullscreen_popup_log');
                const pageName = 'opinion';

                if (field.value.trim() === '') {
                    field.value = pageName;
                } else if (!field.value.split(',').includes(pageName)) {
                    field.value += ',' + pageName;
                }

                alert("Per favore usa la modalità schermo intero.");
            }
        });
</script>
{% endblock %}