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

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

    <!-- Header -->
    <div class="flex justify-between items-center mb-5">
        <h1 class="text-2xl font-bold text-slate-900">
            Add Membership
        </h1>

        <a href="puresaas_membership_plan.php"
            class="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 rounded-xl shadow-sm hover:bg-slate-50 transition">
            <i class="ri-arrow-left-line"></i>
            Back
        </a>
    </div>

    <!-- Card -->
    <div class="bg-white border border-slate-200 rounded-2xl p-6">

        <h2 class="text-xl font-bold text-slate-900 mb-5">
            Membership Details
        </h2>

        <form id="membershipForm">

            <div class="grid md:grid-cols-2 gap-5">
                
<!-- Product Name -->
<div>
    <label class="block mb-2 text-sm font-medium text-slate-700">
        Product Name <span class="text-red-500">*</span>
    </label>

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

        <select id="productSelect">
            <option value="">Select Product</option>
            <option value="PureEstate">PureEstate</option>
            <option value="BuilderPro">BuilderPro</option>
            <option value="SocietyPro">SocietyPro</option>
        </select>
    </div>
</div>

                <!-- Plan Name -->
                <div>
                    <label class="block mb-2 text-sm font-medium text-slate-700">
                        Plan Name <span class="text-red-500">*</span>
                    </label>

                    <input type="text"
                        placeholder="Enter plan name"
                        class="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">
                </div>

                <!-- Plan Price -->
                <div>
                    <label class="block mb-2 text-sm font-medium text-slate-700">
                        Plan Price <span class="text-red-500">*</span>
                    </label>

                    <input type="number"
                        placeholder="Enter plan price"
                        class="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">
                </div>

                <!-- Duration -->
                <div>
                    <label class="block mb-2 text-sm font-medium text-slate-700">
                        Duration <span class="text-red-500">*</span>
                    </label>

                    <input type="text"
                        placeholder="Enter duration"
                        class="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">
                </div>

                <!-- Status -->
                <div>
                    <label class="block mb-2 text-sm font-medium text-slate-700">
                        Status <span class="text-red-500">*</span>
                    </label>

                    <select
                        class="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">
                        <option>Select Status</option>
                        <option>Active</option>
                        <option>Inactive</option>
                    </select>
                </div>

                <!-- Plan Features -->
                <div class="md:col-span-2">
                    <label class="block mb-2 text-sm font-medium text-slate-700">
                        Plan Features <span class="text-red-600">*</span>
                    </label>

                    <div id="featuresContainer">

                        <div class="flex gap-2 mb-2 feature-row">

                            <input type="text"
                                name="features[]"
                                placeholder="Enter feature"
                                class="flex-1 h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">

                            <button type="button"
                                id="addFeature"
                                class="w-12 h-12 flex items-center justify-center rounded-xl bg-indigo-600 text-white hover:bg-indigo-700">
                                <i class="ri-add-line text-lg"></i>
                            </button>

                        </div>

                    </div>
                </div>

            </div>

            <!-- Buttons -->
            <div class="flex justify-end gap-3 mt-8">

                <a href="pureestate_plans.php"
                    class="px-6 py-2.5 border border-slate-300 rounded-xl hover:bg-slate-50 transition">
                    Cancel
                </a>

                <button type="submit"
                    class="px-8 py-2.5 text-white rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 shadow-md hover:opacity-90 transition">
                    Save
                </button>

            </div>

        </form>

    </div>

</div>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const container = document.getElementById("featuresContainer");

    document.addEventListener("click", function (e) {

        if (e.target.closest("#addFeature")) {

            const row = document.createElement("div");

            row.className = "flex gap-2 mb-2 feature-row";

            row.innerHTML = `
                <input type="text"
                    name="features[]"
                    placeholder="Enter feature"
                    class="flex-1 h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">

                <button type="button"
                    class="removeFeature w-12 h-12 flex items-center justify-center rounded-xl bg-red-500 text-white hover:bg-red-600">
                    <i class="ri-delete-bin-line"></i>
                </button>
            `;

            container.appendChild(row);
        }

        if (e.target.closest(".removeFeature")) {
            e.target.closest(".feature-row").remove();
        }

    });

});
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const form = document.getElementById("membershipForm");

    form.addEventListener("submit", function (e) {

        e.preventDefault();

        const planName = document.querySelector('input[placeholder="Enter plan name"]').value.trim();
        const planPrice = document.querySelector('input[placeholder="Enter plan price"]').value.trim();
        const duration = document.querySelector('input[placeholder="Enter duration"]').value.trim();
        const status = document.querySelector("select").value;
        const features = document.querySelectorAll('input[name="features[]"]');

        // Plan Name
        if (planName === "") {
            Swal.fire({
                icon: "error",
                title: "Missing Information",
                text: "Please enter Plan Name.",
                width: '350px',
                padding: '1rem'
            });
            return;
        }

        // Plan Price
        if (planPrice === "") {
            Swal.fire({
                icon: "error",
                title: "Missing Information",
                text: "Please enter Plan Price.", 
                width: '350px',
                padding: '1rem'
            });
            return;
        }

        if (parseFloat(planPrice) <= 0) {
            Swal.fire({
                icon: "error",
                title: "Missing Information",
                text: "Plan Price must be greater than 0.",
                width: '350px',
                padding: '1rem'
                
            });
            return;
        }

        // Duration
        if (duration === "") {
            Swal.fire({
                icon: "error",
                title: "Missing Information",
                text: "Please enter Duration.",
                 width: '350px',
                padding: '1rem'
            });
            return;
        }

        if (parseInt(duration) <= 0) {
            Swal.fire({
                icon: "error",
                title: "Missing Information",
                text: "Duration must be greater than 0.",
                 width: '350px',
                padding: '1rem'
            });
            return;
        }

        // Status
        if (status === "Select Status") {
            Swal.fire({
                icon: "error",
                title: "Missing Information",
                text: "Please select Status.",
                 width: '350px',
                padding: '1rem'
            });
            return;
        }

        // Features
        let featureValid = false;

        features.forEach(feature => {
            if (feature.value.trim() !== "") {
                featureValid = true;
            }
        });

        if (!featureValid) {
            Swal.fire({
                icon: "error",
                title: "Missing Information",
                text: "Please add at least one Plan Feature.",
                 width: '350px',
                padding: '1rem'
            });
            return;
        }

        // Success
        Swal.fire({
            icon: "success",
            title: "Success!",
            text: "Membership saved successfully.",
            confirmButtonColor: "#4f46e5",
             width: '350px',
                padding: '1rem'
        });

        // form.submit(); // Backend connect thai jai pachi uncomment karjo

    });

});
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const productSelect = new TomSelect("#productSelect", {
        create: false,
        maxOptions: 10,
        placeholder: "Search Product...",
        openOnFocus: true
    });

    productSelect.control.classList.add(
        "h-12",
        "rounded-xl",
        "border",
        "border-slate-300",
        "pl-10", // icon માટે space
        "text-sm"
    );

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

});
</script>

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