document.addEventListener('DOMContentLoaded', function () {
    var allCloseButtons = document.querySelectorAll('.close-dialog');

    allCloseButtons.forEach(function (closeButton) {
        closeButton.addEventListener('click', function () {
            var allDialogs = document.querySelectorAll('dialog');

            allDialogs.forEach(function (dialog) {
                dialog.close();
            });
        });
    });
});

document.addEventListener('DOMContentLoaded', function () {
    var loginDialog = document.getElementById('show-login-dialog');

    loginDialog.addEventListener('click', function () {
        var currentModal = document.getElementById('login-dialog');
        
            currentModal.close();
            currentModal.showModal();

    });
});

document.addEventListener('DOMContentLoaded', function () {
    var loginDialog = document.getElementById('show-signup-dialog');

    loginDialog.addEventListener('click', function () {
        var currentModal = document.getElementById('signup-dialog');

        currentModal.close();
        currentModal.showModal();

    });
});

function loginClicked() {
    console.log("hello");
    // JavaScript code to handle form submission or perform any other action
    // For example, you can access the form fields and their values like this:
    var loginDialog = document.getElementById("login-dialog");
    var email = "user@example.com"; //loginDialog.querySelector('input[type="text"]').value;
    var password = "password123";//loginDialog.querySelector('input[type="password"]').value;
    
    // Perform any necessary validation
    
    // Call your backend API using AJAX or fetch
    // Example using fetch:
    fetch('http://localhost:3000/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name: name,
            email: email,
            password: password
        })
    })
    .then(response => {
        // Handle the response
        if (response.ok) {
            return response.json();
        } else {
            throw new Error('Network response was not ok.');
        }
    })
    .then(data => {
        // Handle the data returned by the server
        console.log(data); // Log the response data
        // Optionally, redirect the user or perform other actions
    })
    .catch(error => {
        // Handle errors
        console.error('There was a problem with the fetch operation:', error);
    });
}