<script>
 $(function() {
    // Get current username directly from Joget hash variable
    var currentUsername = "#currentUser.username#";

    // Log the username
    console.log("Current username: " + currentUsername);

    // Add click handlers only to approve and reject buttons
    $("#process_approve, #process_reject").on("click", function(e) {
        // Prevent default submission
        e.preventDefault();

        // Store which button was clicked for later use
        var clickedButtonId = $(this).attr('id');
        console.log(clickedButtonId + " button clicked, showing authentication popup");

        // Create and show authentication popup
        createAuthPopup(clickedButtonId);

        return false;
    });

    function createAuthPopup(buttonId) {
        // Create overlay div
        var overlay = $("<div>").attr("id", "authOverlay").css({
            "position": "fixed",
            "top": "0",
            "left": "0",
            "width": "100%",
            "height": "100%",
            "background-color": "rgba(0,0,0,0.5)",
            "z-index": "99999",
            "display": "flex",
            "justify-content": "center",
            "align-items": "center"
        });

        // Create dialog box
        var dialog = $("<div>").attr("id", "authDialog").css({
            "background": "white",
            "width": "320px",
            "padding": "20px",
            "border-radius": "5px",
            "box-shadow": "0 2px 10px rgba(0,0,0,0.3)"
        });

        // Create action title based on button clicked
        var actionTitle = buttonId === "process_approve" ? "Approve Process" : "Reject Process";

        // Add form inside dialog
        var authContent = $("<div>").attr({
            "id": "authContent"
        });

        // Add title
        authContent.append($("<h3>").text("Authentication Required").css({
            "margin-top": "0",
            "margin-bottom": "5px"
        }));

        authContent.append($("<p>").text("Please enter your password to " + actionTitle.toLowerCase()).css({
            "margin-top": "0",
            "margin-bottom": "15px",
            "color": "#666"
        }));

        // Username field - readonly and prefilled
        var usernameGroup = $("<div>").css("margin-bottom", "15px");
        usernameGroup.append($("<label>").attr("for", "auth_username").text("Username:").css({
            "display": "block",
            "margin-bottom": "5px",
            "font-weight": "bold"
        }));
        usernameGroup.append($("<input>").attr({
            "type": "text",
            "id": "auth_username",
            "name": "auth_username",
            "value": currentUsername,
            "readonly": "readonly",
            "disabled": "disabled"
        }).css({
            "width": "100%",
            "padding": "8px",
            "box-sizing": "border-box",
            "border": "1px solid #ccc",
            "border-radius": "3px",
            "background-color": "#f5f5f5",
            "color": "#666"
        }));
        authContent.append(usernameGroup);

        // Password field
        var passwordGroup = $("<div>").css("margin-bottom", "15px");
        passwordGroup.append($("<label>").attr("for", "auth_password").text("Password:").css({
            "display": "block",
            "margin-bottom": "5px",
            "font-weight": "bold"
        }));

        var passwordInput = $("<input>").attr({
            "type": "password",
            "id": "auth_password",
            "name": "auth_password"
        }).css({
            "width": "100%",
            "padding": "8px",
            "box-sizing": "border-box",
            "border": "1px solid #ccc",
            "border-radius": "3px"
        });

        passwordGroup.append(passwordInput);
        authContent.append(passwordGroup);

        // Error message area
        var errorMsg = $("<div>").attr("id", "auth_error").css({
            "color": "red",
            "margin-bottom": "15px",
            "min-height": "20px"
        });
        authContent.append(errorMsg);

        // Buttons
        var buttons = $("<div>").css({
            "display": "flex",
            "justify-content": "space-between"
        });

        var cancelBtn = $("<button>").attr({
            "type": "button",
            "id": "auth_cancel"
        }).text("Cancel").css({
            "padding": "8px 15px",
            "background": "#f1f1f1",
            "border": "1px solid #ddd",
            "border-radius": "3px",
            "cursor": "pointer"
        });

        var actionColor = buttonId === "process_approve" ? "#2196F3" : "#f44336"; // Blue for approve, Red for reject

        var loginBtn = $("<button>").attr({
            "type": "button",
            "id": "auth_login"
        }).text("Continue").css({
            "padding": "8px 15px",
            "background": actionColor,
            "color": "white",
            "border": "none",
            "border-radius": "3px",
            "cursor": "pointer"
        });

        buttons.append(cancelBtn, loginBtn);
        authContent.append(buttons);

        // Add content to dialog
        dialog.append(authContent);
        overlay.append(dialog);

        // Add to page
        $("body").append(overlay);

        // Focus on password field
        setTimeout(function() {
            $("#auth_password").focus();
        }, 100);

        // Handle button clicks
        $("#auth_cancel").on("click", function() {
            $("#authOverlay").remove();
        });

        $("#auth_login").on("click", function() {
            authenticateUser(buttonId);
        });

        // Handle Enter key in password field
        $("#auth_password").on("keypress", function(e) {
            if (e.which === 13) {
                authenticateUser(buttonId);
            }
        });
    }

    function authenticateUser(buttonId) {
        var username = currentUsername;
        var password = $("#auth_password").val();

        if (!password) {
            $("#auth_error").text("Please enter your password");
            return;
        }

        // Show loading state
        $("#auth_login").text("Processing...").prop("disabled", true);

        // Use fetch WITHOUT credentials to create a new session
        fetch('/jw/api/sso', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'accept': 'application/json',
                'api_id': 'API-2325f1c7-df58-4c52-a555-926d696a593c',
                'api_key': ''
            },
            credentials: 'omit', // Don't send cookies
            body: 'j_username=' + encodeURIComponent(username) + '&j_password=' + encodeURIComponent(password)
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Authentication failed');
            }
            return response.json();
        })
        .then(data => {
            console.log("Authentication successful", data);

            // Close the popup
            $("#authOverlay").remove();

            // Now trigger the original button click
            var originalButton = $("#" + buttonId);

            // Remove our click handler temporarily
            originalButton.off("click");

            // Submit the form with the correct button
            var form = originalButton.closest("form");

            // Create a hidden input to simulate the button click if needed
            if (form.length) {
                // Add a hidden input with the button's name and value
                $("<input>").attr({
                    type: "hidden",
                    name: originalButton.attr("name"),
                    value: originalButton.attr("value")
                }).appendTo(form);

                // Submit the form
                form.submit();
            } else {
                // If no form found, just trigger a click on the button
                originalButton.click();
            }

            // Re-attach our handler after a short delay
            setTimeout(function() {
                attachButtonHandlers();
            }, 500);
        })
        .catch(error => {
            console.error("Authentication error:", error);
            $("#auth_error").text("Authentication failed. Please check your password and try again.");
            $("#auth_login").text("Continue").prop("disabled", false);
        });
    }

    // Function to re-attach button handlers if needed
    function attachButtonHandlers() {
        $("#process_approve, #process_reject").each(function() {
            var btn = $(this);
            if (!btn.data("has-auth-handler")) {
                btn.on("click", function(e) {
                    e.preventDefault();
                    var clickedButtonId = $(this).attr('id');
                    console.log(clickedButtonId + " button clicked, showing authentication popup");
                    createAuthPopup(clickedButtonId);
                    return false;
                }).data("has-auth-handler", true);
            }
        });
    }
});
</script>