script.js

const appID = 'c20cf7f9';
const appKey = 'ed3f031d78f0dd4c28358855121bf798';
const url = `https://api.adzuna.com/v1/api/jobs/us/search/1?app_id=${appID}&app_key=${appKey}&results_per_page=12&what=javascript%20developer&content-type=application/json`;

// https://api.adzuna.com/v1/api/jobs/us/search/1?app_id=c20cf7f9&app_key=ed3f031d78f0dd4c28358855121bf798&results_per_page=12&what=javascript%20developer&content-type=application/json

document.addEventListener("DOMContentLoaded", function () {
    if (window.location.pathname.includes('posting.html')) {
        displayJobDetails();
    } else {
        // Fetching job data and rendering to pages
        fetchJobs();
        fetchRecommendedJobs();
        if (window.location.pathname.includes('home.html')) {
            fetchQuickLookJobs(); // Fetch jobs for the Quick Look section on the home page
        }
        document.querySelector('#search-bar').addEventListener('input', function (event) {
            filterJobs(event.target.value);
        });
    }

    // Set up form submission handlers for all forms on the site
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function (event) {
            handleFormSubmit(event, form);
        });
    });
});

function fetchQuickLookJobs() {
    
    // Request only 6 jobs
    const url = `https://api.adzuna.com/v1/api/jobs/us/search/1?app_id=${appID}&app_key=${appKey}&results_per_page=6&what=javascript%20developer&content-type=application/json`;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            console.log('Quick Look Jobs:', data.results);  // Log to see what's being returned
            renderQuickLookJobs(data.results);
        })
        .catch(error => {
            console.error('Error fetching Quick Look jobs:', error);
        });
}


function renderQuickLookJobs(jobs) {
    const quickLookList = document.querySelector('.quick-look .jobs-list');
    quickLookList.innerHTML = ''; // Clear any previous content

    // Ensure only up to 6 jobs are rendered
    jobs.slice(0, 6).forEach(job => {
        const jobElement = document.createElement('article');
        jobElement.innerHTML = `
            <a href="posting.html?title=${encodeURIComponent(job.title)}&company=${encodeURIComponent(job.company.name)}&description=${encodeURIComponent(job.description)}">
                <img src="job.png" alt="${job.title}" style="width:100%; height: auto;">
                <h3>${job.title}</h3>
            </a>`;
        quickLookList.appendChild(jobElement);
    });
}



function displayJobDetails() {
    const params = new URLSearchParams(window.location.search);
    const title = params.get('title');
    const company = params.get('company');
    const description = params.get('description');

    if (title) document.querySelector('.job-posting-header h1').textContent = decodeURIComponent(title);
    if (company) document.querySelector('.job-posting-header h2').textContent = decodeURIComponent(company);
    if (description) document.querySelector('.job-description p').textContent = decodeURIComponent(description.replace(/\+/g, ' '));
}



function fetchJobs() {

    fetch(url)
        .then(response => response.json())
        .then(data => renderJobs(data.results))
        .catch(error => console.error('Error fetching job data:', error));
}

function renderJobs(jobs) {
    const jobsList = document.querySelector('#jobs-list');
    jobsList.innerHTML = '';  // Clear any previous content
    jobs.forEach(job => {
        const jobElement = document.createElement('div'); // Use a div to encapsulate job card and button
        jobElement.className = 'job-card';
        
        // Job link element
        const jobLink = document.createElement('a');
        jobLink.href = `posting.html?title=${encodeURIComponent(job.title)}&company=${encodeURIComponent(job.company.name)}&description=${encodeURIComponent(job.description)}`;
        jobLink.innerHTML = `
            <h3>${job.title}</h3>
            <p>${job.description.substring(0, 100)}...</p>
        `;

        // Delete button
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        deleteButton.className = 'delete-button';
        deleteButton.onclick = function() {
            jobElement.remove(); // This will remove the job card from the DOM when clicked
        };

        // Append both link and button to jobElement
        jobElement.appendChild(jobLink);
        jobElement.appendChild(deleteButton);
        
        // Append jobElement to the jobs list in the DOM
        jobsList.appendChild(jobElement);
    });
}



function fetchRecommendedJobs() {
    const appID = 'c20cf7f9';
    const appKey = 'ed3f031d78f0dd4c28358855121bf798';
    const url = `https://api.adzuna.com/v1/api/jobs/us/search/1?app_id=${appID}&app_key=${appKey}&results_per_page=5&what=developer&sort_by=relevance&content-type=application/json`;

    fetch(url)
        .then(response => response.json())
        .then(data => updateRecommendedJobs(data.results))
        .catch(error => console.error('Error fetching recommended job data:', error));
}

function updateRecommendedJobs(jobs) {
    const recommendedList = document.querySelector('.recommended ul');
    recommendedList.innerHTML = '';
    jobs.forEach(job => {
        const jobItem = document.createElement('li');
        const link = document.createElement('a');
        link.href = `posting.html?title=${encodeURIComponent(job.title)}&company=${encodeURIComponent(job.company)}&description=${encodeURIComponent(job.description)}`;
        link.className = 'recommended-job-link';
        link.innerHTML = `<span class="job-title">${job.title}</span><span class="star-icon">★</span>`;
        jobItem.appendChild(link);
        recommendedList.appendChild(jobItem);
    });
}

function filterJobs(query) {
    document.querySelectorAll('.job-card').forEach(card => {
        const title = card.querySelector('h3').textContent.toLowerCase();
        card.style.display = title.includes(query.toLowerCase()) ? 'block' : 'none';
    });
}

function handleFormSubmit(event, form) {
    event.preventDefault(); // Always call preventDefault first
    console.log("Handling form submit for", form.className);
    const data = new FormData(form);
    console.log('Form data:', Object.fromEntries(data.entries()));

    if (form.classList.contains('create-posting-form')) {
        alert("Success! Your job posting has been submitted.");
    } else if (form.classList.contains('account-info-form')) {
        alert("Your account information has been updated successfully.");
    }

    form.reset(); 
}