// Form validation
$("input").blur(function () {
    var usernameError = false,
        birthdateError = false,
        emailError = false,
        passwordError = false,
        passwordRepeatError = false;
    // Username
    if ($(this).attr('name') === "username") {
        if ($(this).val().length < 4) {
            $('#usernameErrorLength').addClass('active');
            usernameError = true;
        } else {
            $('#usernameErrorLength').removeClass('active');
            usernameError = false;
        }

        // if($(this).val())
    }
});

$('#language').selectize();
$('#country').selectize();

const monthDayCounts = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
$('#birthdate-month').change(function () {
    updateDaySelection();
});

$('#birthdate-year').change(function () {
    if (parseInt($('#birthdate-year').val()) % 4 === 0 && $('#birthdate-month').val() === 2) {
        updateDaySelection(29);
    }
});

function updateMonthSelection() {
    const defaultMonth = parseInt($('#birthdate-month').attr('data-default')) || 0;
    console.log(defaultMonth);
    $('#birthdate-month option').eq(defaultMonth).attr('selected', 'selected');
}

function updateDaySelection() {
    const dayCount = monthDayCounts[parseInt($('#birthdate-month').val()) - 1] || 31;
    $('#birthdate-day').empty().append('<option value="">-- Tag --</option>');
    for (let i = 1; i <= dayCount; i++) {
        $('#birthdate-day').append('<option value="' + i + '">' + i + '</option>');
    }

    const defaultDay = parseInt($('#birthdate-day').attr('data-default')) || 0;
    console.log(defaultDay);
    $('#birthdate-day option').eq(defaultDay).attr('selected', 'selected');
}

function updateYearSelection() {
    const curYear = new Date().getFullYear();
    for (let i = curYear; i >= curYear - 120; i--) {
        $('#birthdate-year').append('<option value="' + i + '">' + i + '</option>');
    }
}

updateMonthSelection();
updateDaySelection();
updateYearSelection();

$(function () {
    $('#color').colorpicker({
        inline: true,
        container: true,
        format: 'hsl',
        useAlpha: false,
        fallbackColor: '#2272ff',
    })
        .on('colorpickerChange colorpickerCreate', function (e) {
            $('#customColor').html(`
                .text-custom {
                    color: ${e.value} !important
                }
                
                .bg-custom {
                    background-color: ${e.value} !important
                }
                
                .bg-custom * {
                    color: ${e.color.isDark() ? '#fff' : '#333'} !important;
                    fill: ${e.color.isDark() ? '#fff' : '#333'} !important;
                }
                
                .border-custom {
                    border-color: ${e.value} !important
                }
            `)
        });
});

const chk = $('input[type="checkbox"]');

chk.each(function () {
    const v = $(this).is(':checked');
    $(this).after(`<input type="hidden" name="${$(this).attr('rel')}" value="${v.toString()}" />`);
});

chk.change(function () {
    const v = $(this).is(':checked');
    $(this).next('input[type="hidden"]').val(v.toString());
});