{% extends 'layouts/main.html' %}

{% block content %}
<h1> <img class="avatar avatar-xl" src="{{user.profile_image}}"/>
    {{ title }}</h1>
<h3>{{ utc_dt }}</h3>


<style>
    #heatmap {
        display: grid;
        grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
        gap: 5px;
        width: 100%;
        table-layout: fixed;
    }

    .day {
        width: 50px;
        height: 50px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        table-layout: fixed;
    }
</style>


    <div class="d-md-flex gap-3">
        <div class="flex-fill col-md-4 col-12 card bg-light mb-6">
            <div class="card-body">
                <h5 class="card-title">📅 Heatmap</h5>
                <div id="heatmap"></div>
            </div>
        </div>

        <script>

            // Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
            const activityData = {{ heatmap_values }};

            // Funktion zum Erstellen der Heatmap
            function createHeatmap(data) {
                const heatmapContainer = document.getElementById('heatmap');

                // Aktuelles Datum des Montags
                const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']

                for (let i = 0; i < 7; i++) {
                    const dayElement = document.createElement('div');
                    dayElement.classList.add('day');
                    dayElement.textContent = days[i];
                    heatmapContainer.appendChild(dayElement);
                    // currentDate.setDate(currentDate.getDate() + 1);
                }

                // Aktuelles Datum des Montags in der neuen linken Spalte
                for (let i = 0; i < 7; i++) {
                    for (let j = 0; j < 4; j++) {
                        // console.log(i * 7 + j, data[i * 7 + j], Math.max(...data));
                        const opacity = data[i * 7 + j] / (Math.max(...data) <= 0 ? 1 : Math.max(...data)); // Berechne die Opazität basierend auf Aktivitätsanzahl

                        if (data[i * 7 + j]) {
                            const dayElement = document.createElement('div');
                            dayElement.classList.add('day');
                            dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
                            heatmapContainer.appendChild(dayElement);
                        } else {
                            const dayElement = document.createElement('div');
                            dayElement.classList.add('day');
                            dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
                            heatmapContainer.appendChild(dayElement);
                        }
                    }
                }

                var left = 7 - (new Date()).getDay();
            }

            // Erstelle die Heatmap mit den simulierten Daten
            createHeatmap(activityData);

        </script>


        <div class="flex-fill col-md-8 col-12 card bg-light p-6 mb-6">
            <div class="row mb-3">
                <h5 class="col-9">📋 Gewohnheiten</h5>
                <a class="col-3 btn btn-primary p" role="button" href="/habit-list">Neue Liste erstellen</a>
            </div>



            <ul class="nav nav-tabs card-header-tabs" role="tablist">
                {% for habit_list in habit_lists %}

                <li class="nav-item" role="presentation">
                    <a class="nav-link {% if habit_list == habit_lists[0] %} active {% endif %}" id="simple-tab-{{habit_list.id}}" data-bs-toggle="tab" href="#simple-tabpanel-{{habit_list.id}}" role="tab" aria-controls="simple-tabpanel-{{habit_list.id}}" aria-selected="true">
                        {{habit_list.name}}
                    </a>
                </li>
                {% endfor %}
            </ul>
            <div class="tab-content pt-5" id="tab-content">
                {% for habit_list in habit_lists %}
                <div class="tab-pane {% if habit_list == habit_lists[0] %} active {% endif %}" id="simple-tabpanel-{{habit_list.id}}" role="tabpanel" aria-labelledby="simple-tab-{{habit_list.id}}">
                    <div class="row mb-3">
                        <h2 class="col-9"></h2>
                        <a class="col-3 btn btn-primary" role="button" href="/habit?list={{ habit_list.id }}">
                            Gewohnheit erstellen
                        </a>
                    </div>

                    <ul class="task-list row">
                        {% for habit in habit_list.habits %}
                        <li class="row d-flex align-items-center mb-2" id="habit-{{ habit.id }}">
                            <div class="col-auto drag-handle" style="cursor: grab;">
                                <i class="bi bi-grip-vertical"></i>
                            </div>
                            <div class="col-auto">
                                <input {% if habit.checked %} checked {% endif %} type="checkbox" class="task-checkbox"
                                       id="{{ habit.id }}"
                                       onclick="sendPostRequest('{{ habit.id }}')">
                            </div>

                            <div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                                {{ habit.name }}
                            </div>

                            <div class="col-5 text-black text-opacity-50"
                                 style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                                {{ habit.note }}

                            </div>

                            <div class="col-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                                {% if not habit.streak == 0 %}
                                {{ habit.streak }} 🔥
                                {% endif %}

                            </div>

                            <button type="button" class="btn btn-xs btn-danger rounded-circle" data-bs-toggle="modal"
                                    data-bs-target="#exampleModal" style="width: 40px; height: 40px"
                                    onclick="setSelectedHabitId({{ habit.id }})">
                                <i class="bi bi-trash3"></i>
                            </button>
                            <div class="col-12">
                                <div class="progress" style="height: 2px; width: 90%">
                                    <div class="progress-bar" id="progress-bar-{{ habit.id }}" role="progressbar"
                                         style="width: {{ habit.percentage }}%; background-color: {% if habit.percentage >= 100 %} green {% else %} primary {% endif %}"
                                         aria-valuenow="{{ habit.percentage }}" aria-valuemin="0"
                                         aria-valuemax="100"></div>
                                </div>
                            </div>
                        </li>

                        {% endfor %}
                    </ul>
                </div>
                {% endfor %}
            </div>

        </div>

        <script>
            var selectedHabitId = null;

            function setSelectedHabitId(habitId) {
                selectedHabitId = habitId;
            }
        </script>

        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Bestätige</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Möchtest du dieses Habit wirklich löschen?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary btn-danger" data-bs-dismiss="modal"
                                onclick="deleteHabit(selectedHabitId)">Löschen
                        </button>
                    </div>
                </div>
            </div>
        </div>


        <script>
            function checkCompletionAndAnimate(habitId, percentage) {
                var progressBar = document.getElementById("progress-bar-" + habitId);
                var habitBlock = document.getElementById("habit-" + habitId);

                if (percentage == 100) {
                    progressBar.style.backgroundColor = "green";
                    habitBlock.classList.add("animate-bounce");
                    setTimeout(function () {
                        habitBlock.classList.remove("animate-bounce");
                    }, 2000);
                } else {
                    progressBar.style.backgroundColor = "";
                    habitBlock.classList.remove("animate-bounce");
                }
            }

            function sendPostRequest(checkboxId) {
                // Get the checkbox element using the provided ID
                var checkbox = document.getElementById(checkboxId);
                // console.log(checkbox);

                // Get the habit id from the checkbox id attribute
                var habitId = checkboxId;

                // Make a POST request to /check with the habit id
                axios.post('/check', {habitId: habitId}, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (response) {
                    // Handle the success response if needed
                    console.log(response.data);

                    // Set the percentage of the habit. percentage received as integer
                    var percentage = response.data.percentage;
                    var progressBar = document.getElementById("progress-bar-" + habitId);
                    progressBar.style.width = percentage + "%";
                    checkCompletionAndAnimate(habitId, percentage);
                }).catch(function (error) {
                    // Handle the error if needed
                    console.error('Error:', error);
                });
            }

            function deleteHabit(habitId) {
                // Make a POST request to /delete with the habit id

                axios.post('/delete', {habitId: habitId}, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (response) {
                    // Handle the success response if needed
                    console.log(response.data);

                    // Remove the habit from the DOM
                    var habitElement = document.getElementById("habit-" + habitId);
                    habitElement.remove();
                }).catch(function (error) {
                    // Handle the error if needed
                    console.error('Error:', error);
                });
            }
        </script>
    </div>


<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        var el = document.querySelector('.task-list');
        Sortable.create(el, {
            handle: '.drag-handle',
            animation: 150,
            onEnd: function (evt) {
                var habitId = el.children[evt.newIndex].id.split('-')[1];
                var oldIndex = evt.oldIndex;
                var newIndex = evt.newIndex;

                axios.post('/reorder', {habitId: habitId, oldIndex: oldIndex, newIndex: newIndex}, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (response) {
                    // Handle the success response if needed
                }).catch(function (error) {
                    // Handle the error if needed
                    console.error('Error:', error);
                });
            }
        });
    });
</script>


{% endblock %}