$('document').ready(function () {
    $('.profileForm input[type=file]').on('change', function (e) {
        var inputId = $(this).attr('id');
        var filename = document.getElementById(inputId).files[0].name;
        $('.profileForm').find('[data-for='+ inputId +']').html(filename)
    });

	var autocompleteRequest;
	new autoComplete({
		selector: '[name=professiontext]',
		minChars: 1,
		source: function (term, response) {
		    var fieldofwork = $('.profileForm [name=fieldofwork]').val();
			try { autocompleteRequest.abort(); } catch(e){}
			autocompleteRequest = $.getJSON('/index.html?cmd=getProfessionOptions', { fieldofwork: fieldofwork }, function(data){ response(data); });
		},
		cache: false,
		renderItem: function (item, search){
			search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
			var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
			return '<div class="autocomplete-suggestion" data-val="' + item[0] + '" data-id="' + item[1] + '">' + item[0].replace(re, "<b>$1</b>") + '</div>';
		},
		onSelect: function (e, term, item) {
			e.preventDefault();
			// $('.profileForm').find('[name=profession]').val(item.dataset['id']);
		}
	});

	$('.profileForm [name=fieldofwork]').on('change', function () {
        $profileForm = $(this).closest('.profileForm');
			$profileForm.find('[name="profession"]').val('');
			$profileForm.find('[name="professiontext"]').val('');
    });

    $('.profileForm').on('submit', function (e) {
        e.preventDefault();

        var $form = $(this);
        var invalidClass = 'input--is-invalid';
        var validClass = 'input--is-valid';

        var formData = new FormData();

        var formFields = $(this).serializeArray();
		formFields.forEach(function (formField, index) {
			formData.append(formField.name, formField.value);
		});

		var $fileInputs = $(this).find('input[type=file]').each(function () {
			var $input = $(this);
			var file = $input[0].files[0];
			if (file) {
				formData.append($input.attr('name'), file)
			} else {
				formData.append($input.attr('name'), '')
			}
		});

        var $errorText = $form.find('.errorMessages');
        $errorText.html('');

        var $formControls = $form.find( '.input' );

        $formControls.each( function () {
            $(this).removeClass(invalidClass);
            $(this).removeClass(validClass);
        });

        var $button = $form.find('.profileForm__button');
        var buttonHtml = $button.html();
        $button.html("sendet ...");

        $.post( {
            url: $form.attr('action'),
            processData: false,
            contentType: false,
            data: formData
        })
            .done(function ( data ) {
                alert(data.message);
                if (data.redirect) {
                    if (data.redirect === "RELOAD") {
                        window.location.reload();
                    } else {
						gtag('event', 'conversion', {'send_to': 'AW-727868800/_ZdPCP3UkKUBEIDLidsC','value': 1.0,});
                        window.location.href = data.redirect;
						
                    }
                }
            })
            .fail( function ( data ) {
                var invalidFields = data.responseJSON.message;

                $formControls.each( function () {
                    var name = $(this).attr("name");
                    if ( invalidFields.hasOwnProperty( name ) ) {
                        $(this).removeClass(validClass);
                        $(this).addClass(invalidClass);
                    } else {
                        $(this).removeClass(invalidClass);
                        $(this).addClass(validClass)
                    }
                } );

                for (var field in invalidFields) {
                    $errorText.append(invalidFields[field] + "<br>");
                }
            } )
            .always(function () {
                $button.html(buttonHtml);
            })
    });
});