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

{% block title %}
    Audit Prediction Task
{% endblock %}

{% block content %}

    <div class="card bg-light m-3">
        <div class="card-body">
            <p>
                What do you believe is the <strong>probability (0-100%)</strong> that you will be selected 
                for an audit by the regulator in this round?
            </p>

            <div class="mb-4 mt-4">
                <label for="beliefSlider" class="form-label">Move the slider to indicate your belief:</label>
                <input type="range" class="form-range" name="belief" min="0" max="100" step="1" 
                       id="beliefSlider" oninput="updateProbability(this.value)">
                
                <div class="d-flex justify-content-between">
                    <span>0% (Impossible)</span>
                    <span>50%</span>
                    <span>100% (Certain)</span>
                </div>
            </div>

            <div class="alert alert-primary text-center">
                <strong>Your Prediction:</strong> <span id="beliefValue">50</span>%<br>
            </div>
            

        </div>
    </div>

    <div class="d-flex justify-content-between align-items-center">
    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleTech()">
    Show/Hide Technical Payment Info
    </button>
        {% next_button %}
    </div>

    <div id="tech-explanation" class="mt-3 p-3 border rounded bg-white" style="display:none;">
        <h5>How your payment is calculated:</h5>
        <p>
            We use a <strong>Binarized Scoring Rule</strong>. Your prediction is used to calculate an "error score." 
            The computer then draws a random number between 0 and 1. 
            If your error score is <em>less</em> than that random number, you win the prize.
        </p>
        <p>
            <strong>Mathematically:</strong> This mechanism is "incentive compatible." This means that your 
            expected earnings are highest when you report your <strong>true subjective belief</strong>. 
            There is no way to "game" the system; being honest is your best strategy.
        </p>
    </div>

    <script>
        // Initial call to set starting values
        window.onload = function() {
            updateProbability(document.getElementById('beliefSlider').value);
        };

        function updateProbability(val) {
            // Update the text display for the slider value
            document.getElementById("beliefValue").innerText = val;
            
            // Calculate Quadratic Loss Logic: 1 - (1 - r)^2
            // We assume theta = 1 (audit happens) for the display
            let r = val / 100;
            let winProb = (1 - Math.pow(1 - r, 2)) * 100;
            
            // Display win probability rounded to 1 decimal place
            document.getElementById("winProb").innerText = winProb.toFixed(1);
        }

        function toggleTech() {
            let x = document.getElementById("tech-explanation");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>

{% endblock %}