<?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-success-ring{border-color:rgba(34,197,94,.2)!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;}</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">

        <!-- Title -->
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Visit Records</h1>
            <p class="text-sm text-gray-500">Manage all visit records 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 Users..."
                    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>

            <!-- DCR History -->
            <a href="dcr_history.php"
                class="w-11 h-11 rounded-2xl border border-purple-100 bg-white hover:bg-purple-50 transition-all duration-300 text-purple-600 flex items-center justify-center">
                <i class="ri-history-line text-lg"></i>
            </a>

            <!-- Download Report -->
            <button
                class="w-11 h-11 rounded-2xl border border-green-100 bg-white hover:bg-green-50 transition-all duration-300 text-green-600 flex items-center justify-center">
                <i class="ri-download-2-line text-lg"></i>
            </button>

            <!-- Add Visit -->
            <a href="add_visit.php"
                class="h-11 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white text-sm font-medium px-5 rounded-2xl shadow-lg hover:shadow-blue-200 transition-all duration-300 flex items-center gap-2">
                <i class="ri-add-line text-lg"></i>
                Add Visit
            </a>

        </div>
    </div>


    <!-- ===================== TOP STATS CARDS ===================== -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-6 gap-4 mb-5">

        <!-- Total DCR -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Total DCR</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">1,248</h2>
                </div>
                <div class="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
                    <i class="ri-file-list-3-line text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- Total Transferred -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Total Transferred</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">342</h2>
                </div>
                <div class="w-12 h-12 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center">
                    <i class="ri-share-forward-line text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- Today DCR -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Today DCR</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">58</h2>
                </div>
                <div class="w-12 h-12 rounded-xl bg-cyan-50 text-cyan-600 flex items-center justify-center">
                    <i class="ri-calendar-check-line text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- Today Transferred -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Today Transferred</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">12</h2>
                </div>
                <div class="w-12 h-12 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center">
                    <i class="ri-exchange-line text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- Not Interested -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">Not Interested</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">86</h2>
                </div>
                <div class="w-12 h-12 rounded-xl bg-red-50 text-red-600 flex items-center justify-center">
                    <i class="ri-close-circle-line text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- All Data -->
        <div class="bg-white border border-gray-200 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 font-medium">All Data</p>
                    <h2 class="text-2xl font-bold text-gray-800 mt-1">2,950</h2>
                </div>
                <div class="w-12 h-12 rounded-xl bg-green-50 text-green-600 flex items-center justify-center">
                    <i class="ri-database-2-line text-2xl"></i>
                </div>
            </div>
        </div>

    </div>
    <!-- Quick Action Buttons -->
    <div class="bg-white rounded-2xl border border-gray-200 p-4 mb-5">

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

            <!-- Interested -->
            <button class="flex items-center gap-2 px-5 h-11 rounded-xl bg-green-50 text-green-700 border border-green-200 hover:bg-green-100 transition text-sm font-medium">
                <i class="ri-thumb-up-line text-lg"></i>
                Interested
            </button>

            <!-- Followup -->
            <button class="flex items-center gap-2 px-5 h-11 rounded-xl bg-yellow-50 text-yellow-700 border border-yellow-200 hover:bg-yellow-100 transition text-sm font-medium">
                <i class="ri-phone-line text-lg"></i>
                Followup
            </button>

            <!-- Meeting -->
            <button class="flex items-center gap-2 px-5 h-11 rounded-xl bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100 transition text-sm font-medium">
                <i class="ri-calendar-check-line text-lg"></i>
                Meeting
            </button>

            <!-- Not Interested -->
            <button class="flex items-center gap-2 px-5 h-11 rounded-xl bg-red-50 text-red-700 border border-red-200 hover:bg-red-100 transition text-sm font-medium">
                <i class="ri-close-circle-line text-lg"></i>
                Not Interested
            </button>

        </div>

    </div>


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

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

                <!-- 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">S.L.</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Visit Date</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Sales Person</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Contact / Company</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Place</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Visit Type</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Purpose</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Outcome</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Next Action</th>
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">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 whitespace-nowrap">22 May 2024</td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <img src="https://i.pravatar.cc/40?img=1" class="w-8 h-8 rounded-full object-cover">
                                <span class="text-sm text-gray-700 font-medium whitespace-nowrap">Rahul Sharma</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">Raj Enterprise</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">Surat</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-100 text-blue-700">
                                Client Visit
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">Product Demo</td>
                        <td class="px-6 py-4">
                            <span class="inline-flex whitespace-nowrap px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                                Interested
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">Follow-up Meeting</td>
                        <td class="px-6 py-4 align-middle">
                            <div class="flex items-center justify-center gap-2 whitespace-nowrap">

                                <!-- Convert to Lead -->
                                <div class="relative group">
                                    <button
                                        onclick="openConvertLeadModal(this)"
                                        data-lead="Raj Enterprise"
                                        data-person="Rahul Sharma"
                                        class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 hover:bg-yellow-100 transition flex items-center justify-center">
                                        <i class="ri-user-add-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">Convert to Lead</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>


                                <!-- Transferred DCR -->
                                <div class="relative group">
                                    <button
                                        onclick="openTransferDcrModal(this)"
                                        data-lead="Raj Enterprise"
                                        data-person="Rahul Sharma"
                                        class="w-9 h-9 rounded-lg bg-purple-50 text-purple-600 hover:bg-purple-100 transition flex items-center justify-center">
                                        <i class="ri-share-forward-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">Transferred DCR</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>

                                <!-- Followup -->
                                <div class="relative group">
                                    <button
                                        onclick="openFollowupModal(this)"
                                        data-lead="Raj Enterprise"
                                        data-person="Rahul Sharma"
                                        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_visit.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 whitespace-nowrap">18 May 2024</td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <img src="https://i.pravatar.cc/40?img=2" class="w-8 h-8 rounded-full object-cover">
                                <span class="text-sm text-gray-700 font-medium whitespace-nowrap">Amit Mehta</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">ABC Corporation</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">Ahmedabad</td>
                        <td class="px-6 py-4">
                            <span class="inline-flex whitespace-nowrap px-3 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-700">
                                Cold Call
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">Introduction</td>
                        <td class="px-6 py-4">
                            <span class="inline-flex whitespace-nowrap px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700">
                                Pending
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">Send Brochure</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="openConvertLeadModal(this)"
                                        data-lead="ABC Corporation"
                                        data-person="Amit Mehta"
                                        class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 hover:bg-yellow-100 transition flex items-center justify-center">
                                        <i class="ri-user-add-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">Convert to Lead</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="openTransferDcrModal(this)"
                                        data-lead="ABC Corporation"
                                        data-person="Amit Mehta"
                                        class="w-9 h-9 rounded-lg bg-purple-50 text-purple-600 hover:bg-purple-100 transition flex items-center justify-center">
                                        <i class="ri-share-forward-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">Transferred DCR</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>

                                <!-- Followup -->
                                <div class="relative group">
                                    <button
                                        onclick="openFollowupModal(this)"
                                        data-lead="ABC Corporation"
                                        data-person="Amit Mehta"
                                        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_visit.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 whitespace-nowrap">15 May 2024</td>
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                <img src="https://i.pravatar.cc/40?img=3" class="w-8 h-8 rounded-full object-cover">
                                <span class="text-sm text-gray-700 font-medium whitespace-nowrap">Priya Patel</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">Galaxy Pvt Ltd</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">Mumbai</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-100 text-blue-700">
                                Client Visit
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">Negotiation</td>
                        <td class="px-6 py-4">
                            <span class="inline-flex whitespace-nowrap px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">
                                Not Interested
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">Re-engage Later</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="openConvertLeadModal(this)"
                                        data-lead="Galaxy Pvt Ltd"
                                        data-person="Priya Patel"
                                        class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 hover:bg-yellow-100 transition flex items-center justify-center">
                                        <i class="ri-user-add-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">Convert to Lead</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="reopenRecord(this)"
                                        class="w-9 h-9 rounded-lg bg-orange-50 text-orange-600 hover:bg-orange-100 transition flex items-center justify-center">
                                        <i class="ri-refresh-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">
                                            Reopen
                                        </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="openTransferDcrModal(this)"
                                        data-lead="Galaxy Pvt Ltd"
                                        data-person="Priya Patel"
                                        class="w-9 h-9 rounded-lg bg-purple-50 text-purple-600 hover:bg-purple-100 transition flex items-center justify-center">
                                        <i class="ri-share-forward-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">Transferred DCR</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>

                                <!-- Followup -->
                                <div class="relative group">
                                    <button
                                        onclick="openFollowupModal(this)"
                                        data-lead="Galaxy Pvt Ltd"
                                        data-person="Priya Patel"
                                        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_visit.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">

        <!-- From Date -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">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>

        <!-- To Date -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">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>

        <!-- Company Name -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">Company Name</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-user-3-line"></i>
                </div>
                <select id="companyName">
                    <option value="">Select Vendor</option>
                    <option value="Raj Enterprise">Raj Enterprise</option>
                    <option value="ABC Corporation">ABC Corporation</option>
                    <option value="Galaxy Pvt Ltd">Galaxy Pvt Ltd</option>
                    <option value="Bright Solutions">Bright Solutions</option>
                </select>
            </div>
        </div>
        
        <!-- Sales Person -->
<div class="w-full">

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

    <div class="relative">

        <i class="ri-user-star-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>

        <input 
            type="text"
            id="salesPerson"
            placeholder="Enter Sales Person"
            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>

<!-- Visit Type -->
<div class="w-full">

    <label class="mb-1 block text-sm font-medium text-slate-700">
        Visit Type
    </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-route-line"></i>

        </div>

        <select id="visitTypeSelect">

            <option value="">Select Visit Type</option>

            <option value="Client Visit">
                Client Visit
            </option>

            <option value="Cold Call">
                Cold Call
            </option>

            <option value="Meeting">
                Meeting
            </option>

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

        </select>

    </div>

</div>

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

    <label class="mb-1 block text-sm font-medium text-slate-700">
        Outcome
    </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-checkbox-circle-line"></i>

        </div>

        <select id="outcomeSelect">

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

            <option value="Interested">
                Interested
            </option>

            <option value="Pending">
                Pending
            </option>

            <option value="Not Interested">
                Not Interested
            </option>

            <option value="Converted">
                Converted
            </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="Active">
                        Active
                    </option>
        
                    <option value="Expiring">
                        Expiring
                    </option>
        
                    <option value="Expired">
                        Expired
                    </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
     ============================================================ -->

<!-- Overlay -->
<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-building-line mr-1"></i>
                    <span id="modal-lead-name">—</span>
                    &mdash;
                    <span id="modal-person-name">—</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">

            <!-- Row 1: Status + Remark + Date fields all in one row -->
            <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-search"
                            onchange="handleFollowupStatus(this.value)"
                            class="">
                            <option value="">Select status</option>
                            <option value="interested">Interested</option>
                            <option value="meeting">Meeting</option>
                            <option value="followup">Followup</option>
                            <option value="notinterested">Not Interested</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>

                <!-- Next Meeting Date — shown only for "Meeting" -->
                <div id="field-meeting-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>
                        Next Meeting 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-meeting-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 only 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 Button aligned with inputs -->
                <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 inside Modal -->
        <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">4</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">Follow-up Date</th>
                            <th class="px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Meeting 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">12 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-green-100 text-green-700">Interested</span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">Demo went well, client asked for pricing sheet</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">
                                <div class="flex items-center gap-2">
                                    <img src="https://i.pravatar.cc/28?img=1" class="w-6 h-6 rounded-full object-cover">
                                    <span class="text-sm text-gray-700">Rahul Sharma</span>
                                </div>
                            </td>
                        </tr>

                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">16 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">Sent pricing sheet, awaiting response</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-400">—</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <img src="https://i.pravatar.cc/28?img=1" class="w-6 h-6 rounded-full object-cover">
                                    <span class="text-sm text-gray-700">Rahul Sharma</span>
                                </div>
                            </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-blue-100 text-blue-700">Meeting</span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">Client agreed to schedule an in-person meeting</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">25 May 2025</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <img src="https://i.pravatar.cc/28?img=2" class="w-6 h-6 rounded-full object-cover">
                                    <span class="text-sm text-gray-700">Amit Mehta</span>
                                </div>
                            </td>
                        </tr>

                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">25 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-red-100 text-red-700">Not Interested</span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">Budget constraints, will revisit in Q3</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">
                                <div class="flex items-center gap-2">
                                    <img src="https://i.pravatar.cc/28?img=2" class="w-6 h-6 rounded-full object-cover">
                                    <span class="text-sm text-gray-700">Amit Mehta</span>
                                </div>
                            </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>

/* Visit Type */
const visitTypeSelect = new TomSelect("#visitTypeSelect", {

    create: false,
    maxOptions: 10,
    placeholder: "Search Visit Type...",

    openOnFocus: false,
    dropdownParent: "body",

    closeAfterSelect:true,

    onType: function(str) {

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

            this.open();

        } else {

            this.close();

        }

    }

});

visitTypeSelect.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"
);

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

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


/* Outcome */
const outcomeSelect = new TomSelect("#outcomeSelect", {

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

    openOnFocus: false,
    dropdownParent: "body",

    closeAfterSelect:true,

    onType: function(str) {

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

            this.open();

        } else {

            this.close();

        }

    }

});

outcomeSelect.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"
);

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

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

</script>

<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) + "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>

<!-- TomSelect — Company Name -->
<script>
    const companyName = new TomSelect("#companyName", {
        create: false,
        maxOptions: 10,
        placeholder: "Search Company Name...",
        openOnFocus: false,
        dropdownParent: "body",
        onType: function(str) {
            str.length > 0 ? this.open() : this.close();
        }
    });

    companyName.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");
    companyName.dropdown.classList.add("z-[99999]", "overflow-hidden", "rounded-xl", "border", "border-gray-200", "bg-white", "shadow-xl");
    companyName.control_input.classList.add("w-full", "bg-transparent", "text-sm", "text-gray-700", "placeholder:text-gray-400", "focus:outline-none", "ml-2");
</script>

<!-- Delete Row -->
<script>
    function deleteRow(button) {
        Swal.fire({
            title: "Delete Record?",
            text: "This row 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>
    /* ---- Open ---- */
    function openFollowupModal(btn) {
        document.getElementById('modal-lead-name').textContent = btn.getAttribute('data-lead') || '—';
        document.getElementById('modal-person-name').textContent = btn.getAttribute('data-person') || '—';
        const ov = document.getElementById('followupOverlay');
        ov.classList.remove('hidden');
        ov.classList.add('flex');
    }

    /* ---- Close ---- */
    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.getElementById('followup-status').value = '';
        document.getElementById('followup-remark').value = '';
        document.getElementById('followup-meeting-date').value = '';
        document.getElementById('followup-followup-date').value = '';
        document.body.style.overflow = '';
        handleFollowupStatus('');
    }

    /* ---- Show / hide conditional fields ---- */
    function handleFollowupStatus(val) {
        document.getElementById('field-meeting-date').classList.add('hidden');
        document.getElementById('field-followup-date').classList.add('hidden');
        if (val === 'meeting') document.getElementById('field-meeting-date').classList.remove('hidden');
        if (val === 'followup') document.getElementById('field-followup-date').classList.remove('hidden');
    }

    /* ---- Badge HTML ---- */
    function getStatusBadge(val) {
        const map = {
            interested: {
                cls: 'bg-green-100 text-green-700',
                label: 'Interested'
            },
            meeting: {
                cls: 'bg-blue-100 text-blue-700',
                label: 'Meeting'
            },
            followup: {
                cls: 'bg-yellow-100 text-yellow-700',
                label: 'Followup'
            },
            notinterested: {
                cls: 'bg-red-100 text-red-700',
                label: 'Not Interested'
            }
        };
        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>`;
    }

    /* ---- Format date string yyyy-mm-dd → "12 May 2025" ---- */
    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}`;
    }

    /* ---- Submit ---- */
    function submitFollowup() {
        const status = document.getElementById('followup-status').value;
        const remark = document.getElementById('followup-remark').value.trim();
        const meetingDate = document.getElementById('followup-meeting-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 tr = document.createElement('tr');
        tr.className = 'hover:bg-gray-50 transition';
        tr.innerHTML = `
            <td class="px-5 py-3.5 text-sm text-gray-600 whitespace-nowrap">${today}</td>
            <td class="px-5 py-3.5">${getStatusBadge(status)}</td>
            <td class="px-5 py-3.5 text-sm text-gray-600">${remark}</td>
            <td class="px-5 py-3.5 text-sm ${status === 'followup' && followupDate ? 'text-gray-600 whitespace-nowrap' : 'text-gray-400'}">
                ${status === 'followup' ? formatDate(followupDate) : '—'}
            </td>
            <td class="px-5 py-3.5 text-sm ${status === 'meeting' && meetingDate ? 'text-gray-600 whitespace-nowrap' : 'text-gray-400'}">
                ${status === 'meeting' ? formatDate(meetingDate) : '—'}
            </td>
            <td class="px-5 py-3.5">
                <div class="flex items-center gap-2">
                    <img src="https://i.pravatar.cc/28?img=1" class="w-6 h-6 rounded-full object-cover">
                    <span class="text-sm text-gray-700">Rahul Sharma</span>
                </div>
            </td>`;

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

        /* Close + reset */
        const ov = document.getElementById('followupOverlay');
        ov.classList.add('hidden');
        ov.classList.remove('flex');
        document.getElementById('followup-status').value = '';
        document.getElementById('followup-remark').value = '';
        document.getElementById('followup-meeting-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>

<!-- ============================================================
     CONVERT TO LEAD MODAL
     ============================================================ -->
<div id="convertLeadOverlay"
    class="fixed inset-0 bg-black/40 z-[999] hidden items-center justify-center p-4"
    onclick="closeConvertLeadModal(event)">

    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm border border-gray-100"
        onclick="event.stopPropagation()">

        <!-- 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">Convert to Lead</h3>
                <p class="text-xs text-gray-400 mt-0.5">
                    <i class="ri-building-line mr-1"></i>
                    <span id="convert-lead-name">—</span>
                    &mdash;
                    <span id="convert-person-name">—</span>
                </p>
            </div>
            <button onclick="closeConvertLeadModal()"
                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>

        <!-- Body -->
        <div class="px-6 py-5">
            <label class="block text-xs font-medium text-gray-500 mb-1.5">Assign To User</label>
            <div class="modal-ts-wrapper">
                <select id="convert-lead-user"
                    class="">
                    <option value="">— Select User —</option>
                    <option value="1">Rahul Sharma</option>
                    <option value="2">Amit Mehta</option>
                    <option value="3">Priya Patel</option>
                    <option value="4">Neha Singh</option>
                    <option value="5">Karan Desai</option>
                </select>
            </div>
        </div>

        <!-- Footer -->
        <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
            <button onclick="closeConvertLeadModal()"
                class="px-5 py-2 rounded-xl border border-gray-200 bg-white text-gray-600 text-sm hover:bg-gray-50 transition">
                Cancel
            </button>
            <button onclick="submitConvertLead()"
                class="px-5 py-2 rounded-xl bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-white text-sm font-medium shadow-md transition-all duration-300 flex items-center gap-2">
                <i class="ri-user-add-line"></i>
                Convert
            </button>
        </div>

    </div>
</div>


<!-- ============================================================
     TRANSFER DCR MODAL
     ============================================================ -->
<div id="transferDcrOverlay"
    class="fixed inset-0 bg-black/40 z-[999] hidden items-center justify-center p-4"
    onclick="closeTransferDcrModal(event)">

    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm border border-gray-100"
        onclick="event.stopPropagation()">

        <!-- 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">Transfer DCR</h3>
                <p class="text-xs text-gray-400 mt-0.5">
                    <i class="ri-building-line mr-1"></i>
                    <span id="transfer-lead-name">—</span>
                    &mdash;
                    <span id="transfer-person-name">—</span>
                </p>
            </div>
            <button onclick="closeTransferDcrModal()"
                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>

        <!-- Body -->
        <div class="px-6 py-5">
            <label class="block text-xs font-medium text-gray-500 mb-1.5">Transfer To User</label>
            <div class="modal-ts-wrapper">
                <select id="transfer-dcr-user"
                    class="">
                    <option value="">— Select User —</option>
                    <option value="1">Rahul Sharma</option>
                    <option value="2">Amit Mehta</option>
                    <option value="3">Priya Patel</option>
                    <option value="4">Neha Singh</option>
                    <option value="5">Karan Desai</option>
                </select>
            </div>

        </div>

        <!-- Footer -->
        <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
            <button onclick="closeTransferDcrModal()"
                class="px-5 py-2 rounded-xl border border-gray-200 bg-white text-gray-600 text-sm hover:bg-gray-50 transition">
                Cancel
            </button>
            <button onclick="submitTransferDcr()"
                class="px-5 py-2 rounded-xl bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 text-white text-sm font-medium shadow-md transition-all duration-300 flex items-center gap-2">
                <i class="ri-share-forward-line"></i>
                Transfer
            </button>
        </div>

    </div>
</div>


<!-- Convert to Lead Script -->
<script>
    function openConvertLeadModal(btn) {
        document.getElementById('convert-lead-name').textContent = btn.getAttribute('data-lead') || '—';
        document.getElementById('convert-person-name').textContent = btn.getAttribute('data-person') || '—';
        document.getElementById('convert-lead-user').value = '';
        const ov = document.getElementById('convertLeadOverlay');
        document.body.style.overflow = 'hidden';
        ov.classList.remove('hidden');
        ov.classList.add('flex');
    }

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

    function submitConvertLead() {
        const user = document.getElementById('convert-lead-user').value;
        if (!user) {
            Swal.fire({
                icon: 'warning',
                title: 'Required',
                text: 'Please select a user.',
                width: '300px',
                confirmButtonColor: '#2563eb'
            });
            return;
        }
        const ov = document.getElementById('convertLeadOverlay');
        ov.classList.add('hidden');
        ov.classList.remove('flex');
        Swal.fire({
            icon: 'success',
            title: 'Converted!',
            text: 'Record has been converted to a lead.',
            width: '300px',
            showConfirmButton: false,
            timer: 1500
        });
    }
</script>

<!-- Transfer DCR Script -->
<script>
    function openTransferDcrModal(btn) {
        document.getElementById('transfer-lead-name').textContent = btn.getAttribute('data-lead') || '—';
        document.getElementById('transfer-person-name').textContent = btn.getAttribute('data-person') || '—';
        document.getElementById('transfer-dcr-user').value = '';
        const ov = document.getElementById('transferDcrOverlay');
        document.body.style.overflow = 'hidden';
        ov.classList.remove('hidden');
        ov.classList.add('flex');
    }

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

    function submitTransferDcr() {
        const user = document.getElementById('transfer-dcr-user').value;
        if (!user) {
            Swal.fire({
                icon: 'warning',
                title: 'Required',
                text: 'Please select a user.',
                width: '300px',
                confirmButtonColor: '#2563eb'
            });
            return;
        }
        const ov = document.getElementById('transferDcrOverlay');
        ov.classList.add('hidden');
        ov.classList.remove('flex');
        Swal.fire({
            icon: 'success',
            title: 'Transferred!',
            text: 'DCR has been transferred successfully.',
            width: '300px',
            showConfirmButton: false,
            timer: 1500
        });
    }
</script>
<script>
    function reopenRecord(button) {

        Swal.fire({
            icon: "question",
            title: "Reopen Record?",
            text: "Are you sure you want to reopen this record?",
            showCancelButton: true,
            confirmButtonText: "Yes",
            cancelButtonText: "No",
            reverseButtons: true
        }).then((result) => {

            if (result.isConfirmed) {

                Swal.fire({
                    icon: "success",
                    title: "Reopened!",
                    text: "Record reopened successfully.",
                    showConfirmButton: false,
                    timer: 1600,
                    timerProgressBar: true
                });

            }

        });

    }
</script>
<!-- Tom Select JS -->
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

<!-- Tom Select JS -->
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

<script>
    // ==================== CLEANED & FIXED TOMSELECT SETUP ====================

    // 1. Followup Status Select (Inside Modal)
    let followupStatusSelect;

    function initFollowupStatusSelect() {
        if (followupStatusSelect) followupStatusSelect.destroy();

        followupStatusSelect = new TomSelect("#followup-status-search", {
            create: false,
            sortField: {
                field: "text",
                direction: "asc"
            },
            placeholder: "Select status",
            dropdownParent: null,
            openOnFocus: true,
            maxOptions: 20,
        });

        // Critical fix for modal dropdowns
        followupStatusSelect.control.addEventListener('click', function(e) {
            e.stopImmediatePropagation();
            if (followupStatusSelect.isOpen) {
                followupStatusSelect.close();
            } else {
                followupStatusSelect.open();
            }
        });
    }

    // 2. Convert to Lead Select
    let convertLeadSelect;

    function initConvertLeadSelect() {
        if (convertLeadSelect) convertLeadSelect.destroy();

        convertLeadSelect = new TomSelect("#convert-lead-user", {
            create: false,
            placeholder: "Search user...",
            dropdownParent: null,
            openOnFocus: true,
            maxOptions: 100,
        });

        convertLeadSelect.control.addEventListener('click', function(e) {
            e.stopImmediatePropagation();
            if (convertLeadSelect.isOpen) convertLeadSelect.close();
            else convertLeadSelect.open();
        });
    }

    // 3. Transfer DCR Select
    let transferDcrSelect;

    function initTransferDcrSelect() {
        if (transferDcrSelect) transferDcrSelect.destroy();

        transferDcrSelect = new TomSelect("#transfer-dcr-user", {
            create: false,
            placeholder: "Search user...",
            dropdownParent: null,
            openOnFocus: true,
            maxOptions: 100,
        });

        transferDcrSelect.control.addEventListener('click', function(e) {
            e.stopImmediatePropagation();
            if (transferDcrSelect.isOpen) transferDcrSelect.close();
            else transferDcrSelect.open();
        });
    }

    // 4. Company Name Select (Main Page)
    let companyNameSelect;

    function initCompanyNameSelect() {
        if (companyNameSelect) companyNameSelect.destroy();

        companyNameSelect = new TomSelect("#companyName", {
            create: false,
            maxOptions: 10,
            placeholder: "Search Company Name...",
            dropdownParent: "body",
            openOnFocus: true,
        });

        companyNameSelect.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");
        companyNameSelect.dropdown.classList.add("z-[99999]", "overflow-hidden", "rounded-xl", "border", "border-gray-200", "bg-white", "shadow-xl");
    }

    // Initialize all selects
    function initAllTomSelects() {
        initCompanyNameSelect();
        initFollowupStatusSelect();
        initConvertLeadSelect();
        initTransferDcrSelect();
    }

    // Call initialization when page loads
    document.addEventListener('DOMContentLoaded', function() {
        initAllTomSelects();
    });

    // Re-initialize when modals open (important fix)
    function openFollowupModal(btn) {
        document.getElementById('modal-lead-name').textContent = btn.getAttribute('data-lead') || '—';
        document.getElementById('modal-person-name').textContent = btn.getAttribute('data-person') || '—';

        const ov = document.getElementById('followupOverlay');
        ov.classList.remove('hidden');
        ov.classList.add('flex');

        // Re-init select after modal opens
        setTimeout(() => {
            initFollowupStatusSelect();
        }, 200);
    }

    function openConvertLeadModal(btn) {
        document.getElementById('convert-lead-name').textContent = btn.getAttribute('data-lead') || '—';
        document.getElementById('convert-person-name').textContent = btn.getAttribute('data-person') || '—';
        document.getElementById('convert-lead-user').value = '';

        const ov = document.getElementById('convertLeadOverlay');
        ov.classList.remove('hidden');
        ov.classList.add('flex');

        setTimeout(() => {
            initConvertLeadSelect();
        }, 200);
    }

    function openTransferDcrModal(btn) {
        document.getElementById('transfer-lead-name').textContent = btn.getAttribute('data-lead') || '—';
        document.getElementById('transfer-person-name').textContent = btn.getAttribute('data-person') || '—';
        document.getElementById('transfer-dcr-user').value = '';

        const ov = document.getElementById('transferDcrOverlay');
        ov.classList.remove('hidden');
        ov.classList.add('flex');

        setTimeout(() => {
            initTransferDcrSelect();
        }, 200);
    }

    // Add CSS fixes
    const style = document.createElement('style');
    style.innerHTML = `
    .ts-dropdown {
        z-index: 999999 !important;
        position: fixed !important;
    }
    .modal-ts-wrapper .ts-control {
        cursor: pointer !important;
    }
    #followupOverlay, #convertLeadOverlay, #transferDcrOverlay {
        z-index: 99999 !important;
    }
    .ts-control {
        min-height: 40px !important;
    }
`;
    document.head.appendChild(style);
</script>
<script>
function reopenRecord(button) {

    Swal.fire({
        title: "Are you sure?",
        text: "Do you want to reopen this record?",
        icon: "question",
        showCancelButton: true,
        confirmButtonText: "Yes",
        cancelButtonText: "No",
        confirmButtonColor: "#f97316",
        cancelButtonColor: "#6b7280",
        width: "320px",
        padding: "1rem",
        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) {

            Swal.fire({
                icon: "success",
                title: "Reopened!",
                text: "Record reopened successfully.",
                width: "300px",
                padding: "1rem",
                showConfirmButton: false,
                timer: 1500
            });

        }

    });

}
</script>
<?php include 'footer.php'; ?>