{% extends 'base.html' %}  
{% block content %}


<style>
    .disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
    text-decoration: none;
}

.autocomplete-suggestions {
    position: absolute;
    background: white;
    border: 1px solid #ffffff;
    z-index: 1000;
    width: 615px;
    max-height: 150px;
    overflow-y: auto;
    border-radius: 6px;
    margin-top: 2px;
}
.autocomplete-suggestions div {
    padding: 8px;
    cursor: pointer;
}
.autocomplete-suggestions div:hover {
    background-color: #f0f0f0;
}

</style>

        <div class="bg-white pt-[140px] md:pt-[160px] pb-[40px] text-center mt-0 border-b border-gray-100">
        <h1 class="text-[#000000] text-[28px] md:text-[36px] font-semibold font-['Poppins']">
            Unlock Your Future. Land Your <span class="text-[#116C74]">Dream Job Today</span>
        </h1>
        <p class="text-[14px] text-gray-500 font-['Poppins'] mt-2 flex items-center justify-center gap-2">
            <a href="/" class="hover:text-[#EC9824] transition">Home</a>
            <span class="text-xs">&bull;</span>
            <span class="text-gray-400">Careers</span>
        </p>
    </div>

    <!-- Search Section -->
    <section class="max-w-[90%] md:max-w-[70%] xl:max-w-[60%] mx-auto -mt-8 relative z-10 mb-16">
        <div class="bg-white rounded-2xl shadow-xl p-4 md:p-6 border border-gray-100">
            <form id="job-search-form" method="get" class="flex flex-col md:flex-row gap-4">
                <div class="flex-1 relative">
                    <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /></svg>
                    </div>
                    <input type="text" name="skill_name" id="skill-name" value="{{ request.GET.skill_name }}" placeholder="Skills, designations, companies" autocomplete="off"
                        class="w-full pl-12 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-[#116C74] focus:border-transparent outline-none transition-all font-['Poppins']">
                    <div id="skill-suggestions" class="autocomplete-suggestions hidden mt-1 absolute w-full bg-white border border-gray-200 rounded-xl shadow-lg z-50 overflow-hidden"></div>
                </div>
                
                <div class="flex-1 relative border-t md:border-t-0 md:border-l border-gray-200 pt-4 md:pt-0 md:pl-4">
                    <div class="absolute inset-y-0 left-4 md:left-8 flex items-center pointer-events-none pt-4 md:pt-0">
                        <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    </div>
                    <input type="text" name="location" id="location-name" value="{{ request.GET.location }}" placeholder="Enter location" autocomplete="off"
                        class="w-full pl-12 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-[#116C74] focus:border-transparent outline-none transition-all font-['Poppins']">
                    <div id="location-suggestions" class="autocomplete-suggestions hidden mt-1 absolute w-full bg-white border border-gray-200 rounded-xl shadow-lg z-50 overflow-hidden"></div>
                </div>

                <div class="pt-4 md:pt-0 flex-shrink-0">
                    <button type="submit" class="w-full md:w-auto bg-[#EC9824] hover:bg-[#d8871b] text-white font-bold py-3 px-8 rounded-xl transition-all duration-300 shadow-md font-['Poppins'] h-full flex items-center justify-center">
                        Search Jobs
                    </button>
                </div>
            </form>
            
            <div class="mt-6 pt-4 border-t border-gray-100 hidden md:block">
                <p class="text-sm text-gray-500 font-['Poppins'] mb-3">Popular Searches:</p>
                <div class="flex flex-wrap gap-2">
                    <a href="#" class="px-4 py-1.5 bg-gray-50 hover:bg-[#116C74] hover:text-white text-gray-600 rounded-full text-xs font-['Poppins'] transition-colors border border-gray-200">Construction</a>
                    <a href="#" class="px-4 py-1.5 bg-gray-50 hover:bg-[#116C74] hover:text-white text-gray-600 rounded-full text-xs font-['Poppins'] transition-colors border border-gray-200">Hospitality</a>
                    <a href="#" class="px-4 py-1.5 bg-gray-50 hover:bg-[#116C74] hover:text-white text-gray-600 rounded-full text-xs font-['Poppins'] transition-colors border border-gray-200">Industrial</a>
                    <a href="#" class="px-4 py-1.5 bg-gray-50 hover:bg-[#116C74] hover:text-white text-gray-600 rounded-full text-xs font-['Poppins'] transition-colors border border-gray-200">Warehouse</a>
                    <a href="#" class="px-4 py-1.5 bg-gray-50 hover:bg-[#116C74] hover:text-white text-gray-600 rounded-full text-xs font-['Poppins'] transition-colors border border-gray-200">Professional</a>
                </div>
            </div>
        </div>
    </section>



    <section class="job-panel-user-serach">
        <div class="container">
            <div class="heading-job-portel">Featured Job Offers</div>
            <div class="row">
                <div class="col-xl-3 col-md-3 col-sm-12 col-12 mt-3">
                    <div class="wizard-side-bar">
                        <div class="heading-filter-box">
                            <h4>All Filters</h4>
                        </div>

                        <div class="experience-filter">
                            <div class="ds-set-rang">
                                <label for="experience" class="fiter-bar-heading">Experience</label>
                            </div>
                            <div class="slider-container">
                                <input type="range" id="experience" name="experience" min="0" max="30" value="0">
                                <div id="experience-value">0</div>
                            </div>
                            <div class="range-labels">
                                <span>0 Yrs</span>
                                <span>30 Yrs</span>
                            </div>
                        </div>


                        <div class="mark-layout">
                            <div class="ds-set-rang">
                                <label for="experience" class="fiter-bar-heading">Salary</label>
                            </div>

                            <ul class="filter-list">
                                <li><label><input type="checkbox" name="salary" value="0-3"> 0–3 Lakhs</label></li>
                                <li><label><input type="checkbox" name="salary" value="3-6"> 3–6 Lakhs</label></li>
                                <li><label><input type="checkbox" name="salary" value="6-10"> 6–10 Lakhs</label></li>
                                <li><label><input type="checkbox" name="salary" value="10-15"> 10–15 Lakhs</label></li>
                            </ul>
                        </div>


                        <div class="mark-layout">
                            <div class="ds-set-rang">
                                <label class="fiter-bar-heading">Location</label>
                            </div>

                            <ul class="filter-list">
                                {% for local in locations %}
                                <li><label><input type="checkbox" name="location" value="{{ local.name }}"> {{ local.name }}</label></li>
                                {% endfor %}
                            </ul>
                        </div>


                        <div class="mark-layout">
                            <div class="ds-set-rang">
                                <label class="fiter-bar-heading">Education</label>
                            </div>

                            <ul class="filter-list">
                                {% for educat in educations %}
                                <li><label><input type="checkbox" name="education" value="{{ educat.name }}"> {{ educat.name }}</label></li>
                                {% endfor %}
                            </ul>
                        </div>


                        <div class="mark-layout">
                            <div class="ds-set-rang">
                                <label class="fiter-bar-heading">Work Mode</label>
                            </div>

                            <ul class="filter-list">
                                {% for mode in work_modes %}
                                <li><label><input type="checkbox" name="work_mode" value="{{ mode.name }}"> {{ mode.name }}</label></li>
                                {% endfor %}
                            </ul>
                        </div>


                    </div>
                </div>

                <div class="col-xl-9 col-md-9 col-sm-12 col-12">
                    <div class="row" id="job-results">
                        <!-- Active Jobs -->
                        {% for job in active_jobs %}
                        <div class="col-xl-4 col-md-4 col-sm-12 col-12 mt-3 job-card"  
                        data-experience="{{ job.experience_years }}"
                        data-salary="{{ job.salary_lpa|default:'0' }}"
                        data-location="{{ job.location.name|default:'' }}"
                        data-education="{{ job.education.name|default:'' }}"
                        data-work-mode="{{ job.work_mode.name|default:'' }}">

                            <div class="job-show-user-active-and-none">
                                <div class="job-box-layout-active">
                                    <div class="dnt-box">
                                        <div class="date">{{ job.created_on|date:"d M y" }}</div>
                                        <div class="action-job">Active</div>
                                    </div>
                                    <h6>{{ job.job_name }}</h6>
                                    <div class="job-desc-icon">
                                        <div class="icon"><i class="fa fa-briefcase icon-box-ly" aria-hidden="true"></i>
                                            {{ job.experience_years }}-{{ job.experience_months }} Yrs</div>
                                        <div class="icon"><i class="fas fa-money-bill icon-box-ly"
                                                aria-hidden="true"></i>
                                                {{ job.salary_lpa }} LPA</div>
                                        <div class="icon"><i class="fa fa-map-marker icon-box-ly"
                                                aria-hidden="true"></i>
                                                {{ job.location.name }}</div>
                                    </div>
                                    <div class="job-type">
                                        <div class="type-full">{{ job.work_mode.name }}</div>
                                        <div class="type-full">Openings: {{ job.openings }}</div>
                                    </div>
                                    <div class="btn-apply">
                                        <a class='apply-now' href='/apply-job'>Apply</a>
                                        <a class='details-job-ds' href='/career-job'>Job Detail</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}


                        <!-- Closed Jobs -->
                        {% for job in closed_jobs %}
                        <div class="col-xl-4 col-md-4 col-sm-12 col-12 mt-3 job-card" 
                        data-experience="{{ job.experience_years|default:0 }}"
                        data-salary="{{ job.salary_lpa|default:'0' }}"
                        data-location="{{ job.location.name|default:'' }}"
                        data-education="{{ job.education.name|default:'' }}"
                        data-work-mode="{{ job.work_mode.name|default:'' }}">

                            <div class="job-show-user-disable-none">
                                <div class="job-box-layout-active">
                                    <div class="dnt-box">
                                        <div class="date">{{ job.created_on|date:"d M y" }}</div>
                                        <div class="deactivate-job">Closed</div>
                                    </div>
                                    <h6>{{ job.job_name }}</h6>
                                    <div class="job-desc-icon">
                                        <div class="icon"><i class="fa fa-briefcase icon-box-ly" aria-hidden="true"></i>
                                            {{ job.experience_years }}-{{ job.experience_months }} Yrs</div>
                                        <div class="icon"><i class="fas fa-money-bill icon-box-ly"
                                                aria-hidden="true"></i>
                                                {{ job.salary_lpa }}</div>
                                        <div class="icon"><i class="fa fa-map-marker icon-box-ly"
                                                aria-hidden="true"></i>
                                                {{ job.location.name }}</div>
                                    </div>
                                    <div class="job-type">
                                        <div class="type-full">{{ job.work_mode.name }}</div>
                                        <div class="type-full">Openings: {{ job.openings }}</div>
                                    </div>
                                    <div class="btn-apply">
                                        <a href="javascript:void(0);" class="apply-now disabled">Apply</a>
                                        <a href="javascript:void(0);" class="details-job-ds disabled">Job Detail</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}


                        <div class="container">
                        <div class="col-xl-12 col-md-12 col-sm-12 col-12 mt-5 mb-3 bag-img">
                            
                            <div class="row d-flex justify-content-center align-items-center">
                            <div class="col-md-6">
                                <div class="adds-content-box">
                                    <h3>Need help with your resume? </h3>
                                    <p>Get experts to build your resume from scratch</p>
                                    <a href="#" class="btn-carere-add">View Details</a>
                                </div>

                            </div>
                            <div class="col-md-6">
                                <div class="img-add">
                                <img src="assets/career/Objects-rect.png">
                                </div>
                            </div>
                        </div>
                        </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>


    </section>





    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const skillInput = document.getElementById('skill-name');
            const locationInput = document.getElementById('location-name');
            const skillBox = document.getElementById('skill-suggestions');
            const locationBox = document.getElementById('location-suggestions');
        
            function fetchSuggestions(inputElement, endpoint, boxElement) {
                inputElement.addEventListener('input', function () {
                    const term = this.value;
                    if (term.length >= 1) {
                        fetch(`${endpoint}?term=${term}`)
                            .then(res => res.json())
                            .then(data => {
                                boxElement.innerHTML = '';
                                data.forEach(item => {
                                    const div = document.createElement('div');
                                    div.textContent = item;
                                    div.addEventListener('click', () => {
                                        inputElement.value = item;
                                        boxElement.innerHTML = '';
                                    });
                                    boxElement.appendChild(div);
                                });
                            });
                    } else {
                        boxElement.innerHTML = '';
                    }
                });
            }
        
            fetchSuggestions(skillInput, '/job/ajax/skills/', skillBox);
            fetchSuggestions(locationInput, '/job/ajax/locations/', locationBox);
        });
        </script>
        





        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#experience').on('input', function () {
                    $('#experience-value').text($(this).val());
                    filterJobs();
                });
            
                $('input[type="checkbox"]').on('change', filterJobs);
            
                function filterJobs() {
                    const experience = parseInt($('#experience').val());
            
                    const salaries = $('input[name="salary"]:checked').map(function () {
                        return this.value;
                    }).get();
            
                    const locations = $('input[name="location"]:checked').map(function () {
                        return this.value.toLowerCase().trim();
                    }).get();
            
                    const educations = $('input[name="education"]:checked').map(function () {
                        return this.value.toLowerCase().trim();
                    }).get();
            
                    const workModes = $('input[name="work_mode"]:checked').map(function () {
                        return this.value.toLowerCase().trim();
                    }).get();
            
                    $('.job-card').each(function () {
                        const $card = $(this);
            
                        const jobExp = parseInt($card.data('experience')) || 0;
                        const jobSalary = parseFloat($card.data('salary')) || 0;
                        const jobLocation = ($card.data('location') || '').toLowerCase().trim();
                        const jobEducation = ($card.data('education') || '').toLowerCase().trim();
                        const jobWorkMode = ($card.data('work-mode') || '').toLowerCase().trim();
                        

                        console.log('Experience:', jobExp, 'Salary:', jobSalary, 'Location:', jobLocation, 'Education:', jobEducation, 'Work Mode:', jobWorkMode);

            
                        let salaryMatch = salaries.length === 0 || salaries.some(range => {
                            const [min, max] = range.split('-').map(Number);
                            return jobSalary >= min && jobSalary <= max;
                        });
            
                        let experienceMatch = jobExp >= experience;
                        let locationMatch = locations.length === 0 || locations.includes(jobLocation);
                        let educationMatch = educations.length === 0 || educations.includes(jobEducation);
                        let workModeMatch = workModes.length === 0 || workModes.includes(jobWorkMode);
            
                        if (salaryMatch && experienceMatch && locationMatch && educationMatch && workModeMatch) {
                            $card.show();
                        } else {
                            $card.hide();
                        }
                    });
                }
            
                filterJobs();
            });
            </script>
            

        
            

    {% endblock %}