import React, { useState, useEffect } from "react";
import axios from "axios";
import partnerbannerimg from "../mysy_img/MYSY_banner_compte.png";
import profileimg from "../mysy_img/MYSY-profil-2.png";
import TrainingForm from "./AddClassManual"
import PartnerTranings from "./DisplayPartnerTrainingsPagination";
import HebergementLms from "./HebergementLms";
import Button from '@mui/material/Button';
import SendIcon from '@mui/icons-material/Send';
import { getCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import PartnerInfo from "./UpdatePartnerInfo";
import PartenairStat from "./PartenairStat";
import { Helmet } from "react-helmet";
import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png";
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";

import downarrow from "../mysy_img/downarrow.png";
import uparrow from "../mysy_img/uparrow.png";

import { GiTeacher } from "react-icons/gi";
import Footer from "./Fotter";
import { confirmAlert } from 'react-confirm-alert'; // Import
import { useCookies } from "react-cookie";
import Header from "./Header";
import Facture from "./Facture";
import Abonnement from "./Abonnement";
import { useLocation } from "react-router-dom";
import { useParams } from 'react-router-dom'
import CheckOut from "./CheckOut";
import { IoCheckmarkCircleSharp } from "react-icons/io5";
import { FaHandPointRight } from "react-icons/fa";
import OrderConfirmation from "./OrderConfirmation";
import Partner_Client from "./Partner_Client";
import Pricing from "./Pricing";
import {
    FcHome, FcButtingIn, FcDepartment, FcBullish, FcAddDatabase, FcFolder,
    FcList, FcGraduationCap, FcMultipleDevices, FcCurrencyExchange,
    FcMoneyTransfer, FcFeedback, FcKey, FcVideoCall, FcSettings,
    FcBusinesswoman, FcServices, FcCollect, FcCandleSticks, FcKindle,
    FcFlowChart, FcReading
} from "react-icons/fc";

import { BsTools } from "react-icons/bs";

import DisplayPartnerSession from "./DisplayPartnerSession";
import DisplayPartnerStagiaires from "./DisplayPartnerStagiaires";
import Employes from "./Employes";
import Materiels from "./Materiels";

//import { FcHome} from "react-icons/fc";

const Partner = (props) => {
    const { commingmenu, commingpack } = useParams();
    const [myApiResponse, setmyApiResponse] = useState("");
    const [result, setResult] = useState("");
    const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart']);
    const stored_part = getCookie('tokenmysypart');
    const [parntername, setparntername] = useState("");
    const [parnternbformation, setparnternbformation] = useState("");
    const [selectedfilt1, setselectedfilt1] = useState("");
    const [selectedfilt2, setselectedfilt2] = useState("");
    const [selectedfilt3, setselectedfilt3] = useState("");
    const [excelimportmessage, setexcelimportmessage] = useState("");
    const [apiexcelimportmessage, setapiexcelimportmessage] = useState("");
    const [gotocheckout, setgotocheckout] = useState("");

    // Constante permet de savoir a fonction du menu on a faire
    const [menu, setmenu] = useState();
    const [selectedFile, setSelectedFile] = useState();
    const [isSelected, setIsSelected] = useState(false);

    const [partnerPackService, setpartnerPackService] = useState("");

    const [isimgSelected, setisimgSelected] = useState(false);
    const [isimgSelectedfile, setisimgSelectedfile] = useState(false);
    const [userimgprofil, setuserimgprofil] = useState();

    const [partnerstatus, setpartnerstatus] = useState();
    const [refesh, setrefesh] = useState("init");

    const [firstConnexion, setfirstConnexion] = useState("");
    const { action, orderid, packs } = useParams()


    const changeHandler = (event) => {
        setSelectedFile(event.target.files[0]);
        setIsSelected(true);
        setapiexcelimportmessage("");
    };

    const changeHandler2 = (event) => {
        setapiexcelimportmessage();
        setformation_file_name();
        sethandleSubmission_api();
        hiddenFileInput_formation.current.click();
    };

    const hiddenFileInput_formation = React.useRef(null);

    const history = useHistory();


    const stored_cookie = getCookie('tokenmysypart');
    const location = useLocation();

    // Si le partenaire n'est pas connecté, il est renvoyé vers la page de connexion
    if (!stored_cookie || stored_cookie.length <= 0) {
        if (location && location.state && location.state.mysy_arg) {
            //alert(" mysy arg (dans partner) = " + location.state.mysy_arg);
            history.push("/Connexion", { mysy_arg: location.state.mysy_arg });
        }
        else {
            history.push("/Connexion");
        }
    }


    const formData = new FormData();

    const [handleSubmission_api, sethandleSubmission_api] = useState();
    const [handleSubmission_result, sethandleSubmission_result] = useState();
    const [handleSubmission_message, sethandleSubmission_message] = useState();

    const handleSubmission = event => {

        const fileUploaded = event.target.files[0];
        let file_size = event.target.files[0].size;
        let file_type = event.target.files[0].type;

        //console.log("file_size =  ",file_size," file_type = ",file_type);
        if (file_size > 1000000) {
            alert("Le fichier ne doit pas depasser un 1 Méga octets");
            return;
        }

        setformation_file_name(event.target.files[0].name);

        //console.log(" import du ficier ", event.target.files[0].name);


        formData.append('File', fileUploaded);
        //formData.append('token', 'K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA');
        const stored_cookie = getCookie('tokenmysypart');


        formData.append("token", stored_cookie);

        //console.log("token = " + stored_cookie); theme_name

        fetch(
            process.env.REACT_APP_API_URL + "myclass/api/add_class_mass/",
            {
                method: 'POST',
                body: formData,
            }
        )
            .then((response) => response.json())
            .then((result) => {
                //console.log('Success:', result['message']);
                setexcelimportmessage(result['message']);
                setmyApiResponse("true");
                setapiexcelimportmessage(result['status']);
                if (String(result['status']) === String("true")) {
                    sethandleSubmission_api("true");
                    var local_message = result['message'] + " Vous allez être redirigé vers la liste des formations"
                    alert(local_message);
                    history.push("/Partner/affichage");
                    window.location.reload();
                    return;

                } else if (String(result['status']) === String("Err_Connexion")) {
                    alert('Erreur: ' + result['message']);
                    history.push("/Connexion");
                }

                else {
                    sethandleSubmission_api("false");
                    sethandleSubmission_message(result['message']);
                    alert(result['message']);
                }
                //alert("result['status'] " + result['status']);
            })
            .catch((error) => {
                console.error('Error:', result);
                setmyApiResponse("false");
                setapiexcelimportmessage("-1");
                sethandleSubmission_api("false");
                alert(" Impossible d'importer/mettre à jour les formations");
            });
    };

    const [myimage, setmyimage] = useState();
    const [isimage, setisimage] = useState();

    function getImage(e) {
        var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedImage/";
        var form = new FormData();
        form.append("token", stored_cookie);
        form.append("type", "partner");

        axios.post(myurl, form).then(res => {

            if (String(res.data.status) === "true") {
                //console.log(" getImage : In test  res.data.status = " + res.data.status);
                //console.log(" getImage: res.data.message.img = " + res.data.message);

                if (res.data.message.img.length > 0) {
                    setisimage("True");
                }
                else {
                    setisimage("False");
                }
                setmyimage(res.data.message.img);
                var ch_img = "data:image/png;base64," + res.data.message.img;
                setuserimgprofil(ch_img);
            }
            else {
                //console.log(" In Erreur   res.data.status = " + res.data.status);
                //console.log(" In Erreur  res.data.message = " + res.data.message);
                setisimage("False");
                setuserimgprofil();
                //alert("4");
            }
        }).catch((error) => {
            console.warn('Not good man :( mysearchtext = ');
            setisimage("False");
            setuserimgprofil(profileimg);
        })

    }



    useEffect(() => {
        setapiexcelimportmessage();

        if (location && location.state && location.state.local_sub_menu) {
            setmenu(location.state.local_sub_menu);
            setpartnerPackService(location.state.currentpack);
            //alert(" le pack = "+location.state.currentpack);
        }

        var list_menu = ['creation', 'infopartner', 'statistique', 'abonnement', 'affichage', 'ordervalide',
            'mes_sessions', 'setuplms', 'facture', 'pricing', 'mes_clients', 'mes_devis', 'mes_cmd',
            'mes_stagiaires', 'mes_employes', 'mon_materiel']


        if (action && list_menu.includes(action)) {
            setmenu(action);


            if (action && orderid && packs && String("ordervalide")) {
                CheckSalesOrder();
            }

            if (action && orderid && packs && String("abonnement")) {
                //console.log(" abonnement : payement intent = ", orderid, "  pack = ", packs);
            }
        } else {
            DiplaytrainingList();

        }

        getImage();
        GetPartnerNameFromToken();
        setformation_file_name();
        GetPartnerLMSData();
    }, [])



    function CreateTraining(event) {
        setmenu("creation");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/creation");
    }

    function PersonnalData(event) {
        setmenu("infopartner");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/infopartner");
    }


    function DisplayStat(event) {
        setmenu("statistique");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/statistique");
    }

    function DisplaySetUpLMS(event) {
        setmenu("setuplms");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/setuplms");
    }

    function DisplayFacure(event) {

        setmenu("facture");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/facture");
    }

    function Abonnement_func(event) {
        setmenu("abonnement");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/abonnement");
    }

    function pricing_func(event) {
        setmenu("pricing");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/pricing");
    }

    function mes_clients_func(event) {
        setmenu("mes_clients");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/mes_clients");
    }

    function mes_devis_func(event) {
        setmenu("mes_devis");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/mes_devis");
    }

    function mes_cmd_func(event) {
        setmenu("mes_cmd");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/mes_cmd");
    }


    function DiplaySessionList(event) {
        setmenu("mes_sessions");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/mes_sessions");
    }

    function DiplayStagiaireList(event) {
        setmenu("mes_stagiaires");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/mes_stagiaires");
    }

    function DisplayeEmployeList(event) {
        setmenu("mes_employes");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/mes_employes");
    }

    function DisplayeMaterielList(event) {
        setmenu("mon_materiel");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/mon_materiel");
    }


    function DiplaytrainingList(event) {

        setmenu("affichage");
        setapiexcelimportmessage();
        setformation_file_name();
        history.push("/Partner/affichage");

        var server_address = "127.0.0.1";
        //var server_address = "89.156.84.196";
        var form = new FormData();

        // Recuperation des parametres
        var filtre1 = selectedfilt1;
        var filtre2 = selectedfilt2;
        var filtre3 = selectedfilt3;

        var filtre1_value = "";
        var filtre2_value = "";
        var filtre3_value = "";

        // Recuperation des valeurs de filtres

        if (selectedfilt1) {
            filtre1_value = document.getElementsByName("filtre1")[0].value;
            form.append(filtre1, filtre1_value);
        }

        if (selectedfilt2) {
            filtre2_value = document.getElementsByName("filtre2")[0].value;
            form.append(filtre2, filtre2_value);
        }

        if (selectedfilt3) {
            filtre3_value = document.getElementsByName("filtre3")[0].value;
            form.append(filtre3, filtre3_value);
        }

        //console.log(" filtres1 = " + filtre1 + " = " + filtre1_value);
        //console.log(" filtres2 = " + filtre2 + " = " + filtre2_value);
        //console.log(" filtres3 = " + filtre3 + " = " + filtre3_value);


        form.append("token", stored_cookie);

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

        axios.post(myurl, form).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);
                setmyApiResponse("true");
                setResult(res.data.message)
                //setmyApimyApiMessage("OK")
            }
            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 logout_confirmation() {
        /* si c'est une connexion partner qui est active */
        if (typeof (stored_part) != "undefined") {
            removeCookie_part('tokenmysypart', { path: '/' });
            history.push("/recherche-formation");
        }
    }

    function logout() {
        confirmAlert({
            title: 'Deconnexion ?',
            message: 'Confirmez la deconnexion',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => logout_confirmation()
                },
                {
                    label: 'Non',
                    onClick: () => { return }
                }
            ]
        });
    }


    const imgchangeHandler = (event) => {
        let file_size = event.target.files[0].size;

        //or if you like to have name and type
        let file_name = event.target.files[0].name;
        let file_type = event.target.files[0].type;


        //alert("file_size =  "+file_size+" file_type = "+file_type+" a = "+a);
        if (file_size > 100000) {
            alert("L'image doit faire moins de 1 mega Kilo Octets");
            return;
        }
        setisimgSelectedfile(event.target.files[0]);
        setisimgSelected(true);
        setuserimgprofil(URL.createObjectURL(event.target.files[0]));
    };


    function GetPartnerNameFromToken(event) {

        var form = new FormData();

        //console.log(" GetPartnerNameFromToken stored_cookie = ", stored_cookie);

        form.append("token", stored_cookie);

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

        axios.post(myurl, form).then(res => {
            if (String(res.data.status) === String("true")) {
                //console.log(" In GetPartnerNameFromToken  res.data.status = " + res.data.status);
                //console.log(" In GetPartnerNameFromToken  res.data.message = " + res.data.message);
                setparntername(JSON.parse(res.data.message).nom);
                if (JSON.parse(res.data.message).pack_service) {
                    setpartnerPackService(JSON.parse(res.data.message).pack_service);
                }
                else {
                    setpartnerPackService("Aucun Service");
                }

                if (JSON.parse(res.data.message).nb_formation) {
                    setparnternbformation(JSON.parse(res.data.message).nb_formation);
                }
                else {
                    setparnternbformation("");
                }


                if (JSON.parse(res.data.message).ispending) {
                    setpartnerstatus(JSON.parse(res.data.message).ispending);
                }

                if (JSON.parse(res.data.message).firstconnexion &&
                    String(JSON.parse(res.data.message).firstconnexion) === "0") {
                    setfirstConnexion("0");
                } else {
                    setfirstConnexion("1");
                }
            }
            else {
                //console.log(" In GetPartnerNameFromToken  res.data.status = " + res.data.status);
                //console.log(" In GetPartnerNameFromToken  res.data.message = " + res.data.message);

            }


        }).catch((error) => {
            console.warn('In GetPartnerNameFromToken Not good man :( mysearchtext = ');

        })
    }

    function sendImage(e) {
        var formData = new FormData();

        formData.append('File', isimgSelectedfile);
        formData.append("token", stored_part);
        formData.append("type", "partner");
        fetch(
            process.env.REACT_APP_API_URL + "myclass/api/recordImage/",
            {
                method: 'POST',
                body: formData,
            }
        ).then((response) => response.json())
            .then((result) => {
                //console.log('Success:', result['message']);
                setisimgSelected(false);

            })
            .catch((error) => {
                console.error('Error:');
                setisimgSelected(true);
            });
    };




    // Create a reference to the hidden file input element
    const hiddenFileInput = React.useRef(null);

    // Programatically click the hidden file input element
    // when the Button component is clicked
    const handleClick = event => {
        hiddenFileInput.current.click();
    };
    // Call a function (passed as a prop from the parent component)
    // to handle the user-selected file 
    const handleChange = event => {
        const fileUploaded = event.target.files[0];
        props.handleFile(fileUploaded);
    };

    function alertactivecompte() {
        alert(" Vous devez ajouter un mode de Paiement pour acceder à cette fonctionnalité");
    }

    function ValideFirstConnexion() {
        setfirstConnexion("");
        setmenu("abonnement");
    }

    const [formation_file_name, setformation_file_name] = useState();
    const [CheckSalesOrder_api, setCheckSalesOrder_api] = useState("");
    const [CheckSalesOrder_message, setCheckSalesOrder_message] = useState("");
    function CheckSalesOrder(event) {

        var form = new FormData();

        formData.append("token", stored_part);
        formData.append("orderid", orderid);

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

        axios.post(myurl, form).then(res => {
            if (String(res.data.status) === String("true")) {
                setCheckSalesOrder_api("true")
            }
            else {
                setCheckSalesOrder_api("false")
                setCheckSalesOrder_message(String(res.data.message))
            }


        }).catch((error) => {
            //console.log('In CheckSalesOrder ', error);
            setCheckSalesOrder_api("false")

        })
    }

    const [GetPartnerLMSData_api, setGetPartnerLMSData_api] = useState();
    const [GetPartnerLMSData_result, setGetPartnerLMSData_result] = useState();
    const [GetPartnerLMSData_message, setGetPartnerLMSData_message] = useState();

    const [partner_lms_url, setpartner_lms_url] = useState();
    const [has_partner_lms_url, sethas_partner_lms_url] = useState();

    function GetPartnerLMSData(event) {

        var form = new FormData();

        form.append("token", stored_cookie);

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

        axios.post(myurl, form).then(res => {
            if (String(res.data.status) === String("true")) {
                //console.log(" In GetPartnerLMSData  res.data.status = " + res.data.status);
                //console.log(" In GetPartnerLMSData  res.data.message = " + res.data.message);
                setGetPartnerLMSData_api("true");
                setGetPartnerLMSData_result(res.data.message);


                var my_lms_url = "";
                if (JSON.parse(res.data.message).lms_account &&
                    String(JSON.parse(res.data.message).lms_account) === "1") {
                    sethas_partner_lms_url(JSON.parse(res.data.message).lms_account);
                    my_lms_url = (JSON.parse(res.data.message).lms_virtualhost_url) + "user_portal.php?recid=" + encodeURIComponent(JSON.parse(res.data.message).lms_part_recid) +
                        "&mysytoken=" + encodeURIComponent(JSON.parse(res.data.message).lms_pwd_mask);

                    //console.log(" ### LMS url = ", my_lms_url);
                    setpartner_lms_url(my_lms_url);
                }

            }
            else {
                setGetPartnerLMSData_api("false");
                setGetPartnerLMSData_message(res.data.message);
            }


        }).catch((error) => {
            console.warn('In GetPartnerLMSData Not good man :( mysearchtext = ', error);
            setGetPartnerLMSData_api("false");

        })
    }

    const [deplie_hebergement, setdeplie_hebergement] = useState();
    function ftion_deplie_hebergement() {
        if (String(deplie_hebergement) === "1") {
            setdeplie_hebergement();
        } else {
            setdeplie_hebergement("1");
        }

    }
    const [deplie_mes_clients, setdeplie_mes_clients] = useState();
    function ftion_deplie_mes_clients() {
        if (String(deplie_mes_clients) === "1") {
            setdeplie_mes_clients();
        } else {
            setdeplie_mes_clients("1");
        }

    }


    return (

        <div className="partner">
            <Helmet>
                <title>Partenaires editeurs formations</title>
                <meta name="description" content="backoffice partenaire editeurs formation" />
                <meta name="robots" content="index,follow" />
            </Helmet>
            <Header />



            <div className="div_mobile">
                <div className="sub_dib_mobile">
                    <div className="div_gauche">
                        <img class="img-responsive img_user" src={userimgprofil} />


                        {!isimgSelected && <div className="nonlable">
                            <input type="file" id="files" accept="image/*" onChange={imgchangeHandler} style={{ opacity: "0", zIndex: "-1", maxWidth: "5px", maxHeight: "0px" }} />
                            <label for="files" className="label">Changer image</label>


                        </div>}

                        {isimgSelected && <div className="nonlable">
                            <Button variant="outlined" onClick={sendImage} className="enreg">Enregistrer</Button>
                        </div>}

                        <hr />
                        <div className="nom_prenom">   {parntername && <b> {parntername}&nbsp;-&nbsp;{String(partnerPackService).toUpperCase()} ({parnternbformation})</b>}
                            {!parntername && <b> Partenaire </b>} </div>
                        <hr className="my_hr" />
                        {String(menu) !== "infopartner" && <div className="sousmenu" onClick={PersonnalData}>   <FcHome className="icone_menu" /> MES INFORMATIONS</div>}
                        {String(menu) === "infopartner" && <div className="sousmenu_selected" onClick={PersonnalData}  >  <FcHome className="icone_menu" />  MES INFORMATIONS</div>}
                        <hr className="my_hr" />

                        {String(menu) !== "creation" && <div className="sousmenu" onClick={CreateTraining}> <FcAddDatabase className="icone_menu" /> CREER FORMATION</div>}
                        {String(menu) === "creation" && <div className="sousmenu_selected" onClick={CreateTraining}> <FcAddDatabase className="icone_menu" /> CREER FORMATION</div>}
                        <hr className="my_hr" />

                        {String(menu) !== "affichage" && <div className="sousmenu" onClick={DiplaytrainingList}  > <FcList className="icone_menu" /> MES FORMATIONS</div>}
                        {String(menu) === "affichage" && <div className="sousmenu_selected" onClick={DiplaytrainingList}  ><FcList className="icone_menu" />  MES FORMATIONS</div>}
                        <hr className="my_hr" />

                        {String(menu) !== "mes_sessions" && <div className="sousmenu" onClick={DiplaySessionList}  > <FcFlowChart className="icone_menu" /> MES SESSIONS </div>}
                        {String(menu) === "mes_sessions" && <div className="sousmenu_selected" onClick={DiplaySessionList}  ><FcFlowChart className="icone_menu" />  MES SESSIONS</div>}
                        <hr className="my_hr" />

                        {String(menu) !== "mes_stagiaires" && <div className="sousmenu" onClick={DiplayStagiaireList}  > <FcReading className="icone_menu" /> MES STAGIAIRES </div>}
                        {String(menu) === "mes_stagiaires" && <div className="sousmenu_selected" onClick={DiplayStagiaireList}  ><FcReading className="icone_menu" />  MES STAGIAIRES</div>}
                        <hr className="my_hr" />

                        {String(menu) !== "mes_employes" && <div className="sousmenu" onClick={DisplayeEmployeList}  > <GiTeacher className="icone_menu" /> MES EMPLOYES </div>}
                        {String(menu) === "mes_employes" && <div className="sousmenu_selected" onClick={DisplayeEmployeList}  ><GiTeacher className="icone_menu" />  MES EMPLOYES</div>}
                        <hr className="my_hr" />

                        {String(menu) !== "mon_materiel" && <div className="sousmenu" onClick={DisplayeMaterielList}  > <BsTools className="icone_menu" /> MON MATERIEL </div>}
                        {String(menu) === "mon_materiel" && <div className="sousmenu_selected" onClick={DisplayeMaterielList}  ><BsTools className="icone_menu" />  MON MATERIEL </div>}
                        <hr className="my_hr" />


                        {String(menu) !== "abonnement" && <div className="sousmenu" onClick={Abonnement_func} > <FcKey className="icone_menu" /> ABONNEMENT </div>}
                        {String(menu) === "abonnement" && <div className="sousmenu_selected" onClick={Abonnement_func} >  <FcKey className="icone_menu" /> ABONNEMENT </div>}
                        <hr className="my_hr" />


                        {String(menu) !== "pricing" && <div className="sousmenu" onClick={pricing_func} ><FcCurrencyExchange className="icone_menu" /> MES PRIX </div>}
                        {String(menu) === "pricing" && <div className="sousmenu_selected" onClick={pricing_func} > <FcCurrencyExchange className="icone_menu" />MES PRIX </div>}
                        <hr className="my_hr" />



                        {String(menu) !== "facture" && <div className="sousmenu" onClick={DisplayFacure}  ><FcFeedback className="icone_menu" /> FACTURATION</div>}
                        {String(menu) === "facture" && <div className="sousmenu_selected" onClick={DisplayFacure}  > <FcFeedback className="icone_menu" />FACTURATION</div>}
                        <hr className="my_hr" />

                        {String(menu) !== "statistique" && <div className="sousmenu" onClick={DisplayStat}> <FcBullish className="icone_menu" /> STATISTIQUES</div>}
                        {String(menu) === "statistique" && <div className="sousmenu_selected" onClick={DisplayStat}> <FcBullish className="icone_menu" /> STATISTIQUES</div>}
                        <hr className="my_hr" />
                        <div class="separator"> Mes Clients </div>


                        <div>
                            <hr className="my_hr" />
                            {String(menu) !== "mes_clients" && <div className="sousmenu" onClick={mes_clients_func}>&nbsp;&nbsp;<FcBusinesswoman className="icone_menu" />&nbsp;MES CLIENTS</div>}
                            {String(menu) === "mes_clients" && <div className="sousmenu_selected" onClick={mes_clients_func}> &nbsp;&nbsp; <FcBusinesswoman className="icone_menu" />&nbsp;MES CLIENTS</div>}
                        </div>

                        <div>
                            <hr className="my_hr" />
                            {String(menu) !== "mes_devis" && <div className="sousmenu" onClick={"mes_devis_func"}>&nbsp;&nbsp;<FcCandleSticks className="icone_menu" />&nbsp;MES DEVIS</div>}
                            {String(menu) === "mes_devis" && <div className="sousmenu_selected" onClick={"mes_devis_func"}> &nbsp;&nbsp; <FcCandleSticks className="icone_menu" />&nbsp;MES DEVIS</div>}
                        </div>

                        <div>
                            <hr className="my_hr" />
                            {String(menu) !== "mes_cmd" && <div className="sousmenu" onClick={"mes_cmd_func"}>&nbsp;&nbsp;<FcCollect className="icone_menu" />&nbsp;MES COMMANDES</div>}
                            {String(menu) === "mes_cmd" && <div className="sousmenu_selected" onClick={"mes_cmd_func"}> &nbsp;&nbsp; <FcCollect className="icone_menu" />&nbsp;MES COMMANDES</div>}
                        </div>

                        <div>
                            <hr className="my_hr" />
                            {String(menu) !== "mes_facture" && <div className="sousmenu" onClick={"mes_cmd_func"}>&nbsp;&nbsp;<FcKindle className="icone_menu" />&nbsp;MES FACTURES</div>}
                            {String(menu) === "mes_facture" && <div className="sousmenu_selected" onClick={"mes_cmd_func"}> &nbsp;&nbsp; <FcCollect FcKindle="icone_menu" />&nbsp;MES FACTURES</div>}
                        </div>


                        <div class="separator"> Espace E-Learning </div>


                        {String(has_partner_lms_url) === "1" && <div className="sousmenu" onClick={(e) => {
                            e.preventDefault();
                            window.open(
                                partner_lms_url,
                                '_blank'
                            );
                        }}>&nbsp;&nbsp;<FcVideoCall className="icone_menu" />&nbsp;MON HEBERGEMENT </div>}

                        {String(has_partner_lms_url) === "1" && <div>
                            <hr className="my_hr" />
                            {String(menu) !== "statistique" && <div className="sousmenu" onClick={DisplaySetUpLMS}>&nbsp;&nbsp;<FcServices className="icone_menu" />&nbsp;CONFIGURATION</div>}
                            {String(menu) === "statistique" && <div className="sousmenu_hebergement_lms" onClick={DisplaySetUpLMS}> &nbsp;&nbsp; <FcServices className="icone_menu" />&nbsp;CONFIGURATION</div>}
                        </div>}



                        <hr className="my_hr" />
                    </div>

                    {String(firstConnexion) === "1" &&
                        <div className="div_droite firstConnexion">
                            <div className="firstConnexion_text">
                                <b>Cher partenaire, c'est votre première connexion, </b> <br /> &nbsp;<br />
                                Nous sommes ravis de vous accueillir dans notre aventure MySy.
                                Pour commencer à publier vos formations, veuillez choisir une formule d'abonnement en cliquant <Button onClick={ValideFirstConnexion} className="firstConnexion_bton"> &nbsp; &nbsp;<FaHandPointRight /> &nbsp; &nbsp; ici</Button><br />
                                &nbsp; <br /> Merci.
                            </div>

                        </div>}


                    {String(myApiResponse) === String("false") && <div className="div_droite">
                        <div className="koUpdateData"> Impossible de contacter  l'hote distant. Merci de contacter votre administrateur  </div>
                    </div>

                    }

                    {String(menu) === "affichage" &&
                        <div className="div_droite">
                            <PartnerTranings ispending={partnerstatus} currentpack={partnerPackService} />
                        </div>
                    }

                </div>

                {String(menu) === "checkout" && <div className="div_droite">
                    <Button onClick={"returntoorder"} className="btn_retour_ps"> Retour aux produits & Services </Button>
                    <CheckOut packs={location.state.new_pack} periodicity={location.state.period} mypackprice={location.state.price} />
                </div>

                }

                {String(menu) === "creation" &&
                    <div className="div_droite">


                        <div className="parter_div_droite_haut">
                            {String(apiexcelimportmessage) === String("true") &&
                                <div className="parter_div_filtrer_row okUpdateData">
                                    {excelimportmessage}<br />&nbsp;<br />

                                </div>

                            }
                            {String(apiexcelimportmessage) === String("false") &&
                                <div className="parter_div_filtrer_row koUpdateData">
                                    Impossible de traiter le fichier <br />
                                    <u> <b> {excelimportmessage} </b></u>
                                    <br />&nbsp;<br />
                                </div>

                            }

                            {String(apiexcelimportmessage) === String("-1") &&
                                <div className="parter_div_filtrer_row koUpdateData">
                                    Impossible de traiter le fichier <br />&nbsp;<br />
                                </div>

                            }


                            <div className="parter_div_filtrer_row">
                                <div>


                                    {String(partnerstatus) === String("0") && <div className="parter_div_filtrer_row_gauche">

                                        <Button variant="outlined" onClick={changeHandler2} className="detail_class_submenu" style={{
                                            "background": "#c8cfd5",
                                            "minWidth": "15rem", "color": "black", "width": "auto"
                                        }}
                                            id='menu_import_formation' name='menu_import_formation'>Choisir un fichier et importer des formations &nbsp; <SendIcon />
                                        </Button><br />
                                        {formation_file_name && <nav className="okUpdateData"><i>{formation_file_name}</i></nav>}
                                        <input type="file"
                                            accept=".csv"
                                            ref={hiddenFileInput_formation}
                                            style={{ display: 'none' }}
                                            name="liste_formation_file"
                                            onChange={handleSubmission}
                                        />



                                        <a href='/sample/template_import.csv' download>Télécharger un fichier modèle</a>

                                        <br />

                                        {/* <input type="file" name="file" accept=".csv" onChange={changeHandler} /> <br /> */}
                                        <br />&nbsp;
                                        <div className="import_excel_text">

                                            <nav className="titre1">  Comment utiliser le fichier ? </nav>
                                            <nav style={{ "color": "orange" }}>
                                                Dans le fichier à importer, seules les colonnes suivantes sont obligatoires :
                                                <ul>
                                                    <li>external_code : C'est le code de la formation chez vous, editeur de la formation </li>
                                                    <li> titre : Le titre de la formation </li>
                                                    <li> domaine : Le domaine au quel est rattaché la formation</li>
                                                    <li> description : La descriptin de la formation</li>
                                                </ul>
                                            </nav>
                                            Pour le reste, <br />
                                            <ul>
                                                <li> Il s'agit d'un fichier csv. Les colonnes sont separées par des ";"</li>
                                                <li> A l'interieur d'une même colonne, les informations sont separées par des ";"     </li>
                                                <li> Champ 'Metier' :  les valeurs acceptées sont : IT, RH, vente, dev_perso, Graphisme, Management, Digital, Office, Autre</li>
                                                <li> ...</li>
                                            </ul>
                                            <a href='/sample/MySy_Import_formation_csv.pdf' download>Télécharger le guide complet pour plus d'informations</a><br />
                                        </div>
                                        <div style={{ "width": "50%" }}> &nbsp; </div>





                                    </div>}

                                    {String(partnerstatus) !== String("0") && <div className="parter_div_filtrer_row_gauche">


                                        Import excel d'une formation <a href='/sample/template_import.csv' download>Télécharger un fichier modèle</a>

                                        <br />

                                        <input type="file" name="file" onChange={""} accept=".csv" />


                                        <br />
                                        <div align="right">
                                            <Button onClick={alertactivecompte} variant="contained" endIcon={<SendIcon />}> Importer </Button>
                                        </div>

                                    </div>}
                                </div>

                                <br />

                            </div>
                        </div>
                        <div className="parter_div_droite_bas">
                            <div className="titre1_bis"> Création manuelle d'une formation </div>
                            <TrainingForm mytrainingclass={{ 'ref': '', 'dist': 'Oui', 'plus_produit': '0' }} ispending={partnerstatus}
                                currentpack={String(partnerPackService).toUpperCase()} />
                        </div>

                    </div>
                }


                {String(menu) === "infopartner" &&
                    <div className="div_droite">

                        <PartnerInfo />

                    </div>
                }

                {String(menu) === "statistique" &&
                    <div className="div_droite">
                        <PartenairStat />
                    </div>
                }

                {String(menu) === "setuplms" &&
                    <div className="div_droite">
                        <HebergementLms />
                    </div>
                }


                {String(menu) === "mes_sessions" &&
                    <div className="div_droite">
                        <DisplayPartnerSession />
                    </div>
                }

                {String(menu) === "mes_employes" &&
                    <div className="div_droite">
                        <Employes />
                    </div>
                }


                {String(menu) === "mon_materiel" &&
                    <div className="div_droite">
                        <Materiels />
                    </div>
                }


                {String(menu) === "facture" && <div className="div_droite">

                    <Facture currentpack={partnerPackService} />
                </div>
                }

                {String(menu) === "pricing" && <div className="div_droite">

                    <Pricing />
                </div>
                }

                {String(menu) === "mes_stagiaires" && <div className="div_droite">

                    <DisplayPartnerStagiaires />
                </div>
                }

                {String(menu) === "abonnement" && <div className="div_droite">

                    <Abonnement currentpack={partnerPackService} />
                </div>
                }

                {String(menu) === "ordervalide" && orderid && packs && <div className="div_droite">
                    <OrderConfirmation num_cmd={orderid} packs={String(packs).toLocaleUpperCase()} />
                </div>
                }

                {String(menu) === "mes_clients" && <div className="div_droite">

                    <Partner_Client />
                </div>
                }


                <div className="pieddepage">
                    <Footer />
                </div>

            </div>

        </div>


    )
}


export default Partner;