function getTargetContainer() {
	let dt = document.querySelector('#embedJobs');
	return dt;
}

function setStyles() {
	let stylesTag = document.createElement('style');
	let styles = `

@import
url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')

body {
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
padding: 20px;
}

.card {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 4px;
}

.card h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 20px;
}

.card p {
margin-bottom: 10px;
font-size: 14px;
}

.card strong {
font-weight: bold;
}

.card button {
background-color: #007BFF;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}

.card button:hover {
background-color: #0056b3;
}

.main-container {
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
padding: 20px;


max-width: 1250px;
margin-left: 30px;
margin-right: 30px;
}


body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    
}

.no-found-card {
    max-width: 600px;
    margin: 100px auto;
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
}

p {
    color: #666;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}



`;
	stylesTag.textContent = styles;
	document.head.appendChild(stylesTag);

}

function createJobFilterContainer() {
	let mainContainer = document.createElement("div");
	mainContainer.id = "fh-main-container";
	mainContainer.classList.add("fh-main-container");
	getTargetContainer().appendChild(mainContainer);

	let jobFilterContainer = document.createElement("div");
	jobFilterContainer.id = "fh-embed-jobs-filters";
	jobFilterContainer.classList.add("fh-col-lg-3", "fh-col-sm-12", "fh-pr-lg-3", "fh-mb-4");

	let filterView = `<span>
    <h1>Open Positions </h1> <input type="text" id="jobSearchInput" placeholder="Search for jobs...">
	</span>`;
	jobFilterContainer.innerHTML = filterView;
	mainContainer.appendChild(jobFilterContainer);

}

function createJobWidgetContainer() {
	let jobWidget = document.createElement("div");
	jobWidget.id = "fh-job-widget";
	jobWidget.classList.add("fh-col-lg-9", "fh-col-sm-12", "fh-pl-lg-3");
	document.querySelector('#fh-main-container').appendChild(jobWidget);
}

function initialize(isCareersPage) {
	setStyles();
	createJobFilterContainer();
	createJobWidgetContainer();
	if (!isCareersPage) {
		createHeaderContainer();
		createFooterContainer();
	}
}

document.addEventListener("DOMContentLoaded", function() {
	loadEmbedJobs();
});

function loadEmbedJobs(isCareersPage = true) {
	initialize(isCareersPage);
	let jobList = [];

	function jobWidget() {
		jobList = [{"positionId":616,"positionTitle":"Java FSD","department":null,"experience":"2-4 Years","postDaysAgo":"176 days ago","expireDate":"2024-08-31","applylink":"https://hrms.fabhr.in/#/recruitment/ats/applyJob/616/1/computronics.in/COM-1741-computronics.in","jobDescription":null,"noOfposition":"1","jobType":"Full Time","location":"Indore Madhya Pradesh"},{"positionId":673,"positionTitle":"Infrastructure and sppourt Network Engin","department":null,"experience":"4-6 Years","postDaysAgo":"176 days ago","expireDate":"2024-11-30","applylink":"https://hrms.fabhr.in/#/recruitment/ats/applyJob/673/1/computronics.in/COM-145-computronics.in","jobDescription":null,"noOfposition":"1","jobType":"Full Time","location":"Mumbai Maharashtra"}];
		if (!isCareersPage) {
			const companyInfo = companyJson;
		}
		if (jobList.length > 0) jobWidgetTemplate(jobList);
	}
	jobWidget();
	addNoCacheMetaTags();

	//function for when user input
	document.getElementById('jobSearchInput')
		.onkeyup = () => {
			let searchQuery = document.querySelector('#jobSearchInput').value;
			searchQuery = searchQuery ? searchQuery.toLowerCase() : searchQuery;
			let searchList = JSON.parse(JSON.stringify(jobList));
			let filterList = [];

			if (searchQuery) {
				searchList.forEach(job => {
					if (job.positionTitle.toLowerCase().startsWith(searchQuery)) {
						if (!filterList.includes(job)) {
							filterList.push(job);
						}
					}
					else if (job.experience.toLowerCase().startsWith(searchQuery)) {
						if (!filterList.includes(job)) {
							filterList.push(job);
						}
					}
					else if (job.noOfposition.toLowerCase().startsWith(searchQuery)) {
						if (!filterList.includes(job)) {
							filterList.push(job);
						}
					}
					else if (job.postDaysAgo.toLowerCase().startsWith(searchQuery)) {
						if (!filterList.includes(job)) {
							filterList.push(job);
						}
					}
					else if (job.jobType.toLowerCase().startsWith(searchQuery)) {
						if (!filterList.includes(job)) {
							filterList.push(job);
						}
					}
					else if (job.location.toLowerCase().startsWith(searchQuery)) {
						if (!filterList.includes(job)) {
							filterList.push(job);
						}
					}
				});

				if (filterList.length > 0) {
					jobWidgetTemplate(filterList);
				}
				else {
					notFoundTemplate();
					document.getElementById('back-visit').onclick = () => {
						document.querySelector('#jobSearchInput').value = "";
						jobWidget();
					};
				}
			}
			else {
				jobWidget();
				filterList = [];
			}
		};

}

function jobWidgetTemplate(jobList) {
	console.log(jobList);
	let jobWidget = document.querySelector('#fh-job-widget');

	while (jobWidget.hasChildNodes()) {
		jobWidget.removeChild(jobWidget.firstChild);
	}

	if (jobList.length > 0) {
		jobList.map((job)=>{
			const card = document.createElement('div');
			card.id = "card";
			card.classList.add('card');
			card.innerHTML = `
		<h3>${job.positionTitle} &nbsp </strong> ${job.noOfposition} Jobs</h3>
		<p><strong><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-400v-80h400v80H280Zm0 160v-80h280v80H280ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z"/></svg>
		</strong> ${job.postDaysAgo}</p>
		<p><strong><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>
		</strong> ${job.experience}</p>
		<p><strong><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M160-120q-33 0-56.5-23.5T80-200v-440q0-33 23.5-56.5T160-720h160v-80q0-33 23.5-56.5T400-880h160q33 0 56.5 23.5T640-800v80h160q33 0 56.5 23.5T880-640v440q0 33-23.5 56.5T800-120H160Zm240-600h160v-80H400v80Z"/></svg>
		</strong> ${job.jobType}</p>
		<p><strong><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 400Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Z"/></svg></strong> ${job.location} </p>
		<p><strong><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-400v-80h400v80H280Zm0 160v-80h280v80H280ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z"/></svg></strong> ${new Date(job.expireDate).toDateString()}</p>
		<a href="${job.applylink}" target="_blank" >View Details</button>
		`;
			jobWidget.appendChild(card);
		});

	}
}


function notFoundTemplate() {
	let jobWidget = document.querySelector('#fh-job-widget');
	let card = document.querySelector('#card');

	while (jobWidget.hasChildNodes()) {
		jobWidget.removeChild(jobWidget.firstChild);
	}

	let notFoundText = `
        <h1>No Jobs Found</h1>
        <p>There are no available jobs.</p>
        <div id='back-visit' class="btn">Go Back</div>
	`;

	let notFoundCard = document.createElement('div');
	notFoundCard.id = 'no-found-card';
	notFoundCard.className = 'no-found-card';
	notFoundCard.innerHTML = notFoundText;
	jobWidget.appendChild(notFoundCard);
}

//no cache in browser

function addNoCacheMetaTags() {
	// Create meta tag for Cache-Control
	var cacheControlMeta = document.createElement('meta');
	cacheControlMeta.setAttribute('http-equiv', 'Cache-Control');
	cacheControlMeta.setAttribute('content', 'no-cache, no-store, must-revalidate');

	// Create meta tag for Pragma
	var pragmaMeta = document.createElement('meta');
	pragmaMeta.setAttribute('http-equiv', 'Pragma');
	pragmaMeta.setAttribute('content', 'no-cache');

	// Create meta tag for Expires
	var expiresMeta = document.createElement('meta');
	expiresMeta.setAttribute('http-equiv', 'Expires');
	expiresMeta.setAttribute('content', '0');

	// Get the head element and append the meta tags
	var head = document.getElementsByTagName('head')[0];
	head.appendChild(cacheControlMeta);
	head.appendChild(pragmaMeta);
	head.appendChild(expiresMeta);
}