$(document).ready(function () {
    // Register Start
    let selectedGameJam;
    let MemberSize = $('#NUDDisplay').text();
    let displayValue = 0;
    let arr = [
        {"id": "-1", "Gamejam": "Vælg aktivt GameJam"}
    ];

    // Populate select with options from the database
    axios.get('/Backend/Controllers/GameJam/GetGameJam.php')
    .then(function(res) {
        let resArr = res.data;

        //console.log(res.data.data);

        for(let i = 0; i < res.data.data.length; i++)
        {
            arr.push({
                id: res.data.data[i].id, 
                Gamejam: res.data.data[i].name
            });
        }

        $.each(arr, function(i, data) {
            if (i === 0)
            {
                $('#GameJamSelect').append('<option disabled selected value="' + data.id + '">' + data.Gamejam + '</option>');
            }
            else
            {
                $('#GameJamSelect').append('<option value="' + data.id + '">' + data.Gamejam + '</option>');
            }
        });
    })
    .catch(function(err) {
        console.log(err);
    });

    // Remove invalidInput if selected option has been changed
    $('#GameJamSelect').change(function() {
        selectedGameJam = $('#GameJamSelect').children("option:selected").val();
        
        if (selectedGameJam >= 1)
        {
            $('#GameJamSelect').removeClass('invalidInput');
        }
    });

    // Remove invalidInput if change in group name has been detected
    $('#username').on('input', function() {
        if ($(this).hasClass('invalidInput'))
        {
            $(this).removeClass('invalidInput');
        }
    })

    GetGroupNames().then(function(res) {
        let resArr = res.data;
        let groupNameTaken = false;

        $('#RegisterBtn').click(function() {
            let groupName = $('#username').val();

            for(let i = 0; i < resArr.length; i++)
            {
                if (resArr[i].group_name.toUpperCase() === groupName.toUpperCase())
                {
                    groupNameTaken = true;
                    break;
                }
                else 
                {
                    groupNameTaken = false;
                }
            }
        });

        // Check data before submitting
        $('#RegisterForm').submit(function(e) {

            if(!selectedGameJam >= 1) 
            {
                $('#GameJamSelect').addClass('invalidInput');
                e.preventDefault();
                return false;
            }
            else
            {
                $('#gameJamId').val($('#GameJamSelect option:selected').val());
            }

            if($('#pass1').val().length === 0)
            {
                $('#pass1').addClass('invalidInput');
                e.preventDefault();
                return;
            }

            if($('#pass2').val().length === 0)
            {
                $('#pass2').addClass('invalidInput');
                e.preventDefault();
                return;
            }

            if($('#username').val().length === 0)
            {
                $('#username').addClass('invalidInput');
                e.preventDefault();
                return;
            }

            if($('#pass1').hasClass('invalidInput'))
            {
                e.preventDefault();
                return;
            }

            if($('#pass2').hasClass('invalidInput'))
            {
                e.preventDefault();
                return;
            }

            if(!$.isNumeric($('#NUDDisplay').text()))
            {
                $('#NUDDisplay').text('Ugyldigt antal!');
                $('#NUDDisplay').css({"color": "red"});
                e.preventDefault();
            }
            else
            {
                $('#groupAmount').val($('#NUDDisplay').text());
            }

            if (groupNameTaken)
            {
                $('#username').addClass('invalidInput');
                e.preventDefault();
                return;
            }

            let URL = "/Backend/Controllers/Group/SigningUp.php";

            let form = $('#RegisterForm')[0];
            let formData = new FormData(form);

            let id = $('#RegisterBtn').attr('name');
            let value = $('#RegisterBtn').val();

            formData.append(id, value);

            axios.post(URL, formData, {
                header: 'multipart/form-data'
            }).then(res => {
                console.log(res);
            }).catch(error => {
                console.log(error);
            });

            e.preventDefault();
        });
    });

    $('#NUDPlus').click(function() {
        if($('#NUDDisplay').css('color') === 'rgb(255, 0, 0)')
        {
            $('#NUDDisplay').css({'color': 'rgba(255, 255, 255, .55)'});
        }

        displayValue++;

        $('#NUDDisplay').text(displayValue);
    });

    $('#NUDMinus').click(function() {
        if (displayValue <= 0)
        {
            return;
        }
        else if(displayValue <= 1)
        {
            $('#NUDDisplay').text(1);
        }
        else
        {
            displayValue--;
            $('#NUDDisplay').text(displayValue);
        }
    });


    async function GetGroupNames() {
        const res = await axios.get('/Backend/Controllers/Group/GetGroup.php');

        return res.data;
    }

    // Register end 

    // Login start
    $('#LoginForm').submit(function(e) {
        let URL = "/Backend/Controllers/Group/Login.php";

        let form = $('#LoginForm')[0];
        let formData = new FormData(form);

        let id = $('#LoginBtn').attr('name');
        let value = $('#LoginBtn').val();

        formData.append(id, value);


        axios.post(URL, formData, {
            header: 'multipart/form-data'
        }).then(res => {
            if (res.status === 200)
            {
                console.log('Logged in');
            }
        }).catch(error => {
            console.log(error);
        });

        e.preventDefault();
    })
    // Login end
});