{% extends 'sovtimer/base.html' %}

{% load i18n %}
{% load static %}

{% block sovtimer_header %}
    {% translate "Sovereignty Timer" as translated_header %}
    {% include 'sovtimer/partials/header/h1.html' with header_text=translated_header %}
{% endblock %}

{% block sovtimer_body %}
    {% include 'sovtimer/partials/dashboard/table.html' %}
{% endblock %}

{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}

    <link rel="stylesheet" href="{% static 'sovtimer/css/aa-bootstrap-fix.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'sovtimer/css/aa-sov-timer.min.css' %}" type="text/css">
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}
    {% include 'bundles/moment-js.html' with locale=True %}

    <script type="application/javascript" src="{% static 'sovtimer/libs/datatables/plugins/dataTables.rowGroup.min.js' %}"></script>
    <script type="application/javascript" src="{% static 'sovtimer/libs/datatables/plugins/datetime.js' %}"></script>
    <script type="application/javascript" src="{% static 'js/filterDropDown/filterDropDown.min.js' %}"></script>

    <script type="application/javascript">
    $(document).ready(function() {
        const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm'

        var secondsToRemainingTime = function(secondsRemaining) {
            var isElapsed = false;
            var prefix = '';

            if(secondsRemaining < 0) {
                isElapsed = true;
                prefix = '-';

                secondsRemaining = Math.abs(secondsRemaining) // remove negative prefix

                secondsRemaining++; // increment with one second each second
            } else {
                secondsRemaining--; // decrement with one second each second
            }

            var days = Math.floor(secondsRemaining / (24 * 60 * 60)); // calculate days
            var hours = Math.floor(secondsRemaining / (60 * 60)) % 24; // hours
            var minutes = Math.floor(secondsRemaining / 60) % 60; // minutes
            var seconds = Math.floor(secondsRemaining / 1) % 60; // seconds

            // leading zero ...
            if(hours < 10) {hours = '0' + hours;}
            if(minutes < 10) {minutes = '0' + minutes;}
            if(seconds < 10) {seconds = '0' + seconds;}

            var countdown = '';

            if(isElapsed === true) {
                countdown += '<span class="aa-sovtimer-remaining aa-sovtimer-timer-elapsed">'
            } else {
                countdown += '<span class="aa-sovtimer-remaining">'
            }

            countdown += prefix + days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's';
            countdown += '</span>';

            var returnValue = {
                remaining_time_in_seconds: prefix + secondsRemaining,
                countdown: countdown
            }

            return returnValue;
        };

        var sov_campaign_table = $('.aa-sovtimer-campaigns').DataTable({
            ajax: {
                url: "{% url 'sovtimer:dashboard_data' %}",
                dataSrc: '',
                cache: false
            },
            columns: [
                {
                    data: 'event_type'
                },
                {
                    data: 'solar_system_name_html'
                },
                {
                    data: 'constellation_name_html'
                },
                {
                    data: 'region_name_html'
                },
                {
                    data: 'defender_name_html'
                },
                {
                    data: 'adm'
                 },
                {
                    data: 'start_time',
                    render: $.fn.dataTable.render.moment(moment.ISO_8601, DATETIME_FORMAT)
                },
                {
                    data: 'remaining_time'
                },
                {
                    data: 'defender_score'
                },

                // hidden column
                {
                    data: 'remaining_time_in_seconds',
                },
                {
                    data: 'solar_system_name',
                },
                {
                    data: 'constellation_name',
                },
                {
                    data: 'region_name',
                },
                {
                    data: 'defender_name',
                },
            ],
            columnDefs: [
                {
                    visible: false,
                    targets: [9, 10, 11, 12, 13]
                }
            ],
            order: [[6, "asc"]],
            filterDropDown: {
                columns: [
                    {
                        idx: 0,
                    },
                    {
                        idx: 10,
                        title: "{% translate 'System' %}"
                    },
                    {
                        idx: 11,
                        title: "{% translate 'Constellation' %}"
                    },
                    {
                        idx: 12,
                        title: "{% translate 'Region' %}"
                    },
                    {
                        idx: 13,
                        title: "{% translate 'Owner / Defender' %}"
                    },
                ],
                autoSize: false,
                bootstrap: true
            },
            paging: false
        });

        // refresh campaign data every 30 seconds
        setInterval(function() {
            sov_campaign_table.ajax.reload();
        }, 30000 );

        // refresh remaining time every second
        setInterval(function() {
            sov_campaign_table.rows().every(function() {
                var d = this.data();

                var remaining = secondsToRemainingTime(d['remaining_time_in_seconds']);

                d['remaining_time_in_seconds'] = remaining.remaining_time_in_seconds;
                d['remaining_time'] = remaining.countdown;

                sov_campaign_table.row(this).data(d);
            });
        }, 1000);
    });
    </script>
{% endblock %}

{% block extra_script %}
{% endblock extra_script %}
