const FloatLabel = (() => {

    // add filled class
    const handleFocus = (e) => {
        const target = e.target;
        target.parentNode.classList.add('filled');
        target.setAttribute('placeholder', target.getAttribute('data-placeholder'));
    };

    // remove filled class
    const handleBlur = (e) => {
        const target = e.target;
        if(!target.value) {
            target.parentNode.classList.remove('filled');
        }
        target.removeAttribute('placeholder');
    };

    // register events
    const bindEvents = (element) => {
        const floatField = element.querySelector('.form-control');
        floatField.addEventListener('focus', handleFocus);
        floatField.addEventListener('blur', handleBlur);
    };

    // get DOM elements
    const init = () => {
        const formGroup = document.querySelectorAll('.form-group');

        formGroup.forEach((element) => {

            if (element.querySelector('.form-control').value) {
                element.classList.add('filled');
            }

            bindEvents(element);
        });
    };

    return {
        init: init
    };
})();

FloatLabel.init();