    <?php include 'header.php'; ?>
    
    <div class="px-0 py-3 md:p-2 lg:p-6">
    
         <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-3 mb-5">
        
            <!-- Total -->
            <div class="bg-white rounded-xl border border-gray-200 p-3 flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-indigo-100 flex items-center justify-center flex-shrink-0">
                    <i class="ri-chat-3-line text-xl text-indigo-600"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Total</p>
                    <h3 class="text-2xl font-bold text-indigo-900 leading-none">6</h3>
                </div>
            </div>
        
            <!-- Open -->
            <div class="bg-white rounded-xl border border-gray-200 p-3 flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center flex-shrink-0">
                    <i class="ri-error-warning-line text-xl text-red-500"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Open</p>
                    <h3 class="text-2xl font-bold text-red-600 leading-none">2</h3>
                </div>
            </div>
        
            <!-- In Progress -->
            <div class="bg-white rounded-xl border border-gray-200 p-3 flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0">
                    <i class="ri-time-line text-xl text-amber-500"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">In Progress</p>
                    <h3 class="text-2xl font-bold text-amber-600 leading-none">1</h3>
                </div>
            </div>
        
            <!-- Resolved -->
            <div class="bg-white rounded-xl border border-gray-200 p-3 flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center flex-shrink-0">
                    <i class="ri-checkbox-circle-line text-xl text-green-500"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Resolved</p>
                    <h3 class="text-2xl font-bold text-green-600 leading-none">1</h3>
                </div>
            </div>
        
            <!-- Closed -->
            <div class="bg-white rounded-xl border border-gray-200 p-3 flex items-center gap-3">
                <div class="w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center flex-shrink-0">
                    <i class="ri-lock-line text-xl text-gray-600"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Closed</p>
                    <h3 class="text-2xl font-bold text-gray-700 leading-none">1</h3>
                </div>
            </div>
        
        </div>
    
        <!-- Header -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5 bg-white p-4 rounded-xl border border-gray-200">
    
            <div>
                <h1 class="text-2xl font-bold text-gray-800">Complaint Management</h1>
                <p class="text-sm text-gray-500">Track and resolve all client complaints</p>
            </div>
    
            <div class="flex flex-col sm:flex-row gap-3 flex-wrap">
                
        <!-- Show Entries -->
        <div class="flex items-center gap-2">
    
            <span class="text-sm text-gray-500">Show</span>
    
            <select id="pageSize"
                class="border border-gray-200 rounded-lg px-3 py-2 text-sm">
                <option value="5">5</option>
                <option value="10" selected>10</option>
                <option value="25">25</option>
                <option value="50">50</option>
            </select>
    
        </div>
    
    <div class="relative">
        <input type="text"
            id="searchInput"
            placeholder="Search complaint, client..."
            class="w-full sm:w-[220px] h-11 pl-10 pr-4 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none text-sm"
            oninput="applyFilters()">
    
        <i class="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-base"></i>
    </div>
    
            <!-- Filter -->
            <button id="openFilter"
                class="px-4 py-2.5 rounded-xl 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 Complaint Button -->
                <a href="add_puresaas_complaint.php"
                    class="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition-all duration-200 text-sm font-medium whitespace-nowrap">
                    <i class="ri-add-line text-lg"></i>
                    Add Complaint
                </a>
    
            </div>
    
        </div>
        
    <!-- Product Chips -->
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-x-auto overflow-y-hidden mb-5">
        <div class="p-4 border-b border-gray-200">
    
            <div class="flex flex-wrap gap-2">
    
                <button onclick="filterProduct('PureEstate')"
                    class="product-chip px-4 py-2 rounded-xl border border-blue-500 bg-white text-blue-700 text-sm font-medium">
                    PureEstate <span id="pureestateCount" class="text-blue-700">(1)</span>
                </button>
    
                <button onclick="filterProduct('BuilderPro')"
                    class="product-chip px-4 py-2 rounded-xl border border-orange-200 bg-white text-orange-500 text-sm font-medium">
                    BuilderPro <span id="builderproCount" class="text-orange-500">(1)</span>
                </button>
    
                <button onclick="filterProduct('SocietyPro')"
                    class="product-chip px-4 py-2 rounded-xl border border-green-200 bg-white text-green-700 text-sm font-medium">
                    SocietyPro <span id="societyproCount" class="text-green-700">(1)</span>
                </button>
    
                <button onclick="filterProduct('all')"
                    class="product-chip px-4 py-2 rounded-xl border border-indigo-500 bg-indigo-50 text-indigo-700 text-sm font-medium">
                    All <span id="allCount" class="text-indigo-700">(3)</span>
                </button>
    
            </div>
    
        </div>
    </div>
    
    <!-- Status Chips -->
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-x-auto overflow-y-hidden mb-5">
        <div class="p-4 border-b border-gray-200">
    
            <div class="flex flex-wrap gap-2">
    
                <button onclick="filterStatus('Open')"
                    class="status-chip px-4 py-2 rounded-xl border border-red-200 bg-white text-red-600 text-sm font-medium">
                    Open <span class="text-red-600" id="openCount">(2)</span>
                </button>
    
                <button onclick="filterStatus('In Progress')"
                    class="status-chip px-4 py-2 rounded-xl border border-amber-200 bg-white text-amber-600 text-sm font-medium">
                    In Progress <span class="text-amber-600" id="progressCount">(1)</span>
                </button>
    
                <button onclick="filterStatus('Resolved')"
                    class="status-chip px-4 py-2 rounded-xl border border-green-200 bg-white text-green-600 text-sm font-medium">
                    Resolved <span class="text-green-600" id="resolvedCount">(1)</span>
                </button>
    
                <button onclick="filterStatus('Closed')"
                    class="status-chip px-4 py-2 rounded-xl border border-gray-300 bg-white text-gray-600 text-sm font-medium">
                    Closed <span class="text-gray-600" id="closedCount">(1)</span>
                </button>
    
                <button onclick="filterStatus('all')"
                    class="status-chip px-4 py-2 rounded-xl border border-indigo-500 bg-indigo-50 text-indigo-700 text-sm font-medium">
                    All <span class="text-indigo-700" id="statusAllCount">(6)</span>
                </button>
    
            </div>
    
        </div>
    </div>
    
        <!-- Table -->
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full min-w-[1200px] whitespace-nowrap" id="complaintTable">
    
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr class="text-left">
                            <th class="px-5 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Sr.</th>
                            <th class="px-5 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Ticket ID</th>
                            <th class="px-5 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Client / Company</th>
                            <th class="px-5 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Product</th>
                            <th class="px-5 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Category</th>
                            <th class="px-5 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Raised By</th>
                            <th class="px-5 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Assigned To</th>
                            <th class="px-5 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Priority</th>
                            <th class="px-5 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Status</th>
                            <th class="px-5 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Created</th>
                            <th class="px-5 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider text-center whitespace-nowrap">Action</th>
                        </tr>
                    </thead>
    
                    <tbody class="divide-y divide-gray-100" id="complaintBody">
    
                        <!-- Row 1 -->
                        <tr class="hover:bg-gray-50 transition" data-product="PureEstate" data-status="Open" data-priority="Critical">
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">1</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="text-sm font-bold text-indigo-600">#TKT-1041</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center gap-2">
                                    <div>
                                        <p class="text-sm font-semibold text-gray-800">Mehta Properties</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-indigo-100 text-indigo-700 rounded-full">PureEstate</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Lead Not Syncing</td>
    
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Rahul Mehta</td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Amit Shah</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-bold bg-red-100 text-red-600 rounded-full">Critical</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-red-50 text-red-600 rounded-full border border-red-200">Open</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">14 Jun 2025</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=1" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center" title="View">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center" title="Mark Resolved">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center" title="Delete">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
    
                        <!-- Row 2 -->
                        <tr class="hover:bg-gray-50 transition" data-product="BuilderPro" data-status="In Progress" data-priority="High">
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">2</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="text-sm font-bold text-indigo-600">#TKT-1042</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center gap-2">
                                    <div>
                                        <p class="text-sm font-semibold text-gray-800">Kiran Constructions</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-cyan-100 text-cyan-700 rounded-full">BuildPro</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Project Milestone</td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Kiran Patel</td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Priya Nair</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-bold bg-orange-100 text-orange-600 rounded-full">High</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-amber-50 text-amber-600 rounded-full border border-amber-200">In Progress</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">13 Jun 2025</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=2" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center" title="View">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center" title="Mark Resolved">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center" title="Delete">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
    
                        <!-- Row 3 -->
                        <tr class="hover:bg-gray-50 transition" data-product="SocietyPro" data-status="Open" data-priority="Critical">
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">3</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="text-sm font-bold text-indigo-600">#TKT-1043</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center gap-2">
                                    <div>
                                        <p class="text-sm font-semibold text-gray-800">Pearl Heights CHS</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-emerald-100 text-emerald-700 rounded-full">SocietyPro</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Maintenance Billing</td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Suresh Joshi</td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Ravi Kumar</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-bold bg-red-100 text-red-600 rounded-full">Critical</span>
                            </td>
                             <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-red-50 text-red-600 rounded-full border border-red-200">Open</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">12 Jun 2025</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=3" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center" title="View">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center" title="Mark Resolved">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center" title="Delete">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
    
                        <!-- Row 4 -->
                        <tr class="hover:bg-gray-50 transition" data-product="PureEstate" data-status="Resolved" data-priority="Medium">
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">4</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="text-sm font-bold text-indigo-600">#TKT-1044</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center gap-2">
                                    <div>
                                        <p class="text-sm font-semibold text-gray-800">Agarwal Realty</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-indigo-100 text-indigo-700 rounded-full">PureEstate</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Report Error</td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Deepak Agarwal</td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Amit Shah</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-bold bg-yellow-100 text-yellow-600 rounded-full">Medium</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-green-50 text-green-600 rounded-full border border-green-200">Resolved</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">10 Jun 2025</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=4" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center" title="View">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center" title="Mark Resolved">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center" title="Delete">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
    
                        <!-- Row 5 -->
                        <tr class="hover:bg-gray-50 transition" data-product="BuilderPro" data-status="Open" data-priority="High">
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">5</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="text-sm font-bold text-indigo-600">#TKT-1045</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center gap-2">
                                    <div>
                                        <p class="text-sm font-semibold text-gray-800">Horizon Developers</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-cyan-100 text-cyan-700 rounded-full">BuildPro</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Payment Collection</td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Manish Verma</td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Priya Nair</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-bold bg-orange-100 text-orange-600 rounded-full">High</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-red-50 text-red-600 rounded-full border border-red-200">Open</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">15 Jun 2025</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=5" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center" title="View">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center" title="Mark Resolved">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center" title="Delete">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
    
                        <!-- Row 6 -->
                        <tr class="hover:bg-gray-50 transition" data-product="SocietyPro" data-status="Closed" data-priority="Low">
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">6</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="text-sm font-bold text-indigo-600">#TKT-1046</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center gap-2">
                                    <div>
                                        <p class="text-sm font-semibold text-gray-800">Evergreen Society</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-emerald-100 text-emerald-700 rounded-full">SocietyPro</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Visitor Entry</td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Vijay Rao</td>
                            <td class="px-5 py-4 text-sm text-gray-600 whitespace-nowrap">Ravi Kumar</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-bold bg-gray-100 text-gray-500 rounded-full">Low</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <span class="px-2.5 py-1 text-xs font-semibold bg-gray-100 text-gray-500 rounded-full border border-gray-200">Closed</span>
                            </td>
                            <td class="px-5 py-4 text-sm text-gray-500 whitespace-nowrap">08 Jun 2025</td>
    
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=6" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center" title="View">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center" title="Mark Resolved">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center" title="Delete">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition" data-product="PureEstate" data-status="In Progress" data-priority="High">
                            <td class="px-5 py-4 text-sm text-gray-500">7</td>
                            <td class="px-5 py-4"><span class="text-sm font-bold text-indigo-600">#TKT-1047</span></td>
                            <td class="px-5 py-4"><p class="text-sm font-semibold text-gray-800">Skyline Realty</p></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-indigo-100 text-indigo-700 rounded-full">PureEstate</span></td>
                            <td class="px-5 py-4 text-sm text-gray-600">Lead Assignment Issue</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Rakesh Shah</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Amit Shah</td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-bold bg-orange-100 text-orange-600 rounded-full">High</span></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-amber-50 text-amber-600 rounded-full border border-amber-200">In Progress</span></td>
                            <td class="px-5 py-4 text-sm text-gray-500">18 Jun 2025</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=7" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition" data-product="PureEstate" data-status="Closed" data-priority="Low">
                            <td class="px-5 py-4 text-sm text-gray-500">8</td>
                            <td class="px-5 py-4"><span class="text-sm font-bold text-indigo-600">#TKT-1048</span></td>
                            <td class="px-5 py-4"><p class="text-sm font-semibold text-gray-800">Prime Estate</p></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-indigo-100 text-indigo-700 rounded-full">PureEstate</span></td>
                            <td class="px-5 py-4 text-sm text-gray-600">Export Report Error</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Nitin Patel</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Amit Shah</td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-bold bg-gray-100 text-gray-500 rounded-full">Low</span></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-gray-100 text-gray-500 rounded-full border border-gray-200">Closed</span></td>
                            <td class="px-5 py-4 text-sm text-gray-500">16 Jun 2025</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=8" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition" data-product="BuilderPro" data-status="Resolved" data-priority="Medium">
                            <td class="px-5 py-4 text-sm text-gray-500">9</td>
                            <td class="px-5 py-4"><span class="text-sm font-bold text-indigo-600">#TKT-1049</span></td>
                            <td class="px-5 py-4"><p class="text-sm font-semibold text-gray-800">Shree Developers</p></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-cyan-100 text-cyan-700 rounded-full">BuilderPro</span></td>
                            <td class="px-5 py-4 text-sm text-gray-600">BOQ Calculation Issue</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Karan Patel</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Priya Nair</td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-bold bg-yellow-100 text-yellow-600 rounded-full">Medium</span></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-green-50 text-green-600 rounded-full border border-green-200">Resolved</span></td>
                            <td class="px-5 py-4 text-sm text-gray-500">11 Jun 2025</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=9" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition" data-product="BuilderPro" data-status="Closed" data-priority="Low">
                            <td class="px-5 py-4 text-sm text-gray-500">10</td>
                            <td class="px-5 py-4"><span class="text-sm font-bold text-indigo-600">#TKT-1050</span></td>
                            <td class="px-5 py-4"><p class="text-sm font-semibold text-gray-800">Royal Infra</p></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-cyan-100 text-cyan-700 rounded-full">BuilderPro</span></td>
                            <td class="px-5 py-4 text-sm text-gray-600">Project Import Issue</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Rajesh Modi</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Priya Nair</td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-bold bg-gray-100 text-gray-500 rounded-full">Low</span></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-gray-100 text-gray-500 rounded-full border border-gray-200">Closed</span></td>
                            <td class="px-5 py-4 text-sm text-gray-500">09 Jun 2025</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=10" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition" data-product="SocietyPro" data-status="In Progress" data-priority="High">
                            <td class="px-5 py-4 text-sm text-gray-500">11</td>
                            <td class="px-5 py-4"><span class="text-sm font-bold text-indigo-600">#TKT-1051</span></td>
                            <td class="px-5 py-4"><p class="text-sm font-semibold text-gray-800">Green Residency</p></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-emerald-100 text-emerald-700 rounded-full">SocietyPro</span></td>
                            <td class="px-5 py-4 text-sm text-gray-600">Gate Pass Approval</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Sanjay Rao</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Ravi Kumar</td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-bold bg-orange-100 text-orange-600 rounded-full">High</span></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-amber-50 text-amber-600 rounded-full border border-amber-200">In Progress</span></td>
                            <td class="px-5 py-4 text-sm text-gray-500">17 Jun 2025</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=11" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition" data-product="SocietyPro" data-status="Resolved" data-priority="Medium">
                            <td class="px-5 py-4 text-sm text-gray-500">12</td>
                            <td class="px-5 py-4"><span class="text-sm font-bold text-indigo-600">#TKT-1052</span></td>
                            <td class="px-5 py-4"><p class="text-sm font-semibold text-gray-800">Lotus Residency</p></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-emerald-100 text-emerald-700 rounded-full">SocietyPro</span></td>
                            <td class="px-5 py-4 text-sm text-gray-600">Maintenance Receipt Error</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Mukesh Joshi</td>
                            <td class="px-5 py-4 text-sm text-gray-600">Ravi Kumar</td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-bold bg-yellow-100 text-yellow-600 rounded-full">Medium</span></td>
                            <td class="px-5 py-4"><span class="px-2.5 py-1 text-xs font-semibold bg-green-50 text-green-600 rounded-full border border-green-200">Resolved</span></td>
                            <td class="px-5 py-4 text-sm text-gray-500">07 Jun 2025</td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="flex items-center justify-center gap-1.5">
                                    <a href="puresaas_view_complaint.php?id=12" class="w-8 h-8 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line text-sm"></i>
                                    </a>
                                    <button onclick="resolveComplaint(this)" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition flex items-center justify-center">
                                        <i class="ri-checkbox-circle-line text-sm"></i>
                                    </button>
                                    <button onclick="deleteRow(this)" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition flex items-center justify-center">
                                        <i class="ri-delete-bin-line text-sm"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
    
                    </tbody>
                </table>
            </div>
    
            <!-- No Results Row -->
            <div id="noResults" class="hidden py-16 text-center">
                <i class="ri-file-search-line text-4xl text-gray-300"></i>
                <p class="text-gray-400 mt-2 text-sm">No complaints found matching your filters.</p>
            </div>
    
            <!-- Footer / Pagination -->
            <div class="bg-white px-5 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" id="showingText">Showing 1 to 6 of 128 complaints</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">
        <!-- Header -->
        <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>
        <!-- Body -->
        <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" id="fromDate"
                        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" id="toDate"
                        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>
    
    <!-- Status -->
    <div class="w-full">
        <label class="mb-1 block text-sm font-medium text-slate-700">
            Status
        </label>
    
        <div class="relative">
            <i class="ri-checkbox-circle-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10"></i>
    
            <select id="statusSelect">
                <option value="">Select Status</option>
                <option value="pending">Pending</option>
                <option value="complete">Completed</option>
            </select>
        </div>
    </div>
    
    <!-- Product Name -->
    <div class="w-full">
        <label class="mb-1 block text-sm font-medium text-slate-700">
            Product Name
        </label>
    
        <div class="relative">
            <i class="ri-apps-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10"></i>
    
            <select id="productSelect">
                <option value="">Select Product</option>
                <option value="PureEstate">PureEstate</option>
                <option value="BuilderPro">BuilderPro</option>
                <option value="SocietyPro">SocietyPro</option>
            </select>
        </div>
    </div>
    
    <!-- Priority -->
    <div class="w-full">
        <label class="mb-1 block text-sm font-medium text-slate-700">
            Priority
        </label>
    
        <div class="relative">
            <i class="ri-flag-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10"></i>
    
            <select id="prioritySelect"
                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">
                <option value="">Select Priority</option>
                <option value="low">Low</option>
                <option value="medium">Medium</option>
                <option value="high">High</option>
                <option value="urgent">Critical</option>
            </select>
        </div>
    </div>
    
    <!-- Full Name -->
    <div class="w-full">
        <label class="mb-1 block text-sm font-medium text-slate-700">
            Client / Company Name
        </label>
    
        <div class="relative">
            <i class="ri-user-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
    
            <input
                type="text"
                id="fullName"
                placeholder="Enter Full Name"
                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>
    
    
        </div>
        <!-- Bottom Fixed Buttons -->
        <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">
                <!-- Reset Button -->
                <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>
                <!-- Apply Filter 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>
    
    <script>
        document.addEventListener("DOMContentLoaded", function () {
    
        const statusSelect = new TomSelect("#statusSelect", {
            create: false,
            maxOptions: 10,
            placeholder: "Search Status...",
            openOnFocus: true,
    
            onType: function (str) {
                if (str.trim().length > 0) {
                    this.open();
                } else {
                    this.close();
                }
            }
        });
    
        statusSelect.control.addEventListener("click", function () {
            if (statusSelect.control_input.value.trim() === "") {
                statusSelect.close();
            }
        });
    
        // Control Style
        statusSelect.control.classList.add(
            "flex","items-center","h-11","w-full",
            "rounded-md","border","border-slate-200",
            "bg-slate-50","pl-10","pr-4",
            "text-sm","text-slate-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"
        );
    
    });
    
    const productSelect = new TomSelect("#productSelect", {
        create: false,
        maxOptions: 10,
        placeholder: "Search Product...",
        openOnFocus: true,
    
        onType: function (str) {
            if (str.trim().length > 0) {
                this.open();
            } else {
                this.close();
            }
        }
    });
    
    $('#prioritySelect').select2({
        placeholder: 'Select Priority',
        width: '100%'
    });
    </script>
    
    <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>
    
    <script>
    // ── Filter Logic
    function applyFilters() {
        const search   = document.getElementById('searchInput').value.toLowerCase();
        const product  = document.getElementById('productFilter').value;
        const status   = document.getElementById('statusFilter').value;
        const priority = document.getElementById('priorityFilter').value;
    
        const rows = document.querySelectorAll('#complaintBody tr');
        let visible = 0;
    
        rows.forEach(row => {
            const text     = row.innerText.toLowerCase();
            const rProduct  = row.dataset.product  || '';
            const rStatus   = row.dataset.status   || '';
            const rPriority = row.dataset.priority || '';
    
            const matchSearch   = !search   || text.includes(search);
            const matchProduct  = !product  || rProduct  === product;
            const matchStatus   = !status   || rStatus   === status;
            const matchPriority = !priority || rPriority === priority;
    
            if (matchSearch && matchProduct && matchStatus && matchPriority) {
                row.style.display = '';
                visible++;
            } else {
                row.style.display = 'none';
            }
        });
    
        document.getElementById('noResults').classList.toggle('hidden', visible > 0);
        document.getElementById('showingText').textContent =
            visible > 0 ? `Showing ${visible} complaint${visible > 1 ? 's' : ''}` : 'No results';
    }
    
    // ── Delete Row
    function deleteRow(button) {
        Swal.fire({
            title: "Delete Complaint?",
            text: "This complaint record will be permanently deleted.",
            icon: "warning",
            width: "350px",
            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: "Complaint removed successfully.",
                    width: "350px",
                    padding: "1rem",
                    showConfirmButton: false,
                    timer: 1400
                });
            }
        });
    }
    
    // ── Mark Resolved
    function resolveComplaint(button) {
        Swal.fire({
            title: "Mark as Resolved?",
            text: "This complaint will be marked as resolved.",
            icon: "question",
            width: "350px",
            padding: "1rem",
            showCancelButton: true,
            confirmButtonText: "Yes, Resolve",
            cancelButtonText: "Cancel",
            confirmButtonColor: "#10b981",
            cancelButtonColor: "#6b7280",
            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) {
                const row = button.closest("tr");
                const statusCell = row.querySelector('td:nth-child(10) span');
                if (statusCell) {
                    statusCell.className = 'px-2.5 py-1 text-xs font-semibold bg-green-50 text-green-600 rounded-full border border-green-200';
                    statusCell.textContent = 'Resolved';
                    row.dataset.status = 'Resolved';
                }
                Swal.fire({
                    icon: "success",
                    title: "Resolved!",
                    text: "Complaint marked as resolved.",
                    width: "350px",
                    padding: "1rem",
                    showConfirmButton: false,
                    timer: 1400
                });
            }
        });
    }
    </script>
    
    
    
    <script>
    function updateProductCounts() {
    
        const rows = document.querySelectorAll('#complaintBody tr');
    
        let pureestate = 0;
        let builderpro = 0;
        let societypro = 0;
    
        rows.forEach(row => {
    
            const product = row.dataset.product;
    
            if (product === 'PureEstate') pureestate++;
            if (product === 'BuilderPro') builderpro++;
            if (product === 'SocietyPro') societypro++;
    
        });
    
        document.getElementById('pureestateCount').textContent = `(${pureestate})`;
        document.getElementById('builderproCount').textContent = `(${builderpro})`;
        document.getElementById('societyproCount').textContent = `(${societypro})`;
        document.getElementById('allCount').textContent = `(${rows.length})`;
    }
    
    </script>
    
    <script>
    
    function updateStatusCounts() {
    
        const rows = document.querySelectorAll('#complaintBody tr');
    
        let open = 0;
        let progress = 0;
        let resolved = 0;
        let closed = 0;
    
        rows.forEach(row => {
    
            const status = row.dataset.status;
    
            if (status === 'Open') open++;
            if (status === 'In Progress') progress++;
            if (status === 'Resolved') resolved++;
            if (status === 'Closed') closed++;
    
        });
    
        document.getElementById('openCount').textContent = `(${open})`;
        document.getElementById('progressCount').textContent = `(${progress})`;
        document.getElementById('resolvedCount').textContent = `(${resolved})`;
        document.getElementById('closedCount').textContent = `(${closed})`;
        document.getElementById('statusAllCount').textContent = `(${rows.length})`;
    }
    
    document.addEventListener('DOMContentLoaded', function () {
        updateStatusCounts();
    });
    </script>
    
    <script>
    
    let selectedProduct = 'PureEstate';
    let selectedStatus = 'Open';
    
    function updateProductCounts() {
    
        const rows = document.querySelectorAll('#complaintBody tr');
    
        let pureestate = 0;
        let builderpro = 0;
        let societypro = 0;
    
        rows.forEach(row => {
    
            const product = row.dataset.product;
    
            if (product === 'PureEstate') pureestate++;
            if (product === 'BuilderPro') builderpro++;
            if (product === 'SocietyPro') societypro++;
    
        });
    
        document.getElementById('pureestateCount').textContent = `(${pureestate})`;
        document.getElementById('builderproCount').textContent = `(${builderpro})`;
        document.getElementById('societyproCount').textContent = `(${societypro})`;
        document.getElementById('allCount').textContent = `(${rows.length})`;
    }
    
    function updateStatusCounts() {
    
        const rows = document.querySelectorAll('#complaintBody tr');
    
        let open = 0;
        let progress = 0;
        let resolved = 0;
        let closed = 0;
    
        rows.forEach(row => {
    
            const product = row.dataset.product;
            const status = row.dataset.status;
    
            if (selectedProduct !== 'all' && product !== selectedProduct) return;
    
            if (status === 'Open') open++;
            if (status === 'In Progress') progress++;
            if (status === 'Resolved') resolved++;
            if (status === 'Closed') closed++;
    
        });
    
        document.getElementById('openCount').textContent = `(${open})`;
        document.getElementById('progressCount').textContent = `(${progress})`;
        document.getElementById('resolvedCount').textContent = `(${resolved})`;
        document.getElementById('closedCount').textContent = `(${closed})`;
        document.getElementById('statusAllCount').textContent =
            `(${open + progress + resolved + closed})`;
    }
    
    function applyChipFilters() {
    
        const rows = document.querySelectorAll('#complaintBody tr');
        let visible = 0;
    
        rows.forEach(row => {
    
            const product = row.dataset.product;
            const status = row.dataset.status;
    
            const productMatch =
                selectedProduct === 'all' ||
                product === selectedProduct;
    
            const statusMatch =
                selectedStatus === 'all' ||
                status === selectedStatus;
    
            if (productMatch && statusMatch) {
                row.style.display = '';
                visible++;
            } else {
                row.style.display = 'none';
            }
    
        });
    
        document.getElementById('noResults')
            .classList.toggle('hidden', visible > 0);
    
        document.getElementById('showingText').textContent =
            visible > 0
                ? `Showing ${visible} complaint${visible > 1 ? 's' : ''}`
                : 'No results';
    }
    
    function filterProduct(product) {
    
        selectedProduct = product;
        selectedStatus = 'Open';
    
        updateStatusCounts();
        applyChipFilters();
    }
    
    function filterStatus(status) {
    
        selectedStatus = status;
        applyChipFilters();
    }
    
    document.addEventListener('DOMContentLoaded', function () {
    
        updateProductCounts();
        updateStatusCounts();
        applyChipFilters();
    
    });
    
    </script>
    
    <?php include 'footer.php'; ?>