{{ block styles }}
<link rel="stylesheet" href="{{ static 'global/experiment.css' }}">
<style>
.hover-image .hover-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 12px;
    font-size: 0.8rem;
    line-height: 1.4;
    opacity: 1;
    z-index: 10;
}
.hover-image:hover .hover-caption {
    opacity: 1 !important;
}
</style>
{{ endblock }}

{{ block content }}
<div class="platform-shell">
    <section class="panel hero-panel">
        <div class="eyebrow">Bonus Allocation</div>
        <div class="title-row">
            <div>
                <h1 class="page-heading">Allocate Your {{ bonus_endowment }} Bonus</h1>
                <p class="lead" style="line-height:1.2;">
                    Decide how much to donate to each organization.
                    Your total donations cannot exceed $3.00.
                    The amounts that you allocate, out of the $3 bonus, will be donated on your behalf to the humanitarian organizations that engage in the real-world initiatives shown. Any unallocated amount will be kept by you.
                </p>
            </div>
        </div>
    </section>

    <section class="panel" style="padding:16px 28px;">
        <p style="color:#52677d; font-size:0.95rem; margin:0; line-height:1.4;">
            The scores shown below reflect how highly you rated the overall capabilities of each organization based on its most recent social media post (out of 100). For example, a score of 80% means you rated that organization highly across most of the capabilities you were asked to evaluate, while a score of 20% means you rated it low.
        </p>
        <p style="color:#52677d; font-size:0.95rem; margin:12px 0 0; line-height:1.4;">
        Below are the 4 social media posts you reviewed. Hover over each image to see the caption describing the initiative.
    </p>
    </section>


    <section class="panel">
        <div style="display:flex; justify-content:flex-end; margin-bottom:12px;">
            <div class="summary-chip">
                <span>Remaining:&nbsp;</span>
                <strong id="remaining-amount">{{ bonus_endowment }}</strong>
            </div>
        </div>
        <div class="allocation-grid" style="grid-template-columns: 1fr 1fr; gap: 16px;">
            {{ for org in allocation_orgs }}
                <article class="allocation-card">
                    <div style="display:flex; align-items:center; justify-content:space-between; width:100%;">
                        <h2 style="margin:0; font-size:1.2rem;">{{ org.name }}</h2>
                        <div style="font-size:0.9rem; color:#52677d; display:flex; align-items:center; gap:8px; font-weight:700;">
                            Your Score:
                            <span style="background:#183d62; color:#fff; font-weight:700; font-size:1rem; padding:6px 12px; border-radius:8px;">
                                {{ org.score }}%
                            </span>
                        </div>
                    </div>
                    <div style="margin:12px 0; border-radius:8px; overflow:hidden; aspect-ratio:1/1; position:relative;" class="hover-image">
                        <img src="{{ static org.post_image }}" alt="{{ org.name }}" style="width:100%; height:100%; object-fit:cover; display:block; position:absolute; top:0; left:0;">
                        <div class="hover-caption" style="position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.75); color:#fff; padding:12px; font-size:0.8rem; line-height:1.4; opacity:0; transition:opacity 0.25s ease; z-index:10;">
                            <strong>{{ org.name }}</strong> {{ org.post_caption }} {{ org.hashtags }}
                        </div>
                    </div>
                    <div style="display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:10px;">
                        <span style="font-size:0.9rem; color:#52677d; font-weight:700; padding-top:7px; line-height:1;">Your Donation:</span>
                        <div class="currency-field" style="margin:0;">
                            {{ formfield org.field_name label='' }}
                        </div>
                    </div>
                </article>
            {{ endfor }}
        </div>
    </section>

    <section class="panel totals-panel">
        <div class="totals-row">
            <span>Total bonus</span>
            <strong>{{ bonus_endowment }}</strong>
        </div>
        <div class="totals-row">
            <span>Total donated</span>
            <strong id="donated-amount">$0.00</strong>
        </div>
        <div class="totals-row emphasis-row">
            <span>Amount you keep</span>
            <strong id="kept-amount">{{ bonus_endowment }}</strong>
        </div>
    </section>

    <div class="action-row">
        {{ next_button }}
    </div>
</div>
{{ endblock }}

{{ block scripts }}
<script>
    // Style hashtags blue
    document.querySelectorAll('.allocation-card p').forEach(function(el) {
        el.innerHTML = el.innerHTML.replace(/(#\w+)/g, '<span style="color: #1e90ff;">$1</span>');
    });

    const endowment = Number("{{ bonus_endowment }}".replace(/[^0-9.]/g, ''));
    const inputNames = ["donation_org_1", "donation_org_2", "donation_org_3", "donation_org_4"];

    function readAmount(name) {
        const input = document.querySelector('[name="' + name + '"]');
        const value = parseFloat(input.value);
        return Number.isFinite(value) ? value : 0;
    }

    function renderTotals() {
        var donated = 0;
        for (var i = 0; i < inputNames.length; i++) {
            donated += readAmount(inputNames[i]);
        }
        var kept = Math.max(endowment - donated, 0);
        document.getElementById('donated-amount').textContent = '$' + donated.toFixed(2);
        document.getElementById('kept-amount').textContent = '$' + kept.toFixed(2);
        document.getElementById('remaining-amount').textContent = '$' + kept.toFixed(2);

        if (donated > endowment) {
            document.getElementById('donated-amount').style.color = '#c41e1e';
            document.getElementById('remaining-amount').textContent = 'Over by $' + (donated - endowment).toFixed(2);
            document.getElementById('remaining-amount').style.color = '#c41e1e';
        } else {
            document.getElementById('donated-amount').style.color = '';
            document.getElementById('remaining-amount').style.color = '';
        }
    }

    inputNames.forEach(function(name) {
        var input = document.querySelector('[name="' + name + '"]');
        if (input) input.addEventListener('input', renderTotals);
    });

    renderTotals();

    // Move $ sign to the left of input
    document.querySelectorAll('.currency-field .input-group').forEach(function(group) {
        var addon = group.querySelector('.input-group-text');
        var input = group.querySelector('.form-control');
        if (addon && input) {
            group.insertBefore(addon, input);
        }
    });

    // Style hashtags blue in hover captions
    document.querySelectorAll('.hover-caption').forEach(function(caption) {
        caption.innerHTML = caption.innerHTML.replace(/(#\w+)/g, '<span style="color: #90caf9;">$1</span>');
    });

</script>
{{ endblock }}