<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Page for FormBuilder with enabled Javascript</title>
</head>
<body>
<div id="site">
    {% block content %}
        {{ pimcore_areablock('dachcomBundleTest') }}
    {% endblock %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="{{ asset('bundles/formbuilder/js/frontend/plugins/jquery.fb.core.form-builder.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/formbuilder/js/frontend/plugins/jquery.fb.ext.conditional-logic.js') }}"></script>
<script type="text/javascript" src="{{ preload(asset('bundles/formbuilder/js/frontend/plugins/jquery.fb.ext.repeater.js')) }}"></script>
<script type="text/javascript" src="{{ asset('bundles/formbuilder/js/frontend/vendor/dependsOn/dependsOn.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/formbuilder/js/frontend/vendor/fineuploader/jquery.fine-uploader.min.js') }}"></script>
<script>
    $(function () {
        var $forms = $('form.formbuilder'), $ajaxForms = $('form.formbuilder.ajax-form');
        $ajaxForms.formBuilderAjaxManager();
        $forms.formBuilderConditionalLogic();
        $forms.formBuilderRepeater();

        $forms.on('formbuilder.test.cl.action.fired_event.enable', function(ev) {
            var $el;
            $el = $('<div/>', {
                'class': 'form-event-success',
                'data-target': $(ev.target).attr('id'),
                'data-event' : 'formbuilder.test.cl.action.fired_event.enable',
                'html': 'event reached: formbuilder.test.cl.action.fired_event.enable'
            });
            $el.insertBefore($(this));
        });

        $forms.on('formbuilder.test.cl.action.fired_event.disable', function(ev) {
            var $el;
            $el = $('<div/>', {
                'class': 'form-event-success',
                'data-target': $(ev.target).attr('id'),
                'data-event' : 'formbuilder.test.cl.action.fired_event.disable',
                'html': 'event reached: formbuilder.test.cl.action.fired_event.disable'
            });
            $el.insertBefore($(this));
        });

        $ajaxForms.on('formbuilder.success', function (ev, message, redirect, $form) {
            var $el, messageData;
            ev.preventDefault();
            messageData = redirect ? 'redirect to: ' + redirect : message[0]['message'];
            $el = $('<div/>', {'class': 'form-success-wrapper', 'html': messageData});
            $el.insertBefore($(this));
            $(this).remove();
        }).on('formbuilder.error', function (ev, messages, $form) {
            var alertMessages = [];
            $.each(messages, function (i, m) {
                alertMessages.push(m.message);
            });
            var $el = $('<div/>', {'class': 'alert alert-danger', 'html': alertMessages.join(', ')});
            $form.prepend($el);
        }).on('formbuilder.error-field', function (ev, data) {
            data.field.prev().addClass('init');
        }).on('formbuilder.fatal', function (ev, response, $form) {
            var $el = $('<div/>', {'class': 'alert alert-danger', 'html': response.error + '<br><code>' + response.trace + '</code>'});
            $form.prepend($el);
        });
    });
</script>
</body>
</html>
