const nameInput = document.getElementById("name")
const titleInput = document.getElementById("title")
const emailInput = document.getElementById("email")
const phoneInput = document.getElementById("phone")
const summaryInput = document.getElementById("summary")
const skillsInput = document.getElementById("skills")

const pName = document.getElementById("pName")
const pTitle = document.getElementById("pTitle")
const pContact = document.getElementById("pContact")
const pSummary = document.getElementById("pSummary")
const pEducation = document.getElementById("pEducation")
const pExperience = document.getElementById("pExperience")
const pSkills = document.getElementById("pSkills")

const educationList = document.getElementById("educationList")
const experienceList = document.getElementById("experienceList")

/* Create Inputs */

function createInput(container,value=""){
const input = document.createElement("input")
input.placeholder="Enter details"
input.value=value
input.addEventListener("input", saveData)
container.appendChild(input)
}

document.getElementById("addEducation").onclick = ()=>createInput(educationList)
document.getElementById("addExperience").onclick = ()=>createInput(experienceList)

/* Generate Resume */

document.getElementById("generateBtn").onclick = generateResume

function generateResume(){

pName.innerText = nameInput.value || "Your Name"
pTitle.innerText = titleInput.value
pContact.innerText = emailInput.value + " | " + phoneInput.value
pSummary.innerText = summaryInput.value

pEducation.innerHTML=""
educationList.querySelectorAll("input").forEach(e=>{
if(e.value) pEducation.innerHTML += `<p>${e.value}</p>`
})

pExperience.innerHTML=""
experienceList.querySelectorAll("input").forEach(e=>{
if(e.value) pExperience.innerHTML += `<p>${e.value}</p>`
})

pSkills.innerHTML=""
skillsInput.value.split(",").forEach(s=>{
if(s.trim()) pSkills.innerHTML += `<li>${s.trim()}</li>`
})

saveData()
}

/* Save Data */

function saveData(){

const data = {
name:nameInput.value,
title:titleInput.value,
email:emailInput.value,
phone:phoneInput.value,
summary:summaryInput.value,
skills:skillsInput.value,
education:Array.from(educationList.querySelectorAll("input")).map(i=>i.value),
experience:Array.from(experienceList.querySelectorAll("input")).map(i=>i.value)
}

localStorage.setItem("resumeData", JSON.stringify(data))
}

/* Load Data */

function loadData(){

const data = JSON.parse(localStorage.getItem("resumeData"))

if(!data) return

nameInput.value=data.name
titleInput.value=data.title
emailInput.value=data.email
phoneInput.value=data.phone
summaryInput.value=data.summary
skillsInput.value=data.skills

data.education.forEach(val=>createInput(educationList,val))
data.experience.forEach(val=>createInput(experienceList,val))

generateResume()
}

/* Template Switch */

document.getElementById("templateSelect").onchange = function(){

document.getElementById("resumePreview").className =
"preview template-"+this.value

}

/* Download PDF */

document.getElementById("downloadBtn").onclick=function(){

const element=document.getElementById("resumePreview")

const opt={
margin:0,
filename:'resume.pdf',
image:{type:'jpeg',quality:1},
html2canvas:{scale:3},
jsPDF:{unit:'mm',format:'a4',orientation:'portrait'}
}

html2pdf().set(opt).from(element).save()

}

/* Drag Sections */

let dragSrc

document.querySelectorAll(".section").forEach(sec=>{

sec.addEventListener("dragstart",()=>{ dragSrc = sec })

sec.addEventListener("dragover",(e)=>{ e.preventDefault() })

sec.addEventListener("drop",()=>{
if(dragSrc !== sec){
sec.parentNode.insertBefore(dragSrc, sec)
}
})

})

loadData()