import "./bootstrap";
import Alpine from "alpinejs";
window.Alpine = Alpine;
Alpine.start();

// document.addEventListener('DOMContentLoaded', function() {
//     // Job Title Autocomplete
//     const jobTitleInput = document.getElementById('job_title');
//     const jobSuggestions = document.getElementById('job-suggestions');
    
//     const jobCategories = [
//         "Software Engineer",
//         "Senior Software Engineer",
//         "Product Designer",
//         "Product Manager",
//         "Data Scientist",
//         "DevOps Engineer",
//         "Marketing Lead",
//         "Engineering Manager",
//         "Frontend Developer",
//         "Backend Developer",
//         "Full Stack Developer",
//         "UX Designer",
//         "UI Designer",
//         "Business Analyst",
//         "Project Manager"
//     ];

//     if (jobTitleInput && jobSuggestions) {
//         jobTitleInput.addEventListener('input', function() {
//             const value = this.value.toLowerCase();
            
//             if (value.length === 0) {
//                 jobSuggestions.classList.add('hidden');
//                 return;
//             }

//             const filtered = jobCategories.filter(job => 
//                 job.toLowerCase().includes(value)
//             );

//             if (filtered.length === 0) {
//                 jobSuggestions.classList.add('hidden');
//                 return;
//             }

//             jobSuggestions.innerHTML = filtered.map(job => `
//                 <li class="px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-[#2F3D7E] font-medium cursor-pointer transition-colors"
//                     onclick="selectJobTitle('${job}')">
//                     ${job}
//                 </li>
//             `).join('');

//             jobSuggestions.classList.remove('hidden');
//         });

//         jobTitleInput.addEventListener('focus', function() {
//             if (this.value.length > 0 && jobSuggestions.children.length > 0) {
//                 jobSuggestions.classList.remove('hidden');
//             }
//         });

//         document.addEventListener('click', function(e) {
//             if (!jobTitleInput.contains(e.target) && !jobSuggestions.contains(e.target)) {
//                 jobSuggestions.classList.add('hidden');
//             }
//         });
//     }

//     // Location Autocomplete
//     const locationInput = document.getElementById('location');
//     const locationSuggestions = document.getElementById('suggestions');
    
//     const countryList = [
//         "United States",
//         "United Kingdom",
//         "Germany",
//         "Canada",
//         "Australia",
//         "Switzerland",
//         "Singapore",
//         "India",
//         "France",
//         "Japan",
//         "Netherlands",
//         "Sweden",
//         "Spain",
//         "Italy",
//         "Brazil"
//     ];

//     if (locationInput && locationSuggestions) {
//         locationInput.addEventListener('input', function() {
//             const value = this.value.toLowerCase();
            
//             if (value.length === 0) {
//                 locationSuggestions.classList.add('hidden');
//                 return;
//             }

//             const filtered = countryList.filter(country => 
//                 country.toLowerCase().includes(value)
//             );

//             if (filtered.length === 0) {
//                 locationSuggestions.classList.add('hidden');
//                 return;
//             }

//             locationSuggestions.innerHTML = filtered.map(country => `
//                 <li class="px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 hover:text-[#2F3D7E] font-medium cursor-pointer transition-colors"
//                     onclick="selectLocation('${country}')">
//                     ${country}
//                 </li>
//             `).join('');

//             locationSuggestions.classList.remove('hidden');
//         });

//         locationInput.addEventListener('focus', function() {
//             if (this.value.length > 0 && locationSuggestions.children.length > 0) {
//                 locationSuggestions.classList.remove('hidden');
//             }
//         });

//         document.addEventListener('click', function(e) {
//             if (!locationInput.contains(e.target) && !locationSuggestions.contains(e.target)) {
//                 locationSuggestions.classList.add('hidden');
//             }
//         });
//     }
// });

// Helper functions for selection
function selectJobTitle(job) {
    const input = document.getElementById('job_title');
    const suggestions = document.getElementById('job-suggestions');
    
    if (input) {
        input.value = job;
        suggestions.classList.add('hidden');
    }
}

function selectLocation(location) {
    const input = document.getElementById('location');
    const suggestions = document.getElementById('suggestions');
    
    if (input) {
        input.value = location;
        suggestions.classList.add('hidden');
    }
}

// Modal function (if not already defined)
function openRegisterModal() {
    // Your existing modal opening logic
    // Or redirect to register page
    window.location.href = '/register';
}
