{% extends 'base_rigs.html' %}

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

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

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

{% block js %}
    {{ block.super }}
    <script src="{% static 'js/jquery-ui.js' %}"></script><!--TODO optimise--->
    <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/autocompleter.js' %}"></script>

    {% include 'partials/datetime-fix.html' %}

    <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-hws').removeAttr('style');
                    $('.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 %}
        });
        $(document).ready(function () {
            setupItemTable($("#{{ form.items_json.id_for_label }}").val());
        });
        $(function () {
          $('[data-toggle="tooltip"]').tooltip();
        })
    </script>
    <noscript>
        <style>
        .form-hws {
            display: inherit !important;
        }
        </style>
    </noscript>
{% 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-12">
            {% include 'form_errors.html' %}
        </div>
        {% 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-sm-12">
            <div class="card text-center" id="is_rig-selector">
                <div class="card-body">
		            <span 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-25" data-is_rig="1">Rig</button>
		            </span>
		            <span data-toggle="tooltip"
                          title="Things that aren't service-based, like training, meetings and site visits.">
			            <button type="button" class="btn btn-info w-25" data-is_rig="0">Non-Rig</button>
		            </span>
                </div>
            </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 %}" style="display: none;">
                <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" style="display: none;">
            {% button 'submit' %}
        </div>
    </div>
</form>
{% endblock %}