{% extends 'base_with_nav.html' %}

{% load static %}

{% block head %}
    <link rel='stylesheet' href="{% static 'css/index.css' %}">
    <audio id="lose" src="{% static 'img/losing.mp3' %}"></audio>
    <script>
        function checkFlag(challenge_id) {
            $.ajax({
                type : 'POST',
                url: "{% url 'main:validate_flag' %}",
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    dataType: 'json',
                    challenge_id: challenge_id,
                    flag: $("#" + challenge_id).val(),
                },
                success: function(data) {
                    if (data.result == "success") {
                        $("#box" + challenge_id).removeClass("available").addClass("completed");                        
                    } else {
                        document.getElementById("lose").play();
                        $("#" + challenge_id).css("background-color", "red");
                    }
                },
                failure: function() {
                    $("#" + challenge_id).css("background-color", "red");
                }
            });
        }
    </script>
    <link rel='stylesheet' href="{% static 'css/overview.css' %}">
    <script>
        $(document).ready(function() {
            giveRibbons();
            $("#hoco-scores").fadeIn();
        });
        function giveRibbons() {
            var arr = [];
            $("#hoco-scores .score-box").each(function() {
                var score = parseFloat($(this).find(".score").text());
                arr.push([$(this), score]);
            });
            arr.sort(function(a, b) {
                return b[1] - a[1];
            });
            var place = 0;
            $.each(arr, function(k, v) {
                if (k > 0 && arr[k - 1][1] != v[1]) {
                    place += 1;
                }
                if (place == 0) {
                    v[0].find(".corner-ribbon").addClass("gold").text("1st");
                }
                else if (place == 1) {
                    v[0].find(".corner-ribbon").addClass("silver").text("2nd");
                }
                else if (place == 2) {
                    v[0].find(".corner-ribbon").addClass("bronze").text("3rd");
                }
            });
        }
    </script>  
    
    
    {% if dark_mode %}
    <style>
        body {
            background: #1B2430
        }
        
        .header {
            background-color: #816797
        }
        
        .completed {
            background: darkgreen
        }
        
        .locked {
            background:#444444
        }
        
        .available {
            background: darkgray
        }
        
        h1 {
            color: lightgray
        }
    </style>
    {% endif %}
{% endblock %}

{% block main %}

    <div id="hoco-scores">
        <div class="score-box">
            <div class="class">{{ data.0.0 }}</div>
            <div class="corner-ribbon"></div>
            <div class="score" id="score-senior">{{ data.0.1 }}</div>
            points
        </div>
        <div class="score-box">
            <div class="class">{{ data.1.0 }}</div>
            <div class="corner-ribbon"></div>
            <div class="score" id="score-junior">{{ data.1.1 }}</div>
            points
        </div>
        <div class="score-box">
            <div class="class">{{ data.2.0 }}</div>
            <div class="corner-ribbon"></div>
            <div class="score" id="score-sophomore">{{ data.2.1 }}</div>
            points
        </div>
        <div class="score-box">
            <div class="class">{{ data.3.0 }}</div>
            <div class="corner-ribbon"></div>
            <div class="score" id="score-freshman">{{ data.3.1 }}</div>
            points
        </div>
    </div>
    <h1 class="border-bottom">Homecoming Scavenger Hunt 2022</h1>
    <br>
    <br>
    <br>
    {% for category, challenges in categories.values %}
        <div class="col">
            <div class="row">
                <h1 class="ml-3">{{ category.name }}</h1>
                <p style="cursor: pointer;" onclick="document.getElementById('c-{{ category.id }}').style.display = document.getElementById('c-{{ category.id }}').style.display === 'none' ? 'flex' : 'none'" class="ml-auto mr-3 btn btn-primary">toggle</p>
            </div>
            <div class="row">
                <p class="ml-2 font-italic">{{category.description}}</p>
            </div>
            <div id="c-{{ category.id }}" class='row'>
                {% for challenge, status in challenges.items %}
                    {% if status.0.unblocked %}
                        <a class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
                            <div id="box{{ status.0.id }}" class="box {% if status.1 == 'available' %}available{% elif status.1 == 'completed' %}completed{% else %}locked{% endif %} p-3">
                                <div class="centered-div">
                                    <h4>{{ status.0.name }}</h4>
                                    <p>Points: {{ status.0.points }}</p>
                                </div>
                                <div class="{% if status.1 == 'completed' %}center{% else %}left{% endif %}-div">
                                    {% if status.0.exclusive %}
                                        <p>This challenge's points are only available to the first class to complete it.</p>
                                        <p>{{ status.0.short_description }}</p>    
                                    {% elif status.1 == 'locked' %}
                                        <p>This challenge was exclusive and has already been completed by another class.</p>
                                    {% elif status.1 == 'completed' %}
                                        <h3>Solved!</h3>
                                    {% else %}
                                        <p>{{ status.0.short_description }}</p>
                                    {% endif %}
                                </div>
                                {% if status.1 == 'available' %}
                                    <hr>
                                    <input type="text" id="{{ status.0.id }}" placeholder="Enter the flag here"/>
                                    <input type="submit" value="Submit" onclick="checkFlag({{ status.0.id }})" />
                                {% endif %}
                            </div>
                        </a>
                    {% else %}
                        <div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
                            <div id="box{{ status.0.id }}" class="box locked p-3">
                                <div class="centered-div">
                                    <h4>{{ status.0.name }}</h4>
                                    <p>Points: {{ status.0.points }}</p>
                                </div>
                                <div class="centered-div">
                                    <p>This challenge is currently unavailable.</p>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
{% endblock %}