{{ block title }}Test Case {{ endblock }}
{{ block content }}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const inputElement = document.getElementById('data_1');
        const nextButton = document.getElementById('id_submit_button');
        const minLimit = 50; // Set your minimum limit here

        inputElement.addEventListener('input', function () {
            const inputValue = parseFloat(inputElement.value);

            if (isNaN(inputValue) || inputValue < minLimit) {
                nextButton.disabled = true;
                alert('Please enter a number greater than or equal to ' + minLimit);
            } else {
                nextButton.disabled = false;
            }
        });

        // Set the minimum attribute for additional validation
        inputElement.setAttribute('min', minLimit);
    });
</script>

<p>
    You have a chance to do a test run before the real experiment. 
    The map in this test case is different than what you will see 
    in the actual experiment, but this gives you an idea of the experiment.
</p>

<ul>
    <li>Your listing has 1 bedroom and 4.6 rating.</li>
    
    <li>The cost of cleaning and utilities
        for each day someone stays at your place is <strong><u>$50</u></strong>. 
        If you want to make a profit, your set price should be greater than this.</li> 
    <li>Please note that the price list you see below is just possible prices and are examples of what your price might look like. 
        You can select any price you like.</li>   
</ul>

<div style="display: flex;">
    <div style="margin-right: 20px;">
        <img src="https://priceselectionmodel-294dcf7a2bae.herokuapp.com/static/test_1.JPG" alt="neighbors' prices" style="width: 600px; height: auto;">
    </div>

    {% if player.instruction_version == 'b' %}
    


    <table class="table">
        
        <thead>
            <tr>
                
                <th>Price ($)</th>
                <th>Predicted Probability <br> of Booking</th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                    
                <td>30</td>
                
                <td>-</td>
            </tr>
            <tr>
                    
                <td>40</td>
                
                <td>-</td>
            </tr>
            <tr>
                    
                    <td>50</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>60</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>70</td>
                    
                    <td>-</td>
                </tr>  
                <tr>
                    
                    <td>80</td>
                    
                    <td>-</td>
                </tr>  
                <tr>
                    
                    <td>90, AI suggested</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>100</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>120</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>140</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>150</td>
                    
                    <td>-</td>
                </tr>           
        </tbody>
    </table>


{% endif %}


{% if player.instruction_version == 'c' %}
    


    <table class="table">
        
        <thead>
            <tr>
                
                <th>Prices</th>
                <th>Predicted Probability <br> of Booking</th>
                
            </tr>
        </thead>
        <tbody>
            {% for item in data %}
            {% if item.day == 'Mon' %}
            <tr>
                    
                    <td>{{ 100 }}</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>120</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>{{ 140 }}</td>
                    
                    <td>-</td>
                </tr>  
                <tr>
                    
                    <td>160, AI suggested </td>
                    
                    <td>{{item.probability1}}</td>
                </tr>  
                <tr>
                    
                    <td>180</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>200</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>220</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>240</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>260</td>
                    
                    <td>-</td>
                </tr>  
                <tr>
                    
                    <td>280</td>
                    
                    <td>-</td>
                </tr>
                <tr>
                    
                    <td>300</td>
                    
                    <td>-</td>
                </tr>         
            {% endif %}
            {% endfor %}
        </tbody>
    </table>
{% endif %}


{% if player.instruction_version == 'd' %}
Here is the AI's price prediction for your place. Remember, the AI is uncertain about your booking cost.

    <table class="table">
        <thead>
            <tr>
                <th>Day</th>
                <th>Algorithm Suggested Price Range</th>
                <th>Probability of Booking Range</th>
                <th>Select Price</th>
                
            </tr>
        </thead>
        <tbody>
            {% for item in data %}
            {% if item.day == 'Mon' %}
                <tr>
                     <td>{{ 120 }}</td>
                        <td>{{ 70 }}</td>
                        <td>"yes"</td>
                        <td>
                            <!-- Add radio buttons for selection -->
                            <input type="radio" name="selected_price" value=90>
                        </td>
                </tr>
            {% endif %}
            {%endfor%}
        </tbody>
    </table>
{% endif %}


{% if player.instruction_version == 'e' %}

Here is the AI's price prediction for your place. Remember, the AI is uncertain about your booking cost.


    <table class="table">
        <thead>
            <tr>
                <th>Day</th>
                <th>Algorithm Suggested Price Range</th>
                
            </tr>
        </thead>
        <tbody>
            {% for item in data %}
            {% if item.day == 'Mon' %}
                <tr>
                    <td>Mon Jan 22nd</td>
                    <td>{{ item.price_range1 }}</td>
                    
                </tr>
            {% endif %}
            {%endfor%}
        </tbody>
    </table>
{% endif %}

</div>


<p>Please enter your price in dollars $ amount</p>
<div class="container">
    <div class="form-group">
        <label for="data_test1">Test Day</label>
        <input type="number" id="data_test1" name="data_test1" required>
    </div>

    
</div>
<p></p>



{{ next_button }}

{{endblock}}