{% set counter = 0 %}

<script language="Javascript">
    var formItems = new Array();

    function populateForm(itemCounter) {

        var formItem = JSON.parse($('#formItemJson_' + itemCounter).val());

        $('#contentbundle_formitemtype_id').val(formItem.id);
        $('#contentbundle_formitemtype_form_item_type').each(function () {
            this.selected = (this.value == formItem.form_item_type);
        });
        $('#contentbundle_formitemtype_form_item_type').select2('val', formItem.form_item_type);
        $('#contentbundle_formitemtype_prompt').val(decodeURIComponent(formItem.prompt));
        $('#contentbundle_formitemtype_description').val(decodeURIComponent(formItem.description));
        $('#contentbundle_formitemtype_sentence_part').val(decodeURIComponent(formItem.sentence_part));
        $('#contentbundle_formitemtype_default_value').val(decodeURIComponent(formItem.default_value));

        if (formItem.is_required == 'true' || formItem.is_required === true) {
            $('#contentbundle_formitemtype_is_required').prop('checked', true);
        } else {
            $('#contentbundle_formitemtype_is_required').prop('checked', null);
        }

        $('#contentbundle_formitemtype_min_value').val(formItem.min_value);
        $('#contentbundle_formitemtype_max_value').val(formItem.max_value);

        var optionsString = new String();

        if (!Array.isArray(formItem.select_list_options)) {
            formItem.select_list_options = new String(formItem.select_list_options).split("\n");
        }

        for (oCnt = 0; oCnt < formItem.select_list_options.length; oCnt++) {

            optionsString += decodeURIComponent(formItem.select_list_options[oCnt]);

            if (oCnt < formItem.select_list_options.length - 1) {
                optionsString += "\n";
            }
        }

        $('#contentbundle_formitemtype_select_list_options').val(optionsString);

        $('#buttonSaveItem').html('{{ 'Update Item'|phrase }}');

        window.onbeforeunload = function () {
            return 'Are you sure you want to leave this page? You must click one of the SAVE buttons to save data to the database.';
        };

        $("form").submit(function (event) {
            window.onbeforeunload = null;
        });

        $('#addFormItem').css('display', 'block');
        $('#linkExistingFormItem').css('display', 'none');

        return false;
    }

    function unlinkItem(itemCounter) {

        formItems = JSON.parse($('#formItemsJson').val());

        if ($('#formItemsUnlinked').val() != '') {
            formItemsDeleted = JSON.parse($('#formItemsUnlinked').val());
        } else {
            formItemsDeleted = new Array();
        }

        for (iCnt = 0; iCnt < formItems.formItems.length; iCnt++) {
            if (iCnt == itemCounter) {
                formItemsDeleted.push(formItems.formItems[iCnt]);
                formItems.formItems.splice(iCnt, 1);
            }
        }

        $('#formItemsJson').val(JSON.stringify(formItems));
        $('#formItemsUnlinked').val(JSON.stringify(formItemsDeleted));

        loadListFromJson();

        window.onbeforeunload = function () {
            return 'Are you sure you want to leave this page? You must click one of the SAVE buttons to unlink items from this form.';
        };

        $("form").submit(function (event) {
            window.onbeforeunload = null;
        });

        return false;
    }

    function deleteItem(itemCounter) {

        formItems = JSON.parse($('#formItemsJson').val());

        if ($('#formItemsDeleted').val() != '') {
            formItemsDeleted = JSON.parse($('#formItemsDeleted').val());
        } else {
            formItemsDeleted = new Array();
        }

        for (iCnt = 0; iCnt < formItems.formItems.length; iCnt++) {
            if (iCnt == itemCounter) {
                formItemsDeleted.push(formItems.formItems[iCnt]);
                formItems.formItems.splice(iCnt, 1);
            }
        }

        $('#formItemsJson').val(JSON.stringify(formItems));
        $('#formItemsDeleted').val(JSON.stringify(formItemsDeleted));

        loadListFromJson();

        window.onbeforeunload = function () {
            return 'Are you sure you want to leave this page? You must click one of the SAVE buttons to delete items from the database.';
        };

        $("form").submit(function (event) {
            window.onbeforeunload = null;
        });

        return false;
    }

    function moveItem(itemCounter, moveUp) {

        formItems = JSON.parse($('#formItemsJson').val());

        if (moveUp) {
            exchangeItem = parseInt(itemCounter) - 1;
        } else {
            exchangeItem = parseInt(itemCounter) + 1;
        }

        if (exchangeItem >= 0 && exchangeItem < formItems.formItems.length) {
            var dummy = formItems.formItems[exchangeItem];
            formItems.formItems[exchangeItem] = formItems.formItems[itemCounter];
            formItems.formItems[itemCounter] = dummy;
        }

        $('#formItemsJson').val(JSON.stringify(formItems));

        loadListFromJson();

        window.onbeforeunload = function () {
            return 'Are you sure you want to leave this page? You must click one of the SAVE buttons to save item order to the database.';
        };

        $("form").submit(function (event) {
            window.onbeforeunload = null;
        });

        return false;
    }
</script>
{% for formItem in formItems.formItems %}

    {% if formItem.widget_name == 'paragraph' or formItem.widget_name == 'heading' %}
        {% if formItem.widget_name == 'heading' %}
            <h5>{{ formItem.prompt|urldecode }}</h5>
        {% else %}
            <p>{{ formItem.description|urldecode|nl2br }}</p>
        {% endif %}

        <a href="#" id="formItemEdit_{{ counter }}" counter-value="{{ counter }}">{{ 'Edit'|phrase }}</a>
        <a href="#" id="formItemUnlink_{{ counter }}" counter-value="{{ counter }}">{{ 'Unlink'|phrase }}</a>
        <a href="#" id="formItemDelete_{{ counter }}" counter-value="{{ counter }}">{{ 'Delete'|phrase }}</a>
        <a href="#" id="formItemMoveUp_{{ counter }}" counter-value="{{ counter }}" class="dropup"><span class="caret"></span></a>
        <a href="#" id="formItemMoveDown_{{ counter }}" counter-value="{{ counter }}"><span class="caret"></span></a>
        <textarea id="formItemJson_{{ counter }}" style="display: none;">{{ formItem.json_string }}</textarea>
    {% else %}

        <div class="form-group row" {% if formItem.description != '' %} data-toggle="popover" data-content="{{ formItem.description|urldecode }}" title="{{ formItem.prompt|urldecode }}"{% endif %}>
            <div class="col-sm-3 formLabel">
                <label for="some_form_element_{{ formItem.id }}">{{ formItem.prompt|urldecode }}</label>
                <br />
                <a href="#" id="formItemEdit_{{ counter }}" counter-value="{{ counter }}">{{ 'Edit'|phrase }}</a>
                <a href="#" id="formItemUnlink_{{ counter }}" counter-value="{{ counter }}">{{ 'Unlink'|phrase }}</a>
                <a href="#" id="formItemDelete_{{ counter }}" counter-value="{{ counter }}">{{ 'Delete'|phrase }}</a>
                <a href="#" id="formItemMoveUp_{{ counter }}" counter-value="{{ counter }}" class="dropup"><span class="caret"></span></a>
                <a href="#" id="formItemMoveDown_{{ counter }}" counter-value="{{ counter }}"><span class="caret"></span></a>
                <textarea id="formItemJson_{{ counter }}" style="display: none;">{{ formItem.json_string }}</textarea>
            </div>
            <div class="col-sm-9 formPrompt">
                {% if formItem.widget_id is defined %}
                    {{ form_widget(attribute(formCompletedForm, formItem.widget_id)) }}
                {% else %}
                    {{ 'Save the form to view the preview'| phrase }}
                {% endif %}
            </div>
        </div>

    {% endif %}

    <script language="Javascript">

        formItems[formItems.length] = {{ counter }};
                $(document).ready(function () {
            $('#formItemEdit_{{ counter }}').click(function () {
                return populateForm($(this).attr('counter-value'));
            });
            $('#formItemUnlink_{{ counter }}').click(function () {
                return unlinkItem($(this).attr('counter-value'));
            });
            $('#formItemDelete_{{ counter }}').click(function () {
                return deleteItem($(this).attr('counter-value'));
            });
            $('#formItemMoveUp_{{ counter }}').click(function () {
                return moveItem($(this).attr('counter-value'), true);
            });
            $('#formItemMoveDown_{{ counter }}').click(function () {
                return moveItem($(this).attr('counter-value'), false);
            });
        });
    </script>

    {% set counter = counter + 1 %}
{% endfor %}

<script language="Javascript">

    $(document).ready(function () {
        $('select').select2();
        $(".datepicker").datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true
        });
        $(".datetimepicker").datetimepicker({
            format: 'd-m-Y H:i',
            changeMonth: true,
            changeYear: true,
            changeTime: true
        });
        $('.timepicker').timepicker();
    });
</script>

<div class="row form-actions formActions">
    <button type="submit" class="btn btn-primary">{{ 'Save'|phrase }}</button>
</div>

<script language="Javascript">
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover({placement: 'top', trigger: 'hover'});
    });
</script>