<!-- bottom -->
    <div id="tab-tde" class=""> <!-- timing editor -->
        <div id="tc-edit-container" class=""></div>
    </div> <!-- end of tab-tde -->

    <script>
        function addTabListener() {
            try {
                var tabMain = document.getElementById("tab-lights");
                var tabConfig = document.getElementById("tab-config");
                var tabTDE = document.getElementById("tab-tde");

                var amain = document.getElementById("tab-a-lights");
                var acfg = document.getElementById("tab-a-config");
                var atde = document.getElementById("tab-a-tde");


                amain.addEventListener("click", function() {
                    tabMain.classList.add("visible");
                    tabConfig.classList.remove("visible");
                    tabTDE.classList.remove("visible");

                    amain.classList.add("pure-button-primary");
                    acfg.classList.remove("pure-button-primary");
                    atde.classList.remove("pure-button-primary");
                });

                acfg.addEventListener("click", function() {
                    tabMain.classList.remove("visible");
                    tabConfig.classList.add("visible");
                    tabTDE.classList.remove("visible");

                    amain.classList.remove("pure-button-primary");
                    acfg.classList.add("pure-button-primary");
                    atde.classList.remove("pure-button-primary");
                });

                atde.addEventListener("click", function() {
                    tabMain.classList.remove("visible");
                    tabConfig.classList.remove("visible");
                    tabTDE.classList.add("visible");

                    amain.classList.remove("pure-button-primary");
                    acfg.classList.remove("pure-button-primary");
                    atde.classList.add("pure-button-primary");
                });
            } catch (error) {
                console.log("Fehler in load listener of the tab action listener management: " + error.message);
            }
        }
        window.addEventListener('load', function() {
            addTabListener();
        });

        function loadGraphData() {
            console.log('----> generate graph <----');
            $.getJSON('/tc_data_blocks_read', function(data) {
                var currenttime = [];
                var time = [];
                var channel1 = [];
                var channel2 = [];
                var channel3 = [];
                var channel4 = [];
                for (var i = 0; i < data['tcdata'].length; i++) {
                    time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
                    channel1.push(data['tcdata'][i]['ch1']);
                    channel2.push(data['tcdata'][i]['ch2']);
                    channel3.push(data['tcdata'][i]['ch3']);
                    channel4.push(data['tcdata'][i]['ch4']);
                }
                currenttime.push(data['currenttime']['hour']);
                currenttime.push(data['currenttime']['min']);
                console.log(currenttime);
                var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
                var index = time.indexOf(currentTimeStr);
                if (index === -1) {
                    var lowerIndex = -1;
                    var upperIndex = -1;
                    for (var i = 0; i < time.length - 1; i++) {
                        console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
                        const currentDate = new Date();
                        const year = currentDate.getFullYear();
                        const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
                        const day = currentDate.getDate().toString().padStart(2, '0');
                        const dateString = `${year}-${month}-${day}`;
                        const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
                        const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
                        const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
                        console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
                        console.log(curr.isBetween(start, end));
                        if (curr.isBetween(start, end)) {
                            lowerIndex = i;
                            upperIndex = i + 1;
                            break;
                        }
                    }
                    console.log('lowerIndex=' + lowerIndex);
                    console.log('upperIndex=' + upperIndex);
                    if (lowerIndex === -1 || upperIndex === -1) {
                        console.log("Error: Current time not found in time array and not between two elements in time array.");
                        lowerIndex = 0;
                        upperIndex = 1;
                        var tmp1 = time[0].split(':');
                        console.log('tmp1 = ' + tmp1);
                        currenttime[0] = tmp1[0];
                        currenttime[1] = tmp1[1];
                    }
                    var lowerTime = time[lowerIndex].split(":");
                    var upperTime = time[upperIndex].split(":");
                    var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
                    var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
                    console.log("Index (float): " + indexFloat);
                } else {
                    console.log("Index (integer): " + index);
                    console.log("Index (float): " + index);
                }
                if (indexFloat > index) {
                    index = indexFloat;
                }
                console.log("index in graph >>>" + index);
                var trace1 = {
                    x: time,
                    y: channel1,
                    name: 'Channel 1',
                    type: 'scatter',
                    mode: 'lines+markers',
                };
                var trace2 = {
                    x: time,
                    y: channel2,
                    name: 'Channel 2',
                    type: 'scatter',
                    mode: 'lines+markers',
                };
                var trace3 = {
                    x: time,
                    y: channel3,
                    name: 'Channel 3',
                    type: 'scatter',
                    mode: 'lines+markers',
                };
                var trace4 = {
                    x: time,
                    y: channel4,
                    name: 'Channel 4',
                    type: 'scatter',
                    mode: 'lines+markers',
                };
                var layout = {
                    title: 'Timing Control Data Blocks',
                    xaxis: {
                        title: 'Time',
                        tickangle: -45,
                    },
                    yaxis: {
                        title: 'Brightness',
                        range: [0, 255],
                    },
                    shapes: [{
                        type: 'line',
                        x0: index,
                        y0: 0,
                        x1: index,
                        y1: 255,
                        line: {
                            color: 'lightgrey',
                            width: 3,
                            dash: 'dot'
                        }
                    }]
                };
                Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
            });
        }
        setInterval(loadGraphData, 10000);
        loadGraphData();

        function updateLightState() {
            console.log('----> setting bri and power switch <----');
            for (let i = 1; i <= {{LIGHT_COUNT}}; i++) {
                const lightURL = `http://{{IP_ADDRESS}}/state?light=${i}`;
                fetch(lightURL).then(response => response.json()).then(data => {
                    const briSlider = document.getElementById(`bri${i - 1}`);
                    const briSliderVal = document.getElementById(`bri${i - 1}_val`);
                    const onLinkOn = document.getElementById(`on${i - 1}_on`);
                    const onLinkOff = document.getElementById(`on${i - 1}_off`);
                    briSlider.value = data.bri;
                    briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
                    console.log('data.on ' + i + ' = ' + data.on);
                    if (data.on == true) {
                        onLinkOn.classList.add('pure-button-primary');
                        onLinkOff.classList.remove('pure-button-primary');
                    } else {
                        onLinkOn.classList.remove('pure-button-primary');
                        onLinkOff.classList.add('pure-button-primary');
                    }
                }).catch(error => console.error(error));
            }
        }
        setInterval(updateLightState, 10000);
        updateLightState();

        function updatePWMValues() {
            console.log('----> setting pwm data <----');
            for (let i = 0; i < {{LIGHT_COUNT}}; i++) {
                const lightID = i + 1;
                const pwmElement = document.getElementById(`light${i}_pwm`);
                const pwmElementTxt = document.getElementById(`light${i}_pwm_txt`);
                if (pwmElement) {
                    const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
                    fetch(url).then(response => response.json()).then(data => {
                        const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
                        console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
                        pwmElement.innerText = pwmValue.toString();
                        pwmElement.value = pwmValue;
                        pwmElementTxt.innerText = pwmValue.toString();
                    }).catch(error => console.error(error));
                }
            }
        }
        updatePWMValues();
        setInterval(updatePWMValues, 5000);

        // Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
        var links = document.querySelectorAll('[id^="on"][id$="_off"]');
        // Füge einen Klick-Listener zu jedem Link hinzu
        links.forEach(function(link) {
            link.addEventListener('click', function(event) {
                // Verhindere, dass der Link die Seite neu lädt
                event.preventDefault();
                // Extrahiere die Zahl aus der ID des Links
                var id = this.id.replace('on', '').replace('_off', '');
                // Erstelle eine neue Anfrage an die entsprechende URL
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);
                // Sende die Anfrage im Hintergrund
                xhr.send();
                updateLightState();
                this.classList.add('pure-button-primary');
                document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
            });
        });
        // Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
        var links = document.querySelectorAll('[id^="on"][id$="_on"]');
        // Füge einen Klick-Listener zu jedem Link hinzu
        links.forEach(function(link) {
            link.addEventListener('click', function(event) {
                // Verhindere, dass der Link die Seite neu lädt
                event.preventDefault();
                // Extrahiere die Zahl aus der ID des Links
                var id = this.id.replace('on', '').replace('_on', '');
                // Erstelle eine neue Anfrage an die entsprechende URL
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);
                // Sende die Anfrage im Hintergrund
                xhr.send();
                updateLightState();
                this.classList.add('pure-button-primary');
                document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
            });
        });

        // Erstellen einer neuen XMLHttpRequest-Instanz
        var xhr = new XMLHttpRequest();
        // Angeben der URL und des HTTP-Request-Typs
        xhr.open('GET', 'http://{{IP_ADDRESS}}/tc_data_edit');
        // Festlegen der Funktion, die aufgerufen wird, wenn die Anfrage abgeschlossen ist
        xhr.onload = function() {
            // Überprüfen, ob die Anfrage erfolgreich war
            if (xhr.status === 200) {
                // Fügen Sie den empfangenen HTML-Code in den Container ein
                document.getElementById('tc-edit-container').innerHTML = xhr.responseText;
            } else {
                // Wenn die Anfrage fehlgeschlagen ist, geben Sie einen Fehler aus
                console.log('Fehler beim Laden der URL: ' + xhr.status);
            }
        };
        // Senden der Anfrage
        xhr.send();

    </script>

        </div>
    </fieldset>
</body>
</html>