{"id":9,"date":"2025-09-22T15:03:58","date_gmt":"2025-09-22T15:03:58","guid":{"rendered":"https:\/\/project.hexondigital.com\/edijobs\/?page_id=9"},"modified":"2025-09-22T15:04:13","modified_gmt":"2025-09-22T15:04:13","slug":"home","status":"publish","type":"page","link":"https:\/\/project.hexondigital.com\/edijobs\/","title":{"rendered":"Home"},"content":{"rendered":"    \n    <div id=\"job-grid-69eb76472ba11\" class=\"job-listing-container\">\n        <!-- Loading spinner -->\n        <div class=\"job-loading\">\n            <div class=\"spinner\"><\/div>\n            <p>Loading jobs...<\/p>\n        <\/div>\n        \n        <!-- Job grid container -->\n        <div class=\"job-grid\" style=\"display: none;\">\n            <!-- Jobs will be populated here -->\n        <\/div>\n        \n        <!-- Pagination -->\n        <div class=\"job-pagination\" style=\"display: none;\">\n            <button class=\"pagination-btn prev-btn\" disabled>Previous<\/button>\n            <div class=\"pagination-numbers\"><\/div>\n            <button class=\"pagination-btn next-btn\">Next<\/button>\n        <\/div>\n        \n        <!-- Error message -->\n        <div class=\"job-error\" style=\"display: none;\">\n            <p>Failed to load jobs. Please try again later.<\/p>\n            <button class=\"retry-btn\">Retry<\/button>\n        <\/div>\n    <\/div>\n\n    <style>\n        #job-grid-69eb76472ba11 {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 20px;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        }\n        \n        \/* Loading Spinner *\/\n        .job-loading {\n            text-align: center;\n            padding: 60px 20px;\n        }\n        \n        .spinner {\n            width: 40px;\n            height: 40px;\n            border: 4px solid #f3f3f3;\n            border-top: 4px solid #3498db;\n            border-radius: 50%;\n            animation: spin 1s linear infinite;\n            margin: 0 auto 20px;\n        }\n        \n        @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n        \n        \/* Job Grid *\/\n        .job-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 24px;\n            margin-bottom: 40px;\n        }\n        \n        \/* Job Card *\/\n        .job-card {\n            background: #ffffff;\n            border: 1px solid #e1e5e9;\n            border-radius: 12px;\n            padding: 24px;\n            transition: all 0.3s ease;\n            position: relative;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n        }\n        \n        .job-card:hover {\n            transform: translateY(-4px);\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\n            border-color: #3498db;\n        }\n        \n        .job-card.featured {\n            border-color: #f39c12;\n            position: relative;\n        }\n        \n        .job-card.featured::before {\n            content: \"Featured\";\n            position: absolute;\n            top: -1px;\n            right: 16px;\n            background: #f39c12;\n            color: white;\n            padding: 4px 12px;\n            border-radius: 0 0 8px 8px;\n            font-size: 12px;\n            font-weight: 600;\n        }\n        \n        .job-content {\n            flex-grow: 1;\n            display: flex;\n            flex-direction: column;\n        }\n        \n        .job-header {\n            margin-bottom: 16px;\n        }\n        \n        .job-title {\n            font-size: 20px;\n            font-weight: 700;\n            color: #2c3e50;\n            margin: 0 0 8px 0;\n            line-height: 1.3;\n        }\n        \n        .job-location {\n            color: #7f8c8d;\n            font-size: 14px;\n            margin: 0;\n        }\n        \n        .job-tags {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n            margin: 16px 0;\n        }\n        \n        .job-tag {\n            background: #ecf0f1;\n            color: #2c3e50;\n            padding: 4px 8px;\n            border-radius: 16px;\n            font-size: 12px;\n            font-weight: 500;\n        }\n        \n        .job-tag.type {\n            background: #e8f5e8;\n            color: #27ae60;\n        }\n        \n        .job-tag.mode {\n            background: #e3f2fd;\n            color: #2196f3;\n        }\n        \n        .job-tag.level {\n            background: #fff3e0;\n            color: #ff9800;\n        }\n        \n        .job-details {\n            margin: 16px 0;\n        }\n        \n        .job-detail-item {\n            display: flex;\n            align-items: center;\n            margin-bottom: 8px;\n            font-size: 14px;\n            color: #5a6c7d;\n        }\n        \n        .job-detail-icon {\n            width: 16px;\n            height: 16px;\n            margin-right: 8px;\n            opacity: 0.7;\n        }\n        \n        .job-salary {\n            font-weight: 600;\n            color: #27ae60;\n        }\n        \n        .job-description {\n            color: #5a6c7d;\n            font-size: 14px;\n            line-height: 1.5;\n            \/* margin: 16px 0; *\/\n            display: -webkit-box;\n            -webkit-line-clamp: 3;\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n        }\n        \n        .job-footer {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-top: auto;\n            padding-top: 16px;\n            border-top: 1px solid #ecf0f1;\n        }\n        \n        .job-posted {\n            font-size: 12px;\n            color: #95a5a6;\n            max-width: 90px;\n        }\n        \n        .job-actions {\n            display: flex;\n            gap: 8px;\n        }\n        \n        .btn {\n            padding: 8px 12px;\n            border-radius: 6px;\n            font-size: 14px;\n            font-weight: 600;\n            text-decoration: none;\n            border: none;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .btn::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n            transition: left 0.5s;\n        }\n        \n        .btn:hover::before {\n            left: 100%;\n        }\n        \n        .btn-primary {\n            background: #3498db;\n            color: white;\n            box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);\n        }\n        \n        .btn-primary:hover {\n            background: #2980b9;\n            color: white;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);\n        }\n        \n        .btn-primary:active {\n            transform: translateY(0);\n            box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);\n        }\n        \n        .btn-secondary {\n            background: transparent;\n            color: #3498db;\n            border: 1px solid #3498db;\n            box-shadow: 0 2px 4px rgba(52, 152, 219, 0.1);\n        }\n        \n        .btn-secondary:hover {\n            background: #3498db;\n            color: white;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);\n        }\n        \n        .btn-secondary:active {\n            transform: translateY(0);\n            box-shadow: 0 2px 4px rgba(52, 152, 219, 0.1);\n        }\n        \n        \/* Pagination *\/\n        .job-pagination {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            gap: 12px;\n            margin-top: 40px;\n        }\n        \n        .pagination-btn {\n            padding: 10px 16px;\n            border: 1px solid #ddd;\n            background: white;\n            color: #333;\n            border-radius: 6px;\n            cursor: pointer;\n            font-size: 14px;\n            transition: all 0.2s ease;\n        }\n        \n        .pagination-btn:hover:not(:disabled) {\n            background: #3498db;\n            color: white;\n            border-color: #3498db;\n        }\n        \n        .pagination-btn:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n        \n        .pagination-numbers {\n            display: flex;\n            gap: 4px;\n        }\n        \n        .pagination-number {\n            padding: 8px 12px;\n            border: 1px solid #ddd;\n            background: white;\n            color: #333;\n            border-radius: 6px;\n            cursor: pointer;\n            font-size: 14px;\n            min-width: 40px;\n            text-align: center;\n            transition: all 0.2s ease;\n        }\n        \n        .pagination-number:hover {\n            background: #f8f9fa;\n        }\n        \n        .pagination-number.active {\n            background: #3498db;\n            color: white;\n            border-color: #3498db;\n        }\n        \n        \/* Error State *\/\n        .job-error {\n            text-align: center;\n            padding: 60px 20px;\n            color: #e74c3c;\n        }\n        \n        .error-message {\n            text-align: center;\n            padding: 40px;\n            font-size: 16px;\n            color: #d32f2f;\n            background-color: #ffebee;\n            border: 1px solid #ffcdd2;\n            border-radius: 8px;\n            margin: 20px 0;\n        }\n        \n        .retry-btn {\n            background: #e74c3c;\n            color: white;\n            border: none;\n            padding: 10px 20px;\n            border-radius: 6px;\n            cursor: pointer;\n            margin-top: 16px;\n        }\n        \n        .retry-btn:hover {\n            background: #c0392b;\n        }\n        \n        \/* Responsive Design *\/\n        @media (max-width: 768px) {\n            .job-grid {\n                grid-template-columns: 1fr;\n                gap: 16px;\n            }\n            \n            #job-grid-69eb76472ba11 {\n                padding: 16px;\n            }\n            \n            .job-card {\n                padding: 20px;\n            }\n            \n            .job-footer {\n                flex-direction: column;\n                gap: 12px;\n                align-items: stretch;\n            }\n            \n            .job-actions {\n                justify-content: center;\n            }\n            \n            .pagination-numbers {\n                flex-wrap: wrap;\n                justify-content: center;\n            }\n        }\n        \n        @media (max-width: 1024px) and (min-width: 769px) {\n            .job-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n        }\n    <\/style>\n\n    <script>\n        (function() {\n            const container = document.getElementById('job-grid-69eb76472ba11');\n            const loadingEl = container.querySelector('.job-loading');\n            const gridEl = container.querySelector('.job-grid');\n            const paginationEl = container.querySelector('.job-pagination');\n            const errorEl = container.querySelector('.job-error');\n            const retryBtn = container.querySelector('.retry-btn');\n            const prevBtn = container.querySelector('.prev-btn');\n            const nextBtn = container.querySelector('.next-btn');\n            const paginationNumbers = container.querySelector('.pagination-numbers');\n            \n            let allJobs = [];\n            let currentPage = 1;\n            const jobsPerPage = 12;\n            const apiUrl = 'https:\/\/backend-edi1.vercel.app\/api\/job';\n            \n            \/\/ Utility functions\n            function formatDate(dateString) {\n                const date = new Date(dateString);\n                const now = new Date();\n                const diffTime = Math.abs(now - date);\n                const diffDays = Math.ceil(diffTime \/ (1000 * 60 * 60 * 24));\n                \n                if (diffDays === 1) return 'Posted 1 day ago';\n                if (diffDays < 30) return `Posted ${diffDays} days ago`;\n                if (diffDays < 365) return `Posted ${Math.floor(diffDays \/ 30)} months ago`;\n                return `Posted ${Math.floor(diffDays \/ 365)} years ago`;\n            }\n            \n            function formatSalary(minSalary, maxSalary, salaryType) {\n                const min = minSalary ? minSalary.toLocaleString() : '0';\n                const max = maxSalary ? maxSalary.toLocaleString() : '0';\n                return `$${min} - $${max} ${salaryType || 'Monthly'}`;\n            }\n            \n            function createJobCard(job) {\n                const featuredClass = job.featured ? 'featured' : '';\n                \/\/ const applyUrl = job.applyUrl || '#';\n                const BASE_URL = \"https:\/\/candidate.hexondigital.com\";\n                const applyUrl = `${BASE_URL}\/candidate\/auth-select?redirect=\/candidate\/jobs\/${job._id}\/apply`;\n\n                \n                return `\n                    <div class=\"job-card ${featuredClass}\">\n                        <div class=\"job-content\">\n                            <div class=\"job-header\">\n                                <h3 class=\"job-title\">${job.title}<\/h3>\n                                <p class=\"job-location\">${job.location}<\/p>\n                            <\/div>\n                            \n                            <div class=\"job-tags\">\n                                <span class=\"job-tag type\">${job.type}<\/span>\n                                <span class=\"job-tag mode\">${job.workMode}<\/span>\n                                <span class=\"job-tag level\">${job.level}<\/span>\n                            <\/div>\n                            \n                            <div class=\"job-details\">\n                                <div class=\"job-detail-item\">\n                                    <span class=\"job-detail-icon\">\ud83d\udcbc<\/span>\n                                    <span>${job.category}<\/span>\n                                <\/div>\n                                <div class=\"job-detail-item\">\n                                    <span class=\"job-detail-icon\">\u23f1\ufe0f<\/span>\n                                    <span>${job.experience}+ years<\/span>\n                                <\/div>\n                                <div class=\"job-detail-item\">\n                                    <span class=\"job-detail-icon\">\ud83d\udcb0<\/span>\n                                    <span class=\"job-salary\">${formatSalary(job.minSalary, job.maxSalary, job.salaryType)}<\/span>\n                                <\/div>\n                            <\/div>\n                            \n                            <p class=\"job-description\">${job.description}<\/p>\n                        <\/div>\n                        \n                        <div class=\"job-footer\">\n                            <span class=\"job-posted\">${formatDate(job.postedDate)}<\/span>\n                            <div class=\"job-actions\">\n                                <button class=\"btn btn-secondary\" onclick=\"viewJobDetails('${job._id}')\">View Details<\/button>\n                                <a href=\"${applyUrl}\" class=\"btn btn-primary\" target=\"_blank\">Apply Now<\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                `;\n            }\n            \n            function renderJobs() {\n                const startIndex = (currentPage - 1) * jobsPerPage;\n                const endIndex = startIndex + jobsPerPage;\n                const jobsToShow = allJobs.slice(startIndex, endIndex);\n                \n                gridEl.innerHTML = jobsToShow.map(createJobCard).join('');\n                renderPagination();\n            }\n            \n            function renderPagination() {\n                const totalPages = Math.ceil(allJobs.length \/ jobsPerPage);\n                \n                if (totalPages <= 1) {\n                    paginationEl.style.display = 'none';\n                    return;\n                }\n                \n                paginationEl.style.display = 'flex';\n                \n                \/\/ Update prev\/next buttons\n                prevBtn.disabled = currentPage === 1;\n                nextBtn.disabled = currentPage === totalPages;\n                \n                \/\/ Generate page numbers\n                let paginationHTML = '';\n                const maxVisiblePages = 5;\n                let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages \/ 2));\n                let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);\n                \n                if (endPage - startPage + 1 < maxVisiblePages) {\n                    startPage = Math.max(1, endPage - maxVisiblePages + 1);\n                }\n                \n                for (let i = startPage; i <= endPage; i++) {\n                    const activeClass = i === currentPage ? 'active' : '';\n                    paginationHTML += `<span class=\"pagination-number ${activeClass}\" data-page=\"${i}\">${i}<\/span>`;\n                }\n                \n                paginationNumbers.innerHTML = paginationHTML;\n                \n                \/\/ Add click events to page numbers\n                paginationNumbers.querySelectorAll('.pagination-number').forEach(btn => {\n                    btn.addEventListener('click', () => {\n                        currentPage = parseInt(btn.dataset.page);\n                        renderJobs();\n                        container.scrollIntoView({ behavior: 'smooth' });\n                    });\n                });\n            }\n            \n            function showLoading() {\n                loadingEl.style.display = 'block';\n                gridEl.style.display = 'none';\n                paginationEl.style.display = 'none';\n                errorEl.style.display = 'none';\n            }\n            \n            function showContent() {\n                loadingEl.style.display = 'none';\n                gridEl.style.display = 'grid';\n                errorEl.style.display = 'none';\n            }\n            \n            function showError() {\n                loadingEl.style.display = 'none';\n                gridEl.style.display = 'none';\n                paginationEl.style.display = 'none';\n                errorEl.style.display = 'block';\n            }\n            \n            async function fetchJobs() {\n                showLoading();\n                \n                try {\n                    \/\/ Validate API URL\n                    if (!apiUrl || apiUrl === 'your-api-url' || apiUrl.includes('your-api-url')) {\n                        throw new Error('Invalid API URL configuration');\n                    }\n                    \n                    console.log('Fetching jobs from:', apiUrl);\n                    const response = await fetch(apiUrl);\n                    \n                    if (!response.ok) {\n                        throw new Error(`HTTP error! status: ${response.status}`);\n                    }\n                    \n                    const data = await response.json();\n                    \n                    if (data.success && data.data) {\n                        allJobs = data.data.filter(job => job.isActive);\n                        currentPage = 1;\n                        renderJobs();\n                        showContent();\n                    } else {\n                        throw new Error('Invalid response format');\n                    }\n                } catch (error) {\n                    console.error('Error fetching jobs:', error);\n                    showError();\n                }\n            }\n            \n            \/\/ Event listeners\n            prevBtn.addEventListener('click', () => {\n                if (currentPage > 1) {\n                    currentPage--;\n                    renderJobs();\n                    container.scrollIntoView({ behavior: 'smooth' });\n                }\n            });\n            \n            nextBtn.addEventListener('click', () => {\n                const totalPages = Math.ceil(allJobs.length \/ jobsPerPage);\n                if (currentPage < totalPages) {\n                    currentPage++;\n                    renderJobs();\n                    container.scrollIntoView({ behavior: 'smooth' });\n                }\n            });\n            \n            retryBtn.addEventListener('click', fetchJobs);\n            \n            \/\/ Global function for job details (can be customized)\n            window.viewJobDetails = function(jobId) {\n                const job = allJobs.find(j => j._id === jobId);\n                if (job) {\n                    \/\/ You can customize this to show a modal or redirect to a details page\n                    alert(`Job Details for: ${job.title}\\n\\nDescription: ${job.description}\\n\\nRequirements: ${job.jobDetail.replace(\/<[^>]*>\/g, '')}`);\n                }\n            };\n            \n            \/\/ Initialize\n            fetchJobs();\n        })();\n    <\/script>\n    \n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/project.hexondigital.com\/edijobs\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/project.hexondigital.com\/edijobs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/project.hexondigital.com\/edijobs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/project.hexondigital.com\/edijobs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/project.hexondigital.com\/edijobs\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":1,"href":"https:\/\/project.hexondigital.com\/edijobs\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/project.hexondigital.com\/edijobs\/wp-json\/wp\/v2\/pages\/9\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/project.hexondigital.com\/edijobs\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}