    <?php include 'header.php'; ?>
    
    <!-- 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">
            Register User
        </h1>
        <p class="text-sm text-gray-500">
            Manage all website registration requests from here
        </p>
    </div>
    
        <!-- Actions -->
        <div class="flex flex-col sm:flex-row gap-3">
            
                <!-- 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>
    
            <!-- Search -->
            <div class="relative">
                <input type="text" placeholder="Search here..."
                    class="w-full sm:w-[220px] pl-10 pr-4 py-2.5 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none text-sm">
                <i class="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>
    
    
        </div>
    
    </div>
    
    <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 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 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 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 class="text-indigo-700">(3)</span>
                </button>
    
            </div>
    
        </div>
    </div>
    
    <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="mt-3 flex flex-wrap gap-2">
                
                <button onclick="filterStatus('active')"
                    class="px-4 py-2 rounded-xl bg-green-50 border border-green-200 text-green-700 text-sm font-medium">
                    <i class="ri-checkbox-circle-line mr-1"></i>
                    Active
                </button>
    
                <button onclick="filterStatus('expiring')"
                    class="px-4 py-2 rounded-xl bg-orange-50 border border-orange-200 text-orange-700 text-sm font-medium">
                    <i class="ri-error-warning-line mr-1"></i>
                    Expiring Soon
                </button>
                
                <button onclick="filterStatus('expired')"
                    class="px-4 py-2 rounded-xl bg-red-50 border border-red-200 text-red-700 text-sm font-medium">
                    <i class="ri-close-circle-line mr-1"></i>
                    Expired
                </button>

                <button onclick="filterStatus('all')"
                    class="px-4 py-2 rounded-xl bg-indigo-50 border border-indigo-200 text-indigo-700 text-sm font-medium">
                    <i class="ri-apps-line mr-1"></i>
                    All
                </button>
            
            </div>
        </div>
    </div>
    
    
    
    
            <!-- Table -->
            <div class="overflow-x-auto">
    
                <table class="w-full min-w-[1000px] whitespace-nowrap">
    
                    <!-- Table Head -->
                    <thead class="bg-white border-b border-gray-200">
    
                       <tr class="text-left">
    
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider ">
                                Sr.No
                            </th>
                            
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Product Name
                            </th>
                        
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Full Name
                            </th>
                        
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Mobile No
                            </th>
                        
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Company / Business / Scoicety Name
                            </th>
                            
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Plan Name
                            </th>
                            
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Price
                            </th>
                            
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Duration
                            </th>
                            
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                City
                            </th>
                        
                            
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Plan Start Date
                            </th>
                            
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Plan Expiry Date
                            </th>
                            
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                             Plan Status
                            </th>
                        
                        
                            <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider text-center w-40 whitespace-nowrap">
                                Action
                            </th>
                        
                        </tr>
    
                    </thead>
                    
                    <tbody class="divide-y divide-gray-100 bg-white">
                    
                        <!-- BuilderPro -->
                        <tr class="hover:bg-gray-50 transition" data-product="BuilderPro" data-status="active">
                        
                            <td class="px-6 py-4 text-sm font-semibold text-indigo-600 whitespace-nowrap">
                                1
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                BuilderPro
                            </td>
                        
                            <td class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
                                Shubham Khan
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                9876543210
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                Skyline Builders Pvt. Ltd.
                            </td>
                        
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-gray-200 text-gray-600">
                                    Basic
                                </span>
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                ₹9999
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                1 Year
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                Surat
                            </td>
                            
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                01-07-2025
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                30-06-2026
                            </td>
                            
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                                    <i class="ri-checkbox-circle-line"></i>
                                    Active
                                </span>
                            </td>
                        
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                        
                                    <a href="puresaas_view_register_user.php"
                                        class="w-9 h-9 rounded-lg bg-blue-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line"></i>
                                    </a>
                        
                                    <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>
                            </td>
                        
                        </tr>
                        
                        <!-- SocietyPro -->
                        <tr class="hover:bg-gray-50 transition" data-product="SocietyPro" data-status="expired">
                        
                            <td class="px-6 py-4 text-sm font-semibold text-indigo-600 whitespace-nowrap">
                                2
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                SocietyPro
                            </td>
                        
                            <td class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
                                Dev Mistry
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                9876543210
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                Vimal Park
                            </td>
                        
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-600">
                                    Standard
                                </span>
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                ₹14,999
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                6 Months
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                Surat
                            </td>
                            
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                01-07-2025
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                30-06-2026
                            </td>
                            
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">
                                    <i class="ri-close-circle-line"></i>
                                    Expired
                                </span>
                            </td>
                        
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                        
                                    <a href="puresaas_view_register_user.php"
                                        class="w-9 h-9 rounded-lg bg-blue-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line"></i>
                                    </a>
                        
                                    <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>
                            </td>
                        
                        </tr>
                        
                        <!-- PureEstate -->
                        <tr class="hover:bg-gray-50 transition" data-product="PureEstate"  data-status="expiring">
                        
                            <td class="px-6 py-4 text-sm font-semibold text-indigo-600 whitespace-nowrap">
                                3
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                PureEstate
                            </td>
                        
                            <td class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap">
                                Ved Patel
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                9876543210
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                ABC Pvt. Ltd.
                            </td>
                        
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-600">
                                    Premium
                                </span>
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                ₹22,999
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                6 Months
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                Surat
                            </td>
                            
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                01-07-2025
                            </td>
                        
                            <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                                30-06-2026
                            </td>
                            
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-700">
                                    <i class="ri-error-warning-line"></i>
                                    Expiring Soon
                                </span>
                            </td>
                        
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                        
                                    <a href="puresaas_view_register_user.php"
                                        class="w-9 h-9 rounded-lg bg-blue-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                        <i class="ri-eye-line"></i>
                                    </a>
                        
                                    <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>
                            </td>
                        
                        </tr>

                        <!-- PureEstate Active -->
                        <tr class="hover:bg-gray-50 transition" data-product="PureEstate" data-status="active">
                            <td class="px-6 py-4 text-sm font-semibold text-indigo-600">4</td>
                            <td class="px-6 py-4">PureEstate</td>
                            <td class="px-6 py-4 font-medium">Karan Patel</td>
                            <td class="px-6 py-4">9876543215</td>
                            <td class="px-6 py-4">KP Realty</td>
                            <td class="px-6 py-4"><span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-600">Premium</span></td>
                            <td class="px-6 py-4">₹22,999</td>
                            <td class="px-6 py-4">1 Year</td>
                            <td class="px-6 py-4">Surat</td>
                            <td class="px-6 py-4">01-01-2025</td>
                            <td class="px-6 py-4">01-01-2026</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                                    <i class="ri-checkbox-circle-line"></i> Active
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="puresaas_view_register_user.php" class="w-9 h-9 rounded-lg bg-blue-50 text-green-600 hover:bg-green-100 flex items-center justify-center"><i class="ri-eye-line"></i></a>
                                    <button onclick="deleteRow(this)" class="w-9 h-9 rounded-lg bg-red-50 text-red-600 flex items-center justify-center"><i class="ri-delete-bin-line"></i></button>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- PureEstate Expired -->
                        <tr class="hover:bg-gray-50 transition" data-product="PureEstate" data-status="expired">
                            <td class="px-6 py-4 text-sm font-semibold text-indigo-600">5</td>
                            <td class="px-6 py-4">PureEstate</td>
                            <td class="px-6 py-4 font-medium">Mehul Shah</td>
                            <td class="px-6 py-4">9876543216</td>
                            <td class="px-6 py-4">MS Property Hub</td>
                            <td class="px-6 py-4"><span class="px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-600">Basic</span></td>
                            <td class="px-6 py-4">₹9,999</td>
                            <td class="px-6 py-4">6 Months</td>
                            <td class="px-6 py-4">Ahmedabad</td>
                            <td class="px-6 py-4">01-01-2024</td>
                            <td class="px-6 py-4">01-07-2024</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">
                                    <i class="ri-close-circle-line"></i> Expired
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="puresaas_view_register_user.php" class="w-9 h-9 rounded-lg bg-blue-50 text-green-600 hover:bg-green-100 flex items-center justify-center"><i class="ri-eye-line"></i></a>
                                    <button onclick="deleteRow(this)" class="w-9 h-9 rounded-lg bg-red-50 text-red-600 flex items-center justify-center"><i class="ri-delete-bin-line"></i></button>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- BuilderPro Expiring -->
                        <tr class="hover:bg-gray-50 transition" data-product="BuilderPro" data-status="expiring">
                            <td class="px-6 py-4 text-sm font-semibold text-indigo-600">6</td>
                            <td class="px-6 py-4">BuilderPro</td>
                            <td class="px-6 py-4 font-medium">Rakesh Patel</td>
                            <td class="px-6 py-4">9876543217</td>
                            <td class="px-6 py-4">Patel Construction</td>
                            <td class="px-6 py-4"><span class="px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-600">Premium</span></td>
                            <td class="px-6 py-4">₹19,999</td>
                            <td class="px-6 py-4">1 Year</td>
                            <td class="px-6 py-4">Ahmedabad</td>
                            <td class="px-6 py-4">01-08-2025</td>
                            <td class="px-6 py-4">10-08-2025</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-700">
                                    <i class="ri-error-warning-line"></i> Expiring Soon
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="puresaas_view_register_user.php" class="w-9 h-9 rounded-lg bg-blue-50 text-green-600 hover:bg-green-100 flex items-center justify-center"><i class="ri-eye-line"></i></a>
                                    <button onclick="deleteRow(this)" class="w-9 h-9 rounded-lg bg-red-50 text-red-600 flex items-center justify-center"><i class="ri-delete-bin-line"></i></button>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- BuilderPro Expired -->
                        <tr class="hover:bg-gray-50 transition" data-product="BuilderPro" data-status="expired">
                            <td class="px-6 py-4 text-sm font-semibold text-indigo-600">7</td>
                            <td class="px-6 py-4">BuilderPro</td>
                            <td class="px-6 py-4 font-medium">Nirav Shah</td>
                            <td class="px-6 py-4">9876543218</td>
                            <td class="px-6 py-4">Shah Developers</td>
                            <td class="px-6 py-4"><span class="px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-600">Basic</span></td>
                            <td class="px-6 py-4">₹9,999</td>
                            <td class="px-6 py-4">6 Months</td>
                            <td class="px-6 py-4">Rajkot</td>
                            <td class="px-6 py-4">01-01-2024</td>
                            <td class="px-6 py-4">01-07-2024</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-700">
                                    <i class="ri-close-circle-line"></i> Expired
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="puresaas_view_register_user.php" class="w-9 h-9 rounded-lg bg-blue-50 text-green-600 hover:bg-green-100 flex items-center justify-center"><i class="ri-eye-line"></i></a>
                                    <button onclick="deleteRow(this)" class="w-9 h-9 rounded-lg bg-red-50 text-red-600 flex items-center justify-center"><i class="ri-delete-bin-line"></i></button>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- SocietyPro Active -->
                        <tr class="hover:bg-gray-50 transition" data-product="SocietyPro" data-status="active">
                            <td class="px-6 py-4 text-sm font-semibold text-indigo-600">8</td>
                            <td class="px-6 py-4">SocietyPro</td>
                            <td class="px-6 py-4 font-medium">Amit Desai</td>
                            <td class="px-6 py-4">9876543219</td>
                            <td class="px-6 py-4">Green Valley Society</td>
                            <td class="px-6 py-4"><span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-600">Standard</span></td>
                            <td class="px-6 py-4">₹14,999</td>
                            <td class="px-6 py-4">1 Year</td>
                            <td class="px-6 py-4">Surat</td>
                            <td class="px-6 py-4">01-01-2025</td>
                            <td class="px-6 py-4">01-01-2026</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700">
                                    <i class="ri-checkbox-circle-line"></i> Active
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="puresaas_view_register_user.php" class="w-9 h-9 rounded-lg bg-blue-50 text-green-600 hover:bg-green-100 flex items-center justify-center"><i class="ri-eye-line"></i></a>
                                    <button onclick="deleteRow(this)" class="w-9 h-9 rounded-lg bg-red-50 text-red-600 flex items-center justify-center"><i class="ri-delete-bin-line"></i></button>
                                </div>
                            </td>
                        </tr>
                        
                        <!-- SocietyPro Expiring -->
                        <tr class="hover:bg-gray-50 transition" data-product="SocietyPro" data-status="expiring">
                            <td class="px-6 py-4 text-sm font-semibold text-indigo-600">9</td>
                            <td class="px-6 py-4">SocietyPro</td>
                            <td class="px-6 py-4 font-medium">Jignesh Patel</td>
                            <td class="px-6 py-4">9876543220</td>
                            <td class="px-6 py-4">Shree Residency</td>
                            <td class="px-6 py-4"><span class="px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-600">Premium</span></td>
                            <td class="px-6 py-4">₹24,999</td>
                            <td class="px-6 py-4">1 Year</td>
                            <td class="px-6 py-4">Vadodara</td>
                            <td class="px-6 py-4">01-08-2025</td>
                            <td class="px-6 py-4">10-08-2025</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-700">
                                    <i class="ri-error-warning-line"></i> Expiring Soon
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <a href="puresaas_view_register_user.php" class="w-9 h-9 rounded-lg bg-blue-50 text-green-600 hover:bg-green-100 flex items-center justify-center"><i class="ri-eye-line"></i></a>
                                    <button onclick="deleteRow(this)" class="w-9 h-9 rounded-lg bg-red-50 text-red-600 flex items-center justify-center"><i class="ri-delete-bin-line"></i></button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
    
                </table>
    
            </div>
    
            <!-- Footer -->
            <div class="bg-white px-4 py-4 border-t border-gray-100 flex flex-col md:flex-row items-center justify-between gap-4">
    
                <!-- Left -->
                <p class="text-sm text-gray-500">
                    Showing 1 to 4 of 10 demo
                </p>
    
                <!-- Pagination -->
                <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>
    
    
    <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"
        );
    
    });
    </script>
    
    <script>
        function deleteRow(button) {
    
            Swal.fire({
    
                title: "Delete Record?",
                text: "This row will be 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: "Record removed successfully.",
    
                        width: "350px",
                        padding: "1rem",
    
                        showConfirmButton: false,
                        timer: 1400
    
                    });
    
                }
    
            });
    
        }
    
    </script>
    
<script>

let currentProduct = "PureEstate";
let currentStatus = "active";

function applyFilters() {

    const rows = document.querySelectorAll("tbody tr");

    rows.forEach(row => {

        const productMatch =
            currentProduct === "all" ||
            row.dataset.product === currentProduct;

        const statusMatch =
            currentStatus === "all" ||
            row.dataset.status === currentStatus;

        row.style.display =
            (productMatch && statusMatch)
            ? ""
            : "none";

    });

}

function filterProduct(product) {

    currentProduct = product;


    currentStatus = "active";

    applyFilters();
}

function filterStatus(status) {

    currentStatus = status;
    applyFilters();

}

document.addEventListener("DOMContentLoaded", function () {

    applyFilters();

});

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