{{ block title }}
    <h4><b>
        <center>Advice Sharing with the Other Manager</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="math"] {
        border-left: 4px solid #007bff;
    }
    .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.math { background: #007bff; }
    .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="math"] {
        border-left: 4px solid #007bff;
    }
    .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; }
    .legend { margin-bottom: 12px; font-size: 13px; }
    .legend span { margin-right: 16px; }
</style>

<p>
    Recall that managers were promoted for the following reasons:
</p>
<table class="table table-bordered">
    <thead style="text-align: center">
        <tr>
            <th>Promoted Employee IDs</th>
            <th>Reason for Promotion</th>
        </tr>
    </thead>
    <tbody style="text-align: center">
        {{ for row in promotion_table }}
        <tr>
            <td>
                {{ if row.is_you }}
                    ID# 00{{ row.promoted_gid }} (YOU)
                {{ else }}
                    ID# 00{{ row.promoted_gid }}
                {{ endif }}
            </td>
            <td>{{ row.reason }}</td>
        </tr>
        {{ endfor }}
    </tbody>
</table>

<p>
    Select which pieces of advice (if any) you would like to share with the manager of the other 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
    the other manager only accepts some of the advice. You may share up to 4 items total across both categories.
</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. After providing and/or receiving any advice between managers, you will be able to share advice
    with the employees in your group.
</p>

<div class="legend">
    <span><span style="display:inline-block;width:14px;height:14px;background:#007bff;border-radius:2px;vertical-align:middle;margin-right:4px;"></span> Math Task</span>
    <span><span style="display:inline-block;width:14px;height:14px;background:#ff8c00;border-radius:2px;vertical-align:middle;margin-right:4px;"></span> Word Creation Task</span>
</div>

<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="combined-share" class="share-zone"></div>

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

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

<!-- Hidden fields for form submission -->
<input type="hidden" name="sharing_m2m_math" id="id_sharing_m2m_math">
<input type="hidden" name="sharing_m2m_verbal" id="id_sharing_m2m_verbal">
<input type="hidden" name="sharing_m2m_combined_order" id="id_sharing_m2m_combined_order">

<!-- 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('combined-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('combined-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);
        });

        // Remove badges from items in available zones
        ['math-available', 'verbal-available'].forEach(zoneId => {
            document.getElementById(zoneId).querySelectorAll('.rank-badge').forEach(b => b.remove());
        });

        // Update hidden fields — separate math and verbal IDs preserving share-zone order
        let allIds = Array.from(sharedItems).map(el => el.dataset.id);
        let mathIds = allIds.filter(id => id.startsWith('m'));
        let verbalIds = allIds.filter(id => id.startsWith('v'));

        document.getElementById('id_sharing_m2m_math').value = mathIds.join(",");
        document.getElementById('id_sharing_m2m_verbal').value = verbalIds.join(",");
        document.getElementById('id_sharing_m2m_combined_order').value = allIds.join(",");
    }

    // Combined share zone config
    const shareConfig = {
        group: '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,
    };

    // Available zones config — both use the same group so items can move freely
    const availableConfig = {
        group: 'advice',
        animation: 150,
        onSort: updateDisplay,
        onAdd: updateDisplay,
        onRemove: updateDisplay,
    };

    new Sortable(document.getElementById('combined-share'), shareConfig);
    new Sortable(document.getElementById('math-available'), availableConfig);
    new Sortable(document.getElementById('verbal-available'), availableConfig);

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