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

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

    <!-- 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">
                SEO Client List

            </h1>

            <p class="text-sm text-gray-500">
                Manage all SEO clients from here
            </p>
        </div>

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

            <!-- Search -->
            <div class="relative">

                <input type="text" placeholder="Search Users..."
                    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>

            <!-- Add User -->
            <a href="add_new_seo_client.php"
                class="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white text-sm font-medium px-5 py-2.5 rounded-xl shadow-lg hover:shadow-blue-200 transition-all duration-300 flex items-center gap-2">

                <i class="ri-add-line text-lg"></i>
                Add Seo Client

            </a>

        </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">
            Client ID
        </th>

        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
            Company Name
        </th>

        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
            Website
        </th>

        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
            Package
        </th>

        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
            Monthly Amount
        </th>

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

        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
            Action
        </th>

    </tr>

</thead>


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

    <!-- ROW -->
    <tr class="hover:bg-gray-50 transition">

        <!-- Client ID -->
        <td class="px-6 py-4 text-sm font-semibold text-indigo-600">
            SEO-001
        </td>

        <!-- Company -->
        <td class="px-6 py-4">

            <div class="flex flex-col">

                <span class="text-sm font-semibold text-gray-800 whitespace-nowrap">
                    GrowFast Digital
                </span>

                <span class="text-xs text-gray-500">
                    Rahul Sharma
                </span>

            </div>

        </td>

        <!-- Website -->
        <td class="px-6 py-4">

            <a href="#"
                class="text-sm text-blue-600 hover:underline whitespace-nowrap">
                www.growfastdigital.com
            </a>

        </td>

        <!-- Package -->
        <td class="px-6 py-4">

            <span
                class="px-3 py-1 rounded-full text-xs font-semibold bg-violet-100 text-violet-700 whitespace-nowrap">
                Advanced SEO
            </span>

        </td>

        <!-- Amount -->
        <td class="px-6 py-4 text-sm font-semibold text-emerald-600">
            ₹20,000
        </td>

        <!-- Renewal -->
        <td class="px-6 py-4 text-sm text-gray-600">
            28 Jun 2026
        </td>

        <!-- Status -->
        <td class="px-6 py-4">

            <span
                class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 whitespace-nowrap">
                Active
            </span>

        </td>

        <!-- Payment -->
        <td class="px-6 py-4">

            <span
                class="px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700">
                Pending
            </span>

        </td>

        <!-- ACTION -->
        <td class="px-6 py-4 align-middle">

            <div class="flex items-center justify-center gap-2">

                <!-- View -->
                <a href="view_seo_client.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>

                <!-- Edit -->
                <a href="edit_seo_client.php"
                    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-edit-line"></i>

                </a>

                <!-- 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>
    
    
    
    <!-- ROW 2 -->
<tr class="hover:bg-gray-50 transition">

    <!-- Client ID -->
    <td class="px-6 py-4 text-sm font-semibold text-indigo-600">
        SEO-002
    </td>

    <!-- Company -->
    <td class="px-6 py-4">

        <div class="flex flex-col">

            <span class="text-sm font-semibold text-gray-800 whitespace-nowrap">
                PixelCraft Studio
            </span>

            <span class="text-xs text-gray-500">
                Neha Patel
            </span>

        </div>

    </td>

    <!-- Website -->
    <td class="px-6 py-4">

        <a href="#"
            class="text-sm text-blue-600 hover:underline whitespace-nowrap">
            www.pixelcraftstudio.com
        </a>

    </td>

    <!-- Package -->
    <td class="px-6 py-4">

        <span
            class="px-3 py-1 rounded-full text-xs font-semibold bg-pink-100 text-pink-700">
            Premium SEO
        </span>

    </td>

    <!-- Amount -->
    <td class="px-6 py-4 text-sm font-semibold text-emerald-600">
        ₹35,000
    </td>

    <!-- Renewal -->
    <td class="px-6 py-4 text-sm text-gray-600">
        12 Jul 2026
    </td>

    <!-- Status -->
    <td class="px-6 py-4">

        <span
            class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 whitespace-nowrap">
            Active
        </span>

    </td>

    <!-- Payment -->
    <td class="px-6 py-4">

        <span
            class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 whitespace-nowrap">
            Paid
        </span>

    </td>

    <!-- ACTION -->
    <td class="px-6 py-4 align-middle">

        <div class="flex items-center justify-center gap-2">

            <a href="view_seo_client.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>

            <a href="edit_seo_client.php"
                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-edit-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>




</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">
                Showing 1 to 4 of 62 tasks
            </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 -->
<!-- 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">
            SEO 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">

        <!-- Renewal From -->
        <div class="w-full">

            <label class="mb-1 block text-sm font-medium text-slate-700">
                Renewal From
            </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"
                    class="h-11 w-full rounded-xl border border-slate-200 bg-slate-50 pl-10 pr-4 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100">

            </div>

        </div>

        <!-- Renewal To -->
        <div class="w-full">

            <label class="mb-1 block text-sm font-medium text-slate-700">
                Renewal To
            </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"
                    class="h-11 w-full rounded-xl border border-slate-200 bg-slate-50 pl-10 pr-4 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100">

            </div>

        </div>

        <!-- Package -->
        <div class="w-full">

            <label class="mb-1 block text-sm font-medium text-slate-700">
                SEO Package
            </label>

            <div class="relative">

                <div class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10">

                    <i class="ri-vip-crown-line"></i>

                </div>

                <select id="packageSelect">

                    <option value="">Select Package</option>

                    <option value="Basic SEO">
                        Basic SEO
                    </option>

                    <option value="Advanced SEO">
                        Advanced SEO
                    </option>

                    <option value="Premium SEO">
                        Premium SEO
                    </option>

                </select>

            </div>

        </div>

        <!-- Status -->
        <div class="w-full">

            <label class="mb-1 block text-sm font-medium text-slate-700">
                Client Status
            </label>

            <div class="relative">

                <div class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10">

                    <i class="ri-loader-4-line"></i>

                </div>

                <select id="statusSelect">

                    <option value="">Select Status</option>

                    <option value="Active">
                        Active
                    </option>

                    <option value="Renewal Due">
                        Renewal Due
                    </option>

                    <option value="Expired">
                        Expired
                    </option>

                    <option value="Inactive">
                        Inactive
                    </option>

                </select>

            </div>

        </div>

        <!-- Payment -->
        <div class="w-full">

            <label class="mb-1 block text-sm font-medium text-slate-700">
                Payment Status
            </label>

            <div class="relative">

                <div class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10">

                    <i class="ri-money-rupee-circle-line"></i>

                </div>

                <select id="paymentSelect">

                    <option value="">Select Payment</option>

                    <option value="Paid">
                        Paid
                    </option>

                    <option value="Pending">
                        Pending
                    </option>

                    <option value="Overdue">
                        Overdue
                    </option>

                </select>

            </div>

        </div>

    </div>

    <!-- Bottom Buttons -->
    <div class="absolute bottom-0 left-0 w-full border-t border-gray-200 bg-white p-4">

        <div class="flex gap-3">

            <!-- Reset -->
            <button
                class="w-1/2 h-11 rounded-xl border border-slate-200 bg-slate-100 text-sm font-medium text-slate-700 hover:bg-slate-200 transition">

                Reset

            </button>

            <!-- Apply -->
            <button
                class="w-1/2 h-11 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-sm font-medium text-white hover:from-blue-600 hover:to-indigo-700 transition">

                Apply

            </button>

        </div>

    </div>

</div>



<script>
    const openFilter = document.getElementById("openFilter");
    const closeFilter = document.getElementById("closeFilter");
    const filterSidebar = document.getElementById("filterSidebar");
    const sidebarOverlay = document.getElementById("sidebarOverlay");

    openFilter.addEventListener("click", () => {

        filterSidebar.style.right = "0";
        sidebarOverlay.classList.remove("hidden");

    });

    closeFilter.addEventListener("click", () => {

        filterSidebar.style.right = "-400px";
        sidebarOverlay.classList.add("hidden");

    });

    sidebarOverlay.addEventListener("click", () => {

        filterSidebar.style.right = "-400px";
        sidebarOverlay.classList.add("hidden");

    });
</script>


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

    const packageSelect = new TomSelect("#packageSelect", {
        create:false,
        maxOptions:10,
        placeholder:"Search Package...",
        openOnFocus:false,
        dropdownParent:"body"
    });

    const statusSelect = new TomSelect("#statusSelect", {
        create:false,
        maxOptions:10,
        placeholder:"Search Status...",
        openOnFocus:false,
        dropdownParent:"body"
    });

    const paymentSelect = new TomSelect("#paymentSelect", {
        create:false,
        maxOptions:10,
        placeholder:"Search Payment...",
        openOnFocus:false,
        dropdownParent:"body"
    });

    function applyTomStyle(instance){

        instance.control.classList.add(
            "flex",
            "items-center",
            "h-11",
            "w-full",
            "rounded-xl",
            "border",
            "border-gray-200",
            "bg-white",
            "pl-10",
            "pr-4",
            "text-sm",
            "text-gray-700"
        );

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

    }

    applyTomStyle(packageSelect);
    applyTomStyle(statusSelect);
    applyTomStyle(paymentSelect);

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