<% title = `${siteName} || Settings` %>


<%- include('./partials/header.ejs') %> 

    
    <main>
        <div class="mainWrapper">
            <%- include("./partials/sideBar.ejs") %> 
            <div class="rightContent">
                <%- include('./partials/topBar.ejs') %> 
                <section>

                    <div class="mobile-tabs">
                        <ul>
                            <li class="active nav-profile">Profile</li>
                            <li class="nav-security">Security</li>
                        </ul>
                    </div>

                    <div class="setting-container">
                        <div class="tabs">
                            <ul>
                                <li class="active nav-profile2">Profile</li>
                                <li class="nav-security2">Security</li>
                            </ul>
                        </div>
                        <div class="tab-content">
                            <div class="single-content profile active">
                                <h3>Profile</h3>
                                <div class="security-details">
                                    <div class="profile-details">
                                        <p>
                                            <span>Display Name</span> 
                                            <span> <%= admin.adminName %></span>
                                        </p>

                                        <p>
                                            <span>Email</span> 
                                            <span><%= admin.email %> </span>
                                        </p>
                                    </div>
                                    <button class="edit-profile edit">Edit Profile</button>
                                </div>
                            </div>
                            <div class="single-content security">
                                <h3>Security</h3>
                                <div class="security-details">
                                    <div class="password-inner">
                                        <p>
                                            <span>Change password</span>
                                        </p>
                                        <button class="pwd-btn">Change Password</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section>
                    <!-- edit profile modal  -->
                    <div class="modal profile-modal">
                        <div class="modal-content">
                            <div class="close-btn">
                                <i class="fa-solid fa-xmark close-modal m1"></i>
                            </div>
                            <form class="change-displayName"> 
                                <div class="input-group">
                                    <label for="name">Name</label>
                                    <input type="text" id="name" name="dname">
                                </div>

                                <div class="input-group">
                                    <label for="email">Email</label>
                                    <input type="text" id="email" name="email" value="edesuccess54@gmail.com" disabled>
                                </div>
                                
                                <button class="btn display-name-btn">Update Info</button>
                                <p class="message"></p>
                            </form>
                        </div>
                    </div>

                    <!-- change password modal  -->
                    <div class="modal password-modal">
                        <div class="modal-content">
                            <div class="close-btn">
                                <i class="fa-solid fa-xmark close-modal2 m2"></i>
                            </div>
                            <form class="change-password">
                                <div class="input-group">
                                    <label for="pwd1">Old Password <span class="asterics error">*</span></label>
                                    <input type="password" id="pwd1" name="oldPwd">
                                </div>

                                <div class="input-group">
                                    <label for="pwd2">New Password <span class="asterics error">*</span></label>
                                    <input type="password" id="pwd2" name="newPwd"  >
                                </div>
                                <div class="input-group">
                                    <label for="pwd3">Confirm Password <span class="asterics error">*</span></label>
                                    <input type="password" id="pwd3" name="cPwd"  >
                                </div>
                                <p class="password-message"></p>
                                <button class="btn change-password-btn">Change Password</button>
                            </form>
                        </div>
                    </div>

                </section>

            </div>
        </div>
    </main>

    <script type="module">
        import {notification, showSpinner, hideSpinner, closeNotification} from '/admin/js/notification.js';
        const changePasswordForm = document.querySelector('.change-password');
        const changeDisplayForm = document.querySelector('.change-disPlayName');
        const btn = document.querySelector('.change-password-btn')

        toastBtn.addEventListener('click', () => closeNotification(toast));

        // change password request 
        const changePassword = async (e) => {
            e.preventDefault();

            showSpinner(btn)

            const oldpassword = changePasswordForm.oldPwd.value;
            const newpassword = changePasswordForm.newPwd.value;
            const confirmpassword = changePasswordForm.cPwd.value;
            
            try {
                // alert('yes')
                if(!oldpassword || !newpassword || !confirmpassword) {
                    throw new Error("Fields cannot be empty")
                }

                if(newpassword != confirmpassword) {
                    throw new Error("Password does not match")
                }

                const formData = {
                    oldpassword,
                    newpassword,
                    confirmpassword
                }

                const response = await fetch('/admin/changepassword', {
                method:'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(formData)
                })

                if(!response.ok) {
                    throw new Error(response.ResponseText)
                }

                const json = await response.json()

                if(json.error) {
                    throw new Error(json.error)
                }

                hideSpinner(btn, "Change password")
                notification.success(json.message, toast, toastIcon, toastMessage, closeNotification)
                changePasswordForm.reset()
                
            } catch (error) {

                hideSpinner(btn, "Change Password")
                notification.error(error.message, toast, toastIcon, toastMessage, closeNotification)
            }
        }
        changePasswordForm.addEventListener('submit', (e) =>{
            e.preventDefault()
            
            // closing the password modal so as to show the sweet alert modal for confirmation
            const passwordModal = document.querySelector('.password-modal')
            document.querySelector('.modal-overlay').classList.remove('active')
            passwordModal.classList.remove('show')
            // closing the password modal so as to show the sweet alert modal for confirmation

            Swal.fire({
                title: "Do you want to save the changes?",
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: "Save",
                denyButtonText: `Don't save`
                }).then((result) => {
                if (result.isConfirmed) {
                    changePassword(e)
                } else if (result.isDenied) {
                    Swal.fire("Changes are not saved", "", "info");
                }
            });
        })

        // change display name 
        const changeDisplayName = async (e) => {
            e.preventDefault()
            const btn = document.querySelector('.display-name-btn')

            showSpinner(btn)

            const adminName = changeDisplayForm.dname.value
            
            try {
                if(!adminName) {
                    throw new Error("Please enter a display name")
                }

                const response = await fetch('/admin/displayName', {
                    method: "PUT",
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({adminName})
                })

                if(!response.ok) {
                    throw new Error("Display name failed to change")
                }

                const json = await response.json()
                notification.success(json.message, toast, toastIcon, toastMessage, closeNotification)
                hideSpinner(btn, "Update Info")
                changeDisplayForm.reset()

            } catch (error) {
                notification.error(error.message, toast, toastIcon, toastMessage, closeNotification)
                hideSpinner(btn, "Update Info")
            }
        }
        changeDisplayForm.addEventListener('submit', changeDisplayName)
    </script>

<%- include('./partials/footer') %> 
