{% extends 'base.html' %}
{% block content %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Label for current exploration.rdlc value -->
<div class="mt-4 ml-4 mb-2">
    <a href="{% url 'exploration' %}" class="font-semibold">
        Research Stage >
    </a>
    <a href="{% url 'exploration_category' category=category %}" class="text-blue-600">
        {{ exploration.rdlc }}
    </a>
</div>

    <div class="card bg-white rounded-lg shadow-md p-6">
        <h2>{{ exploration.topic }}</h2>
        <h3>Possible Scenario</h3>
        <!-- Wrap the text in a container for positioning -->
        <div id="possible-scenario-container" style="position: relative;">
            <!-- Use a placeholder element to show animation -->
            <p class="placeholder"></p>
            <!-- Actual text will be added dynamically -->
        </div>
		<br></br>
        <!-- Collapsible buttons and content -->
        <button class="collapsible bg-blue-700 text-white p-2 mt-2">+ What could be the damage?</button>
        <div class="content hidden bg-blue-100 p-2">
            <p>{{ exploration.harmful_effects }}</p>
        </div>

        <button class="collapsible bg-blue-700 text-white p-2 mt-2">+ How could that happen?</button>
        <div class="content hidden bg-blue-100 p-2">
            <p>{{ exploration.possible_causes }}</p>
        </div>

        <button class="collapsible bg-blue-700 text-white p-2 mt-2">+ Inspired By</button>
        <div class="content hidden bg-blue-100 p-2">
          <p>
            <a href="{{ exploration.problem_reports }}" target="_blank" style="color: gold;">Reference</a>
          </p>
        </div>
    </div>
</div>
<div><br></br></div>
<script>
    $(document).ready(function(){
        // Function to adjust the position of anchor elements
        function adjustButtonPosition() {
            var windowHeight = $(window).height();
            var buttonContainerHeight = $('#button-container').outerHeight();
            var margin = (windowHeight - buttonContainerHeight) / 16;
            $('#button-container').css('margin-top', margin);
          }

        adjustButtonPosition();
        $(window).resize(adjustButtonPosition);

        // Collapsible function
        $(".collapsible").click(function(){
            $(this).toggleClass("active");
            var content = $(this).next();
            if (content.css('display') === 'block'){
                content.css('display', 'none');
                $(this).html($(this).html().replace('-', '+')); // Replace - with +
            } else {
                content.css('display', 'block');
                $(this).html($(this).html().replace('+', '-')); // Replace + with -
            }
        });

        // Animate the possible scenario text with user interaction
        var possibleScenarioText = "{{ exploration.possible_scenario }}";
        var i = 0;
        var delay = 10; // Delay between each character in milliseconds
        var paused = false;
        var charsToDisplay = 250;

        function displayText() {
            var currentChar = possibleScenarioText.charAt(i);
            $('#possible-scenario-container').append(currentChar);
            i++;
            if (i < possibleScenarioText.length && !paused) {
                setTimeout(displayText, delay);
                if (i % charsToDisplay === 0) {
                    paused = true;
                    $('#possible-scenario-container').append('<span id="arrow-symbol" class="click-to-continue" style="position: absolute; bottom: 0; right: 0;">&#9660;</span>'); // Add arrow symbol
                }
            } else {
                $('.placeholder').remove(); // Remove the loading placeholder
            }
        }

        $('#possible-scenario-container').on('click', '#arrow-symbol', function() {
            if (paused) {
                paused = false;
                $('#arrow-symbol').remove(); // Remove arrow symbol
                displayText();
            }
        });

        // Start displaying the text
        displayText();
        // Event listeners for both click and keypress
        $(document).on('click keypress', function(e) {
            // Check if the event is triggered by clicking or pressing space bar
            if ((e.type === 'click' || (e.type === 'keypress' && e.keyCode === 32)) && paused) {
                // Remove arrow symbol and continue animation
                paused = false;
                $('#arrow-symbol').remove();
                displayText();
            }
        });
    });
</script>
<style>
  .progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f0f0f0;
    border-radius: 5px;
  }

  .progress-bar {
    background-color: #007bff;
    transition: width 0.3s ease-in-out;
  }
</style>

{% endblock %}