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

{% block styles %}
<style>

</style>
{% endblock %}

{% block scripts %}
    <script src="{% static 'js/button.js' %}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

{% endblock %}


{% block title %}
    Carbon Footprint Calculator
{% endblock %}


{% block content %}
{% if form.electricity_kwh.errors  %}
<div class="alert alert-danger" role="alert">
    <p>Please enter the kWh amount used for electricity in your household </p>
</div>
{% endif %}



<div class="alert" style="margin-bottom: 18pt">
    <div class="progress" style="margin-bottom: 12pt">
            <div class="progress-bar" role="progressbar" style="width: 0.1%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
     </div>
    <p>
        With your answers below, we will determine your carbon footprint. At the end of the calculator, you will also receive
        feedback on how your footprint compares to the average in the UK. Therefore, please try to answer as precisely as possible, to the
        best of your knowledge.
    </p>
</div>


<div class="alert alert-warning" style="width:80%; margin-right: auto; margin-left: auto;">
    <p>
        On this page, we ask you for household-level information regarding your energy-consumption.
        To calculate your individual carbon footprint, we then divide the respective emissions by the number of individuals in your household.
    </p>
</div>



<div class="container">
    <table class="table table-striped" style="width:80%; margin-right: auto; margin-left: auto;">
        <thead>
            <tr>
                <th style="text-align: center"> Energy </th>
            </tr>
        </thead>
            <tbody>

                <!-- HOUSEHOLD MEMBERS QUESTION -->
                <div>
                    <tr>
                        <td>{{ form.hh_members.label }} </td>
                    </tr>
                    <tr>
                        <td> <input id="hh_members" class="form-control" type="number" required="" min="1" max="10" step="0.1" name="hh_members"></td>
                    </tr>
                </div>


                <!-- ELECTRICITY QUESTION -->
                <div>
                    <tr>
                        <td>{{ form.electricity_kwh.label }}</td>
                    </tr>
                    <tr>
                        <td>
                            <ul>
                                <li>
                                    <label for="electricity_kwh_1"><input type="radio" name="electricity_kwh" value="3000" required="" id="electricity_kwh_1" class="form-check-input" onClick="show_hide_elec(1);calculate_elec();">
                                    Small house / flat (3000 kWh)</label>
                                </li>
                                <li>
                                    <label for="electricity_kwh_2"><input type="radio" name="electricity_kwh" value="4800" required="" id="electricity_kwh_2" class="form-check-input" onClick="show_hide_elec(2);calculate_elec();" >
                                    Medium (4800 kWh)</label>
                                </li>
                                <li>
                                    <label for="electricity_kwh_3"><input type="radio" name="electricity_kwh" value="7000" required="" id="electricity_kwh_3" class="form-check-input" onClick="show_hide_elec(3);calculate_elec();">
                                    Large house (7000 kWh)</label>
                                </li>
                                <li>
                                    <label for="electricity_kwh_4"><input type="radio" name="electricity_kwh" value="2000" required="" id="electricity_kwh_4" class="form-check-input" onClick="show_hide_elec(4);calculate_elec();">
                                    Hall of residence (2000 kWh)</label>
                                </li>
                                <li>
                                    <label for="electricity_kwh_5"><input type="radio" name="electricity_kwh" value="-99" required="" id="electricity_kwh_5" class="form-check-input" onClick="show_hide_elec(5);">
                                    Enter actual amount used from your bills from the past 12 months (in kWh):</label>
                                </li>

                                <div id ="elec" style="display:none">
                                    <input id="kWh_field" class="form-control" type="number" name="kWh_field" min="100" max="15000" oninput="calculate_elec();">
                                </div>


                                <br>

                                <div>
                                    {% formfield 'green_electricity' %}
                                </div>
                            </ul>
                        </td>
                    </tr>
                </div>


                <!-- GAS QUESTION -->
                <div>
                    <tr>
                        <td>{{ form.gas_kwh.label }}</td>
                    </tr>
                    <tr>
                        <td>
                            <ul>
                                <li>
                                    <label for="id_gas_kwh_1"><input type="radio" name="gas_kwh" value="12000" required="" id="id_gas_kwh_1" class="form-check-input" onClick="show_hide_gas(1);calculate_gas();">
                                     Small house / flat (12000 kWh)</label>
                                </li>
                                <li>
                                    <label for="id_gas_kwh_2"><input type="radio" name="gas_kwh" value="18000" required="" id="id_gas_kwh_2" class="form-check-input" onClick="show_hide_gas(2);calculate_gas();" >
                                     Medium (18000 kWh)</label>
                                </li>
                                <li>
                                    <label for="id_gas_kwh_3"><input type="radio" name="gas_kwh" value="27000" required="" id="id_gas_kwh_3" class="form-check-input" onClick="show_hide_gas(3);calculate_gas();">
                                     Large house (27000 kWh)</label>
                                </li>
                                <li>
                                    <label for="id_gas_kwh_4"><input type="radio" name="gas_kwh" value="5000" required="" id="id_gas_kwh_4" class="form-check-input" onClick="show_hide_gas(4);calculate_gas();">
                                     Hall of residence (5000 kWh)</label>
                                </li>

                                <li>
                                    <label for="id_gas_kwh_5"><input type="radio" name="gas_kwh" value="-99" required="" id="id_gas_kwh_5" class="form-check-input" onClick="show_hide_gas(5);">
                                     Enter actual kWh used:</label>
                                </li>

                                <div id ="gas" style="display:none">
                                    <input id="gas_kWh_field" class="form-control" type="number" name="gas_kWh_field" min="1000" max="50000" oninput="calculate_gas();">
                                    {{ form.gas_kwh.errors }}
                                </div>
                            </ul>
                        </td>
                    </tr>
                </div>


                <!-- HEATING QUESTION -->
                <div>
                    <tr>
                        <td>{{ form.fossil_fuels.label }}</td>
                    </tr>
                    <tr>
                        <td>
                            <ul>
                                <li>
                                    <label for="id_fossil_fuels_0"><input type="radio" name="fossil_fuels" value="False" required="" id="id_fossil_fuels_0" class="form-check-input" onClick="show_hide_oil(1);calculate_fossilfuels()">
                                     No</label>
                                </li>
                                <li>
                                    <label for="id_fossil_fuels_1"><input type="radio" name="fossil_fuels" value="True" required="" id="id_fossil_fuels_1" class="form-check-input" onClick="show_hide_oil(2);calculate_fossilfuels()">
                                     Yes</label>
                                </li>

                                <div id="fossilfuel" style="display:none">
                                    <p>
                                        For each of the following energy sources you used, please enter your use over the last year.
                                        If you did not use an energy source, please enter 0 (zero).
                                    </p>
                                    <table class="table table-light">
                                        <tr style="background-color: white">
                                            <td>{{ form.fossil_fuels_oil.label }}</td>
                                            <td> <input id="fossil_fuels_oil" class="form-control" type="number" min="0" max="2000" name="fossil_fuels_oil"> </td>
                                        </tr>
                                        <tr style="background-color: white">
                                            <td>{{ form.fossil_fuels_coal.label }}</td>
                                            <td><input id="fossil_fuels_coal" class="form-control" type="number" min="0" max="2000" name="fossil_fuels_coal"> </td>
                                        </tr>
                                        <tr style="background-color: white">
                                            <td>{{ form.fossil_fuels_wood.label }}</td>
                                            <td><input id="fossil_fuels_wood" class="form-control" type="number" min="0" max="60000" name="fossil_fuels_wood"> </td>
                                        </tr>
                                        <tr style="background-color: white">
                                            <td>{{ form.fossil_fuels_gas.label }}</td>
                                            <td><input id="fossil_fuels_gas" class="form-control" type="number" min="0" max="1500" name="fossil_fuels_gas"> </td>
                                        </tr>
                                    </table>
                                </div>
                            </ul>
                        </td>
                    </tr>
                </div>

            </tbody>
          </table>
        </div>


        <div style="margin-top: 12pt; text-align: right;">
            <button  class="btn btn-primary btn-large" onclick="validate_energy()">Next</button>
        </div>

{% endblock %}