"use client";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import { Label } from "@/Common/Label/Label";
import PageTitle from "@/Common/PageTitle";
import React, { useEffect, useState } from "react";
import { Breadcrumb, Button, Card, Col, Form, Row } from "react-bootstrap";
import { FaRegTrashAlt } from "react-icons/fa";
import HelperService from "@/Services/HelperService";
import CommonFunction from "@/Services/CommonFunction";
import WebService from "@/Services/WebService";
import { toast } from "react-toastify";
import { useParams, useRouter } from "next/navigation";

const AddEditSubscription = () => {
    const [compoLoader, setCompoLoader] = useState<boolean>(false);
    const [getBreadcrumb, setBreadcrumb] = useState<string>("Add Subscription");
    const [errFlag, setErrFlag] = useState(false);
    const [rentErrorFlag, setRentErrorFlag] = useState(false);
    const [buyErrorFlag, setBuyErrorFlag] = useState(false);
    const [operatorErrorFlag, setOperatorErrorFlag] = useState(false);
    const [primeErrorFlag, setPrimeErrorFlag] = useState(false);
    const { id } = useParams();
    const navigate = useRouter();
    const [discountAmountFlag, setDiscountAmountFlag] = useState<any>({});
    const [discountAmountTypeFlag, setDiscountAmountTypeFlag] = useState<any>("");
    const [rent, setRent] = useState<any>([
        {
            duration: "",
            amount: "",
            discount_amount: "",
            description: ""
        }
    ]);
    const [sell, setSell] = useState<any>([
        {
            duration: "",
            amount: "",
            discount_amount: "",
            description: ""
        }
    ]);
    const [operator, setOperator] = useState<any>([
        {
            duration: "",
            amount: "",
            discount_amount: "",
            description: ""
        }
    ]);
    const [prime, setPrime] = useState<any>([
        {
            duration: "",
            amount: "",
            discount_amount: "",
            description: ""
        }
    ]);
    const [subscriptionData, setSubscriptionData] = useState({
        name: "",
        tax_percent: "",
        RENTAL: [],
        SELLER: [],
        OPERATOR: [],
        PRIME: []
    })

    useEffect(() => {
        setSubscriptionData((prev: any) => ({
            ...prev,
            RENTAL: rent,
            SELLER: sell,
            PRIME: prime,
            OPERATOR: operator
        }))
    }, [rent, sell, operator, prime])

    useEffect(() => {
        if (id) {
            handleGetSubscriptionData();
            setBreadcrumb("Edit Subscription")
        }
    }, [id])

    const handleGetSubscriptionData = () => {
        setCompoLoader(true);
        return WebService.getAPI({
            action: `admin/subscriptions/${id}`,
            body: null,
            isShowError: true
        }).then((res: any) => {
            setCompoLoader(false);
            res.RENTAL ?
                setRent(res.RENTAL) :
                setRent([...rent, {
                    duration: "",
                    amount: "",
                    discount_amount: "",
                    description: ""
                }]);
            res.SELLER ?
                setSell(res.SELLER) :
                setSell([...sell, {
                    duration: "",
                    amount: "",
                    discount_amount: "",
                    description: ""
                }]);
            res.OPERATOR ?
                setOperator(res.OPERATOR) :
                setOperator([...operator, {
                    duration: "",
                    amount: "",
                    discount_amount: "",
                    description: ""
                }]);
            res.PRIME ?
                setPrime(res.PRIME) :
                setPrime([...prime, {
                    duration: "",
                    amount: "",
                    discount_amount: "",
                    description: ""
                }]);
            setSubscriptionData((prev: any) => ({
                ...prev,
                name: res.name,
                tax_percent: res.tax_percent
            }))
        }).catch((error: any) => {
            setCompoLoader(false);
            return false;
        })
    }

    const handleInputChange = (index: any, field: any, value: any, type: any) => {
        if (type === "rent" ) {
            setRentErrorFlag(false);
            let updateData: any = [...rent];
            updateData[index][field] = value
            setRent(updateData);
        } else if (type === "sell" ) {
            setBuyErrorFlag(false);
            let updateData: any = [...sell]
            updateData[index][field] = value;
            setSell(updateData);
        } else if (type === "operator" ) {
            setOperatorErrorFlag(false);
            let updateData: any = [...operator];
            updateData[index][field] = value;
            setOperator(updateData);
        } else if (type === "prime" ) {
            setPrimeErrorFlag(false);
            let updateData: any = [...prime];
            updateData[index][field] = value;
            setPrime(updateData);
        }
    }

    const handleDiscountChange = (index: number, value: any, type: any) => {
        if (type == "rent" ) {
            const updatedItems = [...rent];
            const discountAmount = parseFloat(value);
            const rentalAmount = parseFloat(updatedItems[index].amount);
            setDiscountAmountTypeFlag("rent");
            if (discountAmount > rentalAmount) {
                setDiscountAmountFlag((prevFlags: any) => ({
                    ...prevFlags,
                    [index]: true,
                }));
                setErrFlag(true);
            } else {
                setDiscountAmountFlag((prevFlags: any) => ({
                    ...prevFlags,
                    [index]: false,
                }));
                setErrFlag(false);
            }
            updatedItems[index].discount_amount = value;
            setRent(updatedItems);
        } else if (type == "sell" ) {
            const updatedItems = [...sell];
            const discountAmount = parseFloat(value);
            const rentalAmount = parseFloat(updatedItems[index].amount);
            setDiscountAmountTypeFlag("sell");

            if (discountAmount > rentalAmount) {
                setDiscountAmountFlag((prevFlags: any) => ({
                    ...prevFlags,
                    [index]: true,
                }));
                setErrFlag(true)
            } else {
                setDiscountAmountFlag((prevFlags: any) => ({
                    ...prevFlags,
                    [index]: false,
                }));
                setErrFlag(false)
            }
            updatedItems[index].discount_amount = value;
            setSell(updatedItems);
        } else if (type == "operator" ) {
            const updatedItems = [...operator];
            const discountAmount = parseFloat(value);
            const rentalAmount = parseFloat(updatedItems[index].amount);
            setDiscountAmountTypeFlag("operator");

            if (discountAmount > rentalAmount) {
                setDiscountAmountFlag((prevFlags: any) => ({
                    ...prevFlags,
                    [index]: true,
                }));
                setErrFlag(true)
            } else {
                setDiscountAmountFlag((prevFlags: any) => ({
                    ...prevFlags,
                    [index]: false,
                }));
                setErrFlag(false)
            }
            updatedItems[index].discount_amount = value;
            setOperator(updatedItems);
        } else if (type === "prime" ) {
            const updateData = [...prime];
            const discountAmount = parseFloat(value);
            const primeAmount = parseFloat(updateData[index].amount);
            setDiscountAmountFlag("prime");

            if (discountAmount > primeAmount) {
                setDiscountAmountFlag((prevFlag: any) => ({
                    ...prevFlag,
                    [index]: true
                }));
                setErrFlag(true)
            } else {
                setDiscountAmountFlag((prev: any) => ({
                    ...prev,
                    [index]: false
                }))
                setErrFlag(false);
            }
            updateData[index].discount_amount = value;
            setPrime(updateData);
        }
    };

    const remove = (index: any, type: any) => {
        if (type === "rent") {
            let updateRent = [...rent];
            let x = updateRent.filter((_: any, i: any) => i !== index);
            setRent(x);
        } else if (type === "sell") {
            const updateBuy = [...sell];
            let x = updateBuy.filter((_: any, i: any) => i !== index);
            setSell(x);
        } else if (type === "operator") {
            let updateOperator = [...operator];
            let x = updateOperator.filter((_: any, i: any) => i !== index);
            setOperator(x);
        } else if (type === "prime") {
            let updateData = [...prime];
            let x = updateData.filter((_: any, i: any) => i !== index);
            setPrime(x);
        }
    }

    const handleSubmit = () => {
        let Flag = false;
        let excluded = [""];

        if (HelperService.checkEmptyUndefinedNull(id)) {
            Flag = CommonFunction.checkFormEmptyFields(subscriptionData, excluded);
        } else {
            Flag = CommonFunction.checkFormEmptyFields(subscriptionData);
        }

        const checkEmptyFieldsInArray = (array: any[]) => {
            return array.some((item) => {
                return ((!item.duration) || (!item.amount) || (!item.discount_amount) || (!item.description));
            });
        };

        if (checkEmptyFieldsInArray(rent)) {
            setRentErrorFlag(true);
            Flag = true
        }

        if (checkEmptyFieldsInArray(sell)) {
            setBuyErrorFlag(true);
            Flag = true
        }

        if (checkEmptyFieldsInArray(operator)) {
            setOperatorErrorFlag(true);
            Flag = true
        }

        if (checkEmptyFieldsInArray(prime)) {
            setPrimeErrorFlag(true);
            Flag = true
        }

        if ((Flag) || (errFlag)) {
            setErrFlag(true);
            return;
        } else {
            setErrFlag(false);
        }

        if (HelperService.checkEmptyUndefinedNull(id)) {
            submitDetails(`admin/subscriptions/${id}`, "PUT", subscriptionData);
        } else {
            submitDetails(`admin/subscriptions`, "POST", subscriptionData);
        }
    };

    const submitDetails = (uri: string, method: string, data: any) => {
        WebService.addLoader("save");
        WebService.CommonApi({
            method: method,
            action: uri,
            body: data,
        }).then((res: any) => {
            WebService.removeLoader("save");
            if (res?.status) {
                toast.success(res?.message);
                navigate.push("/manage-user-subscription");
            } else {
                toast.error(res?.message);
            }
        }).catch((error: any) => {
            WebService.removeLoader("save");
            toast.error(error?.response?.data?.message);
        });
    }

    return (
        <>
            {compoLoader ? (
                <CompoLoader />
            ) : (
                <div className="page-properties pb-3">
                    <div className="nb-3">
                        <Breadcrumb>
                            <Breadcrumb.Item href="/manage-user-subscription">{" Subscription"}</Breadcrumb.Item>
                            <Breadcrumb.Item active>
                                {getBreadcrumb}
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    <Row className=" mb-lg-4 mb-3">
                        <Col lg={8} xs={8}>
                            <div className="d-flex gap-3 align-items-center">
                                <PageTitle
                                    title={getBreadcrumb}
                                    backArrow={true}
                                />
                            </div>
                        </Col>
                    </Row>
                    <Card className="card-style mb-lg-4 mb-3">
                        <Card.Header>
                            <h4 className="card-title text-white">{getBreadcrumb} </h4>
                        </Card.Header>
                        <Card.Body>
                            <Row className="w-100" >
                                <Col lg={6} xs={4} className="mb-3">
                                    <Form.Group className="mb-3">
                                        <Form.Label className="form-label">
                                            Subscription Name {" "} <span className="text-danger">*</span>
                                        </Form.Label>
                                        <Form.Control type="text" placeholder="Enter Name" value={subscriptionData?.name || ""} onChange={(e: any) => {
                                            setSubscriptionData((prevData: any) => ({
                                                ...prevData,
                                                name: e.target.value
                                            }));
                                        }
                                        } />
                                        {subscriptionData?.name == "" && errFlag && (
                                            <Label title="Please enter name" modeError={true} />
                                        )}
                                    </Form.Group>
                                </Col>
                                <Col lg={6} xs={4} className="mb-0">
                                    <Form.Group className="mb-3">
                                        <Form.Label className="form-label">
                                            Tax Percent (%) {" "} <span className="text-danger">*</span>
                                        </Form.Label>
                                        <Form.Control
                                            type="number"
                                            placeholder="Enter Tax Percent"
                                            value={subscriptionData?.tax_percent || ""}
                                            onChange={(e: any) => {
                                                setSubscriptionData((prevData: any) => ({
                                                    ...prevData,
                                                    tax_percent: e.target.value
                                                }));
                                            }
                                            } />
                                        {((subscriptionData?.tax_percent == "") || (subscriptionData?.tax_percent == null)) && errFlag && (
                                            <Label title="Please enter tax percent" modeError={true} />
                                        )}
                                    </Form.Group>
                                </Col>
                                <Col lg={12} className="d-flex justify-content-between align-items-center mb-3">
                                    <Form.Label className="form-label">
                                        Rent {" "} <span className="text-danger">*</span>
                                    </Form.Label>

                                    <Button
                                        style={{ float: "right" }}
                                        onClick={() => {
                                            setRent([...rent, {
                                                duration: "",
                                                amount: "",
                                                discount_amount: "",
                                                description: ""
                                            }])
                                        }}
                                    >
                                        Add Rent
                                    </Button>
                                </Col>
                                <Col lg={12}>
                                    <div className="table-style-2 sub-table">
                                        <table className="w-100 table border">
                                            <thead>
                                                <tr>
                                                    <th className="py-1 border-end">Duration</th>
                                                    <th className="py-1 border-end">Amount</th>
                                                    <th className="py-1 border-end">Discounted Amount </th>
                                                    <th className="py-1 border-end">Description</th>
                                                    <th className="py-1 border-end">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {rent && rent.map((item: any, index: any) => {
                                                    return (
                                                        <React.Fragment key={index}>
                                                            <tr>
                                                                <td>
                                                                    <Form.Select
                                                                        value={item?.duration || 0}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "duration", e.target.value, "rent");
                                                                        }} aria-label="Select Duration">
                                                                        <option value={""}>Select Duration</option>
                                                                        <option value={"MONTHLY"}>Monthly</option>
                                                                        <option value={"QUARTERLY"}>Quarterly</option>
                                                                        <option value={"HALF_YEARLY"}>Half year</option>
                                                                        <option value={"ANNUALLY"}>Annual</option>
                                                                    </Form.Select>
                                                                    {item[index]?.duration == "" && errFlag && (
                                                                        <Label title="Please enter duration" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td>
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Amount"
                                                                        value={item?.amount || ""}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "amount", e.target.value, "rent");
                                                                        }
                                                                        } />
                                                                    {item[index]?.amount == "" && errFlag && (
                                                                        <Label title="Please enter amount" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td className="text-center">
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Discounted amount"
                                                                        value={item?.discount_amount || ""}
                                                                        onChange={(e) => handleDiscountChange(index, e.target.value, "rent")}
                                                                    />
                                                                    {item[index]?.discount_amount == "" && errFlag && (
                                                                        <Label title="Please Enter Discounted amount" modeError={true} />
                                                                    )}
                                                                    {discountAmountFlag[index] && discountAmountTypeFlag == "rent" && (
                                                                        <Label
                                                                            title={`Discounted amount cannot be greater than rent amount `}
                                                                            modeError={true}
                                                                        />
                                                                    )}
                                                                </td>
                                                                <td>
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Description"
                                                                        value={item?.description || ""}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "description", e.target.value, "rent");
                                                                        }
                                                                        } />
                                                                    {item[index]?.description == "" && errFlag && (
                                                                        <Label title="Please enter description" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td className="text-center" style={{ padding: "20px" }}>
                                                                    {
                                                                        index !== 0 &&
                                                                        <FaRegTrashAlt
                                                                            className="cursor-pointer"
                                                                            onClick={() => remove(index, "rent")}
                                                                        />
                                                                    }
                                                                </td>
                                                            </tr>
                                                        </React.Fragment>
                                                    )
                                                })}
                                            </tbody>
                                        </table>
                                    </div>
                                </Col>
                                {
                                    errFlag && rentErrorFlag && (
                                        <Label
                                            title="Please fill all fields"
                                            modeError={true}
                                        />
                                    )
                                }
                                <hr />
                                <Col lg={12} className="d-flex justify-content-between align-items-center mb-3">
                                    <Form.Label className="form-label">
                                        Sell {" "} <span className="text-danger">*</span>
                                    </Form.Label>

                                    <Button
                                        style={{ float: "right" }}
                                        onClick={() => {
                                            setSell([...sell, {
                                                duration: "",
                                                amount: "",
                                                discount_amount: "",
                                                description: ""
                                            }])
                                        }}
                                    >
                                        Add Sell
                                    </Button>

                                </Col>
                                <Col lg={12}>
                                    <div className="table-style-2 sub-table">
                                        <table className="w-100 table border">
                                            <thead>
                                                <tr>
                                                    <th className="py-1 border-end">Duration</th>
                                                    <th className="py-1 border-end">Amount</th>
                                                    <th className="py-1 border-end">Discounted Amount</th>
                                                    <th className="py-1 border-end">Description</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {sell && sell.map((item: any, index: any) => {
                                                    return (
                                                        <React.Fragment key={index}>
                                                            <tr>
                                                                <td>
                                                                    <Form.Select
                                                                        value={item?.duration || 0}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "duration", e.target.value, "sell")
                                                                        }} aria-label="Select Status">
                                                                        <option value={""}>Select Duration</option>
                                                                        <option value={"MONTHLY"}>Monthly</option>
                                                                        <option value={"QUARTERLY"}>Quarterly</option>
                                                                        <option value={"HALF_YEARLY"}>Half year</option>
                                                                        <option value={"ANNUALLY"}>Annual</option>
                                                                    </Form.Select>
                                                                    {item[index]?.duration == "" && errFlag && (
                                                                        <Label title="Please enter duration" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td>
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Amount"
                                                                        value={item?.amount || ""}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "amount", e.target.value, "sell")
                                                                        }
                                                                        } />
                                                                    {item[index]?.amount == "" && errFlag && (
                                                                        <Label title="Please enter amount" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td className="text-center">
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Discounted amount"
                                                                        value={item?.discount_amount || ""}
                                                                        onChange={(e) => handleDiscountChange(index, e.target.value, "sell")}
                                                                    />
                                                                    {item[index]?.discount_amount == "" && errFlag && (
                                                                        <Label title="Please Enter Discounted amount" modeError={true} />
                                                                    )}
                                                                    {discountAmountFlag[index] && discountAmountTypeFlag == "sell" && (
                                                                        <Label
                                                                            title={`Discounted amount cannot be greater than sell amount `}
                                                                            modeError={true}
                                                                        />
                                                                    )}
                                                                </td>
                                                                <td>
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Description"
                                                                        value={item?.description || ""}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "description", e.target.value, "sell")
                                                                        }
                                                                        } />
                                                                    {item[index]?.description == "" && errFlag && (
                                                                        <Label title="Please enter description" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td style={{ padding: "20px" }}>
                                                                    {
                                                                        index !== 0 &&
                                                                        <FaRegTrashAlt
                                                                            className="cursor-pointer"
                                                                            onClick={() => remove(index, "sell")}
                                                                        />
                                                                    }
                                                                </td>
                                                            </tr>
                                                        </React.Fragment>
                                                    )
                                                })}
                                            </tbody>
                                        </table>
                                    </div>
                                </Col>
                                {
                                    errFlag && buyErrorFlag && (
                                        <Label
                                            title="Please fill all fields"
                                            modeError={true}
                                        />
                                    )
                                }
                                <hr />
                                <Col lg={12} className="d-flex justify-content-between align-items-center mb-3">
                                    <Form.Label className="form-label">
                                        Operator {" "} <span className="text-danger">*</span>
                                    </Form.Label>

                                    <Button
                                        style={{ float: "right" }}
                                        onClick={() => {
                                            setOperator([...operator, {
                                                duration: "",
                                                amount: "",
                                                discount_amount: "",
                                                description: ""
                                            }])
                                        }}
                                    >
                                        Add Operator
                                    </Button>
                                </Col>
                                <Col lg={12}>
                                    <div className="table-style-2 sub-table">
                                        <table className="w-100 table border">
                                            <thead>
                                                <tr>
                                                    <th className="py-1 border-end">Duration</th>
                                                    <th className="py-1 border-end">Amount</th>
                                                    <th className="py-1 border-end">Discounted Amount</th>
                                                    <th className="py-1 border-end">Description</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {operator && operator.map((item: any, index: any) => {
                                                    return (
                                                        <React.Fragment key={index}>
                                                            <tr>
                                                                <td>
                                                                    <Form.Select
                                                                        value={item?.duration || 0}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "duration", e.target.value, "operator")
                                                                        }} aria-label="Select Status">
                                                                        <option value={""}>Select Duration</option>
                                                                        <option value={"MONTHLY"}>Monthly</option>
                                                                        <option value={"QUARTERLY"}>Quarterly</option>
                                                                        <option value={"HALF_YEARLY"}>Half year</option>
                                                                        <option value={"ANNUALLY"}>Annual</option>
                                                                    </Form.Select>
                                                                    {item[index]?.duration == "" && errFlag && (
                                                                        <Label title="Please enter duration" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td>
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Amount"
                                                                        value={item?.amount || ""}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "amount", e.target.value, "operator");
                                                                        }
                                                                        } />
                                                                    {item[index]?.amount == "" && errFlag && (
                                                                        <Label title="Please enter amount" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td className="text-center">
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Discounted amount"
                                                                        value={item?.discount_amount || ""}
                                                                        onChange={(e) => handleDiscountChange(index, e.target.value, "operator")}
                                                                    />
                                                                    {item[index]?.discount_amount == "" && errFlag && (
                                                                        <Label title="Please Enter Discounted amount" modeError={true} />
                                                                    )}
                                                                    {discountAmountFlag[index] && discountAmountTypeFlag == "operator" && (
                                                                        <Label
                                                                            title={`Discounted amount cannot be greater than operator amount `}
                                                                            modeError={true}
                                                                        />
                                                                    )}
                                                                </td>
                                                                <td>
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Description"
                                                                        value={item?.description || ""}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "description", e.target.value, "operator")
                                                                        }
                                                                        } />
                                                                    {item[index]?.description == "" && errFlag && (
                                                                        <Label title="Please enter description" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td style={{ padding: "20px" }}>
                                                                    {
                                                                        index !== 0 &&
                                                                        <FaRegTrashAlt
                                                                            className="cursor-pointer"
                                                                            onClick={() => remove(index, "operator")}
                                                                        />
                                                                    }
                                                                </td>
                                                            </tr>
                                                        </React.Fragment>
                                                    )
                                                })}
                                            </tbody>
                                        </table>
                                    </div>
                                </Col>
                                {
                                    errFlag && operatorErrorFlag && (
                                        <Label
                                            title="Please fill all fields"
                                            modeError={true}
                                        />
                                    )
                                }
                                <hr />
                                <Col lg={12} className="d-flex justify-content-between align-items-center mb-3">
                                    <Form.Label className="form-label">
                                        Prime {" "} <span className="text-danger">*</span>
                                    </Form.Label>

                                    <Button
                                        style={{ float: "right" }}
                                        onClick={() => {
                                            setPrime([...prime, {
                                                duration: "",
                                                amount: "",
                                                discount_amount: "",
                                                description: ""
                                            }])
                                        }}
                                    >
                                        Add Prime
                                    </Button>
                                </Col>
                                <Col lg={12}>
                                    <div className="table-style-2 sub-table">
                                        <table className="w-100 table border">
                                            <thead>
                                                <tr>
                                                    <th className="py-1 border-end">Duration</th>
                                                    <th className="py-1 border-end">Amount</th>
                                                    <th className="py-1 border-end">Discounted Amount</th>
                                                    <th className="py-1 border-end">Description</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {prime && prime.map((item: any, index: any) => {
                                                    return (
                                                        <React.Fragment key={index}>
                                                            <tr>
                                                                <td>
                                                                    <Form.Select
                                                                        value={item?.duration || 0}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "duration", e.target.value, "prime")
                                                                        }} aria-label="Select Status">
                                                                        <option value={""}>Select Duration</option>
                                                                        <option value={"MONTHLY"}>Monthly</option>
                                                                        <option value={"QUARTERLY"}>Quarterly</option>
                                                                        <option value={"HALF_YEARLY"}>Half year</option>
                                                                        <option value={"ANNUALLY"}>Annual</option>
                                                                    </Form.Select>
                                                                    {item[index]?.duration == "" && errFlag && (
                                                                        <Label title="Please enter duration" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td>
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Amount"
                                                                        value={item?.amount || ""}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "amount", e.target.value, "prime");
                                                                        }
                                                                        } />
                                                                    {item[index]?.amount == "" && errFlag && (
                                                                        <Label title="Please enter amount" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td className="text-center">
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Discounted amount"
                                                                        value={item?.discount_amount || ""}
                                                                        onChange={(e) => handleDiscountChange(index, e.target.value, "prime")}
                                                                    />
                                                                    {item[index]?.discount_amount == "" && errFlag && (
                                                                        <Label title="Please Enter Discounted amount" modeError={true} />
                                                                    )}
                                                                    {discountAmountFlag[index] && discountAmountTypeFlag == "prime" && (
                                                                        <Label
                                                                            title={`Discounted amount cannot be greater than prime amount `}
                                                                            modeError={true}
                                                                        />
                                                                    )}
                                                                </td>
                                                                <td>
                                                                    <Form.Control
                                                                        type="text"
                                                                        placeholder="Enter Description"
                                                                        value={item?.description || ""}
                                                                        onChange={(e: any) => {
                                                                            handleInputChange(index, "description", e.target.value, "prime")
                                                                        }
                                                                        } />
                                                                    {item[index]?.description == "" && errFlag && (
                                                                        <Label title="Please enter description" modeError={true} />
                                                                    )}
                                                                </td>
                                                                <td style={{ padding: "20px" }}>
                                                                    {
                                                                        index !== 0 &&
                                                                        <FaRegTrashAlt
                                                                            className="cursor-pointer"
                                                                            onClick={() => remove(index, "prime")}
                                                                        />
                                                                    }
                                                                </td>
                                                            </tr>
                                                        </React.Fragment>
                                                    )
                                                })}
                                            </tbody>
                                        </table>
                                    </div>
                                </Col>
                                {
                                    errFlag && operatorErrorFlag && (
                                        <Label
                                            title="Please fill all fields"
                                            modeError={true}
                                        />
                                    )
                                }
                                <hr />
                                <Col lg={12} xs={12} className="mx-auto">
                                    <Button type="button" className="btn btn-brand" onClick={() => { window.history.back() }}>Cancel</Button>
                                    <Button type="button" id="save" className="btn btn-brand mx-2" onClick={handleSubmit}>Submit</Button>
                                </Col>
                            </Row>
                        </Card.Body>
                    </Card>
                </div >
            )}
        </>
    )
}

export default AddEditSubscription;