(function () {
try{
// Define all variables here
const server_url = "https://hirenext.io/"
let preClass = "rankwatch";
const style = document.createElement('style');
// The current page number
let currentPage = 1;
// count job length per page
let joblistlenth = '';
// Settings loaded during fetching of js script
let rwsc___settings = {
rwsc__loc_flag: 1,
rwsc__emp_flag: 1,
rwsc__cat_flag: 1,
rwsc__yoe_flag: 1,
rwsc__salary_flag: 1,
rwsc__bg_col: "FFFFFF",
rwsc__border_col: "505050",
rwsc__shadow_col: "00FF00",
rwsc__prime_col: "3e3eea",
rwsc__sec_col: "000000",
rwsc__comp_id: 45,
rwsc__per_page: 5,
rwsc__total_jobs: 3,
}
style.innerHTML = `
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
* {font-family: "Inter", system-ui !important;}
a {text-decoration: none;}
img {max-width: 100%;}
a:hover, .pointer:hover {text-decoration: underline;}
.${preClass}user-table {font-size: 0.875rem;}
.${preClass}all-ques-type, .${preClass}jobs__form_label {font-size: 0.75rem;}
.${preClass}pointer {cursor: pointer;}
.${preClass}fs10 {font-size: 10px;}
.${preClass}fs20 {font-size: 1.25rem;}
.${preClass}margin-bottom {margin-bottom: 1.5rem;}
.${preClass}margin-bottom-0 {margin-bottom: 0 !important;}
.${preClass}text-green {color: #55D369 !important;}
.${preClass}text-green-dark {color: #209934;}
.${preClass}text-light-gray{color: #C6D4C7 !important;}
.${preClass}text-dark-grey{color: #475467;}
.${preClass}text-bold{font-weight: 700 !important;}
.${preClass}text-medium{font-weight: 500 !important;}
.${preClass}heading {font-size: 1.5rem;color: #18181B;font-weight: 600;margin-bottom: 1.5rem;position: relative;}
.${preClass}content-para {color: #495057;font-size: 0.875rem;line-height: 1.5;}
.${preClass}section-devider {height: 1px;background: rgba(63, 63, 70, 0.2);margin: 2rem auto;}
.${preClass}interviews-opt {border: 1px solid #E3E3E5;border-radius: 8px;padding: 1.25rem 2.75rem 1.25rem 1.25rem;position: relative;}
.${preClass}opt-title {font-size: 1rem;font-weight: 500;color: #18181B;margin-bottom: 0.5rem;}
.${preClass}opt-status {background: #F6FFFB;font-size: 0.75rem;padding: 2px 6px;border-radius: 4px;font-weight: 500;}
.${preClass}opt-details {display: flex;align-items: center;gap: 1rem;font-size: 0.75rem;color: #495057;font-weight: 400;}
.${preClass}position-right {position: absolute;right: 1rem;top: 50%;transform: translateY(-50%);}
.${preClass}flex-box {display: flex;align-items: center;justify-content: space-between;position: relative;gap: 2rem;}
#${preClass}pagination-list {padding: 0;list-style: none;gap: 0.5rem;margin: 0 0.75rem;}
#${preClass}pagination-list li button {background: #fff;border: 1px solid #DEE2E6;border-radius: 4px;font-size: 0.75rem;padding: 5px;min-width: 30px;display: flex;align-items: center;justify-content: center;min-height: 30px;}
.${preClass}job-badge {padding: 0.125rem 0.5rem;font-size: 0.75rem;border-radius: 50px;margin-left: auto;border: 1px solid #DEE2E6;margin: 0.625rem;}
.${preClass}jobs___fmrgrp {flex: 1 1 auto;}
.${preClass}jobs__form_label {margin-bottom: 4px;}
.${preClass}jobs__form_control {padding: 9px 16px;border-radius: 6px;border: 1px solid #DEE2E6;background: #FFF;outline: none !important;box-shadow: none !important;display: block;width: 100%;}
.${preClass}jobs___modal {background-color: #fff; padding: 30px; border-radius: 8px; max-width: 500px; width: 100%; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;margin: auto;}
#jobs___modal-1 {max-width: 1000px;}
.${preClass}jobs__modal_btn {background-color: transparent;border: 1px solid transparent;border-radius: 8px;padding: 0.5rem 1rem;min-width: 140px;font-size: 1rem;font-weight: bold;margin-left: 1rem;}
.${preClass}jobs__close-button, .${preClass}jobs__back-button, .${preClass}closejobmodal {border-color: #E3E3E5;color: #344054;margin-left: 0;}
.${preClass}jobs__next-button {border-color: #209934;background-color: #209934;color: #fff;}
.${preClass}jobs___modal__footer {text-align: right;}
#jobs___modal-2 {max-width: 750px;}
.${preClass}inputfile-box {position: relative;}
.${preClass}file-box {display: inline-block;width: 100%;border: 1px solid;padding: 5px 0px 5px 5px;box-sizing: border-box;height: calc(2rem - 2px);}
.${preClass}file-button {padding: 9px 20px;position: absolute;border-left: 1px solid #DEE2E6;top: 0px;right: 0px;}
.${preClass}jobs___invalid-feedback {font-size: 12px;color: #FE5A5A;padding: 4px 0;}
`;
document.head.appendChild(style);
// count page numbers
const totalPage = Math.ceil(rwsc___settings['rwsc__total_jobs']/rwsc___settings['rwsc__per_page'])
let conatiner__elem
try{
conatiner__elem = document.getElementById('job-container');
}
catch (error){
console.log('Could Not Find Job Containder Id id:job-container')
return
}
conatiner__elem.style="padding: 20px;margin: 20px auto;"
// job list container
const jobListCont = document.createElement('div');
jobListCont.id = 'job____list_itm'
//jobListCont.style = 'height: 350px;'
// set heading and location and position dropdowns
const add___header = document.createElement('div');
add___header.classList = `${preClass}flex-box ${preClass}margin-bottom`;
add___header.innerHTML = `
Job Openings
`
// job list pagination
const total___jobs = document.createElement('div');
total___jobs.id = 'job_____list__pages'
total___jobs.style = 'text-align: right;position: relative;'
total___jobs.innerHTML = `
`
conatiner__elem.appendChild(add___header)
conatiner__elem.appendChild(jobListCont)
conatiner__elem.appendChild(total___jobs);
// modal element
const overlay = document.createElement('div');
const popup = document.createElement('div');
// pegination buttons
const prevButton = document.getElementById(`${preClass}_prev-button`);
const nextButton = document.getElementById(`${preClass}_next-button`);
// showing job list
function createJobElement(job) {
const jobElement = document.createElement('div');
jobElement.innerHTML = `
${job['job_name']}
${ job['workplace_id'] === 1
? job['location']
: job['workplace_id'] === 2
? "Hybrid"
: job['workplace_id'] === 3
? "Remote"
: "" }
${ job['experience'] !== null ? `
${job['experience']} Years ` : "" }
${ job['salary_up'] !== null ? `
${job['currency_symbol']}${job['salary_down']} to ${job['currency_symbol']}${job['salary_up']}/ ${job['sal_period'] === 1 ? "Monthly" : job['sal_period'] === 2 ? "Yearly" : ""}
` : "" }
`
// Event listener to open popup
jobElement.addEventListener('click', () => {
openPopup(job);
});
return jobElement;
}
function openPopup(job) {
let requirementHTML = typeof job['requirement'] === "string"
? job['requirement'].replace(/\n/g, " ")
: "";
let jd_html = typeof job['jd'] === "string"
? job['jd'].replace(/\n/g, " ")
: "";
// Initialize an empty array for skills
let skillsArray = [];
// Check if the job.skills property exists and is a non-empty string
if (job.skills && job.skills.trim() !== "") {
// Split the string by commas, trim whitespace, and filter out any empty strings
skillsArray = job.skills.split(",")
.map(skill => skill.trim())
.filter(skill => skill.length > 0);
}
// Create the HTML string where each skill is wrapped in a span with a dynamic class
let skill_html = "";
if (skillsArray.length > 0) {
// Map each skill to the desired HTML span and join them into one string
skill_html = skillsArray.map(skill => `${skill} `).join(" ");
} else {
// Handle case of no skills – could be empty or provide a default message if desired
skill_html = "";
}
document.body.style.overflow = 'hidden'
// Create overlay
overlay.style = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;';
// Create popup container
// popup.style = 'background-color: #fff; padding: 20px; border-radius: 8px; max-width: 500px; width: 90%; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;';
popup.style.width = '100%'
popup.innerHTML = `
Job Description
${jd_html}
Responsibilities
Skills
${skill_html}
You will receive a link on your email, Please follow it to approve your application.
Didn’t received an email?
Check your spam folder or Resend
`
overlay.appendChild(popup);
document.body.appendChild(overlay);
const descModal = document.getElementById('jobs___modal-1')
const frmModal = document.getElementById('jobs___modal-2')
const mailsendModal = document.getElementById('jobs___modal-3')
const jobAppBtn = document.getElementById('jobs__apply__btn')
const jobsubBtn = document.getElementById('jobs__subapp__btn')
const jobsubmitdoneBtn = document.getElementById('jobs__appdn__btn')
const closeButton = document.querySelectorAll(`.${preClass}closejobmodal`);
const modals = document.querySelectorAll(`.${preClass}jobs___modal`);
const backButton = document.querySelectorAll(`.${preClass}jobs__back-button`)
const jobsErrorMOdal = document.getElementById('jobs___modal-4')
showjobsModal(descModal) // show modal on load
descModal.style.display = 'block';
let currentModalIndex = 0;
closeButton.forEach((button, index) => {
button.addEventListener('click', () => {
// close the current modal
document.body.style.overflow = ''
modals[index].style.display = 'none';
document.body.removeChild(overlay);
});
});
jobAppBtn.addEventListener('click', (e) => {
currentModalIndex++
closeJobsModal(descModal)
showjobsModal(frmModal)
});
jobsubBtn.addEventListener('click', (e) => {
e.preventDefault();
currentModalIndex++
if(jobsFormValidations()!==false) {
jobsSendingFromData()
}
});
// add event listeners to the back buttons
backButton.forEach((button, index) => {
button.addEventListener('click', () => {
// close the current modal
modals[index].style.display = 'none';
document.body.removeChild(overlay);
// show the previous modal
if (index < modals.length - 1) {
currentModalIndex--;
modals[currentModalIndex].style.display = 'block';
modals[currentModalIndex+1].style.display = 'none';
overlay.appendChild(popup);
document.body.appendChild(overlay);
}
});
});
jobsubmitdoneBtn.addEventListener('click', () => {
closeJobsModal(mailsendModal)
})
function jobsSendingFromData() {
const jobs__subapp__btn = document.getElementById('jobs__subapp__btn')
// Disable the button
jobs__subapp__btn.innerText = "Submitting..."
jobs__subapp__btn.setAttribute("disabled", true);
// Get the form input values
const jobid = document.getElementById('jobs___jobid').value;
const email = document.getElementById('eml-add').value;
const phone_number = document.getElementById('phone-add').value;
const firstName = document.getElementById('fst-name').value;
const lastName = document.getElementById('lst-name').value;
// const name = firstName;
// Create a new FormData object
const formData = new FormData();
// Add the parameter to the FormData object
formData.append('rwsc_name',firstName);
formData.append('rwsc_lastName', lastName);
formData.append('rwsc_job_id', jobid);
formData.append('rwsc_email', email);
formData.append('rwsc_phone', phone_number);
formData.append('rwsc_compid', rwsc___settings['rwsc__comp_id']);
// Set up the API endpoint and data to be sent
const apiUrl = `${server_url}/submit-form-embed`;
// Set up the Fetch API request
fetch(apiUrl, {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
jobs__subapp__btn.innerText = "Submit Application"
jobs__subapp__btn.setAttribute("disabled", false);
closeJobsModal(frmModal)
showjobsModal(mailsendModal)
// Process the response data
})
.catch(error => {
jobs__subapp__btn.innerText = "Submit Application"
jobs__subapp__btn.setAttribute("disabled", false);
// Handle the error jobsErrorMOdal
closeJobsModal(frmModal)
showjobsModal(jobsErrorMOdal)
console.error(error);
});
// Show the loader
jobs__subapp__btn.setAttribute("disabled", true);
}
}
function closeJobsModal(modals) {
document.body.style.overflow = ''
modals.style.display = 'none';
document.body.removeChild(overlay);
}
function showjobsModal(modals) {
modals.style.display = 'block';
overlay.appendChild(popup);
document.body.appendChild(overlay);
}
function jobsFormValidations() {
const email = document.getElementById('eml-add').value;
const phone = document.getElementById('phone-add').value;
const firstName = document.getElementById('fst-name').value;
const lastName = document.getElementById('lst-name').value;
const jobs__email = document.getElementById('jobs__email');
const jobs__phone = document.getElementById('jobs__phone');
const jobs__fstname = document.getElementById('jobs__fstname');
const jobs__lstname = document.getElementById('jobs__lstname');
const valErr = [];
// Email validation
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
// Name validation (only alphabets and spaces)
const nameRegex = /^[a-zA-Z ]+$/;
// Phone validation (allows digits, spaces, parentheses, and optional leading +)
const phoneRegex = /^[+\d() -]+$/;
// Validate email
if (!emailRegex.test(email)) {
jobs__email.textContent = `Email: ${email} (not valid)`;
valErr.push(1);
}
// Validate first name
if (!nameRegex.test(firstName)) {
jobs__fstname.textContent = `First name: ${firstName} (not valid)`;
valErr.push(1);
}
// Validate last name
if (!nameRegex.test(lastName)) {
jobs__lstname.textContent = `Last name: ${lastName} (not valid)`;
valErr.push(1);
}
// Validate phone number
if (!phoneRegex.test(phone)) {
jobs__phone.textContent = `Phone: ${phone} (not valid - use only digits, spaces, (), +)`;
valErr.push(1);
} else {
// Remove non-numeric characters except "+"
const cleanPhone = phone.replace(/[^\d+]/g, '');
// Ensure at least 10 and at most 15 numeric digits
const digitCount = cleanPhone.replace(/\D/g, '').length;
if (digitCount < 10 || digitCount > 15) {
jobs__phone.textContent = `Phone: ${phone} (not valid - must have 10-15 digits)`;
valErr.push(1);
}
}
return !(valErr.length > 0);
}
prevButton.addEventListener('click', () => {
jobListCont.innerHTML = `Loading...
`
handlePrevButtonClick()
})
nextButton.addEventListener('click', () => {
jobListCont.innerHTML = `Loading...
`
handleNextButtonClick()
})
// Function to handle the next button click
function handleNextButtonClick() {
currentPage++;
loadJobs(currentPage);
}
// Function to handle the previous button click
function handlePrevButtonClick() {
if (currentPage > 1) {
currentPage--;
loadJobs(currentPage);
}
}
function loadJobs(currentPage) {
jobListCont.innerHTML = `Loading...
`
const apiUrl = `${server_url}get-jobs/${rwsc___settings['rwsc__comp_id']}/${currentPage}/${rwsc___settings['rwsc__per_page']}`;
nextButton.disabled = true;
prevButton.disabled = true;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
nextButton.disabled = false;
prevButton.disabled = false;
const parseData = JSON.parse(data)
const jobs = parseData['job_detail'];
joblistlenth = jobs.length
jobListCont.innerHTML = ``
jobs.forEach(job => {
const jobElement = createJobElement(job);
jobListCont.appendChild(jobElement);
});
if(joblistlenth {
nextButton.disabled = true;
prevButton.disabled = true;
jobListCont.innerHTML = `Loading...
`
console.error('Error fetching jobs:', error)
});
}
window.addEventListener('DOMContentLoaded', (event) => {
// paginationcontrols()
loadJobs(currentPage); // Load jobs when the widget is loaded
});
}
catch(error){
console.log("Script Has Some Error: Contact Support: @hirenext.io")
console.log(error)
}
})();