<?php include 'header.php'; ?>

<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">

<style>select.tomselected{display:none!important;opacity:0!important;position:absolute!important;pointer-events:none!important;}.ts-dropdown{position:absolute!important;z-index:999999!important;}.modal-ts-wrapper select{opacity:0!important;position:absolute!important;z-index:-1!important;height:0!important;width:0!important;overflow:hidden!important;}.modal-ts-wrapper{width:100%;position:relative;}.modal-ts-wrapper .ts-control{min-height:40px!important;height:40px!important;border:1px solid #e5e7eb!important;border-radius:12px!important;padding:0 12px!important;background:#f9fafb!important;box-shadow:none!important;display:flex!important;align-items:center!important;overflow:hidden!important;font-size:14px!important;position:relative!important;}.modal-ts-wrapper .ts-control input{font-size:14px!important;color:#374151!important;background:transparent!important;}.modal-ts-wrapper.focus .ts-control,.ts-control.focus{border-color:#818cf8!important;box-shadow:0 0 0 4px rgba(99,102,241,.10)!important;background:#fff!important;}.modal-ts-wrapper .ts-dropdown{margin-top:8px!important;border-radius:14px!important;border:1px solid #e5e7eb!important;overflow:hidden!important;background:#fff!important;box-shadow:0 10px 30px rgba(0,0,0,.10)!important;z-index:999999!important;}.modal-ts-wrapper .ts-dropdown-content{max-height:220px!important;overflow-y:auto!important;}.modal-ts-wrapper .ts-dropdown-content::-webkit-scrollbar{width:6px;}.modal-ts-wrapper .ts-dropdown-content::-webkit-scrollbar-thumb{background:#c7d2fe;border-radius:20px;}.modal-ts-wrapper .option{padding:12px 14px!important;font-size:14px!important;cursor:pointer;}.modal-ts-wrapper .active{background:#eef2ff!important;color:#4f46e5!important;}.swal2-popup{border-radius:24px!important;padding:22px!important;width:360px!important;font-family:inherit!important;box-shadow:0 20px 45px rgba(0,0,0,.08),0 8px 18px rgba(59,130,246,.08)!important;}.swal2-icon{border-width:3px!important;margin-top:10px!important;margin-bottom:10px!important;}.swal2-title{font-size:22px!important;font-weight:700!important;color:#111827!important;padding:0!important;margin-top:5px!important;}.swal2-html-container{font-size:14px!important;color:#6b7280!important;margin-top:10px!important;line-height:1.6!important;}.swal2-actions{width:100%!important;gap:12px!important;margin-top:22px!important;}.swal2-confirm,.swal2-cancel{height:46px!important;border-radius:14px!important;font-size:14px!important;font-weight:600!important;padding:0 22px!important;transition:all .25s ease!important;box-shadow:none!important;}.swal2-confirm{background:linear-gradient(to right,#3b82f6,#4f46e5)!important;}.swal2-confirm:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(59,130,246,.25)!important;}.swal2-cancel{background:#f3f4f6!important;color:#374151!important;}.swal2-cancel:hover{background:#e5e7eb!important;}.swal2-timer-progress-bar{background:linear-gradient(to right,#3b82f6,#4f46e5)!important;}div:where(.swal2-container){backdrop-filter:blur(4px);}.ts-wrapper{width:100%!important;}.ts-dropdown{z-index:999999!important;position:fixed!important;}.modal-ts-wrapper .ts-control{cursor:pointer!important;}#followupOverlay,#statusUpdateOverlay{z-index:99999!important;}.ts-control{min-height:40px!important;}</style>

<!-- Page Wrapper -->
<div class="px-0 py-3 md:p-2 lg:p-6">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5 bg-white p-4 rounded-lg border border-gray-200">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Manage Applicants</h1>
            <p class="text-sm text-gray-500">Manage all applications from here</p>
        </div>

        <!-- Actions -->
        <div class="flex flex-wrap items-center gap-3">

            <!-- Search -->
            <div class="relative flex-1 min-w-[240px] max-w-[260px]">
                <input type="text" placeholder="Search Applicants..."
                    class="w-full h-11 pl-11 pr-4 rounded-2xl border border-gray-200 bg-white text-sm text-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition">
                <i class="ri-search-line absolute left-4 top-1/2 -translate-y-1/2 text-lg text-gray-400"></i>
            </div>

            <!-- Filter -->
            <button id="openFilter"
                class="h-11 px-5 rounded-2xl border border-blue-100 bg-white hover:bg-gradient-to-r hover:from-blue-500 hover:to-indigo-600 hover:text-white transition-all duration-300 text-sm text-blue-600 flex items-center gap-2">
                <i class="ri-filter-3-line"></i>
                Filter
            </button>

            <!-- Add Applicant -->
            <a href="add_applicant.php">
                <button
                    class="inline-flex items-center gap-2 h-11 px-5 rounded-xl bg-violet-500 hover:bg-violet-600 text-white text-sm font-semibold transition-all shadow-sm">
                    <i class="ri-add-line"></i>
                    Add
                </button>
            </a>

        </div>
    </div>


    <!-- ===================== TOP STATS CARDS (7 in one row, no wrap) ===================== -->
    <div class="flex flex-nowrap gap-4 mb-5 overflow-x-auto pb-1">

        <!-- Total Applicants -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition flex-shrink-0 flex-1 min-w-[160px]">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500 font-medium">Total Applicants</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">2,950</h2>
                </div>
                <div class="w-11 h-11 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0">
                    <i class="ri-group-line text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Fresh -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition flex-shrink-0 flex-1 min-w-[160px]">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500 font-medium">Fresh</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">648</h2>
                </div>
                <div class="w-11 h-11 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center flex-shrink-0">
                    <i class="ri-user-add-line text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Interview Scheduled -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition flex-shrink-0 flex-1 min-w-[160px]">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500 font-medium">Interview Scheduled</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">312</h2>
                </div>
                <div class="w-11 h-11 rounded-xl bg-cyan-50 text-cyan-600 flex items-center justify-center flex-shrink-0">
                    <i class="ri-calendar-check-line text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Interview Today -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition flex-shrink-0 flex-1 min-w-[160px]">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500 font-medium">Interview Today</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">18</h2>
                </div>
                <div class="w-11 h-11 rounded-xl bg-violet-50 text-violet-600 flex items-center justify-center flex-shrink-0">
                    <i class="ri-calendar-event-line text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Followup -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition flex-shrink-0 flex-1 min-w-[160px]">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500 font-medium">Followup</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">194</h2>
                </div>
                <div class="w-11 h-11 rounded-xl bg-yellow-50 text-yellow-600 flex items-center justify-center flex-shrink-0">
                    <i class="ri-phone-line text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Salary Discussion -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition flex-shrink-0 flex-1 min-w-[160px]">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500 font-medium">Salary Discussion</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">87</h2>
                </div>
                <div class="w-11 h-11 rounded-xl bg-green-50 text-green-600 flex items-center justify-center flex-shrink-0">
                    <i class="ri-money-rupee-circle-line text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Rejected -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition flex-shrink-0 flex-1 min-w-[160px]">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500 font-medium">Rejected</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">210</h2>
                </div>
                <div class="w-11 h-11 rounded-xl bg-red-50 text-red-600 flex items-center justify-center flex-shrink-0">
                    <i class="ri-close-circle-line text-xl"></i>
                </div>
            </div>
        </div>

    </div>


    <!-- Card / Table -->
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-x-auto overflow-y-hidden">

        <div class="overflow-x-auto">
            <table class="w-full min-w-[900px]">

                <!-- Table Head -->
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr class="text-left whitespace-nowrap">
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Sr. No.</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Full Name</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Mobile</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Applying For</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Applied Date</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Interview Date</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Applied From</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Action</th>
                    </tr>
                </thead>

                <!-- Table Body -->
                <tbody class="divide-y divide-gray-100 bg-white">

                    <!-- Row 1 -->
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600">01</td>
                        <td class="px-6 py-4 text-sm text-gray-700 font-medium whitespace-nowrap">Rahul Sharma</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">+91 98765 43210</td>
                        <td class="px-6 py-4 text-sm text-gray-700 font-medium whitespace-nowrap">Sales Executive</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">22 May 2025</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">28 May 2025</td>
                        <td class="px-6 py-4">
                            <span class="inline-flex whitespace-nowrap px-3 py-1 rounded-full text-xs font-semibold bg-cyan-100 text-cyan-700">Interview Scheduled</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex whitespace-nowrap px-3 py-1 rounded-full text-xs font-semibold bg-blue-50 text-blue-600">Manual</span>
                        </td>
                        <td class="px-6 py-4 align-middle">
                            <div class="flex items-center justify-center gap-2 whitespace-nowrap">

                                <!-- Followup -->
                                <div class="relative group">
                                    <button onclick="openFollowupModal(this)" data-name="Rahul Sharma" data-position="Sales Executive"
                                        class="w-9 h-9 rounded-lg bg-cyan-50 text-cyan-600 hover:bg-cyan-100 transition flex items-center justify-center">
                                        <i class="ri-calendar-check-line"></i>
                                    </button>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">Followup</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>



                                <!-- View -->
                                <div class="relative group">
                                    <a href="view_applicant.php" class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line"></i>
                                    </a>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">View</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>

                                <!-- Edit -->
                                <div class="relative group">
                                    <button class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">Edit</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>

                                <!-- Delete -->
                                <div class="relative group">
                                    <button onclick="deleteRow(this)" class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">Delete</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>

                            </div>
                        </td>
                    </tr>

                    <!-- Row 2 -->
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600">02</td>
                        <td class="px-6 py-4 text-sm text-gray-700 font-medium whitespace-nowrap">Priya Patel</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">+91 97654 32109</td>
                        <td class="px-6 py-4 text-sm text-gray-700 font-medium whitespace-nowrap">HR Manager</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">20 May 2025</td>
                        <td class="px-6 py-4 text-sm text-gray-400">—</td>
                        <td class="px-6 py-4">
                            <span class="inline-flex whitespace-nowrap px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700">Fresh</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex whitespace-nowrap px-3 py-1 rounded-full text-xs font-semibold bg-orange-50 text-orange-600">Website</span>
                        </td>
                        <td class="px-6 py-4 align-middle">
                            <div class="flex items-center justify-center gap-2 whitespace-nowrap">
                                <div class="relative group">
                                    <button onclick="openFollowupModal(this)" data-name="Priya Patel" data-position="HR Manager"
                                        class="w-9 h-9 rounded-lg bg-cyan-50 text-cyan-600 hover:bg-cyan-100 transition flex items-center justify-center">
                                        <i class="ri-calendar-check-line"></i>
                                    </button>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">Followup</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>

                                <div class="relative group">
                                    <a href="view_applicant.php" class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line"></i>
                                    </a>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">View</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>
                                <div class="relative group">
                                    <button class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">Edit</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>
                                <div class="relative group">
                                    <button onclick="deleteRow(this)" class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">Delete</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <!-- Row 3 -->
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600">03</td>
                        <td class="px-6 py-4 text-sm text-gray-700 font-medium whitespace-nowrap">Amit Mehta</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">+91 96543 21098</td>
                        <td class="px-6 py-4 text-sm text-gray-700 font-medium whitespace-nowrap">Backend Developer</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">18 May 2025</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">26 May 2025</td>
                        <td class="px-6 py-4">
                            <span class="inline-flex whitespace-nowrap px-3 py-1 rounded-full text-xs font-semibold bg-violet-100 text-violet-700">Interview Today</span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex whitespace-nowrap px-3 py-1 rounded-full text-xs font-semibold bg-orange-50 text-orange-600">Website</span>
                        </td>
                        <td class="px-6 py-4 align-middle">
                            <div class="flex items-center justify-center gap-2 whitespace-nowrap">
                                <div class="relative group">
                                    <button onclick="openFollowupModal(this)" data-name="Amit Mehta" data-position="Backend Developer"
                                        class="w-9 h-9 rounded-lg bg-cyan-50 text-cyan-600 hover:bg-cyan-100 transition flex items-center justify-center">
                                        <i class="ri-calendar-check-line"></i>
                                    </button>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">Followup</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>

                                <div class="relative group">
                                    <a href="view_applicant.php" class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line"></i>
                                    </a>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">View</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>
                                <div class="relative group">
                                    <button class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">
                                        <i class="ri-edit-line"></i>
                                    </button>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">Edit</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>
                                <div class="relative group">
                                    <button onclick="deleteRow(this)" class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 pointer-events-none transition duration-200 z-50">
                                        <div class="bg-gray-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg whitespace-nowrap">Delete</div>
                                        <div class="w-2.5 h-2.5 bg-gray-900 rotate-45 absolute left-1/2 -translate-x-1/2 -bottom-1"></div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>

        <!-- Footer / Pagination -->
        <div class="px-4 py-4 border-t border-gray-100 flex flex-col md:flex-row items-center justify-between gap-4">
            <p class="text-sm text-gray-500">Showing 1 to 3 of 62 records</p>
            <div class="flex items-center gap-2">
                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition"><i class="ri-arrow-left-s-line"></i></button>
                <button class="w-9 h-9 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium shadow-md">1</button>
                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">2</button>
                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">3</button>
                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">4</button>
                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition"><i class="ri-arrow-right-s-line"></i></button>
            </div>
        </div>

    </div>

</div>


<!-- ============================================================
     FILTER SIDEBAR
     ============================================================ -->
<div id="filterSidebar"
    class="fixed top-0 right-[-400px] w-[320px] h-full bg-white shadow-2xl z-50 transition-all duration-300 border-l border-gray-200">

    <div class="flex items-center justify-between p-5 border-b border-gray-100">
        <h2 class="text-lg font-bold text-gray-800">Filters</h2>
        <button id="closeFilter" class="w-9 h-9 text-black flex items-center justify-center">
            <i class="ri-close-line text-xl"></i>
        </button>
    </div>

    <div class="p-5 space-y-5 pb-28 overflow-y-auto">

        <!-- Applied From Date -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">Applied From Date</label>
            <div class="relative">
                <i class="ri-calendar-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
                <input type="date" class="h-11 w-full rounded-md border border-slate-200 bg-slate-50 pl-10 pr-4 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">
            </div>
        </div>

        <!-- Applied To Date -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">Applied To Date</label>
            <div class="relative">
                <i class="ri-calendar-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
                <input type="date" class="h-11 w-full rounded-md border border-slate-200 bg-slate-50 pl-10 pr-4 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">
            </div>
        </div>

        <!-- Interview Date -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">Interview Date</label>
            <div class="relative">
                <i class="ri-calendar-check-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
                <input type="date" class="h-11 w-full rounded-md border border-slate-200 bg-slate-50 pl-10 pr-4 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">
            </div>
        </div>

        <!-- Applying For -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">Applying For</label>
            <div class="relative">
                <div class="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-slate-400"><i class="ri-briefcase-line"></i></div>
                <select id="applyingFor">
                    <option value="">All Positions</option>
                    <option value="sales">Sales Executive</option>
                    <option value="hr">HR Manager</option>
                    <option value="backend">Backend Developer</option>
                    <option value="frontend">Frontend Developer</option>
                    <option value="marketing">Marketing Manager</option>
                </select>
            </div>
        </div>

        <!-- Applied From -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">Applied From</label>
            <div class="relative">
                <div class="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-slate-400"><i class="ri-global-line"></i></div>
                <select id="appliedFrom">
                    <option value="">All Sources</option>
                    <option value="manual">Manual</option>
                    <option value="website">Website</option>
                </select>
            </div>
        </div>

        <!-- Status -->
        <div class="w-full">

            <label class="mb-1 block text-sm font-medium text-slate-700">
                Status
            </label>

            <div class="relative">

                <div class="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-slate-400">

                    <i class="ri-loader-4-line"></i>

                </div>

                <select id="statusSelect">

                    <option value="">Select Status</option>

                    <option value="Fresh">
                        Fresh
                    </option>

                    <option value="Interview Scheduled">
                        Interview Scheduled
                    </option>

                    <option value="Interview Today">
                        Interview Today
                    </option>

                    <option value="Followup">
                        Followup
                    </option>

                    <option value="Salary Discussion">
                        Salary Discussion
                    </option>

                    <option value="Rejected">
                        Rejected
                    </option>

                    <option value="All">
                        All
                    </option>

                </select>

            </div>

        </div>

    </div>

    <div class="absolute bottom-0 left-0 w-full border-t border-gray-200 bg-white p-4">
        <div class="flex flex-row items-center justify-center gap-3 whitespace-nowrap">
            <button class="w-1/2 h-11 rounded-md border border-slate-200 bg-slate-100 text-sm font-medium text-slate-700 transition hover:bg-slate-200">Reset</button>
            <button class="w-1/2 h-11 rounded-md bg-gradient-to-r from-blue-500 to-indigo-600 text-sm font-medium text-white shadow-md transition hover:from-blue-600 hover:to-indigo-700">Apply Filter</button>
        </div>
    </div>
</div>


<!-- ============================================================
     FOLLOWUP MODAL
     ============================================================ -->
<div id="followupOverlay"
    class="fixed inset-0 bg-black/40 z-[999] hidden items-center justify-center p-4 overflow-y-auto"
    onclick="closeFollowupModal(event)">

    <!-- Modal Box -->
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl border border-gray-100 my-auto"
        onclick="event.stopPropagation()">

        <!-- Modal Header -->
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <div>
                <h3 class="text-base font-semibold text-gray-800">Add Followup</h3>
                <p class="text-xs text-gray-400 mt-0.5">
                    <i class="ri-user-line mr-1"></i>
                    <span id="modal-applicant-name">—</span>
                    &mdash;
                    <span id="modal-applicant-position">—</span>
                </p>
            </div>
            <button onclick="closeFollowupModal()"
                class="w-8 h-8 rounded-lg border border-gray-200 text-gray-400 hover:bg-gray-100 flex items-center justify-center transition">
                <i class="ri-close-line text-lg"></i>
            </button>
        </div>

        <!-- Modal Body -->
        <div class="px-6 py-5 space-y-4">

            <div class="flex flex-wrap gap-3 items-end">

                <!-- Status Dropdown -->
                <div class="w-44 flex-shrink-0">
                    <label class="block text-xs font-medium text-gray-500 mb-1.5">Status</label>
                    <div class="modal-ts-wrapper">
                        <select id="followup-status" onchange="handleFollowupStatus(this.value)">
                            <option value="">Select status</option>
                            <option value="fresh">Fresh</option>
                            <option value="interview_scheduled">Interview Scheduled</option>
                            <option value="interview_today">Interview Today</option>
                            <option value="followup">Followup</option>
                            <option value="salary_discussion">Salary Discussion</option>
                            <option value="rejected">Rejected</option>
                        </select>
                    </div>
                </div>

                <!-- Remark -->
                <div class="flex-1 min-w-[180px]">
                    <label class="block text-xs font-medium text-gray-500 mb-1.5">Remark</label>
                    <input type="text" id="followup-remark" placeholder="Add a remark..."
                        class="w-full h-10 rounded-xl border border-gray-200 bg-gray-50 px-3 text-sm text-gray-700 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 transition">
                </div>

                <!-- Interview Date — shown for Interview Scheduled / Today -->
                <div id="field-interview-date" class="hidden w-48 flex-shrink-0">
                    <label class="block text-xs font-medium text-gray-500 mb-1.5">
                        <i class="ri-calendar-event-line mr-1 text-blue-400"></i>Interview Date
                    </label>
                    <div class="relative">
                        <i class="ri-calendar-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
                        <input type="date" id="followup-interview-date"
                            class="w-full h-10 rounded-xl border border-gray-200 bg-gray-50 pl-9 pr-3 text-sm text-gray-700 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 transition">
                    </div>
                </div>

                <!-- Next Followup Date — shown for Followup -->
                <div id="field-followup-date" class="hidden w-48 flex-shrink-0">
                    <label class="block text-xs font-medium text-gray-500 mb-1.5">
                        <i class="ri-calendar-check-line mr-1 text-cyan-400"></i>Next Followup Date
                    </label>
                    <div class="relative">
                        <i class="ri-calendar-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
                        <input type="date" id="followup-followup-date"
                            class="w-full h-10 rounded-xl border border-gray-200 bg-gray-50 pl-9 pr-3 text-sm text-gray-700 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 transition">
                    </div>
                </div>

                <!-- Submit -->
                <div class="flex-shrink-0">
                    <button onclick="submitFollowup()"
                        class="h-10 px-5 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white text-sm font-medium shadow-md hover:shadow-blue-200 transition-all duration-300 flex items-center gap-2 whitespace-nowrap">
                        <i class="ri-check-line"></i>Submit
                    </button>
                </div>

            </div>

        </div>

        <!-- Divider -->
        <div class="mx-6 border-t border-gray-100"></div>

        <!-- Followup History Table -->
        <div class="px-6 py-4">

            <div class="flex items-center gap-2 mb-3">
                <i class="ri-history-line text-indigo-500"></i>
                <span class="text-sm font-semibold text-gray-700">Followup History</span>
                <span id="followup-count" class="bg-blue-50 text-blue-600 text-xs font-semibold px-2.5 py-0.5 rounded-full">3</span>
            </div>

            <div class="overflow-x-auto rounded-xl border border-gray-200">
                <table class="w-full min-w-[700px]">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr class="text-left whitespace-nowrap">
                            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Date</th>
                            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Remark</th>
                            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Followup Date</th>
                            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Interview Date</th>
                            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Added By</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 bg-white" id="followup-tbody">

                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">10 May 2025</td>
                            <td class="px-4 py-3">
                                <span class="inline-flex px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700">Fresh</span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">Resume received, shortlisted for round 1</td>
                            <td class="px-4 py-3 text-sm text-gray-400">—</td>
                            <td class="px-4 py-3 text-sm text-gray-400">—</td>
                            <td class="px-4 py-3 text-sm text-gray-700">HR Team</td>
                        </tr>

                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">15 May 2025</td>
                            <td class="px-4 py-3">
                                <span class="inline-flex px-2.5 py-1 rounded-full text-xs font-semibold bg-cyan-100 text-cyan-700">Interview Scheduled</span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">Called and confirmed interview slot</td>
                            <td class="px-4 py-3 text-sm text-gray-400">—</td>
                            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">20 May 2025</td>
                            <td class="px-4 py-3 text-sm text-gray-700">Priya Patel</td>
                        </tr>

                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">20 May 2025</td>
                            <td class="px-4 py-3">
                                <span class="inline-flex px-2.5 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700">Followup</span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">Interview done, awaiting feedback from panel</td>
                            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">25 May 2025</td>
                            <td class="px-4 py-3 text-sm text-gray-400">—</td>
                            <td class="px-4 py-3 text-sm text-gray-700">Rahul Sharma</td>
                        </tr>

                    </tbody>
                </table>
            </div>

        </div>

        <!-- Modal Footer -->
        <div class="px-6 py-4 border-t border-gray-100 flex justify-end">
            <button onclick="closeFollowupModal()"
                class="px-5 py-2 rounded-xl border border-gray-200 bg-white text-gray-600 text-sm hover:bg-gray-50 transition">
                Close
            </button>
        </div>

    </div>
</div>


<script>
    const statusSelect = new TomSelect("#statusSelect", {

        create: false,
        maxOptions: 10,
        placeholder: "Search Status...",

        openOnFocus: false,
        dropdownParent: "body",

        closeAfterSelect: true,

        onType: function(str) {

            if (str.trim().length > 0) {

                this.open();

            } else {

                this.close();

            }

        },

        onItemAdd: function() {

            this.control_input.value = "";

            this.control_input.setAttribute(
                "readonly",
                "readonly"
            );

            this.blur();
            this.close();

        },

        onDropdownOpen: function() {

            this.control_input.removeAttribute(
                "readonly"
            );

        }

    });


    /* CONTROL STYLE */
    statusSelect.control.classList.add(
        "flex",
        "items-center",
        "h-11",
        "w-full",
        "rounded-lg",
        "border",
        "border-gray-200",
        "bg-white",
        "pl-10",
        "pr-4",
        "text-sm",
        "text-gray-700"
    );


    /* DROPDOWN STYLE */
    statusSelect.dropdown.classList.add(
        "z-[99999]",
        "overflow-hidden",
        "rounded-xl",
        "border",
        "border-gray-200",
        "bg-white",
        "shadow-xl"
    );


    /* INPUT STYLE */
    statusSelect.control_input.classList.add(
        "w-full",
        "bg-transparent",
        "text-sm",
        "text-gray-700",
        "placeholder:text-gray-400",
        "focus:outline-none",
        "ml-2"
    );


    /* DROPDOWN POSITION FIX */
    statusSelect.on("dropdown_open", function() {

        const controlRect =
            statusSelect.control.getBoundingClientRect();

        statusSelect.dropdown.style.position = "absolute";

        statusSelect.dropdown.style.width =
            controlRect.width + "px";

        statusSelect.dropdown.style.top =
            (controlRect.bottom + window.scrollY + 5) + "px";

        statusSelect.dropdown.style.left =
            (controlRect.left + window.scrollX) + "px";

        statusSelect.dropdown.style.zIndex = "99999";

    });
</script>



<!-- ============================================================
     SCRIPTS
     ============================================================ -->

<!-- Filter Sidebar -->
<script>
    const openFilter = document.getElementById("openFilter");
    const closeFilter = document.getElementById("closeFilter");
    const filterSidebar = document.getElementById("filterSidebar");
    const sidebarOverlay = document.getElementById("sidebarOverlay");

    openFilter.addEventListener("click", () => {
        filterSidebar.style.right = "0";
        sidebarOverlay.classList.remove("hidden");
    });
    closeFilter.addEventListener("click", () => {
        filterSidebar.style.right = "-400px";
        sidebarOverlay.classList.add("hidden");
    });
    sidebarOverlay.addEventListener("click", () => {
        filterSidebar.style.right = "-400px";
        sidebarOverlay.classList.add("hidden");
    });
</script>

<!-- Delete Row -->
<script>
    function deleteRow(button) {
        Swal.fire({
            title: "Delete Record?",
            text: "This applicant record will be deleted.",
            icon: "warning",
            width: "320px",
            padding: "1rem",
            showCancelButton: true,
            scrollbarPadding: false,
            confirmButtonText: "Delete",
            cancelButtonText: "Cancel",
            confirmButtonColor: "#2563eb",
            cancelButtonColor: "#ef4444",
            customClass: {
                popup: "rounded-2xl",
                title: "text-lg font-semibold",
                htmlContainer: "text-sm text-gray-500",
                confirmButton: "px-4 py-2 rounded-lg text-sm",
                cancelButton: "px-4 py-2 rounded-lg text-sm"
            }
        }).then((result) => {
            if (result.isConfirmed) {
                button.closest("tr").remove();
                Swal.fire({
                    icon: "success",
                    title: "Deleted!",
                    text: "Record removed successfully.",
                    width: "300px",
                    padding: "1rem",
                    showConfirmButton: false,
                    timer: 1400
                });
            }
        });
    }
</script>

<!-- Followup Modal -->
<script>
    let followupStatusSelect;

    function initFollowupStatusSelect() {
        if (followupStatusSelect) followupStatusSelect.destroy();
        followupStatusSelect = new TomSelect("#followup-status", {
            create: false,
            placeholder: "Select status",
            dropdownParent: null,
            openOnFocus: true,
            maxOptions: 20,
            onChange: function(value) {
                handleFollowupStatus(value);
            }
        });
        followupStatusSelect.control.addEventListener('click', function(e) {
            e.stopImmediatePropagation();
            if (followupStatusSelect.isOpen) followupStatusSelect.close();
            else followupStatusSelect.open();
        });
    }

    function handleFollowupStatus(val) {
        document.getElementById('field-interview-date').classList.add('hidden');
        document.getElementById('field-followup-date').classList.add('hidden');
        if (val === 'interview_scheduled' || val === 'interview_today') document.getElementById('field-interview-date').classList.remove('hidden');
        if (val === 'followup') document.getElementById('field-followup-date').classList.remove('hidden');
    }

    function openFollowupModal(btn) {
        document.getElementById('modal-applicant-name').textContent = btn.getAttribute('data-name') || '—';
        document.getElementById('modal-applicant-position').textContent = btn.getAttribute('data-position') || '—';
        document.getElementById('followup-remark').value = '';
        document.getElementById('followup-interview-date').value = '';
        document.getElementById('followup-followup-date').value = '';
        document.getElementById('field-interview-date').classList.add('hidden');
        document.getElementById('field-followup-date').classList.add('hidden');
        const ov = document.getElementById('followupOverlay');
        document.body.style.overflow = 'hidden';
        ov.classList.remove('hidden');
        ov.classList.add('flex');
        setTimeout(() => {
            initFollowupStatusSelect();
        }, 200);
    }

    function closeFollowupModal(e) {
        if (e && e.target !== document.getElementById('followupOverlay')) return;
        const ov = document.getElementById('followupOverlay');
        ov.classList.add('hidden');
        ov.classList.remove('flex');
        document.body.style.overflow = '';
    }

    function getStatusBadge(val) {
        const map = {
            fresh: {
                cls: 'bg-emerald-100 text-emerald-700',
                label: 'Fresh'
            },
            interview_scheduled: {
                cls: 'bg-cyan-100 text-cyan-700',
                label: 'Interview Scheduled'
            },
            interview_today: {
                cls: 'bg-violet-100 text-violet-700',
                label: 'Interview Today'
            },
            followup: {
                cls: 'bg-yellow-100 text-yellow-700',
                label: 'Followup'
            },
            salary_discussion: {
                cls: 'bg-green-100 text-green-700',
                label: 'Salary Discussion'
            },
            rejected: {
                cls: 'bg-red-100 text-red-700',
                label: 'Rejected'
            },
        };
        const s = map[val] || {
            cls: 'bg-gray-100 text-gray-600',
            label: val
        };
        return `<span class="inline-flex px-2.5 py-1 rounded-full text-xs font-semibold ${s.cls}">${s.label}</span>`;
    }

    function formatDate(d) {
        if (!d) return '—';
        const [y, m, day] = d.split('-');
        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        return `${parseInt(day)} ${months[parseInt(m)-1]} ${y}`;
    }

    function submitFollowup() {
        const status = document.getElementById('followup-status').value;
        const remark = document.getElementById('followup-remark').value.trim();
        const interviewDate = document.getElementById('followup-interview-date').value;
        const followupDate = document.getElementById('followup-followup-date').value;

        if (!status) {
            Swal.fire({
                icon: 'warning',
                title: 'Required',
                text: 'Please select a status.',
                width: '300px',
                confirmButtonColor: '#2563eb'
            });
            return;
        }
        if (!remark) {
            Swal.fire({
                icon: 'warning',
                title: 'Required',
                text: 'Please enter a remark.',
                width: '300px',
                confirmButtonColor: '#2563eb'
            });
            return;
        }

        const today = new Date().toLocaleDateString('en-GB', {
            day: 'numeric',
            month: 'short',
            year: 'numeric'
        });
        const showInterview = (status === 'interview_scheduled' || status === 'interview_today');

        const tr = document.createElement('tr');
        tr.className = 'hover:bg-gray-50 transition';
        tr.innerHTML = `
            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">${today}</td>
            <td class="px-4 py-3">${getStatusBadge(status)}</td>
            <td class="px-4 py-3 text-sm text-gray-600">${remark}</td>
            <td class="px-4 py-3 text-sm ${status==='followup'&&followupDate?'text-gray-600 whitespace-nowrap':'text-gray-400'}">${status==='followup'?formatDate(followupDate):'—'}</td>
            <td class="px-4 py-3 text-sm ${showInterview&&interviewDate?'text-gray-600 whitespace-nowrap':'text-gray-400'}">${showInterview?formatDate(interviewDate):'—'}</td>
            <td class="px-4 py-3 text-sm text-gray-700">You</td>`;

        const tbody = document.getElementById('followup-tbody');
        tbody.insertBefore(tr, tbody.firstChild);
        document.getElementById('followup-count').textContent = tbody.querySelectorAll('tr').length;

        const ov = document.getElementById('followupOverlay');
        ov.classList.add('hidden');
        ov.classList.remove('flex');
        document.body.style.overflow = '';
        if (followupStatusSelect) {
            followupStatusSelect.clear();
        }
        document.getElementById('followup-remark').value = '';
        document.getElementById('followup-interview-date').value = '';
        document.getElementById('followup-followup-date').value = '';
        handleFollowupStatus('');

        Swal.fire({
            icon: 'success',
            title: 'Saved!',
            text: 'Followup added successfully.',
            width: '300px',
            showConfirmButton: false,
            timer: 1500
        });
    }
</script>


<!-- Tom Select -->
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        new TomSelect("#applyingFor", {
            create: false,
            placeholder: "Search Position...",
            dropdownParent: "body",
            openOnFocus: true,
            maxOptions: 20
        });
        new TomSelect("#appliedFrom", {
            create: false,
            placeholder: "Search Source...",
            dropdownParent: "body",
            openOnFocus: true,
            maxOptions: 20
        });
    });
</script>

<?php include 'footer.php'; ?>