{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}
{% block content %}

<style>
.mgslider-wrapper {
    border-spacing: 10px;
}
.mgslider-limit {
    width: 10%;
    min-width: 75px;
    height: 40px;
    margin: 100px;
    text-align: center;
    background: #eee;
    border: 1px solid #888;
}
.mgslider-limit, .mgslider-value {
    font-variant-numeric: tabular-nums;
}
.mgslider-before {
    height: 16px;
    width: 100%;
    background: #1e5bff;
}
.mgslider-feedback {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.mgslider {
    display: block;
    width: 100%;
}
.more-info-btn {
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #007BFF;
    color: #FFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.bar-section-wrapper {
    border: 1px solid #ddd;
    padding: 20px;
    background-color: #f9f9f9;
    margin: 20px 0;
}
</style>

<h1> F </h1>

<br>
<p><b>
    Click the blue bars to reveal the sliders.
</b></p>

<div id="slider1_here"></div>

<br>

<div id="slider2_here"></div>


<form id="inputForm" method="post">
    {{ form.clicked }}
    {{ form.event1 }}
    {{ form.event2 }}

    <!-- Hidden input to handle estimated event1 and event2 likelihoods -->
    <input type="hidden" name="event1" id="event1">
    <input type="hidden" name="event2" id="event2">

    <!-- Hidden input to handle clicked status -->
    <input type="hidden" name="clicked" id="clicked">
</form>

<button class="" id="FAbutton" type="button">Go to Page FA</button>
<button class="" id="FBbutton" type="button">Go to Page FB</button>

<script src="{% static 'mgslider.js' %}"></script>

<script>
    $(document).ready(function () {
        var slider1 = new mgslider("event1", 0, 100, 0.1, "Likelihood of event 1 occuring");
        slider1.print(document.getElementById("slider1_here"));

        var slider2 = new mgslider("event2", 0, 100, 0.1, "Likelihood of event 2 occuring");
        slider2.print(document.getElementById("slider2_here"));

        function checkSliders() {
            console.log("Slider 1 revealed: " + slider1.isRevealed);
            console.log("Slider 2 revealed: " + slider2.isRevealed);
            var bothRevealed = slider1.isRevealed && slider2.isRevealed;
            console.log("Both sliders revealed: " + bothRevealed);
            $('#signUpButton').prop('disabled', !bothRevealed);
            $('#doNotSignUpButton').prop('disabled', !bothRevealed);
        }

        // Initialize the button state
        checkSliders();

        // Listen for the custom event
        document.addEventListener('sliderRevealed', function() {
            console.log("Slider revealed event triggered");
            checkSliders();
        });

        // Handle button clicks
        $('#FAbutton').click(function() {
            console.log("Button A clicked");
            $('#event1').val(slider1.value);
            $('#event2').val(slider2.value);
            $('#clicked').val(1);
            $('#inputForm').submit();
        });

        $('#FBbutton').click(function() {
            console.log("Button B clicked");
            $('#event1').val(slider1.value);
            $('#event2').val(slider2.value);
            $('#clicked').val(0);
            $('#inputForm').submit();
        });
    });
</script>

{% endblock %}