Embed

<div id="job-board">
    <h2 id="job-title">Current Job Openings</h2>

    
    <div id="job-search">
        <select id="titleDropdown" onchange="updateSpecialtyDropdown()">
            <option value="">Select Title</option>
        </select>
        <select id="specialtyDropdown" onchange="updateStateDropdown()">
            <option value="">Select Specialty</option>
        </select>
        <select id="stateDropdown">
            <option value="">Select State</option>
        </select>
        <button onclick="filterJobs()">Search</button>
    </div>

    <div id="job-listings">Loading jobs...</div>
</div>

<script>
    let jobsData = []; // Store fetched job data for filtering

    async function fetchJobs() {
        const sheetID = "1syAzSrbmDZh1oYRQjHI6D0-0kMu-_zsgZgZV8Tb_06Q";  // Your Google Sheet ID
        const apiUrl = `https://docs.google.com/spreadsheets/d/${sheetID}/gviz/tq?tqx=out:json`;

        try {
            let response = await fetch(apiUrl);
            let text = await response.text();
            console.log("Google Sheets Raw Response:", text); // Debugging Step 1

            let jsonData = JSON.parse(text.substr(47).slice(0, -2));
            console.log("Parsed JSON Data:", jsonData); // Debugging Step 2

            let rows = jsonData.table.rows.slice(1); // Skip the first row (header)
            jobsData = rows.map(row => ({
                jobTitle: row.c[0]?.v || "N/A",
                title: row.c[1]?.v || "N/A",
                specialty: row.c[2]?.v || "N/A",
                location: row.c[3]?.v || "N/A",
                description: row.c[4]?.v || "N/A",
                requirements: row.c[5]?.v || "N/A",
                applyLink: "https://tempmd.com/clinicians-2/fast-trak-application"
            }));

            console.log("Extracted Jobs Data:", jobsData); // Debugging Step 3

            populateTitleDropdown();
            displayJobs(jobsData);
        } catch (error) {
            console.error("Error fetching jobs:", error);
            document.getElementById("job-listings").innerHTML = 
                "<p style='color: red; font-weight: bold;'>Failed to load jobs. Please check your internet connection or try again later.</p>";
        }
    }

    function populateTitleDropdown() {
        let titleSet = new Set();
        jobsData.forEach(job => titleSet.add(job.title));

        let titleDropdown = document.getElementById("titleDropdown");
        [...titleSet].sort().forEach(title => {
            let option = document.createElement("option");
            option.value = title;
            option.textContent = title;
            titleDropdown.appendChild(option);
        });
    }

    function updateSpecialtyDropdown() {
        let selectedTitle = document.getElementById("titleDropdown").value;
        let specialtySet = new Set();

        jobsData.forEach(job => {
            if (job.title === selectedTitle) {
                specialtySet.add(job.specialty);
            }
        });

        let specialtyDropdown = document.getElementById("specialtyDropdown");
        specialtyDropdown.innerHTML = '<option value="">Select Specialty</option>';

        [...specialtySet].sort().forEach(specialty => {
            let option = document.createElement("option");
            option.value = specialty;
            option.textContent = specialty;
            specialtyDropdown.appendChild(option);
        });
    }

    function updateStateDropdown() {
        let selectedSpecialty = document.getElementById("specialtyDropdown").value;
        let stateSet = new Set();

        jobsData.forEach(job => {
            if (job.specialty === selectedSpecialty) {
                let state = job.location.split(", ").pop(); // Extract state
                stateSet.add(state);
            }
        });

        let stateDropdown = document.getElementById("stateDropdown");
        stateDropdown.innerHTML = '<option value="">Select State</option>';

        [...stateSet].sort().forEach(state => {
            let option = document.createElement("option");
            option.value = state;
            option.textContent = state;
            stateDropdown.appendChild(option);
        });
    }

    function displayJobs(jobs) {
        let jobsHtml = jobs.map(job => `
            <div class="job-listing">
                <h3>${job.jobTitle}</h3>
                <p><strong>Title:</strong> ${job.title}</p>
                <p><strong>Specialty:</strong> ${job.specialty}</p>
                <p><strong>Location:</strong> ${job.location}</p>
                <p><strong>Description:</strong> ${job.description}</p>
                <p><strong>Requirements:</strong> ${job.requirements}</p>
                <a href="${job.applyLink}" target="_blank" class="apply-btn">Apply Now</a>
            </div>
        `).join('');

        document.getElementById("job-listings").innerHTML = jobsHtml || "<p>No jobs found matching your criteria.</p>";
    }

    function filterJobs() {
        let titleQuery = document.getElementById("titleDropdown").value;
        let specialtyQuery = document.getElementById("specialtyDropdown").value;
        let stateQuery = document.getElementById("stateDropdown").value;

        let filteredJobs = jobsData.filter(job =>
            (titleQuery === "" || job.title === titleQuery) &&
            (specialtyQuery === "" || job.specialty === specialtyQuery) &&
            (stateQuery === "" || job.location.includes(stateQuery))
        );

        displayJobs(filteredJobs);
    }

    fetchJobs();
</script>

<style>
    #job-board { text-align: center; margin: 0 auto; max-width: 800px; padding: 20px; }
    #job-title { color: white; margin-bottom: 30px; }
    #job-search { margin-bottom: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
    #job-search select, #job-search button { 
        padding: 10px; 
        border: 1px solid #ccc; 
        appearance: none; 
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        border-radius: 5px;
    }
    #job-search button { background: black; color: white; border: none; cursor: pointer; padding: 10px 15px; font-weight: bold; }
    #job-search button:hover { background: #333; }
    .job-listing { border: 1px solid #ddd; padding: 15px; margin-bottom: 10px; border-radius: 5px; background: white; box-shadow: 2px 2px 10px rgba(0,0,0,0.1); }
    .apply-btn { background: black; color: white; padding: 10px 15px; text-decoration: none; display: inline-block; margin-top: 10px; border-radius: 5px; }
    .apply-btn:hover { background: #333; }
</style>

TempMD