<div class="row">
    <div class="col-md-12 mt-2">
        <form name="" id="editUserForm" method="post" action="/user/update" enctype="multipart/form-data" novalidate>
            <div class="card card-info">
                <div class="card-header">
                    <h4 class="card-title">
                        <%=sectionTitle%>
                    </h4>
                </div>
                <div class="card-body">
                    <div class="form-row">
                        <input type="hidden" id="_id" name="_id" value="<%=userData._id%>" />
                        <div class="form-group col-md-6 col-md-6">
                            <label class="required" for="inputName">First Name</label>
                            <input type="text" id="first_name" name="first_name" class="form-control"
                                value="<%=userData.first_name%>" onkeypress="return /[a-zA-Z]/i.test(event.key)"
                                placeholder="Enter first name" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Last Name</label>
                            <input type="text" id="last_name" name="last_name" class="form-control"
                                value="<%=userData.last_name%>" onkeypress="return /[a-zA-Z]/i.test(event.key)"
                                placeholder="Enter last name" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Email</label>
                            <input type="email" id="email" name="email" class="form-control" value="<%=userData.email%>" onkeypress="return /[A-Za-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}/.test(event.key)"
                                placeholder="Enter email" required oninput="validate(this)">
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Phone</label>
                            <input type="text" id="phone" name="phone" class="form-control" value="<%=userData.phone%>"
                                onkeypress="if ( isNaN( String.fromCharCode(event.keyCode) )) return false;"
                                placeholder="Enter phone number" min="10"  oninput="validate(this)" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">User Role</label>
                            <select id="userRole" name="role" class="form-control custom-select" required>
                                <% for (let data of roleData){ %>
                                    <option value="<%=data._id%>" <%=(userData.role.toString() == data._id.toString()) ? 'selected' : '' %>><%=
                                            data.roleDisplayName%>
                                    </option>

                                    <% } %>
                            </select>
                        </div>
                        <div class="form-group  col-md-6">
                            <label  for="inputName">Profile Image</label>
                            <input type="file" class="form-control imagepickerWithPreviewId"
                            data-previewelement="imagePreview" id="image" name="image" accept="image/*" onchange="return fileValidation()">
                            <label id="image-error" style="display: none;" class="error" for="image">Please upload file
                                having extensions .jpeg/.jpg/.png/.gif only.</label>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Status</label>
                            <select id="active_status" name="active_status" class="form-control" required>
                            <option selected disabled>Select Status</option>
                            <option value="true" 
                            <%=userData.active_status == true ? 'selected' : '' %>>Active</option>
                            <option value="false" <%=userData.active_status == false ? 'selected' : '' %>>Inactive</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <%if(userData.profile_pic !=null && userData.profile_pic !="" ){%>
                                <img class="img-thumbnail" id="imagePreview" style="width: 100px"
                                    src="/uploads/user/profile_pic/<%=userData.profile_pic %>" alt="Image">
                            <%}else{%>
                                <img class="img-thumbnail" id="imagePreview" style="width: 100px"
                                    src="/images/no-image.jpg%>" alt="Image">
                            <%}%>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-info">Update</button>
                    <button type="button" class="btn btn-default">
                        <a href="/user/list">Cancel</a>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<script>
    const togglePassword = document.querySelector('#togglePassword');
    const password = document.querySelector('#password');

    togglePassword.addEventListener('click', function (e) {
        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
        password.setAttribute('type', type);
        this.classList.toggle('fa-eye-slash');
    });
</script>

<%- contentFor('pageStyleSection')%>
    <link rel="stylesheet" href="/stylesheets/style.css" />