{% 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>Upcoming Alarms</h3>
            {% for alarm in alarms %}
                <div>
                    {{ alarm.datetime }}: {{ alarm.message }}
                </div>
            {% endfor %}
        </div>
        <div class="log">
            <form method="post" action="/sendLog">
                
                <div class="form-group">
                    <label for="logMessage">logMessage</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;">    
                        <label for="time">Datum</label>
                        <input type="date" name="date"
                        class="form-control"
                        value="{{ request.form['date'] }}" style="width: 150px;"></input>
                    </div>
                    <div class="datetime">
                        <label for="time">Uhrzeit</label>
                        <input type="time" name="time" class="form-control"
                        value="{{ request.form['time'] }}" style="width: 80px;" required></input>
                    </div>
                    <div style="padding: 3mm;">
                        <label for="alarmMessage">alarmMessage</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>Previous Alarm</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
                    })
                }
                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>
                {{ alarm.datetime }}: {{ alarm.message }}
            </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}