<div class="row">
    <div class="col-md-12 mt-2">
        <form name="" id="editUserForm" method="post" action="/employer/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="user_first_name" name="user_first_name" class="form-control"
                                value="<%=userData.user_first_name%>" onkeypress="return /[a-zA-Z_\s]/i.test(event.key)"
                                placeholder="Enter first name" required>
                        </div>
                        <div class="form-group col-md-6 col-md-6">
                            <label class="required" for="inputName">Last Name</label>
                            <input type="text" id="user_last_name" name="user_last_name" class="form-control"
                                value="<%=userData.user_last_name%>" onkeypress="return /[a-zA-Z_\s]/i.test(event.key)"
                                placeholder="Enter last name" required>
                        </div>
                        <div class="form-group col-md-6 col-md-6">
                            <label class="required" for="inputName">Company Name</label>
                            <input type="text" id="company_name" name="company_name" class="form-control"
                                value="<%=userData.company_name%>" onkeypress="return /[a-zA-Z_\s]/i.test(event.key)"
                                placeholder="Enter company name" required>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Company Email</label>
                            <input type="email" id="email" name="user_email" class="form-control"
                                value="<%=userData.user_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_number" class="form-control"
                                value="<%=userData.phone_number%>"
                                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">Postal Code</label>
                            <input type="text" id="phone" name="postal_code" class="form-control"
                                value="<%=userData.postal_code%>" placeholder="Enter postal code" required>
                        </div>

                        <div class="form-group col-md-6 col-md-6">
                            <label class="required" for="inputName">State</label>
                            <select id="state_id" name="state_id" class="form-control" required>
                                <option selected disabled>Select State</option>
                                <%for(let item of stateData){%>
                                    <option value="<%=item.id%>" <%=userData.state_id.toString()==item.id.toString()
                                        ? 'selected' : '' %> ><%=item.state_name%>
                                    </option>
                                    <%}%>
                            </select>
                        </div>
                        <div class="form-group col-md-6 col-md-6">
                            <label class="required" for="inputName">City Name</label>
                            <input type="text" id="city_name" name="city_name" class="form-control"
                                value="<%=userData.city_name%>" placeholder="Enter city name" required>
                        </div>
                        <div class="form-group col-md-12 col-md-12">
                            <label class="" for="inputName">Message</label>
                            <textarea type="text" id="user_message" name="user_message" class="form-control"
                                value="<%=userData.user_message%>"
                                placeholder="Enter message"><%=userData.user_message%></textarea>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="required" for="inputName">Approval 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' : '' %>>Approved
                                </option>
                                <option value="false" <%=userData.active_status==false ? 'selected' : '' %>>Pending
                                </option>
                            </select>
                        </div>
                        <div class="form-group col-md-6 col-md-6">
                            <label class="" for="inputName">Top Employers</label>
                            <select id="is_top_employer" name="is_top_employer" class="form-control">
                                <option selected disabled>Select Top Employers</option>
                                <option value="true" <%=userData.is_top_employer==true ? 'selected' : '' %>>Yes
                                </option>
                                <option value="false" <%=userData.is_top_employer==false ? 'selected' : '' %>>No
                                </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">
                            <%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">
                    <input type="hidden" id="old_profile_pic" name="old_profile_pic"
                        value="<%=userData.profile_pic %>" />
                    <button type="submit" class="btn btn-info">Update</button>
                    <button type="button" class="btn btn-default">
                        <a href="/employer/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" />