{% extends "base.html" %}
{% block content %}
    <header class="page-header">
        <h1>Member Area</h1>
    </header>
    <div class="jumbotron2">
        <h1>Welcome back, {{signup_name}}!</h1>
    </div>
    <div class="container">
        <div class="row">
            <div class="col">
                <h3>Graph</h3>
                <div class="graph-placeholder">
                    <canvas id="userGraph" width="400" height="200"></canvas>
                </div>
            </div>

            <div class="col">
                <div style="margin-bottom: 20px;">
                    <p><strong>Select Year:</strong></p>
                    <select id="yearDropdown">
                        <option value="2023">2023</option>
                        <option value="2024">2024</option>
                        <option value="2025">2025</option>
                    </select>
                </div>

                <div style="margin-bottom: 20px;">
                    <p><strong>Select Month:</strong></p>
                    <select id="monthDropdown">
                        <option value="January">January</option>
                        <option value="February">February</option>
                        <option value="March">March</option>
                        <option value="April">April</option>
                        <option value="May">May</option>
                        <option value="June">June</option>
                        <option value="July">July</option>
                        <option value="August">August</option>
                        <option value="September">September</option>
                        <option value="October">October</option>
                        <option value="November">November</option>
                        <option value="December">December</option>
                    </select>
                </div>

                <div style="margin-bottom: 20px;">
                    <p><strong>How are you feeling this week?</strong></p>
                    <div class="mood-selection">
                        <button class="mood-button" data-mood="happy">😊 Happy</button>
                        <button class="mood-button" data-mood="neutral">😐 Neutral</button>
                        <button class="mood-button" data-mood="sad">😞 Sad</button>
                        <button class="mood-button" data-mood="stressed">😖 Stressed</button>
                        <button class="mood-button" data-mood="excited">😄 Excited</button>
                    </div>
                </div>

                <div style="margin-bottom: 20px;">
                    <p><strong>How stressed do you feel this week? (1 = Not stressed, 10 = Extremely stressed)</strong></p>
                    <input type="range" id="stressSlider" min="1" max="10" value="5" class="slider">
                    <p id="stressLevel">Current Stress Level: 5</p>
                </div>

                <div style="margin-bottom: 20px;">
                    <p><strong>How productive were you this week? (1 = Not productive, 10 = Very productive)</strong></p>
                    <input type="range" id="productivitySlider" min="1" max="10" value="5" class="slider">
                    <p id="productivityLevel">Current Productivity Level: 5</p>
                </div>

                <div style="margin-bottom: 20px;">
                    <p><strong>Did you complete your tasks this week?</strong></p>
                    <div class="yes-no-buttons">
                        <button class="yes-no-button" data-answer="yes">Yes</button>
                        <button class="yes-no-button" data-answer="no">No</button>
                    </div>
                </div>

                <div style="margin-top: 20px;">
                    <button id="submitButton">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/js/all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        var stressSlider = document.getElementById("stressSlider");
        var productivitySlider = document.getElementById("productivitySlider");
        var stressLevel = document.getElementById("stressLevel");
        var productivityLevel = document.getElementById("productivityLevel");

        stressSlider.oninput = function() {
            stressLevel.innerHTML = "Current Stress Level: " + stressSlider.value;
        }

        productivitySlider.oninput = function() {
            productivityLevel.innerHTML = "Current Productivity Level: " + productivitySlider.value;
        }

        var mood = "happy";
        var stress = 5;
        var productivity = 5;

        var ctx = document.getElementById('userGraph').getContext('2d');
        var userGraph = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
                datasets: [{
                    label: 'Stress Level',
                    data: [3, 4, stress, 5],
                    borderColor: 'red',
                    fill: false
                },
                {
                    label: 'Productivity',
                    data: [4, 5, productivity, 6],
                    borderColor: 'blue',
                    fill: false
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        var submitButton = document.getElementById("submitButton");
        submitButton.addEventListener("click", function() {
            submitButton.style.backgroundColor = "#555";
            submitButton.style.color = "#fff";
        });

        var moodButtons = document.querySelectorAll('.mood-button');
        moodButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                moodButtons.forEach(function(b) {
                    b.style.backgroundColor = "";
                });
                button.style.backgroundColor = "#555";
                button.style.color = "#fff";
            });
        });

        var yesNoButtons = document.querySelectorAll('.yes-no-button');
        yesNoButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                yesNoButtons.forEach(function(b) {
                    b.style.backgroundColor = "";
                });
                button.style.backgroundColor = "#555";
                button.style.color = "#fff";
            });
        });
    </script>
</body>
</html>
{% endblock %}