{% load thumbnail course_extras staticfiles %}
{% load static %}

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Correct. You have identified an issue.</h3>
</div>
<div class="modal-body">
    <h3>Hazard: {{ hotspot.title }}</h3>
    {% if hotspot.description %}<p>{{ hotspot.description }}</p>{% endif %}
    <div class="hazard-rating-wrap">
        <form id="hazard_form">
            <label>Likelihood of an accident</label>
            <select name="liklihood" id="liklihood">
                <option value="0">Please select</option>
                <option value="1" {% if hotspot_submission.liklihood == 1 and hotspot_submission.rating %}selected="selected"{% endif %}>1 - Extremely Unlikely</option>
                <option value="2" {% if hotspot_submission.liklihood == 2 and hotspot_submission.rating %}selected="selected"{% endif %}>2 - Unlikely</option>
                <option value="3" {% if hotspot_submission.liklihood == 3 and hotspot_submission.rating %}selected="selected"{% endif %}>3 - Likely</option>
                <option value="4" {% if hotspot_submission.liklihood == 4 and hotspot_submission.rating %}selected="selected"{% endif %}>4 - Very Likely</option>
                <option value="5" {% if hotspot_submission.liklihood == 5 and hotspot_submission.rating %}selected="selected"{% endif %}>5 - Certainty</option>
            </select>
            <br />
            <label>Severity of an injury</label>
            <select name="severity" id="severity">
                <option value="0">Please select</option>
                <option value="1" {% if hotspot_submission.severity == 1 and hotspot_submission.rating %}selected="selected"{% endif %}>1 - Minor Injury</option>
                <option value="2" {% if hotspot_submission.severity == 2 and hotspot_submission.rating %}selected="selected"{% endif %}>2 - First aid treatment</option>
                <option value="3" {% if hotspot_submission.severity == 3 and hotspot_submission.rating %}selected="selected"{% endif %}>3 - Three days off work</option>
                <option value="4" {% if hotspot_submission.severity == 4 and hotspot_submission.rating %}selected="selected"{% endif %}>4 - Major Injury</option>
                <option value="5" {% if hotspot_submission.severity == 5 and hotspot_submission.rating %}selected="selected"{% endif %}>5 - Fatality</option>
            </select>
        </form>
        <div class="calculation">
            <input type="text" id="liklihood-value" {% if hotspot_submission.liklihood and hotspot_submission.rating %}value="{{ hotspot_submission.liklihood }}"{% endif %} />
            <img src="{% static 'img/courses/risk-assessment/multiply.png' %}" alt="Multiply" />
            <input type="text" id="severity-value" {% if hotspot_submission.severity and hotspot_submission.rating %}value="{{ hotspot_submission.severity }}"{% endif %} />
            <img src="{% static 'img/courses/risk-assessment/equals.png' %}" alt="Equals" />
            <input type="text" id="rating"  {% if hotspot_submission.liklihood and hotspot_submission.severity and hotspot_submission.rating %}value="{{ hotspot_submission.liklihood|multiply:hotspot_submission.severity }}"{% endif %} />
        </div>
        <div class="rating-message">
            <div class="low" {% if hotspot_submission.rating == "LOW" %}style="display:block;"{% endif %}>Proceed and regularly review</div>
            <div class="med" {% if hotspot_submission.rating == "MED" %}style="display:block;"{% endif %}>PROCEED with CAUTION, Consult with your Supervisor/Manager (ASAP). Only attempt to resolve the issue if it is safe to do so and always follow the work protocols. Seek to ELIMINATE Risk.</div>
            <div class="high" {% if hotspot_submission.rating == "HIGH" %}style="display:block;"{% endif %}>STOP, Immediately consult with your Supervisor/Manager. Only attempt to resolve the issue if it is safe to do so and always follow the work protocols. Seek to ELIMINATE Risk.</div>
        </div>
    </div>
    <div class="score">
        <img src="{% static 'img/courses/risk-assessment/rating-all.png' %}" alt="" class="score-all" {% if hotspot_submission.rating %}style="display:none;"{% endif %} />
        <img src="{% static 'img/courses/risk-assessment/rating-low.png' %}" alt="Low"  class="score-low"  {% if hotspot_submission.rating == "LOW" %}style="display:block;"{% endif %} />
        <img src="{% static 'img/courses/risk-assessment/rating-med.png' %}" alt="Medium"  class="score-medium" {% if hotspot_submission.rating == "MED" %}style="display:block;"{% endif %} />
        <img src="{% static 'img/courses/risk-assessment/rating-high.png' %}" alt="High"  class="score-high" {% if hotspot_submission.rating == "HIGH" %}style="display:block;"{% endif %} />
    </div>
    <div class="pull-right">
        <input type="submit" class="btn btn-primary" value="Submit" id="submit_hazard" />
    </div>
</div>
<div id="hs_id" value="{{ hotspot.identifier }}"></div>

<script>
function calcRating()
{
    var lv = $('#liklihood-value').val();
    var sv = $('#severity-value').val();
    if(lv !== '' && sv !== '') {
        var rating = sv*lv;
        $('#rating').val(rating);
        $('.score img').hide();
        $('.rating-message div').hide();
        if(rating <= 5) {
            $('.score-low').css('display', 'block');
            $('.rating-message div.low').show();
        }
        if(rating > 5 && rating < 10) {
            $('.score-medium').css('display', 'block');
            $('.rating-message div.med').show();
        }
        if(rating > 9) {
            $('.score-high').css('display', 'block');
            $('.rating-message div.high').show();
        }
    }
}

$('#liklihood').change(function() {
    var selected = $(this).find(":selected").val();
    $('#liklihood-value').val(selected);
    calcRating();
});

$('#severity').change(function() {
    var selected = $(this).find(":selected").val();
    $('#severity-value').val(selected);
    calcRating();
});
</script>