{% extends "base.html" %}

{% block title %}
Timerboard
{% if perms.django_eveonline_timerboard.add_evetimer %}
<button class="pull-right btn btn-success" data-toggle="modal" data-target="#addTimerModal">Add Timer</button>
{% endif %}
{% endblock %}

{% block content %}

<div class="card">
    <div class="card-body">
        <table class="table table-bordered table-hover">
            <thead>
                <th scope="col">Countdown</th>
                <th scope="col" class="d-none d-lg-table-cell">Timer</th>
                <th scope="col" class="d-none d-lg-table-cell">Name</th>
                <th scope="col">Actions</th>
            </thead>
            <tbody>
                {% for evetimer in timers %}
                <tr>
                    <!-- Countdown -->
                    <td data-order="{{evetimer.timer}}">
                        <div id="{{evetimer.pk}}" class="countdown">
                            <p class="date" hidden>{{evetimer.timer.isoformat}}</p>
                            <p class="counter"><i class="fa fa-spinner fa-spin"></i></p>
                        </div>
                    </td>
                    <!-- Timer -->
                    <td class="d-none d-lg-table-cell">
                        <p>{{evetimer.timer |date:'H:i:s'}}</p>
                    </td>
                    <!-- Name -->
                    <td class="d-none d-lg-table-cell">
                        {{evetimer.name}}
                    </td>
                    <!-- Action -->
                    <td>
                    {% include 'django_eveonline_timerboard/adminlte/components/timer_button.html' %} 
                    {% include 'django_eveonline_timerboard/adminlte/components/timer_modal.html' %} 
                    
                    </td>
                    
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<form method="POST" action="{% url 'django-eveonline-timerboard-timer-add' %}">
    <div class="modal fade col-md-12" id="addTimerModal" data-backdrop="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Create Timer</h4>
                </div>

                <div class="modal-body">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="timerName">Identifier</label>
                        <input type="text" class="form-control" id="timerName" name="name"
                            placeholder="P2 M1 - Final Timer" maxlength="64" required>
                    </div>
                    <div class="form-group">
                        <label for="timerLocation">Location</label>
                        <input type="text" class="form-control" id="timerLocation" name="location" placeholder="Jita"
                            maxlength="32" required>
                    </div>
                    <div class="form-group">
                        <label for="type">Type</label>
                        <select class="form-control" id="type" name="type" required>
                            {% for type in types %}
                            <option value="{{type.pk}}">{{type.name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="days">Days</label>
                        <input class="form-control" id="days" type="number" value="0" name="days" required>
                        <br>
                        <label max="24" min="0" for="hours">Hours</label>
                        <input class="form-control" id="hours" type="number" value="0" name="hours" required>
                        <br>
                        <label max="60" min="0" for="minutes">Minutes</label>
                        <input class="form-control" id="minutes" type="number" value="0" name="minutes" required>
                        <br>
                        <label max="60" min="0" for="seconds">Seconds</label>
                        <input class="form-control" id="seconds" type="number" value="0" name="seconds" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Submit</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
</form>

{% endblock %}

{% block scripts %}
<script>
    setInterval(function () {
        var countdowns = document.getElementsByClassName('countdown')
        for (i = 0; i < countdowns.length; i++) {
            // pull date
            var elements = countdowns[i].getElementsByTagName('*')
            var date = new Date(elements[0].innerText)
            var now = new Date().getTime()
            var distance = date - now
            // calculate times
            sign = Math.sign(distance)
            distance = Math.abs(distance)
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            // display result
            elements[1].innerHTML = (sign < 0 ? "-" : "") + days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        }
    }, 1000);

</script>

<script>
    $(function () {
        $('table').DataTable({
            'paging': false,
            'lengthChange': false,
            'searching': false,
            'ordering': true,
            'info': false,
            'autoWidth': false,
            'order': [[1, 'asc']],
            'columnDefs': [
                { 'orderable': false, 'targets': 0 }
            ]
        })
    })
</script>
{% endblock %}