{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block head %}
{{ super() }}
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
{% endblock %}

{% block app_content %}
<h1>Create a new game</h1>

<div class="col-md-4 col-sm-6 col-xs-8">
    <hr>
    <form action="" method="post" class="form" role="form">
        {{ form.csrf_token() }}
        {{ form.timezone }}
        {{ wtf.form_field(form.game_name, class='form-control') }}

        {{ form.start_time.label }}
        <div class="form-group row">
            <div class="col-sm-7">
                {{ form.start_time }}
            </div>
            <div class="col-sm-5 align-self-center">
                {{ wtf.form_field(form.start_time_disabled, class='form-control') }}
            </div>
        </div>

        {{ form.end_time.label }}
        <div class="form-group row">
            <div class="col-sm-7">
                {{ form.end_time }}
            </div>
            <div class="col-sm-5 align-self-center">
                {{ wtf.form_field(form.end_time_disabled, class='form-control') }}
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <hr>
</div>





{% endblock %}

TODO:
https://eonasdan.github.io/bootstrap-datetimepicker/Options/#locale+
- optie voor nu

{% block scripts %}
{{ super() }}
<!-- TODO: Scripts downloaden naar repo? -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        var date = new Date()
        $('#datetimepicker_start').datetimepicker({
            //useCurrent: false, //Important! See issue #1075
            locale: 'en-gb',
            format: 'DD-MM-YYYY HH:mm',
            keepInvalid: true,
            sideBySide: true,
            defaultDate: date,
            timeZone: moment.tz.guess()
        });
        date.setDate(date.getDate() + 1)
        $('#datetimepicker_end').datetimepicker({
            //useCurrent: false, //Important! See issue #1075
            locale: 'en-gb',
            format: 'DD-MM-YYYY HH:mm',
            keepInvalid: true,
            sideBySide: true,
            defaultDate: date,
            timeZone: moment.tz.guess()
        });
        $("#datetimepicker_start").on("dp.change", function (e) {
            $('#datetimepicker_end').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker_end").on("dp.change", function (e) {
            $('#datetimepicker_start').data("DateTimePicker").maxDate(e.date);
        });
        $("#start_time_disabled").change(function() {
            updateDateTimePicker('#datetimepicker_start', '#start_time_disabled')
        });
        $("#end_time_disabled").change(function() {
            updateDateTimePicker('#datetimepicker_end', '#end_time_disabled')
        });
        function updateDateTimePicker(picker, checkbox){
            if ($(checkbox).prop("checked")) {
                $(picker).data("DateTimePicker").disable();
            }
            else {
                $(picker).data("DateTimePicker").enable();
            }
        }
        updateDateTimePicker('#datetimepicker_start', '#start_time_disabled');
        updateDateTimePicker('#datetimepicker_end', '#end_time_disabled');
        $('#timezone')[0].value = moment.tz.guess();
    });
</script>
{% endblock %}