{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Partey! {% endblock %}</h1>
    <meta id="my-data" data-alarms="{{alarms}}" data-logs="{{logs}}">
    <div class="grid-container">
        <div class="savedLogs">
            <h3>Logs</h3>
            {% for log in logs %}
                <div>
                    {{ log.datetime }}: {{ log.message }}
                </div>
            {% endfor %}
        </div>
        <div class="savedAlarms" id="upcomingAlarms">
            <h3>Anstehende Alarme</h3>
            {% for alarm in alarms %}
                <div>
                    {{ alarms[alarm].datetime }}: {{ alarms[alarm].message }} <input style="text-align: right;" type="button" value="&#10060;" onclick="deleteAlarm({{alarm}})"/>
                </div>
            {% endfor %}
        </div>
        <div class="log">
            <form method="post" action="/sendLog">
                
                <div class="form-group">
                    <label for="logMessage">Log:</label>
                    <input type="text" name="logMessage"
                    class="form-control"
                    value="{{ request.form['logMessage'] }}"></input>
                    <input type="submit" id="saveLog" value="Speichern" style="margin-top: 3mm;"/>
                </div>
            </form>
        </div>
        <div class="alarms">
            <form method="post" action="/setAlarm">
                
                <div class="form-group">
                    <div class="datetime" style="padding-left: 3mm;">
                        <input type="date" name="date"
                        class="form-control"
                        value="{{ request.form['date'] }}" style="width: 150px;"></input>
                    </div>
                    <div class="datetime">
                        <input type="time" name="time" class="form-control"
                        value="{{ request.form['time'] }}" style="width: 85px;" required></input>
                    </div>
                    <div style="padding: 3mm;">
                        <label for="alarmMessage">Alarm-Text</label>
                        <input type="text" name="alarmMessage"
                        class="form-control"
                        value="{{ request.form['alarmMessage'] }}" required></input>
                    </div>
                    <input type="submit" id="saveAlarm" value="Speichern" style="padding-left: 3mm; margin-left: 3mm;"/>
                </div>
            </form>
        </div>

        <div class="previousAlarms" id="previousAlarms">
            <h3>Vergangene Alarme</h3>
            <script>
                alarms = {{ alarms|tojson }};
                console.log(alarms);
                async function postAlarm(alarm){
                    var body = JSON.stringify(alarm)
                    const response = await fetch("http://127.0.0.1:5000/alarms", {
                        method: "POST",
                        body: body,
                        });
                    fetch("/processAlarm", {
                        method: "GET"
                        }).then(response => {
                        return response.text();
                        })
                        .then(html => {
                        upcomingAlarms.innerHTML = html
                        })
                    fetch("/processpAlarm", {
                        method: "GET"
                        }).then(response => {
                        return response.text();
                        })
                        .then(html => {
                        previousAlarms.innerHTML = html
                        })
                }
                async function deleteAlarm(id){
                    const response = await fetch("http://127.0.0.1:5000/deletealarm", {
                        method: "POST",
                        body: id,
                        });
                    fetch("/processAlarm", {
                        method: "GET"
                        }).then(response => {
                        return response.text();
                        })
                        .then(html => {
                        upcomingAlarms.innerHTML = html
                        })
                    fetch("/processpAlarm", {
                        method: "GET"
                        }).then(response => {
                        return response.text();
                        })
                        .then(html => {
                        previousAlarms.innerHTML = html
                        })
                }

                function checkAlarms(){
                    for(var i = 0; i < alarms.length; i++){
                        
                        const [dateComponents, timeComponents] = alarms[i].datetime.split(' ');

                        const [day, month, year] = dateComponents.split('.');
                        const [hours, minutes] = timeComponents.split(':');

                        const date = new Date(+year, +month - 1, +day, +hours, +minutes);
                        if(date <=new Date()){
                            postAlarm(alarms[i]);
                            alert(alarms[i].message);
                            alarms.splice(i, 1);

                        }  
                    }
                    setTimeout(checkAlarms, 15000);
                }
            checkAlarms();
            </script>
            {% for alarm in previousAlarms %}
            <div>
                {{ previousAlarms[alarm].datetime }}: {{ previousAlarms[alarm].message }}
            </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}