34148-vm/assets/js/main.js

document.addEventListener('DOMContentLoaded', function () {
    // 1. Gentle animations on scroll for job cards
    const jobCards = document.querySelectorAll('.job-card');
    if (jobCards.length > 0) {
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.animation = 'fadeInUp 0.5s ease-out forwards';
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });

        jobCards.forEach(card => {
            card.style.opacity = '0'; // Start transparent
            observer.observe(card);
        });

        // Add keyframes for the animation dynamically
        const style = document.createElement('style');
        style.innerHTML = `
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
`;
        document.head.appendChild(style);
    }

    // 2. Toggle for the job search form
    const searchToggleBtn = document.getElementById('search-toggle-btn');
    const jobSearchForm = document.getElementById('job-search-form');

    if (searchToggleBtn && jobSearchForm) {
        searchToggleBtn.addEventListener('click', function () {
            jobSearchForm.classList.toggle('d-none');
            
            const isHidden = jobSearchForm.classList.contains('d-none');
            if (isHidden) {
                searchToggleBtn.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                    Search Job Listings`;
            } else {
                searchToggleBtn.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                    Close Search`;
            }
        });
    }

    // 3. Toggle for the new job search form
    const toggleBtn = document.getElementById('toggle-search-form');
    const searchForm = document.getElementById('job-search-form');

    if (toggleBtn && searchForm) {
        toggleBtn.addEventListener('click', function() {
            if (searchForm.style.display === 'none') {
                searchForm.style.display = 'block';
            } else {
                searchForm.style.display = 'none';
            }
        });
    }

    // 4. Handle search form submission
    const searchFormElement = document.getElementById('job-search-form');
    if (searchFormElement) {
        searchFormElement.addEventListener('submit', function(event) {
            event.preventDefault();

            const titleQuery = this.querySelector('input[placeholder="Job title"]').value.toLowerCase().trim();
            const locationQuery = this.querySelector('input[placeholder="Location"]').value.toLowerCase().trim();
            const typeQuery = this.querySelector('select').value;

            const allJobCards = document.querySelectorAll('.job-card');
            const noResults = document.getElementById('no-results');
            let matches = 0;

            allJobCards.forEach(function(card) {
                const title = card.querySelector('h5').textContent.toLowerCase();
                const location = card.querySelector('p').textContent.toLowerCase();
                const type = card.querySelector('.badge').textContent;

                const titleMatch = title.includes(titleQuery);
                const locationMatch = location.includes(locationQuery);
                const typeMatch = (typeQuery === 'All') || (typeQuery.toLowerCase() === type.toLowerCase());

                if (titleMatch && locationMatch && typeMatch) {
                    card.parentElement.style.display = '';
                    matches++;
                } else {
                    card.parentElement.style.display = 'none';
                }
            });

            if (matches === 0) {
                noResults.style.display = 'block';
            } else {
                noResults.style.display = 'none';
            }
        });
    }

    // 5. Handle search reset
    const resetBtn = document.getElementById('reset-search');
    if (resetBtn) {
        resetBtn.addEventListener('click', function() {
            const searchFormElement = document.getElementById('job-search-form');
            searchFormElement.querySelector('input[placeholder="Job title"]').value = '';
            searchFormElement.querySelector('input[placeholder="Location"]').value = '';
            searchFormElement.querySelector('select').selectedIndex = 0;

            const allJobCards = document.querySelectorAll('.job-card');
            allJobCards.forEach(function(card) {
                card.parentElement.style.display = '';
            });

            const noResults = document.getElementById('no-results');
            noResults.style.display = 'none';
        });
    }
});