{% extends 'base_rigs.html' %}

{% load widget_tweaks %}
{% load static %}
{% load multiply from filters %}

{% block title %}
    {% if object.pk %}
        Event {% if object.is_rig %}N{{ object.pk|stringformat:"05d" }}{% else %}{{ object.pk }}{% endif %}
    {% else %}New Event{% endif %}
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static "css/bootstrap-select.css" %}"/>
    <link rel="stylesheet" href="{% static "css/ajax-bootstrap-select.css" %}"/>
{% endblock %}

{% block preload_js %}
    <script src="{% static "js/bootstrap-select.js" %}"></script>
    <script src="{% static "js/ajax-bootstrap-select.js" %}"></script>
{% endblock %}

{% block js %}
    <script src="{% static "js/interaction.js" %}"></script>
    <script src="{% static "js/modal.js" %}"></script>
    <script src="{% static "js/tooltip.js" %}"></script>

    <script src="{% static "js/autocomplete.js" %}"></script>

    <script>
        function setTime23Hours() {
            $('#{{ form.end_time.id_for_label }}').val('23:00');
        }

        function setTime02Hours() {
            var id_start = "{{ form.start_date.id_for_label }}";
            var id_end_date = "{{ form.end_date.id_for_label }}";
            var id_end_time = "{{ form.end_time.id_for_label }}";
            if ($('#'+id_start).val() == $('#'+id_end_date).val()) {
                var end_date = new Date($('#'+id_end_date).val());
                end_date.setDate(end_date.getDate() + 1);
                $('#'+id_end_date).val(end_date.getISOString());
            }
            $('#'+id_end_time).val('02:00');
        }

        $(document).ready(function () {
            {% if not object.pk and not form.errors %}

                $('.form-hws').slideUp(function () {
                    $('.form-is_rig').slideUp();
                });

            {% elif not object.pk and form.errors %}
                if ($('#{{form.is_rig.auto_id}}').attr('checked') != 'checked') {
                    $('.form-is_rig').hide();
                }
            {% endif %}

            {% if not object.pk %}
                $('#is_rig-selector button').on('click', function () {
                    $('.form-non_rig').slideDown();
                    if ($(this).data('is_rig') == 1) {
                        $('#{{form.is_rig.auto_id}}').prop('checked', true);
                        if ($('.form-non_rig').is(':hidden')) {
                            $('.form-is_rig').show();
                        } else {
                            $('.form-is_rig').slideDown();
                        }
                        $('.form-hws, .form-hws .form-is_rig').css('overflow', 'visible');
                    } else {
                        $('#{{form.is_rig.auto_id}}').prop('checked', false);
                        $('.form-is_rig').slideUp();
                    }
                });
            {% endif %}

            function supportsDate() {
                //return false; //for development
                var input = document.createElement('input');
                input.setAttribute('type','date');
                var notADateValue = 'not-a-date';
                input.setAttribute('value', notADateValue);
                return !(input.value === notADateValue);
            }
            if(supportsDate()){
                //Good, we'll use the browser implementation
            }else{
                //Rubbish browser - do JQuery backup
                $('<link>')
                  .appendTo('head')
                  .attr({type : 'text/css', rel : 'stylesheet'})
                  .attr('href', '{% static "css/bootstrap-datetimepicker.min.css" %}');
                $.when(
                    $.getScript( "{% static "js/moment.js" %}" ),
                    $.getScript( "{% static "js/bootstrap-datetimepicker.js" %}" ),
                    $.Deferred(function( deferred ){
                        $( deferred.resolve );
                    })
                ).done(function(){
                    $('input[type=date]').attr('type','text').datetimepicker({
                        format: 'YYYY-MM-DD',
                    });
                    $('input[type=time]').attr('type','text').datetimepicker({
                        format: 'HH:mm',
                    });
                    $('input[type=datetime-local]').attr('type','text').datetimepicker({
                        format: 'YYYY-MM-DD[T]HH:mm',
                        sideBySide: true,
                    });
                });

            }
        });

        $(document).ready(function () {
            setupItemTable($("#{{ form.items_json.id_for_label }}").val());
        });
        $(function () {
          $('[data-toggle="tooltip"]').tooltip();
        })
    </script>
{% endblock %}

{% block content %}
{% include 'item_modal.html' %}
<form class="form-horizontal itemised_form" role="form" method="POST">
    {% csrf_token %}
    <div class="row">
        <div class="col-sm-12">
            <h2>
                {% if duplicate %}
                    Duplicate of Event N{{ object.pk|stringformat:"05d" }}
                {% elif object.pk %}
                    Event N{{ object.pk|stringformat:"05d" }}
                {% else %}
                    New Event
                {% endif %}
            </h2>
        </div>
        {% include 'form_errors.html' %}
        {% render_field form.is_rig style="display: none" %}
        <input type="hidden" name="{{ form.items_json.name }}" id="{{ form.items_json.id_for_label }}"
               value="{{ form.items_json.value }}"/>

        {# New rig buttons #}
        {% if not object.pk %}
            <div class="col-md-12 card">
                <div class="card-body row no-gutters align-items-center" id="is_rig-selector">
			        <span class="col-6" data-toggle="tooltip"
                          title="Anything that involves TEC kit, crew, or otherwise us providing a service to anyone.">
				        <button type="button" class="btn btn-primary w-75" data-is_rig="1">Rig</button>
			        </span>
			        <span class="col-6" data-toggle="tooltip"
                          title="Things that aren't service-based, like training, meetings and site visits.">
				        <button type="button" class="btn btn-info w-75" data-is_rig="0">Non-Rig</button>
			        </span>
                </div>
            </div>
        {% endif %}

        {# Contact details #}
        {% include 'partials/contact_details_form.html' %}

        {# Event details #}
        {% include 'partials/event_details_form.html' %}

        {# Notes and item shit #}
        <div class="col-sm-12">
            <div class="card card-default form-hws form-is_rig  {% if object.pk and not object.is_rig %}hidden{% endif %}">
                <div class="card-body">
                    <div class="col-sm-12">
                        <div class="form-group" data-toggle="tooltip" title="Notes on the event. This is only visible to keyholders, and is not displayed on the paperwork">
                            <label for="{{ form.notes.id_for_label }}">{{ form.notes.label }}</label>
                            {% render_field form.notes class+="form-control" %}
                        </div>
                    </div>
                    {% include 'item_table.html' %}
                </div>
            </div>
        </div>
        <div class="col-sm-12 text-right form-hws form-non_rig my-3">
            <div class="btn-group">
                <button type="submit" class="btn btn-primary" title="Save"><i
                        class="fas fa-save"></i> Save
                </button>
            </div>
        </div>
    </div>
</form>
{% endblock %}