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

<style>
    .ts-wrapper.single .ts-control{
    padding-left: 12px !important;
    min-height: 44px !important;
}

.ts-wrapper.single .ts-control input{
    margin-left: 0 !important;
}

.ts-wrapper.single .item{
    margin-left: 0 !important;
}
body.modal-open{
    overflow: hidden !important;
}
</style>

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

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5 bg-white p-4 rounded-lg border border-gray-200">

        <!-- Title -->
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Installation</h1>
            <p class="text-sm text-gray-500">View and manage all installation bookings and schedules</p>
        </div>

        <!-- Actions -->
        <div class="flex flex-col sm:flex-row gap-3">

            <!-- Search -->
            <div class="relative">
                <input type="text" placeholder="Search here..." id="searchInput"
                    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>

            <!-- 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>

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

        </div>

    </div>
    
    <!-- Quick Action Buttons -->
<div class="bg-white rounded-2xl border border-gray-200 p-4 mb-5">
    <div class="flex flex-wrap gap-3">
        
        <!-- Pending -->
        <button id="btn-pending" onclick="filterInstallation('pending')"
            class="filter-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-red-50 text-red-700 border border-red-200 hover:bg-red-100 transition text-sm font-medium">
            <i class="ri-time-line text-lg"></i>
            Pending <span class="px-2 py-0.5 text-xs rounded-full bg-red-300 text-black">3</span>
        </button>

        <!-- Completed -->
        <button id="btn-completed" onclick="filterInstallation('completed')"
            class="filter-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-green-50 text-green-700 border border-green-200 hover:bg-green-100 transition text-sm font-medium">
            <i class="ri-checkbox-circle-line text-lg"></i>
            Completed <span class="px-2 py-0.5 text-xs rounded-full bg-green-300 text-black">3</span>
        </button>
        
        <!-- Ongoing -->
        <button id="btn-ongoing" onclick="filterInstallation('ongoing')"
            class="filter-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-amber-50 text-amber-700 border border-amber-200 hover:bg-amber-100 transition text-sm font-medium">
            <i class="ri-loader-4-line text-lg"></i>
            Ongoing
            <span class="px-2 py-0.5 text-xs rounded-full bg-amber-300 text-black">
                2
            </span>
        </button>

        <!-- Total / All -->
        <button id="btn-all" onclick="filterInstallation('all')"
            class="filter-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-slate-100 text-slate-700 border border-slate-200 hover:bg-slate-200 transition text-sm font-medium">
            <i class="ri-file-list-3-line text-lg"></i>
            Total Installation <span class="px-2 py-0.5 text-xs rounded-full bg-slate-300 text-black">6</span>
        </button>

    </div>
</div>

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

        <div class="overflow-x-auto">
            <table class="w-full min-w-[1000px]">
                
                <!-- Table Head -->
                <thead class="bg-gray-50 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 Model
                        </th>
                
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Customer Name
                        </th>
                        
                        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Customer Type
                        </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">
                            Installation Date & Time
                        </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 whitespace-nowrap min-w-[220px]">
                            Action
                        </th>
                
                    </tr>
                </thead>

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

                    <tr class="hover:bg-gray-50 transition" data-installation="pending">
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">1</td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-indigo-600">LockOra L1 Core</div>
                            <div class="text-xs font-semibold text-sky-700 mt-1 whitespace-nowrap">
                                Serial No: LO-001
                            </div>
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            Dev Mistry
                        </td>
                        
                        <td class="px-6 py-4 whitespace-nowrap min-w-[180px]">
                            <span class="px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">
                                Website Customer
                            </span>
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            9876543210
                        </td>
                    
<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-medium text-gray-800">
        15-06-2026
    </div>
    <div class="text-xs text-gray-500 mt-1">
        10:00 AM
    </div>
</td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-red-100 text-red-700 text-xs font-medium whitespace-nowrap">
                                Pending
                            </span>
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center justify-center gap-2 whitespace-nowrap">
                        <!-- Open Modal Button -->
    <button onclick="openInstallationModal()"
        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-file-list-3-line"></i>
    </button>
                    
                                <a href="view_lockora_installation.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center flex-shrink-0">
                                    <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 flex-shrink-0">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                    
                            </div>
                        </td>
                    
                    </tr>
                    
                    <tr class="hover:bg-gray-50 transition" data-installation="pending">
                    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">2</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-indigo-600">LockOra L2+</div>
                            <div class="text-xs font-semibold text-sky-700 mt-1 whitespace-nowrap">
                                Serial No: LO-002
                            </div>
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            Raj Patel
                        </td>
                        
                            <td class="px-6 py-4 whitespace-nowrap min-w-[180px]">
                                <span class="px-3 py-1 rounded-full bg-purple-100 text-purple-700 text-xs font-medium">
                                    Company Customer
                                </span>
                            </td>
                    
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            9123456780
                        </td>
                    
<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-medium text-gray-800">
        17-06-2026
    </div>
    <div class="text-xs text-gray-500 mt-1">
        11:00 AM
    </div>
</td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-red-100 text-red-700 text-xs font-medium whitespace-nowrap">
                                Pending
                            </span>
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center justify-center gap-2 whitespace-nowrap">
                        <button onclick="openInstallationModal()"
        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-file-list-3-line"></i>
    </button>
                                <a href="view_lockora_installation.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center flex-shrink-0">
                                    <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 flex-shrink-0">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                    
                            </div>
                        </td>
                    
                    </tr>
                    
                    <tr class="hover:bg-gray-50 transition" data-installation="pending">
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            3
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-indigo-600">
                                LockOra L3 Pro
                            </div>
                            <div class="text-xs font-semibold text-sky-700 mt-1 whitespace-nowrap">
                                Serial No: LO-003
                            </div>
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            Amit Shah
                        </td>
                        
                            <td class="px-6 py-4 whitespace-nowrap min-w-[180px]">
                                <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">
                                    Dealer Customer
                                </span>
                            </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            9988776655
                        </td>
                    
<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-medium text-gray-800">
        18-06-2026
    </div>
    <div class="text-xs text-gray-500 mt-1">
        1:00 PM
    </div>
</td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="installation-status px-3 py-1 rounded-full bg-red-100 text-red-700 text-xs font-medium whitespace-nowrap">
                                Pending
                            </span>
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center justify-center gap-2 whitespace-nowrap">
                    
                        <button onclick="openInstallationModal()"
        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-file-list-3-line"></i>
    </button>
                                <a href="view_lockora_installation.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center flex-shrink-0">
                                    <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 flex-shrink-0">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                    
                            </div>
                        </td>
                    
                    </tr>
                    
                    <tr class="hover:bg-gray-50 transition" data-installation="completed">
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            4
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-indigo-600">
                                LockOra L4 Ultra
                            </div>
                            <div class="text-xs font-semibold text-sky-700 mt-1 whitespace-nowrap">
                                Serial No: LO-004
                            </div>
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            Priya Mehta
                        </td>
                        
                            <td class="px-6 py-4 whitespace-nowrap min-w-[180px]">
                                <span class="px-3 py-1 rounded-full bg-orange-100 text-orange-700 text-xs font-medium">
                                    Sales Partner Customer
                                </span>
                            </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            9876541230
                        </td>
                    
<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-medium text-gray-800">
        19-06-2026
    </div>
    <div class="text-xs text-gray-500 mt-1">
        4:00 PM
    </div>
</td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium whitespace-nowrap">
                                Completed
                            </span>
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center justify-center gap-2 whitespace-nowrap">
                        <button onclick="openInstallationModal()"
        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-file-list-3-line"></i>
    </button>
                                <a href="view_lockora_installation.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center flex-shrink-0">
                                    <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 flex-shrink-0">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                    
                            </div>
                        </td>
                    
                    </tr>
                    
                    <tr class="hover:bg-gray-50 transition" data-installation="completed">
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            5
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-indigo-600">
                                LockOra L1 Core
                            </div>
                            <div class="text-xs font-semibold text-sky-700 mt-1 whitespace-nowrap">
                                Serial No: LO-005
                            </div>
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            Neha Desai
                        </td>
                        
                            <td class="px-6 py-4 whitespace-nowrap min-w-[180px]">
                            <span class="px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">
                                Website Customer
                            </span>
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            9765432180
                        </td>
                    
<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-medium text-gray-800">
        10-06-2026
    </div>
    <div class="text-xs text-gray-500 mt-1">
        9:00 AM
    </div>
</td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium whitespace-nowrap">
                                Completed
                            </span>
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center justify-center gap-2 whitespace-nowrap">
                        <button onclick="openInstallationModal()"
        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-file-list-3-line"></i>
    </button>
                                <a href="view_lockora_installation.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center flex-shrink-0">
                                    <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 flex-shrink-0">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                    
                            </div>
                        </td>
                    
                    </tr>
                    
                    <tr class="hover:bg-gray-50 transition" data-installation="completed">
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            6
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-indigo-600">
                                LockOra L2+
                            </div>
                            <div class="text-xs font-semibold text-sky-700 mt-1 whitespace-nowrap">
                                Serial No: LO-006
                            </div>
                        </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            Karan Joshi
                        </td>
                        
                                <td class="px-6 py-4 whitespace-nowrap min-w-[180px]">
                                <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">
                                    Dealer Customer
                                </span>
                            </td>
                    
                        <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
                            9654321780
                        </td>
                    
<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-medium text-gray-800">
        1-06-2026
    </div>
    <div class="text-xs text-gray-500 mt-1">
        3:00 PM
    </div>
</td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium whitespace-nowrap">
                                Completed
                            </span>
                        </td>
                    
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center justify-center gap-2 whitespace-nowrap">
                        <button onclick="openInstallationModal()"
        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-file-list-3-line"></i>
    </button>
                                <a href="view_lockora_installation.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center flex-shrink-0">
                                    <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 flex-shrink-0">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                    
                            </div>
                        </td>
                    
                    </tr>
                    <!-- Row 7 - Ongoing -->
<tr class="hover:bg-gray-50 transition" data-installation="ongoing">

    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">7</td>

    <td class="px-6 py-4 whitespace-nowrap">
        <div class="text-sm font-semibold text-indigo-600">LockOra L5 Elite</div>
        <div class="text-xs font-semibold text-sky-700 mt-1">
            Serial No: LO-007
        </div>
    </td>

    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        Ravi Patel
    </td>

    <td class="px-6 py-4 whitespace-nowrap min-w-[180px]">
        <span class="px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">
            Website Customer
        </span>
    </td>

    <td class="px-6 py-4 text-sm text-gray-700">9876501234</td>

<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-medium text-gray-800">
        22-06-2026
    </div>
    <div class="text-xs text-gray-500 mt-1">
        3:30 PM
    </div>
</td>

    <td class="px-6 py-4">
        <span class="px-3 py-1 rounded-full bg-amber-100 text-amber-700 text-xs font-medium">
            Ongoing
        </span>
    </td>

    <td class="px-6 py-4 whitespace-nowrap">
        <div class="flex items-center justify-center gap-2">
    <button onclick="openInstallationModal()"
        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-file-list-3-line"></i>
    </button>
            <a href="view_lockora_installation.php"
                class="w-9 h-9 rounded-lg bg-green-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 hover:bg-red-100 flex items-center justify-center">
                <i class="ri-delete-bin-line"></i>
            </button>

        </div>
    </td>

</tr>

<!-- Row 8 - Ongoing -->
<tr class="hover:bg-gray-50 transition" data-installation="ongoing">

    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">8</td>

    <td class="px-6 py-4 whitespace-nowrap">
        <div class="text-sm font-semibold text-indigo-600">LockOra L4 Ultra</div>
        <div class="text-xs font-semibold text-sky-700 mt-1">
            Serial No: LO-008
        </div>
    </td>

    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        Jigar Shah
    </td>

    <td class="px-6 py-4 whitespace-nowrap min-w-[180px]">
        <span class="px-3 py-1 rounded-full bg-purple-100 text-purple-700 text-xs font-medium">
            Company Customer
        </span>
    </td>

    <td class="px-6 py-4 text-sm text-gray-700">9898989898</td>

 <td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-medium text-gray-800">
        23-06-2026
    </div>
    <div class="text-xs text-gray-500 mt-1">
        3:00 PM
    </div>
</td>

    <td class="px-6 py-4">
        <span class="px-3 py-1 rounded-full bg-amber-100 text-amber-700 text-xs font-medium">
            Ongoing
        </span>
    </td>

    <td class="px-6 py-4 whitespace-nowrap">
        <div class="flex items-center justify-center gap-2">
    <button onclick="openInstallationModal()"
        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-file-list-3-line"></i>
    </button>
            <a href="view_lockora_installation.php"
                class="w-9 h-9 rounded-lg bg-green-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 hover:bg-red-100 flex items-center justify-center">
                <i class="ri-delete-bin-line"></i>
            </button>

        </div>
    </td>

</tr>

                </tbody>

            </table>
        </div>

        <!-- Footer -->
        <div class="px-4 py-4 border-t border-gray-100 flex flex-col md:flex-row items-center justify-between gap-4">

            <p class="text-sm text-gray-500" id="showingText">Showing all records</p>

            <div class="flex items-center gap-2">
                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition">
                    <i class="ri-arrow-left-s-line"></i>
                </button>
                <button class="w-9 h-9 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium shadow-md">1</button>
                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">2</button>
                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">3</button>
                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">4</button>
                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition">
                    <i class="ri-arrow-right-s-line"></i>
                </button>
            </div>

        </div>

    </div>

</div>

<div id="installationModal"
    class="fixed inset-0 bg-black/50 hidden items-center justify-center z-[99999] p-4 overflow-y-auto">

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

        <!-- Header -->
        <div class="flex items-center justify-between p-4 border-b border-b-gray-200">
            <h3 class="text-lg font-semibold">Update Status</h3>

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

        <!-- Body -->
        <div class="p-5">
            <div class="mb-4">
    <label class="block text-sm font-medium text-gray-700 mb-2">
        Current Status
    </label>

    <span id="currentStatusBadge"
        class="inline-flex px-3 py-1 rounded-full bg-red-100 text-red-700 text-xs font-medium">
        Pending
    </span>
</div>

            <label class="block text-sm font-medium mb-2">
                Status
            </label>

            <select id="installationStatus">
                <option value="">Select Status</option>
                <option value="pending">Pending</option>
                <option value="ongoing">Ongoing</option>
                <option value="completed">Completed</option>
            </select>

<div class="mt-4 flex justify-end">
    <button
        class="px-5 h-10 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-sm font-medium hover:from-blue-600 hover:to-indigo-700">
        Save
    </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>

        <!-- Product Model -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">Product Model</label>
            <div class="relative">
                <i class="ri-lock-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10"></i>
                <select id="filterProductSelect">
                    <option value="">Select Product Model</option>
                    <option value="Lockora L1 Core">Lockora L1 Core</option>
                    <option value="Lockora L2+">Lockora L2+</option>
                    <option value="Lockora L3 Pro">Lockora L3 Pro</option>
                    <option value="Lockora L4 Ultra">Lockora L4 Ultra</option>
                    <option value="Lockora L5 Elite">Lockora L5 Elite</option>
                </select>
            </div>
        </div>

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

        <!-- Installation Date -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">Installation Date</label>
            <div class="relative">
                <i class="ri-calendar-check-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
                <input type="date" id="installationDate"
                    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>

        <!-- Installation 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-file-list-3-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10"></i>
                <select id="filterStatusSelect">
                    <option value="">Select Status</option>
                    <option value="pending">Pending</option>
                    <option value="installation">Installation</option>
                    <option value="completed">Completed</option>
                </select>
            </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">
            <button id="resetFilter"
                class="w-1/2 h-11 rounded-md border border-slate-200 bg-slate-100 text-sm font-medium text-slate-700 transition hover:bg-slate-200">
                Reset
            </button>
            <button id="applyFilter"
                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>
function openInstallationModal() {
    document.getElementById('installationModal').classList.remove('hidden');
    document.getElementById('installationModal').classList.add('flex');

    document.body.classList.add('modal-open');
}

function closeInstallationModal() {
    document.getElementById('installationModal').classList.add('hidden');
    document.getElementById('installationModal').classList.remove('flex');

    document.body.classList.remove('modal-open');
}
</script>

<!-- TomSelect Init -->
<script>
document.addEventListener("DOMContentLoaded", function () {

    const installationStatus = new TomSelect("#installationStatus", {
        create: false,
        placeholder: "Search Status..."
    });

    installationStatus.control.classList.add(
        "h-11",
        "rounded-xl",
        "border",
        "border-gray-200",
        "bg-white",
        "text-sm"
    );

});

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


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

        const filterProductSelect = new TomSelect("#filterProductSelect", {
            create: false,
            placeholder: "Search Product Model..."
        });
        styleTomSelect(filterProductSelect);

        const filterStatusSelect = new TomSelect("#filterStatusSelect", {
            create: false,
            placeholder: "Select Status..."
        });
        styleTomSelect(filterStatusSelect);

        const modalProductSelect = new TomSelect("#modalProductSelect", {
            create: false,
            placeholder: "Search Product Model..."
        });
        modalProductSelect.control.classList.add(
            "flex", "items-center", "h-12", "w-full",
            "rounded-xl", "border", "border-gray-200",
            "bg-white", "pl-12", "pr-4", "text-sm", "text-gray-700"
        );
        modalProductSelect.dropdown.classList.add(
            "z-[99999]", "overflow-hidden", "rounded-xl",
            "border", "border-gray-200", "bg-white", "shadow-xl"
        );
        

    });
    

</script>


<!-- Filter Sidebar 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>

<!-- Delete Row 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 activeInstallationFilter = "all";

function filterInstallation(status) {

    activeInstallationFilter = status;

    const rows = document.querySelectorAll("tbody tr:not(#installationEmptyRow)");
    const emptyRow = document.getElementById("installationEmptyRow");
    const emptyMsg = document.getElementById("installationEmptyMsg");
    const showingText = document.getElementById("showingText");

    let visibleCount = 0;

    rows.forEach(row => {

        const rowStatus = row.dataset.installation || "";

        const match = status === "all" || rowStatus === status;

        row.style.display = match ? "" : "none";

        if (match) visibleCount++;

    });

    if (visibleCount === 0) {

        const labels = {
            pending: "Pending",
            completed: "Completed"
        };

        emptyMsg.textContent =
            `No ${labels[status] ?? ""} records found.`;

        emptyRow.style.display = "";

    } else {

        emptyRow.style.display = "none";

    }

    showingText.textContent =
        `Showing ${visibleCount} record${visibleCount !== 1 ? "s" : ""}`;

    // Active Button Highlight
    document.querySelectorAll(".filter-btn").forEach(btn => {
        btn.classList.remove("ring-2", "ring-indigo-500");
    });

    const activeBtn = document.getElementById("btn-" + status);

    if (activeBtn) {
        activeBtn.classList.add("ring-2", "ring-indigo-500");
    }
}

document.addEventListener("DOMContentLoaded", () => {
    filterInstallation("pending");
});
</script>

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