document.addEventListener('DOMContentLoaded', function () {
    const experienceWrapper = document.getElementById('experience-wrapper');
    const addExperienceBtn = document.getElementById('add-experience-btn');
    let experienceCount = 0;

    const educationWrapper = document.getElementById('education-wrapper');
    const addEducationBtn = document.getElementById('add-education-btn');
    let educationCount = 0;

    // Function to add a new experience block
    const addExperience = () => {
        experienceCount++;
        const div = document.createElement('div');
        div.classList.add('dynamic-section');
        div.innerHTML = `
            <div class="form-grid">
                <div class="form-group">
                    <label for="job-title-${experienceCount}">Job Title</label>
                    <input type="text" id="job-title-${experienceCount}" name="experience[${experienceCount}][title]">
                </div>
                <div class="form-group">
                    <label for="company-${experienceCount}">Company</label>
                    <input type="text" id="company-${experienceCount}" name="experience[${experienceCount}][company]">
                </div>
                <div class="form-group">
                    <label for="exp-start-date-${experienceCount}">Start Date</label>
                    <input type="month" id="exp-start-date-${experienceCount}" name="experience[${experienceCount}][startDate]">
                </div>
                <div class="form-group">
                    <label for="exp-end-date-${experienceCount}">End Date</label>
                    <input type="month" id="exp-end-date-${experienceCount}" name="experience[${experienceCount}][endDate]">
                </div>
            </div>
            <div class="form-group">
                <label for="responsibilities-${experienceCount}">Responsibilities</label>
                <textarea id="responsibilities-${experienceCount}" name="experience[${experienceCount}][responsibilities]" rows="3"></textarea>
            </div>
            <button type="button" class="btn-remove">Remove</button>
        `;
        experienceWrapper.appendChild(div);
    };

    // Function to add a new education block
    const addEducation = () => {
        educationCount++;
        const div = document.createElement('div');
        div.classList.add('dynamic-section');
        div.innerHTML = `
            <div class="form-grid">
                <div class="form-group">
                    <label for="degree-${educationCount}">Degree / Certificate</label>
                    <input type="text" id="degree-${educationCount}" name="education[${educationCount}][degree]">
                </div>
                <div class="form-group">
                    <label for="school-${educationCount}">School / Institution</label>
                    <input type="text" id="school-${educationCount}" name="education[${educationCount}][school]">
                </div>
                 <div class="form-group">
                    <label for="edu-start-date-${educationCount}">Start Date</label>
                    <input type="month" id="edu-start-date-${educationCount}" name="education[${educationCount}][startDate]">
                </div>
                <div class="form-group">
                    <label for="edu-end-date-${educationCount}">End Date</label>
                    <input type="month" id="edu-end-date-${educationCount}" name="education[${educationCount}][endDate]">
                </div>
            </div>
             <button type="button" class="btn-remove">Remove</button>
        `;
        educationWrapper.appendChild(div);
    };

    // Event listeners
    addExperienceBtn.addEventListener('click', addExperience);
    addEducationBtn.addEventListener('click', addEducation);

    // Remove button delegation
    experienceWrapper.addEventListener('click', (e) => {
        if (e.target.classList.contains('btn-remove')) {
            e.target.closest('.dynamic-section').remove();
        }
    });

    educationWrapper.addEventListener('click', (e) => {
        if (e.target.classList.contains('btn-remove')) {
            e.target.closest('.dynamic-section').remove();
        }
    });

    // Add one of each by default
    addExperience();
    addEducation();

    // Form Submission
    const resumeForm = document.getElementById('resume-form');
    const loadingOverlay = document.getElementById('loading-overlay');

    resumeForm.addEventListener('submit', function (e) {
        e.preventDefault();
        loadingOverlay.classList.add('show');

        const formData = new FormData(resumeForm);
        const data = {
            fullName: formData.get('fullName'),
            email: formData.get('email'),
            phone: formData.get('phone'),
            linkedin: formData.get('linkedin'),
            summary: formData.get('summary'),
            skills: formData.get('skills'),
            experience: [],
            education: []
        };

        // Process dynamic fields
        const expSections = experienceWrapper.querySelectorAll('.dynamic-section');
        expSections.forEach((sec, index) => {
            data.experience.push({
                title: sec.querySelector(`input[name='experience[${index + 1}][title]']`).value,
                company: sec.querySelector(`input[name='experience[${index + 1}][company]']`).value,
                startDate: sec.querySelector(`input[name='experience[${index + 1}][startDate]']`).value,
                endDate: sec.querySelector(`input[name='experience[${index + 1}][endDate]']`).value,
                responsibilities: sec.querySelector(`textarea[name='experience[${index + 1}][responsibilities]']`).value
            });
        });

        const eduSections = educationWrapper.querySelectorAll('.dynamic-section');
        eduSections.forEach((sec, index) => {
            data.education.push({
                degree: sec.querySelector(`input[name='education[${index + 1}][degree]']`).value,
                school: sec.querySelector(`input[name='education[${index + 1}][school]']`).value,
                startDate: sec.querySelector(`input[name='education[${index + 1}][startDate]']`).value,
                endDate: sec.querySelector(`input[name='education[${index + 1}][endDate]']`).value
            });
        });

        fetch('api/generate.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                window.location.href = 'result.php';
            } else {
                alert('An error occurred: ' + result.message);
                loadingOverlay.classList.remove('show');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('A network error occurred. Please try again.');
            loadingOverlay.classList.remove('show');
        });
    });
});