{% extends 'global/Page.html' %}
{% load otree static %}

{% block scripts %}




<!-- New JavaScript for Slider Interaction and Next Button Control -->
<script>
    document.addEventListener("DOMContentLoaded", function() {


        // Initialize Sliders with dynamic color (unchanged)
        updateSliderValue(document.getElementById('slider_self').value, 'self');
        updateSliderValue(document.getElementById('slider_other').value, 'other');

        // Track slider interactions and control Next button
        let selfSliderInteracted = false;
        let otherSliderInteracted = false;
        const nextButton = document.querySelector('.otree-btn-next');

        // Disable Next button by default
        nextButton.disabled = true;

        // Function to update Next button state
        function updateNextButtonState() {
            nextButton.disabled = !(selfSliderInteracted && otherSliderInteracted);
        }

        // Add event listeners to sliders to track interaction
        document.getElementById('slider_self').addEventListener('input', function() {
            if (!selfSliderInteracted) {
                selfSliderInteracted = true;
                updateNextButtonState();
            }
            updateSliderValue(this.value, 'self');
        });

        document.getElementById('slider_other').addEventListener('input', function() {
            if (!otherSliderInteracted) {
                otherSliderInteracted = true;
                updateNextButtonState();
            }
            updateSliderValue(this.value, 'other');
        });
    });

    function updateSliderValue(value, type) {
        const sliderValueParagraph = document.getElementById(`slider-value-${type}`);
        if (value == 51) {
            sliderValueParagraph.textContent = "A report will not be made.";
        } else {
            sliderValueParagraph.innerHTML = `If your manager took a minimum of <span id="slider-display-${type}" class="boxed-number">${value}</span> percent from ${type == 'self' ? 'you' : 'another worker'}, a report will be made.`;
        }

        const slider = document.getElementById(`slider_${type}`);
        const percentage = ((value - slider.min) / (slider.max - slider.min)) * 100;
        slider.style.background = `linear-gradient(to right, red ${percentage}%, green ${percentage}%)`;
    }
</script>
{% endblock %}

{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
    <div>
        <p>Your role is: <strong>{{ player.get_role }}</strong></p>
    </div>
    <div style="text-align: center;">
        <h1 style="font-weight: bold; font-size: 20px;">Decision Task</h1>
    </div>
    <div style="text-align: right;">
        <p>Round: {{ player.round_number }} of {{ C.NUM_ROUNDS }}</p>
    </div>
</div>
<p>You earned <strong>{{ points_earned }}</strong> points in the addition task.</p>

<p>The manager in your group was given an opportunity to take from a randomly selected worker from one of the three groups. They also had the opportunity to make a transfer to the authority in your group.
If your manager chose to take from a worker, you can report them.
</p>
<p> If a transfer is not accepted, your report will be successful with {{ penalty_percentage }}% chance.
If a transfer is accepted, your report will be successful with {{ treatment_percentage }}% chance.</p>

<ul>
    <li>If your report is successful, you will gain 100 ECUs, and your manager will lose his earnings from the addition task for that round and what he took from the worker.</li>
    <li>If your report is unsuccessful, you will lose {{ worker_report_penalty }} ECUs, and the manager will keep his earnings.</li>
    <li>Since you don't know who the randomly selected worker is, you will select a minimum percentage to report for both yourself and another worker.</li>
</ul>

<p>Please interact with the sliders to make your choices. You must interact with both sliders to move on.</p>

<!-- Slider for Minimum Report Percentage for Self -->
<div class="slider-container">
    <input type="range" id="slider_self" name="min_report_percentage_self" min="1" max="51" step="1" value="{{ random_start_self }}" oninput="updateSliderValue(this.value, 'self')" class="unactivated">
    <div class="slider-ticks">
        {% for tick in [1, 5, 10, 15, 20, 25, 30, 35, 40, 45] %}
            <div class="tick">
                <span class="tick-value">{{ tick }}</span>
                <span class="tick-mark"></span>
            </div>
        {% endfor %}
        <div class="tick">
            <span class="tick-value">None</span>
            <span class="tick-mark"></span>
        </div>
    </div>
</div>

<p id="slider-value-self">
    {% if random_start_self == 51 %}
        A report will not be made.
    {% else %}
        If your manager took a minimum of <span id="slider-display-self" class="boxed-number">{{ random_start_self }}</span> percent from you, a report will be made.
    {% endif %}
</p>

<br>

<!-- Slider for Minimum Report Percentage for Other Worker -->
<div class="slider-container">
    <input type="range" id="slider_other" name="min_report_percentage_other_worker" min="1" max="51" step="1" value="{{ random_start_other }}" oninput="updateSliderValue(this.value, 'other')" class="unactivated">
    <div class="slider-ticks">
        {% for tick in [1, 5, 10, 15, 20, 25, 30, 35, 40, 45] %}
            <div class="tick">
                <span class="tick-value">{{ tick }}</span>
                <span class="tick-mark"></span>
            </div>
        {% endfor %}
        <div class="tick">
            <span class="tick-value">None</span>
            <span class="tick-mark"></span>
        </div>
    </div>
</div>

<p id="slider-value-other">
    {% if random_start_other == 51 %}
        A report will not be made.
    {% else %}
        If your manager took a minimum of <span id="slider-display-other" class="boxed-number">{{ random_start_other }}</span> percent from another worker, a report will be made.
    {% endif %}
</p>

<div style="text-align: right;">
    {{ next_button }}
</div>

<!-- Styling for Sliders and Timer (unchanged) -->
<style>
    .slider-container {
        position: relative;
        margin-top: 20px;
    }

    input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 8px;
        border-radius: 5px;
        outline: none;
        background: linear-gradient(to right, red 0%, green 100%);
    }

    .slider-ticks {
        display: flex;
        justify-content: space-between;
        position: absolute;
        width: 100%;
        top: -20px;
    }

    .tick {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .tick-mark {
        width: 2px;
        height: 10px;
        background-color: black;
        margin-bottom: 2px;
    }

    .tick-value {
        font-size: 12px;
        color: #333;
    }

    .boxed-number {
        display: inline-block;
        padding: 5px;
        border: 1px solid #333;
        border-radius: 5px;
        background-color: #f5f5f5;
        font-weight: bold;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: white;
        border: 1px solid black;
        cursor: pointer;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    }

    input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: white;
        border: 1px solid black;
        cursor: pointer;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    }

    .otree-btn-next:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }


    .otree-timer {
        background-color: transparent !important;
        color: black !important;
        font-weight: normal;
        border: none;
        padding: 0;
        text-align: right;
    }
</style>
{% endblock %}