// Form submit function
function submitForm(formId, module, script) {
    var form = document.getElementById(formId);
    var request = new XMLHttpRequest();
    var response;

    // Loader animation
    formLoading(formId)

    // Send request
    request.open(form.method, '/' + module + '/scripts.php?script=' + script);
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    request.send(encodeFormData(new FormData(form)));

    // Get response
    request.onload = function (progressEvent) {
        response = request.responseText;

        // If response is url, redirect
        if (isURL(response)) {
            window.location.assign(response);
        } else {
            // Else, replace inner html of form
            form.innerHTML = response;
        }
    }

}

// Loading form
function formLoading(id) {
    var form = document.getElementById(id);
    var classes = form.className;
    form.className = classes + ' display-container';

    var loader = '<div class="veil">';
    loader += '</div>';
    loader += '<img class="display-middle" src="proxy.php?url=/elements/images/loader-black.svg">';


    form.insertAdjacentHTML('beforeend', loader);
}

// Encode form data
function encodeFormData(fd) {
    var s = '';
    function encode(s) { return encodeURIComponent(s).replace(/%20/g, '+'); }
    for (var pair of fd.entries()) {
        if (typeof pair[1] == 'string') {
            s += (s ? '&' : '') + encode(pair[0]) + '=' + encode(pair[1]);
        }
    }
    return s;
}

// Check if string is url
function isURL(string) {
    let url;

    try {
        url = new URL(string);
    } catch (_) {
        return false;
    }

    return url.protocol === "http:" || url.protocol === "https:";
}


// myModal
function myModal(id) {
    var element = document.getElementById(id);
    var classes = element.className;

    if (classes.indexOf('hide') > -1) {
        element.className = classes.replace('hide', 'show');
    }

    if (classes.indexOf('show') > -1) {
        element.className = classes.replace('show', 'hide');
    }
}

// Menu scripts and sidebar
if(document.getElementById('main-navigation') != null) {

    window.addEventListener("load", scrollMenu);
    window.addEventListener("resize", resizeMenu);
    window.addEventListener("scroll", scrollMenu);

    // Menu toggle for the className .menu-toggle
    var menuToggle = document.getElementById('main-navigation').getElementsByClassName('menu-toggle');

    if (menuToggle.length >= 1) {
        menuToggle[0].addEventListener("click", toggleMenu);
    }

}


// Menu function to add shadow on scroll
function scrollMenu(x) {
    x = x || null;

    // Variables of menu and window
    var menu = document.getElementById('main-navigation');
    var menuHeight = document.getElementById('main-navigation').offsetHeight;
    var scrolledY = window.scrollY;
    var screenWidth = document.getElementsByTagName('body')[0].clientWidth;

    // Sidebar max height
    if(document.getElementsByTagName('sidebar').length == 1) {
        if(screenWidth >= 801) {
            document.getElementsByTagName('sidebar')[0].style.maxHeight = (window.innerHeight - menuHeight) + 'px';
        } else {
            document.getElementsByTagName('sidebar')[0].style.maxHeight = 'none';
        }
    }

    if (scrolledY > 0 || x === true) {
        // Fixed
        menu.classList.add('fixed');
        document.body.style.marginTop = menuHeight + 'px';
        menu.classList.add('shadow-bottom');
        
        // Handle sidebar
        if(document.getElementsByTagName('sidebar').length == 1) {
            
           var sidebar = document.getElementsByTagName('sidebar')[0];
           if(screenWidth >= 801) {
               
               var footerHeight = 0;
               var top = 0;
            
               if(document.getElementsByTagName('footer').length == 1) {
                    footerHeight = document.getElementsByTagName('footer')[0].offsetHeight;
                    var footerRect = document.getElementsByTagName('footer')[0].getBoundingClientRect();
                    if(footerRect.top <= (menuHeight + sidebar.offsetHeight)) {
                        top = footerRect.top - (menuHeight + sidebar.offsetHeight);
                    }
                    
               }
               
               sidebar.style.top = top + 'px';
               sidebar.style.position = 'fixed';
               sidebar.style.marginTop = menuHeight + 'px';
           } else {
               sidebar.style.top = '0';
               sidebar.style.position = 'relative';
               sidebar.style.marginTop = '0';
           }
           
        }
    
    } else {
        menu.classList.remove('shadow-bottom');
    }

    // Hide toggle menu on mobile
    if(screenWidth >= 993) {
        
        var menuToggle = document.getElementById('mobile-toggle-menu');
        var classes = menuToggle.className;
        
        if (classes.indexOf('show') >= -1) {
            menuToggle.className = classes.replace('show', 'hide');
        }
        
    }

}

// Hide toggle menu on resize and handle top margin
function resizeMenu() {
    
    var menuToggle = document.getElementById('mobile-toggle-menu');
    var classes = menuToggle.className;

    if (classes.indexOf('show') >= -1) {
        menuToggle.className = classes.replace('show', 'hide');
    }

    scrollMenu(true);

}

function toggleMenu() {
    var menu = document.getElementById('main-navigation');
    var menuHeight = document.getElementById('mobile-menu').offsetHeight;
    menu.classList.add('fixed');
    document.body.style.marginTop = menuHeight + 'px';
    menu.classList.add('shadow-bottom');
    myModal('mobile-toggle-menu');
}