{% extends "data-tools-container.html" %}

{% block head %}
    {{ block.super }}
    <script>
        const options = {
            weekday: 'short',
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
        };

        $(function () {
            let load_time = new Date();

            function formatDateToCustomString(date) {
                return date.toLocaleString('en-US', options).replace(',', '');
            }

            function updateTime() {
                $('.time').each(function() {
                    let datetimeStr = $(this).data('time');
                    let datetime = new Date(datetimeStr.replace(/-/g, '/'));

                    let elapsedTime = new Date() - load_time
                    let newDatetime = new Date(datetime.getTime() + elapsedTime);
                    $(this).text(formatDateToCustomString(newDatetime));
                });
            }

            updateTime();
            setInterval(updateTime, 1000);

            $("button[id$='-ntp']").click(function (e) {
                e.preventDefault();
                let dafe_display_name = $(this).attr("id").replace("-ntp", "");
                $.ajax({
                    url: "{% url 'support:data-tools-get-ntp-proxy' %}",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        dafe_display_name: dafe_display_name
                    },
                    success: function (ntp_data, status, jqXHR) {
                        $('#ntp_raw_message').empty();
                        $('#ntp_raw_message').append('<h2 style="text-align: center;">' + dafe_display_name + '</h2>');
                        $('#ntp_raw_message').append(ntp_data);
                    }
                });
            });
        });
    </script>

    <style>
        #data-tools-wrapper {
            display: flex;
            align-items: baseline;
            justify-content: space-evenly;
        }

        #time-table > tbody > tr > td {
            padding: .75vh 2vh;
            border: 1px solid grey;
        }

        #time-table > tbody > tr:nth-child(odd) > td {
            background-color: #f9f9f9;
        }

        [id$="-ntp"] {
            color: #08c;
            border-radius: 2vh;
            border: 2px solid grey;
            font-weight: bold;
            box-sizing: border-box;
        }

        [id$="-ntp"]:hover {
            text-decoration: underline #08c;
            border: 2px solid black;
        }

        #time-table > tbody > tr > td:first-child {
            font-weight: bold;
            text-align: right;
        }

        #time-table > thead > tr > th {
            border-bottom: solid 3px black;
        }

        #ntp_raw_message {
            font-family: monospace;
        }
    </style>
{% endblock %}

{% block sub-content %}
    <div id="data-tools-wrapper">
        <table id="time-table">
            <thead>
                <tr>
                    <th>Dafe</th>
                    <th>Timezone</th>
                    <th>Time</th>
                    <th>NTP</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Database</td>
                    <td>{{database_timezone}}</td>
                    <td><span class="time" data-time="{{database_time}}">{{database_time}}</span></td>
                    <td></td>
                </tr>
                {% for dafe, time_data in dafe_times.items %}
                    <tr>
                        <td>{{dafe}}</td>
                        <td>{{time_data.timezone}}</td>
                        <td><span class="time" data-time="{{time_data.current_datetime}}">{{time_data.current_datetime}}</span></td>
                        <td><button id="{{dafe}}-ntp">NTP</button></td>
                    </tr>
                {% endfor %}
                {% for dafe in error_dafes %}
                    <tr>
                        <td>{{dafe}}</td>
                        <td>Unknown</td>
                        <td>Unknown</td>
                        <td><button id="{{dafe}}-ntp">NTP</button></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div id="ntp_raw_message">

        </div>
    </div>
{% endblock %}