{% extends 'app/base.html' %} 
{% load static %}

{% block content %}

<script>
    document.getElementById('body').classList.replace('bg-white-color','bg-blue-color');
    document.getElementById('header-color-block').classList.replace('bg-white-color','bg-blue-color');
    document.getElementById('HeaderText').style.display = 'block';
    document.getElementById('maincontainer').classList.replace('align-items-center', 'align-items-top')
</script>

<div class="container" id="welcome_content">
    <br>
    <h1>Wilkommen!</h1>
    <p>
        Schön das du hier bist!
        <br>Ich wünsche dir viel Freude mit der App.
        <br>Diese ist noch ganz neu und wächst immer weiter!
        <br>
        <br><b>Hinweis:</b>
        <br>Die App rundet immer ab 15min auf die nächste halbe Stunde auf.
        <br>In Zukunft wird dies einstellbar sein.
        <br>
        <br><b>Verwendung:</b>
        <br>Diese Daten liegen erstmal lokal auf deinem Handy. In Zukunft wird es so sein,
        <br>das du dir einen Account anlegen kannst und die Daten gesichert werden und du auch über andere Geräte darauf zugreifen kannst.
        <br><i style="color: red">Wenn du <u>aktuell</u> die App löscht, sind <u>alle</u> Daten weg!</i>
        <br>
        <br><b>Datenschutz</b>
        <br>Sowohl jetzt, als auch mit einem Account werden keine Personen bezogenen Daten gesammelt oder gesichert.
    </p>
    <br>
    <button class="btn btn-primary" id="allOk">Alles klar</button>
</div>

<div class="container mt-5" id="update_content">
    
    {% include 'app/updateinfo.html' %}

    <button class="btn btn-primary" id="allUpdateOk">Alles klar</button>
</div>

<div class="d-none" id="dashboard">
    <div class="row justify-content-around mt-3" style="width: 100vw; color: black;">
        <div class="col-11" id="dashbord_year_area" style="height: 5vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
            <div class="row justify-content-between">
                <p class="col-6" style="font-size: 1rem; margin-top: -0.75rem;"><b>Jahr:</b> <span id="yearHours"></span>h/600h</p>
                <p class="offset-1 col-5" style="font-size: 1rem; margin-top: -0.75rem;"><b>Offen:</b> <span id="yearRest"></span>h</p>
            </div>
            <div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -1rem;">
                <div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 0.5%; height: 5px;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50" id="prBarYear"></div>
            </div>
        </div>
        <div class="col-11 mt-4" id="dashbord_month_area" style="padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">

            <div class="row justify-content-between">
                <p class="col-7" style="font-size: 1.25rem;"><b id="MonthNameOfActual">Monat:</b> <span id="monthHours"></span>h</p>
                <input type="number" class="d-none" id="MonthSumHours">
                <p class="col-5" style="font-size: 1.25rem;"><b>Offen:</b> <span id="monthRest"></span>h</p>
            </div>

            <div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -0.75rem">
                <div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); height: 5px; width: 1%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50" id="prBarMonth"></div>
            </div>

            <div class="row justify-content-around">
                <button class="col-3 mt-3 badge badge-primary" style="height: 25px; border: none;">Dienst: <span id="monthHourService"></span>h</button>
                <button class="col-3 mt-3 badge badge-primary" style="height: 25px; border: none;">LDC: <span id="monthHourLDC"></span>h</button>
                <button class="col-3 mt-3 badge badge-primary" style="height: 25px; border: none;">Übrig: <span id="monthHourOther"></span>h</button>
            </div>

            <div class="row justify-content-around align-middle monthEntrys mt-3" style="max-height: 2.5rem; width: 99%; margin-left: 1%;">
                <span class="col-2 btn btn-secondary" id="btn-month-before" onclick="event.stopPropagation();"><</span>
                <p class="col-6" style="text-align:center; width: 100%; font-size: 1.75rem; margin: 0;"><b id="actualMonthName"></b></p>
                <span class="col-2 btn btn-secondary" id="btn-month-next" onclick="event.stopPropagation();">></span>
            </div>

        </div>
    </div>    
    <div class="row justify-content-around" style="width: 100vw; color: black; padding-top: 2rem;">
        <div class="col-11" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
            <p style="font-size: 1.2rem;"><b>Timer</b></p>
            <div class="row justify-content-between" style="margin-top: -1rem;">
                <p class="col-5"><b id="timerDisplay" style="font-size: 2.5rem;">00:00</b><i id="secondsDisplay" style="font-size: 1rem;">:00</i></p>
                <div class="col-7 row justify-content-center">
                    <img id="startTimer" src="{% static 'app/images/play.png' %}" alt="play" class="img-fluid col-6" style="height: 55px;">
                    <img id="pauseTimer" src="{% static 'app/images/pause.png' %}" alt="play" class="img-fluid col-6 d-none" style="height: 55px;">
                    <img id="resetTimer" src="{% static 'app/images/stop.png' %}" alt="play" class="img-fluid col-6 d-none" style="height: 55px">
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;"></div>
        <div class="col-12" id="ActivitysTable"  style="height: 40vh; padding: 0rem 1rem 1rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray; overflow-y: auto;">
            <div class="row justify-content-between align-items-center m-0" style="width: 100%;position: sticky; top: 0; background-color: white; padding-top: 1rem; z-index: 100;">
                <p class="col-5" style="font-size: 1.2rem; margin: 0 1rem 0 -1rem;" ><b>Aktivitäten</b></p>
                <!-- <span class="col-2" style="margin-left: 32%; padding: 0;"><img id="resetTimer" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid" style="height: 35px"></span> -->
                <button type="button" id="openNewEntryForm" class="offset-2 col-2 btn btn-light" data-bs-toggle="modal" data-bs-target="#newEntryModal"><img id="openNewEntryFormIcon" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid"></button>
                <button type="button" id="openViewOfEntry" class="offset-1 col-2 btn btn-light d-none"><img id="openViewOfEntryIcon" src="{% static 'app/images/open.png' %}" alt="open" class="img-fluid"></button>
            </div>
            <table class="table table-striped" style="z-index: 1;">
                <tbody id="entriesTableBody" style="overflow-y: auto; max-height: 70%;"></tbody>
            </table>
        </div>
    </div>    
</div>

<style>
    table {
        width: 100%;
    }

    .table td {
        text-overflow:initial;
        max-width: 100px;
    }
      
    tbody tr {
        position: relative;
        transition: transform 0.3s ease-in-out;
    }
      
    tbody tr.swipe-left {
        transform: translateX(0%);
    }
      
    tbody tr.swipe-left .delete-btn {
        display: block;
    }
</style>



<!-- NEUER EINTRAGModal -->
<div class="modal fade" id="newEntryModal" tabindex="-1" aria-labelledby="newEntryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="newEntryModalLabel">Neuer Eintrag</h5>
                <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal" aria-label="Schließen">X</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="">
                    {% csrf_token %}
                    <!-- Dauer in Stunden und Minuten -->
                    <div class="form-row">
                        <div class="form-group col-7">
                            <p><b>Dauer</b></p>
                            <div class="input-group">
                                <input type="number" class="form-control" id="stunden" placeholder="00" min="0" max="99" maxlength="2">
                                <div class="input-group-append">
                                    <span class="input-group-text">h</span>
                                </div>
                                <input type="number" class="form-control" id="minuten" placeholder="00" min="0" max="59" maxlength="2" value="0" required>
                                <div class="input-group-append">
                                    <span class="input-group-text">min</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Datum -->
                    <div class="form-group">
                        <p><b>Datum</b></p>
                        <input type="date" class="form-control" id="datum" required>
                    </div>

                    <!-- Auswahl LDC oder Sonstiges (Checkboxen) -->
                    <div class="form-group">
                        <p><b>Optionen:</b></p>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="ldcCheck" name="optionen" value="LDC">
                                <label class="form-check-label" for="ldcCheck">LDC</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="sonstigesCheck" name="optionen" value="Sonstiges">
                                <label class="form-check-label" for="sonstigesCheck">Sonstiges</label>
                            </div>
                        </div>
                    </div>

                    <!-- Textfeld für Sonstiges (versteckt, wenn Sonstiges nicht gewählt ist) -->
                    <div class="form-group" id="sonstiges-text" style="display:none;">
                        <!-- 
                            <label for="sonstigesInput">Beschreibung:</label>
                         -->
                        <input type="text" class="form-control" id="sonstigesInput" placeholder="max. 10 Zeichen" maxlength="10">
                    </div>
                    <button type="button" class="btn btn-light disabled" id="newEntrySubmitButton" data-bs-dismiss="modal">Hinzufügen</button>
                </form>
            </div>
        </div>
    </div>
</div>




<!-- EINTRAG BEARBEITEN -->
<div class="modal fade" id="editEntryModel" tabindex="-1" aria-labelledby="editEntryModel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="newEntryModalLabel">Eintrag bearbeiten</h5>
                <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal" aria-label="Schließen" id="closeEditWindowButton">X</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="">
                    {% csrf_token %}
                    <input type="text" name="editEntryID" id="editEntryID" class="d-none">
                    <!-- Dauer in Stunden und Minuten -->
                    <div class="form-row">
                        <div class="form-group col-7">
                            <p><b>Dauer</b></p>
                            <div class="input-group">
                                <input type="number" class="form-control editItem" id="editStunden" placeholder="00" min="0" max="99" maxlength="2">
                                <div class="input-group-append">
                                    <span class="input-group-text">h</span>
                                </div>
                                <input type="number" class="form-control editItem" id="editMinuten" placeholder="00" min="0" max="59" maxlength="2" value="0" required>
                                <div class="input-group-append">
                                    <span class="input-group-text">min</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Datum -->
                    <div class="form-group">
                        <p><b>Datum</b></p>
                        <input type="date" class="form-control editItem" id="editDatum" required>
                    </div>

                    <!-- Auswahl LDC oder Sonstiges (Checkboxen) -->
                    <div class="form-group">
                        <p><b>Optionen:</b></p>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input editItem" type="checkbox" id="editldcCheck" name="editldcCheck" value="LDC">
                                <label class="form-check-label" for="editldcCheck">LDC</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input editItem" type="checkbox" id="editsonstigesCheck" name="editsonstigesCheck" value="Sonstiges">
                                <label class="form-check-label" for="editsonstigesCheck">Sonstiges</label>
                            </div>
                        </div>
                    </div>

                    <!-- Textfeld für Sonstiges (versteckt, wenn Sonstiges nicht gewählt ist) -->
                    <div class="form-group" id="edit-sonstiges-text" style="display:none;">
                        <!-- 
                            <label for="sonstigesInput">Beschreibung:</label>
                         -->
                        <input type="text" class="form-control editItem" id="editsonstigesInput" placeholder="max. 10 Zeichen" maxlength="10">
                    </div>
                    <button type="button" class="btn btn-primary" id="editEntrySubmitButton" data-bs-dismiss="modal">Speichern</button>
                    <button type="button" class="btn btn-danger" id="DeleteEntryButton" data-bs-dismiss="modal">Löschen</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<script>

    // Setze das heutige Datum als Standardwert
    document.getElementById('datum').value = new Date().toISOString().split('T')[0];

    /* Verarbeitung der Einstellungen */

    const settingsIcon = document.getElementById('settings_icon')
    settingsIcon.addEventListener('click', () => {
        document.getElementById('header-bg-block').classList.replace('HeaderDefaultHeightbg', 'openSettingsbg')
        document.getElementById('header-bg-block').classList.replace('closeSettingsbg', 'openSettingsbg')
        document.getElementById('header-color-block').classList.replace('HeaderDefaultHeightcolor', 'openSettingscolor')
        document.getElementById('header-color-block').classList.replace('closeSettingscolor', 'openSettingscolor')
        document.getElementById('refresh_icon').style.opacity = 0;
        document.getElementById('settings_icon').classList.add('d-none');
       document.getElementById('settings_close_icon').classList.remove('d-none');
    })
    document.getElementById('settings_close_icon').addEventListener('click', () => {
        document.getElementById('header-bg-block').classList.replace('openSettingsbg', 'closeSettingsbg')
        document.getElementById('header-color-block').classList.add('openSettingscolor', 'closeSettingscolor')
        document.getElementById('settings_icon').classList.remove('d-none');
        document.getElementById('settings_close_icon').classList.add('d-none');
        document.getElementById('refresh_icon').style.opacity = 1;
    })
</script>

<script src="{% static 'app/js/home01.js' %}"></script>
<script src="{% static 'app/js/timer.js' %}"></script>
<script src="{% static 'app/js/welcomeControl.js' %}"></script>
<script src="{% static 'app/js/UpdateInfoControl.js' %}"></script>
{% endblock %}