$(document).ready(function() {
Chart.register(ChartDataLabels);
Chart.defaults.plugins.tooltip.enabled = false;
var myChart;
var itemCount = 0;
var chartWrapper = $('#chartWrap');
var chartPlaceholder = $('#chartPlaceholder');
// Disable first option in all selects
function disableFirstOption(selector) {
$(selector).each(function () {
$(this).find("option").first().prop("disabled", true);
});
}
disableFirstOption(".roles_select");
// Add one more - button
$('#button-add').click(function(event) {
event.preventDefault();
if (itemCount <= 2) {
addSelectItem();
itemCount++;
} else {
$('#add-button-wrap').css("display", "none");
}
});
// Placeholder delete - button
$('#placeholder-add-button').click(function() {
$('#button-add').click();
$('#calculatorPlaceholder').fadeOut();
$('#rolesWrapper').fadeIn();
});
// Filter categories
var screenWidth = $(window).width();
if (screenWidth >= 991) {
$(document).on("change", ".is-category", function() {
var $category = $(this);
var $jobSelect = $category.closest(".roles_form-item").find(".is-job");
var $jobOptions = $jobSelect.find("option");
// Hide all options and show only those that match the selected category
$jobOptions.hide();
$jobOptions.filter('[value="' + $category.val() + '"]').show();
// Set the job select to the first visible option
$jobSelect.val($jobOptions.first().val());
});
} else {
var categorySelect = $(".is-category");
var jobOptions = $(".is-job option");
categorySelect.change(function() {
var selectedCategory = categorySelect.val();
jobOptions.each(function(option) {
if ($(option).data('category') === selectedCategory) {
$(option).show();
} else {
$(option).hide();
}
});
});
var initialCategory = categorySelect.val();
jobOptions.each(function(option) {
if ($(option).data('category') !== initialCategory) {
$(option).hide();
}
});
}
// Form submission
$('#wf-form-LatAm-Calculator').submit(function(event) {
event.preventDefault();
chartWrapper.fadeOut();
$('.calculator_lottie-wrap').fadeIn();
const jobAndSeniorityData = {};
const formItems = $(".roles_form-item");
let count = 0;
formItems.each(function(index, item) {
if (count <= 3) {
const jobTitleSelect = $(item).find(".is-job");
const senioritySelect = $(item).find(".is-seniority");
const quantityInput = $(item).find(".roles_number-input");
if (jobTitleSelect.length && senioritySelect.length && quantityInput.length) {
const jobTitle = jobTitleSelect.find('option:selected').text();
const seniority = senioritySelect.find('option:selected').text();
const quantity = quantityInput.val();
jobAndSeniorityData[`job${count + 1}`] = jobTitle;
jobAndSeniorityData[`seniority${count + 1}`] = seniority;
jobAndSeniorityData[`quantity${count + 1}`] = quantity;
count++;
console.log(jobAndSeniorityData);
} else {
console.error("Job title or seniority select not found.");
}
} else {
console.warn("Maximum number of entries reached (3).");
}
});
const url = "https://hook.us1.make.com/21yqhgauv8mhp2u7nsz024bl2mkxsn2w";
fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(jobAndSeniorityData),
})
.then((response) => response.text())
.then((data) => {
$('.calculator_lottie-wrap').fadeOut();
const str = data;
const regex = /\{(.*?)\}/g;
const matches = str.match(regex);
const cleanMatches = matches.map((match) =>
match.replace(/[\{\}]/g, "")
);
const chartContainer = document.querySelector("#chart-container");
var ctx = document.getElementById("canvas").getContext("2d");
// Assume cleanMatches is an array with two salary values [salary1, salary2]
var salaryDifference = cleanMatches[0] - cleanMatches[1];
var formattedSalaryDifference = formatSalary(salaryDifference);
document.getElementById("result-amount").textContent = formattedSalaryDifference;
function formatSalary(amount) {
var absAmount = Math.abs(amount); // To handle negative values correctly
var suffix = "";
if (absAmount >= 1000000) {
amount = (amount / 1000000).toFixed(2);
suffix = "m";
} else if (absAmount >= 1000) {
amount = (amount / 1000).toFixed(0); // Use toFixed(0) for integer values
suffix = "k";
} else {
amount = amount.toFixed(2);
}
return amount + suffix;
}
if (myChart) {
myChart.destroy();
}
myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["USA", "Latin America"],
datasets: [
{
label: "US Salary",
backgroundColor: "#BDB8AA",
data: [cleanMatches[0], ""],
barPercentage: 1,
categoryPercentage: 1,
barThickness: 'flex'
},
{
label: "LatAm Salary",
backgroundColor: "#10DB6D",
data: ["", cleanMatches[1]],
barPercentage: 1,
categoryPercentage: 1,
barThickness: 'flex'
},
],
},
options: {
plugins: {
datalabels: {
font: {
size: 40,
},
color: "white",
formatter: function (value) {
if (value >= 1000000) {
value = "$" + (value / 1000000).toFixed(1) + "m";
} else if (value >= 1000) {
if (Number.isInteger(value / 1000)) {
value = "$" + value / 1000 + "k";
} else {
value = "$" + (value / 1000).toFixed(1) + "k";
}
} else {
value = value;
}
return value;
},
},
legend: { display: false },
},
maintainAspectRatio: false,
responsive: true,
height: chartContainer.offsetHeight,
maxHeight: chartContainer.offsetHeight,
scales: {
x: {
display: false,
stacked: true,
ticks: {
beginAtZero: true,
display: false,
},
grid: {
display: false,
},
},
y: {
display: false,
stacked: true,
ticks: {
beginAtZero: true,
display: false,
},
grid: {
display: false,
},
},
},
},
});
chartWrapper.fadeIn();
chartPlaceholder.fadeOut();
})
.catch((error) => console.error("Error:", error));
if (screenWidth <= 991) {
$('html, body').animate({
scrollTop: $('#calculator-results').offset().top
}, 800);
}
});
// Event listener for increment and decrement buttons
$(document).on('click', '.roles_number-button', function() {
var upButton = $(this).hasClass('up');
var downButton = $(this).hasClass('down');
var numberInput = $(this).closest('.roles_form-item').find('.roles_number-input');
if (upButton) {
var hiresNumber = parseInt(numberInput.val()) || 0;
hiresNumber++;
numberInput.val(hiresNumber);
} else if (downButton) {
var hiresNumber = parseInt(numberInput.val()) || 0;
if (hiresNumber > 0) {
hiresNumber--;
numberInput.val(hiresNumber);
}
}
});
// Event listener for input field change
$(document).on('input', '.roles_number-input', function() {
var inputValue = parseInt($(this).val());
if (!isNaN(inputValue)) {
$(this).val(inputValue);
} else {
$(this).val(0);
}
});
// Add selects items to DOM
function addSelectItem() {
var domString = '<div class="roles_form-item"><select name="Category" data-name="Category" required="" class="roles_select is-category w-select"><option value="" disabled="" selected="">Select Role Category</option><option value="0">Accounting</option><option value="1">Finance</option><option value="2">Marketing</option><option value="3">Sales</option><option value="4">Customer Support</option><option value="5">Operations</option><option value="6">HR</option><option value="7">IT</option><option value="8">Data</option><option value="9">Design</option></select><select name="Job-Title" data-name="Job Title" required="" class="roles_select is-job w-select"><option value="" disabled="" selected="">Select Job Title</option><option value="0">Accountant</option><option value="0">Accounting Analyst</option><option value="0">Accounting Operations Leader</option><option value="0">Accounts Payable Manager</option><option value="0">Accounts Receivable / Billing Coordinator</option><option value="0">Audit Manager</option><option value="0">Benefits & Payroll Coordinator</option><option value="0">Bookkeeper</option><option value="0">Controller</option><option value="0">Financial Due Diligence Accounting Analyst</option><option value="0">Tax Professional</option><option value="1">Corporate Development Analyst</option><option value="1">Corporate Finance Analyst</option><option value="1">Director of Finance</option><option value="1">Finance Manager</option><option value="1">Financial Analyst</option><option value="1">FP&A Analyst</option><option value="1">Private Equity Analyst</option><option value="1">Professional Services Analyst</option><option value="1">Strategic Finance Associate</option><option value="2">Account Manager</option><option value="2">Ad Ops Specialist</option><option value="2">Associate Advertising Manager</option><option value="2">Community Builder</option><option value="2">Content Manager</option><option value="2">Copywriter</option><option value="2">Digital Marketing Specialist</option><option value="2">E-Commerce Marketplace Manager</option><option value="2">Email Marketing Specialist</option><option value="2">Growth Marketing Specialist</option><option value="2">Head of Marketing</option><option value="2">Marketing Analyst</option><option value="2">Marketing Automation Specialist</option><option value="2">Marketing Manager</option><option value="2">Marketing Specialist</option><option value="2">Media Buyer</option><option value="2">Media Manager</option><option value="2">Merchandising Specialist</option><option value="2">Product Manager</option><option value="2">SEO Specialist</option><option value="3">Account Executive</option><option value="3">Business Development Representative</option><option value="3">Inbound Sales Representative</option><option value="3">Sales Development Representative</option><option value="3">Sales Manager</option><option value="4">Customer Operations Assistant</option><option value="4">Customer Success Manager</option><option value="4">Customer Support Analyst</option><option value="4">Customer Support Representative</option><option value="4">Head of Customer Success</option><option value="5">Administrative Assistant / VA</option><option value="5">Appointment Setter</option><option value="5">Business Associate</option><option value="5">Executive Assistant</option><option value="5">General Manager</option><option value="5">Head of Operations</option><option value="5">Implementation Analyst</option><option value="5">Operations Analyst</option><option value="5">Operations Associate</option><option value="5">Procurement Specialist</option><option value="5">Project Manager</option><option value="6">HR Generalist</option><option value="6">HR Manager</option><option value="6">IT Recruiter</option><option value="6">Recruiter / Sourcing Specialist</option><option value="7">Back-End Developer / Engineer</option><option value="7">Dev Ops & Site Reliability Engineer (SRE)</option><option value="7">Front-End Developer / Engineer</option><option value="7">Full-Stack Developer / Engineer</option><option value="7">Mobile Developer / Engineer</option><option value="7">QA Engineer</option><option value="7">Scrum Master</option><option value="7">Software Engineer</option><option value="7">Software Implementer</option><option value="7">Web Developer</option><option value="8">Business Intelligence Analyst</option><option value="8">Data Analyst</option><option value="8">Data Engineer</option><option value="8">Data Engineering Manager</option><option value="8">Data Lead</option><option value="8">Data Scientist</option><option value="8">Director Of Data</option><option value="9">Graphic Designer</option><option value="9">Product Designer</option><option value="9">UI/UX Designer</option><option value="9">Video Editor</option></select><select name="Seniority" data-name="Seniority" required="" class="roles_select is-seniority w-select"><option value="" disabled="" selected="">Select Seniority</option><option value="Junior">Junior (0-2 yrs exp)</option><option value="Mid-range">Mid-range (3-5 yrs exp)</option><option value="Senior">Senior (5+ yrs exp)</option></select><div id="w-node-_797ee094-f1ce-147e-108c-1a65ae7ecd9b-592dd49c" class="roles_number-wrap"><div class="roles_number-button down"><img width="14" height="14" alt="" src="https://assets-global.website-files.com/62276057f672e497e5a941d9/664724a16767ca87ba93ef56_Minus%20icon.svg" loading="lazy" class="roles-number_button-icon"></div><input class="roles_number-input w-input" max="99" maxlength="256" name="Number" data-name="Number" min="1" placeholder="99" type="number" id="Number" required="" value="1"><div class="roles_number-button up"><img width="14" height="14" alt="" src="https://assets-global.website-files.com/62276057f672e497e5a941d9/664724a106b51a05a7c0a7f6_Plus%201%20(1).svg" loading="lazy" class="roles-number_button-icon"></div></div><div class="roles_button-delete"><img width="20" height="20" alt="" src="https://assets-global.website-files.com/62276057f672e497e5a941d9/6617ff4a3447f808708b753b_trash%201.svg" loading="lazy" class="icon-20"></div><div class="roles_form-divider"></div></div>';
$("#roles-list").append(domString);
$('#button-add').css("display", "block");
disableFirstOption(".roles_select");
}
// Delete Item - Button
$(document).on('click', '.roles_button-delete', function() {
$(this).closest(".roles_form-item").remove();
itemCount--;
if (itemCount <= 2) {
$('#add-button-wrap').css("display", "grid");
}
});
});