import React, { useRef, useState, useEffect } from "react";
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import Button from '@mui/material/Button';
import axios from "axios";
import { getCookie, setCookie } from 'react-use-cookie';
import { useHistory } from "react-router-dom";
import CheckOut from "./CheckOut";
import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import { Editor } from '@tinymce/tinymce-react';
import parse from 'html-react-parser';
import { FcViewDetails, FcDisapprove } from "react-icons/fc";
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip } from 'react-tooltip'
import add_plus from "../mysy_img/plus.png";
import excel_icone from "../mysy_img/excel_icone.png";
import participants from "../mysy_img/participants.png";
import fileDownload from 'js-file-download'
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import { FcCancel, FcApproval, FcAcceptDatabase, FcPrint } from "react-icons/fc";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { format } from 'date-fns'
import moment from "moment";
import InputAdornment from '@mui/material/InputAdornment';
import { AiFillCloseCircle } from "react-icons/ai";
import Box from '@mui/material/Box';
import { Typography, LinearProgress } from '@mui/material';
import styled from 'styled-components';
import { CiTrash } from "react-icons/ci";
import { MdAddCircleOutline, MdRemoveCircleOutline } from "react-icons/md";
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';

const DisplayPartnerSession = (props) => {
    const history = useHistory();
    const [submenu, setsubmenu] = useState("");
    const [rowss, setRows] = useState([]);
    const [actionmass_preinsc_val, setactionmass_preinsc_val] = useState();
    const [one_SessionstartDateInscription, setone_SessionstartDateInscription] = useState();
    const [one_SessionendDateInscription, setone_SessionendDateInscription] = useState();
    const [one_SessionendDate, setone_SessionendDate] = useState();
    const [one_SessionstartDate, setone_SessionstartDate] = useState();
    const [one_urlpreview_certif, setone_urlpreview_certif] = useState();
    const [one_field_contenu_ftion, setone_field_contenu_ftion] = useState("");

    const filters = [
        { value: 'code_session', label: 'Code Session' },
        { value: 'class_title', label: 'Titre Formation' },
        { value: 'certif', label: 'Certification' }
    ]

    const [selectedfilt1, setselectedfilt1] = useState("");
    const [selectedfilt2, setselectedfilt2] = useState("");
    const [selectedfilt3, setselectedfilt3] = useState("");
    const [reftrainingtoupdate, setreftrainingtoupdate] = useState();
    const [externalcodetraining_toupdate, setexternalcodetraining_toupdate] = useState();
    const [updatetraining, setupdatetraining] = useState(false);

    function Clearselectedfilt1() {
        setselectedfilt1("");
    }

    function selectedFilter1(event) {
        setselectedfilt1(event.value);
    }

    function selectedFilter2(event) {
        setselectedfilt2(event.value);
    }

    function selectedFilter3(event) {
        setselectedfilt3(event.value);
    }

    function CancelFiltre2(event) {
        setselectedfilt2("");
    }

    function CancelFiltre3(event) {
        setselectedfilt3("");
    }

    function closeTrainingForm() {
        setupdatetraining(false);
    }

    const [selectedtraining, setselectedtraining] = useState([])

    const BorderLinearProgress = styled(LinearProgress)(() => ({
        height: "20px",
        width: "60px",
        borderRadius: "2px",
        backgroundColor: " #ebf5fb",
        "& .MuiLinearProgress-bar": {
            backgroundColor: "#1bd900",
            transition: "none",
            transformOrigin: "left",
        },
    }));

    const [datagrid_columns_size_model1, setdatagrid_columns_size_model1] = useState(200);
    const [datagrid_columns_size_model2, setdatagrid_columns_size_model2] = useState(80);

    const columns = [
        { field: 'id', headerName: 'id', hide: true },
        { field: '_id', headerName: '_id', hide: true },
        { field: 'class_internal_url', headerName: 'class_internal_url', hide: true },
        { field: 'code_session', headerName: 'Code session', hide: false, width: datagrid_columns_size_model1, },
        {
            field: 'statut', headerName: 'Statut', hide: false, width: datagrid_columns_size_model1,
            valueFormatter: (params) => {
                if (String(params.value) === "0")
                    return "Inactif";
                else if (String(params.value) === "1")
                    return "Actif";
                else
                    return "?";
            },
        },

        {
            field: 'etape', headerName: 'Etape', hide: false, width: datagrid_columns_size_model1,
            valueFormatter: (params) => {
                if (String(params.value) === "0")
                    return "Projet";
                else if (String(params.value) === "1")
                    return "Planification";
                else if (String(params.value) === "2")
                    return "Planifiée";
                else if (String(params.value) === "3")
                    return "Terminée";
                else if (String(params.value) === "4")
                    return "Facturée";
                else if (String(params.value) === "-1")
                    return "Annulée";
                else
                    return "???";
            },
        },


        { field: 'date_debut', headerName: 'Date debut', hide: false, width: datagrid_columns_size_model2, },
        { field: 'date_fin', headerName: 'Datefin', hideable: false, width: datagrid_columns_size_model2, },
        {
            field: 'distantiel', headerName: 'Distantiel', hideable: false, width: datagrid_columns_size_model2,
            valueFormatter: (params) => {
                if (String(params.value) === "0")
                    return "Non";
                else if (String(params.value) === "1")
                    return "Oui";
                else
                    return "?";
            },
        },
        {
            field: 'presentiel', headerName: 'Presentiel', width: datagrid_columns_size_model2,
            valueFormatter: (params) => {
                if (String(params.value) === "0")
                    return "Non";
                else if (String(params.value) === "1")
                    return "Oui";
                else
                    return "?";
            },
        },
        { field: 'formateur', headerName: 'Formateur', width: datagrid_columns_size_model1, hide: true, hideable: true, },
        { field: 'nb_participant', headerName: 'Nb Parti.', width: datagrid_columns_size_model2, align: "center", },
        {
            field: 'taux_replissage', headerName: 'Replissage', align: "center", width: datagrid_columns_size_model1,
            align: "left",
            renderCell: (params) => {
                return (
                    <>
                        <BorderLinearProgress
                            color="success"
                            sx={{ color: "#1bd900" }}
                            variant="determinate"
                            value={(params?.row.taux_replissage * 100).toFixed(2)}
                        />
                        <Typography
                            variant="body2"
                            color="text.secondary"
                        >{`${(params?.row.taux_replissage * 100).toFixed(0)}%`}</Typography>
                    </>
                );
            },
        },
        { field: 'nb_inscrit', headerName: 'Inscrits', width: datagrid_columns_size_model2, align: "center", hide: true, hideable: true, },
        { field: 'nb_preinscrit', headerName: 'Preinscrits', width: datagrid_columns_size_model2, align: "center", hide: true, hideable: true, },
        { field: 'prix_session', headerName: 'Prix', width: datagrid_columns_size_model2, align: "center", },
        { field: 'title', headerName: 'Formation', width: datagrid_columns_size_model1, align: "center", hide: true, hideable: true, },
        { field: 'domaine', headerName: 'Domaine', width: datagrid_columns_size_model1, align: "center", hide: true, hideable: true, },
        { field: 'duration', headerName: 'Durée', width: datagrid_columns_size_model2, align: "center", },
        {
            field: "delete", headerName: 'Supprimer',
            renderCell: (cellValues) => {
                return (

                    <Popup
                        trigger={<Button

                            onClick={(event) => {
                                //handleClick_delete_Session_Formation(event, cellValues);
                            }}
                        >
                            <CiTrash />

                        </Button>}
                        modal
                        nested
                        position="center center"
                    >
                        {close => (
                            <div>
                                <button className="gest_close" onClick={close}>
                                    &times;
                                </button>
                                <div className="gest_header"> MySy Information </div>
                                <div className="gest_content">
                                    {' '}

                                    En confirmant cette opération, la session de formation sera <i><font color="red"> définitivement supprimée</font></i>. <br />

                                </div>
                                <div className="gest_actions">
                                    <div style={{ "width": "45%", "float": "left" }}>
                                        <button className="gest_bton_popup" onClick={(event) => {
                                            handleClick_delete_Session_Formation(event, cellValues);
                                            //console.log('modal closed ');
                                            close();
                                        }}> Valider </button>

                                    </div>
                                    <div style={{ "width": "45%", "float": "right" }}>
                                        <button
                                            className="gest_bton_popup"
                                            onClick={() => {
                                                //console.log('modal closed ');
                                                close();
                                            }}
                                        >
                                            Annuler
                                        </button>
                                    </div>
                                </div>
                            </div>
                        )}
                    </Popup>


                );
            }
        }


    ]

    const columns_preinscrit = [
        { field: 'id', headerName: 'id', hide: true },
        { field: '_id', headerName: '_id', hide: true },
        { field: 'email', headerName: 'email', width: 200, hideable: false, flex: 1 },
        { field: 'nom', headerName: 'nom', width: 150, hide: false, editable: true },
        { field: 'prenom', headerName: 'prenom', width: 150, hide: false, editable: true },
        { field: 'employeur', headerName: 'Employeur', width: 200, hide: false, editable: true },
        { field: 'opco', headerName: 'Centre Opco', width: 150, hide: false, editable: true },
        { field: 'modefinancement', headerName: 'Financement', width: 150, hide: false, editable: true },
        { field: 'amount', headerName: 'Montant Formation', width: 150, type: 'number', hideable: false, flex: 1, editable: true },
        {
            field: "update", headerName: 'Mise à jour',
            renderCell: (cellValues) => {
                return (

                    <Popup
                        trigger={<Button

                            onClick={(event) => {
                                handleClick_accept(event, cellValues);
                            }}
                        >
                            <FcAcceptDatabase />

                        </Button>}
                        modal
                        nested
                        position="center center"
                    >
                        {close => (
                            <div>
                                <button className="gest_close" onClick={close}>
                                    &times;
                                </button>
                                <div className="gest_header"> MySy Information </div>
                                <div className="gest_content">
                                    {' '}

                                    Confirmer la mise à jour des informations du stagiaire
                                </div>
                                <div className="gest_actions">
                                    <div style={{ "width": "45%", "float": "left" }}>
                                        <button className="gest_bton_popup" onClick={(event) => {
                                            handleClick_update_data(event, cellValues);
                                            close();
                                        }}> Valider </button>

                                    </div>
                                    <div style={{ "width": "45%", "float": "right" }}>
                                        <button
                                            className="gest_bton_popup"
                                            onClick={() => {
                                                //console.log('modal closed ');
                                                close();
                                            }}
                                        >
                                            Annuler
                                        </button>
                                    </div>
                                </div>
                            </div>
                        )}
                    </Popup>

                );
            }
        },

        {
            field: "valide", headerName: 'Valider',
            renderCell: (cellValues) => {
                return (

                    <Popup
                        trigger={<Button

                            onClick={(event) => {
                                handleClick_accept(event, cellValues);
                            }}
                        >
                            <FcApproval />

                        </Button>}
                        modal
                        nested
                        position="center center"
                    >
                        {close => (
                            <div>
                                <button className="gest_close" onClick={close}>
                                    &times;
                                </button>
                                <div className="gest_header"> MySy Information </div>
                                <div className="gest_content">
                                    {' '}

                                    En confirmant cette opération, l'inscription du stagiaire sera définitivement validée. <br />
                                    Il (le stagiaire) sera automatiquement notifié par email de la validation de son inscription. <br />
                                    Le stagiaire passera de l'onglet "préinscrit" vers l'onglet "inscription".<br />
                                </div>
                                <div className="gest_actions">
                                    <div style={{ "width": "45%", "float": "left" }}>
                                        <button className="gest_bton_popup" onClick={(event) => {
                                            handleClick_accept(event, cellValues);
                                            //console.log('modal closed ');
                                            close();
                                        }}> Valider </button>

                                    </div>
                                    <div style={{ "width": "45%", "float": "right" }}>
                                        <button
                                            className="gest_bton_popup"
                                            onClick={() => {
                                                //console.log('modal closed ');
                                                close();
                                            }}
                                        >
                                            Annuler
                                        </button>
                                    </div>
                                </div>
                            </div>
                        )}
                    </Popup>

                );
            }
        },

        {
            field: "refuse", headerName: 'Refuser',
            renderCell: (cellValues) => {
                return (

                    <Popup
                        trigger={<Button

                            onClick={(event) => {
                                handleClick_refuse(event, cellValues);
                            }}
                        >
                            <FcCancel />

                        </Button>}
                        modal
                        nested
                        position="center center"
                    >
                        {close => (
                            <div>
                                <button className="gest_close" onClick={close}>
                                    &times;
                                </button>
                                <div className="gest_header"> MySy Information </div>
                                <div className="gest_content">
                                    {' '}

                                    En confirmant cette opération, l'inscription du stagiaire sera <i><font color="red"> refusée</font></i>. <br />
                                    Il (le stagiaire) sera automatiquement <i><font color="red"> notifié par email du refus de son inscription. </font></i> <br />
                                    <br /> Motif du refus : <br />
                                    <textarea name='motif_refus' id="motif_refus" style={{ "width": "80%" }}
                                        rows="3" maxlength="180" />

                                </div>
                                <div className="gest_actions">
                                    <div style={{ "width": "45%", "float": "left" }}>
                                        <button className="gest_bton_popup" onClick={(event) => {
                                            handleClick_refuse(event, cellValues);
                                            //console.log('modal closed ');
                                            close();
                                        }}> Valider </button>

                                    </div>
                                    <div style={{ "width": "45%", "float": "right" }}>
                                        <button
                                            className="gest_bton_popup"
                                            onClick={() => {
                                                //console.log('modal closed ');
                                                close();
                                            }}
                                        >
                                            Annuler
                                        </button>
                                    </div>
                                </div>
                            </div>
                        )}
                    </Popup>


                );
            }
        },
        {
            field: "delete", headerName: 'Supprimer',
            renderCell: (cellValues) => {
                return (

                    <Popup
                        trigger={<Button

                            onClick={(event) => {
                                handleClick_delete(event, cellValues);
                            }}
                        >
                            <CiTrash />

                        </Button>}
                        modal
                        nested
                        position="center center"
                    >
                        {close => (
                            <div>
                                <button className="gest_close" onClick={close}>
                                    &times;
                                </button>
                                <div className="gest_header"> MySy Information </div>
                                <div className="gest_content">
                                    {' '}

                                    En confirmant cette opération, l'inscription du stagiaire sera <i><font color="red"> définitivement supprimée</font></i>. <br />

                                </div>
                                <div className="gest_actions">
                                    <div style={{ "width": "45%", "float": "left" }}>
                                        <button className="gest_bton_popup" onClick={(event) => {
                                            handleClick_delete(event, cellValues);
                                            //console.log('modal closed ');
                                            close();
                                        }}> Valider </button>

                                    </div>
                                    <div style={{ "width": "45%", "float": "right" }}>
                                        <button
                                            className="gest_bton_popup"
                                            onClick={() => {
                                                //console.log('modal closed ');
                                                close();
                                            }}
                                        >
                                            Annuler
                                        </button>
                                    </div>
                                </div>
                            </div>
                        )}
                    </Popup>


                );
            }
        }


    ]

    const columns_inscrit = [
        { field: 'id', headerName: 'id', hide: true },
        { field: '_id', headerName: '_id', hide: true },
        { field: 'email', headerName: 'emails', width: 200, hideable: false, flex: 1, minWidth: 150, maxWidth: 300 },
        { field: 'nom', headerName: 'nom', width: 150, hide: false, editable: true, resizable: true },
        { field: 'prenom', headerName: 'prenom', width: 150, hide: false, editable: true },
        { field: 'employeur', headerName: 'Employeur', width: 200, hide: false, editable: true },
        { field: 'opco', headerName: 'Centre Opco', width: 150, hide: false, editable: true },
        { field: 'modefinancement', headerName: 'Financement', width: 150, hide: false, editable: true },
        { field: 'amount', headerName: 'Montant Formation', width: 150, type: 'number', hideable: false, flex: 1, editable: true },
        {
            field: "sendmail", headerName: 'Email Confirmation',
            renderCell: (cellValues) => {
                return (

                    <Button

                        onClick={(event) => {
                            handleClick_resend_conf_mail(event, cellValues);
                        }}
                    >
                        <FcApproval />

                    </Button>

                );
            }
        },

        {
            field: "Detail", headerName: 'Voir detail',
            renderCell: (cellValues) => {
                return (

                    <Button

                        onClick={(event) => {
                            Display_Detail_Inscription(event, cellValues);
                        }}
                    >
                        <FcViewDetails />

                    </Button>

                );
            }
        },
        {
            field: "Imprimer", headerName: 'Imprimer detail',
            renderCell: (cellValues) => {
                return (

                    <Button

                        onClick={(event) => {
                            Print_Detail_Inscription(event, cellValues);
                        }}
                    >
                        <FcPrint />

                    </Button>

                );
            }
        },



    ]

    const [Getall_TrainingSession_api, setGetall_TrainingSession_api] = useState();
    const [Getall_TrainingSession_message, setGetall_TrainingSession_message] = useState();
    const [Getall_TrainingSession_result, setGetall_TrainingSession_result] = useState();
    function Getall_TrainingSession(event) {

        var form = new FormData();


        // Recuperation des parametres
        var filtre1 = p_filtre1;
        var filtre2 = p_filtre2;


        var filtre1_value = "";
        var filtre2_value = "";
        var filtre3_value = "";
        // Recuperation des valeurs de filtres

        if (p_filtre1_value) {
            filtre1_value = p_filtre1_value;
            form.append(filtre1, filtre1_value);
        }

        if (p_filtre2_value) {
            filtre2_value = p_filtre2_value;
            form.append(filtre2, filtre2_value);
        }


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

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


        // Verification s'il faut faire une recherche avec une option like.
        //console.log(" p_filtre1 = ", p_filtre1, "   filtre1_value = ", filtre1_value);

        if (p_filtre1_value || p_filtre2_value) {
            myurl = process.env.REACT_APP_API_URL + "myclass/api/GetAllValideSessionPartner_List_filter_like/";
        }


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

            if (String(res.data.status) === String("true")) {
                //console.log(" In Getall_TrainingSession  res.data.status = " + res.data.status);
                //console.log(" In Getall_TrainingSession  res.data.message r_class = " + res.data.message);
                setGetall_TrainingSession_api("true");
                setGetall_TrainingSession_result(res.data.message);
                setRows(res.data.message);
            }
            else {
                setGetall_TrainingSession_api("false");
                setGetall_TrainingSession_message(res.data.message);
            }

        }).catch((error) => {
            console.warn('Not good man :( Getall_TrainingSession = ', error);
            setGetall_TrainingSession_api("false");
            //setmyApimyApiMessage("")
        })
    }


    function Getall_TrainingSession_no_filter(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/GetAllValideSessionPartner_List/";


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

            if (String(res.data.status) === String("true")) {
                //console.log(" In Getall_TrainingSession  res.data.status = " + res.data.status);
                //console.log(" In Getall_TrainingSession  res.data.message r_class = " + res.data.message);
                setGetall_TrainingSession_api("true");
                setGetall_TrainingSession_result(res.data.message);
                setRows(res.data.message);
            }
            else {
                setGetall_TrainingSession_api("false");
                setGetall_TrainingSession_message(res.data.message);
            }

        }).catch((error) => {
            console.warn('Not good man :( Getall_TrainingSession = ', error);
            setGetall_TrainingSession_api("false");
            //setmyApimyApiMessage("")
        })
    }



    const [Edite_session, setEdite_session] = useState();
    /* Envoi de l'envoi de l'email de confirmation de la validation de l'inscription */
    function handleClick_edit_session(event, cellValues) {


        var code_session = cellValues.row.code_session;
        setselected_code_session(cellValues.row.code_session);

        var internal_url = cellValues.row.class_internal_url;
        setselected_internal_url(cellValues.row.class_internal_url);

        var session_id = cellValues.row._id;
        setselected_session_id(session_id);


        setselected_class_title(cellValues.row.title);


        setEdite_session("1");
        submenu_detail_session();


        GetCurrentSession(cellValues.row._id, cellValues.row.class_internal_url);

        GetListePreinscrit(cellValues.row._id, cellValues.row.class_internal_url);

        GetListeInscrit(cellValues.row._id, cellValues.row.class_internal_url);
    }


    function handleClick_edit_session_From_Line(selected_row_id) {

        var line = JSON.parse(rowss[selected_row_id]);


        var code_session = line.code_session;
        setselected_code_session(line.code_session);

        var internal_url = line.class_internal_url;
        setselected_internal_url(line.class_internal_url);

        var session_id = line._id;
        setselected_session_id(session_id);


        setselected_class_title(line.title);

        setEdite_session("1");
        submenu_detail_session();

        GetCurrentSession(line._id, line.class_internal_url);

        GetListePreinscrit(line._id, line.class_internal_url);

        GetListeInscrit(line._id, line.class_internal_url);
    }
    const [Get_List_Partner_Clients_api, setGet_List_Partner_Clients_api] = useState();
    const [Get_List_Partner_Clients_message, setGet_List_Partner_Clients_message] = useState();
    const [Get_List_Partner_Clients_result, setGet_List_Partner_Clients_result] = useState();
    function Get_List_Partner_Clients(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/Get_Partner_List_Partner_Client/";

        axios.post(myurl, form).then(res => {
            //console.log(" In Get_List_Partner_Clients  res.data.status = " + res.data.status);
            //console.log(" In Get_List_Partner_Clients  res.data.message r_class = " + res.data.message);

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

        }).catch((error) => {
            console.warn('Not good man :( Get_List_Partner_Clients = ', error);
            setGet_List_Partner_Clients_api("false");
            //setmyApimyApiMessage("")
        })
    }

    useEffect(() => {
        GetCurrentPartnerClass();
        Getall_TrainingSession();
        GetAttestation_Certif();
        Get_List_Partner_Clients();
        let windowWidth = window.innerWidth;
        if (windowWidth < 1001) {
            setdatagrid_columns_size_model2(10);
        }

    }, [])


    async function actionmass_preinsc_Traitemet() {
    }

    const [selectionModel, setSelectionModel] = React.useState([]);

    const actionmass_preinsc = (event) => {
        const value = event.target.value;

        if (String(value) === "valider" || String(value) === "refuser") {
            setactionmass_preinsc_val(value);
        }
        else {
            setactionmass_preinsc_val();
        }
    }

    function submenu_preinscrit() {
        setsubmenu("preinscrit");

        if (document.getElementById("preinscrit")) {
            document.getElementById("preinscrit").style.backgroundColor = "#104277";
            document.getElementById("preinscrit").style.color = "white";
        }

        if (document.getElementById("detail_session")) {
            document.getElementById("detail_session").style.backgroundColor = "#d8edfc";
            document.getElementById("detail_session").style.color = "black";
        }

        if (document.getElementById("inscrit")) {
            document.getElementById("inscrit").style.backgroundColor = "#d8edfc";
            document.getElementById("inscrit").style.color = "black";
        }

    }

    function submenu_inscrit() {
        setsubmenu("inscrit");

        if (document.getElementById("inscrit")) {
            document.getElementById("inscrit").style.backgroundColor = "#104277";
            document.getElementById("inscrit").style.color = "white";
        }

        if (document.getElementById("detail_session")) {
            document.getElementById("detail_session").style.backgroundColor = "#d8edfc";
            document.getElementById("detail_session").style.color = "black";
        }

        if (document.getElementById("preinscrit")) {
            document.getElementById("preinscrit").style.backgroundColor = "#d8edfc";
            document.getElementById("preinscrit").style.color = "black";
        }

    }

    async function submenu_detail_session() {
        setsubmenu("detail_session");

        await sleep(5);
        if (!edit_session_form) {
            desableSessionFields();
        }

        if (document.getElementById("detail_session")) {
            document.getElementById("detail_session").style.backgroundColor = "#104277";
            document.getElementById("detail_session").style.color = "white";
        }

        if (document.getElementById("inscrit")) {
            document.getElementById("inscrit").style.backgroundColor = "#d8edfc";
            document.getElementById("inscrit").style.color = "black";
        }

        if (document.getElementById("preinscrit")) {
            document.getElementById("preinscrit").style.backgroundColor = "#d8edfc";
            document.getElementById("preinscrit").style.color = "black";
        }


    }

    function handleClickSessionManagement(event, cellValues) {
        var code_session = cellValues.row.code_session;
        setselected_code_session(cellValues.row.code_session);

        var internal_url = cellValues.row.class_internal_url;
        setselected_internal_url(cellValues.row.class_internal_url);

        var session_id = cellValues.row._id;
        setselected_session_id(session_id);

        setselected_class_title(cellValues.row.title);

        GetListePreinscrit(cellValues.row._id, cellValues.row.class_internal_url);
        GetListeInscrit(cellValues.row._id, cellValues.row.class_internal_url);
    }

    const [selected_code_session, setselected_code_session] = useState();
    const [selected_session_id, setselected_session_id] = useState();
    const [selected_internal_url, setselected_internal_url] = useState();
    const [selected_class_title, setselected_class_title] = useState();

    const [one_selected_internal_url, setone_selected_internal_url] = useState();


    const [liste_participants_file_change_api, setliste_participants_file_change_api] = useState();
    const [liste_participants_file_change_result, setliste_participants_file_change_result] = useState();
    const [liste_participants_file_change_message, setliste_participants_file_change_message] = useState();
    const liste_participants_file_change = 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;
        }

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

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

        formData.append("token", stored_cookie);
        //formData.append("session_id", selected_session_id);
        //formData.append("class_internal_url", selected_internal_url);
        //console.log("token = " + stored_cookie);

        fetch(
            process.env.REACT_APP_API_URL + "myclass/api/AddStagiairetoClass_mass_for_many_session/",
            {
                method: 'POST',
                body: formData,
            }
        )
            .then((response) => response.json())
            .then((result) => {
                if (String(result['status']) === String("true")) {
                    //console.log('Success:', result['message']);
                    setliste_participants_file_change_result(result['message']);
                    setliste_participants_file_change_api("true");
                    GetListePreinscrit(selected_session_id, selected_internal_url);
                    GetListeInscrit(selected_session_id, selected_internal_url);

                    alert(" Les stagiaires ont été correctement importés");
                    submenu_inscrit();

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

                else {
                    setliste_participants_file_change_message(result['message']);
                    setliste_participants_file_change_api("false");
                    alert(result['message']);
                }

            })
            .catch((error) => {
                console.error('Error:', error);
                setliste_participants_file_change_api("false");
                alert(" Impossible d'importer la liste des participants");
            });

    };

    const [session_file_name, setsession_file_name] = useState();
    function submenu_import_session() {
        setsession_file_name();
        setliste_sessions_file_change_api();
        hiddenFileInput_session.current.click();
    }

    const hiddenFileInput_session = React.useRef(null);

    const [addOneSession, setaddOneSession] = useState();
    function submenu_add_one_session() {
        setaddOneSession("1");
        setEdite_session("0");
        submenu_detail_session();

        if (myRef.current) {
            myRef.current.scrollIntoView({ behavior: "smooth" });
        }
    }




    const [addOneParticipant, setaddOneParticipant] = useState();
    function submenu_add_one_participant() {
        setaddOneParticipant("1");

        var myelement;

        if (document.getElementById('ajout_participant')) {
            myelement = document.getElementById('ajout_participant');
        }

        if (myelement) {
            myelement.scrollIntoView({ behavior: 'smooth' });
        }

    }

    function submenu_add_one_participant_inactif() {
        alert(" Vous devez choisir une session.");
    }


    const [participant_file_name, setparticipant_file_name] = useState();
    function submenu_import_participant() {
        setparticipant_file_name();
        setliste_participants_file_change_api();
        hiddenFileInput.current.click();
    }

    const hiddenFileInput = React.useRef(null);

    /* Recuperation de la liste des inscrits */

    const [nb_stagiaire_Inscrit, setnb_stagiaire_Inscrit] = useState("0");


    const [selectionModel_preinsc, setselectionModel_preinsc] = React.useState([]);

    const [selectionModel_insc, setSelectionModel_insc] = React.useState([]);
    const [rowss_insc, setRows_insc] = useState([]);
    const [rowss_preinsc, setRows_preinsc] = useState([]);
    const [GetListePreinscrit_insc_api, setGetListePreinscrit_insc_api] = useState();
    const [GetListePreinscrit_insc_meassage, setGetListePreinscrit_insc_meassage] = useState();
    const [GetListePreinscrit_insc_result, setGetListePreinscrit_insc_result] = useState([])
    function GetListeInscrit(localsessionid, class_internal_url) {
        clean_old_messages();
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("class_internal_url", class_internal_url);
        form.append("session_id", localsessionid);
        form.append("status", "1");

        /*
 
/!\ : Cette fonction a besoin d'un token actif
*/

        if (String(stored_cookie) === String("")) {
            alert(" La session n'est plus valide ");
            history.push("/Connexion");
            return;
        }

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

        fetch(myurl,
            {
                method: 'POST',
                body: form,
            })
            .then((data) => data.json())
            .then((data) => {
                //console.log(' GetListeInscrit :  Success:', data['message'], "data['status'] = ", data['status']);
                setGetListePreinscrit_insc_result(data['message']);
                setRows_insc(data['message']);
                if (String(data['status']) === String("true")) {
                    //console.log("erreur rrrr:" + data['status'])
                    setGetListePreinscrit_insc_api("true");
                    setnb_stagiaire_Inscrit(data['message'].length);
                    //console.log(" ### setnb_stagiaire_Inscrit = ", data['message'].length);

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

                }

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

    }

    const [liste_sessions_file_change_api, setliste_sessions_file_change_api] = useState();
    const [liste_sessions_file_change_result, setliste_sessions_file_change_result] = useState();
    const [liste_sessions_file_change_message, setliste_sessions_file_change_message] = useState();
    const liste_sessions_file_change = event => {
        clean_old_messages();

        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;
        }

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

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

        formData.append("token", stored_cookie);
        //console.log("token = " + stored_cookie);

        fetch(
            process.env.REACT_APP_API_URL + "myclass/api/Add_Update_SessionFormation_mass_for_many_class/",
            {
                method: 'POST',
                body: formData,
            }
        )
            .then((response) => response.json())
            .then((result) => {

                console.log(" ## result['status'] = ", result['status'])

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

                else if (String(result['status']) === String("true")) {
                    //console.log('Success:', result['message']);
                    setliste_sessions_file_change_result(result['message']);
                    setliste_sessions_file_change_api("true");
                    GetCurrentClass_trainingsession();
                    //clearSessionFields();
                    Getall_TrainingSession();
                    alert(" Les sessions ont été correctement importées");

                }

                else {
                    setliste_sessions_file_change_message(result['message']);
                    setliste_sessions_file_change_api("false");
                    alert('Erreur: ' + result['message']);

                }


            })
            .catch((error) => {
                console.error('Error:', error);
                setliste_sessions_file_change_api("false");
                alert(" Impossible d'importer les sessions");
            });

    }

    const [GetCurrentClass_trainingsession_api, setGetCurrentClass_trainingsession_api] = useState();
    const [GetCurrentClass_trainingsession_message, setGetCurrentClass_trainingsession_message] = useState();
    const [GetCurrentClass_trainingsession_result, setGetCurrentClass_trainingsession_result] = useState();
    function GetCurrentClass_trainingsession(event) {

        var form = new FormData();

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

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

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

            if (String(res.data.status) === String("true")) {
                //console.log(" In GetCurrentClass_trainingsession  res.data.status = " + res.data.status);
                //console.log(" In GetCurrentClass_trainingsession  res.data.message r_class = " + res.data.message);
                setGetCurrentClass_trainingsession_api("true");
                setGetCurrentClass_trainingsession_result(res.data.message);
            }
            else {
                setGetCurrentClass_trainingsession_api("false");
                setGetCurrentClass_trainingsession_message(res.data.message);
            }

        }).catch((error) => {
            console.warn('Not good man :( GetCurrentClass_trainingsession = ', error);
            setGetCurrentClass_trainingsession_api("false");
            //setmyApimyApiMessage("")
        })
    }

    // Cette fonction nettoye les messages avant nouvelle action
    function clean_old_messages() {
        /*setResend_LMS_Credentials_api();
        setResend_LMS_Credentials_message();
        setliste_sessions_file_change_api();
        setCreateSessionFormation_api();
        setUpdateStagiaireData_api();
        setSendInscriptionCancell_api();
        setCreateListEmargement_api();
        setActionMassListEmargement_api();
        setliste_participants_file_change_api();
        setSendEvaluationEmail_api();*/

    }

    const [nb_stagiaire_Preinscrit, setnb_stagiaire_Preinscrit] = useState("0");

    const [GetListePreinscrit_api, setGetListePreinscrit_api] = useState();
    const [GetListePreinscrit_meassage, setGetListePreinscrit_meassage] = useState();
    const [GetListePreinscrit_result, setGetListePreinscrit_result] = useState([])
    function GetListePreinscrit(localsessionid, class_internal_url) {

        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("class_internal_url", class_internal_url);
        form.append("session_id", localsessionid);
        form.append("status", "0");

        //console.log(" ### localsessionid = ", localsessionid, " -- class_internal_url = ", class_internal_url);
        /*
 
       /!\ : Cette fonction a besoin d'un token actif
       */

        if (String(stored_cookie) === String("")) {
            alert(" La session n'est plus valide");
            history.push("/Connexion");
            return;
        }



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

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

                //console.log(" #### LENGHT  GetListePreinscrit = ", data['message'].length); 
                if (String(data['status']) === String("Err_Connexion")) {
                    alert('Erreur: ' + data['message']);
                    history.push("/Connexion");
                }
                else if (String(data['status']) === String("true")) {
                    setGetListePreinscrit_api("true");
                    setnb_stagiaire_Preinscrit(data['message'].length);

                }
                else {
                    //console.log("erreur rrrr:" + data['status'])
                    setGetListePreinscrit_api("false");
                    alert(data['message']);

                }

            }).catch((error) => {
                console.error('Error:', error);
                setGetListePreinscrit_api("false");
                alert(" Impossible de recuperer la liste des préinscriptions");
            });

    }

    const [One_Create_Participant_api, setOne_Create_Participant_api] = useState();
    const [One_Create_Participant_message, setOne_Create_Participant_message] = useState();
    const [One_Create_Participant_result, setOne_Create_Participant_result] = useState();
    function One_Create_Participant() {
        clean_old_messages();
        var form = new FormData();
        var nb_participant = "0";
        var prix_session;


        var one_nom_part = p_one_nom_part;
        if (one_nom_part.trim() == "") {
            alert(" Vous devez saisir le nom du participant");
            return;
        }

        var one_prenom_part = p_one_prenom_part;
        if (one_prenom_part.trim() == "") {
            alert(" Vous devez saisir le prenom du participant");
            return;
        }

        var one_email_part = p_one_email_part;
        console.log(" one_email_part = ", one_email_part);
        if (one_email_part.trim() == "") {
            alert(" Vous devez saisir l'email du participant");
            return;
        }


        var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
        if (!one_email_part.match(validRegex)) {
            alert("L'adresse email est invalide.");
            return;
        }


        var one_phone_part = p_one_phone_part
        if (one_phone_part.trim() == "") {
            alert(" Vous devez saisir le téléphone du participant");
            return;
        }


        if (selected_code_session.trim() === "" || selected_internal_url.trim() === "") {
            alert(" Vous devez selectionner une session d'abord");
            return;
        }


        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("class_internal_url", selected_internal_url);
        form.append("session_id", selected_session_id);
        form.append("nom", one_nom_part);
        form.append("prenom", one_prenom_part);
        form.append("email", one_email_part);
        form.append("telephone", one_phone_part);
        form.append("status", myinscript_status);
        form.append("modefinancement", "");


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



        axios.post(myurl, form).then(res => {
            //console.log(" In One_Create_Participant  res.data.status = " + res.data.status);
            //console.log(" In One_Create_Participant  res.data.message r_class = " + res.data.message);

            if (String(res.data.status) === String("true")) {
                setOne_Create_Participant_api("true");
                setOne_Create_Participant_result(res.data.message);

                alert(" Le participant a été correctement ajouté");
                setaddOneParticipant("0");
                //setreduction_session("1");
                GetListePreinscrit(selected_session_id, selected_internal_url);
                GetListeInscrit(selected_session_id, selected_internal_url);

                submenu_inscrit();

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

        }).catch((error) => {

            console.warn('One_Create_Participant : Not good man :(  = ' + error);
            setOne_Create_Participant_api("false");

        })
    }


    const status_inscription = [
        {
            value: '1',
            label: 'Inscription',
        },
        {
            value: '0',
            label: 'PréInscription',
        },
        {
            value: '-1',
            label: 'Annulation',
        },
        {
            value: '2',
            label: 'En Cours',
        },

    ];

    const [myinscript_status, setmyinscript_status] = useState("");



    const handleChangeInscription_Status = (event) => {
        const name = event.target.name;
        const value = event.target.value;
        setmyinscript_status(value);
    }

    function One_annuleAdd_Participant() {
        setaddOneParticipant("0");
        var myelement;

        if (document.getElementById('participant_menu_tab')) {
            myelement = document.getElementById('participant_menu_tab');
        }

        if (myelement) {
            myelement.scrollIntoView({ behavior: 'smooth' });
        }
    }


    const [actionmass_insc_val, setactionmass_insc_val] = useState();
    const actionmass_inscrit = (event) => {
        const value = event.target.value;


        if (String(value) === "confirmation" || String(value) === "impression" || String(value) === "annule inscription") {
            setactionmass_insc_val(value);
        }
        else {
            setactionmass_insc_val();
        }
    }


    function GetSelectedRows_Insc_Ids() {


        var tab_tmp = []
        for (var i = 0; i < selectionModel_insc.length; i++) {
            //console.log(" ### selectionModel_insc[i] = ", selectionModel_insc[i]);
            var myid = parseInt(String(selectionModel_insc[i]));
            //var line = JSON.parse(rowss[myid]);
            tab_tmp.push(myid);
        }
        return tab_tmp;

    }

    const [SendInscriptionConfirmation_api, setSendInscriptionConfirmation_api] = useState();
    const [SendInscriptionConfirmation_message, setSendInscriptionConfirmation_message] = useState();
    const [SendInscriptionConfirmation_result, setSendInscriptionConfirmation_result] = useState();
    function SendInscriptionConfirmation(email) {
        clean_old_messages();
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");

        if (selected_code_session.length <= 0) {
            alert(" Vous devez choisir une session");
            return;
        }
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("class_internal_url", selected_internal_url);
        form.append("session_id", selected_session_id);
        form.append("email", email);


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

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

            if (String(res.data.status) === String("true")) {
                //console.log(" In UpdateStagiaireData  res.data.status = " + res.data.status);
                //console.log(" In UpdateStagiaireData  res.data.message r_class = " + res.data.message);
                setSendInscriptionConfirmation_api("true");
                setSendInscriptionConfirmation_result(res.data.message);

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

            }

        }).catch((error) => {

            console.warn('SendInscriptionConfirmation : Not good man :( mysearchtext = ' + error);
            setSendInscriptionConfirmation_api("false");

        })
    }


    async function actionmass_insc_Traitemet() {

        var liste_formation = GetSelectedRows_Insc_Ids();
        for (var i = 0; i < liste_formation.length; i++) {


            var line = JSON.parse(rowss_insc[liste_formation[i]]);
            //console.log(" line = ", line);
            var email = line.email;
            //console.log(" Traitement de email = ", email);
            if (String(actionmass_insc_val) === "confirmation") {

                SendInscriptionConfirmation(email);
            } else if (String(actionmass_insc_val) === "impression") {

                //console.log(" impress mail = ", email);
                DownloadAttendeeDetail_one(email);

            } else if (String(actionmass_insc_val) === "annule inscription") {

                //console.log(" impress mail = ", email);
                SendInscriptionCancell(email);

            }

            await sleep(5);

        }

        setSelectionModel_insc([]);
        setactionmass_insc_val();
        GetListePreinscrit(selected_session_id, selected_internal_url);
        GetListeInscrit(selected_session_id, selected_internal_url);

    }

    const sleep = (milliseconds) => {
        return new Promise(resolve => setTimeout(resolve, milliseconds))
    }


    function DownloadAttendeeDetail_one(addendeeEmail) {


        var trainer = ""
        if (document.getElementsByName("formateur")[0])
            trainer = document.getElementsByName("formateur")[0].value;

        if (trainer == "") {
            alert(" Aucun formateur pour cette session ");
            return;
        }

        if (addendeeEmail == "") {
            alert(" Aucun utilisateur choisi ");
            return;
        }

        const stored_cookie = getCookie('tokenmysypart');

        var nom_fiche_detaillee = "Fiche_Detaillee.pdf";

        var url = process.env.REACT_APP_API_URL + "myclass/api/PrintAttendeeDetail_perSession/" + stored_cookie + "/" + selected_code_session + "/" + addendeeEmail + "/" + selected_internal_url;


        axios.get(url, { responseType: 'blob', },)
            .then((res) => {
                fileDownload(res.data, nom_fiche_detaillee)
            }).catch((error) => {
                console.error('Error:', error);

            });
    }

    const [DeleteStagiaireData_api, setDeleteStagiaireData_api] = useState();
    const [DeleteStagiaireData_message, setDeleteStagiaireData_message] = useState();
    const [DeleteStagiaireData_result, setDeleteStagiaireData_result] = useState();
    function DeleteStagiaireData(nom, prenom, email) {

        setSendInscriptionCancell_api();
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");

        if (selected_code_session.length <= 0) {
            alert(" Vous devez choisir une session");
            return;
        }
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("class_internal_url", selected_internal_url);
        form.append("session_id", selected_session_id);
        form.append("nom", nom);
        form.append("prenom", prenom);
        form.append("email", email);


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

        axios.post(myurl, form).then(res => {
            //console.log(" In DeleteStagiaireData  res.data.status = " + res.data.status);
            //console.log(" In DeleteStagiaireData  res.data.message r_class = " + res.data.message);

            if (String(res.data.status) === String("true")) {
                setDeleteStagiaireData_api("true");
                setDeleteStagiaireData_result(res.data.message);
                GetListePreinscrit(selected_session_id, selected_internal_url);
                GetListeInscrit(selected_session_id, selected_internal_url);

                setretval_ch("1");
                alert(" La mise à jour été correctement faite.")
            }
            else {
                setDeleteStagiaireData_api("false");
                setDeleteStagiaireData_message(res.data.message);
                setretval_ch("-1");
                alert(res.data.message);

            }

        }).catch((error) => {

            console.warn('DeleteStagiaireData : Not good man :( mysearchtext = ' + error);
            setDeleteStagiaireData_api("false");
            setretval_ch("-1");
            alert(" Impossible de supprimer le stagaire");
        })
    }


    function handleClick_delete_Session_Formation(event, cellValues) {
        // Recuperation du motif du refus :

        var session_id = cellValues.row._id;
        Delete_Session_Formation(session_id);
    }

    const [Delete_Session_Formation_api, setDelete_Session_Formation_api] = useState();
    const [Delete_Session_Formation_message, setDelete_Session_Formation_message] = useState();
    const [Delete_Session_Formation_result, setDelete_Session_Formation_result] = useState();
    function Delete_Session_Formation(local_session_id) {

        setSendInscriptionCancell_api();
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");

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

        form.append("session_id", local_session_id);



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

        axios.post(myurl, form).then(res => {
            //console.log(" In Delete_Session_Formation  res.data.status = " + res.data.status);
            //console.log(" In Delete_Session_Formation  res.data.message r_class = " + res.data.message);

            if (String(res.data.status) === String("true")) {
                setDelete_Session_Formation_api("true");
                setDelete_Session_Formation_result(res.data.message);
                setSelectionModel([]);
                setaddOneParticipant();
                setdisplay_detail_insc();
                setselected_code_session();
                setsubmenu();
                Getall_TrainingSession();

                alert(" La session a été correctement supprimée.")
            }
            else {
                setDelete_Session_Formation_api("false");
                setDelete_Session_Formation_message(res.data.message);
                alert(res.data.message);

            }

        }).catch((error) => {

            console.warn('Delete_Session_Formation : Not good man :( mysearchtext = ' + error);
            setDelete_Session_Formation_api("false");
            alert(" Impossible de supprimer la session");
        })
    }


    const [retval_ch, setretval_ch] = useState();

    const [UpdateStagiaireData_api, setUpdateStagiaireData_api] = useState();
    const [UpdateStagiaireData_message, setUpdateStagiaireData_message] = useState();
    const [UpdateStagiaireData_result, setUpdateStagiaireData_result] = useState();
    function Update_One_StagiaireData() {
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");

        if (p_detail_session_class.length <= 0) {
            alert(" Vous devez choisir une session");
            return;
        }
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("class_internal_url", selected_internal_url);
        form.append("session_id", selected_session_id);
        form.append("nom", p_detail_nom);
        form.append("prenom", p_detail_prenom);
        form.append("email", p_detail_mail);

        if (p_detail_employeur)
            form.append("employeur", p_detail_employeur);
        else
            form.append("employeur", "");

        form.append("status", p_detail_status_inscrit);

        if (p_detail_cout)
            form.append("price", p_detail_cout);
        else
            form.append("price", "");

        if (p_detail_mode_fin)
            form.append("modefinancement", p_detail_mode_fin);
        else
            form.append("modefinancement", "");


        if (p_detail_opco)
            form.append("opco", p_detail_opco);
        else
            form.append("opco", "");

        form.append("_id", selected_inscription_id);
        if (p_detail_client_rattachement_nom)
            form.append("client_rattachement_id", p_detail_client_rattachement_nom);
        else
            form.append("client_rattachement_id", "");

        console.log(" form == ", form);



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

        axios.post(myurl, form).then(res => {
            console.log(" In UpdateStagiaireData  res.data.status = " + res.data.status);
            console.log(" In UpdateStagiaireData  res.data.message r_class = " + res.data.message);

            if (String(res.data.status) === String("true")) {
                setUpdateStagiaireData_api("true");
                setUpdateStagiaireData_result(res.data.message);
                setparticipant_data_changed();
                Getall_TrainingSession();
                disableAttendeeDetailFields();
                setparticipant_data_changed();
                setparticipant_data_edit_mode();
                GetAttendee_Data(p_detail_mail, selected_session_id);
                alert(" La mise à jour été correctement faite.");


                //myRef_head.current.scrollIntoView({ behavior: "smooth" });

            }
            else {
                setUpdateStagiaireData_api("false");
                setUpdateStagiaireData_message(res.data.message);
                alert(res.data.message);
            }

        }).catch((error) => {

            console.warn('UpdateStagiaireData : Not good man :( mysearchtext = ' + error);
            setUpdateStagiaireData_api("false");
            alert(" Impossible de mettre à jour le participant");

        })
    }


    const [SendInscriptionCancell_api, setSendInscriptionCancell_api] = useState();
    const [SendInscriptionCancell_message, setSendInscriptionCancell_message] = useState();
    const [SendInscriptionCancell_result, setSendInscriptionCancell_result] = useState();
    function SendInscriptionCancell(email) {

        clean_old_messages();
        setUpdateStagiaireData_api();
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");

        if (selected_code_session.length <= 0) {
            alert(" Vous devez choisir une session");
            return;
        }
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("class_internal_url", selected_internal_url);
        form.append("session_id", selected_session_id);
        form.append("email", email);


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

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

            if (String(res.data.status) === String("true")) {
                //console.log(" In UpdateStagiaireData  res.data.status = " + res.data.status);
                //console.log(" In UpdateStagiaireData  res.data.message r_class = " + res.data.message);
                setSendInscriptionCancell_api("true");
                setSendInscriptionCancell_result(res.data.message);

                GetListePreinscrit(selected_session_id, selected_internal_url);
                GetListeInscrit(selected_session_id, selected_internal_url);

                submenu_inscrit();

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

            }

        }).catch((error) => {

            console.warn('SendInscriptionCancell : Not good man :( mysearchtext = ' + error);
            setSendInscriptionCancell_api("false");

        })
    }



    const [selectedattendeeemail, setselectedattendeeemail] = useState([])

    function DownloadAttendeeAttestation(event) {

        const stored_cookie = getCookie('tokenmysypart');

        var nom_fiche_detaillee = "Attestation.pdf";

        var url = process.env.REACT_APP_API_URL + "myclass/api/PrintAttendeeCertification/" + stored_cookie + "/" + selected_code_session + "/" + selectedattendeeemail + "/" + selected_internal_url;



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

    const datagridSx = {
        borderRadius: 2,
        marginRight: 1,
        marginLeft: 1,
        border: 0,
        "& .MuiDataGrid-main": { borderRadius: 0 },
        /*'& div[data-rowIndex][role="row"]:nth-of-type(5n-4)': {
          color: "blue",
          fontSize: 18,
          //risky
          minHeight: "60px !important",
          height: 60,
          "& div": {
            minHeight: "60px !important",
            height: 60,
            lineHeight: "59px !important"
          }
        },*/
        "& .MuiDataGrid-virtualScrollerRenderZone": {
            "& .MuiDataGrid-row": {
                "&:nth-child(2n)": { backgroundColor: "rgba(235, 235, 235, .7)" }
            }
        },
        "& .MuiDataGrid-columnHeaders": {
            backgroundColor: "#c8cfd5",
            color: "black",
            fontSize: 16
        }
    };

    const editorRef_contenu_ftion = useRef(null);
    const [editorRef_contenu_ftion_limite, seteditorRef_description_limite] = useState(800);

    const one_editorRef_contenu_ftion = useRef(null);
    const [one_editorRef_contenu_ftion_limite, setone_editorRef_description_limite] = useState(800);

    const [field_contenu_ftion, setfield_contenu_ftion] = useState("");
    function editor_contenu_ftion_keyup() {
        setsessionChanged(true);
    }


    function one_editor_contenu_ftion_keyup() {
        setsessionChanged(true);
    }


    function One_annuleSessionUpdate() {
        One_clearSessionFields();
        GetCurrentSession(selected_session_id);
        setsessionChanged(false);
        setCreateSessionFormation_api();
        setCreateSessionFormation_message();
        setone_CreateSessionFormation_api();
        setone_CreateSessionFormation_message();
        setone_CreateSessionFormation_result()
        setaddOneSession();
    }


    let [sessionStatus, setsessionStatus] = useState(false);

    let [sessionChanged, setsessionChanged] = useState(false);


    function desableSessionFields() {

        setedit_session_form(false);
        document.getElementsByName("myclass_title")[0].disabled = true;
        document.getElementsByName("myclass_title")[0].style.backgroundColor = "#ECEFF1";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        setfields1desabled(true);

    }

    let [edit_session_form, setedit_session_form] = useState(false);
    function enableSessionFields() {

        setedit_session_form(true);

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

        setfields1desabled(false);
    }

    function clearSessionFields() {

        if (document.getElementsByName("sessiondatedebut")[0])
            document.getElementsByName("code_session")[0].value = "";

        if (document.getElementsByName("sessiondatedebut")[0])
            document.getElementsByName("sessiondatedebut")[0].value = "";

        if (document.getElementsByName("sessiondatefin")[0])
            document.getElementsByName("sessiondatefin")[0].value = "";

        if (document.getElementsByName("session_status")[0])
            document.getElementsByName("session_status")[0].value = "";

        if (document.getElementsByName("session_etape")[0])
            document.getElementsByName("session_etape")[0].value = "";



        if (document.getElementsByName("adresse")[0])
            document.getElementsByName("adresse")[0].value = "";

        if (document.getElementsByName("code_postal")[0])
            document.getElementsByName("code_postal")[0].value = "";

        if (document.getElementsByName("ville")[0])
            document.getElementsByName("ville")[0].value = "";


        if (document.getElementsByName("pays")[0])
            document.getElementsByName("pays")[0].value = "";

        if (document.getElementsByName("nb_participant")[0])
            document.getElementsByName("nb_participant")[0].value = "";

        if (document.getElementsByName("prix_session")[0])
            document.getElementsByName("prix_session")[0].value = "";

        if (document.getElementsByName("presentiel")[0])
            document.getElementsByName("presentiel")[0].value = "";

        if (document.getElementsByName("session_ondemande")[0])
            document.getElementsByName("session_ondemande")[0].value = "";

        if (document.getElementsByName("distantiel")[0])
            document.getElementsByName("distantiel")[0].value = "";

        if (document.getElementsByName("sessiondatedebutinscription")[0])
            document.getElementsByName("sessiondatedebutinscription")[0].value = "";

        if (document.getElementsByName("sessiondatefininscription")[0])
            document.getElementsByName("sessiondatefininscription")[0].value = "";

        setSessionstartDateInscription();
        setSessionendDateInscription();
        setSessionendDate();
        setSessionstartDate();
        seturlpreview_certif();
        setfield_contenu_ftion();


        setp_myclass_title();
        setp_code_session();
        setp_adresse();
        setp_ville();
        setp_pays();
        setp_formateur();
        setp_lms_class_code();
        setp_nb_participant();
        setp_prix_session();
        setp_session_etape_label();
        setp_session_etape();
        setp_session_status_label();
        setp_session_status();
        setp_session_presentiel_label();
        setp_session_presentiel();
        setp_session_distance_label();
        setp_session_distance();
        setp_session_ondemande_label();
        setp_session_ondemande();



    }


    function One_clearSessionFields() {
        document.getElementsByName("one_code_session")[0].value = "";
        document.getElementsByName("one_sessiondatedebut")[0].value = "";
        document.getElementsByName("one_sessiondatefin")[0].value = "";

        if (document.getElementsByName("one_adresse")[0])
            document.getElementsByName("one_adresse")[0].value = "";

        if (document.getElementsByName("one_code_postal")[0])
            document.getElementsByName("one_code_postal")[0].value = "";

        if (document.getElementsByName("one_ville")[0])
            document.getElementsByName("one_ville")[0].value = "";

        if (document.getElementsByName("one_nb_participant")[0])
            document.getElementsByName("one_nb_participant")[0].value = "";

        if (document.getElementsByName("one_prix_session")[0])
            document.getElementsByName("one_prix_session")[0].value = "";

        if (document.getElementsByName("one_presentiel")[0])
            document.getElementsByName("one_presentiel")[0].value = "";

        if (document.getElementsByName("one_session_ondemande")[0])
            document.getElementsByName("one_session_ondemande")[0].value = "";

        if (document.getElementsByName("one_distantiel")[0])
            document.getElementsByName("one_distantiel")[0].value = "";

        if (document.getElementsByName("one_sessiondatedebutinscription")[0])
            document.getElementsByName("one_sessiondatedebutinscription")[0].value = "";

        if (document.getElementsByName("one_sessiondatefininscription")[0])
            document.getElementsByName("one_sessiondatefininscription")[0].value = "";

        setone_SessionstartDateInscription();
        setone_SessionendDateInscription();
        setone_SessionendDate();
        setone_SessionstartDate();
        setone_urlpreview_certif();
        setone_field_contenu_ftion();
    }

    const [is_lms_class_code, setis_lms_class_code] = useState();

    const [CreateSessionFormation_api, setCreateSessionFormation_api] = useState();
    const [CreateSessionFormation_message, setCreateSessionFormation_message] = useState();
    const [CreateSessionFormation_result, setCreateSessionFormation_result] = useState();
    function CreateSessionFormation() {
        clean_old_messages();
        var form = new FormData();
        var nb_participant = "0";
        var prix_session;


        if (selected_internal_url.trim() == "") {
            alert(" Vous devez choisir une formation ");
            return;
        }

        if (!p_session_etape) {
            alert(" Vous devez choisir une étape");
            return;
        }



        if (selected_code_session.length <= 0) {
            alert(" Vous devez choisir une session");
            return;
        }

        var new_code_session = ""
        if (document.getElementById("code_session") && document.getElementById("code_session").value != "") {
            new_code_session = document.getElementById("code_session").value;
        }
        if (new_code_session.trim() == "") {
            alert(" Le code session est obligatoire");
            return;
        }


        nb_participant = ""
        if (document.getElementById("nb_participant") && document.getElementById("nb_participant").value != "") {
            nb_participant = document.getElementById("nb_participant").value;
        }
        if (nb_participant.trim() == "") {
            alert(" Le nombre de participants est obligatoire");
            return;
        }

        prix_session = ""
        if (document.getElementById("prix_session") && document.getElementById("prix_session").value != "") {
            prix_session = document.getElementById("prix_session").value;
        }
        if (prix_session.trim() == "") {
            alert(" Le prix de la session est vide");
            return;
        }

        var session_ondemande = p_session_ondemande



        var presentiel = p_session_presentiel
        if (presentiel.trim() == "") {
            alert(" Vous devez preciser si la session est en présentiel");
            return;
        }

        var distantiel = p_session_distance
        if (distantiel.trim() == "") {
            alert(" Vous devez preciser si la session est en distantiel");
            return;
        }



        if (String(document.getElementById("sessiondatedebutinscription").value).trim() == "") {
            alert(" La date de debut des inscriptions est obligatoire");
            return;
        }

        if (String(document.getElementById("sessiondatefininscription").value).trim() == "") {
            alert(" La date de fin des inscriptions est obligatoire");
            return;
        }

        var adress = "";
        if (document.getElementById("adresse") && document.getElementById("adresse").value != "")
            adress = document.getElementById("adresse").value;

        var codepostal = "";
        if (document.getElementById("code_postal") && document.getElementById("code_postal").value != "")
            codepostal = document.getElementById("code_postal").value;


        var ville = "";
        if (document.getElementById("ville") && document.getElementById("ville").value != "")
            ville = document.getElementById("ville").value;

        var code_session = "";
        if (document.getElementById("code_session") && document.getElementById("code_session").value != "")
            code_session = document.getElementById("code_session").value;

        var formateur = "";
        if (document.getElementById("formateur") && document.getElementById("formateur").value != "")
            formateur = document.getElementById("formateur").value;


        var lms_class_code = "";
        if (document.getElementById("lms_class_code") && document.getElementById("lms_class_code").value != "") {
            lms_class_code = document.getElementById("lms_class_code").value;

        }




        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("session_id", GetCurrentSession_id);
        form.append("class_internal_url", selected_internal_url);
        form.append("date_debut", format(SessionstartDate, 'dd/MM/yyyy kk:mm:ss'));
        form.append("date_fin", format(SessionendDate, 'dd/MM/yyyy kk:mm:ss'));
        form.append("prix_session", prix_session);
        form.append("nb_participant", nb_participant);
        form.append("session_ondemande", session_ondemande);
        form.append("presentiel", presentiel);
        form.append("distantiel", distantiel);
        form.append("adresse", adress);
        form.append("code_postal", codepostal);
        form.append("ville", ville);
        if (p_pays)
            form.append("pays", p_pays);

        else
            form.append("pays", "");

        form.append("code_session", code_session);
        form.append("formateur", formateur);
        form.append("lms_class_code", lms_class_code);
        form.append("date_debut_inscription", format(SessionstartDateInscription, 'dd/MM/yyyy kk:mm:ss'));
        form.append("date_fin_inscription", format(SessionendDateInscription, 'dd/MM/yyyy kk:mm:ss'));
        form.append("attestation_certif", selectedCertif);

        form.append("session_status", p_session_status);
        form.append("session_etape", p_session_etape);
        var contenu_ftion = "";
        if (editorRef_contenu_ftion.current) {
            contenu_ftion = editorRef_contenu_ftion.current.getContent();

            if (parse(contenu_ftion.replace(/(<([^>]+)>)/ig, '')).length > editorRef_contenu_ftion_limite) {
                alert(" Champ 'Contenu de la formation', limite depassée !")
                return;
            }
        }
        form.append("contenu_ftion", contenu_ftion);



        //console.log(" ### CreateSessionFormation form = ", form);

        //return;

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



        axios.post(myurl, form).then(res => {
            //console.log(" In CreateSessionFormation  res.data.status = " + res.data.status);
            //console.log(" In CreateSessionFormation  res.data.message r_class = " + res.data.message);

            if (String(res.data.status) === String("true")) {
                setCreateSessionFormation_api("true");
                setCreateSessionFormation_result(res.data.message);
                setsessionChanged(false);
                desableSessionFields();
                Getall_TrainingSession();
                GetCurrentSession(selected_session_id, selected_internal_url);
                alert(String(res.data.message));

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

        }).catch((error) => {

            console.warn('CreateSessionFormation : Not good man :( mysearchtext = ' + error);
            setCreateSessionFormation_api("false");
            alert(" Impossible de mettre à jour la session");

        })
    }


    const [one_CreateSessionFormation_api, setone_CreateSessionFormation_api] = useState();
    const [one_CreateSessionFormation_message, setone_CreateSessionFormation_message] = useState();
    const [one_CreateSessionFormation_result, setone_CreateSessionFormation_result] = useState();

    function One_CreateSessionFormation() {
        clean_old_messages();
        var form = new FormData();


        var one_myclass_title = ""


        if (document.getElementsByName("one_myclass_title")[0] && document.getElementsByName("one_myclass_title")[0].value != "") {
            one_myclass_title = document.getElementsByName("one_myclass_title")[0].value;
        }
        if (one_myclass_title.trim() == "") {
            alert(" Vous devez choisir une formation ");
            return;
        }


        code_session = p_one_nb_participant

        if (code_session.trim() == "") {
            alert(" Vous devez saisir un code session");
            return;
        }



        var nb_participant = ""
        if (document.getElementById("one_nb_participant") && document.getElementById("one_nb_participant").value != "") {
            nb_participant = document.getElementById("one_nb_participant").value;
        }
        if (nb_participant.trim() == "") {
            const response = window.confirm("Le nombre de participants est vide. Continuer ?");
            if (!response) {
                return;
            }
        }

        var prix_session = p_one_prix_session


        var one_session_ondemande = p_one_session_ondemande

        var presentiel = p_one_session_presentiel;

        if (presentiel.trim() === "") {
            const response = window.confirm(" Vous devez preciser si la session est en présentiel. Continuer ?");
            if (!response) {
                return;
            }
        }


        var distantiel = p_one_session_distance;

        if (distantiel.trim() == "") {

            const response = window.confirm(" Vous devez preciser si la session est en distantiel. Continuer ?");
            if (!response) {
                return;
            }

        }

        if (String(document.getElementById("one_sessiondatedebut").value).trim() == "") {
            window.alert("La date de debut de session est obligatoire.");
            return;
        }

        if (String(document.getElementById("one_sessiondatefin").value).trim() == "") {
            window.alert(" La date de fin de session est obligatoire.");
            return;
        }


        if (String(document.getElementById("one_sessiondatedebutinscription").value).trim() == "") {

            window.alert("La date de debut des inscriptions est obligatoire. Continuer ?");
            return;
        }

        if (String(document.getElementById("one_sessiondatefininscription").value).trim() == "") {
            window.alert(" La date de fin des inscriptions est obligatoire");
            return;
        }

        var adress = "";
        if (document.getElementById("one_adresse") && document.getElementById("one_adresse").value != "")
            adress = document.getElementById("one_adresse").value;

        var codepostal = "";
        if (document.getElementById("one_code_postal") && document.getElementById("one_code_postal").value != "")
            codepostal = document.getElementById("one_code_postal").value;


        var ville = "";
        if (document.getElementById("one_ville") && document.getElementById("one_ville").value != "")
            ville = document.getElementById("one_ville").value;

        var code_session = "";
        if (document.getElementById("one_code_session") && document.getElementById("one_code_session").value != "")
            code_session = document.getElementById("one_code_session").value;

        var formateur = "";
        if (document.getElementById("one_formateur") && document.getElementById("one_formateur").value != "")
            formateur = document.getElementById("one_formateur").value;


        var lms_class_code = "";
        if (document.getElementById("one_lms_class_code") && document.getElementById("one_lms_class_code").value != "") {
            lms_class_code = document.getElementById("one_lms_class_code").value;

        }

        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("code_session", p_one_code_session);
        form.append("class_internal_url", one_selected_internal_url);
        form.append("date_debut", format(one_SessionstartDate, 'dd/MM/yyyy kk:mm:ss'));
        form.append("date_fin", format(one_SessionendDate, 'dd/MM/yyyy kk:mm:ss'));
        form.append("prix_session", p_one_prix_session);
        form.append("nb_participant", p_one_nb_participant);
        form.append("session_ondemande", p_one_session_ondemande);
        form.append("presentiel", p_one_session_presentiel);
        form.append("distantiel", p_one_session_distance);
        form.append("adresse", p_one_adresse);
        form.append("code_postal", p_one_code_postal);
        form.append("ville", p_one_ville);
        form.append("pays", p_one_pays);
        form.append("formateur", p_one_formateur);
        form.append("lms_class_code", p_one_lms_class_code);
        form.append("session_status", p_one_session_status);
        form.append("date_debut_inscription", format(one_SessionstartDateInscription, 'dd/MM/yyyy kk:mm:ss'));
        form.append("date_fin_inscription", format(one_SessionendDateInscription, 'dd/MM/yyyy kk:mm:ss'));
        form.append("attestation_certif", one_selectedCertif);

        var contenu_ftion = "";
        if (one_editorRef_contenu_ftion.current) {
            contenu_ftion = one_editorRef_contenu_ftion.current.getContent();

            if (parse(contenu_ftion.replace(/(<([^>]+)>)/ig, '')).length > one_editorRef_contenu_ftion_limite) {
                alert(" Champ 'Contenu de la formation', limite depassée !")
                return;
            }
        }
        form.append("contenu_ftion", contenu_ftion);



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



        axios.post(myurl, form).then(res => {
            //console.log(" In One_CreateSessionFormation  res.data.status = " + res.data.status);
            //console.log(" In One_CreateSessionFormation  res.data.message r_class = " + res.data.message);

            if (String(res.data.status) === String("true")) {
                setone_CreateSessionFormation_api("true");
                setone_CreateSessionFormation_result(res.data.message);
                setsessionChanged(false);
                Getall_TrainingSession();
                alert(res.data.message);
                One_clearSessionFields();
                setaddOneSession();
                //GetCurrentSession(p_one_code_session, one_selected_internal_url);

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

        }).catch((error) => {

            console.warn('One_CreateSessionFormation : Not good man :(  = ' + error);
            setone_CreateSessionFormation_api("false");
            alert("Erreur : Impossible d'ajouter la session");

        })
    }

    let [fields1desabled, setfields1desabled] = useState(true);
    const [detailuser_date_inscription, setdetailuser_date_inscription] = useState();
    const [detailuser_date_evaluation, setdetailuser_date_evaluation] = useState();
    const [detailuser_date_certification, setdetailuser_date_certification] = useState();

    const [SessionstartDateInscription, setSessionstartDateInscription] = useState();
    const [urlpreview_certif, seturlpreview_certif] = useState();
    function handleChangeselectedCertif(event) {

        var val = event.target.value
        //console.log(val);
        GetSpecificAttestation_Certif(val)

        setselectedCertif(val);

        //seturlpreview_certif(val[1]);
    }

    function handleChangeone_selectedCertif(event) {

        var val = event.target.value
        //console.log(val);
        GetSpecificAttestation_Certif(val)

        setone_selectedCertif(val);

        //seturlpreview_certif(val[1]);
    }


    const [p_session_ondemande, setp_session_ondemande] = useState("0");
    const [p_session_ondemande_label, setp_session_ondemande_label] = useState("");

    const [p_session_distance, setp_session_distance] = useState("0");
    const [p_session_distance_label, setp_session_distance_label] = useState("");

    const [p_session_presentiel, setp_session_presentiel] = useState("0");
    const [p_session_presentiel_label, setp_session_presentiel_label] = useState("");

    const [p_session_status, setp_session_status] = useState();
    const [p_session_status_label, setp_session_status_label] = useState();


    const [p_session_etape, setp_session_etape] = useState();
    const [p_session_etape_label, setp_session_etape_label] = useState();


    const [GetCurrentSession_id, setGetCurrentSession_id] = useState();

    const [GetCurrentSession_api, setGetCurrentSession_api] = useState();
    const [GetCurrentSession_message, setGetCurrentSession_message] = useState();
    const [GetCurrentSession_result, setGetCurrentSession_result] = useState();
    function GetCurrentSession(local_session_id, local_selected_internal_url) {

        clean_old_messages();
        clearSessionFields();

        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("class_internal_url", local_selected_internal_url);
        form.append("session_id", local_session_id);

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

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

            if (String(res.data.status) === "true") {
                //console.log(" In GetCurrentSession  res.data.status = " + res.data.status);
                //console.log(" In GetCurrentSession  res.data.message r_class = " + res.data.message);
                //console.log(" In GetCurrentSession  res.data.message len = " + String(res.data.message).length);

                setGetCurrentSession_api("true");
                if (String(res.data.message).length > 0) {
                    setGetCurrentSession_result(res.data.message);
                    var mylocaltraining = JSON.parse(res.data.message);

                    if (mylocaltraining._id) {
                        setGetCurrentSession_id(mylocaltraining._id);
                    }

                    if (mylocaltraining.session_status) {
                        setp_session_status(mylocaltraining.session_status);
                        if (String(mylocaltraining.session_status) === "1")
                            setp_session_status_label("Actif");
                        else
                            setp_session_status_label("Inactif");
                    }

                    if (mylocaltraining.session_etape) {
                        setp_session_etape(mylocaltraining.session_etape);
                        if (String(mylocaltraining.session_etape) === "0")
                            setp_session_etape_label("Projet");
                        else if (String(mylocaltraining.session_etape) === "1")
                            setp_session_etape_label("Planification");
                        else if (String(mylocaltraining.session_etape) === "2")
                            setp_session_etape_label("Planifiée");
                        else if (String(mylocaltraining.session_etape) === "3")
                            setp_session_etape_label("Terminée");
                        else if (String(mylocaltraining.session_etape) === "4")
                            setp_session_etape_label("Facturée");
                        else if (String(mylocaltraining.session_etape) === "-1")
                            setp_session_etape_label("Annulée");

                    } else {


                        setp_session_etape_label("Projet");
                        setp_session_etape("0");
                    }



                    if (mylocaltraining.date_debut) {
                        var date_du = new Date(moment(mylocaltraining.date_debut, "DD/MM/YYYY HH:mm:ss"));
                        setSessionstartDate(date_du);
                    }

                    if (mylocaltraining.date_fin) {
                        var date_fin = new Date(moment(mylocaltraining.date_fin, "DD/MM/YYYY HH:mm:ss"));
                        setSessionendDate(date_fin);
                    }

                    if (mylocaltraining.date_debut_inscription) {
                        var date_du_inscript = new Date(moment(mylocaltraining.date_debut_inscription, "DD/MM/YYYY HH:mm:ss"));
                        setSessionstartDateInscription(date_du_inscript);

                    }

                    if (mylocaltraining.date_fin_inscription) {
                        var date_fin_inscript = new Date(moment(mylocaltraining.date_fin_inscription, "DD/MM/YYYY HH:mm:ss"));
                        setSessionendDateInscription(date_fin_inscript);
                    }

                    if (mylocaltraining.attestation_certif) {
                        setselectedCertif(mylocaltraining.attestation_certif);
                        GetSpecificAttestation_Certif(mylocaltraining.attestation_certif);

                    }

                    document.getElementsByName("myclass_title")[0].value = "";
                    if (mylocaltraining.myclass[0].title)
                        setp_myclass_title(mylocaltraining.myclass[0].title);


                    document.getElementsByName("code_session")[0].value = "";
                    if (mylocaltraining.code_session)
                        setp_code_session(mylocaltraining.code_session);

                    document.getElementsByName("nb_participant")[0].value = "";
                    if (mylocaltraining.nb_participant)
                        setp_nb_participant(mylocaltraining.nb_participant);

                    document.getElementsByName("prix_session")[0].value = "";
                    if (mylocaltraining.prix_session)
                        setp_prix_session(mylocaltraining.prix_session);

                    if (mylocaltraining.distantiel) {
                        setp_session_distance(mylocaltraining.distantiel);
                        if (String(mylocaltraining.distantiel) === "1")
                            setp_session_distance_label("Oui");
                        else
                            setp_session_distance_label("Non")
                    }


                    if (mylocaltraining.session_ondemande) {
                        setp_session_ondemande(mylocaltraining.session_ondemande);
                        if (String(mylocaltraining.session_ondemande) === "1")
                            setp_session_ondemande_label("Oui");
                        else
                            setp_session_ondemande_label("Non")

                    }

                    if (mylocaltraining.presentiel) {
                        setp_session_presentiel(mylocaltraining.presentiel);
                        if (String(mylocaltraining.presentiel) === "1")
                            setp_session_presentiel_label("Oui");
                        else
                            setp_session_presentiel_label("Non")
                    }

                    if (mylocaltraining.contenu_ftion)
                        setfield_contenu_ftion(mylocaltraining.contenu_ftion);



                    document.getElementsByName("adresse")[0].value = "";
                    if (mylocaltraining.adresse)
                        setp_adresse(mylocaltraining.adresse);

                    document.getElementsByName("ville")[0].value = "";
                    if (mylocaltraining.ville) {
                        setp_ville(mylocaltraining.ville);
                    }

                    document.getElementsByName("pays")[0].value = "";
                    if (mylocaltraining.ville) {
                        setp_pays(mylocaltraining.pays);
                    }

                    document.getElementsByName("formateur")[0].value = "";
                    if (mylocaltraining.formateur) {
                        setp_formateur(mylocaltraining.formateur);
                    }

                    document.getElementsByName("lms_class_code")[0].value = "";
                    if (mylocaltraining.lms_class_code) {

                        setis_lms_class_code(mylocaltraining.lms_class_code);
                    }

                    document.getElementsByName("code_postal")[0].value = "";
                    if (mylocaltraining.code_postal)
                        setp_code_postal(mylocaltraining.code_postal);


                    if (String(mylocaltraining.session_status) === "true")
                        setsessionStatus(true);
                    else if (String(mylocaltraining.session_status) === "false")
                        setsessionStatus(false);

                    desableSessionFields();


                    if (myRef.current) {
                        myRef.current.scrollIntoView({ behavior: "smooth" });
                    }
                }

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

            else {
                setGetCurrentSession_api("false");
                setGetCurrentSession_message(res.data.message);
                alert("Erreur : " + res.data.message);
            }

        }).catch((error) => {
            console.warn('Not good man :( GetCurrentSession = ', error);
            setGetCurrentSession_api("false");

        })
    }



    const [p_myclass_title, setp_myclass_title] = useState("");
    const [p_code_session, setp_code_session] = useState("");
    const [p_adresse, setp_adresse] = useState("");
    const [p_code_postal, setp_code_postal] = useState("");
    const [p_ville, setp_ville] = useState("");
    const [p_pays, setp_pays] = useState("");
    const [p_formateur, setp_formateur] = useState("");
    const [p_lms_class_code, setp_lms_class_code] = useState("");
    const [p_nb_participant, setp_nb_participant] = useState("");
    const [p_prix_session, setp_prix_session] = useState("");


    const [p_one_myclass_title, setp_one_myclass_title] = useState("");
    const [p_one_code_session, setp_one_code_session] = useState("");
    const [p_one_code_session_id, setp_one_code_session_id] = useState("");
    const [p_one_adresse, setp_one_adresse] = useState("");
    const [p_one_code_postal, setp_one_code_postal] = useState("");
    const [p_one_ville, setp_one_ville] = useState("");
    const [p_one_pays, setp_one_pays] = useState("");
    const [p_one_formateur, setp_one_formateur] = useState("");
    const [p_one_lms_class_code, setp_one_lms_class_code] = useState("");
    const [p_one_nb_participant, setp_one_nb_participant] = useState("");
    const [p_one_prix_session, setp_one_prix_session] = useState("");
    const [p_one_session_ondemande, setp_one_session_ondemande] = useState("0");
    const [p_one_session_ondemande_label, setp_one_session_ondemande_label] = useState("");
    const [p_one_session_distance, setp_one_session_distance] = useState("0");
    const [p_one_session_distance_label, setp_one_session_distance_label] = useState("");
    const [p_one_session_presentiel, setp_one_session_presentiel] = useState("0");
    const [p_one_session_presentiel_label, setp_one_session_presentiel_label] = useState("");
    const [p_one_session_status, setp_one_session_status] = useState();
    const [p_one_session_status_label, setp_one_session_status_label] = useState();
    const [p_one_session_etape, setp_one_session_etape] = useState();
    const [p_one_session_etape_label, setp_one_session_etape_label] = useState();



    function annuleSessionUpdate() {
        clearSessionFields();
        setsessionChanged(false);
        setCreateSessionFormation_api();
        setCreateSessionFormation_message();
        setone_CreateSessionFormation_api();
        setone_CreateSessionFormation_message();
        setone_CreateSessionFormation_result();
        GetCurrentSession(selected_session_id, selected_internal_url);
    }

    const [SessionstartDate, setSessionstartDate] = useState();

    const filterPassedTime_start = (time) => {
        const currentDate = new Date();
        const selectedDate = new Date(time);

        return currentDate.getTime() < selectedDate.getTime();
    };

    const [selectedCertif, setselectedCertif] = useState();
    const [one_selectedCertif, setone_selectedCertif] = useState();

    const [GetSpecificAttestation_Certif_api, setGetSpecificAttestation_Certif_api] = useState();
    const [GetSpecificAttestation_Certif_message, setGetSpecificAttestation_Certif_message] = useState();
    const [GetSpecificAttestation_Certif_result, setGetSpecificAttestation_Certif_result] = useState();
    function GetSpecificAttestation_Certif(nom) {
        clean_old_messages();
        var form = new FormData();

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

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

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

            if (String(res.data.status) === "true") {
                //console.log(" In GetSpecificAttestation_Certif  res.data.status = " + res.data.status);
                //console.log(" In GetSpecificAttestation_Certif  res.data.message r_class = " + res.data.message);
                setGetSpecificAttestation_Certif_api("true");
                setGetSpecificAttestation_Certif_result(res.data.message);

                var mylocal = JSON.parse(res.data.message);
                //console.log(" ####  (mylocal.preview_url = ", mylocal.preview_url);
                seturlpreview_certif(mylocal.preview_url);


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

        }).catch((error) => {
            console.warn('Not good man :( GetSpecificAttestation_Certif = ', error);
            setGetSpecificAttestation_Certif_api("false");

        })
    }

    const [reduction_session, setreduction_session] = useState("0");
    function Session_small() {
        if (String(reduction_session) === "1") {
            setreduction_session("0");
        }
        else if (String(reduction_session) === "0") {
            setreduction_session("1");
        }

    }

    const [GetAttestation_Certif_api, setGetAttestation_Certif_api] = useState();
    const [GetAttestation_Certif_message, setGetAttestation_Certif_message] = useState();
    const [GetAttestation_Certif_result, setGetAttestation_Certif_result] = useState();
    function GetAttestation_Certif(event) {
        clean_old_messages();
        var form = new FormData();

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

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

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

            if (String(res.data.status) === "true") {
                //console.log(" In GetAttestation_Certif  res.data.status = " + res.data.status);
                //console.log(" In GetAttestation_Certif  res.data.message r_class = " + res.data.message);
                setGetAttestation_Certif_api("true");
                setGetAttestation_Certif_result(res.data.message);
            }
            else if (String(res.data.status) === String("Err_Connexion")) {
                alert('Erreur: ' + res.data.message);
                history.push("/Connexion");
            }
            else {
                setGetAttestation_Certif_api("false");
                setGetAttestation_Certif_message(res.data.message);
            }

        }).catch((error) => {
            console.warn('Not good man :( GetAttestation_Certif = ', error);
            setGetAttestation_Certif_api("false");

        })
    }

    function handleChangeselectedCertif(event) {

        var val = event.target.value
        //console.log(val);
        GetSpecificAttestation_Certif(val)

        setselectedCertif(val);

        //seturlpreview_certif(val[1]);
    }

    const [SessionendDate, setSessionendDate] = useState();

    const filterPassedTime_end = (time) => {
        const currentDate = new Date();
        const selectedDate = new Date(time);

        return currentDate.getTime() < selectedDate.getTime();
    };

    function One_annuleSessionUpdate() {
        One_clearSessionFields();
        //GetCurrentSession(selected_code_session);
        setsessionChanged(false);
        setCreateSessionFormation_api();
        setCreateSessionFormation_message();
        setone_CreateSessionFormation_api();
        setone_CreateSessionFormation_message();
        setone_CreateSessionFormation_result()
        setaddOneSession();
    }
    const [SessionendDateInscription, setSessionendDateInscription] = useState();

    const [GetCurrentPartnerClass_api, setGetCurrentPartnerClass_api] = useState();
    const [GetCurrentPartnerClass_message, setGetCurrentPartnerClass_message] = useState();
    const [GetCurrentPartnerClass_result, setGetCurrentPartnerClass_result] = useState();
    function GetCurrentPartnerClass(event) {
        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);
        }

        //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_partner_class/";

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

            if (String(res.data.status) === String("true")) {
                //console.log(" In GetCurrentPartnerClass  res.data.status = " + res.data.status);
                //console.log(" In GetCurrentPartnerClass  res.data.message r_class = " + res.data.message);
                setGetCurrentPartnerClass_api("true");
                setGetCurrentPartnerClass_result(res.data.message);


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

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

    function close_edit_form() {
        setEdite_session("0");
    }


    function IssessionChanged() {
        setsessionChanged(true);
    }


    /*
# status :  0 ==> Preinscription
# status : 1 ==> Inscription validée
# status : -1 ==> Inscription annulée
"""
*/
    function handleClick_accept(event, cellValues) {

        var montant = String(cellValues.row.amount);
        if (parseFloat(montant).toFixed(2) <= 0) {
            alert(" Le montant de la formation est incorrect");
            return;
        }

        if (String(montant) === "undefined") {
            alert(" Le montant de la formation est incorrect");
            return;
        }



        var _id = cellValues.row._id;
        var nom = cellValues.row.nom;
        var email = cellValues.row.email;
        var prenom = cellValues.row.prenom;
        var opco = cellValues.row.opco;
        if (String(opco) === "undefined") {
            opco = ""
        }

        var modefinancement = cellValues.row.modefinancement;
        if (String(modefinancement) === "undefined") {
            modefinancement = ""
        }

        var status = "1";
        var employeur = cellValues.row.employeur;
        if (String(employeur) === "undefined") {
            employeur = ""
        }


        UpdateStagiaireData(nom, prenom, email, status, montant, opco, modefinancement, employeur, "", _id);
    }


    function UpdateStagiaireData(nom, prenom, email, status, price, opco, modefinancement, employeur, comment, object_id) {

        setSendInscriptionCancell_api();
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");


        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("class_internal_url", selected_internal_url);
        form.append("session_id", selected_session_id);
        form.append("nom", nom);
        form.append("prenom", prenom);
        form.append("email", email);
        form.append("employeur", employeur);
        form.append("status", status);
        form.append("price", price);
        form.append("opco", opco);
        form.append("modefinancement", modefinancement);
        form.append("comment", comment);
        form.append("_id", object_id);

        form.append("client_rattachement_id", p_detail_client_rattachement_id);

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

        axios.post(myurl, form).then(res => {
            //console.log(" In UpdateStagiaireData  res.data.status = " + res.data.status);
            //console.log(" In UpdateStagiaireData  res.data.message r_class = " + res.data.message);

            if (String(res.data.status) === String("true")) {
                setUpdateStagiaireData_api("true");
                setUpdateStagiaireData_result(res.data.message);
                GetListePreinscrit(selected_session_id, selected_internal_url);
                GetListeInscrit(selected_session_id, selected_internal_url);

                setretval_ch("1");
                alert(" La mise à jour été correctement faite.")
            }
            else {
                setUpdateStagiaireData_api("false");
                setUpdateStagiaireData_message(res.data.message);
                setretval_ch("-1");
                alert(res.data.message);

            }

        }).catch((error) => {

            console.warn('UpdateStagiaireData : Not good man :( mysearchtext = ' + error);
            setUpdateStagiaireData_api("false");
            setretval_ch("-1");
            alert(" Impossible d'ajouter le participant")

        })
    }


    function handleClick_update_data(event, cellValues) {


        var montant = String(cellValues.row.amount);
        if (String(montant) === "undefined") {
            montant = "0"
        }

        var _id = cellValues.row._id;
        var nom = cellValues.row.nom;
        var email = cellValues.row.email;
        var prenom = cellValues.row.prenom;
        var opco = cellValues.row.opco;
        if (String(opco) === "undefined") {
            opco = ""
        }

        var modefinancement = cellValues.row.modefinancement;
        if (String(modefinancement) === "undefined") {
            modefinancement = ""
        }

        var status = "0";

        var employeur = cellValues.row.employeur;
        if (String(employeur) === "undefined") {
            employeur = ""
        }

        var comment = "";


        UpdateStagiaireData(nom, prenom, email, status, montant, opco, modefinancement, employeur, comment, _id);
    }

    function handleClick_refuse(event, cellValues) {
        // Recuperation du motif du refus :
        var motif_refus = document.getElementById("motif_refus").value;

        var montant = String(cellValues.row.amount);
        if (String(montant) === "undefined") {
            montant = "0"
        }

        var _id = cellValues.row._id;
        var nom = cellValues.row.nom;
        var email = cellValues.row.email;
        var prenom = cellValues.row.prenom;

        var opco = cellValues.row.opco;
        if (String(opco) === "undefined") {
            opco = ""
        }

        var modefinancement = cellValues.row.modefinancement;
        if (String(modefinancement) === "undefined") {
            modefinancement = ""
        }

        var status = "-1";
        var employeur = cellValues.row.employeur;
        if (String(employeur) === "undefined") {
            employeur = ""
        }

        UpdateStagiaireData(nom, prenom, email, status, montant, opco, modefinancement, employeur, motif_refus, _id);
    }


    function handleClick_delete(event, cellValues) {
        // Recuperation du motif du refus :


        var nom = cellValues.row.nom;
        var email = cellValues.row.email;
        var prenom = cellValues.row.prenom;

        DeleteStagiaireData(nom, prenom, email);
    }


    const [p_one_nom_part, setp_one_nom_part] = useState();
    const [p_one_prenom_part, setp_one_prenom_part] = useState();
    const [p_one_email_part, setp_one_email_part] = useState();
    const [p_one_phone_part, setp_one_phone_part] = useState();
    const [p_one_status_part, setp_one_status_part] = useState();
    const [p_one_status_part_lable, setp_one_status_part_lable] = useState();


    /* Envoi de l'envoi de l'email de confirmation de la validation de l'inscription */
    function handleClick_resend_conf_mail(event, cellValues) {
        var email = cellValues.row.email;
        //alert(" confirmation email = " + email);
        SendInscriptionConfirmation(email);

    }

    const [selected_inscription_id, setselected_inscription_id] = useState("");
    function Display_Detail_Inscription(event, cellValues) {
        clearDetailAttendeFields();
        setdisplay_detail_insc("1")
        setuserimgclassprofil("");
        var montant = String(cellValues.row.amount);
        var nom = cellValues.row.nom;
        var email = cellValues.row.email;
        setselectedattendeeemail(email);

        setselected_inscription_id(cellValues.row._id);
        var prenom = cellValues.row.prenom;
        GetAttendee_Data(email, selected_session_id);
        getStagiaireImages(selected_internal_url, selected_session_id, email,);

    }

    const [print_detail_insc, setprint_detail_insc] = React.useState();
    function Print_Detail_Inscription(event, cellValues) {

        setprint_detail_insc("1")

        var email = cellValues.row.email;
        setselectedattendeeemail(email);
        DownloadAttendeeDetail();

    }

    function DownloadAttendeeDetail(event) {


        var trainer = ""
        if (document.getElementsByName("formateur")[0])
            trainer = document.getElementsByName("formateur")[0].value;

        if (trainer == "") {
            alert(" Aucun formateur pour cette session ");
            return;
        }

        const stored_cookie = getCookie('tokenmysypart');

        var nom_fiche_detaillee = "Fiche_Detaillee.pdf";

        var url = process.env.REACT_APP_API_URL + "myclass/api/PrintAttendeeDetail_perSession/" + stored_cookie + "/" + selected_code_session + "/" + selectedattendeeemail + "/" + selected_internal_url;


        axios.get(url, { responseType: 'blob', },)
            .then((res) => {
                fileDownload(res.data, nom_fiche_detaillee)
            }).catch((error) => {
                console.error('Error:', error);

            });
    }

    const [display_detail_insc, setdisplay_detail_insc] = React.useState();

    const [getPartnerImages_api, setgetPartnerImages_api] = useState();
    const [getPartnerImages_message, setgetPartnerImages_message] = useState();
    const [getPartnerImages_result, setgetPartnerImages_result] = useState();
    function getStagiaireImages(local_internal_url, local_mysession, local_email) {
        var myurl = process.env.REACT_APP_API_URL + "myclass/api/getRecodedStagiaireImage_from_front/";

        var form = new FormData();
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("class_internal_url", local_internal_url);
        form.append("session_id", local_mysession);
        form.append("email", local_email);


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

            //console.log(" getStagiaireImages : In test  res.data.status = " + res.data.status);
            // console.log(" getStagiaireImages: res.data.message.img = " + res.data.message);

            if (String(res.data.status) === "true") {
                setgetPartnerImages_api("true");

                if (JSON.parse(res.data.message).logo_img) {
                    var partner_logo_img = "data:image/png;base64," + JSON.parse(res.data.message).logo_img;
                    setisimgclassSelected(partner_logo_img);
                    setuserimgclassprofil(partner_logo_img);
                    setisimgclassSelected_recid(JSON.parse(res.data.message).logo_img_recid);
                }


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

            }
        }).catch((error) => {
            console.warn('getStagiaireImages ee: Not good man :(  = ', error);
            setgetPartnerImages_api("false");
            setgetPartnerImages_message(" Impossible de recuperer les images/médias du partenaire")
        })

    }

    // Cette fonction remplit la zone detail de la personne inscrite
    const [GetAttendee_api, setGetAttendee_api] = useState();
    const [GetAttendee_message, setGetAttendee_message] = useState();
    const [GetAttendee_result, setGetAttendee_result] = useState();
    function GetAttendee_Data(attendee_email, session_id,) {
        clean_old_messages();
        var form = new FormData();

        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("session_id", session_id);
        form.append("attendee_email", attendee_email);
        form.append("internal_url", selected_internal_url);

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

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

            if (String(res.data.status) === "true") {
                console.log(" In GetAttendee  res.data.status = " + res.data.status);
                console.log(" In GetAttendee  res.data.message r_class = " + res.data.message);
                setGetAttendee_api("true");
                setGetAttendee_result(res.data.message);

                var mylocalattendee = JSON.parse(res.data.message);


                if (mylocalattendee.inscription_validation_date) {
                    var date_du = new Date(moment(mylocalattendee.inscription_validation_date, "DD/MM/YYYY HH:mm:ss"));
                    setdetailuser_date_inscription(date_du);
                }


                document.getElementsByName("detail_session")[0].value = "";
                if (mylocalattendee.code_session)
                    setp_detail_session_class(mylocalattendee.code_session);

                if (mylocalattendee.session_id)
                    setp_detail_session_class_id(mylocalattendee.session_id);


                document.getElementsByName("detail_status_inscript")[0].value = "";
                if (mylocalattendee.status) {
                    setp_detail_status_inscrit(mylocalattendee.status);
                    if (String(mylocalattendee.status) === "1")
                        setp_detail_status_inscrit_label("Inscrit");
                    else if (String(mylocalattendee.status) === "0")
                        setp_detail_status_inscrit_label("Preinsc.");
                    else if (String(mylocalattendee.status) === "-1")
                        setp_detail_status_inscrit_label("Annulé");
                }

                document.getElementsByName("detail_opco")[0].value = "";
                if (mylocalattendee.opco)
                    setp_detail_opco(mylocalattendee.opco);


                document.getElementsByName("detail_client_rattachement")[0].value = "";
                if (mylocalattendee.client_rattachement_id) {
                    setp_detail_client_rattachement_id(mylocalattendee.client_rattachement_id);
                    setp_detail_client_rattachement_nom(mylocalattendee.client_rattachement_nom);

                }


                document.getElementsByName("detail_nom")[0].value = "";
                if (mylocalattendee.nom)
                    setp_detail_nom(mylocalattendee.nom);

                document.getElementsByName("detail_prenom")[0].value = "";
                if (mylocalattendee.prenom)
                    setp_detail_prenom(mylocalattendee.prenom);

                document.getElementsByName("detail_mail")[0].value = "";
                if (mylocalattendee.email) {
                    setp_detail_mail(mylocalattendee.email);
                    setattendee_lms_login(mylocalattendee.email);
                }


                document.getElementsByName("detail_tel")[0].value = "";
                if (mylocalattendee.telephone) {
                    setp_detail_tel(mylocalattendee.telephone);
                }

                document.getElementsByName("detail_adresse")[0].value = "";
                if (mylocalattendee.adresse) {
                    setp_detail_adresse(mylocalattendee.adresse);
                }

                document.getElementsByName("detail_code_postal")[0].value = "";
                if (mylocalattendee.code_postal) {
                    setp_detail_code_postal(mylocalattendee.code_postal);
                }

                document.getElementsByName("detail_ville")[0].value = "";
                if (mylocalattendee.ville) {
                    setp_detail_ville(mylocalattendee.ville);
                }


                document.getElementsByName("detail_cout")[0].value = "";
                if (mylocalattendee.price) {
                    setp_detail_cout(mylocalattendee.price);
                }


                document.getElementsByName("detail_mode_fin")[0].value = "";
                if (mylocalattendee.modefinancement) {
                    setp_detail_mode_fin(mylocalattendee.modefinancement);
                }


                document.getElementsByName("detail_employeur")[0].value = "";
                if (mylocalattendee.employeur) {
                    setp_detail_employeur(mylocalattendee.employeur);
                }

                document.getElementsByName("date_evaluation")[0].value = "";
                if (mylocalattendee.eval_date) {

                    var date_eval = new Date(moment(mylocalattendee.eval_date, "YYYY/MM/DD"));
                    setdetailuser_date_evaluation(date_eval);
                }

                document.getElementsByName("certif_date")[0].value = "";
                if (mylocalattendee.certification_send_date) {
                    //alert(" certification_send_date = ", mylocalattendee.certification_send_date);

                    var date_eval = new Date(moment(mylocalattendee.certification_send_date, "DD/MM/YYYY"));
                    setdetailuser_date_certification(date_eval);
                }



                document.getElementsByName("note_eval")[0].value = "";
                if (mylocalattendee.eval_note) {
                    setp_note_eval(mylocalattendee.eval_note);
                }


                if (mylocalattendee.eval_eval) {
                    setfield_evaluation(mylocalattendee.eval_eval);

                }

                if (mylocalattendee.lms_pwd) {
                    setattendee_lms_pwd("xxxxxx");
                }


                var myelement;

                if (document.getElementById('ajout_participant')) {
                    myelement = document.getElementById('ajout_participant');
                }

                if (myelement) {
                    myelement.scrollIntoView({ behavior: 'smooth' });
                }

                disableAttendeeDetailFields();




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

            else {
                setGetAttendee_api("false");
                setGetAttendee_message(res.data.message);
                alert(res.data.message);
            }

        }).catch((error) => {
            console.warn('Not good man :( GetAttendee = ', error);
            setGetAttendee_api("false");
            alert(" Impossible de recuperer les données du participant");
            //setmyApimyApiMessage("")
        })
    }

    const [isimgclassdeleted, setisimgclassdeleted] = useState("");
    const [isimgclassdeleted_message, setisimgclassdeleted_message] = useState("");
    const [isimgclassSaved, setisimgclassSaved] = useState("");
    const [isimgclassSaved_message, setisimgclassSaved_message] = useState("");

    const [record_Stagiaire_Image_api, setrecord_Stagiaire_Image_api] = useState();
    const [record_Stagiaire_Image_message, setrecord_Stagiaire_Image_message] = useState();
    const [record_Stagiaire_Image_result, setrecord_Stagiaire_Image_result] = useState();
    function record_Stagiaire_Image(l) {

        const formData = new FormData();
        const url = process.env.REACT_APP_API_URL + "myclass/api/Update_Stagiaire_Image/";

        const stored_cookie = getCookie('tokenmysypart');
        formData.append("token", stored_cookie);
        formData.append("class_internal_url", selected_internal_url);
        formData.append("session_id", selected_session_id);
        formData.append("email", selectedattendeeemail);

        console.log(" ### userimgclassprofilchanged =", userimgclassprofilchanged)


        formData.append('file_img', isimgclassSelected);
        formData.append('file_img_recid', isimgclassSelected_recid);


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

                if (String(result['status']) === String("true")) {
                    setrecord_Stagiaire_Image_api("true");
                    setuserimgclassprofilchanged("");
                    alert(" L'image à jour a été mise enregistrée ");

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

            })
            .catch((error) => {
                console.error('Error:', error);
                setrecord_Stagiaire_Image_api("false");
                alert(" Erreur : Impossible d'enregistrer l'image ");

            });


    };


    function removeRecodedLogoImage() {
        if (!isimgclassSelected_recid || String(isimgclassSelected_recid).length < 3) {
            alert(" Image incorrecte. Impossible de la supprimer ");
            return;
        }

        var form = new FormData();

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

        fetch(
            process.env.REACT_APP_API_URL + "myclass/api/DeleteImage_Stagiaire_v2/",
            {
                method: 'POST',
                body: form,
            }
        ).then((response) => response.json())
            .then((result) => {

                console.log(' removeRecodedClassImage : status:', result['status']);
                console.log('removeRecodedClassImage : Success:', result['message']);


                if (String(result['status']) === String("true")) {
                    setisimgclassSelected("");
                    setisimgclassSelected_recid("");
                    setisimgclassSelectedfile("");
                    setuserimgclassprofil("");
                    //getStagiaireImages();

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

                else {
                    alert(result['message']);
                }

            })
            .catch((error) => {
                console.error('Error:', error);
                alert(" Impossible de supprimer l'image ");
            });

    }

    const [Resend_LMS_Credentials_api, setResend_LMS_Credentials_api] = useState();
    const [Resend_LMS_Credentials_result, setResend_LMS_Credentials_result] = useState();
    const [Resend_LMS_Credentials_message, setResend_LMS_Credentials_message] = useState();
    const Resend_LMS_Credentials = event => {

        clean_old_messages();
        const formData = new FormData();

        const stored_cookie = getCookie('tokenmysypart');

        formData.append("token", stored_cookie);
        formData.append("session_id", selected_session_id);

        var local_mail = ""
        if (document.getElementsByName("detail_mail") && document.getElementsByName("detail_mail")[0])
            local_mail = document.getElementsByName("detail_mail")[0].value;

        var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

        if (!local_mail.match(validRegex)) {
            alert("L'adresse email est invalide. Impossible de renvoyer les identifiants");
            return;
        }
        formData.append("email", local_mail);
        formData.append("class_internal_url", selected_internal_url);
        //console.log("token = " + stored_cookie);

        fetch(
            process.env.REACT_APP_API_URL + "myclass/api/LMS_Credential_Sending_mail/",
            {
                method: 'POST',
                body: formData,
            }
        )
            .then((response) => response.json())
            .then((result) => {
                if (String(result['status']) === String("true")) {
                    //console.log('Success:', result['message']);
                    setResend_LMS_Credentials_result(result['message']);
                    setResend_LMS_Credentials_api("true");
                    alert(" Les identifiants de connexion ont été correctement envoyés")
                } else if (String(result['status']) === String("Err_Connexion")) {
                    alert('Erreur: ' + result['message']);
                    history.push("/Connexion");
                }

                else {
                    setResend_LMS_Credentials_message(result['message']);
                    setResend_LMS_Credentials_api("false");
                }

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

    };

    function clearDetailAttendeFields() {

        if (document.getElementsByName("detail_nom") && document.getElementsByName("detail_nom")[0])
            document.getElementsByName("detail_nom")[0].value = "";

        if (document.getElementsByName("detail_prenom") && document.getElementsByName("detail_prenom")[0])
            document.getElementsByName("detail_prenom")[0].value = "";

        if (document.getElementsByName("detail_mail") && document.getElementsByName("detail_mail")[0])
            document.getElementsByName("detail_mail")[0].value = "";

        if (document.getElementsByName("detail_tel") && document.getElementsByName("detail_tel")[0])
            document.getElementsByName("detail_tel")[0].value = "";

        if (document.getElementsByName("detail_adresse") && document.getElementsByName("detail_adresse")[0])
            document.getElementsByName("detail_adresse")[0].value = "";

        if (document.getElementsByName("detail_code_postal") && document.getElementsByName("detail_code_postal")[0])
            document.getElementsByName("detail_code_postal")[0].value = "";

        if (document.getElementsByName("detail_ville") && document.getElementsByName("detail_ville")[0])
            document.getElementsByName("detail_ville")[0].value = "";

        if (document.getElementsByName("detail_incr_date") && document.getElementsByName("detail_incr_date")[0])
            document.getElementsByName("detail_incr_date")[0].value = "";

        if (document.getElementsByName("detail_cout") && document.getElementsByName("detail_cout")[0])
            document.getElementsByName("detail_cout")[0].value = "";

        if (document.getElementsByName("detail_mode_fin") && document.getElementsByName("detail_mode_fin")[0])
            document.getElementsByName("detail_mode_fin")[0].value = "";

        if (document.getElementsByName("detail_employeur") && document.getElementsByName("detail_employeur")[0])
            document.getElementsByName("detail_employeur")[0].value = "";

        if (document.getElementsByName("date_evaluation") && document.getElementsByName("date_evaluation")[0])
            document.getElementsByName("date_evaluation")[0].value = "";

        if (document.getElementsByName("note_eval") && document.getElementsByName("note_eval")[0])
            document.getElementsByName("note_eval")[0].value = "";

        if (document.getElementsByName("certif_date") && document.getElementsByName("certif_date")[0])
            document.getElementsByName("certif_date")[0].value = "";



        setfield_evaluation();
        setdetailuser_date_certification();
        setdetailuser_date_evaluation();


    }
    const [attendee_lms_login, setattendee_lms_login] = useState();
    const [isimgclassSelected, setisimgclassSelected] = useState(false);
    const [isimgclassSelected_recid, setisimgclassSelected_recid] = useState("");
    const [isimgclassSelectedfile, setisimgclassSelectedfile] = useState(false);

    const [userimgclassprofil, setuserimgclassprofil] = useState();
    const [userimgclassprofilchanged, setuserimgclassprofilchanged] = useState("");

    const editorRef_evaluation = useRef(null);
    const [field_evaluation, setfield_evaluation] = useState("");
    function editor_keyup() {
    }


    function editor_contenu_ftion_keyup() {
        setsessionChanged(true);
    }


    function one_editor_contenu_ftion_keyup() {
        setsessionChanged(true);
    }
    const imglogoclasschangeHandler = (event) => {


        let file_size = event.target.files[0].size;

        //or if you like to have name and type
        //console.log(event.target.files);

        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 > 1000000) {
            alert("L'image ne doit pas depasser un 1 Méga octets");
            return;
        }
        setisimgclassSelected(event.target.files[0]);
        setisimgclassSelectedfile(true);

        setuserimgclassprofil(URL.createObjectURL(event.target.files[0]));
        setuserimgclassprofilchanged("1");

    };

    const [SendEvaluationEmail_api, setSendEvaluationEmail_api] = useState();
    const [SendEvaluationEmail_message, setSendEvaluationEmail_message] = useState();
    const [SendEvaluationEmail_result, setSendEvaluationEmail_result] = useState();
    function SendEvaluationEmail() {
        clean_old_messages();
        var form = new FormData();
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("session_id", selected_session_id);
        form.append("attendee_email", selectedattendeeemail);
        form.append("class_internal_url", selected_internal_url);


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

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

            if (String(res.data.status) === String("true")) {
                //console.log(" In SendEvaluationEmail  res.data.status = " + res.data.status);
                //console.log(" In SendEvaluationEmail  res.data.message r_class = " + res.data.message);
                setSendEvaluationEmail_api("true");
                setSendEvaluationEmail_result(res.data.message);

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

        }).catch((error) => {
            console.warn('Not good man :( SendEvaluationEmail = ', error);
            setSendEvaluationEmail_api("false");

        })
    }

    function SendEvaluationEmail_One(email) {

        var form = new FormData();
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("session_id", selected_session_id);
        form.append("attendee_email", email);
        form.append("class_internal_url", selected_internal_url);


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

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

            if (String(res.data.status) === String("true")) {
                //console.log(" In SendEvaluationEmail  res.data.status = " + res.data.status);
                //console.log(" In SendEvaluationEmail  res.data.message r_class = " + res.data.message);
                setSendEvaluationEmail_api("true");
                setSendEvaluationEmail_result(res.data.message);
                alert(" La demande a été correctement envoyée");

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

        }).catch((error) => {
            console.warn('Not good man :( SendEvaluationEmail = ', error);
            setSendEvaluationEmail_api("false");

        })
    }

    const [attendee_lms_pwd, setattendee_lms_pwd] = useState();

    const [SendAttendeeAttestation_api, setSendAttendeeAttestation_api] = useState();
    const [SendAttendeeAttestation_message, setSendAttendeeAttestation_message] = useState();
    const [SendAttendeeAttestation_result, setSendAttendeeAttestation_result] = useState();
    function SendAttendeeAttestation() {
        clean_old_messages();
        var form = new FormData();
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("session_id", selected_session_id);
        form.append("attendee_email", selectedattendeeemail);
        form.append("class_internal_url", selected_internal_url);

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

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

            if (String(res.data.status) === String("true")) {
                //console.log(" In SendAttendeeAttestation  res.data.status = " + res.data.status);
                //console.log(" In SendAttendeeAttestation  res.data.message r_class = " + res.data.message);
                setSendAttendeeAttestation_api("true");
                setSendAttendeeAttestation_result(res.data.message);

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

        }).catch((error) => {
            console.warn('Not good man :( SendAttendeeAttestation = ', error);
            setSendAttendeeAttestation_api("false");

        })

    }

    function desableAttendeeDetailFields() {
        document.getElementsByName("date_evaluation")[0].disabled = true;
        document.getElementsByName("date_evaluation")[0].style.backgroundColor = "#ECEFF1";


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


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


    const [p_filtre1, setp_filtre1] = useState();
    const [p_filtre1_value, setp_filtre1_value] = useState();

    const [p_filtre2, setp_filtre2] = useState();
    const [p_filtre2_value, setp_filtre2_value] = useState();

    function clean_all_filters() {
        setp_filtre1();
        setp_filtre1_value();
        setp_filtre2();
        setp_filtre2_value();

        setnb_stagiaire_Preinscrit("");
        setnb_stagiaire_Inscrit("");
        setSelectionModel([]);
        setRows([]);
        setRows_insc([]);
        setRows_preinsc([]);

        setsubmenu("");

        Getall_TrainingSession_no_filter();
    }

    const myRef = useRef(null)

    let [participant_data_changed, setparticipant_data_changed] = useState();
    let [participant_data_edit_mode, setparticipant_data_edit_mode] = useState();

    function AnnuleAttendeeDetailFields() {

        GetAttendee_Data(selectedattendeeemail, selected_session_id);
        disableAttendeeDetailFields();
        setparticipant_data_changed();
        setparticipant_data_edit_mode();
    }

    function disableAttendeeDetailFields() {
        setparticipant_data_edit_mode("0");


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


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

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

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

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


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


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


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


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

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

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

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

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


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

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

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

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

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


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


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


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

    }

    function EnableAttendeeDetailFields() {
        setparticipant_data_edit_mode("1");

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

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

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



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

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


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


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


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


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

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

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

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

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


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

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

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

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

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


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


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


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

    const [p_detail_nom, setp_detail_nom] = useState();
    const [p_detail_prenom, setp_detail_prenom] = useState();
    const [p_detail_mail, setp_detail_mail] = useState();
    const [p_detail_tel, setp_detail_tel] = useState();
    const [p_detail_adresse, setp_detail_adresse] = useState();
    const [p_detail_code_postal, setp_detail_code_postal] = useState();
    const [p_detail_ville, setp_detail_ville] = useState();
    const [p_detail_cout, setp_detail_cout] = useState();
    const [p_detail_mode_fin, setp_detail_mode_fin] = useState();
    const [p_detail_employeur, setp_detail_employeur] = useState();
    const [p_date_evaluation, setp_date_evaluation] = useState();
    const [p_note_eval, setp_note_eval] = useState();
    const [p_detail_session_class, setp_detail_session_class] = useState();
    const [p_detail_session_class_id, setp_detail_session_class_id] = useState();
    const [p_detail_status_inscrit, setp_detail_status_inscrit] = useState();
    const [p_detail_status_inscrit_label, setp_detail_status_inscrit_label] = useState();
    const [p_detail_opco, setp_detail_opco] = useState();
    const [p_detail_client_rattachement_nom, setp_detail_client_rattachement_nom] = useState();
    const [p_detail_client_rattachement_id, setp_detail_client_rattachement_id] = useState();


    const [Dialog_1_message, setDialog_1_message] = React.useState(false);
    const [Dialog_1_open, setDialog_1_open] = React.useState(false);
    function Dialog_1_handle_change_participant_session(message) {
        setDialog_1_message(message);
        setDialog_1_open(true);
    }

    const Dialog_1_handleClose = () => {
        //alert(" Utiliser le bouton 'fermer' ");
        //setOpen(false);
    };

    const Dialog_1_handleClose_buton = () => {
        setDialog_1_open(false);
    };


    return (
        <div className="displaypartnersession">
            <Dialog
                open={Dialog_1_open}
                onClose={Dialog_1_handleClose}

            >

                <DialogTitle>MySy Information</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        {Dialog_1_message}
                    </DialogContentText>

                </DialogContent>

                <DialogActions>
                    <Button onClick={Dialog_1_handleClose_buton}>OK</Button>

                </DialogActions>
            </Dialog>
            <h3> Vos sessions de formation </h3>

            <div className="titre1">  Utilisez les filtres !</div>
            <div className="div_row" style={{ "marginBottom": "5px" }}>
                <div className="div_row_gauche texte_area_filter" >
                    <TextField
                        name="filtre1"
                        label="Choisir un champ"
                        select
                        sx={{ m: 1, width: '100%' }}
                        value={p_filtre1}
                        onChange={(e) => {
                            setp_filtre1(e.target.value)
                        }}
                    >

                        <MenuItem value="code_session" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }}>Code Session &nbsp;&nbsp;</MenuItem>
                        <MenuItem value="class_title" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Titre Formation &nbsp;</MenuItem>

                    </TextField>
                </div>



                <div className="div_row_droite texte_area_filter_value" >
                    {p_filtre1 &&
                        <TextField
                            sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                            required
                            name="filtre1_value"
                            id="filtre1_value"

                            InputLabelProps={{
                                shrink: true,
                            }}
                            disabled={false}
                            className="disabled_style"
                            value={p_filtre1_value}
                            onChange={(e) => { setp_filtre1_value(e.target.value); }}
                            InputProps={{
                                endAdornment: (
                                    <InputAdornment position="end">
                                        <AiFillCloseCircle
                                            style={{ 'cursor': "pointer", "color": "orangered" }}
                                            onClick={(e) => {
                                                setp_filtre1_value("");
                                            }} />
                                    </InputAdornment>
                                ),
                            }}

                        />

                    }
                </div>
                {p_filtre1 && <div className='filter_bton_add'>
                    <Tooltip id="my-tooltip01" style={{ "fontSize": "12px" }} />
                    <a data-tooltip-id="my-tooltip01" data-tooltip-content="Ajouter une nouvelle ligne de filtre">
                        &nbsp; <MdAddCircleOutline onClick={(e) => {
                            setp_filtre2("1");
                        }} />
                    </a>
                </div>}
                {p_filtre1 && <div className='filter_bton_add'>
                    <Tooltip id="my-tooltip02" style={{ "fontSize": "12px" }} />
                    <a data-tooltip-id="my-tooltip02" data-tooltip-content="Supprimer cette ligne de filtre">
                        &nbsp; <MdRemoveCircleOutline onClick={(e) => {
                            setp_filtre1();
                            setp_filtre1_value();
                        }}
                        />
                    </a>
                </div>}


            </div>

            {p_filtre2 &&
                <div className="div_row" style={{ "marginBottom": "5px" }}>
                    <div className="div_row_gauche texte_area_filter">
                        <TextField
                            name="filtre2"
                            label="Choisir un champ"
                            select
                            sx={{ m: 1, width: '100%' }}
                            options={filters}
                            value={p_filtre2}
                            onChange={(e) => {
                                setp_filtre2(e.target.value)
                            }}
                        >

                            <MenuItem value="code_session" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }}>Code Session &nbsp;&nbsp;</MenuItem>
                            <MenuItem value="class_title" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Titre Formation &nbsp;</MenuItem>

                        </TextField>
                    </div>
                    <div className="div_row_droite texte_area_filter" >
                        {String(p_filtre2).length > 3 &&
                            <TextField
                                sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                required
                                name="filtre2_value"
                                id="filtre2_value"

                                InputLabelProps={{
                                    shrink: true,
                                }}
                                disabled={false}
                                className="disabled_style"
                                value={p_filtre2_value}
                                onChange={(e) => setp_filtre2_value(e.target.value)}
                                InputProps={{
                                    endAdornment: (
                                        <InputAdornment position="end">
                                            <AiFillCloseCircle
                                                style={{ 'cursor': "pointer", "color": "orangered" }}
                                                onClick={(e) => {
                                                    setp_filtre2_value("");
                                                }} />
                                        </InputAdornment>
                                    ),
                                }}

                            />}
                    </div>


                    {String(p_filtre2).length > 3 && <div className='filter_bton_add'>
                        <Tooltip id="my-tooltip04" style={{ "fontSize": "12px" }} />
                        <a data-tooltip-id="my-tooltip04" data-tooltip-content="Supprimer cette ligne de filtre">
                            &nbsp; <MdRemoveCircleOutline
                                onClick={(e) => {
                                    setp_filtre2();
                                    setp_filtre2_value();
                                }}
                            />
                        </a>
                    </div>}
                </div>
            }


            {<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>

                <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
                    <Button variant="contained" className="bton_enreg" onClick={Getall_TrainingSession}>Rechercher
                    </Button>
                </div>

                <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
                    <Button variant="contained" className="bton_annule" onClick={clean_all_filters}>Annuler
                    </Button>

                </div>

            </div>}



            <br />
            <div style={{ "textAlign": "left", "float": "left", "width": "100%" }} id="participant_menu_tab">


                <div className="session_data">
                    <div style={{ "border": "None" }}>

                        <div style={{ height: 550, width: '100%', paddingRight: '1px' }}>
                            &nbsp;
                            <Box
                                sx={{
                                    height: 500,
                                    width: '100%',
                                    paddingRight: '1px',
                                    '& .cell--presentiel': {
                                        backgroundColor: '#a2cf6e',
                                        color: '#1a3e72',
                                        fontWeight: 'bold',
                                    },
                                    '& .cell--distantiel': {
                                        backgroundColor: '#ffac33',
                                        color: '#1a3e72',
                                        fontWeight: 'light',
                                    },


                                    '& .cell--etape--projet': {
                                        backgroundColor: '#E6F7C8',
                                        color: '#1a3e72',
                                        fontWeight: 'light',
                                    },
                                    '& .cell--etape--planification': {
                                        backgroundColor: '#E6CEAA',
                                        color: '#1a3e72',
                                        fontWeight: 'light',
                                    },
                                    '& .cell--etape--planifie': {
                                        backgroundColor: '#F4ECF7',
                                        color: '#1a3e72',
                                        fontWeight: 'light',
                                    },
                                    '& .cell--etape--termine': {
                                        backgroundColor: '#D6EAF8',
                                        color: '#1a3e72',
                                        fontWeight: 'light',
                                    },
                                    '& .cell--etape--facture': {
                                        backgroundColor: '#D5F5E3',
                                        color: '#1a3e72',
                                        fontWeight: 'light',
                                    },
                                    '& .cell--etape--annule': {
                                        backgroundColor: '#566573',
                                        color: '#1a3e72',
                                        fontWeight: 'light',
                                    },


                                    '& .line--etape--projet': {
                                        backgroundColor: 'yellow',
                                        color: 'black',
                                    },
                                    '& .line--etape--planification': {
                                        backgroundColor: 'red',
                                        color: 'black',
                                    },
                                    '& .line--etape--planifie': {
                                        backgroundColor: 'blue',
                                        color: 'black',
                                    },
                                    '& .line--etape--termine': {
                                        backgroundColor: 'orange',
                                        color: 'black',
                                    },
                                    '& .line--etape--facture': {
                                        backgroundColor: '#D5F5E3',
                                        color: 'black',
                                    },
                                    '& .line--etape--annule': {
                                        backgroundColor: '#566573',
                                        color: 'white',
                                    },

                                }}
                            >
                                <DataGrid
                                    checkboxSelection
                                    onSelectionModelChange={(newSelectionModel) => {
                                        setSelectionModel(newSelectionModel);
                                        if (newSelectionModel.length === 1)
                                            handleClick_edit_session_From_Line(newSelectionModel);
                                        if (newSelectionModel.length !== 1) {
                                            setaddOneParticipant();
                                            setdisplay_detail_insc();
                                            setselected_code_session();
                                            setsubmenu();
                                        }
                                    }}
                                    selectionModel={selectionModel}

                                    localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
                                    rows={rowss.map((item, index) => (
                                        {
                                            id: index,
                                            class_internal_url: JSON.parse(item).class_internal_url,
                                            code_session: JSON.parse(item).code_session,
                                            _id: JSON.parse(item)._id,
                                            date_debut: JSON.parse(item).date_debut,
                                            date_fin: JSON.parse(item).date_fin,
                                            distantiel: JSON.parse(item).distantiel,
                                            presentiel: JSON.parse(item).presentiel,
                                            statut: JSON.parse(item).session_status,
                                            etape: JSON.parse(item).session_etape,
                                            formateur: JSON.parse(item).formateur,
                                            nb_participant: JSON.parse(item).nb_participant,
                                            title: JSON.parse(item).title,
                                            domaine: JSON.parse(item).domaine,
                                            taux_replissage: JSON.parse(item).taux_replissage,
                                            nb_inscrit: JSON.parse(item).nb_inscrit,
                                            nb_preinscrit: JSON.parse(item).nb_preinscrit,
                                            duration: JSON.parse(item).duration_concat,

                                        }
                                    ))}

                                    columns={columns}
                                    pageSize={10}
                                    className="datagridclass"

                                    rowsPerPageOptions={[10]}
                                    //disableSelectionOnClick
                                    components={{
                                        Toolbar: GridToolbar,
                                    }}
                                    sx={datagridSx}
                                    getCellClassName={(params) => {
                                        //field === 'distantiel'
                                        if (params.field === 'distantiel' && String(params.value) === "1") {
                                            return 'cell--distantiel';
                                        }
                                        if (params.field === "presentiel" && String(params.value) == "1") {
                                            return 'cell--presentiel';
                                        }


                                        //field === "etape"
                                        if (params.field === "etape" && String(params.value) == "0") {
                                            return 'cell--etape--projet';
                                        }

                                        if (params.field === "etape" && String(params.value) == "1") {
                                            return 'cell--etape--planification';
                                        }

                                        if (params.field === "etape" && String(params.value) == "2") {
                                            return 'cell--etape--planifie';
                                        }

                                        if (params.field === "etape" && String(params.value) == "3") {
                                            return 'cell--etape--termine';
                                        }

                                        if (params.field === "etape" && String(params.value) == "4") {
                                            return 'cell--etape--facture';
                                        }

                                        if (params.field === "etape" && String(params.value) == "-1") {
                                            return 'cell--etape--annule';
                                        }

                                    }}
                                /*getRowClassName={(params) => {
                                    console.log(" params.row.etape = ", params.row.etape);
                                    if (String(params.row.etape) === "-1") {
                                        console.log("annule");
                                        return 'line--etape--annule';
                                    }
                                    if (String(params.row.etape) === "0") {
                                        console.log("projet - red");
                                        return 'line--etape--projet';
                                    }
                                    if (String(params.row.etape) === "1") {
                                        console.log("planification - yellow");
                                        return 'line--etape--planification';
                                    }
                                    if (String(params.row.etape) === "2") {
                                        console.log("planifie");
                                        return 'line--etape--planifie';
                                    }
                                    if (String(params.row.etape) === "3") {
                                        console.log("termine - orange");
                                        return 'line--etape--termine';
                                    }
                                    if (String(params.row.etape) === "4") {
                                        console.log("facture");
                                        return 'line--etape--facture';
                                    }

                                }}*/

                                />
                            </Box>
                            <br />

                        </div>

                    </div>

                </div>

                <div className="div_row" style={{ "border": "None" }}>

                    <div className="div_row_gauche div_row_gauche_etendu" style={{ "textAlign": "left", "paddingLeft": "5px" }}>


                        <Button variant="outlined" onClick={submenu_import_session} className="detail_class_submenu bton_import_excel"
                            id='menu_import_participant' name='menu_import_participant'>Importer des Sessions Excel &nbsp;
                            <img src={excel_icone} alt="ajout csv" className="icon_excel" />
                        </Button>


                        <Button variant="outlined" onClick={submenu_add_one_session}
                            className="detail_class_submenu bton_add_session"
                            id='menu_import_participant' name='menu_import_participant'>Ajout 1 Session &nbsp;
                            <img src={add_plus} alt="ajout session" className="icon_plus" />
                        </Button>

                        <br />
                        {session_file_name && <nav><i>{session_file_name}</i></nav>}
                        {String(liste_sessions_file_change_api) === String("true") && <nav className="okUpdateData"> Les Sessions ont été correctement importés</nav>}
                        {String(liste_sessions_file_change_api) === String("false") && <nav className="koUpdateData"> {liste_sessions_file_change_message} </nav>}

                        <input type="file"
                            accept=".csv"
                            ref={hiddenFileInput_session}
                            style={{ display: 'none' }}
                            name="liste_sessions_file"
                            onChange={liste_sessions_file_change}
                        />

                        <a href='/sample/template_import_session_plusieurs_formations.csv' download>Télécharger un fichier modèle</a>
                    </div>
                </div>
                <div className="div_row"> &nbsp;</div>
                <div className="div_row">
                    <Button variant="outlined" ref={myRef} onClick={submenu_detail_session} className="detail_class_submenu" id='detail_session' name='detail_session'>Détail Session</Button>
                    <Button variant="outlined" onClick={submenu_preinscrit} className="detail_class_submenu" id='preinscrit' name='preinscrit'>Preinscription ({String(nb_stagiaire_Preinscrit)}) </Button>
                    <Button variant="outlined" onClick={submenu_inscrit} className="detail_class_submenu" id='inscrit' name='inscrit'>Inscription ({String(nb_stagiaire_Inscrit)}) </Button>

                </div>


                <div>

                    {String(submenu) === String("detail_session") && <div style={{ "border": "None" }}>

                        {String(addOneSession) !== "1" && <div className="session_data" onChange={IssessionChanged}>

                            <div className="session_caract"> Formation <br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required

                                    name="myclass_title"
                                    id="myclass_title"
                                    text
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={true}
                                    className="disabled_style enable_style"
                                    value={p_myclass_title}
                                    onChange={(e) => setp_myclass_title(e.target.value)}

                                />


                            </div>
                            <div className="session_caract"> Code Session<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="code_session"
                                    id="code_session"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    //disabled={true}
                                    className="disabled_style"
                                    value={p_code_session}
                                    onChange={(e) => setp_code_session(e.target.value)}

                                />
                            </div>

                            {edit_session_form && <div className="session_caract">Session à la demande* <br />
                                <TextField
                                    name="session_ondemande"
                                    id="session_ondemande"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_session_ondemande}
                                    onChange={(e) => {
                                        setp_session_ondemande(e.target.value);
                                        IssessionChanged();
                                    }}
                                >
                                    <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
                                    <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Non &nbsp;</MenuItem>
                                </TextField>
                            </div>}

                            {!edit_session_form && <div className="session_caract">Session à la demande* <br />
                                <TextField
                                    name="session_ondemande"
                                    id="session_ondemande"
                                    text
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_session_ondemande_label}

                                />

                            </div>}


                            {edit_session_form && <div className="session_caract">Statut* <br />
                                <TextField
                                    name="session_status"
                                    id="session_status"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_session_status}
                                    onChange={(e) => {
                                        setp_session_status(e.target.value);
                                        IssessionChanged();
                                    }
                                    }
                                >
                                    <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left", "background": "orange" }}>Inactif &nbsp;&nbsp;</MenuItem>
                                    <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left", "background": "green" }}>Actif &nbsp;</MenuItem>
                                </TextField>
                            </div>}
                            {!edit_session_form && String(p_session_status) === "1" && <div className="session_caract">Statut * <br />
                                <TextField
                                    name="session_status_not_change_font"
                                    id="session_status_not_change_font"
                                    value={p_session_status_label}
                                    className="disabled_style enable_style"
                                    style={{ "background": "#D2E6AA" }}
                                    sx={{
                                        backgroundColor: '#ffd60a',
                                        border: '3px solid #001d3d',
                                    }}
                                    InputLabelProps={{
                                        sx: {
                                            color: '#003566',
                                            textTransform: 'capitalize',
                                        },
                                    }}
                                    disabled={false}

                                    inputProps={{
                                        sx: {
                                            color: 'black',
                                            paddingLeft: '15px',
                                            //fontSize: '20px',
                                        },
                                    }}
                                />
                            </div>}

                            {!edit_session_form && String(p_session_status) === "0" && <div className="session_caract">Statut * <br />
                                <TextField
                                    name="session_status_not_change_font"
                                    id="session_status_not_change_font"
                                    value={p_session_status_label}
                                    className="disabled_style enable_style"
                                    style={{ "background": "#F0785E" }}
                                    sx={{
                                        backgroundColor: '#ffd60a',
                                        border: '3px solid #001d3d',
                                    }}
                                    InputLabelProps={{
                                        sx: {
                                            color: '#003566',
                                            textTransform: 'capitalize',
                                        },
                                    }}
                                    disabled={false}

                                    inputProps={{
                                        sx: {
                                            color: 'black',
                                            paddingLeft: '15px',
                                            //fontSize: '20px',
                                        },
                                    }}
                                />
                            </div>}

                            {/*!edit_session_form && <div className="session_caract">Statut a * <br />
                                <TextField
                                    name="session_status"
                                    id="session_status"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_session_status_label}
                                    style={{
                                        backgroundColor: "blue"
                                    }}
                                    InputProps={{
                                        style: {
                                            color: "red"
                                        }
                                    }}

                                />

                                </div>*/}


                            {edit_session_form && <div className="session_caract">Etape <br />
                                <TextField
                                    name="session_etape"
                                    id="session_etape"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_session_etape}
                                    onChange={(e) => {
                                        setp_session_etape(e.target.value);
                                        IssessionChanged();
                                    }}
                                >
                                    <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Projet &nbsp;&nbsp;</MenuItem>
                                    <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Planification &nbsp;</MenuItem>
                                    <MenuItem value="2" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Planifiée &nbsp;</MenuItem>
                                    <MenuItem value="3" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Terminée &nbsp;</MenuItem>
                                    <MenuItem value="4" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Facturée &nbsp;</MenuItem>
                                    <MenuItem value="-1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Annulée &nbsp;</MenuItem>
                                </TextField>
                            </div>}

                            {!edit_session_form && <div className="session_caract">Etape *<br />

                                <TextField
                                    name="session_etape"
                                    id="session_etape"
                                    text
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_session_etape_label}

                                />

                            </div>}





                            <div className="session_caract">
                                Date Debut
                                <DatePicker
                                    name="sessiondatedebut"
                                    id="sessiondatedebut"
                                    selected={SessionstartDate}
                                    onChange={(date) => {
                                        setSessionstartDate(date);
                                        setsessionChanged(true);
                                        IssessionChanged();
                                    }
                                    }
                                    showTimeSelect={false}
                                    filterTime={filterPassedTime_start}
                                    dateFormat="dd/MM/yyyy"
                                    className="disabled_style"
                                    locale='fr-FR'

                                />
                            </div>


                            <div className="session_caract"> Date Fin
                                <DatePicker
                                    name="sessiondatefin"
                                    id="sessiondatefin"
                                    selected={SessionendDate}
                                    onChange={(date) => {
                                        setSessionendDate(date);
                                        setsessionChanged(true);
                                        IssessionChanged();
                                    }
                                    }
                                    showTimeSelect={false}
                                    filterTime={filterPassedTime_end}
                                    dateFormat="dd/MM/yyyy"
                                    className="disabled_style"
                                />
                            </div>


                            <div className="session_caract"> Date Debut des inscriptions *
                                <DatePicker
                                    required
                                    name="sessiondatedebutinscription"
                                    id="sessiondatedebutinscription"
                                    selected={SessionstartDateInscription}
                                    onChange={(date) => {
                                        setSessionstartDateInscription(date);
                                        setsessionChanged(true);
                                        IssessionChanged();
                                    }

                                    }
                                    showTimeSelect={false}
                                    //filterTime={filterPassedTime_start}
                                    dateFormat="dd/MM/yyyy"
                                    className="disabled_style"
                                    locale='fr-FR'

                                />
                            </div>


                            <div className="session_caract"> Date Fin des inscriptions *
                                <DatePicker
                                    required
                                    name="sessiondatefininscription"
                                    id="sessiondatefininscription"
                                    selected={SessionendDateInscription}
                                    onChange={(date) => {
                                        setSessionendDateInscription(date);
                                        setsessionChanged(true);
                                        IssessionChanged();
                                    }
                                    }
                                    showTimeSelect={false}
                                    //filterTime={filterPassedTime_end}
                                    dateFormat="dd/MM/yyyy"
                                    className="disabled_style"
                                />
                            </div>


                            {edit_session_form && <div className="session_caract">Présentiel *<br />
                                <TextField
                                    name="presentiel"
                                    id="presentiel"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_session_presentiel}
                                    onChange={(e) => {
                                        setp_session_presentiel(e.target.value);
                                        IssessionChanged();
                                    }
                                    }
                                >
                                    <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
                                    <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Non &nbsp;</MenuItem>
                                </TextField>
                            </div>}

                            {!edit_session_form && <div className="session_caract">Présentiel *<br />
                                <TextField
                                    name="presentiel"
                                    id="presentiel"
                                    text
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_session_presentiel_label}
                                />

                            </div>}



                            {edit_session_form && <div className="session_caract">A distance* <br />
                                <TextField
                                    name="distantiel"
                                    id="distantiel"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_session_distance}
                                    onChange={(e) => {
                                        setp_session_distance(e.target.value);
                                        IssessionChanged();
                                    }
                                    }
                                >
                                    <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
                                    <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Non &nbsp;</MenuItem>
                                </TextField>
                            </div>}

                            {!edit_session_form && <div className="session_caract">A distance* <br />
                                <TextField
                                    name="distantiel"
                                    id="distantiel"
                                    text
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_session_distance_label}
                                />

                            </div>}


                            <div className="session_caract"> Adresse<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="adresse"
                                    id="adresse"
                                    text
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_adresse}
                                    onChange={(e) => setp_adresse(e.target.value)}

                                />
                            </div>
                            <div className="session_caract"> Code postal<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="code_postal"
                                    id="code_postal"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_code_postal}
                                    onChange={(e) => setp_code_postal(e.target.value)}
                                />
                            </div>
                            <div className="session_caract"> Ville<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="ville"
                                    id="ville"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_ville}
                                    onChange={(e) => setp_ville(e.target.value)}
                                />
                            </div>

                            <div className="session_caract"> Pays<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="pays"
                                    id="pays"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_pays}
                                    onChange={(e) => setp_pays(e.target.value)}
                                />
                            </div>

                            <div className="session_caract"> Formateur<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="formateur"
                                    id="formateur"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_formateur}
                                    onChange={(e) => setp_formateur(e.target.value)}
                                />
                            </div>

                            <div className="session_caract"> Code Formation LMS
                                <i> (le code créé dans le LMS) </i>
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="lms_class_code"
                                    id="lms_class_code"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_lms_class_code}
                                    onChange={(e) => setp_lms_class_code(e.target.value)}
                                />
                            </div>


                            <div className="session_caract"> Nombre participants *<br />
                                <TextField sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="nb_participant"
                                    id="nb_participant"
                                    type="number"
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "1", max: "1000", step: "1" }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_nb_participant}
                                    onChange={(e) => {
                                        setp_nb_participant(e.target.value);
                                        IssessionChanged();
                                    }
                                    }
                                />
                            </div>

                            <div className="session_caract"> Prix session <br />
                                <TextField sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="prix_session"
                                    id="prix_session"
                                    type="number"
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "1", max: "1000", step: "1" }}
                                    disabled={false}
                                    className="disabled_style"
                                    value={p_prix_session}
                                    onChange={(e) => {
                                        setp_prix_session(e.target.value);
                                        IssessionChanged();
                                    }}
                                />
                            </div>





                            <div className="div_row" style={{ "border": "None" }}>
                                {!fields1desabled && <div className="session_caract">Choisir un modèle d'attestation :

                                    <select id="certif_liste" name="certif_liste" value={selectedCertif} onChange={handleChangeselectedCertif} className="selectsession">
                                        <option value="">Choisir un modèle </option>
                                        {GetAttestation_Certif_result &&
                                            GetAttestation_Certif_result.map((certificat) => (
                                                <option value={JSON.parse(certificat).nom}>
                                                    {JSON.parse(certificat).nom}

                                                </option>
                                            ))}
                                    </select>
                                    <img className="preview_certif" src={urlpreview_certif} />

                                </div>}
                                {fields1desabled && <div className="session_caract">Le modèle d'attestation :

                                    <img className="preview_certif" src={urlpreview_certif} />

                                </div>}

                                <div className="session_caract"> Contenu de la formation (max 800 caractères)<br />
                                    <i> (à afficher sur l'attestation) </i>
                                    {!fields1desabled && <br />}
                                    {!fields1desabled && <br />}

                                    <Editor
                                        onInit={(evt, editor) => editorRef_contenu_ftion.current = editor}
                                        initialValue={field_contenu_ftion}
                                        onKeyUp={editor_contenu_ftion_keyup}
                                        disabled={fields1desabled}

                                        init={{
                                            resize: false,

                                            height: 200,
                                            menubar: false,
                                            plugins: [
                                                'advlist autolink lists link image charmap print preview anchor',
                                                'searchreplace visualblocks code fullscreen',
                                                'insertdatetime media table paste code help wordcount'
                                            ],
                                            toolbar: false,
                                            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:12px; }'
                                        }}
                                    />
                                </div>
                            </div>


                            <div className="div_row" style={{ "border": "None" }}>
                                &nbsp;
                            </div>


                            {sessionChanged && <div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
                                /!\ Pensez à enregistrer les modifications
                            </div>}

                            {<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>

                                <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>

                                    {!sessionChanged && selected_session_id && fields1desabled &&
                                        <Button variant="contained" className="bton_annule" onClick={close_edit_form}>Fermer
                                        </Button>}

                                    {edit_session_form && selected_session_id &&
                                        <Button variant="contained" className="bton_enreg" onClick={CreateSessionFormation}>Enregistrer les modifications aa
                                        </Button>}
                                </div>

                                <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
                                    {!sessionChanged && selected_session_id && fields1desabled &&
                                        <Button variant="contained" className="bton_edit" onClick={enableSessionFields}>Editer
                                        </Button>}

                                    {((sessionChanged && selected_session_id) || !fields1desabled) &&
                                        <Button variant="contained" className="bton_annule" onClick={annuleSessionUpdate}>Annuler les modifications
                                        </Button>}

                                </div>

                            </div>}



                            <div className="div_row" style={{ "border": "None" }}>
                                &nbsp;
                            </div>

                        </div>}


                        {String(addOneSession) === "1" && <div className="div_row session_data" style={{ "border": "None", "backgroundColor": "#F0F0F0" }} >
                            <h5> Ajout d'une session de formation</h5>

                            <div className="session_caract" > Choisir une formation *<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="one_myclass_title"
                                    id="one_myclass_title"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_myclass_title}
                                    onChange={(e) => {
                                        console.log(" e.target = ", e.target);
                                        setone_selected_internal_url(e.target.value);
                                        setp_one_myclass_title(e.target.value)
                                    }}
                                >

                                    {GetCurrentPartnerClass_result &&
                                        GetCurrentPartnerClass_result.map((myclass) => (
                                            <MenuItem key={JSON.parse(myclass).internal_url} value={JSON.parse(myclass).internal_url} style={{ "paddingLeft": "5px", "textAlign": "left", }}>
                                                {JSON.parse(myclass).title}

                                            </MenuItem>
                                        ))}

                                </TextField>

                            </div>


                            <div className="session_caract"> Code Session *<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="one_code_session"
                                    id="one_code_session"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_code_session}
                                    onChange={(e) => setp_one_code_session(e.target.value)}

                                />
                            </div>

                            <div className="session_caract">Session à la demande* <br />
                                <TextField
                                    name="one_session_ondemande"
                                    id="one_session_ondemande"
                                    type="number"

                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_session_ondemande}
                                    onChange={(e) => {
                                        setp_one_session_ondemande(e.target.value);
                                    }}
                                >

                                    <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
                                    <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Non &nbsp;</MenuItem>
                                </TextField>
                            </div>


                            <div className="session_caract">Statut * <br />
                                <TextField
                                    name="session_status"
                                    id="session_status"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_session_status}
                                    onChange={(e) => setp_one_session_status(e.target.value)}
                                >
                                    <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left", "background": "orange" }}>Inactif &nbsp;&nbsp;</MenuItem>
                                    <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left", "background": "green" }}>Actif &nbsp;</MenuItem>
                                </TextField>
                            </div>




                            <div className="session_caract">Etape <br />
                                <TextField
                                    name="session_etape"
                                    id="session_etape"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "0", max: "1", step: "1" }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_session_etape}
                                    onChange={(e) => setp_one_session_etape(e.target.value)}
                                >
                                    <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Projet &nbsp;&nbsp;</MenuItem>
                                    <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Planification &nbsp;</MenuItem>
                                    <MenuItem value="2" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Planifiée &nbsp;</MenuItem>
                                    <MenuItem value="3" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Terminée &nbsp;</MenuItem>
                                    <MenuItem value="4" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Facturée &nbsp;</MenuItem>
                                    <MenuItem value="-1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Annulée &nbsp;</MenuItem>
                                </TextField>
                            </div>

                            <div className="session_caract">
                                Date Debut *
                                <DatePicker
                                    name="one_sessiondatedebut"
                                    id="one_sessiondatedebut"
                                    selected={one_SessionstartDate}
                                    onChange={(date) => {
                                        setone_SessionstartDate(date);
                                        setsessionChanged(true);
                                    }
                                    }
                                    showTimeSelect={false}
                                    filterTime={filterPassedTime_start}
                                    dateFormat="dd/MM/yyyy"
                                    className="disabled_style enable_style"
                                    locale='fr-FR'

                                />
                            </div>


                            <div className="session_caract"> Date Fin *
                                <DatePicker
                                    name="one_sessiondatefin"
                                    id="one_sessiondatefin"
                                    selected={one_SessionendDate}
                                    onChange={(date) => {
                                        setone_SessionendDate(date);
                                        setsessionChanged(true);
                                    }
                                    }
                                    showTimeSelect={false}
                                    filterTime={filterPassedTime_end}
                                    dateFormat="dd/MM/yyyy"
                                    className="disabled_style enable_style"
                                />
                            </div>


                            <div className="session_caract"> Date Debut des inscriptions *
                                <DatePicker
                                    required
                                    name="one_sessiondatedebutinscription"
                                    id="one_sessiondatedebutinscription"
                                    selected={one_SessionstartDateInscription}
                                    onChange={(date) => {
                                        setone_SessionstartDateInscription(date);
                                        setsessionChanged(true);
                                    }

                                    }
                                    showTimeSelect={false}
                                    //filterTime={filterPassedTime_start}
                                    dateFormat="dd/MM/yyyy"
                                    className="disabled_style enable_style"
                                    locale='fr-FR'

                                />
                            </div>


                            <div className="session_caract"> Date Fin des inscriptions *
                                <DatePicker
                                    required
                                    name="one_sessiondatefininscription"
                                    id="one_sessiondatefininscription"
                                    selected={one_SessionendDateInscription}
                                    onChange={(date) => {
                                        setone_SessionendDateInscription(date);
                                        setsessionChanged(true);
                                    }
                                    }
                                    showTimeSelect={false}
                                    //filterTime={filterPassedTime_end}
                                    dateFormat="dd/MM/yyyy"
                                    className="disabled_style enable_style"
                                />
                            </div>


                            <div className="session_caract">Présentiel* <br />
                                <TextField
                                    name="one_presentiel"
                                    id="one_presentiel"
                                    type="number"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}

                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_session_presentiel}
                                    onChange={(e) => setp_one_session_presentiel(e.target.value)}
                                >
                                    <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
                                    <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left" }} >Non &nbsp;</MenuItem>

                                </TextField>
                            </div>

                            <div className="session_caract">A distance* <br />
                                <TextField
                                    name="one_distantiel"
                                    id="one_distantiel"
                                    type="number"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}

                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_session_distance}
                                    onChange={(e) => setp_one_session_distance(e.target.value)}
                                >
                                    <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Oui &nbsp;&nbsp;</MenuItem>
                                    <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left" }}>Non &nbsp;</MenuItem>

                                </TextField>
                            </div>

                            <div className="session_caract"> Adresse<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="one_adresse"
                                    id="one_adresse"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_adresse}
                                    onChange={(e) => setp_one_adresse(e.target.value)}
                                />
                            </div>
                            <div className="session_caract"> Code postal<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="one_code_postal"
                                    id="one_code_postal"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_code_postal}
                                    onChange={(e) => setp_one_code_postal(e.target.value)}
                                />
                            </div>
                            <div className="session_caract"> Ville<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="one_ville"
                                    id="one_ville"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_ville}
                                    onChange={(e) => setp_one_ville(e.target.value)}
                                />
                            </div>

                            <div className="session_caract"> Pays<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="one_pays"
                                    id="one_pays"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_pays}
                                    onChange={(e) => setp_one_pays(e.target.value)}
                                />
                            </div>



                            <div className="session_caract"> Formateur<br />
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="one_formateur"
                                    id="one_formateur"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_formateur}
                                    onChange={(e) => setp_one_formateur(e.target.value)}
                                />
                            </div>

                            <div className="session_caract"> Code Formation LMS
                                <i> (le code créé dans le LMS) </i>
                                <TextField
                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="one_lms_class_code"
                                    id="one_lms_class_code"

                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_lms_class_code}
                                    onChange={(e) => setp_one_lms_class_code(e.target.value)}
                                />
                            </div>


                            <div className="session_caract"> Nombre participants *<br />
                                <TextField sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="one_nb_participant"
                                    id="one_nb_participant"
                                    type="number"
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "1", max: "1000", step: "1" }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_nb_participant}
                                    onChange={(e) => setp_one_nb_participant(e.target.value)}
                                />
                            </div>

                            <div className="session_caract"> Prix session <br />
                                <TextField sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                    required
                                    name="one_prix_session"
                                    id="one_prix_session"
                                    type="number"
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    inputProps={{ min: "1", max: "1000", step: "1" }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_one_prix_session}
                                    onChange={(e) => setp_one_prix_session(e.target.value)}
                                />
                            </div>




                            <div className="div_row" style={{ "border": "None" }}>
                                <div className="session_caract">Choisir un modèle d'attestation :

                                    <TextField sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        name="one_certif_liste"
                                        id="one_certif_liste"
                                        select
                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        inputProps={{ min: "1", max: "1000", step: "1" }}
                                        disabled={false}
                                        className="disabled_style enable_style"
                                        onChange={handleChangeone_selectedCertif}
                                    >



                                        {GetAttestation_Certif_result &&
                                            GetAttestation_Certif_result.map((certificat) => (
                                                <MenuItem key={JSON.parse(certificat).nom} value={JSON.parse(certificat).nom} style={{ "paddingLeft": "5px", "textAlign": "left" }}>
                                                    {JSON.parse(certificat).nom}&nbsp; &nbsp;<br />

                                                </MenuItem>
                                            ))}
                                    </TextField>

                                    <img className="preview_certif" src={urlpreview_certif} />

                                </div>


                                <div className="session_caract"> Contenu de la formation (max 800 caractères)<br />
                                    <i> (à afficher sur l'attestation) </i>
                                    {!fields1desabled && <br />}
                                    {!fields1desabled && <br />}

                                    <Editor
                                        onInit={(evt, editor) => one_editorRef_contenu_ftion.current = editor}
                                        initialValue={one_field_contenu_ftion}
                                        onKeyUp={one_editor_contenu_ftion_keyup}
                                        disabled={false}

                                        init={{
                                            resize: false,

                                            height: 200,
                                            menubar: false,
                                            plugins: [
                                                'advlist autolink lists link image charmap print preview anchor',
                                                'searchreplace visualblocks code fullscreen',
                                                'insertdatetime media table paste code help wordcount'
                                            ],
                                            toolbar: false,
                                            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:12px; }'
                                        }}
                                    />
                                </div>
                            </div>


                            <div className="div_row" style={{ "border": "None" }}>
                                &nbsp;
                            </div>
                            {<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>

                                <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
                                    <Button variant="contained" className="bton_enreg" onClick={One_CreateSessionFormation}>Enregistrer la session
                                    </Button>
                                </div>

                                <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
                                    <Button variant="contained" className="bton_annule" onClick={One_annuleSessionUpdate}>Annuler
                                    </Button>

                                </div>

                            </div>}
                            <div className="div_row" style={{ "border": "None" }}>
                                &nbsp;
                            </div>
                        </div>
                        }

                    </div>}

                    {String(submenu) === String("preinscrit") && <div style={{ "border": "None" }}>

                        <div className="div_row" style={{ "border": "None" }}>


                            {String(addOneParticipant) === "1" && <div className="div_row session_data" style={{ "border": "None", "backgroundColor": "#F0F0F0" }}>
                                <div className="titre1"> Ajout d'un nouveau participant a  la session <u> {selected_code_session} </u> de la formation <u> {selected_class_title} </u></div>

                                <div className="session_caract"> Nom *<br />
                                    <TextField
                                        sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        name="one_nom_part"
                                        id="one_nom_part"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        disabled={false}
                                        className="disabled_style enable_style"
                                        value={p_one_nom_part}
                                        onChange={(e) => {
                                            setp_one_nom_part(e.target.value);
                                        }
                                        }
                                    />
                                </div>


                                <div className="session_caract"> Prenom *<br />
                                    <TextField
                                        sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        name="one_prenom_part"
                                        id="one_prenom_part"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        disabled={false}
                                        className="disabled_style enable_style"
                                        value={p_one_prenom_part}
                                        onChange={(e) => {
                                            setp_one_prenom_part(e.target.value);
                                        }
                                        }
                                    />
                                </div>

                                <div className="session_caract"> Email  *<br />
                                    <TextField
                                        sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        name="one_email_part"
                                        id="one_email_part"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        disabled={false}
                                        className="disabled_style enable_style"
                                        value={p_one_email_part}
                                        onChange={(e) => {
                                            setp_one_email_part(e.target.value);
                                        }
                                        }
                                    />
                                </div>

                                <div className="session_caract"> téléphone *<br />
                                    <TextField
                                        sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        name="one_phone_part"
                                        id="one_phone_part"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        disabled={false}
                                        className="disabled_style enable_style"
                                        value={p_one_phone_part}
                                        onChange={(e) => {
                                            setp_one_phone_part(e.target.value);
                                        }
                                        }
                                    />
                                </div>

                                <div className="session_caract"> Status Inscription *<br />
                                    <TextField
                                        sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        select
                                        value={myinscript_status}
                                        name="one_status_part"
                                        id="one_status_part"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        onChange={handleChangeInscription_Status}
                                        disabled={false}
                                        className="disabled_style enable_style"
                                    >
                                        {status_inscription.map((option) => (
                                            <MenuItem key={option.value} value={option.value} style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%", "fontSize": "12px" }}>
                                                {option.label} &nbsp; <br />
                                            </MenuItem>
                                        ))}
                                    </TextField>
                                </div>



                                <div className="div_row" style={{ "border": "None" }}>
                                    &nbsp;
                                </div>
                                {<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>

                                    <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
                                        <Button variant="contained" className="bton_enreg" onClick={One_Create_Participant}>Enregistrer le participant
                                        </Button>
                                    </div>

                                    <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
                                        <Button variant="contained" className="bton_annule" onClick={One_annuleAdd_Participant}>Annuler
                                        </Button>

                                    </div>

                                </div>}
                                <div className="div_row" style={{ "border": "None" }}>
                                    &nbsp;
                                </div>



                            </div>}
                        </div>

                        {String(addOneParticipant) !== "1" && <div className="session_data" style={{ height: 500, width: '100%' }}>
                            <DataGrid
                                checkboxSelection
                                onSelectionModelChange={(newSelectionModel) => {
                                    setselectionModel_preinsc(newSelectionModel);
                                    //console.log("ch selected--" + newSelectionModel);
                                }}
                                selectionModel={selectionModel_preinsc}

                                localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
                                rows={rowss_preinsc.map((item, index) => (
                                    {
                                        id: index,
                                        _id: JSON.parse(item)._id,
                                        nom: JSON.parse(item).nom,
                                        prenom: JSON.parse(item).prenom,
                                        employeur: JSON.parse(item).employeur,
                                        email: JSON.parse(item).email,
                                        amount: JSON.parse(item).price,
                                        opco: JSON.parse(item).opco,
                                        modefinancement: JSON.parse(item).modefinancement,


                                    }
                                ))}

                                columns={columns_preinscrit}
                                pageSize={10}
                                className="datagridclass"

                                rowsPerPageOptions={[10]}
                                disableSelectionOnClick
                                components={{
                                    Toolbar: GridToolbar,
                                }}
                            />

                            {selectionModel_preinsc && selectionModel_preinsc.length >= 1 &&
                                <div className="div_row" style={{ "border": "none" }}>
                                    <div className="block_en_mass">
                                        <nav className='traitement_mass'>Traitement en masse</nav>
                                        &nbsp;<select
                                            id={"actionmass_preinsc"} name={"actionmass_preinsc"}
                                            onChange={actionmass_preinsc}
                                            className="action_mass">
                                            <option selected value="n/a">Choisir une action</option>
                                            <option value="valider">Valider</option>
                                            <option value="refuser">Refuser</option>

                                        </select> &nbsp;
                                        {actionmass_preinsc_val &&
                                            <Popup
                                                trigger={<Button className="bton_traiter_en_mass" >
                                                    <FcAcceptDatabase /> Traiter

                                                </Button>}
                                                modal
                                                nested
                                                position="center center"
                                            >

                                                {close => (
                                                    <div>
                                                        <button className="gest_close" onClick={close}>
                                                            &times;
                                                        </button>
                                                        <div className="gest_header"> MySy Information </div>
                                                        <div className="gest_content">
                                                            {' '}

                                                            Confirmer l'action <b> {actionmass_preinsc_val} </b> en masse.
                                                        </div>
                                                        <div className="gest_actions">
                                                            <div style={{ "width": "45%", "float": "left" }}>
                                                                <button className="gest_bton_popup" onClick={(event) => {
                                                                    actionmass_preinsc_Traitemet();
                                                                    close();
                                                                }}> Valider </button>

                                                            </div>
                                                            <div style={{ "width": "45%", "float": "right" }}>
                                                                <button
                                                                    className="gest_bton_popup"
                                                                    onClick={() => {
                                                                        //console.log('modal closed ');
                                                                        close();
                                                                    }}
                                                                >
                                                                    Annuler
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                )}
                                            </Popup>
                                        }
                                        <br />

                                    </div>

                                </div>}
                            <br />

                            {String(addOneParticipant) !== "1" && selected_code_session && selected_internal_url && <div id='ajout_participant' style={{ "textAlign": "left", "float": "left", "width": "100%" }}>

                                <Button variant="outlined" onClick={submenu_import_participant} className="detail_class_submenu bton_import_excel" style={{
                                    "background": "#c8cfd5",
                                    "color": "black", "width": "auto"
                                }}
                                    id='menu_import_participant' name='menu_import_participant'>Importer des participants excel &nbsp;
                                    <img src={excel_icone} alt="ajout csv" className="icon_excel" />
                                </Button>
                                <Button variant="outlined" onClick={submenu_add_one_participant}
                                    className="detail_class_submenu bton_add_session"
                                    id='menu_one_participant' name='menu_one_participant'>Ajouter 1 participant &nbsp;
                                    <img src={participants} alt="ajout un participant" className="icon_plus" />
                                </Button>

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

                                <i>{participant_file_name}</i><br />
                                {String(liste_participants_file_change_api) === String("true") && <nav className="okUpdateData"> Les participants ont été correctement importés</nav>}
                                {String(liste_participants_file_change_api) === String("false") && <nav className="koUpdateData"> {liste_participants_file_change_message} </nav>}

                                <input type="file"
                                    accept=".csv"
                                    ref={hiddenFileInput}
                                    style={{ display: 'none' }}
                                    name="liste_participants_file"
                                    onChange={liste_participants_file_change}
                                />


                            </div>}

                        </div>}


                    </div>}

                    {String(submenu) === String("inscrit") && <div style={{ "border": "None" }}>
                        <div className="div_row" style={{ "border": "None" }}>

                            {String(addOneParticipant) !== "1" && selected_code_session && selected_internal_url && <div className="div_row" style={{ "border": "None" }}>

                                {String(addOneParticipant) === "1" && <div className="div_row session_data" style={{ "border": "None", "backgroundColor": "#F0F0F0" }}>
                                    <h5> Ajout d'un nouveau participant</h5>

                                    <div className="session_caract"> Nom *<br />
                                        <TextField
                                            sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                            required
                                            name="one_nom_part"
                                            id="one_nom_part"

                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            className="disabled_style enable_style"
                                            value={p_one_nom_part}
                                            onChange={(e) => setp_one_nom_part(e.target.value)}
                                        />
                                    </div>


                                    <div className="session_caract"> Prenom *<br />
                                        <TextField
                                            sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                            required
                                            name="one_prenom_part"
                                            id="one_prenom_part"

                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            className="disabled_style enable_style"
                                            value={p_one_prenom_part}
                                            onChange={(e) => setp_one_prenom_part(e.target.value)}
                                        />
                                    </div>

                                    <div className="session_caract"> Email ss*<br />
                                        <TextField
                                            sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                            required
                                            name="one_email_part"
                                            id="one_email_part"

                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            className="disabled_style enable_style"
                                            value={p_one_email_part}
                                            onChange={(e) => {
                                                setp_one_email_part(e.target.value);
                                            }}
                                        />
                                    </div>

                                    <div className="session_caract"> téléphone ss*<br />
                                        <TextField
                                            sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                            required
                                            name="one_phone_part"
                                            id="one_phone_part"

                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            className="disabled_style enable_style"
                                            value={p_one_phone_part}
                                            onChange={(e) => setp_one_phone_part(e.target.value)}
                                        />
                                    </div>

                                    <div className="session_caract"> Status Inscription *<br />
                                        <TextField
                                            sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                            required
                                            select
                                            value={myinscript_status}
                                            name="one_status_part"
                                            id="one_status_part"

                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            onChange={handleChangeInscription_Status}
                                            disabled={false}
                                            className="disabled_style enable_style"
                                        >
                                            {status_inscription.map((option) => (
                                                <MenuItem key={option.value} value={option.value} style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%", "fontSize": "12px" }}>
                                                    {option.label} &nbsp; <br />
                                                </MenuItem>
                                            ))}
                                        </TextField>
                                    </div>



                                    <div className="div_row" style={{ "border": "None" }}>
                                        &nbsp;
                                    </div>
                                    {<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>

                                        <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
                                            <Button variant="contained" className="bton_envoyer" onClick={One_Create_Participant}>Enregistrer le participant
                                            </Button>
                                        </div>

                                        <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
                                            <Button variant="contained" className="bton_fermer" onClick={One_annuleAdd_Participant}>Annuler
                                            </Button>

                                        </div>

                                    </div>}
                                    <div className="div_row" style={{ "border": "None" }}>
                                        &nbsp;
                                    </div>



                                </div>}
                            </div>}

                            {String(addOneParticipant) === "1" && <div className="div_row session_data" style={{ "border": "None", "backgroundColor": "#F0F0F0" }}>
                                <div className="titre1"> Ajout d'un nouveau participant a  la session <u> {selected_code_session} </u> de la formation <u> {selected_class_title} </u></div>


                                <div className="session_caract"> Nom *<br />
                                    <TextField
                                        sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        name="one_nom_part"
                                        id="one_nom_part"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        disabled={false}
                                        className="disabled_style enable_style"
                                        value={p_one_nom_part}
                                        onChange={(e) => {
                                            setp_one_nom_part(e.target.value);
                                        }
                                        }
                                    />
                                </div>


                                <div className="session_caract"> Prenom *<br />
                                    <TextField
                                        sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        name="one_prenom_part"
                                        id="one_prenom_part"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        disabled={false}
                                        className="disabled_style enable_style"
                                        value={p_one_prenom_part}
                                        onChange={(e) => {
                                            setp_one_prenom_part(e.target.value);
                                        }
                                        }
                                    />
                                </div>

                                <div className="session_caract"> Email *<br />
                                    <TextField
                                        sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        name="one_email_part"
                                        id="one_email_part"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        disabled={false}
                                        className="disabled_style enable_style"
                                        value={p_one_status_part}
                                        onChange={(e) => {
                                            setp_one_status_part(e.target.value);
                                        }
                                        }
                                    />
                                </div>

                                <div className="session_caract"> téléphone *<br />
                                    <TextField
                                        sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        name="one_phone_part"
                                        id="one_phone_part"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        disabled={false}
                                        className="disabled_style enable_style"
                                        value={p_one_phone_part}
                                        onChange={(e) => {
                                            setp_one_phone_part(e.target.value);
                                        }
                                        }
                                    />
                                </div>

                                <div className="session_caract"> Status Inscription *<br />
                                    <TextField
                                        sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        select
                                        value={myinscript_status}
                                        name="one_status_part"
                                        id="one_status_part"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        onChange={handleChangeInscription_Status}
                                        disabled={false}
                                        className="disabled_style enable_style"
                                    >
                                        {status_inscription.map((option) => (
                                            <MenuItem key={option.value} value={option.value} style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%", "fontSize": "12px" }}>
                                                {option.label} &nbsp; <br />
                                            </MenuItem>
                                        ))}
                                    </TextField>
                                </div>



                                <div className="div_row" style={{ "border": "None" }}>
                                    &nbsp;
                                </div>
                                {<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>

                                    <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
                                        <Button variant="contained" className="bton_enreg" onClick={One_Create_Participant}>Enregistrer le participant
                                        </Button>
                                    </div>

                                    <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>
                                        <Button variant="contained" className="bton_annule" onClick={One_annuleAdd_Participant}>Annuler
                                        </Button>

                                    </div>

                                </div>}
                                <div className="div_row" style={{ "border": "None" }}>
                                    &nbsp;
                                </div>



                            </div>}
                        </div>

                        {String(addOneParticipant) !== "1" && <div className="session_data" style={{ height: 500, width: '100%' }}>
                            <DataGrid
                                checkboxSelection
                                onSelectionModelChange={(newSelectionModel_insc) => {
                                    setSelectionModel_insc(newSelectionModel_insc);
                                    //console.log("ch selected--" + newSelectionModel_insc);
                                }}
                                selectionModel={selectionModel_insc}

                                localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
                                rows={rowss_insc.map((item, index) => (
                                    {
                                        id: index,
                                        _id: JSON.parse(item)._id,
                                        nom: JSON.parse(item).nom,
                                        prenom: JSON.parse(item).prenom,
                                        employeur: JSON.parse(item).employeur,
                                        email: JSON.parse(item).email,
                                        amount: JSON.parse(item).price,
                                        opco: JSON.parse(item).opco,
                                        modefinancement: JSON.parse(item).modefinancement,

                                    }
                                ))}

                                columns={columns_inscrit}
                                pageSize={10}
                                className="datagridclass"

                                rowsPerPageOptions={[10]}
                                disableSelectionOnClick
                                components={{
                                    Toolbar: GridToolbar,
                                }}


                            />

                            {selectionModel_insc && selectionModel_insc.length >= 1 &&
                                <div className="block_en_mass">
                                    <nav className='traitement_mass'>Traitement en masse / Inscrit</nav>
                                    &nbsp;<select
                                        id={"actionmassinscr"} name={"actionmassinscr"}
                                        onChange={actionmass_inscrit}
                                        className="action_mass">
                                        <option selected value="n/a">Choisir une action</option>
                                        <option value="confirmation">Renvoyer une confirmation</option>
                                        <option value="impression">Imprimer fiches</option>
                                        <option value="annule inscription">Annuler inscription</option>

                                    </select> &nbsp;

                                    {actionmass_insc_val &&
                                        <Popup
                                            trigger={<Button className="bton_traiter_en_mass" >
                                                <FcAcceptDatabase /> Traiter

                                            </Button>}
                                            modal
                                            nested
                                            position="center center"
                                        >

                                            {close => (
                                                <div>
                                                    <button className="gest_close" onClick={close}>
                                                        &times;
                                                    </button>
                                                    <div className="gest_header"> MySy Information </div>
                                                    <div className="gest_content">
                                                        {' '}

                                                        Confirmer l'action <b> {actionmass_insc_val} </b> en masse.
                                                    </div>
                                                    <div className="gest_actions">
                                                        <div style={{ "width": "45%", "float": "left" }}>
                                                            <button className="gest_bton_popup" onClick={(event) => {
                                                                actionmass_insc_Traitemet();
                                                                close();
                                                            }}> Valider </button>

                                                        </div>
                                                        <div style={{ "width": "45%", "float": "right" }}>
                                                            <button
                                                                className="gest_bton_popup"
                                                                onClick={() => {
                                                                    //console.log('modal closed ');
                                                                    close();
                                                                }}
                                                            >
                                                                Annuler
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            )}
                                        </Popup>
                                    }
                                    <br />


                                </div>

                            }

                            <br />

                            {String(addOneParticipant) !== "1" && selected_code_session && selected_internal_url && <div id='ajout_participant' style={{ "textAlign": "left", "float": "left", "width": "100%" }}>

                                <Button variant="outlined" onClick={submenu_import_participant} className="detail_class_submenu bton_import_excel" style={{
                                    "background": "#c8cfd5",
                                    "color": "black", "width": "auto"
                                }}
                                    id='menu_import_participant' name='menu_import_participant'>Importer des participants excel  &nbsp;
                                    <img src={excel_icone} alt="ajout csv" className="icon_excel" />
                                </Button>
                                <Button variant="outlined" onClick={submenu_add_one_participant}
                                    className="detail_class_submenu bton_add_session"
                                    id='menu_one_participant' name='menu_one_participant'>Ajouter 1 participant &nbsp;
                                    <img src={participants} alt="ajout un participant" className="icon_plus" />
                                </Button>

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

                                <i>{participant_file_name}</i><br />
                                {String(liste_participants_file_change_api) === String("true") && <nav className="okUpdateData"> Les participants ont été correctement importés</nav>}
                                {String(liste_participants_file_change_api) === String("false") && <nav className="koUpdateData"> {liste_participants_file_change_message} </nav>}

                                <input type="file"
                                    accept=".csv"
                                    ref={hiddenFileInput}
                                    style={{ display: 'none' }}
                                    name="liste_participants_file"
                                    onChange={liste_participants_file_change}
                                />


                            </div>}


                        </div>}


                        {String(addOneParticipant) !== "1" && String(display_detail_insc) === "1" && selected_code_session && <div className="div_row" style={{ "border": "None", "background": '#F8F9F9', "padding": '5px' }}>
                            <nav style={{ "border": "None", "fontSize": "22px", "fontWeight": "600" }}> Détail inscrit </nav>
                            {String(GetAttendee_api) === "true" && <div className="div_row" style={{ "border": "None" }}>

                                {String(Resend_LMS_Credentials_api) === "true" && <div className="div_row okUpdateData" style={{ "textAlign": "center" }}>
                                    Les identifiants de connexion ont été correctement envoyés</div>}


                                {String(Resend_LMS_Credentials_api) === "false" && <div className="div_row okUpdateData" style={{ "textAlign": "center" }}>
                                    {Resend_LMS_Credentials_message}</div>}

                                <nav style={{ "border": "None", "fontSize": "22px", "fontWeight": "600" }}> Détail inscrit </nav>
                                <div className="div_row" style={{ "border": "None" }}>

                                    <div className="div_row" style={{ "border": "None" }}>
                                        <div className="div_row_gauche">

                                            <div className="div_row_bis" style={{ "marginBottom": "10px", "marginTop": "1rem" }} >
                                                <div className="div_row_gauche_image">
                                                    <img class="img_class_logo" src={userimgclassprofil} /><br />

                                                </div>
                                                <div className="div_row_droite_image">
                                                    <input type="file" id="files_img_class" accept="image/*" onChange={imglogoclasschangeHandler} style={{ opacity: "0", zIndex: "-1", maxWidth: "5px", maxHeight: "0px" }} /><br />
                                                    {<nav>

                                                        <label for="files_img_class" className="bton_image_class">Charger une photo</label><br />

                                                        {String(userimgclassprofilchanged) === "1" &&
                                                            <nav className="bton_image_class" onClick={record_Stagiaire_Image}>Enregistrer la photo<br />  </nav>
                                                        }

                                                        {String(isimgclassSelected_recid) && String(isimgclassSelected_recid).length > 3 &&
                                                            <nav className="bton_supprime_image_class" onClick={removeRecodedLogoImage}>Supprimer la photo<br />  </nav>
                                                        }
                                                        {String(userimgclassprofilchanged) === "1" &&
                                                            <div className="koUpdateData" style={{ "color": "orange", "textAlign": "center" }}> /!\ Pensez à enregistrer la photo
                                                            </div>}


                                                    </nav>}

                                                    {/*isimgclassSelected && <Button variant="outlined" onClick={sendClassImage} className="bton_image_class">Enregistrer image</Button>*/}
                                                    {isimgclassdeleted && String(isimgclassdeleted) === "1" && <nav className="koUpdateData"> {isimgclassdeleted_message}</nav>}
                                                    {isimgclassdeleted && String(isimgclassdeleted) === "0" && <nav className="okUpdateData"> {isimgclassdeleted_message}</nav>}
                                                    {isimgclassSelected && String(isimgclassSaved) === "0" && <nav className="koUpdateData"> {isimgclassSaved_message}</nav>}
                                                </div>

                                            </div>
                                            <div className="div_row_bis tips_img_class">
                                                <li>
                                                    L'image doit etre carrée.
                                                </li>
                                                <li>
                                                    Les formats autorisés sont : <i>['jpg', 'jpeg', 'png', 'jpe', 'webp']</i>
                                                </li>
                                                <li>
                                                    Les dimensions recommandées: 128pixels X 128pixels --   144pixels X 144pixels --  168pixels X 168pixels<br />
                                                    Les dimensions maximales sont de 256pixels X 256pixels
                                                </li>
                                                <li>
                                                    La taille de l'image ne doit pas depasser 1 mega octet
                                                </li>
                                            </div>

                                        </div>
                                    </div>

                                    <div className="session_data" >
                                        <div>
                                            {String(participant_data_edit_mode) !== "1" && <div className="session_caract"> Session<br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_session_class"
                                                    id="detail_session_class"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_session_class}


                                                />

                                            </div>}


                                            {String(participant_data_edit_mode) === "1" && <div className="session_caract"> Session <br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_session_class"
                                                    id="detail_session_class"
                                                    select
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_session_class_id}
                                                    onChange={(e) => {
                                                        setp_detail_session_class(e.target.value);
                                                        setparticipant_data_changed("1");
                                                        setp_detail_session_class_id(e.target.value);
                                                        Dialog_1_handle_change_participant_session(" Attention, vous allez modifier la session d'affectation du participant");
                                                    }
                                                    }

                                                >
                                                    {Getall_TrainingSession_result &&
                                                        Getall_TrainingSession_result.map((mysession) => (
                                                            <MenuItem key={JSON.parse(mysession)._id} value={JSON.parse(mysession)._id}
                                                                style={{ "paddingLeft": "5px", "textAlign": "left", }}>
                                                                {JSON.parse(mysession).code_session}&nbsp;&nbsp;

                                                            </MenuItem>
                                                        ))}
                                                </TextField>
                                            </div>}


                                            {String(participant_data_edit_mode) === "1" && <div className="session_caract"> Client <br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_client_rattachement"
                                                    id="detail_client_rattachement"
                                                    select
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_client_rattachement_nom}
                                                    onChange={(e) => {
                                                        //setp_detail_client_rattachement_id(e.target.value);
                                                        setp_detail_client_rattachement_nom(e.target.value);
                                                        setparticipant_data_changed("1");
                                                        Dialog_1_handle_change_participant_session(" Attention, vous allez modifier le client de rattachement du participant");
                                                    }
                                                    }

                                                >
                                                    {Get_List_Partner_Clients_result &&
                                                        Get_List_Partner_Clients_result.map((myclient) => (
                                                            <MenuItem key={JSON.parse(myclient).nom} value={JSON.parse(myclient)._id}
                                                                style={{ "paddingLeft": "5px", "textAlign": "left", }}>
                                                                {JSON.parse(myclient).nom}&nbsp;&nbsp;

                                                            </MenuItem>
                                                        ))}
                                                </TextField>
                                            </div>}

                                            {String(participant_data_edit_mode) !== "1" && <div className="session_caract"> Client<br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_client_rattachement"
                                                    id="detail_client_rattachement"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_client_rattachement_nom}
                                                />

                                            </div>}

                                            {String(participant_data_edit_mode) !== "1" && <div className="session_caract"> Statut<br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_status_inscript"
                                                    id="detail_status_inscript"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_status_inscrit_label}
                                                />

                                            </div>}

                                            {String(participant_data_edit_mode) === "1" && <div className="session_caract"> Statut<br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_status_inscript"
                                                    id="detail_status_inscript"
                                                    select
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_status_inscrit}
                                                    onChange={(e) => {
                                                        setp_detail_status_inscrit(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }
                                                    }

                                                >
                                                    <MenuItem value="1" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }}>Inscrit &nbsp;&nbsp;</MenuItem>
                                                    <MenuItem value="0" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Preinscrit &nbsp;</MenuItem>
                                                    <MenuItem value="-1" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Annule &nbsp;</MenuItem>
                                                    <MenuItem value="2" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Encours &nbsp;</MenuItem>
                                                </TextField>
                                            </div>}


                                            <div className="session_caract"> Nom<br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_nom"
                                                    id="detail_nom"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_nom}
                                                    onChange={(e) => {
                                                        setp_detail_nom(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }
                                                    }

                                                />
                                            </div>

                                            <div className="session_caract"> Prenom<br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_prenom"
                                                    id="detail_prenom"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_prenom}
                                                    onChange={(e) => {
                                                        setp_detail_prenom(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }
                                                    }
                                                />
                                            </div>

                                            <div className="session_caract"> Email<br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_mail"
                                                    id="detail_mail"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_mail}
                                                    onChange={(e) => {
                                                        setp_detail_mail(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }
                                                    }
                                                />
                                            </div>

                                            <div className="session_caract"> Téléphone <br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_tel"
                                                    id="detail_tel"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_tel}
                                                    onChange={(e) => {
                                                        setp_detail_tel(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }
                                                    }
                                                />
                                            </div>


                                            <div className="session_caract"> Adresse<br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_adresse"
                                                    id="detail_adresse"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_adresse}
                                                    onChange={(e) => {
                                                        setp_detail_adresse(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }
                                                    }
                                                />
                                            </div>
                                            <div className="session_caract"> Code postal<br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_code_postal"
                                                    id="detail_code_postal"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_code_postal}
                                                    onChange={(e) => {

                                                        setp_detail_code_postal(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }
                                                    }
                                                />
                                            </div>
                                            <div className="session_caract"> Ville <br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_ville"
                                                    id="detail_ville"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    value={p_detail_ville}
                                                    conChange={(e) => {
                                                        setp_detail_ville(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }
                                                    }
                                                    className="disabled_style"

                                                />
                                            </div>


                                            <div className="session_caract">
                                                Date Inscription
                                                <DatePicker
                                                    name="detail_incr_date"
                                                    id="detail_incr_date"
                                                    selected={detailuser_date_inscription}

                                                    dateFormat="dd/MM/yyyy"
                                                    className="disabled_style"
                                                    locale='fr-FR'

                                                />
                                            </div>


                                            <div className="session_caract"> Cout <br />
                                                <TextField sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_cout"
                                                    id="detail_cout"
                                                    type="number"
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    inputProps={{ min: "1", max: "999999", step: "1" }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_cout}
                                                    onChange={(e) => {
                                                        setp_detail_cout(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }
                                                    }
                                                />
                                            </div>

                                            <div className="session_caract"> Opco <br />
                                                <TextField sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_opco"
                                                    id="detail_opco"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}

                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_opco}
                                                    onChange={(e) => {
                                                        setp_detail_opco(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }}
                                                />
                                            </div>


                                            <div className="session_caract"> Mode Financement<br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_mode_fin"
                                                    id="detail_mode_fin"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_mode_fin}
                                                    onChange={(e) => {
                                                        setp_detail_mode_fin(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }
                                                    }
                                                />
                                            </div>


                                            <div className="session_caract"> Employeur<br />
                                                <TextField
                                                    sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="detail_employeur"
                                                    id="detail_employeur"

                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    className="disabled_style"
                                                    value={p_detail_employeur}
                                                    onChange={(e) => {
                                                        setp_detail_employeur(e.target.value);
                                                        setparticipant_data_changed("1");
                                                    }
                                                    }
                                                />
                                            </div>
                                            {is_lms_class_code && <div>
                                                <div className="div_row" style={{ "border": "None" }}>
                                                    <hr className="hr_break" />
                                                </div>
                                                <div className="div_row" style={{ "border": "None", "fontSize": "22px", "fontWeight": "600" }}>
                                                    Acces LMS

                                                </div>
                                                <div className="div_row" style={{ "border": "None" }}>
                                                    <div className="session_caract"> login LMS<br />
                                                        <TextField
                                                            sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}

                                                            name="login_lms"
                                                            id="login_lms"
                                                            value={attendee_lms_login}
                                                            InputLabelProps={{
                                                                shrink: true,
                                                            }}
                                                            disabled={true}
                                                            className="disabled_style"

                                                        />
                                                    </div>

                                                    <div className="session_caract"> Mot de passe LMS<br />
                                                        <TextField
                                                            sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                            required
                                                            name="lms_pwd"
                                                            id="lms_pwd"
                                                            value="xxxxx"
                                                            InputLabelProps={{
                                                                shrink: true,
                                                            }}
                                                            disabled={true}
                                                            className="disabled_style"

                                                        />
                                                    </div>
                                                    <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>

                                                        <Button variant="contained" className="bton_enreg" onClick={Resend_LMS_Credentials}> (R)envoyer les Identifiants
                                                        </Button>

                                                    </div>
                                                </div>
                                            </div>}


                                            <div className="div_row" style={{ "border": "None" }}>
                                                &nbsp;
                                            </div>
                                            {String(participant_data_changed) === "1" && String(participant_data_edit_mode) === "1" && <div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
                                                /!\ Pensez à enregistrer les modifications
                                            </div>}


                                            <div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>

                                                {String(participant_data_edit_mode) === "1" && <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>

                                                    <Button variant="contained" className="bton_enreg" onClick={Update_One_StagiaireData}>Enregistrer les modifications
                                                    </Button>

                                                </div>}

                                                {String(participant_data_edit_mode) === "1" && <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }} >
                                                    <Button variant="contained" className="bton_annule" onClick={AnnuleAttendeeDetailFields}>Annuler
                                                    </Button>
                                                </div>}
                                            </div>


                                            {String(participant_data_edit_mode) !== "1" && <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>

                                                <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
                                                    &nbsp;
                                                </div>

                                                <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>

                                                    <Button variant="contained" className="bton_edit" onClick={EnableAttendeeDetailFields}>Editer
                                                    </Button>
                                                </div>

                                            </div>}


                                            <div className="div_row" style={{ "border": "None" }}>
                                                <hr className="hr_break" />
                                            </div>
                                        </div>

                                        <div className="div_row" style={{ "border": "None", "fontSize": "22px", "fontWeight": "600" }}>
                                            Evaluation

                                        </div>

                                        <div className="div_row" style={{ "border": "None" }}>
                                            <div className="session_caract">
                                                Date Evaluation
                                                <DatePicker
                                                    name="date_evaluation"
                                                    id="date_evaluation"
                                                    selected={detailuser_date_evaluation}


                                                    dateFormat="dd/MM/yyyy"
                                                    className="disabled_style"
                                                    locale='fr-FR'


                                                />
                                            </div>

                                            <div className="session_caract"> Note Evaluation<br />
                                                <TextField sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                                    required
                                                    name="note_eval"
                                                    id="note_eval"
                                                    type="number"


                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    inputProps={{ min: "0", max: "5", step: "1", readOnly: true, }}

                                                    className="disabled_style"
                                                />
                                            </div>

                                            <div className="session_caract"> Evaluation<br />
                                                <Editor
                                                    onInit={(evt, editor) => editorRef_evaluation.current = editor}
                                                    initialValue={field_evaluation}
                                                    onKeyUp={editor_keyup}
                                                    disabled={true}

                                                    init={{
                                                        resize: false,

                                                        height: 100,
                                                        menubar: false,
                                                        plugins: [
                                                            'advlist autolink lists link image charmap print preview anchor',
                                                            'searchreplace visualblocks code fullscreen',
                                                            'insertdatetime media table paste code help wordcount'
                                                        ],
                                                        toolbar: false,
                                                        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px; }'
                                                    }}
                                                />



                                            </div>


                                        </div>


                                        <div className="div_row" style={{ "border": "None" }}>
                                            &nbsp;
                                        </div>

                                        {<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>

                                            <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>

                                                {String(SendEvaluationEmail_api) === "false" && <div className="div_row koUpdateData" style={{ "textAlign": "center" }}>
                                                    {SendEvaluationEmail_message}</div>}


                                                {String(SendEvaluationEmail_api) === "true" && <div className="div_row okUpdateData" style={{ "textAlign": "center" }}>
                                                    La demande d'evaluation ete envoyée par email </div>}


                                                <Button variant="contained" className="bton_enreg" onClick={SendEvaluationEmail}>Envoi demande evaluation
                                                </Button>

                                            </div>

                                            <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>

                                                <Button variant="contained" className="bton_edit" onClick={DownloadAttendeeDetail}>Imprimer fiche detaillée
                                                </Button>

                                            </div>

                                        </div>}
                                        <div className="div_row" style={{ "border": "None" }}>
                                            <hr className="hr_break" />
                                        </div>

                                        <div className="div_row" style={{ "border": "None", "fontSize": "22px", "fontWeight": "600" }}>
                                            Attestation

                                        </div>
                                        <div className="div_row" style={{ "border": "None" }}>
                                            {detailuser_date_certification && <div className="session_caract">
                                                Attestation delivrée le
                                                <DatePicker
                                                    name="certif_date"
                                                    id="certif_date"
                                                    selected={detailuser_date_certification}

                                                    dateFormat="dd/MM/yyyy"
                                                    className="disabled_style"
                                                    locale='fr-FR'


                                                />
                                            </div>}

                                            {!detailuser_date_certification && <div className="session_caract">
                                                Attestation NON délivrée encore
                                                <nav style={{ "visibility": "hidden" }}> <DatePicker
                                                    name="certif_date"
                                                    id="certif_date"
                                                    selected={detailuser_date_certification}

                                                    dateFormat="dd/MM/yyyy"
                                                    className="disabled_style"
                                                    locale='fr-FR'
                                                    style={{ "visibility": "hidden" }}

                                                />
                                                </nav>
                                            </div>}

                                        </div>
                                        <div className="div_row" style={{ "border": "None" }}>
                                            &nbsp;
                                        </div>

                                        {sessionChanged && <div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
                                            /!\ Pensez à enregistrer les modifications
                                        </div>}

                                        {!sessionChanged && String(CreateSessionFormation_api) === "true" &&
                                            <div className="div_row okUpdateData" style={{ "textAlign": "center" }}>
                                                La session de formation à été bien mise à jour.
                                            </div>}

                                        {!sessionChanged && String(CreateSessionFormation_api) === "false" &&
                                            <div className="div_row koUpdateData" style={{ "textAlign": "center" }}>
                                                {CreateSessionFormation_message}
                                            </div>}


                                        {<div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>

                                            <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>


                                                {String(SendAttendeeAttestation_api) === "true" &&
                                                    <div className="div_row okUpdateData" style={{ "textAlign": "center" }}>
                                                        L'attestation a été bien envoyée par email
                                                    </div>}

                                                {String(SendAttendeeAttestation_api) === "false" &&
                                                    <div className="div_row koUpdateData" style={{ "textAlign": "center" }}>
                                                        {SendAttendeeAttestation_message}
                                                    </div>}


                                                {!detailuser_date_certification && <Button variant="contained" className="bton_enreg" onClick={SendAttendeeAttestation}>Delivrer l'attestation de formation
                                                </Button>}
                                            </div>

                                            <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>

                                                <Button variant="contained" className="bton_edit" onClick={DownloadAttendeeAttestation}>Imprimer l'attestation de formation
                                                </Button>




                                            </div>

                                        </div>}
                                        <div className="div_row" style={{ "border": "None" }}>
                                            &nbsp;
                                        </div>


                                    </div>


                                </div>

                            </div>}

                            {String(GetAttendee_api) === "false" && <div className="div_row koUpdateData">
                                {GetAttendee_message}
                            </div>}


                        </div>}

                    </div>}

                </div>


            </div>


        </div >
    );
}

export default DisplayPartnerSession;

