<div class="row">
    <div class="col-md-12 mt-2">
        <form name="" id="addUserForm" method="post" action="/user/insert" 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">
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">First Name</label>
                            <input type="text" id="first_name" name="first_name" class="form-control"
                                onkeypress="return /[A-Za-z]+/.test(event.key)" placeholder="Enter first name" required
                                oninput="validate(this)">
                        </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"
                                onkeypress="return /[A-Za-z]+/.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" placeholder="Enter email"
                                oninput="validate(this)" required>
                        </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"
                                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">Password</label>
                            <input type="password" id="password" name="password" class="form-control"
                                placeholder="Enter password" minlength="6" value="" required oninput="validate(this)">
                            <!-- <div class="">
                                <i class="far fa-eye" id="togglePassword"></i>
                            </div> -->
                            <div class="">
                                <button type="button" id="generate_password" name="generate_password"
                                    class="btn btn-info mt-1 float-right">Generate Password</button>

                                <i id="togglePassword" class="btn btn-info mt-1 mr-2 float-right far fa-eye"
                                    id="togglePassword"></i>
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Confirm Password</label>
                            <input type="password" id="confirm_password" name="confirm_password" class="form-control"
                                placeholder="Enter confirm password" value="" required oninput="validate(this)">
                        </div>
                        <div class="form-group col-md-6">
                            <div class="form-group">
                                <label class="required" for="inputName">User Role</label>
                                <select id="userRole" name="role" class="form-control custom-select" required>
                                    <option disabled selected> Select role</option>
                                    <% if(roleData.length> 0){ %>
                                        <% for (let data of roleData){ %>
                                            <option value="<%=data._id%>">
                                                <%=data.roleDisplayName%>
                                            </option>
                                            <% } %>
                                                <% } %>
                                </select>
                            </div>
                        </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" selected>Active</option>
                                <option value="false">Inactive</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6" id="previewSingleImage">
                            <img class="img-thumbnail" id="imagePreview" style="width: 100px" src="" alt="">
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-info mr-2" id="adduser">Save</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" />