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

<style>
.ts-wrapper.single .ts-control {min-height: 50px !important; border: 1px solid rgb(203 213 225); border-radius: 15px !important; padding: 0 16px !important; box-shadow: none; background: #fff; font-size: 16px; display: flex; align-items: center;}
.ts-wrapper.focus .ts-control { border-color: #6366f1 !important; box-shadow: 0 0 0 2px rgba(99,102,241,.2) !important;}
.ts-control input {font-size: 16px !important;}
.ts-dropdown { border-radius: 12px; border: 1px solid rgb(203 213 225); overflow: hidden;}
.ts-dropdown .option {padding: 12px 16px;}
.ts-dropdown-content {max-height: 125px !important;}
.ts-dropdown .active {background: #eef2ff; color: #4338ca;}
.ts-wrapper.single .ts-control{
    min-height:44px !important;
    /*padding-left:40px !important; */
}
</style>

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

    <!-- Left -->
    <div>
        <h1 class="text-2xl font-bold text-gray-800">
            Free Trial
        </h1>
        <p class="text-sm text-gray-500">
            Manage all free trial requests from here
        </p>
    </div>

    <!-- Right -->
    <div class="flex items-center 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-visible 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 (1)
            </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 (1)
            </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 (1)
            </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">
                Total (3)
            </button>
    
        </div>
    </div>
</div>

<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-visible mb-5">

    <div class="p-4 border-b border-gray-200">
        <div class="flex flex-wrap items-center gap-2">
            <button onclick="filterStatus('pending')"
                class="px-4 py-2 rounded-xl border border-red-200 bg-red-50 text-red-600 text-sm font-medium">
                Pending Free Trial (<span id="pendingTrialCount">0</span>)
            </button>
            
            <button onclick="filterStatus('active')"
                class="px-4 py-2 rounded-xl border border-orange-200 bg-orange-50 text-orange-600 text-sm font-medium">
                Active Free Trial (<span id="pendingCount">0</span>)
            </button>

            <button onclick="filterStatus('complete')"
                class="px-4 py-2 rounded-xl border border-green-200 bg-green-50 text-green-600 text-sm font-medium">
                Free Trial Completed (<span id="completeCount">0</span>)
            </button>
            
            <button onclick="filterStatus('all')"
                class="px-4 py-2 rounded-xl border border-blue-200 bg-blue-50 text-blue-600 text-sm font-medium">
                Total Free Trial (<span id="totalCount">0</span>)
            </button>


        </div>
    </div>

</div>


        <!-- Table -->
        <div class="overflow-x-auto">

            <table class="w-full min-w-[1000px]">

                <!-- 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 whitespace-nowrap">
                            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">
                            Phone No
                        </th>
                    
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Email
                        </th>
                    
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Start Date
                        </th>
                        
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            End Date
                        </th>
                    
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            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>

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

                    <tr class="hover:bg-gray-50 transition" data-product="PureEstate" data-status="complete">

                        <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">
                            PureEstate
                        </td>
                        
                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600 whitespace-nowrap">
                            Rajesh 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-600 whitespace-nowrap">
                            rajesh@example.com
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            10-06-2026
                        </td>
                        
                        <td class="px-6 py-4 whitespace-nowrap">
                            15-06-2026
                        </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 whitespace-nowrap">
                               Completed 
                            </span>
                        </td>

                        <td class="px-6 py-4 ">
                            <div class="flex items-center justify-center gap-2">
                                <!--<button-->
                                <!--    onclick="openAssignModal()"-->
                                <!--    data-tooltip="Assign"-->
                                <!--    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">-->
                                <!--    <i class="ri-user-shared-line"></i>-->
                                <!--</button>-->
                                <!-- Delete -->
                                <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>
                    
                    <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">
                            2
                        </td>
                        
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            BuliderPro
                        </td>
                        
                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600 whitespace-nowrap">
                            Dev 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-600 whitespace-nowrap">
                            dev@example.com
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            15-06-2026
                        </td>
                        
                        <td class="px-6 py-4 whitespace-nowrap">
                            20-06-2026
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-600 whitespace-nowrap">
                               Active 
                            </span>
                        </td>

                        <td class="px-6 py-4 ">
                            <div class="flex items-center justify-center gap-2">
                                <!--<button-->
                                <!--    onclick="openAssignModal()"-->
                                <!--    data-tooltip="Assign"-->
                                <!--    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">-->
                                <!--    <i class="ri-user-shared-line"></i>-->
                                <!--</button>-->

                                <!-- Delete -->
                                <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>
                    
                    <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 whitespace-nowrap">
                            3
                        </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-semibold text-indigo-600 whitespace-nowrap">
                            shiv 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-600 whitespace-nowrap">
                            shiv@example.com
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            15-06-2026
                        </td>
                        
                        <td class="px-6 py-4 whitespace-nowrap">
                            20-06-2026
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-600 whitespace-nowrap">
                               Active 
                            </span>
                        </td>

                        <td class="px-6 py-4 ">
                            <div class="flex items-center justify-center gap-2">
                                <!--<button-->
                                <!--    onclick="openAssignModal()"-->
                                <!--    data-tooltip="Assign"-->
                                <!--    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">-->
                                <!--    <i class="ri-user-shared-line"></i>-->
                                <!--</button>-->

                                <!-- Delete -->
                                <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>
                    
                    <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 whitespace-nowrap">4</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-semibold text-indigo-600 whitespace-nowrap">
                            Amit Shah
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            9876543211
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">
                            amit@example.com
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            18-06-2026
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            23-06-2026
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-600 whitespace-nowrap">
                                Active
                            </span>
                        </td>
                    
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-center gap-2">
                    
                                <!--<button onclick="openAssignModal()"-->
                                <!--    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">-->
                                <!--    <i class="ri-user-shared-line"></i>-->
                                <!--</button>-->
                    
                                <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>

                    <tr class="hover:bg-gray-50 transition" data-product="BuilderPro" data-status="complete">
                    
                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600 whitespace-nowrap">5</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-semibold text-indigo-600 whitespace-nowrap">
                            Nirav Patel
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            9876543212
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">
                            nirav@example.com
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            12-06-2026
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            17-06-2026
                        </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 whitespace-nowrap">
                                Completed
                            </span>
                        </td>
                    
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-center gap-2">
                    
                                <!--<button onclick="openAssignModal()"-->
                                <!--    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">-->
                                <!--    <i class="ri-user-shared-line"></i>-->
                                <!--</button>-->
                    
                                <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>

                    <tr class="hover:bg-gray-50 transition" data-product="SocietyPro" data-status="complete">
                    
                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600 whitespace-nowrap">6</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-semibold text-indigo-600 whitespace-nowrap">
                            Karan Mehta
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            9876543213
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">
                            karan@example.com
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            11-06-2026
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            16-06-2026
                        </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 whitespace-nowrap">
                                Completed
                            </span>
                        </td>
                    
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-center gap-2">
                    
                                <!--<button onclick="openAssignModal()"-->
                                <!--    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">-->
                                <!--    <i class="ri-user-shared-line"></i>-->
                                <!--</button>-->
                    
                                <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>
                    
                    <tr class="hover:bg-gray-50 transition" data-product="PureEstate" data-status="pending">
                    
                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600 whitespace-nowrap">7</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-semibold text-indigo-600 whitespace-nowrap">Jay Patel</td>
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">9876543214</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">jay@example.com</td>
                        <td class="px-6 py-4 whitespace-nowrap">24-06-2026</td>
                        <td class="px-6 py-4 whitespace-nowrap">29-06-2026</td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700 whitespace-nowrap">
                                Pending
                            </span>
                        </td>
                    
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-center gap-2">

                                <!--<button onclick="approveTrial(this)"-->
                                <!--    class="flex items-center gap-1 px-3 py-2 rounded-lg bg-green-500 text-white hover:bg-green-600 text-xs font-medium transition">-->
                                
                                <!--    <i class="ri-check-line"></i>-->
                                <!--    <span>Approve</span>-->
                                
                                <!--</button>-->
                                
                                <!--<button onclick="rejectTrial(this)"-->
                                <!--    class="flex items-center gap-1 px-3 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 text-xs font-medium transition">-->
                                
                                <!--    <i class="ri-close-line"></i>-->
                                <!--    <span>Reject</span>-->
                                
                                <!--</button>-->
                                
                                <!--<button onclick="openAssignModal()"-->
                                <!--    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">-->
                                <!--    <i class="ri-user-shared-line"></i>-->
                                <!--</button>-->
                    
                                <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>
                    
                    <tr class="hover:bg-gray-50 transition" data-product="BuilderPro" data-status="pending">
                    
                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600 whitespace-nowrap">8</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-semibold text-indigo-600 whitespace-nowrap">Meet Shah</td>
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">9876543215</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">meet@example.com</td>
                        <td class="px-6 py-4 whitespace-nowrap">25-06-2026</td>
                        <td class="px-6 py-4 whitespace-nowrap">30-06-2026</td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700 whitespace-nowrap">
                                Pending
                            </span>
                        </td>
                    
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-center gap-2">
                                                             
                                <!--<button onclick="approveTrial(this)"-->
                                <!--    class="flex items-center gap-1 px-3 py-2 rounded-lg bg-green-500 text-white hover:bg-green-600 text-xs font-medium transition">-->
                                
                                <!--    <i class="ri-check-line"></i>-->
                                <!--    <span>Approve</span>-->
                                
                                <!--</button>-->
                                
                                <!--<button onclick="rejectTrial(this)"-->
                                <!--    class="flex items-center gap-1 px-3 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 text-xs font-medium transition">-->
                                
                                <!--    <i class="ri-close-line"></i>-->
                                <!--    <span>Reject</span>-->
                                
                                <!--</button>-->
                                
                                <!--<button onclick="openAssignModal()"-->
                                <!--    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">-->
                                <!--    <i class="ri-user-shared-line"></i>-->
                                <!--</button>-->
                    
                                <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>
                    
                    <tr class="hover:bg-gray-50 transition" data-product="SocietyPro" data-status="pending">
                    
                        <td class="px-6 py-4 text-sm font-semibold text-indigo-600 whitespace-nowrap">9</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-semibold text-indigo-600 whitespace-nowrap">Ravi Mistry</td>
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">9876543216</td>
                        <td class="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">ravi@example.com</td>
                        <td class="px-6 py-4 whitespace-nowrap">26-06-2026</td>
                        <td class="px-6 py-4 whitespace-nowrap">01-07-2026</td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700 whitespace-nowrap">
                                Pending
                            </span>
                        </td>
                    
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-center gap-2">
                                
                                <!--<button onclick="approveTrial(this)"-->
                                <!--    class="flex items-center gap-1 px-3 py-2 rounded-lg bg-green-500 text-white hover:bg-green-600 text-xs font-medium transition">-->
                                
                                <!--    <i class="ri-check-line"></i>-->
                                <!--    <span>Approve</span>-->
                                
                                <!--</button>-->
                                
                                <!--<button onclick="rejectTrial(this)"-->
                                <!--    class="flex items-center gap-1 px-3 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 text-xs font-medium transition">-->
                                
                                <!--    <i class="ri-close-line"></i>-->
                                <!--    <span>Reject</span>-->
                                
                                <!--</button>-->
                                
                                <!--<button onclick="openAssignModal()"-->
                                <!--    class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">-->
                                <!--    <i class="ri-user-shared-line"></i>-->
                                <!--</button>-->
                    
                                <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>

<!-- Assign Modal -->
<!--<div id="assignModal"-->
<!--    class="fixed inset-0 bg-black/40 hidden items-center justify-center z-50">-->

<!--    <div class="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4">-->

        <!-- Header -->
<!--        <div class="flex items-center justify-between p-5 border-b border-b-gray-200">-->
<!--            <h3 class="text-lg font-semibold text-gray-800">-->
<!--                Assign Demo-->
<!--            </h3>-->

<!--            <button onclick="closeAssignModal()">-->
<!--                <i class="ri-close-line text-xl"></i>-->
<!--            </button>-->
<!--        </div>-->

        <!-- Body -->
<!--        <div class="p-5">-->

<!--            <label class="block mb-2 text-sm font-medium text-slate-700">-->
<!--                Assign To-->
<!--            </label>-->

<!--            <select id="assignTo">-->
<!--                <option value="">Select User</option>-->
<!--                <option>Raj Patel</option>-->
<!--                <option>Dev Mistry</option>-->
<!--                <option>Support Team</option>-->
<!--                <option>Sales Team</option>-->
<!--            </select>-->

<!--        </div>-->

        <!-- Footer -->
<!--        <div class="flex justify-end gap-3 p-5 border-t border-t-gray-200">-->

<!--            <button onclick="closeAssignModal()"-->
<!--                class="px-4 py-2 border border-gray-300 rounded-xl">-->
<!--                Cancel-->
<!--            </button>-->

<!--            <button onclick="saveAssignment()"-->
<!--                class="px-5 py-2 bg-indigo-600 text-white rounded-xl">-->
<!--                Assign-->
<!--            </button>-->

<!--        </div>-->

<!--    </div>-->

<!--</div>-->

<script>
    function openAssignModal() {

    document.getElementById("assignModal").classList.remove("hidden");
    document.getElementById("assignModal").classList.add("flex");

}

function closeAssignModal() {

    document.getElementById("assignModal").classList.add("hidden");
    document.getElementById("assignModal").classList.remove("flex");

}

function saveAssignment() {

    const user = document.getElementById("assignTo").value;

    if (user === "") {

        Swal.fire({
            icon: "warning",
            title: "Missing Information",
            text: "Please Select Assign User",
            width: "350px"
        });

        return;
    }

    Swal.fire({
        icon: "success",
        title: "Assigned",
        text: "Demo Assigned Successfully",
        width: "350px",
        timer: 1500,
        showConfirmButton: false
    });

    closeAssignModal();
}


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

    new TomSelect("#assignTo", {
        create: false,
        placeholder: "Search User..."
    });

});
</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";

function filterProduct(product) {

    currentProduct = product;

    updateDemoCount();

    filterStatus("active");
}

function filterStatus(status) {

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

    rows.forEach(row => {

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

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

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

    });
}

function updateDemoCount() {

    const rows = document.querySelectorAll("tbody tr");
    
    let pending = 0;
    let active = 0;
    let complete = 0;
    let total = 0;

    rows.forEach(row => {

        if (
            currentProduct === "all" ||
            row.dataset.product === currentProduct
        ) {

            total++;
            if (row.dataset.status === "pending") pending++;
            if (row.dataset.status === "active") active++;
            if (row.dataset.status === "complete") complete++;
        }

    });
    
    document.getElementById("pendingTrialCount").innerText = pending;
    document.getElementById("pendingCount").innerText = active;
    document.getElementById("completeCount").innerText = complete;
    document.getElementById("totalCount").innerText = total;
}

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

    currentProduct = "PureEstate";

    updateDemoCount();

filterStatus("pending");

});
</script>

<script>
const productSelect = new TomSelect("#productSelect", {
    create: false,
    maxOptions: 10,
    placeholder: "Search Product...",
    openOnFocus: true,

    onChange: function() {
        this.blur(); // cursor hide
        this.close(); // dropdown close
    }
});

productSelect.control.classList.add(
    "flex","items-center","h-11","w-full",
    "rounded-xl","border","border-slate-200",
    "bg-slate-50",
    "pl-10", // icon માટે space
    "pr-4",
    "text-sm","text-slate-700"
);

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

productSelect.control_input.classList.add(
    "placeholder:text-gray-400"
);
</script>

// <script>
//     function approveTrial(button) {

//     const row = button.closest("tr");

//     row.dataset.status = "active";

//     row.querySelector("td:nth-child(8)").innerHTML = `
//         <span class="px-3 py-1 rounded-full text-xs font-semibold bg-red-100 text-red-600 whitespace-nowrap">
//             Active
//         </span>
//     `;

//     updateDemoCount();

//     filterStatus("pending");

//     Swal.fire({
//         icon: "success",
//         title: "Approved",
//         text: "Free Trial Approved Successfully",
//         width: "350px",
//         timer: 1500,
//         showConfirmButton: false
//     });
// }

// function rejectTrial(button) {

//     Swal.fire({
//         title: "Reject Free Trial?",
//         icon: "warning",
//         showCancelButton: true,
//         confirmButtonText: "Reject",
//         confirmButtonColor: "#ef4444"
//     }).then((result) => {

//         if (result.isConfirmed) {

//             button.closest("tr").remove();

//             updateDemoCount();

//             Swal.fire({
//                 icon: "success",
//                 title: "Rejected",
//                 text: "Free Trial Rejected Successfully",
//                 width: "350px",
//                 timer: 1500,
//                 showConfirmButton: false
//             });
//         }

//     });
// }
// </script>


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