<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BagsForYou - Share your review!</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/default-styling.css">
    <link rel="stylesheet" href="/css/profile-styling.css">
    <link rel="stylesheet" href="/css/form-styling.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
    <script src="/js/script.js" defer></script>
</head>

<body>
    <!-- COMPONENT HEADER UTAMA -->
    <%switch(status){ case 'admin' :%>
        <%- include('../navigation/header-admin') %>
            <% break; case 'user' :%>
                <%- include('../navigation/header-user') %>
                    <% break; case 'anon' :%>
                        <%- include('../navigation/header') %>
                            <% break; }%>
                                <!-- END OF HEADER -->
                                <div id="edit-profile-container" class="profile-container">
                                    <form action="/updateProfileData" method="POST" id="editProfileForm">
                                        <h2 style="margin-bottom: 1rem; font-weight: 700;">EDIT PROFILE</h2>
                                        <p class="alert">
                                            <%= errorMessage %>
                                        </p>
                                        <div class="grid-profile-edit">
                                            <label for="username">Username</label>
                                            <p id="profile-username"></p>
                                            <input type="text" name="username" id="usernameUpdated" class="editField"
                                                placeholder="insert new username">
                                        </div>

                                        <div class="grid-profile-edit">
                                            <label for="email">Email</label>
                                            <p id="profile-email"></p>
                                            <input type="email" name="email" id="emailUpdated" class=""
                                                placeholder="insert new email here">
                                        </div>

                                        <div class="grid-profile-edit">
                                            <label for="name">Name</label>
                                            <p id="profile-name"></p>
                                            <input type="text" name="name" id="nameUpdated" class=""
                                                placeholder="insert new name here">
                                        </div>

                                        <div class="grid-profile-edit" style="margin-top: 1rem;">
                                            <label for="password">Password</label>
                                            <input type="password" name="oldPass" id="oldPasswordField"
                                                placeholder="Insert your old password">
                                            <input type="password" name="newPass" id="newPasswordField"
                                                placeholder="Create new password">
                                            <input type="password" name="newPassValidation" id="newPasswordRevalidation"
                                                placeholder="Reenter your new password">
                                            <input type="submit" value="Submit Change">
                                        </div>
                                    </form>
                                </div>
                                <script>
                                    const editProfileForm = document.querySelector('#editProfileForm');
                                    const alertElement = document.querySelector('.alert');

                                    editProfileForm.addEventListener('submit', (e) => {
                                        // e.preventDefault();
                                        setTimeout(() => {
                                            if (alertElement.textContent.trim() === '') {
                                                // e.preventDefault();
                                                window.alert('Data akun diubah, silahkan login kembali');
                                            }
                                        }, 5000);
                                    });
                                </script>
</body>

</html>