<?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">
                Warranty Registration
            </h1>
            <p class="text-sm text-gray-500">
                Manage all warranty registration requests from here
            </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_Warranty_registration.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>
                Add Warranty Registration
            </a>

        </div>

    </div>

    <!-- Card -->
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-x-auto overflow-y-hidden mb-5">
        <!-- Table Header -->
        <div class="p-4 border-b border-gray-200">
            <div class="flex flex-wrap gap-2">

                <button id="inactiveCard"
                    class="px-4 py-2 rounded-xl border border-orange-200 bg-orange-50 text-orange-600 text-sm font-medium hover:bg-orange-200">
                    Expired Warranties
                    <span class="px-2 py-0.5 text-xs rounded-full bg-orange-300 text-black">2</span>
                </button>

                <button id="activeCard"
                    class="px-4 py-2 rounded-xl border border-green-200 bg-green-50 text-green-600 text-sm font-medium hover:bg-green-200">
                    Active Warranties
                    <span class="px-2 py-0.5 text-xs rounded-full bg-green-300 text-black">2</span>
                </button>

                <button id="totalCard"
                    class="px-4 py-2 rounded-xl border border-blue-200 bg-blue-50 text-blue-600 text-sm font-medium hover:bg-blue-200">
                    Total Warranties
                    <span class="px-2 py-0.5 text-xs rounded-full bg-blue-300 text-black">4</span>
                </button>

            </div>
        </div>
    </div>

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

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

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

                <!-- Table Head -->
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr class="text-left">

                        <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">
                            Date
                        </th>

                        <th
                            class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                            Warranty 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">

                    <!-- Row 3 - Inactive -->
                    <tr class="hover:bg-gray-50 transition" data-warranty="inactive">
                        <td class="px-6 py-4 text-sm text-gray-700">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">
                                Serial No: LO-001
                            </div>

                            <div class="text-xs text-gray-500 mt-1">
                                Purchase: 15-06-2026
                            </div>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-gray-800">
                                Amit Shah
                            </div>

                            <div class="text-xs text-gray-500 mt-1">
                                9876543210
                            </div>

                            <div class="text-xs text-indigo-600 font-medium mt-1">
                                Invoice: INV-112233445
                            </div>
                        </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 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                Installed: 05-01-2025
                            </div>

                            <div class="text-xs text-gray-500 mt-1">
                                Expiry: 05-01-2026
                            </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">
                                Expired Warranties
                            </span>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center justify-center gap-2">
                                <a href="view_lockora_warranty_registration.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

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

                    <!-- Row 4 - Inactive -->
                    <tr class="hover:bg-gray-50 transition" data-warranty="inactive">
                        <td class="px-6 py-4 text-sm text-gray-700">2</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-indigo-600 whitespace-nowrap">
                                LockOra L4 Ultra
                            </div>

                            <div class="text-xs font-semibold text-sky-700 mt-1 whitespace-nowrap">
                                Serial No: LO-004
                            </div>

                            <div class="text-xs text-gray-500 mt-1 whitespace-nowrap">
                                Purchase Date: 15-03-2024
                            </div>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-gray-800">
                                Priya Mehta
                            </div>

                            <div class="text-xs text-gray-500 mt-1">
                                9876543210
                            </div>

                            <div class="text-xs text-indigo-600 font-medium mt-1">
                                Invoice: INV-556677889
                            </div>
                        </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 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                Installed: 20-03-2024
                            </div>

                            <div class="text-xs text-gray-500 mt-1">
                                Expiry: 20-03-2025
                            </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">
                                Expired Warranties
                            </span>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center justify-center gap-2">

                                <a href="view_lockora_warranty_registration.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

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

                    <!-- Row 1 - Active -->
                    <tr class="hover:bg-gray-50 transition" data-warranty="active">
                        <td class="px-6 py-4 text-sm text-gray-700">3</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">
                                Serial No: LO-001
                            </div>

                            <div class="text-xs text-gray-500 mt-1">
                                Purchase Date: 15-06-2026
                            </div>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-gray-800">
                                Dev Mistry
                            </div>

                            <div class="text-xs text-gray-500 mt-1">
                                9876543210
                            </div>

                            <div class="text-xs text-indigo-600 font-medium mt-1">
                                Invoice: INV-123456789
                            </div>
                        </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 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                Installed: 20-06-2026
                            </div>

                            <div class="text-xs text-gray-500 mt-1">
                                Expiry: 20-06-2027
                            </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">
                                Active Warranties
                            </span>
                        </td>

                        <td class="px-6 py-4 ">
                            <div class="flex items-center justify-center gap-2">
                                <a href="view_lockora_warranty_registration.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>
                                <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-warranty="active">

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

                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-indigo-600 whitespace-nowrap">
                                LockOra L2+
                            </div>

                            <div class="text-xs font-semibold text-sky-700 mt-1 whitespace-nowrap">
                                Serial No: LO-002
                            </div>

                            <div class="text-xs text-gray-500 mt-1 whitespace-nowrap">
                                Purchase Date: 10-06-2026
                            </div>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-semibold text-gray-800">
                                Raj Patel
                            </div>

                            <div class="text-xs text-gray-500 mt-1">
                                9876543210
                            </div>

                            <div class="text-xs text-indigo-600 font-medium mt-1">
                                Invoice: INV-987654321
                            </div>
                        </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 whitespace-nowrap">
                            <div class="text-sm text-gray-700">
                                Installed: 15-06-2026
                            </div>

                            <div class="text-xs text-gray-500 mt-1">
                                Expiry: 15-06-2027
                            </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">
                                Active Warranties
                            </span>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center justify-center gap-2">

                                <a href="view_lockora_warranty_registration.php"
                                    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center">
                                    <i class="ri-eye-line"></i>
                                </a>

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





                    <!-- Empty State -->
                    <tr id="warrantyEmptyRow" style="display:none;">
                        <td colspan="8" class="px-6 py-16 text-center">
                            <div class="flex flex-col items-center gap-3">
                                <div class="w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center">
                                    <i class="ri-shield-line text-3xl text-gray-400"></i>
                                </div>
                                <p class="text-base font-semibold text-gray-700">No Warranties Found</p>
                                <p id="warrantyEmptyMsg" class="text-sm text-gray-400">No records match the selected
                                    filter.</p>
                            </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">

            <!-- Left -->
            <p class="text-sm text-gray-500" id="showingText">
                Showing all records
            </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>

<!-- 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="productSelect">
                    <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>

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

        <!-- Warranty Status -->
        <div class="w-full">
            <label class="mb-1 block text-sm font-medium text-slate-700">Warranty Status</label>
            <div class="relative">
                <i class="ri-shield-line absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10"></i>
                <select id="warrantyStatusSelect">
                    <option value="">Select Status</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</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>
document.addEventListener("DOMContentLoaded", function() {

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

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

    // TomSelect - Warranty Status
    const warrantyStatusSelect = new TomSelect("#warrantyStatusSelect", {
        create: false,
        placeholder: "Select Status..."
    });

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

});
</script>

<script>
// Filter Sidebar Open/Close
const openFilter = document.getElementById("openFilter");
const closeFilter = document.getElementById("closeFilter");
const filterSidebar = document.getElementById("filterSidebar");
const sidebarOverlay = document.getElementById("sidebarOverlay");

openFilter.addEventListener("click", () => {
    filterSidebar.style.right = "0";
    sidebarOverlay.classList.remove("hidden");
});

closeFilter.addEventListener("click", () => {
    filterSidebar.style.right = "-400px";
    sidebarOverlay.classList.add("hidden");
});

sidebarOverlay.addEventListener("click", () => {
    filterSidebar.style.right = "-400px";
    sidebarOverlay.classList.add("hidden");
});
</script>

<script>
// Delete Row
function deleteRow(button) {
    Swal.fire({
        title: "Delete Record?",
        text: "This row will be deleted.",
        icon: "warning",
        width: "320px",
        padding: "1rem",
        showCancelButton: true,
        scrollbarPadding: false,
        confirmButtonText: "Delete",
        cancelButtonText: "Cancel",
        confirmButtonColor: "#2563eb",
        cancelButtonColor: "#ef4444",
        customClass: {
            popup: "rounded-2xl",
            title: "text-lg font-semibold",
            htmlContainer: "text-sm text-gray-500",
            confirmButton: "px-4 py-2 rounded-lg text-sm",
            cancelButton: "px-4 py-2 rounded-lg text-sm"
        }
    }).then((result) => {
        if (result.isConfirmed) {
            button.closest("tr").remove();
            Swal.fire({
                icon: "success",
                title: "Deleted!",
                text: "Record removed successfully.",
                width: "300px",
                padding: "1rem",
                showConfirmButton: false,
                timer: 1400
            });
        }
    });
}
</script>

<script>
function approveWarranty(btn) {

    const row = btn.closest("tr");
    const statusCell = row.querySelector("td:nth-child(9) span");

    statusCell.className =
        "px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium whitespace-nowrap";

    statusCell.textContent = "Approved";

    Swal.fire({
        icon: "success",
        title: "Approved",
        text: "Warranty approved successfully.",
        timer: 1500,
        width: '350px',
        showConfirmButton: false
    });
}

function rejectWarranty(btn) {

    const row = btn.closest("tr");
    const statusCell = row.querySelector("td:nth-child(9) span");

    statusCell.className =
        "px-3 py-1 rounded-full bg-red-100 text-red-700 text-xs font-medium whitespace-nowrap";

    statusCell.textContent = "Rejected";

    Swal.fire({
        icon: "error",
        title: "Rejected",
        text: "Warranty rejected successfully.",
        timer: 1500,
        width: '350px',
        showConfirmButton: false
    });
}
</script>

<script>
let activeWarrantyFilter = "all";

function filterWarranty(status) {
    activeWarrantyFilter = status;

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

    let visibleCount = 0;

    rows.forEach(row => {
        const rowStatus = row.dataset.warranty || "";
        const match = status === "all" || rowStatus === status;
        row.style.display = match ? "" : "none";
        if (match) visibleCount++;
    });

    // Empty state
    if (visibleCount === 0) {
        const labels = {
            active: "Active",
            inactive: "Inactive"
        };
        emptyMsg.textContent = `No ${labels[status] ?? ""} warranty records found.`;
        emptyRow.style.display = "";
    } else {
        emptyRow.style.display = "none";
    }

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

    // Remove highlight from all 3 cards
    ["totalCard", "activeCard", "inactiveCard"].forEach(id => {
        document.getElementById(id).classList.remove("ring-4", "ring-white/60", "scale-[1.02]");
    });

    // Highlight active card
    const cardMap = {
        all: "totalCard",
        active: "activeCard",
        inactive: "inactiveCard"
    };
    const activeId = cardMap[status];
    if (activeId) {
        document.getElementById(activeId).classList.add("ring-4", "ring-white/60", "scale-[1.02]");
    }
}

document.getElementById("totalCard").onclick = () => filterWarranty("all");
document.getElementById("activeCard").onclick = () => filterWarranty("active");
document.getElementById("inactiveCard").onclick = () => filterWarranty("inactive");

// Init — highlight Expired card on load
filterWarranty("inactive");
</script>

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