{% extends "base.html" %}
{% load static %}
{% block content %}
<div class="select-category-container">
    <h1 style="text-align: center;">Select a Category</h1>
    <br></br>
    {% if messages %}
        <ul class="messages">
            {% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
            {% endfor %}
        </ul>
    {% endif %}
    
    <form id="category-form" method="post">
        {% csrf_token %}
        <input type="hidden" id="selected_category" name="selected_category" value="">

        <div class="circle-container">
            <div class="center-circle">
                <a href="https://rdmkit.elixir-europe.org/data_life_cycle" style="color: gold;" target="_blank">Research Data Life Cycle</a>
            </div>
            {% if "Plan" not in completed_categories %}
                <button type="button" class="category-button" data-category="P" title="{{ category_question_counts.P }} questions total" style="transform: rotate(0deg) translate(120px) rotate(-0deg);">Plan</button>
            {% endif %}
            {% if "Collect" not in completed_categories %}
                <button type="button" class="category-button" data-category="C" title="{{ category_question_counts.C }} questions total" style="transform: rotate(60deg) translate(130px) rotate(-30deg);">Collect</button>
            {% endif %}
            {% if "Analyze" not in completed_categories %}
                <button type="button" class="category-button" data-category="A" title="{{ category_question_counts.A }} questions total" style="transform: rotate(120deg) translate(120px) rotate(-90deg);">Analyze</button>
            {% endif %}
            {% if "Share" not in completed_categories %}
                <button type="button" class="category-button" data-category="S" title="{{ category_question_counts.S }} questions total" style="transform: rotate(180deg) translate(120px) rotate(-150deg);">Share</button>
            {% endif %}
            {% if "QA" not in completed_categories %}
                <button type="button" class="category-button" data-category="Q" title="{{ category_question_counts.Q }} questions total" style="transform: rotate(240deg) translate(120px) rotate(-200deg);">QA</button>
            {% endif %}
            {% if "Re-Use" not in completed_categories %}
                <button type="button" class="category-button" data-category="R" title="{{ category_question_counts.R }} questions total" style="transform: rotate(300deg) translate(120px) rotate(-270deg);">Re-Use</button>
            {% endif %}
        </div>
    </form>
	<br></br>
    <h2>Completed Categories</h2>
    <ul class="completed-categories-list">
        {% for name in completed_categories %}
            <li>{{ name }}</li>
        {% endfor %}
    </ul>
    <div class="progress-bar-container">
        <div class="progress-bar">
            <div class="progress" style="width: {{ progress_percentage }}%;"></div>
            <div class="progress-label">{{ progress_percentage }}% answered</div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('.category-button').on('click', function() {
        var selectedCategory = $(this).data('category');
        $('#selected_category').val(selectedCategory);  
        $('#category-form').submit();
    });

    var categories = {{ categories|safe }};
    categories.forEach(function(category, index) {
        var colors = ['#1B263B', '#1D3557', '#2A4E7E', '#325C9A', '#3D6DB4', '#477ECB'];
        category.color = colors[index % colors.length]; 
    });

    var progressPercentage = parseFloat('{{ progress_percentage }}');
    $('.progress-label').text(Math.round(progressPercentage) + '% answered');
});
</script>

<style>
.element-style {
    font-family: Open-Dyslexic, Arial, sans-serif;
    position: absolute;
}

.select-category-container {
    text-align: center;
    padding: 20px;
}

.circle-container {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: conic-gradient(
        #1B263B 0% 16.66%,    
        #1D3557 16.66% 33.32%, 
        #2A4E7E 33.32% 49.98%, 
        #325C9A 49.98% 66.64%, 
        #3D6DB4 66.64% 83.3%,  
        #477ECB 83.3% 100%     
    );
    transform: rotate(-30deg);
    transition: background-color 0.3s;
}

.center-circle {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #393939;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    z-index: 1;
    transform: rotate(30deg);
}

.category-button {
    position: absolute;
    width: 60px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    background-color: transparent;
    font-size: 18px;
    pointer-events: all;
    z-index: 2;
}

.category-button:hover {
    color: gold; 
}

.progress-bar-container {
    position: relative;
    left: 50%; 
    top: 80%; 
    transform: translate(-50%, -50%); 
    display: flex;
    justify-content: center; 
    align-items: center; 
    padding: 20px; 
}

.progress-bar {
    background-color: #f2f2f2;
    border-radius: 5px;
    height: 20px; 
    width: 300px; 
    position: relative;
}

.progress {
    background-color: #4caf50;
    height: 100%;
    border-radius: 5px;
    text-align: center;
    line-height: 20px; 
}

.progress-label {
    color: black; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.completed-categories-list {
    list-style: none; 
    padding: 0; 
    margin: 20px 0; 
    text-align: center;
}

.completed-categories-list li {
    margin: 5px 0; 
}
footer {
	position: absolute; 
}
</style>
{% endblock %}