const srcBtn = document.getElementById('searchBtn');
const srcBox = document.querySelector('.search-box');
const srcInput = document.querySelector('.search-box input[type=search]');
const body = document.getElementById('body');

//srcBtn.addEventListener('click' , () => {
//    srcBox.classList.add('active')
//    srcInput.focus();
//})

//srcInput.addEventListener('blur' , () => {
//    srcBox.classList.remove('active')
//})

//goto top
const goTop = document.getElementById('goTop');
const header = document.getElementById('header');
let navArrow = document.querySelectorAll('.vega-nav-option,.vega-navbar ul li i,span,a');

document.addEventListener('scroll' , () => {
    if(scrollY >= 200){
        goTop.classList.add('active')
        header.classList.add('active')
        //document.querySelector('.caret').style.color = "black";
        
        for (i of navArrow) {
            i.classList.add("vegaNavArrowColor");
        }
       

    }else if(scrollY <= 200){
        goTop.classList.remove('active')
        header.classList.remove('active')
        //document.querySelector('.caret').style.color = "white";
        for (i of navArrow) {
            i.classList.remove("vegaNavArrowColor");
        }
    }
    document.getElementById("rocket").classList.remove("vegaNavArrowColor");
})


//menu open & close
const openMenu = document.querySelector('.menu-bar');
const closeMenu = document.querySelector('.close-menu');
const mobileMenu = document.querySelector('.mobile-nav');


openMenu.addEventListener('click', () => {
    //mobileMenu.style.left = '0';
    mobileMenu.classList.add("mobileNavOpen");
    let closeMobileNav = document.createElement("div");
    closeMobileNav.setAttribute("id", "closeMobileNav");
    closeMobileNav.classList.add("closeMobileNavCss");
    document.body.appendChild(closeMobileNav);
    closeMobileNav.addEventListener("click", () => {
        mobileMenu.classList.remove("mobileNavOpen");
        closeMobileNav.remove();
    });
    
})

closeMenu.addEventListener('click', () => {
    //mobileMenu.style.left = '-80%';
    mobileMenu.classList.remove("mobileNavOpen");
    document.getElementById("closeMobileNav").remove();
})

var closeMobileNave = window.matchMedia("(min-width:1180px)");
function closeMobileNav() {
    if (closeMobileNave.matches) {
        mobileMenu.classList.remove("mobileNavOpen");
    }
}
closeMobileNav(closeMobileNave);
closeMobileNave.addListener(closeMobileNav);

//----------
const service = document.querySelector('.service');
const product = document.querySelector('.product');
const aboutUs = document.querySelector('.aboutUs');
const solution = document.querySelector('.solution');

//service.addEventListener('click', () => {
//    document.querySelector('.m-services-sub-menu').classList.toggle('active');
//    service.classList.toggle('active');
//})

product.addEventListener('click', () => {
    document.querySelector('.m-product-sub-menu').classList.toggle('active');
    product.classList.toggle('active');
})

aboutUs.addEventListener('click', () => {
    document.querySelector('.m-aboutUs-sub-menu').classList.toggle('active');
    aboutUs.classList.toggle('active');
})

//solution.addEventListener('click', () => {
//    document.querySelector('.m-solution-sub-menu').classList.toggle('active');
//    solution.classList.toggle('active');
//})


//login modal

const getStart = document.getElementById('getStartContainer');
const getStartBtn = document.getElementById('getStart');  
const SignUpContainer = document.getElementById("SignUpContainer");
getStartBtn.addEventListener('click', () => {
    getStart.classList.toggle('add');
    if (SignUpContainer.classList.contains("add"))
    {
        SignUpContainer.classList.remove("add");
        getStart.classList.remove("add");
    }
        
})

function ShowSignUp() {

    SignUpContainer.classList.add("add");
    getStart.classList.remove("add");
}
document.getElementById("signUpForm").addEventListener("submit", function (e) {
    e.preventDefault();

    const form = e.target;
    const password = document.getElementById("user_SignUpPassword").value;
    const rePassword = document.getElementById("rePassword").value;

    // Check password match
    if (password !== rePassword) {
        document.getElementById("rePassword").setCustomValidity("Passwords do not match");
    } else {
        document.getElementById("rePassword").setCustomValidity("");
    }

    // Run bootstrap validation
    if (!form.checkValidity()) {
        form.classList.add("was-validated");
        return;
    }

    // Collect values
    const signUpModel = {
        user_FirstName: document.getElementById("user_FirstName").value.trim(),
        user_LastName: document.getElementById("user_LastName").value.trim(),
        user_Username: document.getElementById("user_Email").value.trim(),
        user_Password: password,
        user_Email: document.getElementById("user_Email").value.trim(),
        user_Tel: document.getElementById("user_Tel").value.trim()
    };

    // Post to API
    $.ajax({
        url: "/api/resource/SignUp",
        type: "POST",
        data: JSON.stringify(signUpModel),
        contentType: "application/json",
        success: function (data) {
            console.log("Sign Up success:", data);
            if (data.token) {
                localStorage.setItem("authToken", data.token);
            }
            alert("Account created successfully!");
            window.location.replace(window.location.origin + window.location.pathname);
            location.reload();
        },
        error: function (xhr) {
            console.error("Sign Up failed:", xhr.responseText);
        }
    });
});

function logIn() {
    const model = {
        user_Username: document.getElementById("user_Username").value,
        user_Password: document.getElementById("user_Password").value,
        user_Email: ""
    };

    $.ajax({
        url: "/api/resource/login",
        type: "POST",
        data: JSON.stringify(model), // send as JSON
        contentType: "application/json", // tell server it's JSON
        success: function (data) {
            console.log("Login success:", data);
            // save token if API returns it
            if (data.token) {
                localStorage.setItem("authToken", data.token);
            }

            window.location.replace(window.location.origin + window.location.pathname);
            location.reload();
        },
        error: function (xhr) {
            console.error("Login failed:", xhr.responseText);
            alert("Login failed. Please check your username and password.");
        }
    });
}

function logOut() {

    $.get("/api/resource/Logout", function (data, status)
    {
        console.log(data);
        location.reload();
    }
    );

}
function googleLogIn() {
    location = "/api/resource/googlelogin";
}
$(document).ready(function () {
    $.get("/api/resource/loginprompt", function (data, status) {
        console.log(data);
        if (data.user != null) {
            document.getElementById("userInfo").classList.remove("hidden");
            document.getElementById("userName").innerText = data.user.user_FirstName + " " + data.user.user_LastName;
            document.getElementById("getStart").classList.add("hidden");

        }
        else
        {
            document.getElementById("userInfo").classList.add("hidden");
            document.getElementById("userName").innerText = "";
            document.getElementById("getStart").classList.remove("hidden");
        }

    });

    const queryString = window.location.search;

    // Parse it
    const urlParams = new URLSearchParams(queryString);

    // Access values
    const status = urlParams.get("s");
    if (status === "UnAutorized") {
        alert("Please login or SingUp to proceed");
        getStartBtn.click();
    }
});
document.addEventListener("click", function (event) {
    const userPanel = document.getElementById("userPanel");

    // If the clicked element is not inside #myDiv
    if (!userPanel.contains(event.target)) {
       // console.log("Clicked outside #myDiv");
        // Example: hide the div
        SignUpContainer.classList.remove("add");
        getStart.classList.remove("add");
    } else {
        console.log("Clicked inside #myDiv");
    }
});