{% extends "base.html" %}
{% load static %}
{% block content %}
<h1 style="text-align: center;">Exploration Mode</h1>
<br></br>
<h2 style="text-align: center;">Select a Research Phase</h2>
<!-- Rest of the content remains unchanged -->

<!-- Create the circle container for the tiles -->
<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>
    <a href="{% url 'exploration_category' category='Plan' %}" class="exploration-segment"  style="transform: rotate(0deg) translate(120px) rotate(-0deg);">Plan</a>
    <a href="{% url 'exploration_category' category='Collect' %}" class="exploration-segment" style="transform: rotate(60deg) translate(120px) rotate(-30deg);">Collect</a>
    <a href="{% url 'exploration_category' category='Analyze' %}" class="exploration-segment" style="transform: rotate(120deg) translate(120px) rotate(-90deg);">Analyze</a>
    <a href="{% url 'exploration_category' category='Share' %}" class="exploration-segment" style="transform: rotate(180deg) translate(120px) rotate(-150deg);">Share</a>
    <a href="{% url 'exploration_category' category='QA' %}" class="exploration-segment" style="transform: rotate(240deg) translate(120px) rotate(-200deg);">QA</a>
    <a href="{% url 'exploration_category' category='Re-Use' %}"class="exploration-segment" style="transform: rotate(300deg) translate(120px) rotate(-270deg);">Re-Use</a>
</div>
<!-- Back button and progress bar section -->
<!-- Random Topic button outside the circle -->
<div style="text-align: center; margin-top: 30px;">
    <button class="random-button" onclick="generateRandomNumber()" style="background-color: darkred; color: white; padding: 10px 20px; font-size: 18px;">Random Topic</button>
</div>
<div><br></br></div>  
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: {{ progress_percentage }}%" onclick="resetProgress()" aria-valuenow="{{ progress_percentage }}" aria-valuemin="0" aria-valuemax="100">
        <span class="progress-text">Explored: {{ progress_percentage }}% (Click to reset)</span>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // Define functions first
    function generateRandomNumber() {
        var randomNumber = Math.floor(Math.random() * 101) + 1;
        var explorationUrl = "{% url 'exploration_detail' id=0 %}".replace('0', randomNumber);
        window.location.href = explorationUrl;
    }

    function resetProgress() {
        if (confirm("Are you sure you want to reset progress?")) {
            window.location.href = "{% url 'reset_progress' %}";
        }
    }

    function resetAndRedirect() {
        window.location.href = "{% url 'select_game_mode' %}";
    }
	

    // Document ready function
    $(document).ready(function() {
        $("#toggle-search").click(function() {
            $("#searchForm").slideToggle();
        });

        var randomButton = document.querySelector('.random-button');
        if (randomButton) {
            randomButton.addEventListener('mouseover', function() {
                randomButton.style.backgroundColor = 'darkorange';
            });
            randomButton.addEventListener('mouseout', function() {
                randomButton.style.backgroundColor = 'darkred';
            });
        }
    });
</script>

<style>
    /* Top bar styling */
    .top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    /* Position the search container on the right */
    .search-container {
        width: 300px;
        z-index: 1000;
    }

    /* Collapsible search header styling */
    .search-header {
        background-color: #F68E55;
        color: #FFFFFF;
        padding: 10px;
        cursor: pointer;
        border-radius: 8px;
        text-align: center;
    }

    .search-header h2 {
        margin: 0;
        font-size: 18px;
    }

    /* Search form styling */
    .search-form {
        background-color: #393939;
        border: 2px solid #F68E55;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        margin-top: 10px;
        display: none; /* Initially hidden */
    }

    .search-form select,
    .search-form input,
    .search-form button {
        width: 100%;
        margin-bottom: 15px;
    }
    /* Styling for progress bar container */
    .progress {
        height: 20px;
        margin-bottom: 20px;
        overflow: hidden;
        background-color: #e0e0e0; /* Light background for the progress bar track */
        border-radius: 8px; /* Slightly more rounded corners for a modern look */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        font-family: 'Open-Dyslexic', sans-serif;
        position: relative;
    }

    /* Styling for progress bar fill */
    .progress-bar {
        display: flex;
        align-items: center;
        justify-content: center;        
        background: linear-gradient(to right, #007bff, #0056b3); /* Gradient fill */
        transition: width 0.3s ease-in-out;
        border-radius: 8px; /* Match the container's border-radius */
        color: white; /* Text color */
        font-weight: bold;
        line-height: 20px; /* Match the height of the progress bar */
        width: {{ progress_percentage }}%; /* Dynamic width */
        box-sizing: border-box;
        position: relative; /* Make it a positioning context for the text */
    }

	.progress-text {
		color: black;
		font-size: 12px;
		font-weight: bold;
		white-space: nowrap;
		text-align: center;
		position: absolute; /* Place it in the background */
		width: 100%; /* Make sure the text spans the entire progress bar */
		height: 100%;
		line-height: 20px; /* Align the text vertically */
		z-index: 0; /* Ensure the text stays behind the progress bar */
		top: 0;
		left: 0;
	}

    /* Hover and active states */
    .progress-bar:hover {
        background: linear-gradient(to right, #0056b3, #003b80); /* Slightly darker gradient on hover */
    }

    .progress-bar:active {
        background: linear-gradient(to right, #003b80, #002a5d); /* Darker gradient on click */
    }

    /* Optional: Add a small tooltip on hover if you want to display the percentage */
    .progress-bar::after {
        content: attr(data-percentage) "%"; /* Display the percentage */
        position: absolute;
        right: 10px; /* Adjust position as needed */
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.7);
        color: white; /* Text color */
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .progress-bar:hover::after {
        opacity: 1;
    }

    /* Styling for the conic tiles */
    .data-life-cycle {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100vh;
        gap: 20px;
        position: relative;
    }

    .conic-tile {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px;
        height: 150px;
        background-color: #3498DB;
        color: #fff;
        border-radius: 50%;
        transition: transform 0.3s ease, background-color 0.3s ease;
        text-decoration: none;
        font-weight: bold;
    }

    .conic-tile:hover {
        background-color: #2980B9;
        transform: scale(1.1);
    }

    .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%,    /* Plan */
            #1D3557 16.66% 33.32%, /* Collect */
            #2A4E7E 33.32% 49.98%, /* Analyze */
            #325C9A 49.98% 66.64%, /* Share */
            #3D6DB4 66.64% 83.3%,  /* QA */
            #477ECB 83.3% 100%     /* Re-Use */
        );
        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);
    }

    /* Segment links */
    .exploration-segment {
        position: absolute;
        width: 150px;
        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;
    }

    /* Adjusting positions for each segment */
    .exploration-segment:nth-child(2) {
        transform: rotate(0deg) translate(160px) rotate(-0deg);
    }
    .exploration-segment:nth-child(3) {
        transform: rotate(60deg) translate(160px) rotate(-60deg);
    }
    .exploration-segment:nth-child(4) {
        transform: rotate(120deg) translate(160px) rotate(-120deg);
    }
    .exploration-segment:nth-child(5) {
        transform: rotate(180deg) translate(160px) rotate(-180deg);
    }
    .exploration-segment:nth-child(6) {
        transform: rotate(240deg) translate(160px) rotate(-240deg);
    }
    .exploration-segment:nth-child(7) {
        transform: rotate(300deg) translate(160px) rotate(-300deg);
    }

    footer {
        position: absolute;
    }
</style>
{% endblock %}