xstore/assets/js/main.js

$(document).ready(function () {
    // menu
    ShowMenu();

    // click tab
    enableSmoothScroll("#tab a", 800);

    btnPricing();


    showInput();

    showSelect();


    AOS.init();


    showCateMobile();
    initPasswordStrength();

})

function ShowMenu() {
    $menu = $('#js-show-menu .item-menu a');
    $box_menu = $('#box-menu');

    $menu.on('click', function () {
        $data_menu = $(this).attr('data-menu');
        $('.content-menu').addClass('hidden')
        $('#' + $data_menu).removeClass('hidden');
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $('#background-opacity').addClass('hidden');
            $('#box-menu').addClass('translate-y-[-100%]');
            $(this).find($('i')).removeClass('fa-sort-up mt-[10px]');
        } else {
            $(this).addClass('active');
            $('#background-opacity').removeClass('hidden');
            $('#box-menu').removeClass('translate-y-[-100%]');
            $(this).find($('i')).addClass('fa-sort-up mt-[10px]');
        }



    })
}

function closeBackgorund() {
    $('#background-opacity').addClass('hidden');
    $('#box-menu').addClass('translate-y-[-100%]');
    $('#js-show-menu .item-menu').find($('i')).removeClass('fa-sort-up mt-[10px]');
}

function toggleFaq(el) {
    var $el = $(el);
    var $content = $el.next(".content-faq");
    var $icon = $el.find("i");

    if ($content.hasClass("open")) {
        // Đóng
        $content.removeClass("open").css("max-height", 0);
        $icon.removeClass("rotate-180");
    } else {
        // Đóng các FAQ khác (nếu muốn accordion)
        $(".content-faq").removeClass("open").css("max-height", 0);
        $(".title i").removeClass("rotate-180");

        // Mở
        $content.addClass("open").css("max-height", $content.prop("scrollHeight") + "px");
        $icon.addClass("rotate-180");
    }
}


function enableSmoothScroll(selector, speed) {
    $(selector).click(function (e) {
        e.preventDefault();
        var target = $($(this).attr("href"));
        if (target.length) {
            $("html, body").animate(
                { scrollTop: target.offset().top - 100 },
                speed
            );
        }
    });
}

function btnPricing() {
    $('#billingToggle').on('change', function () {
        if ($(this).is(':checked')) {
            // Annually
            $('#labelMonthly').removeClass('text-black').addClass('text-gray-500');
            $('#labelAnnually').removeClass('text-gray-500').addClass('text-black');
            $('#toggleBox').removeClass('border-gray-300').addClass('border-black')
                .addClass('after:translate-x-6');
        } else {
            // Monthly
            $('#labelAnnually').removeClass('text-black').addClass('text-gray-500');
            $('#labelMonthly').removeClass('text-gray-500').addClass('text-black');
            $('#toggleBox').removeClass('border-black').addClass('border-gray-300')
                .removeClass('after:translate-x-6');
        }
    })
}


function showCompare() {
    $('.item-compare i').toggleClass('fa-plus fa-minus');
    $('.content-compare').toggleClass('hidden mt-[15px] pt-[15px]');
}


function showInput() {
    $('.form-input input').on('focus', function () {
        $lable = $(this).closest($('.form-input')).find($('label'));
        $error = $(this).closest($('.check-form')).find('.note-error');
        $lable.toggleClass('top-[-1.75rem] text-[15px] text-[12px]');
        $error.html('');
    })
}

function showSelect() {
    $('.form-select').on('click', function () {
        $(this).find($('label')).removeClass('text-[15px] top-[2px]')
        $(this).find($('label')).addClass('top-[-1.75rem] text-[12px]');
    })
}


function checkInputName() {
    var error = false;
    var check_name = document.getElementById('first_name').value;
    var $name = $('#first_name');
    var item_name = $name.parents(".check-form");
    if (check_name.length < 4) {
        item_name.find($('.note-error')).html("Tên quá ngắn");
        error = true;
    } else if (check_name.indexOf('<script') > -1) {
        item_name.find($('.note-error')).html("Họ tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại");
        error = true;
    } else {
        item_name.find($('.note-error')).html("");
    }
    return error
}

function checkInputPhone() {
    var number_regex1 = /^[0]\d{9}$/i;
    var number_regex2 = /^[0]\d{10}$/i;

    var check_tel = document.getElementById('phone').value;
    var $tel = $("#phone");
    var item_tel = $tel.parents(".check-form");
    if (check_tel.length < 4) {
        item_tel.addClass('error')
        item_tel.find($('.note-error')).html("Bạn chưa nhập SĐT");
        error = true;
    } else if (!check_tel.match(number_regex1) && !check_tel.match(number_regex2)) {
        item_tel.addClass('error')
        item_tel.find($('.note-error')).html("Số điện thoại chưa chính xác");
        error = true;
    } else {
        item_tel.removeClass('error');
        item_tel.find($('.note-error')).html("");
    }

    return error
}


function checkInputEmail() {
    var check_email = document.getElementById('email').value;
    var $email = $("#email");
    var item_email = $email.parents(".check-form");
    if (check_email.length < 4) {
        item_email.addClass('error')
        item_email.find($('.note-error')).html("Bạn chưa nhập Email");
        error = true;
    } else if (!validateEmail(check_email)) {
        item_email.addClass('error')
        item_email.find($('.note-error')).html("Địa chỉ email chưa chính xác");
        error = true;
    } else {
        item_email.removeClass('error');
        item_email.find($('.note-error')).html("");
    }

    return error
}


function checkProvince() {
    var check_province = document.getElementById('province').value;
    var $check_province = $('#province');
    var item_province = $check_province.parents('.check-form');
    if (check_province == 0) {
        item_province.addClass('error');
        item_province.find($('.note-error')).html("Bạn chưa chọn Tỉnh/Thành phố");
        error = true;
    } else {
        item_province.removeClass('error');
        item_province.find($('.note-error')).html("");
    }

    return error;
}


function checkInputShop() {
    var error = false;
    var check_shop = document.getElementById('shop').value;
    var $shop = $('#shop');
    var item_shop = $shop.parents(".check-form");
    if (check_shop.length < 4) {
        item_shop.find($('.note-error')).html("Tên quá ngắn");
        error = true;
    } else if (check_shop.indexOf('<script') > -1) {
        item_shop.find($('.note-error')).html("Tên chứa các ký tự không hợp lệ, bạn vui lòng kiểm tra lại");
        error = true;
    } else {
        item_shop.find($('.note-error')).html("");
    }
    return error
}


function checkformTrial() {

    var error = false;

    checkInputName();

    checkInputPhone();

    checkInputEmail();

    checkInputShop();

    checkProvince();


    if (error) {
        alert('Vui lòng kiểm tra lại thông tin');
        return false;
    } else {
        $(".button-send").css("pointer-events", "none");
        $(".button-send").html("ĐANG XỬ LÝ...");
        localStorage.getItem("Key_voucher");
        return true;
    }
}


function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}


function initPasswordStrength() {
    const inputPassword = document.getElementById('password');
    const toggleBtn = document.getElementById('togglePassword');
    const strengthBar = document.getElementById('strengthBar');
    const strengthText = document.getElementById('strengthText');
    const submitBtn = document.getElementById('submitBtn');

    // Đánh giá mật khẩu
    function evaluateStrength(password) {
        let score = 0;
        if (password.length >= 8) score++;
        if (/[A-Z]/.test(password)) score++;
        if (/\d/.test(password)) score++;
        if (/[^A-Za-z0-9]/.test(password)) score++;
        return score; // 0..4
    }

    // Render UI
    function renderStrength(score) {
        let label = "—", color = "bg-gray-300", width = "0%";
        if (score === 1) { label = "yếu"; color = "bg-red-500"; width = "25%"; }
        if (score === 2) { label = "trung bình"; color = "bg-yellow-500"; width = "50%"; }
        if (score === 3) { label = "khá"; color = "bg-lime-500"; width = "75%"; }
        if (score === 4) { label = "mạnh"; color = "bg-green-500"; width = "100%"; }

        const levels = [
            { label: "—", color: "bg-gray-300", width: "0%" },
            { label: "yếu", color: "bg-red-500", width: "25%" },
            { label: "trung bình", color: "bg-yellow-500", width: "50%" },
            { label: "khá", color: "bg-lime-500", width: "75%" },
            { label: "mạnh", color: "bg-green-500", width: "100%" }
        ];

        const level = levels[score];
        strengthBar.className = "h-1 rounded transition-all " + level.color;
        strengthBar.style.width = width;
        strengthText.textContent = "Độ mạnh của mật khẩu: " + level.label;
        submitBtn.disabled = score < 3;
    }

    // Event nhập mật khẩu
    inputPassword.addEventListener('input', e => {
        $('#check-pass').removeClass('hidden');
        const score = evaluateStrength(e.target.value);
        renderStrength(score);
    });

    // Toggle hiển thị/ẩn mật khẩu
    toggleBtn.addEventListener('click', () => {
        inputPassword.type = inputPassword.type === 'password' ? 'text' : 'password';
    });

    renderStrength(0); // khởi tạo
}


function showMenuMb() {
    $('body').toggleClass('overflow-hidden')
    $('#js-menu-mobile').toggleClass('hidden');
}


function showCateMobile() {
    $('#js-menu-mobile .item-menu').on('click', function () {

        $(this).toggleClass('active')
        $(this).find($('.content-menu')).toggleClass('hidden');
    })
}


function toggleFooter(el) {
    var $el = $(el);
    var $content = $el.next(".content-footer");
    var $icon = $el.find("i");

    $content.toggleClass("hidden");
    $icon.toggleClass("fa-sort-down fa-sort-up");
}