import React, { useState, useEffect } from "react";
import Button from '@mui/material/Button';

import { AiOutlineEdit } from "react-icons/ai";
import { getCookie } from 'react-use-cookie';
import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid';
import axios from "axios";
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import FormControl from '@mui/material/FormControl';
import TextField from '@mui/material/TextField';
import AccountCircle from '@mui/icons-material/AccountCircle';
import PhoneIcon from '@mui/icons-material/Phone'
import EmailIcon from '@mui/icons-material/Email'
import HomeIcon from '@mui/icons-material/Home'
import { Button2, Form, FormGroup, Label } from "reactstrap";
import { faBullseye } from "@fortawesome/fontawesome-free-solid";
import tick_ok from "../mysy_img/tick_OK.png";
import tick_ko from "../mysy_img/tick_KO.png";
import { useHistory } from "react-router-dom";
import CheckOut from "./CheckOut";
import PaymentMethod from "./PaymentMethode";
import { IoAddCircleOutline, IoCloseCircleOutline } from "react-icons/io5";
import fileDownload from 'js-file-download'
import PayementComponent_Carte from "./PaymentMethode_Carte"
import img_logo_stripe from "./../mysy_img/logo-stripe-secure.png";
import SendIcon from '@mui/icons-material/Send';
import { confirmAlert } from 'react-confirm-alert'; // Import
import { RiAddCircleLine } from "react-icons/ri";
import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip } from 'react-tooltip'
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import { TfiControlBackward } from "react-icons/tfi";
import { FcInfo } from "react-icons/fc";

import check_img_check_17 from "../img_new_design_2025/check_17.png";
import check_ko_fond_gris from "../img_new_design_2025/check_ko_fond_gris.png";
import './tarif_head_automatic_files/detail.css';

import PricingPlanCard from './tarif_head_automatic_files/PricingPlanCard';
import PricingDescription from './tarif_head_automatic_files/PricingDescription';


import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
import { PiTextUnderline } from "react-icons/pi";

function Abonnement(props) {

    const [myApiResponse, setmyApiResponse] = useState("");
    const [result, setResult] = useState("");
    const [menu, setmenu] = useState("default");
    const [fields1desabled, setfields1desabled] = useState(true);
    const [periode, setperiode] = useState("Mensuel");
    const [testval, settestval] = useState();
    const [gotocheckout, setgotocheckout] = useState("0");
    const [selectedpacks, setselectedpacks] = useState("");
    const [currentpack, setcurrentpack] = useState(props.currentpack);
    const [currentpack2, setcurrentpack2] = useState("");
    const [parnternbformation, setparnternbformation] = useState("");

    const columns = [
        { field: 'id', headerName: 'id', hide: true },
        { field: 'num_facture', headerName: 'Num Facture', width: 200, flex: 1 },
        { field: 'client_nom', headerName: 'Client', width: 200, flex: 1 },
        { field: 'montant_ht', headerName: 'Montant HT €', width: 200, flex: 1 },
        { field: 'montant_ttc', headerName: 'Montant TTC €', width: 100, flex: 1 },
        { field: 'reduction', headerName: 'Discount', width: 150, flex: 1 },
        { field: 'date_facture', headerName: 'Date Facture', width: 150, flex: 1 },
        { field: 'mode_payement', headerName: 'Mode paiement', width: 150, flex: 1 },
        { field: 'date_payement', headerName: 'Date paiement', width: 150, flex: 1 },
        {
            field: "lien_pdf", headerName: 'Télécharger',
            renderCell: (cellValues) => {
                return (

                    <Button

                        onClick={(event) => {
                            handleClick(event, cellValues);
                        }}
                    >
                        <AiOutlineEdit />

                    </Button>

                );
            }
        }

    ]

    function handleClick(event, cellValues) {

        var nom_facture = cellValues.row.num_facture + ".pdf";
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
        const stored_cookie = getCookie('tokenmysypart');


        var num_facture = cellValues.row.num_facture;
        var url = process.env.REACT_APP_API_URL + "myclass/api/GetCustomerInvoice/" + stored_cookie + "/" + num_facture;

        axios.get(url, { responseType: 'blob', },)
            .then((res) => {
                fileDownload(res.data, nom_facture)
            })
    }



    const [selectionModel, setSelectionModel] = React.useState([]);
    const [rowss, setRows] = useState([]);
    const [tableData, setTableData] = useState([])

    function GetInvoices(event) {

        var form = new FormData();


        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);

        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_invoice_by_customer/";


        fetch(myurl,
            {
                method: 'POST',
                body: form,
            })
            .then((data) => data.json())
            .then((data) => {
                //console.log('Success:', data['message'], "data['status'] = ", data['status']);
                setTableData(data['message']);
                setRows(data['message']);
                if (String(data['status']) === String("false")) {
                    //console.log("erreur rrrr:" + data['status'])
                    setmyApiResponse("False");

                }
                else if (String(data['status']) === String("Err_Connexion")) {
                    alert('Erreur: ' + data['message']);
                    history.push("/Connexion");
                    return;
                }
                else {
                    setmyApiResponse("True");
                    setdisplay_alert_mysy("1");
                    setalert_message(data['message']);
                    setalert_type("error");
                }

            }).catch((error) => {
                console.error('Error:', error);
                setmyApiResponse("false");
            });

    }

    const [paymentmode, setpaymentmode] = useState([]);
    const [paymentmodeapi, setpaymentmodeapi] = useState([]);
    const [paymentmode_nb_carte, setpaymentmode_nb_carte] = useState();

    function GetPayementMode(event) {

        var form = new FormData();


        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);

        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_payement_mode/";


        fetch(myurl,
            {
                method: 'POST',
                body: form,
            })
            .then((data) => data.json())
            .then((data) => {
                //console.log('LAAAAAAAAA  Success:', data['message'], "data['status'] = ", data['status'], " nb_carte", data['nb_carte']);

                if (String(data['status']) === String("true")) {

                    setpaymentmodeapi("True");
                    setpaymentmode_nb_carte(data['nb_carte']);

                    if (parseInt(data['nb_carte']) > 0 &&
                        data['message'] && data['message'][0] &&
                        Object.keys(data['message'][0]).length > 0) {
                        setpaymentmode(data['message']);
                        //setnew_mode_payement("0");
                    } else {
                        setpaymentmode([]);
                    }


                }
                else if (String(data['status']) === String("Err_Connexion")) {
                    //  alert('Erreur: ' + data['message']);
                    setdisplay_alert_mysy("1");
                    setalert_message(data['message']);
                    setalert_type("error");
                    history.push("/Connexion");
                    return;
                }
                else {
                    //console.log("erreur rrrr:" + data['status'])
                    setpaymentmodeapi("True");
                    setpaymentmode_nb_carte('0')


                }


            }).catch((error) => {
                console.error('GetPayementMode : Error:', error);
                setpaymentmodeapi("False");
            });

    }


    function menu_defaut() {
        setmenu("default");
    }

    const [new_mode_payement, setnew_mode_payement] = useState("");
    function menu_paymentmethode() {
        setmenu("paymentmethode");
        setnew_mode_payement("1");
    }

    function menu_paymentmethode_close() {
        setnew_mode_payement("");
    }


    function menu_info() {
        setmenu("info");
        getCurrentUserData();
        GetPayementMode();
    }

    function Clik_bton_mensuel(e) {
        if (document.getElementsByName("bton_mensuel") && document.getElementsByName("bton_mensuel")[0]) {
            document.getElementsByName("bton_mensuel")[0].style.backgroundColor = "#81BC3A";
            document.getElementsByName("bton_mensuel")[0].style.color = "#FFF%";
            document.getElementsByName("bton_mensuel")[0].style.opacity = "100%";
        }

        if (document.getElementsByName("bton_annuel") && document.getElementsByName("bton_annuel")[0]) {
            document.getElementsByName("bton_annuel")[0].style.backgroundColor = "#F8F9F9";
            document.getElementsByName("bton_annuel")[0].style.color = "#212529";
            document.getElementsByName("bton_annuel")[0].style.opacity = "80%";
        }

        if (document.getElementsByName("bton_mensuel2") && document.getElementsByName("bton_mensuel2")[0]) {
            document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#81BC3A";
            document.getElementsByName("bton_mensuel2")[0].style.color = "#FFF%";
            document.getElementsByName("bton_mensuel2")[0].style.opacity = "100%";
        }

        if (document.getElementsByName("bton_annuel2") && document.getElementsByName("bton_annuel2")[0]) {
            document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#F8F9F9";
            document.getElementsByName("bton_annuel2")[0].style.color = "#212529";
            document.getElementsByName("bton_annuel2")[0].style.opacity = "80%";
        }

        setperiode("Mensuel");
        setabonnement_periodicite("Mensuel");
    }

    function Clik_bton_annuel(e) {
        if (document.getElementsByName("bton_annuel") && document.getElementsByName("bton_annuel")[0]) {
            document.getElementsByName("bton_annuel")[0].style.backgroundColor = "#81BC3A";
            document.getElementsByName("bton_annuel")[0].style.color = "#FFF%";
            document.getElementsByName("bton_annuel")[0].style.opacity = "100%";
        }

        if (document.getElementsByName("bton_mensuel") && document.getElementsByName("bton_mensuel")[0]) {
            document.getElementsByName("bton_mensuel")[0].style.backgroundColor = "#F8F9F9";
            document.getElementsByName("bton_mensuel")[0].style.color = "#212529";
            document.getElementsByName("bton_mensuel")[0].style.opacity = "80%";
        }

        if (document.getElementsByName("bton_annuel2") && document.getElementsByName("bton_annuel2")[0]) {
            document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#81BC3A";
            document.getElementsByName("bton_annuel2")[0].style.color = "#FFF%";
            document.getElementsByName("bton_annuel2")[0].style.opacity = "100%";
        }

        if (document.getElementsByName("bton_mensuel2") && document.getElementsByName("bton_mensuel2")[0]) {
            document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#F8F9F9";
            document.getElementsByName("bton_mensuel2")[0].style.color = "#212529";
            document.getElementsByName("bton_mensuel2")[0].style.opacity = "80%";
        }

        setperiode("Annuel");
        setabonnement_periodicite("Annuel");
    }




    // recuperation et gestion  du token utilisateur 
    const history = useHistory();
    const stored_part = getCookie('tokenmysypart');
    if (!stored_part || stored_part.length <= 0) {
        history.push("/PartnerLogin");
    }

    const [RecordData_api, setRecordData_api] = useState();
    const [RecordData_result, setRecordData_result] = useState();
    const [RecordData_message, setRecordData_message] = useState();

    function RecordData() {
        const formData = new FormData();
        const url = process.env.REACT_APP_API_URL + "myclass/api/update_partner_account/";

        var nom = document.getElementsByName("nom")[0].value;
        var vat_num = document.getElementsByName("vat_num")[0].value;
        var telephone = document.getElementsByName("telephone")[0].value;
        var email = document.getElementsByName("email")[0].value;
        var adr_street = document.getElementsByName("adr_street")[0].value;
        var adr_zip = document.getElementsByName("adr_zip")[0].value;
        var adr_city = document.getElementsByName("adr_city")[0].value;
        var adr_country = document.getElementsByName("adr_country")[0].value;

        formData.append('partner_account_id', partner_account_id);
        formData.append('token', stored_part);
        formData.append('invoice_vat_num', vat_num);
        formData.append('invoice_nom', nom);
        formData.append('invoice_adr_street', adr_street);
        formData.append('invoice_adr_city', adr_city);
        formData.append('invoice_adr_zip', adr_zip);
        formData.append('invoice_adr_country', adr_country);
        formData.append('invoice_email', email);
        formData.append('invoice_telephone', telephone);

        fetch(
            url,
            {
                method: 'POST',
                body: formData,
            }
        )
            .then((response) => response.json())
            .then((result) => {
                //console.log('Success:', result['message'], "result['status'] = ", result['status']);

                setRecordData_api(result['status']);
                setmyApiResponse(result['status']);
                setRecordData_result(result['message']);
                if (String(result['status']) === String("true")) {
                    settestval(true);
                    desablefield1();
                }
                else if (String(result['status']) === String("Err_Connexion")) {
                    //  alert('Erreur: ' + result['message']);
                    setdisplay_alert_mysy("1");
                    setalert_message(result['message']);
                    setalert_type("error");
                    history.push("/Connexion");
                }



            })
            .catch((error) => {
                console.error('RecordData Error:', error);

                setmyApiResponse("false");
            });


    };

    function enablefieds1() {
        setfields1desabled(false);
        document.getElementsByName("nom")[0].disabled = false;
        document.getElementsByName("nom")[0].style.backgroundColor = "#FFFFFF";

        document.getElementsByName("telephone")[0].disabled = false;
        document.getElementsByName("telephone")[0].style.backgroundColor = "#FFFFFF";

        document.getElementsByName("email")[0].disabled = false;
        document.getElementsByName("email")[0].style.backgroundColor = "#FFFFFF";

        document.getElementsByName("adr_street")[0].disabled = false;
        document.getElementsByName("adr_street")[0].style.backgroundColor = "#FFFFFF";

        document.getElementsByName("adr_zip")[0].disabled = false;
        document.getElementsByName("adr_zip")[0].style.backgroundColor = "#FFFFFF";

        document.getElementsByName("adr_city")[0].disabled = false;
        document.getElementsByName("adr_city")[0].style.backgroundColor = "#FFFFFF";

        document.getElementsByName("adr_country")[0].disabled = false;
        document.getElementsByName("adr_country")[0].style.backgroundColor = "#FFFFFF";

        document.getElementsByName("vat_num")[0].disabled = false;
        document.getElementsByName("vat_num")[0].style.backgroundColor = "#FFFFFF";
    }

    function desablefield1() {
        setfields1desabled(true);
        document.getElementsByName("nom")[0].disabled = true;
        //document.getElementsByName("nom")[0].style.backgroundColor = "#FFFFFF";

        document.getElementsByName("telephone")[0].disabled = true;
        //document.getElementsByName("telephone")[0].style.backgroundColor = "#ECEFF1";

        document.getElementsByName("email")[0].disabled = true;
        // document.getElementsByName("email")[0].style.backgroundColor = "#ECEFF1";

        document.getElementsByName("adr_street")[0].disabled = true;
        //document.getElementsByName("adr_street")[0].style.backgroundColor = "#ECEFF1";

        document.getElementsByName("adr_zip")[0].disabled = true;
        //document.getElementsByName("adr_zip")[0].style.backgroundColor = "#ECEFF1";

        document.getElementsByName("adr_city")[0].disabled = true;
        //document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1";

        document.getElementsByName("adr_country")[0].disabled = true;
        //document.getElementsByName("adr_country")[0].style.backgroundColor = "#ECEFF1";

        document.getElementsByName("vat_num")[0].disabled = true;
        //document.getElementsByName("vat_num")[0].style.backgroundColor = "#ECEFF1";
    }

    const [getCurrentUserData_result, setgetCurrentUserData_result] = useState([]);
    const [Client_end_date_abonnement, setClient_end_date_abonnement] = useState("");
    const [partner_account_id, setpartner_account_id] = useState("");
    const [is_partner_admin_account, setis_partner_admin_account] = useState("");

    const [abonnement_periodicite, setabonnement_periodicite] = useState("");


    function getCurrentUserData() {

        settestval('d'); // ==> Do not delete
        const formData = new FormData();
        const url = process.env.REACT_APP_API_URL + "myclass/api/get_partner_account/";
        formData.append('token', stored_part);

        axios.post(url, formData).then(res => {

            if (String(res.data.status) === String("true")) {
                //console.log(" In getCurrentUserData  res.data.status = " + res.data.status);
                //console.log(" In getCurrentUserData  res.data.message = " + res.data.message);
                setmyApiResponse("True");
                setResult(res.data.message);
                setgetCurrentUserData_result(res.data.message)

                var mylocaltraining = JSON.parse(res.data.message);
                if (mylocaltraining) {

                    setpartner_account_id(mylocaltraining._id);

                    if (mylocaltraining.is_partner_admin_account) {
                        setis_partner_admin_account(mylocaltraining.is_partner_admin_account);
                    } else {
                        setis_partner_admin_account("0");
                    }



                    if (mylocaltraining.end_date_abonnement && String(mylocaltraining.end_date_abonnement).length > 3) {
                        setClient_end_date_abonnement(mylocaltraining.end_date_abonnement);
                    } else {
                        setClient_end_date_abonnement("");
                    }

                    if (mylocaltraining.abonnement_periodicite) {
                        setabonnement_periodicite(mylocaltraining.abonnement_periodicite);

                        if (String(mylocaltraining.abonnement_periodicite).toLowerCase() === "annuel") {
                            Clik_bton_annuel();
                        } else {
                            Clik_bton_mensuel();
                        }
                    } else {
                        setabonnement_periodicite("");
                    }



                    document.getElementsByName("vat_num")[0].disabled = true;
                    document.getElementsByName("vat_num")[0].style.backgroundColor = "#ECEFF1";
                    if (mylocaltraining.invoice_vat_num) {
                        document.getElementsByName("vat_num")[0].value = mylocaltraining.invoice_vat_num;
                    }

                    document.getElementsByName("nom")[0].disabled = true;
                    document.getElementsByName("nom")[0].style.backgroundColor = "#ECEFF1";
                    if (mylocaltraining.invoice_nom) {
                        document.getElementsByName("nom")[0].value = mylocaltraining.invoice_nom;

                    }

                    document.getElementsByName("adr_street")[0].disabled = true;
                    document.getElementsByName("adr_street")[0].style.backgroundColor = "#ECEFF1";
                    if (mylocaltraining.invoice_adr_street) {
                        document.getElementsByName("adr_street")[0].value = mylocaltraining.invoice_adr_street;

                    }

                    document.getElementsByName("adr_city")[0].disabled = true;
                    document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1";
                    if (mylocaltraining.invoice_adr_city) {
                        document.getElementsByName("adr_city")[0].value = mylocaltraining.invoice_adr_city;

                    }

                    document.getElementsByName("adr_zip")[0].disabled = true;
                    document.getElementsByName("adr_zip")[0].style.backgroundColor = "#ECEFF1";
                    if (mylocaltraining.invoice_adr_zip) {
                        document.getElementsByName("adr_zip")[0].value = mylocaltraining.invoice_adr_zip;

                    }

                    document.getElementsByName("adr_country")[0].disabled = true;
                    document.getElementsByName("adr_country")[0].style.backgroundColor = "#ECEFF1";
                    if (mylocaltraining.invoice_adr_country) {
                        document.getElementsByName("adr_country")[0].value = mylocaltraining.invoice_adr_country;

                    }

                    document.getElementsByName("email")[0].disabled = true;
                    document.getElementsByName("email")[0].style.backgroundColor = "#ECEFF1";
                    if (mylocaltraining.invoice_email) {
                        document.getElementsByName("email")[0].value = mylocaltraining.invoice_email;

                    }

                    document.getElementsByName("telephone")[0].disabled = true;
                    document.getElementsByName("telephone")[0].style.backgroundColor = "#ECEFF1";
                    if (mylocaltraining.invoice_telephone) {

                        document.getElementsByName("telephone")[0].value = mylocaltraining.invoice_telephone;

                    }

                    if (mylocaltraining.pack_service) {
                        setcurrentpack2(String(mylocaltraining.pack_service).toLocaleLowerCase());
                    } else {
                        setcurrentpack2("");
                    }

                    if (mylocaltraining.nb_formation) {
                        setparnternbformation(String(mylocaltraining.nb_formation));

                    }

                    desablefield1();

                }
            }
            else {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setmyApiResponse("False");
                //setmyApimyApiMessage("")
            }

        }).catch((error) => {
            console.warn('Not good man :( mysearchtext = ');
            setmyApiResponse("False");
            //setmyApimyApiMessage("")
        })



    }


    function menu_facture() {
        setmenu("facture");
        GetInvoices();

    }

    useEffect(() => {
        //menu_info();
        getCurrentUserData();
        GetPayementMode();
        setpackprice();

    }, []);


    function confirmAbonnement_avec_arret_encours(packs) {
        if (String(packs).toLowerCase() === String("basic")) {



            if (String(periode) === String("Annuel")) {
                if (String(packs).toLowerCase() === String("standard")) {
                    setpackprice("2508");
                }
                else if (String(packs).toLowerCase() === String("gold")) {
                    setpackprice("5028");
                }
                else if (String(packs).toLowerCase() === String("basic")) {
                    setpackprice("1260");
                }
            } else {

                if (String(packs).toLowerCase() === String("standard")) {
                    setpackprice("299");
                }
                else if (String(packs).toLowerCase() === String("gold")) {
                    setpackprice("599");
                }
                else if (String(packs).toLowerCase() === String("basic")) {
                    setpackprice("150");
                }

            }

            setgotocheckout("1");
            setselectedpacks(packs);
            window.scrollTo({
                top: 0,
                behavior: "smooth",
            });
            return;
        }

        if (!paymentmode || Object.keys(paymentmode).length <= 0) {
            //  alert(" Vous devez ajouter un mode de Paiement pour activer de ce pack")


            setdisplay_alert_mysy("1");
            setalert_message("Vous devez ajouter un mode de paiement pour activer de ce pack");
            setalert_type("error");
            return;

        } else {




            if (String(periode) === String("Annuel")) {
                if (String(packs).toLowerCase() === String("standard")) {
                    setpackprice("2508");
                }
                else if (String(packs).toLowerCase() === String("gold")) {
                    setpackprice("5028");
                }
                else if (String(packs).toLowerCase() === String("basic")) {
                    setpackprice("1260");
                }
            } else {
                if (String(packs).toLowerCase() === String("standard")) {
                    setpackprice("299");
                }
                else if (String(packs).toLowerCase() === String("gold")) {
                    setpackprice("599");
                }
                else if (String(packs).toLowerCase() === String("basic")) {
                    setpackprice("150");
                }

            }

            setgotocheckout("1");
            setselectedpacks(packs);
            window.scrollTo({
                top: 0,
                behavior: "smooth",
            });
        }
    }


    function confirmAbonnement(packs) {

        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });

        if (Client_end_date_abonnement && String(Client_end_date_abonnement).length > 3) {

            confirmAlert({
                title: '',
                message: "Votre abonnement actuel s'arrete le " + Client_end_date_abonnement + ", en confirmant ce nouvel abonnement, votre demande d'arrêt sera annulée.",
                buttons: [
                    {
                        label: 'Oui',
                        onClick: () => { confirmAbonnement_avec_arret_encours(packs); }
                    },
                    {
                        label: 'Non',
                        onClick: () => { return }
                    }
                ]
            });


        } else {

            if (String(packs).toLowerCase() === String("basic")) {


                if (String(periode) === String("Mensuel")) {
                    if (String(packs).toLowerCase() === String("standard")) {
                        setpackprice("299");
                        setselected_pack_unit_price("299");
                    }
                    else if (String(packs).toLowerCase() === String("gold")) {
                        setpackprice("599");
                        setselected_pack_unit_price("599");
                    }
                    else if (String(packs).toLowerCase() === String("basic")) {
                        setpackprice("150");
                        setselected_pack_unit_price("150");
                    }
                }

                if (String(periode) === String("Annuel")) {
                    if (String(packs).toLowerCase() === String("standard")) {
                        setpackprice("2508");
                        setselected_pack_unit_price("419");
                    }
                    else if (String(packs).toLowerCase() === String("gold")) {
                        setpackprice("5028");
                        setselected_pack_unit_price("209");
                    }
                    else if (String(packs).toLowerCase() === String("basic")) {
                        setpackprice("1260");
                        setselected_pack_unit_price("105");
                    }
                }

                setgotocheckout("1");
                setselectedpacks(packs);
                window.scrollTo({
                    top: 0,
                    behavior: "smooth",
                });
                return;
            }

            if (!paymentmode || Object.keys(paymentmode).length <= 0) {
                //   alert(" Vous devez ajouter un mode de Paiement pour activer de ce pack")
                setdisplay_alert_mysy("1");
                setalert_message("Vous devez ajouter un mode de paiement pour activer de ce pack");
                setalert_type("error");
                return;

            } else {


                if (String(periode) === String("Mensuel")) {
                    if (String(packs).toLowerCase() === String("standard")) {
                        setpackprice("299");
                        setselected_pack_unit_price("299");
                    }
                    else if (String(packs).toLowerCase() === String("gold")) {
                        setpackprice("599");
                        setselected_pack_unit_price("599");
                    }
                    else if (String(packs).toLowerCase() === String("basic")) {
                        setpackprice("150");
                        setselected_pack_unit_price("150");
                    }
                }

                if (String(periode) === String("Annuel")) {
                    if (String(packs).toLowerCase() === String("standard")) {
                        setpackprice("2508");
                        setselected_pack_unit_price("419");
                    }
                    else if (String(packs).toLowerCase() === String("gold")) {
                        setpackprice("5028");
                        setselected_pack_unit_price("209");
                    }
                    else if (String(packs).toLowerCase() === String("basic")) {
                        setpackprice("1260");
                        setselected_pack_unit_price("105");
                    }
                }

                setgotocheckout("1");
                setselectedpacks(packs);
                window.scrollTo({
                    top: 0,
                    behavior: "smooth",
                });
            }
        }
    }




    const [StopAbonnement_api, setStopAbonnement_api] = useState([]);
    const [StopAbonnement_message, setStopAbonnement_message] = useState([]);
    const [StopAbonnement_result, setStopAbonnement_result] = useState([]);
    function StopAbonnement(event) {

        var form = new FormData();

        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);

        var myurl = process.env.REACT_APP_API_URL + "myclass/api/stop_strip_subscription/";


        fetch(myurl,
            {
                method: 'POST',
                body: form,
            })
            .then((data) => data.json())
            .then((data) => {

                //console.log(" In getCurrentUserData  res.data.status = " + data.status);
                //console.log(" In getCurrentUserData  res.data.message = " + data.message);

                if (String(data['status']) === String("false")) {

                    setStopAbonnement_api("false");
                    setStopAbonnement_message(data['message']);

                }
                else if (String(data['status']) === String("true")) {

                    setStopAbonnement_api("true");
                    setStopAbonnement_result(data['message']);
                }

            }).catch((error) => {
                console.error('StopAbonnement Error:', error);
                setStopAbonnement_api("false");
            });

    }


    function confirmSTOPAbonnement(localpacks) {
        confirmAlert({
            title: '',
            message: "Confirmez l'arret de votre abonnement " + String(localpacks),
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => { StopAbonnement(); }
                },
                {
                    label: 'Non',
                    onClick: () => { return }
                }
            ]
        });
    }



    function returntoorder() {
        setgotocheckout("0");
        getCurrentUserData();
        GetPayementMode();
        setpackprice();

    }

    const [packprice, setpackprice] = useState();

    /* Gerer les prix annuel. on va avoir besoin d'afficher le prix unitaire avant d'afficher le prix (X12 mois)*/
    const [selected_pack_unit_price, setselected_pack_unit_price] = useState();

    const [changepartnb_ftion, setchangepartnb_ftion] = useState();

    const [new_nb_formations, setnew_nb_formations] = useState();

    function Change_Partne_Nb_Ftion() {
        setcode_promo_code("");
        setcode_promo_type("");
        setcode_promo_valeur("");
        setcode_promo_text_to_display("");

        sethandleOnblur_Code_Promo_api("");
        sethandleOnblur_Code_Promo_result("");
        sethandleOnblur_Code_Promo_message("");

        setchangepartnb_ftion(true);
        setnew_nb_formations(parnternbformation);
        get_production_service_by_pack();

        get_current_active_class_mysy_and_lms();

        if (String(periode).toLowerCase() === String("annuel")) {
            if (String(currentpack2).toLowerCase() === String("standard")) {
                setpackprice("2508");
            }
            else if (String(currentpack2).toLowerCase() === String("gold")) {
                setpackprice("5028");
            }
            else if (String(currentpack2).toLowerCase() === String("basic")) {
                setpackprice("1260");
            }
        }
        else {
            if (String(currentpack2).toLowerCase() === String("standard")) {
                setpackprice("299");
            }
            else if (String(currentpack2).toLowerCase() === String("gold")) {
                setpackprice("599 ");
            }
            else if (String(currentpack2).toLowerCase() === String("basic")) {
                setpackprice("150");
            }
        }




    }

    const change_nb_formations = event => {

        let valeur = event.target.value;


        setnew_nb_formations(event.target.value);

        // document.getElementById('div_nb_formation').style.color = "#107758";
        //document.getElementById('div_ttc').style.color = "#107758";

    }

    function annule_enreg_new_ftion() {
        setcode_promo_code("");
        setcode_promo_type("");
        setcode_promo_valeur("");
        setcode_promo_text_to_display("");

        sethandleOnblur_Code_Promo_api("");
        sethandleOnblur_Code_Promo_result("");
        sethandleOnblur_Code_Promo_message("");
        setchangepartnb_ftion(false);
    }

    const [getpackproducts, setgetpackproducts] = useState();

    const [get_production_service_by_pack_api, setget_production_service_by_pack_api] = useState();
    const [get_production_service_by_pack_result, setget_production_service_by_pack_result] = useState();
    function get_production_service_by_pack() {
        const formData = new FormData();
        const url = process.env.REACT_APP_API_URL + "myclass/api/get_product_service/";
        formData.append('token', stored_part);
        formData.append('pack_name', currentpack);

        axios.post(url, formData).then(res => {
            if (res.data.status != "False") {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setget_production_service_by_pack_api("True");
                setget_production_service_by_pack_result(res.data.message);
                setgetpackproducts(res.data.message);
            }
            else {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setget_production_service_by_pack_api("False");
                setgetpackproducts("");
            }

        }).catch((error) => {
            console.warn('Not good man :( mysearchtext = ');
            setget_production_service_by_pack_api("False");
            setgetpackproducts("");
            //setmyApimyApiMessage("")
        })
    }


    const [active_class_in_mysy, setactive_class_in_mysy] = useState();
    const [active_class_in_lms, setactive_class_in_lms] = useState();
    const [get_current_active_class_mysy_and_lms_api, setget_current_active_class_mysy_and_lms_api] = useState();
    const [get_current_active_class_mysy_and_lms_result, setget_current_active_class_mysy_and_lms_result] = useState();
    function get_current_active_class_mysy_and_lms() {
        const formData = new FormData();
        const url = process.env.REACT_APP_API_URL + "myclass/api/Get_Active_Ftions_Mysy_and_Lms/";
        formData.append('token', stored_part);

        axios.post(url, formData).then(res => {
            if (res.data.status != "False") {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.mysy_nb_active_class = " + res.data.mysy_nb_active_class);
                setget_current_active_class_mysy_and_lms_api("true");
                setget_current_active_class_mysy_and_lms_result(res.data.message);


                if (res.data.lms_nb_active_class) {
                    setactive_class_in_lms(res.data.lms_nb_active_class);
                }
                else {
                    setactive_class_in_lms("0");
                }

                if (res.data.mysy_nb_active_class) {
                    setactive_class_in_mysy(res.data.mysy_nb_active_class);
                }
                else {
                    setactive_class_in_mysy("0");
                }



            }
            else {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setget_current_active_class_mysy_and_lms_api("false");

            }

        }).catch((error) => {
            console.warn('get_current_active_class_mysy_and_lms = ', error);
            setget_current_active_class_mysy_and_lms_api("false");
        })
    }

    const [isLoading, setLoading] = useState();

    const [neworderid, setneworderid] = useState("");
    const [New_Ordervalidation_api, setNew_Ordervalidation_api] = useState();
    const [New_Ordervalidation_message, setNew_Ordervalidation_message] = useState();

    function New_Ordervalidation() {
        //alert(" confirmation ok");


        var form = new FormData();
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("periodicite", "mensuel");

        //form.append("discount", "0");
        form.append("pack", currentpack);
        form.append("discount_code", code_promo_code);
        form.append("discount_type", code_promo_type);
        form.append("discount_valeur", code_promo_valeur);
        form.append("discount_qty", new_nb_formations);


        /*
            /!\ : Important, il faut préciser le nombre d'article envoyé avec ceci :  form.append("nb_product", nb_article);
        */

        form.append("nb_product", "1");


        var prod_service = ""
        getpackproducts.map((service) => (
            prod_service = prod_service + " -- " + JSON.parse(service).designation
        ))
        //alert("prod_ser = " + prod_service);


        form.append("0", JSON.stringify({
            "code": currentpack, "prix": packprice, "comment": "nc", "qty": new_nb_formations,
            "pack_products": prod_service
        }));


        //form.append("1", JSON.stringify({ "code": "art_supp", "prix": "120", "comment": "nc" }));

        setLoading(true);
        var myurl = process.env.REACT_APP_API_URL + "myclass/api/createOrder/";

        fetch(myurl,
            {
                method: 'POST',
                body: form,
            })
            .then((data) => data.json())
            .then((data) => {
                console.log('Success:', data['message'], "data['status'] = ", data['status'], "ORDER ID = ", data['order_id']);
                if (String(data['status']) === String("true")) {
                    setneworderid(data['order_id']);
                    setNew_Ordervalidation_api("true");
                    setchangepartnb_ftion(false);
                    setparnternbformation(new_nb_formations);

                    // Mise à jour du module LMS si les conditions sont remplies.
                    MySy_LMS_Account_Management();

                    // Mise à jour du plan de payement
                    Update_Payement_Plan_Qty();
                    setLoading(false);
                    setdisplay_alert_mysy("1");
                    setalert_message(data['message']);
                    setalert_type("success");

                }
                else {
                    setNew_Ordervalidation_api("false");
                    setNew_Ordervalidation_message(data['message']);
                    setLoading(false);

                    setdisplay_alert_mysy("1");
                    setalert_message(data['message']);
                    setalert_type("error");

                }


            }).catch((error) => {
                console.error('Error:', error);
                setneworderid("");
                setNew_Ordervalidation_api("false");
                setLoading(false);
                setdisplay_alert_mysy("1");
                setalert_message("Impossible de créer la commande");
                setalert_type("error");


            });
        // setLoading(false);

    }


    // Mise à jour du compte LMs Mysy
    const [MySy_LMS_Account_Management_api, setMySy_LMS_Account_Management_api] = useState("");
    const [MySy_LMS_Account_Management_message, setMySy_LMS_Account_Management_message] = useState("");
    function MySy_LMS_Account_Management() {

        var formData_tpm = new FormData();
        formData_tpm.append('token', stored_part);
        //formData_tpm.append('stripe_payment_id', stripe_pi);
        //formData_tpm.append('packs', packs);



        var myurl = process.env.REACT_APP_API_URL + "myclass/api/Check_MySy_LMS_Account/";

        axios.post(myurl, formData_tpm).then(res => {
            console.log('In MySy_LMS_Account_Management status = ', res.data.status, "  -- message = ", res.data.message);
            if (String(res.data.status) === String("true")) {
                setMySy_LMS_Account_Management_api("true");

            }
            else {
                setMySy_LMS_Account_Management_api("false")
                setMySy_LMS_Account_Management_message(String(res.data.message))
            }


        }).catch((error) => {
            console.log('In MySy_LMS_Account_Management ', error);
            setMySy_LMS_Account_Management_api("false")

        })

    }

    // Mise à jour du compte LMs Mysy
    const [Update_Payement_Plan_Qty_api, setUpdate_Payement_Qty_Plan_api] = useState("");
    const [Update_Payement_Plan_Qty_message, setUpdate_Payement_Qty_Plan_message] = useState("");
    function Update_Payement_Plan_Qty() {

        var formData_tpm = new FormData();
        formData_tpm.append('token', stored_part);
        formData_tpm.append('qty', new_nb_formations);
        formData_tpm.append('old_qty', parnternbformation);
        formData_tpm.append("discount_code", code_promo_code);
        formData_tpm.append("discount_type", code_promo_type);
        formData_tpm.append("discount_valeur", code_promo_valeur);


        var myurl = process.env.REACT_APP_API_URL + "myclass/api/strip_update_subscription_qty/";

        axios.post(myurl, formData_tpm).then(res => {
            console.log('In Update_Payement_Plan status = ', res.data.status, "  -- message = ", res.data.message);
            if (String(res.data.status) === String("true")) {
                setUpdate_Payement_Qty_Plan_api("true");

            }
            else {
                setUpdate_Payement_Qty_Plan_api("false")
                setUpdate_Payement_Qty_Plan_message(String(res.data.message))
            }


        }).catch((error) => {
            console.log('In Update_Payement_Plan_Qty ', error);
            setUpdate_Payement_Qty_Plan_api("false")

        })

    }

    function confirmSNEwAbonnement() {
        confirmAlert({
            title: '',
            message: "Confirmez la modification du nombre de formations",
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => { New_Ordervalidation(); }
                },
                {
                    label: 'Non',
                    onClick: () => { return }
                }
            ]
        });
    }


    function make_new_abonnement() {

        //console.log(" old qty = ", parnternbformation, " New qty = ", new_nb_formations);
        if (parnternbformation == new_nb_formations) {
            // alert(" Le nombre de formations est identique à l'abonnement actuel.");
            setdisplay_alert_mysy("1");
            setalert_message("Le nombre de formations est identique à l'abonnement actuel.");
            setalert_type("error");
            return;
        }

        /*
        Important : 
        Pour reduire le nombre de formation, l'utilisateur doit desactiver les formations dans le LMS et dans mysy
        de sorte à ce que le nouveau nombre de formation acheté ne soit pas inferieurs aux nombres de formations active
        si non le systeme refuse.
        */

        if (active_class_in_lms && parseInt(active_class_in_lms) > parseInt(new_nb_formations)) {
            //     alert("Vous avez  " + active_class_in_lms + " formation(s) active(s) dans le LMS, vous devez réduire ce nombre à au moins " + new_nb_formations + ".");
            var txt = "Vous avez  " + active_class_in_lms + " formation(s) active(s) dans le LMS, vous devez réduire ce nombre à au moins " + new_nb_formations + ".";
            setdisplay_alert_mysy("1");
            setalert_message(txt);
            setalert_type("error");

            return;
        }

        if (active_class_in_mysy && parseInt(active_class_in_mysy) > parseInt(new_nb_formations)) {

            // alert("Vous avez " + active_class_in_mysy + " formation(s) publiée(s) dans le moteur de recherche, vous devez réduire ce nombre à au moins " + new_nb_formations + ".");
            var txt = "Vous avez " + active_class_in_mysy + " formation(s) publiée(s) dans le moteur de recherche, vous devez réduire ce nombre à au moins " + new_nb_formations + ".";
            setdisplay_alert_mysy("1");
            setalert_message(txt);
            setalert_type("error");

            return;
        }

        confirmSNEwAbonnement();
    }

    const [code_promo_code, setcode_promo_code] = useState("");
    const [code_promo_type, setcode_promo_type] = useState("");
    const [code_promo_valeur, setcode_promo_valeur] = useState("");
    const [code_promo_text_to_display, setcode_promo_text_to_display] = useState("");

    const [handleOnblur_Code_Promo_api, sethandleOnblur_Code_Promo_api] = useState("");
    const [handleOnblur_Code_Promo_result, sethandleOnblur_Code_Promo_result] = useState("");
    const [handleOnblur_Code_Promo_message, sethandleOnblur_Code_Promo_message] = useState("");

    const handleOnblur_Code_Promo = (event) => {

        setcode_promo_code("");
        setcode_promo_type("");
        setcode_promo_valeur("");
        setcode_promo_text_to_display("");

        sethandleOnblur_Code_Promo_api("");
        sethandleOnblur_Code_Promo_result("");
        sethandleOnblur_Code_Promo_message("");


        setcode_promo_code(event.target.value);
        //console.log(" ### event.target.value = ", event.target.value);
        const formData = new FormData();
        const url = process.env.REACT_APP_API_URL + "myclass/api/Get_Given_Code_Promo/";
        formData.append('token', stored_part);
        formData.append('code_promo', event.target.value);

        axios.post(url, formData).then(res => {
            //console.log(" In getCurrentUserData  res.data.status = " + res.data.status);
            //console.log(" In getCurrentUserData  res.data.message = " + res.data.message);
            if (String(res.data.status) === "true") {

                sethandleOnblur_Code_Promo_api("true");
                sethandleOnblur_Code_Promo_result(res.data.message);

                var mycodepromo_data = JSON.parse(res.data.message);
                if (mycodepromo_data) {
                    //console.log(' mycodepromo_data = ', mycodepromo_data);
                    if (mycodepromo_data.type) {
                        setcode_promo_type(mycodepromo_data.type);
                    }
                    if (mycodepromo_data.valeur) {
                        setcode_promo_valeur(mycodepromo_data.valeur);
                    }

                    if (String(mycodepromo_data.type).toLocaleLowerCase() === "fix") {
                        setcode_promo_text_to_display("- " + mycodepromo_data.valeur + " €")
                    }
                    else if (String(mycodepromo_data.type).toLocaleLowerCase() === "percent") {
                        setcode_promo_text_to_display("- " + mycodepromo_data.valeur + " % ")
                    }

                }
            } else if (String(res.data.status) === String("Err_Connexion")) {
                alert('Erreur: ' + res.data.message);
                history.push("/Connexion");
                return;
            }
            else {

                sethandleOnblur_Code_Promo_api("false");
                sethandleOnblur_Code_Promo_message(res.data.message);
            }

        }).catch((error) => {
            console.warn('Erro handleOnblur_Code_Promo = ', error);
            sethandleOnblur_Code_Promo_api("false");
        })
    }

    const [display_alert_mysy, setdisplay_alert_mysy] = useState("");
    const [alert_message, setalert_message] = useState("");
    const [alert_type, setalert_type] = useState("");

    function clear_alert_message() {
        setalert_message("");
    }
    function clear_alert_type() {
        setalert_type("");
    }

    function clear_display_alert_mysy() {
        setdisplay_alert_mysy("");
    }

    function display_succes_message_from_sub_componante(message){
        setdisplay_alert_mysy("1");
        setalert_message(message);
        setalert_type("success");
    }


    return (
        <div className="abonnement">
            {isLoading && <div className="loader-container">
                <div className="mysy_spinner">  <img src={img_loading_spin} />  </div>
            </div>}

            {/***  Affichage des messages d'alerte*/}
            {display_alert_mysy && String(display_alert_mysy) === "1" &&
                <Module_Alert_Confirmation alert_message={alert_message}
                    alert_type={alert_type}
                    clear_alert_message={clear_alert_message}
                    clear_alert_type={clear_alert_type}
                    clear_display_alert_mysy={clear_display_alert_mysy}
                />
            }
            {/*** FIN Affichage des messages d'alerte*/}


            {String(gotocheckout) === String("1") && <div>
                <Button onClick={returntoorder} className="btn_retour_ps"> <TfiControlBackward /> &nbsp; Retour aux produits & Services </Button>
                <CheckOut packs={selectedpacks} periodicity={periode} mypackprice={packprice} selected_pack_unit_price={selected_pack_unit_price} /> </div>

            }


            {String(StopAbonnement_api) === String("true") && <div className="div_row">
                <nav className="okUpdateData"> Votre demande a été bien prise en compte <br /> {StopAbonnement_result} </nav>

            </div>}

            {String(StopAbonnement_api) === String("false") && <div className="div_row">
                <nav className="koUpdateData"> {StopAbonnement_message} </nav>

            </div>}

            {String(gotocheckout) === String("0") && <div>

                {currentpack2 && String(currentpack2).length > 2 && <div className="div_row" style={{ fontFamily: "DM Sans", fontSize: '30px', marginTop: '2rem', textAlign: 'center' }}>

                    Vous êtes actuellement sur un  plan  : <u> <font style={{ fontWeight: "600" }}>  {String(currentpack2).toUpperCase()} -  {String(abonnement_periodicite).toUpperCase()}</font> </u> <br />

                </div>}

                {(!currentpack2 || String(currentpack2).length <= 2) && <div className="div_row" style={{ fontFamily: "DM Sans", fontSize: '30px', marginTop: '2rem', textAlign: 'center' }}>

                    Vous n'avez aucun abonnement actif

                </div>}

                <div className="div_row" style={{ fontFamily: "DM Sans" }}>

                    <div className="titre1"> Detail de Facturation </div>
                    {String(testval) === String("true") && <div className="okUpdateData"> La modification a ete prise en compte </div>}

                    {String(testval) === String("false") && <div className="koUpdateData"> Impossible de modifier les informations </div>}

                    <div style={{ display: 'flex', flexDirection: 'row', gap: '20px', width: '100%', flexWrap: 'wrap', justifyContent: 'left' }}>
                        <TextField
                            required
                            disabled
                            label="Raison sociale"
                            name="nom"
                            className="texte_area"
                            sx={{ m: 1, width: '48%' }}
                            InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <AccountCircle />
                                    </InputAdornment>
                                ),
                            }}

                        />

                        <TextField

                            disabled
                            label="num TVA"
                            name="vat_num"
                            className="texte_area"
                            sx={{ m: 1, width: '48%' }}
                            InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <AccountCircle />
                                    </InputAdornment>
                                ),
                            }}

                        />


                        <TextField
                            disabled
                            name="telephone"
                            label="Téléphone"
                            className="texte_area"
                            sx={{ m: 1, width: '48%' }}
                            InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <PhoneIcon />
                                    </InputAdornment>
                                ),
                            }}

                        />


                        <TextField
                            name="email"
                            disabled
                            label="Adresse mail"
                            className="texte_area"
                            sx={{ m: 1, width: '48%' }}
                            InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <EmailIcon />
                                    </InputAdornment>
                                ),
                            }}

                        />


                        <TextField
                            name="adr_street"
                            disabled
                            label="Adresse"
                            className="texte_area"
                            sx={{ m: 1, width: '48%' }}
                            InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <HomeIcon />
                                    </InputAdornment>
                                ),
                            }}

                        />

                        <TextField
                            name="adr_zip"
                            disabled
                            label="Code Postal"
                            className="texte_area"
                            sx={{ m: 1, width: '48%' }}
                            InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <HomeIcon />
                                    </InputAdornment>
                                ),
                            }}

                        />

                        <TextField
                            name="adr_city"
                            disabled
                            label="Ville"
                            className="texte_area"
                            sx={{ m: 1, width: '48%' }}
                            InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <HomeIcon />
                                    </InputAdornment>
                                ),
                            }}

                        />

                        <TextField
                            name="adr_country"
                            label="Pays"
                            disabled
                            className="texte_area"
                            sx={{ m: 1, width: '48%' }}
                            InputProps={{
                                startAdornment: (
                                    <InputAdornment position="start">
                                        <HomeIcon />
                                    </InputAdornment>
                                ),
                            }}

                        />

                    </div>
                    <br />


                    <div className="div_row22">
                        {fields1desabled == false && <div className="div_row">
                            <div className="div_row_gauche">
                                <Button variant="contained" color="success" className="div_row22 btn_enreg " onClick={RecordData}>Enregistrer</Button>
                            </div>
                            <div className="div_row_droite">
                                <Button variant="contained" color="success" className="div_row22 btn_modif" onClick={getCurrentUserData}>Annuler</Button>
                            </div>
                        </div>

                        }
                        {fields1desabled == true &&
                            <Button variant="contained" color="success" className="div_row22 btn_modif" onClick={enablefieds1}>Editer</Button>
                        }

                    </div>

                </div>

                <div className="div_row" style={{ fontFamily: "DM Sans" }}>
                    <div className="titre1" > Mode de Paiement </div>


                    {paymentmode && Object.keys(paymentmode).length > 0 && paymentmode.map((payment) => (

                        <ul className="list_produits_service" style={{ paddingLeft: '2px', fontFamily: "DM Sans" }}>
                            <div style={{ paddingLeft: '2px' }}>


                                <ul style={{ paddingLeft: '2px' }}>
                                    Type carte :  {(JSON.parse(payment).brand)}
                                </ul>
                                <ul style={{ paddingLeft: '2px' }}>
                                    Nom carte :  {(JSON.parse(payment).nom_carte)}
                                </ul>
                                <ul style={{ paddingLeft: '2px' }}>
                                    Num carte :  XXXXXX{(JSON.parse(payment).last4)}
                                </ul>
                                <ul style={{ paddingLeft: '2px' }}>
                                    Expiration :  {(JSON.parse(payment).exp_month)}/{(JSON.parse(payment).exp_year)}
                                </ul>
                                <ul style={{ paddingLeft: '2px' }}>
                                    Date Creation :  {(JSON.parse(payment).createdatetime)}
                                </ul>


                            </div>

                        </ul>


                    ))}


                    {String(paymentmodeapi) === String("True") && String(paymentmode_nb_carte) === "0" && <div>
                        <div className="warninigUpdateData">
                            Ajoutez un mode de paiement pour commencer ! <br />
                            Enregistrez votre moyen de paiement dès maintenant : cela vous permettra ensuite de choisir l'abonnement qui vous correspond le mieux.<br />
                            Cliquez sur le bouton « + » ci-dessous pour l'ajouter en un clin d'œil.
                        </div>

                    </div>}

                    {String(paymentmodeapi) === String("True") && <div>


                        {paymentmode && Object.keys(paymentmode).length > 0 && paymentmode.map((payment) => (
                            <ul className="list_produits_service">
                                <div>  {String(JSON.parse(payment).type) === String("cb") &&
                                    <b> Carte Bleue </b>} </div>

                                <div>  {String(JSON.parse(payment).type) === String("sepa") &&
                                    <b> SEPA </b>} </div>


                                {String(JSON.parse(payment).type) === String("sepa") && <div>
                                    <ul>
                                        BIC :  {JSON.parse(payment).bic}
                                    </ul>
                                    <ul>
                                        IBAN : {(JSON.parse(payment).iban).substring(0, 4)}XXXXXXXX
                                    </ul>
                                    <ul>
                                        Titulaire du compte : {JSON.parse(payment).nom_compte}
                                    </ul>
                                    <ul>
                                        Dernière mise à jour :  {(JSON.parse(payment).date_update).substring(0, 10)}
                                    </ul>

                                </div>}

                                {String(JSON.parse(payment).type) === String("cb") && <div>
                                    <ul>
                                        Num carte :  {(JSON.parse(payment).num_carte).substring(0, 10)}XXX
                                    </ul>
                                    <ul>
                                        Date expiration : {JSON.parse(payment).date_exp_carte}
                                    </ul>
                                    <ul>
                                        Titulaire de la carte : {JSON.parse(payment).nom_carte}
                                    </ul>
                                    <ul>
                                        Dernière mise à jour :  {(JSON.parse(payment).date_update).substring(0, 10)}
                                    </ul>
                                </div>}

                            </ul>


                        ))}

                        {paymentmode && Object.keys(paymentmode).length > 0 &&
                            String(new_mode_payement) !== "1" && <div className="div_row">
                                <div className="div_row" style={{ textAlign: "left" }}>
                                    <img src={img_logo_stripe} className="img_payment" /> &nbsp;
                                </div>

                                <div className="div_row" style={{ textAlign: "center" }}>
                                    <Button variant="contained" color="success" className="div_row22 btn_modif" onClick={menu_paymentmethode}>Editer</Button>
                                </div>
                            </div>}



                        {(!paymentmode || Object.keys(paymentmode).length <= 0) &&
                            String(new_mode_payement) !== "1" &&

                            <div style={{
                                "width": "30%", "marginLeft": "auto", "marginLeft": "auto", "marginRight": "auto", "textAlign": "center",
                                "marginTop": "1rem", "cursor": "pointer", fontSize: '18px', fontFamily: 'DM Sans'
                            }}
                                onClick={menu_paymentmethode}>  <IoAddCircleOutline /><br />Ajouter un mode depaiement</div>
                        }


                        {String(menu) === "paymentmethode" && String(new_mode_payement) === "1" && <div style={{ "width": "90%" }}>
                            <div style={{
                                "width": "10%", "marginLeft": "auto", "marginLeft": "auto", "marginRight": "auto", "textAlign": "center",
                                "marginTop": "1rem", "cursor": "pointer", "marginBottom": "1rem"
                            }}
                                onClick={menu_paymentmethode_close}>  <IoCloseCircleOutline /><br />Fermer </div>
                            <PayementComponent_Carte currentpack={String(currentpack).toUpperCase()} menu_paymentmethode_close={menu_paymentmethode_close}
                             GetPayementMode={GetPayementMode} display_succes_message_from_sub_componante={display_succes_message_from_sub_componante} />

                        </div>

                        }

                    </div>}


                </div>
                <div className="titre1">Les abonnements </div>
                <br />

                <div className="div_row">
                <div className="produitsservices">
            <div className="critere" style={{ marginBottom: '40px' }}>
              <div className="critere_gauche">
                &nbsp;
              </div>
              <div className="critere_droite bloc_periodicite" >
                <span className="span1"> Periodicité  &nbsp; </span>
                <button
                  onClick={Clik_bton_mensuel}
                  className="bton_radius_gauche bloc_bton_mensuel"
                  id="bton_mensuel" name="bton_mensuel">Mensuelle
                </button>


                <button
                  onClick={Clik_bton_annuel}
                  className="bton_radius_droite bloc_bton_annuel"
                  id="bton_annuel" name="bton_annuel">Annuelle
                </button>

                {periode && String(periode) === "Annuel" && <div style={{ marginTop: '0.5rem' }}>
                  <div className="critere_droite bloc_reduction_30">
                    30% de réduction
                  </div>
                </div>}


              </div>
            </div>


          </div>
                </div>

                <div className='tarif_head_automatic_files' style={{ width: '100%', }}>
                    <div className="block_1" style={{ paddingTop: '80px' }}>
                        <div className="block_2" style={{ width: '30%' }}>
                            <PricingDescription />
                        </div>

                        {!periode || String(periode) === "Mensuel" && <div className="detail_fonctionnalite_line_2" style={{ height: 'auto' }}>

                            <div className="block_2_bis" >
                                <PricingPlanCard title="Basic" price="150" sessions="Jusqu'à 25 Sessions/an" current_pack={String(currentpack2).toLowerCase()}
                                    is_connected={true} end_date_abonnement={Client_end_date_abonnement} periodicite={'mois'}
                                    confirmAbonnement={confirmAbonnement} />
                            </div>
                            <div className="block_3" >
                                <div className="popular-badge" >
                                    <span>LE PLUS POPULAIRE </span>
                                </div>

                                <PricingPlanCard title="Standard" price="299" sessions="Jusqu'à 200 Sessions/an" isHighlighted={true}
                                    current_pack={String(currentpack2).toLowerCase()} is_connected={true} end_date_abonnement={Client_end_date_abonnement}
                                    periodicite={'mois'} confirmAbonnement={confirmAbonnement} />
                            </div>
                            <div className="block_2_bis" >
                                <PricingPlanCard title="Gold" price="599" sessions="Sessions illimitées/an"
                                    current_pack={String(currentpack2).toLowerCase()} is_connected={true} end_date_abonnement={Client_end_date_abonnement}
                                    periodicite={'mois'} confirmAbonnement={confirmAbonnement} />
                            </div>
                        </div>}

                        {periode && String(periode) === "Annuel" && <div className="detail_fonctionnalite_line_2" style={{ height: 'auto' }}>

                            <div className="block_2_bis" >
                                <PricingPlanCard title="Basic" price="105" sessions="Jusqu'à 25 Sessions/an" current_pack={String(currentpack2).toLowerCase()}
                                    is_connected={true} end_date_abonnement={Client_end_date_abonnement} periodicite={'an'} confirmAbonnement={confirmAbonnement} />
                            </div>
                            <div className="block_3" >
                                <div className="popular-badge" >
                                    <span>LE PLUS POPULAIRE </span>
                                </div>

                                <PricingPlanCard title="Standard" price="209" sessions="Jusqu'à 200 Sessions/an" isHighlighted={true}
                                    current_pack={String(currentpack2).toLowerCase()} is_connected={true}
                                    end_date_abonnement={Client_end_date_abonnement} periodicite={'an'} confirmAbonnement={confirmAbonnement} />
                            </div>
                            <div className="block_2_bis" >
                                <PricingPlanCard title="Gold" price="419" sessions="Sessions illimitées/an"
                                    current_pack={String(currentpack2).toLowerCase()} is_connected={true} end_date_abonnement={Client_end_date_abonnement}
                                    periodicite={'an'} confirmAbonnement={confirmAbonnement} />
                            </div>
                        </div>}
                    </div>

                    <div className='position_detail_price'>


                        <div className="block_1_bis" >
                            <h1 className="fonctionnalite_h1" > Fonctionalités </h1>
                        </div>
                        <div className="detail_fonctionnalite_line" >
                            <div className="detail_fonctionnalite_line_1" style={{ width: '30%' }}>
                                <nav className="detail_fonctionnalite_line_1_desc" style={{ fontSize: '18px', fontFamily: 'DM Sans' }} > Nombre d'utilisateurs </nav>
                            </div>


                            <div className="detail_fonctionnalite_line_2" style={{ textAlign: 'center' }} >

                                <div className="detail_fonctionnalite_line_1_tick" style={{ fontSize: '18px', fontFamily: 'DM Sans' }}>
                                    2
                                </div>
                                <div className="detail_fonctionnalite_line_1_tick" style={{ fontSize: '18px', fontFamily: 'DM Sans' }}>
                                    Illimité
                                </div>

                                <div className="detail_fonctionnalite_line_1_tick" style={{ fontSize: '18px', fontFamily: 'DM Sans' }}>
                                    Illimité

                                </div>



                            </div>
                        </div>


                        <div className="detail_fonctionnalite_line" >
                            <div className="detail_fonctionnalite_line_1" style={{ width: '30%' }}>
                                <nav className="detail_fonctionnalite_line_1_desc" style={{ fontSize: '18px', fontFamily: 'DM Sans' }}>  Nb Session de formation  / an  </nav>
                            </div>


                            <div className="detail_fonctionnalite_line_2" style={{ textAlign: 'center' }} >

                                <div className="detail_fonctionnalite_line_1_tick" style={{ fontSize: '18px', fontFamily: 'DM Sans' }}>
                                    1 - 25
                                </div>
                                <div className="detail_fonctionnalite_line_1_tick" style={{ fontSize: '18px', fontFamily: 'DM Sans' }}>
                                    26 - 200
                                </div>

                                <div className="detail_fonctionnalite_line_1_tick" style={{ fontSize: '18px', fontFamily: 'DM Sans' }}>
                                    Illimité
                                </div>



                            </div>
                        </div>

                        <div className="detail_fonctionnalite_line" >
                            <div className="detail_fonctionnalite_line_1" style={{ width: '30%' }}>
                                <nav className="detail_fonctionnalite_line_1_desc" style={{ fontSize: '18px', fontFamily: 'DM Sans' }}>   Gestion Administrative <br />
                                    <Tooltip className="tooltip_css" id="all_option_01" />
                                    <a data-tooltip-id="all_option_01" data-tooltip-html="Toutes les options sont incluses. Cliquez pour voir les détails">
                                        <font style={{ fontSize: '12px', fontFamily: 'DM Sans', lineHeight: '3rem', cursor: 'pointer' }}
                                            onClick={(e) => {
                                                e.preventDefault();
                                                window.open(
                                                    "/tarif#detail_plans",
                                                    '_blank'
                                                );

                                            }}> (Toutes Options <FcInfo />) </font>
                                    </a>
                                </nav>
                            </div>


                            <div className="detail_fonctionnalite_line_2" style={{ textAlign: 'center' }} >

                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />
                                </div>
                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />
                                </div>

                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />

                                </div>



                            </div>
                        </div>

                        <div className="detail_fonctionnalite_line" >
                            <div className="detail_fonctionnalite_line_1" style={{ width: '30%' }}>
                                <nav className="detail_fonctionnalite_line_1_desc" style={{ fontSize: '18px', fontFamily: 'DM Sans' }}> CRM - Gestion Relation Client <br />

                                    <Tooltip className="tooltip_css" id="all_option_01" />
                                    <a data-tooltip-id="all_option_01" data-tooltip-html="Toutes les options sont incluses. Cliquez pour voir les détails">
                                        <font style={{ fontSize: '12px', fontFamily: 'DM Sans', lineHeight: '3rem', cursor: 'pointer' }}
                                            onClick={(e) => {
                                                e.preventDefault();
                                                window.open(
                                                    "/tarif#detail_plans",
                                                    '_blank'
                                                );

                                            }}> (Toutes Options <FcInfo />) </font>
                                    </a>
                                </nav>
                            </div>


                            <div className="detail_fonctionnalite_line_2" style={{ textAlign: 'center' }}>
                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />
                                </div>
                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />
                                </div>

                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />

                                </div>



                            </div>
                        </div>

                        <div className="detail_fonctionnalite_line">
                            <div className="detail_fonctionnalite_line_1" style={{ width: '30%' }}>
                                <nav className="detail_fonctionnalite_line_1_desc" style={{ fontSize: '18px', fontFamily: 'DM Sans' }} > LMS / E-learning <br />
                                    <Tooltip className="tooltip_css" id="all_option_01" />
                                    <a data-tooltip-id="all_option_01" data-tooltip-html="Toutes les options sont incluses. Cliquez pour voir les détails">
                                        <font style={{ fontSize: '12px', fontFamily: 'DM Sans', lineHeight: '3rem', cursor: 'pointer' }}
                                            onClick={(e) => {
                                                e.preventDefault();
                                                window.open(
                                                    "/tarif#detail_plans",
                                                    '_blank'
                                                );

                                            }}> (Toutes Options <FcInfo />) </font>
                                    </a>
                                </nav>
                            </div>


                            <div className="detail_fonctionnalite_line_2" style={{ textAlign: 'center' }}>
                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />
                                </div>
                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />
                                </div>

                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />

                                </div>

                            </div>
                        </div>


                        <div className="detail_fonctionnalite_line">
                            <div className="detail_fonctionnalite_line_1" style={{ width: '30%' }}>
                                <nav className="detail_fonctionnalite_line_1_desc" style={{ fontSize: '18px', fontFamily: 'DM Sans' }} > Marketplace
                                    <br />
                                    <Tooltip className="tooltip_css" id="all_option_01" />
                                    <a data-tooltip-id="all_option_01" data-tooltip-html="Toutes les options sont incluses. Cliquez pour voir les détails">
                                        <font style={{ fontSize: '12px', fontFamily: 'DM Sans', lineHeight: '3rem', cursor: 'pointer' }}
                                            onClick={(e) => {
                                                e.preventDefault();
                                                window.open(
                                                    "/tarif#detail_plans",
                                                    '_blank'
                                                );

                                            }}> (Toutes Options <FcInfo />) </font>
                                    </a>
                                </nav>
                            </div>


                            <div className="detail_fonctionnalite_line_2" style={{ textAlign: 'center' }}>
                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />
                                </div>
                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />
                                </div>

                                <div className="detail_fonctionnalite_line_1_tick" >
                                    <img src={check_img_check_17} alt="check" className="check-icon" />

                                </div>

                            </div>
                        </div>

                        <div className='coupure_fin_fonctionnalite'> &nbsp;</div>

                    </div>
                </div>



            </div>}
        </div>
    );

}

export default Abonnement;