{{ block title }}
    <h4><b>
        <center>Advice Sharing with Employees in your group</center>
    </b></h4>
{{ endblock }}
{{ block content }}
<style>
    .powered-by-otree {
        display: none !important;
    }
    .advice-pool .advice-item,
    .share-zone .advice-item,
    .available-zone .advice-item {
        padding: 8px 12px;
        margin: 4px 0;
        background: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: grab;
        display: flex;
        align-items: center;
    }
    .advice-item:active { cursor: grabbing; }
    .advice-item[data-category="verbal"] {
        border-left: 4px solid #ff8c00;
    }
    .category-label {
        font-size: 11px;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 3px;
        margin-right: 8px;
        color: white;
        flex-shrink: 0;
    }
    .category-label.verbal { background: #ff8c00; }
    .share-zone {
        min-height: 80px;
        border: 2px dashed #28a745;
        border-radius: 6px;
        padding: 8px;
        margin-bottom: 12px;
        background: #eaffea;
    }
    .share-zone .advice-item { background: #d4edda; border-color: #28a745; }
    .share-zone .advice-item[data-category="verbal"] {
        border-left: 4px solid #ff8c00;
    }
    .available-zone {
        min-height: 60px;
        border: 2px dashed #6c757d;
        border-radius: 6px;
        padding: 8px;
        margin-bottom: 12px;
        background: #f8f9fa;
    }
    .rank-badge {
        background: #28a745;
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        font-size: 12px;
        font-weight: bold;
        flex-shrink: 0;
    }
    .counter-warning { color: red; font-weight: bold; }
</style>

<p>
    Select which pieces of advice (if any) you would like to share with the employees in your group. Drag advice
    items into the green "Share" zone to share them with the other manager. Items at the top will be revealed first if
    employees only accept some of the advice. You may share up to 4 items.
</p>
<p>
    Recall, the first piece of advice is costless to share, the second costs $0.10, the third costs $0.15, and the
    fourth costs $0.25.
</p>

<p>Total sharing cost: <strong>$<span id="cost-display">0.00</span></strong>
   | Items selected: <span id="total-count">0</span>/4</p>

<!-- SINGLE COMBINED SHARE ZONE -->
<h5>Share Zone <small style="color:#666;">(drag here — order = priority rank)</small></h5>
<div id="m2e-share" class="share-zone"></div>

<!-- MATH AVAILABLE -->
<h5>Available Advice for the Word-Creation Task Performed by Employees in the Business Unit</h5>
<div id="verbal-available" class="available-zone">
    {{ for item in verbal_advice_items }}
    <div class="advice-item" data-id="{{ item.id }}" data-category="verbal">
        <span class="category-label verbal">Word-Creation</span>
        {{ item.text }}
    </div>
    {{ endfor }}
</div>

<!-- Hidden fields for form submission -->
<input type="hidden" name="sharing_m2e_verbal" id="id_sharing_m2e_verbal">

<!-- SortableJS CDN -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    const costSchedule = [0, 0.10, 0.15, 0.25];
    const maxTotal = 4;

    function getTotalShared() {
        return document.getElementById('m2e-share').children.length;
    }

    function updateDisplay() {
        let total = getTotalShared();

        // Calculate cost
        let cost = 0;
        for (let i = 0; i < total; i++) {
            cost += costSchedule[i];
        }
        document.getElementById('cost-display').innerText = cost.toFixed(2);

        // Update count display
        let countEl = document.getElementById('total-count');
        countEl.innerText = total;
        countEl.className = total > maxTotal ? 'counter-warning' : '';

        // Update rank badges in the single share zone
        let shareZone = document.getElementById('m2e-share');
        let sharedItems = shareZone.querySelectorAll('.advice-item');

        sharedItems.forEach((item, idx) => {
            // Remove any existing badge
            let existing = item.querySelector('.rank-badge');
            if (existing) existing.remove();

            // Add new rank badge
            let badge = document.createElement('span');
            badge.className = 'rank-badge';
            badge.innerText = idx + 1;
            item.insertBefore(badge, item.firstChild);
        });

        document.getElementById('verbal-available').querySelectorAll('.rank-badge').forEach(b => b.remove());

        // Update hidden fields — separate math and verbal IDs preserving share-zone order
        let verbalIds = Array.from(sharedItems).map(el => el.dataset.id);
        document.getElementById('id_sharing_m2e_verbal').value = verbalIds.join(",");
    }

    var shareZone = new Sortable(document.getElementById('m2e-share'), {
        group: 'm2e-advice',
        animation: 150,
        onAdd: function (evt) {
            if (getTotalShared() > maxTotal) {
                evt.from.appendChild(evt.item);
                alert("You can only share up to " + maxTotal + " items total.");
            }
            updateDisplay();
        },
        onSort: updateDisplay,
        onRemove: updateDisplay,
    });

    var availZone = new Sortable(document.getElementById('verbal-available'), {
        group: 'm2e-advice',
        animation: 150,
        onSort: updateDisplay,
        onAdd: updateDisplay,
        onRemove: updateDisplay,
    });

    new Sortable(document.getElementById('m2e-share'), shareZone);
    new Sortable(document.getElementById('verbal-available'), availZone);

    // Initial state
    updateDisplay();
</script>
{{ next_button }}
{{ endblock }}