<dialog id="error-dialog" class="custom-dialog">
    <div id="error-content">
        <p id="error-label"><?php echo getErrorMessage(); ?></p>
        <button id="btn-close-dialog">Close</button>
    </div>
</dialog>

<script>
document.addEventListener("DOMContentLoaded", function () {
    let errorDialog = document.getElementById("error-dialog");
    let errorLabel = document.getElementById("error-label");
    let closeBtn = document.getElementById("btn-close-dialog");

    let isSuccessMessage = <?php echo isSuccessMessage() ? "true" : "false"; ?>;

    if (isSuccessMessage) {
        errorDialog.style.backgroundColor = "green";
        errorLabel.style.color = "white"; 
        closeBtn.style.color = "green";
    } else {
        errorDialog.style.backgroundColor = "red"; 
        errorLabel.style.color = "white";
    }

    <?php if (!empty(getErrorMessage())) : ?>
        errorDialog.showModal();
    <?php endif; ?>

    closeBtn.addEventListener("click", function () {
        errorDialog.close();
    });
});
</script>

<script>
  window.showMessage = function(type, message) {
    const dialog = document.getElementById("error-dialog");
    const label = document.getElementById("error-label");
    const okBtn = document.getElementById("btn-close-dialog");

    if (type === "success") {
      dialog.style.backgroundColor = "green";
      okBtn.style.color = "green";
    } else {
      dialog.style.backgroundColor = "red";
      okBtn.style.color = "red";
    }

    label.textContent = message;
    dialog.showModal();
  }
</script>