<%- include("../layout/header",{ title: 'Change Password'}) %>
<div class="propertyadd">
    <div class="row headingsection">
        <div class="col-sm-12"><h1>Reset Password</h1></div>
    </div>
    <div class="formcontainer">
        <%if(own=='1'){%>
            <h1 class="propertyheadingblue">Reset your password</h1>
        <%}else{%>
            <h1 class="propertyheadingblue">Reset password for <%=user.firstname%> <%=user.lastname%></h1>
        <%}%>
        <hr> 
        <form id="resetPasswordForm" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="id" id="user-id" value="<%=user.id%>"/>
            <input type="hidden" name="own" id="own" value="0"/>
            <%if(own=='1'){%>
                <div class="row form-row">
                    <div class="form-group col-md-4">
                        <label for="">Current Password</label>
                        <input type="text" name="current_password" id="current_password" value="" placeholder="Current Password" minlength="6" required>     
                    </div>
                </div>
            <%}%>
            <div class="row form-row">
                <div class="form-group col-md-4">
                    <label for="">New Password</label>
                    <input type="text" name="new_password" id="new_password" value="" placeholder="New Password" minlength="6" required>     
                </div>
            </div>
            <div class="row form-row">
                <div class="form-group col-md-4">
                    <label for="">Confirm Password</label>
                    <input type="text" name="confirm_password" id="confirm_password" value="" placeholder="Confirm Password" minlength="6" required>     
                </div>
            </div>
            <div class="row headingsection">
                <div class="col-sm-12">
                    <button type="button" class="greenbutton" id="upload-button">Reset Password</button>&nbsp;&nbsp;
                    <%if(user.role=='267'){%>
                        <a href="/admin/users/host"><button type="button" class="transparant">Cancel</button></a>  
                    <%}%>
                    <%if(user.role=='270'){%>
                        <a href="/admin/users/staff"><button type="button" class="transparant">Cancel</button></a>  
                    <%}%>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const uploadButton = document.getElementById('upload-button');
        const resetPasswordForm = document.getElementById('resetPasswordForm');
        const newPassword = document.getElementById('new_password');
        const confirmPassword = document.getElementById('confirm_password');

        uploadButton.addEventListener('click', async () => {
            if (!resetPasswordForm.checkValidity()) {
                resetPasswordForm.reportValidity();
                return;
            }
            if(confirmPassword.value != newPassword.value){
                alert("Password and Confirm Password do not match");
                return;
            }
            try {
                uploadButton.disabled=true;
                const formData = new FormData(resetPasswordForm);
                console.log(formData);
                // Send formData to backend
                const response = await fetch('/admin/savePassword', {
                    method: 'POST',
                    body: formData,
                });

                if (!response.ok) {
                    console.log('Failed to reset password:', response.json());
                    uploadButton.disabled=false;
                    throw new Error('Failed to reset password');
                }

                const result = await response.json();
                if(result.success){
                    window.location.href = `/admin/users/staff/${result.flash}`;
                }else{
                    alert(result.cause);
                }
                uploadButton.disabled=false;
            } catch (error) {
                console.error('Error with Password reset:', error);
                alert('Failed to reset password 1');
            }
        });
    });
</script>
<%- include("../layout/footer") %>