{% extends 'base.html.twig' %}

{% block main %}
    {% set formEditTemplate = 'default/_form.html.twig' %}
    {% set formOptions = {
        'title': 'edit'|trans,
        'form': form,
        'back': path(back),
    } %}
    {% embed formEditTemplate with formOptions %}
        {% block form_body %}
            <fieldset class="form-fieldset pb-0">
                <div class="row">
                    <div class="col-md-4">
                        {{ form_row(form.customer) }}
                    </div>
                    <div class="col-md-4">
                        {{ form_row(form.project) }}
                    </div>
                    <div class="col-md-4">
                        {{ form_row(form.activity) }}
                    </div>
                </div>
            </fieldset>
            <fieldset class="form-fieldset pb-0 h-100">
                {{ form_row(form.replaceDescription) }}
                {{ form_row(form.description) }}
            </fieldset>
            <fieldset class="form-fieldset pb-0 h-100">
                {{ form_row(form.replaceTags) }}
                {{ form_row(form.tags) }}
            </fieldset>
            {% if form.user is defined %}
                <fieldset class="form-fieldset pb-0">
                    {{ form_row(form.user) }}
                </fieldset>
            {% endif %}
            {% if form.exported is defined %}
                <fieldset class="form-fieldset pb-0">
                    {{ form_row(form.exported) }}
                </fieldset>
            {% endif %}
            {% if form.billable is defined %}
                <fieldset class="form-fieldset pb-0">
                    {{ form_row(form.billable) }}
                </fieldset>
            {% endif %}
            {% if form.recalculateRates is defined %}
                <fieldset class="form-fieldset pb-0">
                    {{ form_row(form.recalculateRates) }}
                    <div class="row">
                        <div class="col-md-6">
                            {{ form_row(form.fixedRate) }}
                        </div>
                        <div class="col-md-6">
                            {{ form_row(form.hourlyRate) }}
                        </div>
                    </div>
                </fieldset>
            {% endif %}
            {% if form.metaFields is defined %}
                <fieldset class="form-fieldset pb-0">
                    <div class="row">
                        <div class="col-md-6">
                            {{ form_row(form.updateMeta) }}
                        </div>
                        <div class="col-md-6">
                            {{ form_row(form.metaFields) }}
                        </div>
                    </div>
                </fieldset>
            {% endif %}
            {{ form_rest(form) }}
        {% endblock %}
    {% endembed %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        window.addEventListener('load', function() {
            {% if form.recalculateRates is defined %}
            document.getElementById('{{ form.recalculateRates.vars.id }}').onchange = function() {
                if (this.checked) {
                    document.getElementById('{{ form.fixedRate.vars.id }}').setAttribute('disabled', 'disabled');
                    document.getElementById('{{ form.hourlyRate.vars.id }}').setAttribute('disabled', 'disabled');
                } else {
                    document.getElementById('{{ form.fixedRate.vars.id }}').removeAttribute('disabled');
                    document.getElementById('{{ form.hourlyRate.vars.id }}').removeAttribute('disabled');
                }
            };
            {% endif %}
            {% if form.metaFields is defined %}
            let allElements = document.getElementsByName('{{ form.vars.name }}')[0].elements;
            for (let i = 0; i < allElements.length; ++i) {
                let el = allElements[i];
                let elAttr = el.getAttribute('name');
                if (elAttr === null) {
                    continue;
                }
                if (elAttr.indexOf('{{ form.metaFields.vars.full_name }}') !== -1) {
                    {# disable all custom fields, each one has to be activated before it can be used #}
                    el.setAttribute('disabled', 'disabled');
                    if (el.tomselect !== undefined) {
                        el.tomselect.disable();
                    }
                } else if (elAttr.indexOf('{{ form.updateMeta.vars.full_name }}') !== -1) {
                    el.checked = false;
                    el.onclick = function() {
                        let searchElements = document.getElementsByName('{{ form.vars.name }}')[0].elements;
                        let metaCheckbox = this;
                        let metaName = metaCheckbox.value;
                        for (let s = 0; s < searchElements.length; ++s) {
                            let current = searchElements[s];
                            let currentAttr = current.getAttribute('name');
                            if (currentAttr === null) {
                                continue;
                            }
                            if (currentAttr.indexOf('{{ form.metaFields.vars.full_name }}') === -1) {
                                continue;
                            }
                            if (current.dataset.name === undefined || current.dataset.name !== metaName) {
                                continue;
                            }
                            if (metaCheckbox.checked) {
                                current.removeAttribute('disabled');
                                if (current.tomselect !== undefined) {
                                    current.tomselect.enable();
                                }
                            } else {
                                current.setAttribute('disabled', 'disabled');
                                if (current.tomselect !== undefined) {
                                    current.tomselect.disable();
                                }
                            }
                        }
                    };
                }
            }
            {% endif %}
        });
    </script>
{% endblock %}