<?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">
        Membership Plans
    </h1>
    <p class="text-sm text-gray-500">
        Manage all membership plans from here
    </p>
</div>

<!-- Actions -->
<div class="flex flex-col sm:flex-row gap-3">
    <!-- Show Entries -->
    <div class="flex items-center gap-2">

        <span class="text-sm text-gray-500">Show</span>

        <select id="pageSize"
            class="border border-gray-200 rounded-lg px-3 py-2 text-sm">
            <option value="5">5</option>
            <option value="10" selected>10</option>
            <option value="25">25</option>
            <option value="50">50</option>
        </select>

    </div>

<div class="relative">
    
    <i class="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-lg"></i>

    <input
        type="text"
        placeholder="Search here..."
        class="w-full sm:w-[220px] h-11 pl-10 pr-4 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none text-sm">

</div>

    <!-- Add Membership Button -->
    <a href="puresaas_add_membership_plan.php"
        class="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition-all duration-200 text-sm font-medium">
        <i class="ri-add-line text-lg"></i>
        Add Membership
    </a>

</div>

</div>

<!-- Product Chips -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-x-auto overflow-y-hidden mb-5">
    <div class="p-4 border-b border-gray-200">

        <div class="flex flex-wrap gap-2">

            <button onclick="filterProduct('PureEstate')"
                class="product-chip px-4 py-2 rounded-xl border border-blue-500 bg-white text-blue-700 text-sm font-medium">
                PureEstate <span class="text-blue-700">(1)</span>
            </button>

            <button onclick="filterProduct('BuilderPro')"
                class="product-chip px-4 py-2 rounded-xl border border-orange-200 bg-white text-orange-500 text-sm font-medium">
                BuilderPro <span class="text-orange-500">(1)</span>
            </button>

            <button onclick="filterProduct('SocietyPro')"
                class="product-chip px-4 py-2 rounded-xl border border-green-200 bg-white text-green-700 text-sm font-medium">
                SocietyPro <span class="text-green-700">(1)</span>
            </button>

            <button onclick="filterProduct('all')"
                class="product-chip px-4 py-2 rounded-xl border border-indigo-500 bg-indigo-50 text-indigo-700 text-sm font-medium">
                All <span class="text-indigo-700">(3)</span>
            </button>

        </div>

    </div>
</div>

<!-- Product Chips -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-x-auto overflow-y-hidden mb-5">
    <div class="p-4 border-b border-gray-200">
        <div class="flex flex-wrap gap-2">
                <button onclick="filterStatus('inactive')"
                    class="px-4 py-2 rounded-xl border border-yellow-200 bg-yellow-50 text-yellow-700 text-sm font-medium">
                    <i class="ri-close-circle-line mr-1"></i>
                    Inactive
                </button>
        
                <button onclick="filterStatus('active')"
                    class="px-4 py-2 rounded-xl border border-green-200 bg-green-50 text-green-700 text-sm font-medium">
                    <i class="ri-checkbox-circle-line mr-1"></i>
                    Active
                </button>
        
                <button onclick="filterStatus('all')"
                    class="px-4 py-2 rounded-xl border border-indigo-200 bg-indigo-50 text-indigo-700 text-sm font-medium">
                    <i class="ri-apps-line mr-1"></i>
                    All
                </button>
        </div>
    </div>
</div>

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

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

                <!-- Table Head -->
                <thead class="bg-white border-b border-gray-200">

                   <tr class="text-left">

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


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

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

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

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

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

</tr>

                </thead>

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

    <!-- Row 1 -->
    <tr class="hover:bg-gray-50" data-product="PureEstate" data-status="active">
        <td class="px-6 py-4 whitespace-nowrap">1</td>

        <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
            PureEstate
        </td>
        
        <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
            Basic Plan
        </td>

        <td class="px-6 py-4 whitespace-nowrap">
            ₹9,999
        </td>

        <td class="px-6 py-4 whitespace-nowrap">
            1 Year
        </td>

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

        <td class="px-6 py-4 whitespace-nowrap text-center">
            <div class="flex justify-center gap-2">
                <a href="puresaas_view_membership_plans.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="pureestate_edit_plans.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>

    <!-- Row 2 -->
<tr class="hover:bg-gray-50" data-product="BuilderPro" data-status="active">
        <td class="px-6 py-4 whitespace-nowrap">2</td>
        
        <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
            BuilderPro
        </td>

        <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
            Silver Plan
        </td>

        <td class="px-6 py-4 whitespace-nowrap">
            ₹19,999
        </td>

        <td class="px-6 py-4 whitespace-nowrap">
            2 Years
        </td>

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

        <td class="px-6 py-4 whitespace-nowrap text-center">
            <div class="flex justify-center gap-2">
                <a href="puresaas_view_membership_plans.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="pureestate_edit_plans.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>

    <!-- Row 3 -->
<tr class="hover:bg-gray-50" data-product="SocietyPro"  data-status="inactive">
        <td class="px-6 py-4 whitespace-nowrap">3</td>
        
        <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
            SocietyPro
        </td>

        <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
            Gold Plan
        </td>

        <td class="px-6 py-4 whitespace-nowrap">
            ₹29,999
        </td>

        <td class="px-6 py-4 whitespace-nowrap">
            3 Years
        </td>

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

        <td class="px-6 py-4 whitespace-nowrap text-center">
            <div class="flex justify-center gap-2">
                <a href="puresaas_view_membership_plans.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="pureestate_edit_plans.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>
    
    <tr class="hover:bg-gray-50" data-product="BuilderPro" data-status="inactive">
    <td class="px-6 py-4 whitespace-nowrap">4</td>

    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
        BuilderPro
    </td>

    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
        Starter Plan
    </td>

    <td class="px-6 py-4 whitespace-nowrap">
        ₹14,999
    </td>

    <td class="px-6 py-4 whitespace-nowrap">
        1 Year
    </td>

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

    <td class="px-6 py-4 whitespace-nowrap text-center">
        <div class="flex justify-center gap-2">
            <a href="puresaas_view_membership_plans.php" class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                <i class="ri-eye-line"></i>
            </a>
            <a href="pureestate_edit_plans.php" class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                <i class="ri-edit-line"></i>
            </a>
            <button class="w-9 h-9 rounded-lg bg-red-50 text-red-600 flex items-center justify-center">
                <i class="ri-delete-bin-line"></i>
            </button>
        </div>
    </td>
</tr>

<tr class="hover:bg-gray-50" data-product="SocietyPro" data-status="active">
    <td class="px-6 py-4 whitespace-nowrap">5</td>

    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
        SocietyPro
    </td>

    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
        Premium Plan
    </td>

    <td class="px-6 py-4 whitespace-nowrap">
        ₹24,999
    </td>

    <td class="px-6 py-4 whitespace-nowrap">
        2 Years
    </td>

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

    <td class="px-6 py-4 whitespace-nowrap text-center">
        <div class="flex justify-center gap-2">
            <a href="puresaas_view_membership_plans.php" class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                <i class="ri-eye-line"></i>
            </a>
            <a href="pureestate_edit_plans.php" class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                <i class="ri-edit-line"></i>
            </a>
            <button class="w-9 h-9 rounded-lg bg-red-50 text-red-600 flex items-center justify-center">
                <i class="ri-delete-bin-line"></i>
            </button>
        </div>
    </td>
</tr>

<tr class="hover:bg-gray-50" data-product="PureEstate" data-status="inactive">
    <td class="px-6 py-4 whitespace-nowrap">6</td>

    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
        PureEstate
    </td>

    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-800">
        Enterprise Plan
    </td>

    <td class="px-6 py-4 whitespace-nowrap">
        ₹39,999
    </td>

    <td class="px-6 py-4 whitespace-nowrap">
        3 Years
    </td>

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

    <td class="px-6 py-4 whitespace-nowrap text-center">
        <div class="flex justify-center gap-2">
            <a href="puresaas_view_membership_plans.php" class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">
                <i class="ri-eye-line"></i>
            </a>
            <a href="pureestate_edit_plans.php" class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                <i class="ri-edit-line"></i>
            </a>
            <button class="w-9 h-9 rounded-lg bg-red-50 text-red-600 flex items-center justify-center">
                <i class="ri-delete-bin-line"></i>
            </button>
        </div>
    </td>
</tr>


</tbody>

            </table>

        </div>

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

            <!-- Left -->
            <p class="text-sm text-gray-500">
                Showing 1 to 4 of 10 demo
            </p>

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

                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition">
                    <i class="ri-arrow-left-s-line"></i>
                </button>

                <button
                    class="w-9 h-9 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium shadow-md">
                    1
                </button>

                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                    2
                </button>

                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                    3
                </button>

                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                    4
                </button>

                <button class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition">
                    <i class="ri-arrow-right-s-line"></i>
                </button>

            </div>

        </div>

    </div>

</div>


<script>
    function deleteRow(button) {

        Swal.fire({

            title: "Delete Record?",
            text: "This row will be deleted.",
            icon: "warning",

            width: "350px",
            padding: "1rem",

            showCancelButton: true,
            scrollbarPadding: false,
            confirmButtonText: "Delete",
            cancelButtonText: "Cancel",

            confirmButtonColor: "#2563eb",
            cancelButtonColor: "#ef4444",

            customClass: {

                popup: "rounded-2xl",
                title: "text-lg font-semibold",
                htmlContainer: "text-sm text-gray-500",
                confirmButton: "px-4 py-2 rounded-lg text-sm",
                cancelButton: "px-4 py-2 rounded-lg text-sm"

            }

        }).then((result) => {

            if (result.isConfirmed) {

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

                Swal.fire({

                    icon: "success",
                    title: "Deleted!",
                    text: "Record removed successfully.",

                    width: "350px",
                    padding: "1rem",

                    showConfirmButton: false,
                    timer: 1400

                });

            }

        });

    }

</script>

<script>

let currentProduct = "PureEstate";
let currentStatus = "inactive";

function applyFilters() {

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

    rows.forEach(row => {

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

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

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

    });
}

function filterProduct(product) {

    currentProduct = product;
    applyFilters();

}

function filterStatus(status) {

    currentStatus = status;
    applyFilters();

}

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

    applyFilters();

});

</script>

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