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

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 { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import 'react-tooltip/dist/react-tooltip.css'
import 'reactjs-popup/dist/index.css';
import "react-datepicker/dist/react-datepicker.css";
import 'moment/locale/fr';
import Box from '@mui/material/Box';
import { Tooltip } from 'react-tooltip'
import img_loading_spin from "./../mysy_img/mysy_spin_loading.gif";
import TextareaAutosize from '@mui/material/TextareaAutosize';
import Autocomplete from '@mui/material/Autocomplete';
import { FcOpenedFolder } from "react-icons/fc";
import { gridClasses } from '@mui/x-data-grid';
import Link from '@mui/material/Link';
import { PiDotsThree } from "react-icons/pi";
import { makeStyles } from "@material-ui/core/styles";
import Paper from '@material-ui/core/Paper';
import Draggable from 'react-draggable';
import InputAdornment from '@mui/material/InputAdornment';
import { AiFillCloseCircle } from "react-icons/ai";
import { MdAddCircleOutline, MdRemoveCircleOutline } from "react-icons/md";
import Module_Alert_Confirmation from "./Module_Alert_Confirmation";
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContentText from '@mui/material/DialogContentText';
import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
import { IconButton } from '@material-ui/core';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import {
    GridToolbarContainer, GridToolbarExport, GridToolbarColumnsButton,
    GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExportContainer, useGridApiContext,
    gridFilteredSortedRowIdsSelector,
    gridVisibleColumnFieldsSelector,
    GridValueGetterParams,
    GridPreferencePanelsValue,

} from '@mui/x-data-grid';
import * as XLSX from 'xlsx';
import { FcInfo } from "react-icons/fc";


import { FcAcceptDatabase, FcPlanner } from "react-icons/fc";

function PaperComponent(props) {
    return (
        <Draggable
            handle="#draggable-dialog-title"
            cancel={'[class*="MuiDialogContent-root"]'}
        >
            <Paper {...props} />
        </Draggable>
    );
}


const useStyles = makeStyles((theme) => ({

    dialog: {
        position: 'absolute',
        // left: 10,
        top: 400
    },

    paper: {
        overflowY: 'unset',
    },
    customizedButton: {
        position: 'absolute',
        left: '98%',
        top: '-3%',
        backgroundColor: 'lightgray',
        color: 'gray',
    },
}));


const Module_Session_Notes_Classement = (props) => {
    const classes = useStyles();
    const history = useHistory();


    const [jury_cell_editable, setjury_cell_editable] = useState(props.jury_cell_editable);

    const [rowss, setRows] = useState([]);

    const [isLoading, setLoading] = useState();

    function ExpandableCell_50({ value }) {
        const [expanded, setExpanded] = React.useState(false);

        return (
            <nav>
                {value && <div style={{ paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all" }}>

                    {expanded ? value : String(value).slice(0, 50)}&nbsp;
                    {value.length > 50 && (
                        // eslint-disable-next-line jsx-a11y/anchor-is-valid
                        <Link
                            type="button"
                            component="button"
                            sx={{ fontSize: 'inherit' }}
                            onClick={() => setExpanded(!expanded)}
                        >
                            {expanded ? <nav>  <PiDotsThree />Réduire</nav> : <nav> <PiDotsThree />Voir</nav>}
                        </Link>
                    )}
                </div>}

                {!value && <div style={{ paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all" }}>
                    &nbsp;
                </div>
                }
            </nav>
        );
    }

    function ExpandableCell_50_bg_hiligt({ value }) {
        const [expanded, setExpanded] = React.useState(false);

        return (
            <nav>
                {value && <div style={{
                    paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all", color: '#0000FF',
                    "textAlign": "center"
                }}>

                    {expanded ? value : value.slice(0, 50)}&nbsp;
                    {value.length > 50 && (
                        // eslint-disable-next-line jsx-a11y/anchor-is-valid
                        <Link
                            type="button"
                            component="button"
                            sx={{ fontSize: 'inherit' }}
                            onClick={() => setExpanded(!expanded)}
                        >
                            {expanded ? <nav>  <PiDotsThree />Réduire</nav> : <nav> <PiDotsThree />Voir</nav>}
                        </Link>
                    )}
                </div>}

                {value && <div style={{ paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all", color: '#0000FF' }}>
                    &nbsp;
                </div>
                }
            </nav>
        );
    }

    function ExpandableCell_50_bg_hiligt_red_color({ value }) {
        const [expanded, setExpanded] = React.useState(false);

        return (
            <nav>
                {value && <div style={{
                    paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all", color: 'red',
                    "textAlign": "center"
                }}>

                    {expanded ? value : value.slice(0, 50)}&nbsp;
                    {value.length > 50 && (
                        // eslint-disable-next-line jsx-a11y/anchor-is-valid
                        <Link
                            type="button"
                            component="button"
                            sx={{ fontSize: 'inherit' }}
                            onClick={() => setExpanded(!expanded)}
                        >
                            {expanded ? <nav>  <PiDotsThree />Réduire</nav> : <nav> <PiDotsThree />Voir</nav>}
                        </Link>
                    )}
                </div>}

                {value && <div style={{ paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all", color: 'red' }}>
                    &nbsp;
                </div>
                }
            </nav>
        );
    }


    function Display_Colunm_text({ value }) {

        return (
            <div style={{ paddingLeft: "5px", paddingRight: "10px", "display": "block", wordBreak: "break-all" }}>
                {value}&nbsp;

            </div>
        );
    }



    const columns_list_session_note_classement_final = [
        { field: 'id', headerName: 'id', hide: true },
        { field: '_id', headerName: '_id', hide: true },
        { field: 'apprenant_id', headerName: 'apprenant_id', hide: true },
        { field: 'session_id', headerName: 'session_id', hide: true },
        { field: 'class_id', headerName: 'class_id', hide: true },


        { field: 'nom', headerName: 'Nom', minwidth: 200, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'prenom', headerName: 'Prenom', minwidth: 200, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'rang', headerName: 'Rang', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        {
            field: 'note_finale', headerName: 'Noete finale', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />,

        },


        { field: 'credit_acquis', headerName: 'Credit acquis', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'rang_calculation_date', headerName: 'Date Calcul', minwidth: 100, flex: 1, hide: true, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },

        { field: 'jury_note', headerName: 'Note Jury', width: 200, editable: jury_cell_editable, renderCell: (params) => <ExpandableCell_50_bg_hiligt_red_color {...params} />, align: "center", },
        { field: 'jury_observation', headerName: 'Observ. Jury', width: 200, editable: jury_cell_editable, renderCell: (params) => <ExpandableCell_50_bg_hiligt_red_color {...params} />, align: "left", },
        {
            field: 'jury_validation', headerName: 'Validation Jury', width: 150, hide: false, editable: jury_cell_editable,
            renderCell: (cellValues) => {
                return (
                    <nav>
                        {New_Option_Valisation_Jury && New_Option_Valisation_Jury.length > 0 && jury_cell_editable === true && <Autocomplete
                            disablePortal
                            name="filtre1"
                            id="filtre1"

                            value={New_Option_Valisation_Jury.filter((data) => (data).value === String(cellValues.row.jury_validation))[0].label}
                            options={New_Option_Valisation_Jury}
                            onChange={(event, value) => {
                                if (value && value.value) {
                                    mysy_onchange_list(cellValues.row.id, "jury_validation_champ_technique", value.value);
                                }

                            }}

                            renderInput={(params) => <TextField {...params} label="" placeholder=""
                                inputProps={{ ...params.inputProps, style: { fontSize: 10, height: "1rem" } }}

                            />
                            }
                        />}

                        {jury_cell_editable !== true &&

                            <div style={{ paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all" }}>
                                {cellValues.row.jury_validation_champ_technique && String(cellValues.row.jury_validation_champ_technique) === "1" && "Oui"}
                                {cellValues.row.jury_validation_champ_technique && String(cellValues.row.jury_validation_champ_technique) === "0" && "Non"}

                            </div>
                        }
                    </nav>


                );
            }
        },
        {
            field: 'jury_validation_champ_technique', headerName: 'Validation Jury_tech', width: 200, renderCell: (params) => <ExpandableCell_50_bg_hiligt_red_color {...params} />, align: "center",
        },

        {
            field: 'gestion', headerName: 'Gestion', minWidth: 50, flex: 1, maxWidth: 100, hideable: true, hide: false, editable: false, align: "center",
            renderCell: (cellValues) => {
                return (
                    <div>
                        {props.jury_id && String(props.jury_id).length > 5 && <nav style={{ width: '100%', 'textAlign': 'center' }}>
                            <IconButton
                                aria-label="more"
                                id="long-button"
                                aria-controls={open ? 'long-menu_p' : undefined}
                                aria-expanded={open ? 'true' : undefined}
                                aria-haspopup="true"
                                // onClick={handleClick_option_button_vertical}
                                onClick={(e) => {
                                    handleClick_option_button_vertical(e);
                                    setworking_cellValues(cellValues);

                                    setp_detail_jury_observation(cellValues.row.jury_observation);
                                    setp_detail_jury_note(cellValues.row.jury_note);
                                    setp_detail_jury_validation(cellValues.row.jury_validation);
                                    setselected_inscription_id_for_jury(cellValues.row._id);

                                    setselected_jury_type_for_observation("classement_final");
                                    setsession_formation_final_note_classement_id('');
                                }}

                            >
                                <MoreVertIcon />
                            </IconButton>
                            <Menu
                                id="long-menu_p"
                                MenuListProps={{
                                    'aria-labelledby': 'long-button',
                                }}
                                anchorEl={anchorEl}
                                open={open}
                                onClose={handleClose_option_button_vertical}
                                slotProps={{
                                    paper: {
                                        style: {
                                            maxHeight: ITEM_HEIGHT * 4.5,
                                            width: '20ch',
                                            boxShadow: "-3px 4px 0px -30px #000000",
                                            borderRadius: '0px !important',
                                            lineHeight: '3rem'
                                        },
                                    },
                                }}
                            >
                                {options_menu_vertical.map((option) => (
                                    <MenuItem key={option}

                                        onClick={(e) => {
                                            //handleClose_option_button_vertical(e, option);
                                            setAnchorEl(null);

                                            if (option && String(option) === "Jury Edit") {

                                                setDialog_JURY_INFO_open(true);
                                            }



                                        }}
                                    >
                                        {option}
                                    </MenuItem>
                                ))}
                            </Menu>



                        </nav>}

                        {(!props.jury_id || String(props.jury_id).length <= 5) && <nav style={{ width: '100%', 'textAlign': 'center' }}>
                            -
                        </nav>}
                    </div>
                );
            },
        }

    ]

    const columns_list_evaluation_detail_note_classement_final = [
        { field: 'id', headerName: 'id', hide: true },
        { field: '_id', headerName: '_id', hide: true },
        { field: 'inscription_id', headerName: 'inscription_id', hide: true },
        { field: 'session_id', headerName: 'session_id', hide: true },
        { field: 'ue_id', headerName: 'ue_id', hide: true },
        { field: 'class_id', headerName: 'class_id', hide: true },
        { field: 'class_id_external_code', headerName: 'Code Formation', hide: true },
        { field: 'ue_id_code', headerName: 'UE Code', minwidth: 200, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'inscription_id_nom', headerName: 'Nom', minwidth: 200, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'inscription_id_prenom', headerName: 'Prenom', minwidth: 200, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },

        { field: 'type_eval', headerName: 'Type eval', minwidth: 100, flex: 1, hide: false, editable: true, renderCell: (params) => <ExpandableCell_50 {...params} />, },



        { field: 'moyenne', headerName: 'moyenne', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'somme', headerName: 'somme', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'nb_evaluation', headerName: 'nb_evaluation', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'inscription_id_mail', headerName: 'Email', minwidth: 300, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },

        { field: 'detail', headerName: 'Detail Note', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },

    ]


    const columns_list_evaluation_note_classement_final = [
        { field: 'id', headerName: 'id', hide: true },
        { field: '_id', headerName: '_id', hide: true },
        { field: 'inscription_id', headerName: 'inscription_id', hide: true },
        { field: 'session_id', headerName: 'session_id', hide: true },
        { field: 'ue_id', headerName: 'ue_id', hide: true },
        { field: 'class_id', headerName: 'class_id', hide: true },
        { field: 'class_id_external_code', headerName: 'Code Formation', hide: true },
        { field: 'ue_id_code', headerName: 'UE Code', minwidth: 200, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'inscription_id_nom', headerName: 'Nom', minwidth: 200, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'inscription_id_prenom', headerName: 'Prenom', minwidth: 200, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },

        { field: 'note_finale', headerName: 'Note finale', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'rang', headerName: 'rang', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'seuil_validation', headerName: 'Seuil val.', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'ue_coefficient', headerName: 'Coeff.', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },
        { field: 'credit', headerName: 'Credit.', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },


        {
            field: 'ue_validation', headerName: 'Validé', minwidth: 100, flex: 1, hide: false, editable: false,

            renderCell: (cellValues) => {
                return (
                    <div style={{ paddingLeft: "5px", paddingRight: "15px", "display": "block", wordBreak: "break-all" }}>
                        {cellValues.row.ue_validation && String(cellValues.row.ue_validation) === "1" && "Oui"}
                        {cellValues.row.ue_validation && String(cellValues.row.ue_validation) === "0" && "Non"}

                    </div>

                );
            }
        },

        { field: 'note_td', headerName: 'note_td', hide: true },
        { field: 'note_tp', headerName: 'note_tp', hide: true },
        { field: 'note_examen', headerName: 'note_examen', hide: true },
        { field: 'jury_note', headerName: 'Note Jury', hide: true },
        { field: 'jury_observation', headerName: 'Observ. Jury', width: 200, editable: jury_cell_editable, renderCell: (params) => <ExpandableCell_50_bg_hiligt_red_color {...params} />, align: "left", },


        { field: 'detail', headerName: 'Detail Note', minwidth: 100, flex: 1, hide: false, editable: false, renderCell: (params) => <ExpandableCell_50 {...params} />, },

        {
            field: 'gestion', headerName: 'Gestion', minWidth: 50, flex: 1, maxWidth: 100, hideable: true, hide: false, editable: false, align: "center",
            renderCell: (cellValues) => {
                return (
                    <div>
                        <nav style={{ width: '100%', 'textAlign': 'center' }}>
                            <IconButton
                                aria-label="more"
                                id="long-button"
                                aria-controls={open ? 'long-menu_p' : undefined}
                                aria-expanded={open ? 'true' : undefined}
                                aria-haspopup="true"
                                // onClick={handleClick_option_button_vertical}
                                onClick={(e) => {
                                    handleClick_option_button_vertical(e);
                                    setworking_cellValues(cellValues);

                                    setselected_jury_type_for_observation("classement_ue");
                                    setsession_formation_final_note_classement_id(cellValues.row._id);

                                    setp_detail_jury_observation(cellValues.row.jury_observation);
                                    setp_detail_jury_note(cellValues.row.jury_note);
                                    setp_detail_jury_validation(cellValues.row.jury_validation);
                                    setselected_inscription_id_for_jury(cellValues.row._id);
                                }}

                            >
                                <MoreVertIcon />
                            </IconButton>
                            <Menu
                                id="long-menu_p"
                                MenuListProps={{
                                    'aria-labelledby': 'long-button',
                                }}
                                anchorEl={anchorEl}
                                open={open}
                                onClose={handleClose_option_button_vertical}
                                slotProps={{
                                    paper: {
                                        style: {
                                            maxHeight: ITEM_HEIGHT * 4.5,
                                            width: '20ch',
                                            boxShadow: "-3px 4px 0px -30px #000000",
                                            borderRadius: '0px !important',
                                            lineHeight: '3rem'
                                        },
                                    },
                                }}
                            >
                                {options_menu_vertical.map((option) => (
                                    <MenuItem key={option}

                                        onClick={(e) => {
                                            //handleClose_option_button_vertical(e, option);
                                            setAnchorEl(null);

                                            if (option && String(option) === "Jury Edit") {


                                                setDialog_JURY_INFO_open(true);
                                            }



                                        }}
                                    >
                                        {option}
                                    </MenuItem>
                                ))}
                            </Menu>



                        </nav>
                    </div>
                );
            },
        },


        { field: 'type_eval', headerName: 'Type eval', hide: true },

        { field: 'regle_calcul', headerName: 'regle_calcul', hide: true },

    ]
    const myRef_head = useRef(null);

    const [New_Getall_Session_Detail_Final_Note_Classement_result, setNew_Getall_Session_Detail_Final_Note_Classement_result] = useState([]);

    const [Getall_Session_Detail_Final_Note_Classement_api, setGetall_Session_Detail_Final_Note_Classement_api] = useState();
    const [Getall_Session_Detail_Final_Note_Classement_message, setGetall_Session_Detail_Final_Note_Classement_message] = useState();
    const [Getall_Session_Detail_Final_Note_Classement_result, setGetall_Session_Detail_Final_Note_Classement_result] = useState([]);
    function Getall_Session_Detail_Final_Note_Classement(event) {

        var form = new FormData();


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

        if (props.jury_seance_agenda_id)
            form.append("jury_apprenant_agenda_id", props.jury_seance_agenda_id);

        if (props.jury_seance_ue_id)
            form.append("tab_ue_id", props.jury_seance_ue_id);

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


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

        // Recuperation des valeurs de filtres

        if (p_filtre1_value && String(p_filtre1) === "ue_id") {
            filtre1_value = p_filtre1_value;
            form.append("tab_ue_id", filtre1_value);
        }
        else if (p_filtre1_value && String(p_filtre1) === "inscrit_id") {
            filtre1_value = p_filtre1_value;
            form.append("tab_inscrit_id", filtre1_value);
        }



        if (p_filtre2_value && String(p_filtre2) === "ue_id") {
            filtre2_value = p_filtre2_value;
            form.append("tab_ue_id", filtre2_value);
        }
        else if (p_filtre2_value && String(p_filtre2) === "inscrit_id") {
            filtre2_value = p_filtre2_value;
            form.append("tab_inscrit_id", filtre2_value);
        }


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

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

            if (String(res.data.status) === String("true")) {
                // console.log(" In Getall_Session_Detail_Final_Note_Classement  res.data.status = " + res.data.status);
                // console.log(" In Getall_Session_Detail_Final_Note_Classement  res.data.message r_class = " + res.data.message);
                setGetall_Session_Detail_Final_Note_Classement_api("true");
                setGetall_Session_Detail_Final_Note_Classement_result(res.data.message);


                var new_data2 = [];
                const new_data = res.data.message.map((x) => {

                    //---
                    var localid = JSON.parse(x).id;
                    var local_id = JSON.parse(x)._id;
                    var inscription_id = JSON.parse(x).inscription_id;
                    var session_id = JSON.parse(x).session_id;
                    var type_eval = JSON.parse(x).type_eval;
                    var ue_id = JSON.parse(x).ue_id;
                    var class_id = JSON.parse(x).class_id;
                    var moyenne = JSON.parse(x).moyenne;
                    var somme = JSON.parse(x).somme;
                    var nb_evaluation = JSON.parse(x).nb_evaluation;

                    var ue_id_code = JSON.parse(x).ue_id_code;
                    var class_id_external_code = JSON.parse(x).class_id_external_code;
                    var inscription_id_mail = JSON.parse(x).inscription_id_mail;
                    var inscription_id_nom = JSON.parse(x).inscription_id_nom;
                    var inscription_id_prenom = JSON.parse(x).inscription_id_prenom;



                    //---
                    var node = {
                        "_id": local_id,
                        "id": localid,
                        "label": local_id,
                        "inscription_id": inscription_id,
                        "session_id": session_id,
                        "type_eval": type_eval,
                        "ue_id": ue_id,
                        "class_id": class_id,
                        "moyenne": moyenne,
                        "somme": somme,
                        "nb_evaluation": nb_evaluation,

                        "ue_id_code": ue_id_code,
                        "class_id_external_code": class_id_external_code,
                        "inscription_id_mail": inscription_id_mail,
                        "inscription_id_nom": inscription_id_nom,
                        "inscription_id_prenom": inscription_id_prenom,

                    };
                    new_data2.push(node);
                });

                //---
                var node = {
                    "_id": "",
                    "id": "",
                    "label": "",
                    "inscription_id": "",
                    "session_id": "",
                    "type_eval": "",
                    "ue_id": "",
                    "class_id": "",
                    "moyenne": "",
                    "somme": "",
                    "nb_evaluation": "",
                    "ue_id_code": "",
                    "class_id_external_code": "",
                    "inscription_id_mail": "",
                    "inscription_id_nom": "",
                    "inscription_id_prenom": "",

                };
                new_data2.push(node);

                if (new_data2.length > 0)
                    setNew_Getall_Session_Detail_Final_Note_Classement_result(new_data2);

            }
            else {
                setGetall_Session_Detail_Final_Note_Classement_api("false");
                setGetall_Session_Detail_Final_Note_Classement_message(res.data.message);
                // alert(res.data.message)
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");
            }

        }).catch((error) => {
            console.warn('Not good man :( Getall_Session_Detail_Final_Note_Classement = ', error);
            setGetall_Session_Detail_Final_Note_Classement_api("false");
            //  alert(" Impossible de recuperer la liste des évaluations");
            setdisplay_alert_mysy("1");
            setalert_message(" Impossible de recuperer la liste des évaluations");
            setalert_type("error");
            //setmyApimyApiMessage("")
        })
    }



    const [dialogOpen_push_lms, setdialogOpen_push_lms] = useState(false);
    const Dialog_menuitem_close_push_lms = () => {
        setdialogOpen_push_lms(false)
    };


    const [working_cellValues, setworking_cellValues] = useState(false);

    const [dialogOpen_supp, setdialogOpen_supp] = useState(false);
    const Dialog_menuitem_close_supp = () => {
        setdialogOpen_supp(false)
    };

    const options_menu_vertical = [
        '',
        'Jury Edit',
    ];


    const ITEM_HEIGHT = 48;


    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    const handleClick_option_button_vertical = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose_option_button_vertical = (event, value) => {

        if (value && String(value) === "Jury Edit") {
            console.log("### Jury Edit= ", value);

        }

        else if (value && String(value) === "Editer") {

        }

        else if (value && String(value) === "Pub. E-Learning") {

        }


        else if (value && String(value) === "Supprimer") {

        }


        setAnchorEl(null);

    };



    const [Calcul_Note_Classement_Session_api, setCalcul_Note_Classement_Session_api] = useState();
    const [Calcul_Note_Classement_Session_message, setCalcul_Note_Classement_Session_message] = useState();
    const [Calcul_Note_Classement_Session_result, setCalcul_Note_Classement_Session_result] = useState([]);
    function Calcul_Note_Classement_Session(event) {

        var form = new FormData();


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

        setLoading(false);

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

        axios.post(myurl, form).then(res => {
            setLoading(false);
            if (String(res.data.status) === String("true")) {
                // console.log(" In Calcul_Note_Classement_Session  res.data.status = " + res.data.status);
                // console.log(" In Calcul_Note_Classement_Session  res.data.message r_class = " + res.data.message);
                setCalcul_Note_Classement_Session_api("true");
                setCalcul_Note_Classement_Session_result(res.data.message);

                Getall_Session_Detail_Final_Note_Classement();
                Getall_Session_UE_Final_Note_Classement();
                Getall_Session_Final_Note_Classement();

                // alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("success");

            }
            else {
                setCalcul_Note_Classement_Session_api("false");
                setCalcul_Note_Classement_Session_message(res.data.message);
                // alert(res.data.message)
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");
            }

        }).catch((error) => {
            setLoading(false);
            console.warn('Not good man :( Calcul_Note_Classement_Session = ', error);
            setCalcul_Note_Classement_Session_api("false");
            //  alert(" Impossible de recuperer la liste des évaluations");
            setdisplay_alert_mysy("1");
            setalert_message(" Impossible de recuperer la liste des évaluations");
            setalert_type("error");
            //setmyApimyApiMessage("")
        })
    }

    const [New_Getall_Session_UE_Final_Note_Classement_result, setNew_Getall_Session_UE_Final_Note_Classement_result] = useState([]);

    const [Getall_Session_UE_Final_Note_Classement_api, setGetall_Session_UE_Final_Note_Classement_api] = useState();
    const [Getall_Session_UE_Final_Note_Classement_message, setGetall_Session_UE_Final_Note_Classement_message] = useState();
    const [Getall_Session_UE_Final_Note_Classement_result, setGetall_Session_UE_Final_Note_Classement_result] = useState([]);
    function Getall_Session_UE_Final_Note_Classement(event) {

        var form = new FormData();


        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("tab_session_id", props.related_collection_recid);
        if (props.jury_seance_agenda_id)
            form.append("jury_apprenant_agenda_id", props.jury_seance_agenda_id);

        if (props.jury_seance_ue_id)
            form.append("tab_ue_id", props.jury_seance_ue_id);

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


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

        // Recuperation des valeurs de filtres

        if (p_filtre1_value && String(p_filtre1) === "ue_id") {
            filtre1_value = p_filtre1_value;
            form.append("tab_ue_id", filtre1_value);
        }
        else if (p_filtre1_value && String(p_filtre1) === "inscrit_id") {
            filtre1_value = p_filtre1_value;
            form.append("tab_inscrit_id", filtre1_value);
        }


        if (p_filtre2_value && String(p_filtre2) === "ue_id") {
            filtre2_value = p_filtre2_value;
            form.append("tab_ue_id", filtre2_value);
        }
        else if (p_filtre2_value && String(p_filtre2) === "inscrit_id") {
            filtre2_value = p_filtre2_value;
            form.append("tab_inscrit_id", filtre2_value);
        }



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

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

            if (String(res.data.status) === String("true")) {
                // console.log(" In Getall_Session_UE_Final_Note_Classement  res.data.status = " + res.data.status);
                //console.log(" In Getall_Session_UE_Final_Note_Classement  res.data.message r_class = " + res.data.message);
                setGetall_Session_UE_Final_Note_Classement_api("true");
                setGetall_Session_UE_Final_Note_Classement_result(res.data.message);


                var new_data2 = [];
                const new_data = res.data.message.map((x) => {

                    //---
                    var localid = JSON.parse(x).id;
                    var local_id = JSON.parse(x)._id;
                    var inscription_id = JSON.parse(x).inscription_id;
                    var session_id = JSON.parse(x).session_id;
                    var type_eval = JSON.parse(x).type_eval;
                    var ue_id = JSON.parse(x).ue_id;
                    var class_id = JSON.parse(x).class_id;
                    var note_td = JSON.parse(x).note_td;
                    var note_tp = JSON.parse(x).note_tp;
                    var note_examen = JSON.parse(x).note_examen;
                    var regle_calcul = JSON.parse(x).regle_calcul;
                    var note_finale = JSON.parse(x).note_finale;

                    var regle_calcul = JSON.parse(x).regle_calcul;
                    var seuil_validation = JSON.parse(x).seuil_validation;
                    var ue_coefficient = JSON.parse(x).ue_coefficient;
                    var ue_validation = JSON.parse(x).ue_validation;


                    var ue_id_code = JSON.parse(x).ue_id_code;
                    var class_id_external_code = JSON.parse(x).class_id_external_code;
                    var inscription_id_mail = JSON.parse(x).inscription_id_mail;
                    var inscription_id_nom = JSON.parse(x).inscription_id_nom;
                    var inscription_id_prenom = JSON.parse(x).inscription_id_prenom;



                    //---
                    var node = {
                        "_id": local_id,
                        "id": localid,
                        "label": local_id,
                        "inscription_id": inscription_id,
                        "session_id": session_id,
                        "type_eval": type_eval,
                        "ue_id": ue_id,
                        "class_id": class_id,
                        "note_td": note_td,
                        "note_tp": note_tp,
                        "note_examen": note_examen,
                        "regle_calcul": regle_calcul,
                        "note_finale": note_finale,

                        "regle_calcul": regle_calcul,
                        "seuil_validation": seuil_validation,
                        "ue_coefficient": ue_coefficient,
                        "ue_validation": ue_validation,


                        "ue_id_code": ue_id_code,
                        "class_id_external_code": class_id_external_code,
                        "inscription_id_mail": inscription_id_mail,
                        "inscription_id_nom": inscription_id_nom,
                        "inscription_id_prenom": inscription_id_prenom,

                    };
                    new_data2.push(node);
                });

                //---
                var node = {
                    "_id": "",
                    "id": "",
                    "label": "",
                    "inscription_id": "",
                    "session_id": "",
                    "type_eval": "",
                    "ue_id": "",
                    "note_td": "",
                    "note_tp": "",
                    "note_examen": "",
                    "regle_calcul": "",
                    "note_finale": "",
                    "ue_id_code": "",
                    "class_id_external_code": "",
                    "inscription_id_mail": "",
                    "inscription_id_nom": "",
                    "inscription_id_prenom": "",
                    "regle_calcul": "",
                    "seuil_validation": "",
                    "ue_coefficient": "",
                    "ue_validation": "",

                };
                new_data2.push(node);

                if (new_data2.length > 0)
                    setNew_Getall_Session_UE_Final_Note_Classement_result(new_data2);

            }
            else {
                setGetall_Session_UE_Final_Note_Classement_api("false");
                setGetall_Session_UE_Final_Note_Classement_message(res.data.message);
                // alert(res.data.message)
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");
            }

        }).catch((error) => {
            console.warn('Not good man :( Getall_Session_UE_Final_Note_Classement = ', error);
            setGetall_Session_UE_Final_Note_Classement_api("false");
            //  alert(" Impossible de recuperer la liste des évaluations");
            setdisplay_alert_mysy("1");
            setalert_message(" Impossible de recuperer la liste des évaluations");
            setalert_type("error");
            //setmyApimyApiMessage("")
        })
    }




    const [New_Getall_Session_Final_Note_Classement_result, setNew_Getall_Session_Final_Note_Classement_result] = useState([]);

    const [Getall_Session_Final_Note_Classement_api, setGetall_Session_Final_Note_Classement_api] = useState();
    const [Getall_Session_Final_Note_Classement_message, setGetall_Session_Final_Note_Classement_message] = useState();
    const [Getall_Session_Final_Note_Classement_result, setGetall_Session_Final_Note_Classement_result] = useState([]);
    function Getall_Session_Final_Note_Classement(event) {

        var form = new FormData();


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


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

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

            if (String(res.data.status) === String("true")) {
                // console.log(" In Getall_Session_Final_Note_Classement  res.data.status = " + res.data.status);
                //console.log(" In Getall_Session_Final_Note_Classement  res.data.message r_class = " + res.data.message);
                setGetall_Session_Final_Note_Classement_api("true");
                setGetall_Session_Final_Note_Classement_result(res.data.message);


                var new_data2 = [];
                const new_data = res.data.message.map((x) => {

                    //---
                    var localid = JSON.parse(x).id;
                    var local_id = JSON.parse(x)._id;
                    var session_id = JSON.parse(x).session_id;
                    var apprenant_id = JSON.parse(x).apprenant_id;

                    var class_id = JSON.parse(x).class_id;
                    var nom = JSON.parse(x).nom;
                    var prenom = JSON.parse(x).prenom;
                    var rang = JSON.parse(x).rang;
                    var note_finale = JSON.parse(x).note_finale;
                    var rang_calculation_date = JSON.parse(x).rang_calculation_date;
                    var credit_acquis = JSON.parse(x).credit_acquis;

                    var jury_note = JSON.parse(x).jury_note;
                    var jury_observation = JSON.parse(x).jury_observation;
                    var jury_validation = JSON.parse(x).jury_validation;


                    //---
                    var node = {
                        "_id": local_id,
                        "id": localid,
                        "apprenant_id": apprenant_id,
                        "label": local_id,
                        "session_id": session_id,

                        "class_id": class_id,
                        "nom": nom,
                        "prenom": prenom,
                        "rang": rang,
                        "note_finale": note_finale,
                        "rang_calculation_date": rang_calculation_date,
                        "credit_acquis": credit_acquis,

                        "jury_note": jury_note,
                        "jury_observation": jury_observation,
                        "jury_validation": jury_validation,

                    };
                    new_data2.push(node);
                });


                if (new_data2.length > 0)
                    setNew_Getall_Session_Final_Note_Classement_result(new_data2);


            }
            else {
                setGetall_Session_Final_Note_Classement_api("false");
                setGetall_Session_Final_Note_Classement_message(res.data.message);
                // alert(res.data.message)
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");
            }

        }).catch((error) => {
            console.warn('Not good man :( Getall_Session_Final_Note_Classement = ', error);
            setGetall_Session_Final_Note_Classement_api("false");
            //  alert(" Impossible de recuperer la liste des évaluations");
            setdisplay_alert_mysy("1");
            setalert_message(" Impossible de recuperer la liste des évaluations");
            setalert_type("error");
            //setmyApimyApiMessage("")
        })
    }

    useEffect(() => {


        Getall_Session_Detail_Final_Note_Classement();
        Getall_Session_UE_Final_Note_Classement();
        Getall_Session_Final_Note_Classement();
        Getall_Class_List_UE();

        GetListeInscrit(props.related_collection_recid);

        Getall_TrainingSession();

    }, [])


    const [New_Getall_TrainingSession_result, setNew_Getall_TrainingSession_result] = useState();

    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();

        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
 form.append("archive", "0");
        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);

                var new_data2 = [];
                const new_data = res.data.message.map((x) => {

                    //---
                    var localid = JSON.parse(x).id;
                    var local_id = JSON.parse(x)._id;
                    var local_internal_url = JSON.parse(x).class_internal_url;
                    var local_title_session = JSON.parse(x).titre;
                    var local_code_session = JSON.parse(x).code_session;
                    var local_invoiced_statut = JSON.parse(x).invoiced_statut;
                    var local_class_id = JSON.parse(x).class_id;

                    //---
                    var node = {
                        "_id": local_id,
                        "id": localid,
                        "label": local_code_session,
                        "class_internal_url": local_internal_url,
                        "titre": local_title_session,
                        "code_session": local_code_session,
                        "invoiced_statut": local_invoiced_statut,
                        "class_id": local_class_id,
                    };
                    new_data2.push(node);

                    // return {"_id": " + str(local_id) + ", "label": " + local_courrier_template_ref_interne + '" , "courrier_template_ref_interne": "' + local_courrier_template_ref_interne + '", "nom_champ_technique": "' + local_nom_champ_technique + '",  "nom_champ_fonctionel": "' + local_nom_champ_fonctionel + '","valide": "1" };

                });


                if (new_data2.length > 0)
                    setNew_Getall_TrainingSession_result(new_data2);

                //console.log(" ### new_data2 = ", new_data2)


            }
            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 [nb_stagiaire_Inscrit, setnb_stagiaire_Inscrit] = useState("0");
    const [rowss_insc, setRows_insc] = useState([]);


    const [New_GetListeInscrit_result, setNew_GetListeInscrit_result] = useState([]);

    const [GetListeInscrit_insc_api, setGetListeInscrit_insc_api] = useState();
    const [GetListeInscrit_insc_meassage, setGetListeInscrit_insc_meassage] = useState();
    const [GetListeInscrit_insc_result, setGetListeInscrit_insc_result] = useState([])
    function GetListeInscrit(localsessionid) {
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");
        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        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;
        }

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

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

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

                    //console.log("erreur rrrr:" + data['status'])
                    setGetListeInscrit_insc_api("true");
                    setnb_stagiaire_Inscrit(data['message'].length);
                    //console.log(" ### setnb_stagiaire_Inscrit = ", data['message'].length);


                    var new_data2 = [];
                    const new_data = data['message'].map((x) => {

                        //---
                        var localid = JSON.parse(x).id;
                        var local_id = JSON.parse(x)._id;
                        var email = JSON.parse(x).email;
                        var civilite = JSON.parse(x).civilite;
                        var prenom = JSON.parse(x).prenom;
                        var nom = JSON.parse(x).nom;

                        var label = JSON.parse(x).nom + " " + JSON.parse(x).prenom;



                        //---
                        var node = {
                            "_id": local_id,
                            "id": localid,
                            "email": email,
                            "civilite": civilite,
                            "prenom": prenom,
                            "nom": nom,
                            "label": label,


                        };
                        new_data2.push(node);
                    });


                    //---
                    var node = {
                        "_id": "",
                        "id": "",
                        "email": "",
                        "civilite": "",
                        "prenom": "",
                        "label": "",

                    };
                    new_data2.push(node);

                    if (new_data2.length > 0)
                        setNew_GetListeInscrit_result(new_data2);
                    else
                        setNew_GetListeInscrit_result([])

                    //console.log(" ## new_data2 = ", new_data2)

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

                }

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

    }


    const [New_Getall_Class_List_UE_result, setNew_Getall_Class_List_UE_result] = useState([]);

    const [Getall_Class_List_UE_api, setGetall_Class_List_UE_api] = useState();
    const [Getall_Class_List_UE_message, setGetall_Class_List_UE_message] = useState();
    const [Getall_Class_List_UE_result, setGetall_Class_List_UE_result] = useState([]);
    function Getall_Class_List_UE(event) {

        var form = new FormData();

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

        if (props.session_class_id)
            form.append("class_id", props.session_class_id);

        else {
            setdisplay_alert_mysy("1");
            setalert_message(" Paramètres incomplets");
            setalert_type("error");

            return;
        }


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

        setLoading(true);

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

            setLoading(false);
            if (String(res.data.status) === String("true")) {
                //console.log(" In Getall_Class_List_UE  res.data.status = " + res.data.status);
                // console.log(" In Getall_Class_List_UE  res.data.message r_class = " + res.data.message);
                setGetall_Class_List_UE_api("true");
                setGetall_Class_List_UE_result(res.data.message);

                var new_data2 = [];
                const new_data = res.data.message.map((x) => {

                    //---
                    var localid = JSON.parse(x).id;
                    var local_id = JSON.parse(x)._id;
                    var local_code = JSON.parse(x).code;
                    var local_titre = JSON.parse(x).titre;


                    var local_credit = JSON.parse(x).credit;
                    var local_pres_dist_hyp = JSON.parse(x).pres_dist_hyp;
                    var local_is_noted = JSON.parse(x).is_noted;
                    var local_coefficient = JSON.parse(x).coefficient;
                    var local_seuil_validation = JSON.parse(x).seuil_validation;



                    //---
                    var node = {
                        "_id": local_id,
                        "id": localid,
                        "label": local_code,
                        "code": local_code,
                        "titre": local_titre,
                        "credit": local_credit,
                        "pres_dist_hyp": local_pres_dist_hyp,
                        "is_noted": local_is_noted,
                        "coefficient": local_coefficient,
                        "seuil_validation": local_seuil_validation,

                    };
                    new_data2.push(node);
                });

                //---
                var node = {
                    "_id": "",
                    "id": "",
                    "label": "",
                    "code": "",
                    "titre": "",
                    "credit": "",
                    "pres_dist_hyp": "",
                    "is_noted": "",
                    "coefficient": "",
                    "seuil_validation": "",

                };
                new_data2.push(node);

                if (new_data2.length > 0)
                    setNew_Getall_Class_List_UE_result(new_data2);
            }
            else {
                setGetall_Class_List_UE_api("false");
                setGetall_Class_List_UE_message(res.data.message);
                //alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");
            }

        }).catch((error) => {

            setLoading(false);
            console.warn('Not good man :( Getall_Class_List_UE = ', error);
            setGetall_Class_List_UE_api("false");
            alert(" Impossible de recuperer la liste des UE de la formation");
            //setmyApimyApiMessage("")
        })
    }

    const [New_Reinscription_Getall_Class_List_UE_Given_Class_result, setNew_Reinscription_Getall_Class_List_UE_Given_Class_result] = useState([]);

    const [Reinscription_Getall_Class_List_UE_Given_Class_api, setReinscription_Getall_Class_List_UE_Given_Class_api] = useState();
    const [Reinscription_Getall_Class_List_UE_Given_Class_message, setReinscription_Getall_Class_List_UE_Given_Class_message] = useState();
    const [Reinscription_Getall_Class_List_UE_Given_Class_result, setReinscription_Getall_Class_List_UE_Given_Class_result] = useState([]);
    function Reinscription_Getall_Class_List_UE_Given_Class(local_class_id) {

        var form = new FormData();

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


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

        setLoading(true);

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

            setLoading(false);
            if (String(res.data.status) === String("true")) {
                //  console.log(" In Reinscription_Getall_Class_List_UE_Given_Class  res.data.status = " + res.data.status);
                //  console.log(" In Reinscription_Getall_Class_List_UE_Given_Class  res.data.message r_class = " + res.data.message);
                setReinscription_Getall_Class_List_UE_Given_Class_api("true");
                setReinscription_Getall_Class_List_UE_Given_Class_result(res.data.message);

                var new_data2 = [];
                const new_data = res.data.message.map((x) => {

                    //---
                    var localid = JSON.parse(x).id;
                    var local_id = JSON.parse(x)._id;
                    var local_code = JSON.parse(x).code;
                    var local_titre = JSON.parse(x).titre;


                    var local_credit = JSON.parse(x).credit;
                    var local_pres_dist_hyp = JSON.parse(x).pres_dist_hyp;
                    var local_is_noted = JSON.parse(x).is_noted;
                    var local_coefficient = JSON.parse(x).coefficient;
                    var local_seuil_validation = JSON.parse(x).seuil_validation;



                    //---
                    var node = {
                        "_id": local_id,
                        "id": localid,
                        "label": local_code,
                        "code": local_code,
                        "titre": local_titre,
                        "credit": local_credit,
                        "pres_dist_hyp": local_pres_dist_hyp,
                        "is_noted": local_is_noted,
                        "coefficient": local_coefficient,
                        "seuil_validation": local_seuil_validation,

                    };
                    new_data2.push(node);
                });

                //---
                var node = {
                    "_id": "",
                    "id": "",
                    "label": "",
                    "code": "",
                    "titre": "",
                    "credit": "",
                    "pres_dist_hyp": "",
                    "is_noted": "",
                    "coefficient": "",
                    "seuil_validation": "",

                };
                new_data2.push(node);

                //console.log(" ### node =", node);

                if (new_data2.length > 0)
                    setNew_Reinscription_Getall_Class_List_UE_Given_Class_result(new_data2);
            }
            else {
                setReinscription_Getall_Class_List_UE_Given_Class_api("false");
                setReinscription_Getall_Class_List_UE_Given_Class_message(res.data.message);
                //alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");
            }

        }).catch((error) => {

            setLoading(false);
            console.warn('Not good man :( Reinscription_Getall_Class_List_UE_Given_Class = ', error);
            setReinscription_Getall_Class_List_UE_Given_Class_api("false");
            alert(" Impossible de recuperer la liste des UE de la formation");
            //setmyApimyApiMessage("")
        })
    }

    const [gridline_session_inscrit_id, setgridline_session_inscrit_id] = useState("");
    const [selectionModel_note_Session_classement, setselectionModel_note_Session_classement] = React.useState([]);


    const [gridline_id, setgridline_id] = useState("");
    const [selectionModel_note_UE_classement, setselectionModel_note_UE_classement] = React.useState([]);


    const [gridline_detail_id, setgridline_detail_id] = useState("");
    const [selectionModel_detail_note_finale_classement, setselectionModel_detail_note_finale_classement] = React.useState([]);

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

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



    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("");

    const [p_filtre3, setp_filtre3] = useState("");
    const [p_filtre3_value, setp_filtre3_value] = useState("");

    const [p_filtre4, setp_filtre4] = useState("");
    const [p_filtre4_value, setp_filtre4_value] = useState("");

    function clean_all_filters() {
        setgridline_id('');
        setp_filtre1("");
        setp_filtre1_value("");

        setp_filtre2("");
        setp_filtre2_value("");

        setp_filtre3("");
        setp_filtre3_value("");

        setp_filtre4("");
        setp_filtre4_value("");

        //   Annule_Add_One_Jury_DetailFields();

        //   Getall_Partner_Jury();

    }

    const New_Option_Valisation_Jury = [
        { "id": "1", "label": "Oui", "value": "1" },
        { "id": "0", "label": "Non ", "value": "0" },
        { "id": "", "label": "", "value": "" },

    ]


    const New_Option_Filter = [
        { "id": "ue_id", "label": "Code UE", "value": "ue_id" },
        { "id": "inscrit_id", "label": "Apprenant ", "value": "inscrit_id" },
        { "id": "", "label": "", "value": "" },
        { "id": "1", "label": "", "value": "1" }, // Cette ligne pour couvrir l'ajout d'une ligne de filter. C'est fait expres.
    ]

    function clean_all_filters() {

        setp_filtre1("");
        setp_filtre1_value("");

        setp_filtre2("");
        setp_filtre2_value("");

        setp_filtre3("");
        setp_filtre3_value("");

        setp_filtre4("");
        setp_filtre4_value("");

        Getall_Session_Detail_Final_Note_Classement();
        Getall_Session_UE_Final_Note_Classement();
        Getall_Session_Final_Note_Classement();
        Getall_Class_List_UE();

    }


    function Jury_Update_Final_Session() {
        const new_note_session_with_jury_JSON = JSON.stringify(New_Getall_Session_Final_Note_Classement_result);

        console.log(" new_note_session_with_jury_JSON  = ", new_note_session_with_jury_JSON);
        console.log(" New_Getall_Session_Final_Note_Classement_result  = ", New_Getall_Session_Final_Note_Classement_result);
    }


    function OnchangeCellDataGrid(params) {


        // params = la nouvelle lignes


        var num_line = params.id;  // ==> Id de la ligne changé
        var colomn = params.field; // ==> colonne de la ligne changé
        var new_value = params.value; // ==> la nouvelle valeur



        const updatedData = New_Getall_Session_Final_Note_Classement_result.map((x) => {

            var localid = (x).id;


            if (String(num_line) === String(localid) && colomn === "jury_note") {
                var tmp = {};
                tmp['id'] = (x).id;
                tmp['_id'] = (x)._id;
                tmp['session_id'] = (x).session_id;
                tmp['class_id'] = (x).class_id;
                tmp['nom'] = (x).nom;
                tmp['prenom'] = (x).prenom;


                tmp['rang'] = (x).rang;
                tmp['note_finale'] = (x).note_finale;
                tmp['credit_acquis'] = (x).credit_acquis;
                tmp['rang_calculation_date'] = (x).rang_calculation_date;


                tmp['jury_note'] = new_value;
                tmp['jury_observation'] = (x).jury_observation;
                tmp['jury_validation'] = (x).jury_validation;
                tmp['jury_validation_champ_technique'] = (x).jury_validation_champ_technique;

                return tmp;


            }

            if (String(num_line) === String(localid) && colomn === "jury_observation") {
                var tmp = {};
                tmp['id'] = (x).id;
                tmp['_id'] = (x)._id;
                tmp['session_id'] = (x).session_id;
                tmp['class_id'] = (x).class_id;
                tmp['nom'] = (x).nom;
                tmp['prenom'] = (x).prenom;


                tmp['rang'] = (x).rang;
                tmp['note_finale'] = (x).note_finale;
                tmp['credit_acquis'] = (x).credit_acquis;
                tmp['rang_calculation_date'] = (x).rang_calculation_date;


                tmp['jury_note'] = (x).jury_note;
                tmp['jury_observation'] = new_value;
                tmp['jury_validation'] = (x).jury_validation;
                tmp['jury_validation_champ_technique'] = (x).jury_validation_champ_technique;

                return tmp;
            }

            if (String(num_line) === String(localid) && colomn === "jury_validation") {
                var tmp = {};
                tmp['id'] = (x).id;
                tmp['_id'] = (x)._id;
                tmp['session_id'] = (x).session_id;
                tmp['class_id'] = (x).class_id;
                tmp['nom'] = (x).nom;
                tmp['prenom'] = (x).prenom;


                tmp['rang'] = (x).rang;
                tmp['note_finale'] = (x).note_finale;
                tmp['credit_acquis'] = (x).credit_acquis;
                tmp['rang_calculation_date'] = (x).rang_calculation_date;


                tmp['jury_note'] = (x).jury_note;
                tmp['jury_observation'] = (x).jury_observation;
                tmp['jury_validation'] = new_value;
                tmp['jury_validation_champ_technique'] = (x).jury_validation_champ_technique;


                return tmp;
            }


            var tmp = {};
            tmp['id'] = (x).id;
            tmp['_id'] = (x)._id;
            tmp['session_id'] = (x).session_id;
            tmp['class_id'] = (x).class_id;
            tmp['nom'] = (x).nom;
            tmp['prenom'] = (x).prenom;


            tmp['rang'] = (x).rang;
            tmp['note_finale'] = (x).note_finale;
            tmp['credit_acquis'] = (x).credit_acquis;
            tmp['rang_calculation_date'] = (x).rang_calculation_date;


            tmp['jury_note'] = (x).jury_note;
            tmp['jury_observation'] = (x).jury_observation;
            tmp['jury_validation'] = (x).jury_validation;
            tmp['jury_validation_champ_technique'] = (x).jury_validation_champ_technique;

            return tmp;


        });

        //     console.log(" ### updatedData = ", updatedData);

        setNew_Getall_Session_Final_Note_Classement_result([]);

        setNew_Getall_Session_Final_Note_Classement_result(updatedData);

    }


    function mysy_onchange_list(num_line, colomn, new_value) {


        // params = la nouvelle lignes
        /*
        
                var num_line = params.id;  // ==> Id de la ligne changé
                var colomn = params.field; // ==> colonne de la ligne changé
                var new_value = params.value; // ==> la nouvelle valeur
       
    

        console.log("## colomn = ", colomn, " ### new_value = ", new_value);
 */


        const updatedData = New_Getall_Session_Final_Note_Classement_result.map((x) => {

            var localid = (x).id;


            if (String(num_line) === String(localid) && colomn === "jury_validation_champ_technique") {


                var tmp = {};
                tmp['id'] = (x).id;
                tmp['_id'] = (x)._id;
                tmp['session_id'] = (x).session_id;
                tmp['class_id'] = (x).class_id;
                tmp['nom'] = (x).nom;
                tmp['prenom'] = (x).prenom;


                tmp['rang'] = (x).rang;
                tmp['note_finale'] = (x).note_finale;
                tmp['credit_acquis'] = (x).credit_acquis;
                tmp['rang_calculation_date'] = (x).rang_calculation_date;


                tmp['jury_note'] = (x).jury_note;
                tmp['jury_observation'] = (x).jury_observation;
                tmp['jury_validation'] = String(new_value);
                tmp['jury_validation_champ_technique'] = String(new_value);

                return tmp;
            }



            var tmp = {};
            tmp['id'] = (x).id;
            tmp['_id'] = (x)._id;
            tmp['session_id'] = (x).session_id;
            tmp['class_id'] = (x).class_id;
            tmp['nom'] = (x).nom;
            tmp['prenom'] = (x).prenom;


            tmp['rang'] = (x).rang;
            tmp['note_finale'] = (x).note_finale;
            tmp['credit_acquis'] = (x).credit_acquis;
            tmp['rang_calculation_date'] = (x).rang_calculation_date;


            tmp['jury_note'] = (x).jury_note;
            tmp['jury_observation'] = (x).jury_observation;
            tmp['jury_validation'] = (x).jury_validation;
            tmp['jury_validation_champ_technique'] = (x).jury_validation_champ_technique;

            return tmp;


        });

        //console.log(" ### updatedData = ", updatedData);

        setNew_Getall_Session_Final_Note_Classement_result([]);

        setNew_Getall_Session_Final_Note_Classement_result(updatedData);

    }


    const [Dialog_1_message, setDialog_1_message] = React.useState(false);
    const [Dialog_JURY_INFO_open, setDialog_JURY_INFO_open] = React.useState(false);

    const Dialog_JURY_INFO_handleClose_buton = () => {
        setDialog_JURY_INFO_open(false);
        setp_detail_jury_observation("");
        setp_detail_jury_note("");
        setp_detail_jury_validation("");
        setsession_formation_final_note_classement_id("");
        setselected_jury_type_for_observation("");

    };


    const [p_detail_jury_ue_observation, setp_detail_jury_ue_observation] = useState("");
    const [p_detail_jury_ue_note, setp_detail_jury_ue_note] = useState("");
    const [p_detail_jury_ue_validation, setp_detail_jury_ue_validation] = useState("");

    const [selected_jury_type_for_observation, setselected_jury_type_for_observation] = useState("");

    const [session_formation_final_note_classement_id, setsession_formation_final_note_classement_id] = useState("");

    const [p_detail_jury_observation, setp_detail_jury_observation] = useState("");
    const [p_detail_jury_note, setp_detail_jury_note] = useState("");
    const [p_detail_jury_validation, setp_detail_jury_validation] = useState("");
    const [selected_inscription_id_for_jury, setselected_inscription_id_for_jury] = useState("");

    const [Update_Jury_Promo_List_Inscrit_api, setUpdate_Jury_Promo_List_Inscrit_api] = useState();
    const [Update_Jury_Promo_List_Inscrit_message, setUpdate_Jury_Promo_List_Inscrit_message] = useState();
    const [Update_Jury_Promo_List_Inscrit_result, setUpdate_Jury_Promo_List_Inscrit_result] = useState([]);
    function Update_Jury_Promo_List_Inscrit() {
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");


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

        form.append("jury_id", props.jury_id);
        form.append("tab_inscriptions_ids", selected_inscription_id_for_jury);
        form.append("jury_observation", p_detail_jury_observation);
        form.append("jury_note", p_detail_jury_note);
        form.append("jury_validation", p_detail_jury_validation);

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


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

            setLoading(false);

            if (String(res.data.status) === String("true")) {
                setUpdate_Jury_Promo_List_Inscrit_api("true");
                setUpdate_Jury_Promo_List_Inscrit_result(res.data.message);

                Getall_Session_Final_Note_Classement();
                // alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("success");
            }
            else {
                setUpdate_Jury_Promo_List_Inscrit_api("false");
                setUpdate_Jury_Promo_List_Inscrit_message(res.data.message);
                // alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");
            }

        }).catch((error) => {
            setLoading(false);

            console.log('UpdateStagiaireData : Not good man :( Update_Jury_Promo_List_Inscrit = ' + error);
            setUpdate_Jury_Promo_List_Inscrit_api("false");
            alert(" Impossible d'ajouter ou  mettre à jour la décision du jury ");

        })
    }

    const [Update_Jury_UE_List_Inscrit_api, setUpdate_Jury_UE_List_Inscrit_api] = useState();
    const [Update_Jury_UE_List_Inscrit_message, setUpdate_Jury_UE_List_Inscrit_message] = useState();
    const [Update_Jury_UE_List_Inscrit_result, setUpdate_Jury_UE_List_Inscrit_result] = useState([]);
    function Update_Jury_UE_List_Inscrit() {
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");


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

        form.append("tab_ids", session_formation_final_note_classement_id);
        form.append("jury_observation", p_detail_jury_observation);
        form.append("jury_note", p_detail_jury_note);
        form.append("jury_validation", p_detail_jury_validation);

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


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

            setLoading(false);

            if (String(res.data.status) === String("true")) {
                setUpdate_Jury_UE_List_Inscrit_api("true");
                setUpdate_Jury_UE_List_Inscrit_result(res.data.message);

                Getall_Session_UE_Final_Note_Classement();

                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("success");
            }
            else {
                setUpdate_Jury_UE_List_Inscrit_api("false");
                setUpdate_Jury_UE_List_Inscrit_message(res.data.message);
                // alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");
            }

        }).catch((error) => {
            setLoading(false);

            console.log('UpdateStagiaireData : Not good man :( Update_Jury_UE_List_Inscrit = ' + error);
            setUpdate_Jury_UE_List_Inscrit_api("false");

            setdisplay_alert_mysy("1");
            setalert_message(" Impossible d'ajouter ou  mettre à jour la décision du jury ");
            setalert_type("error");

        })
    }

    // DEBUT  EXPORT EXCEL DATAGRID 

    function CustomToolbar(props) {


        return (
            <GridToolbarContainer {...props}>

                <GridToolbarColumnsButton />
                <GridToolbarFilterButton />
                <GridToolbarDensitySelector
                    slotProps={{ tooltip: { title: 'Change density' } }}
                />
                <Box sx={{ flexGrow: 1 }} />
                <ExportButton data_colums={props.data_colums} />


            </GridToolbarContainer>
        );
    }

    function getExcelData(apiRef) {
        // Select rows and columns
        const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
        const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef);

        // Format the data. Here we only keep the value
        const data = filteredSortedRowIds.map((id) => {
            const row = {};
            visibleColumnsField.forEach((field) => {
                row[field] = apiRef.current.getCellParams(id, field).value;
            });
            return row;
        });

        return data;
    }


    function ExportButton(props) {
        return (
            <GridToolbarExportContainer {...props}>
                <ExportMenuItem data_colums={props.data_colums} />
            </GridToolbarExportContainer>
        );
    }

    function handleExport(apiRef, data_colums) {
        const data = getExcelData(apiRef);
        const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef);


        const local_config = {
            keys: visibleColumnsField,

            columnNames: data_colums.filter((mydata) => (mydata).disableExport !== true).map(function (mydata) {
                if (mydata.headerName && visibleColumnsField.includes(mydata.field)) {
                    if (mydata.headerName) {
                        return mydata.headerName;
                    }
                }

            }),

            fileName: 'data_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_") + '.xlsx',
            sheetName: 'Export_' + String(new Date().toJSON().slice(0, 10)).replaceAll("-", "_"),
        };

        local_config.columnNames = local_config.columnNames.filter(function (element) {
            return element !== undefined;
        });


        const rows = data.map((row) => {
            const mRow = {};
            for (const key of local_config.keys) {
                mRow[key] = row[key];
            }
            return mRow;
        });

        const worksheet = XLSX.utils.json_to_sheet(rows);
        XLSX.utils.sheet_add_aoa(worksheet, [[...local_config.columnNames]], {
            origin: 'A1',
        });

        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, local_config.sheetName);
        XLSX.writeFile(workbook, local_config.fileName, { compression: true });
    }

    function ExportMenuItem(props) {
        const apiRef = useGridApiContext();
        const { hideMenu } = props;

        return (
            <MenuItem
                onClick={() => {
                    handleExport(apiRef, props.data_colums);
                    // Hide the export menu after the export
                    hideMenu?.();
                }}
            >
                Export Excel
            </MenuItem>
        );
    }

    // FIN EXPORT EXCEL DATAGRID 

    const [vue_note, setvue_note] = useState("classement");
    const [actionmass_ftion_val, setactionmass_ftion_val] = useState();
    const New_Option = [
        { "id": "0", "label": "(R)Inscrire", "value": "inscription" },
        { "id": "2", "label": "", "value": "" },
    ]

    const [Dialog_add_inscription_message, setDialog_add_inscription_message] = React.useState(false);
    const [Dialog_add_inscription_open, setDialog_add_inscription_open] = React.useState(false);
    function Dialog_add_inscription_handle_change_participant_session(message) {
        setDialog_add_inscription_message(message);
        setDialog_add_inscription_open(true);
    }

    const Dialog_add_inscription_handleClose = () => {

    };

    const Dialog_add_inscription_handleClose_buton = () => {
        setDialog_add_inscription_open(false);
        setNew_Reinscription_Getall_Class_List_UE_Given_Class_result([]);
        settab_selected_list_ue([]);
    };
    const New_Type_apprenant = [
        { "id": "0", "label": "Autre" },
        { "id": "1", "label": "Salariés" },
        { "id": "2", "label": "Apprentis" },
        { "id": "3", "label": "Particuliers" },
        { "id": "4", "label": "Sans Emploi" }
    ]

    const New_civilite = [
        { "id": "mme", "label": "Mme", "value": "mme" },
        { "id": "m", "label": "M", "value": "m" },
        { "id": "neutre", "label": "Neutre", "value": "neutre" },
        { "id": "", "label": "", "value": "" },
    ]


    const New_Financement = [
        {
            value: 'cpf',
            label: 'CPF',
        },
        {
            value: 'perso',
            label: 'Fonds Propres',
        },
        {
            value: 'entreprise',
            label: 'Votre entreprise',
        },

        {
            value: 'mixte_cpf_perso',
            label: 'CPF & Fonds Propres',
        },
        {
            value: 'modefinancement',
            label: 'modefinancement',
        },
        {
            value: 'autre',
            label: 'Autre',
        },

    ];

    const [selected_apprenant_id, setselected_apprenant_id] = useState("");
    const [selected_apprenant_row_id, setselected_apprenant_row_id] = useState("");

    const [p_dialog_session_id, setp_dialog_session_id] = useState("");
    const [p_dialog_type_apprenant, setp_dialog_type_apprenant] = useState("");
    const [p_dialog_financement, setp_dialog_financement] = useState("");
    const [p_dialog_client_rattachement_id, setp_dialog_client_rattachement_id] = useState("");

    const [p_dialog_eu_id, setp_dialog_eu_id] = useState("");

    const [Add_Inscription_Apprenant_api, setAdd_Inscription_Apprenant_api] = useState();
    const [Add_Inscription_Apprenant_message, setAdd_Inscription_Apprenant_message] = useState();
    const [Add_Inscription_Apprenant_result, setAdd_Inscription_Apprenant_result] = useState();
    function Add_Inscription_Apprenant() {
        var form = new FormData();

        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("_id", selected_apprenant_id);
        form.append("session_id", p_dialog_session_id);
        form.append("type_apprenant", p_dialog_type_apprenant);
        form.append("modefinancement", p_dialog_financement);



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

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

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

                setAdd_Inscription_Apprenant_api("true");
                setAdd_Inscription_Apprenant_result(res.data.message);

                Dialog_add_inscription_handleClose_buton();
                //  Get_Appenant_List_Inscription(selected_apprenant_id);


                setp_dialog_session_id('');
                setp_dialog_type_apprenant('');
                setp_dialog_financement('');

                //    alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("success");
                if (document.getElementById('myRef_head')) {
                    var divh = document.getElementById('myRef_head').offsetTop;
                    window.scrollTo({
                        top: divh,
                        behavior: "smooth",
                    });
                }

            }
            else {
                setAdd_Inscription_Apprenant_api("false");
                setAdd_Inscription_Apprenant_message(res.data.message);
                alert(res.data.message);
            }

        }).catch((error) => {
            setLoading(false);
            console.warn('Add_Inscription_Apprenant : Not good man :( Add_Inscription_Apprenant = ' + error);
            setAdd_Inscription_Apprenant_api("false");
            alert(" Impossible d'ajouter l'inscription ");

        })
    }

    function GetSelectedRowsSession() {
        ///alert(" les lignes slected sont :  " + selectionModel + " nb item = " + selectionModel.length);
        //const selectedRowsData = selectionModel.map((id) => rowss.find((row) => row.id === id));
        //console.log(rowss[0]);
        var tab_tmp = []
        for (var i = 0; i < selectionModel_note_Session_classement.length; i++) {
            var myid = parseInt(String(selectionModel_note_Session_classement[i]));
            var line = New_Getall_Session_Final_Note_Classement_result[myid];
            tab_tmp.push(line.apprenant_id);
            //console.log(rowss[myid]['external_code']);
        }
        return tab_tmp;

    }


    const [Add_Inscription_List_Apprenant_api, setAdd_Inscription_List_Apprenant_api] = useState();
    const [Add_Inscription_List_Apprenant_message, setAdd_Inscription_List_Apprenant_message] = useState();
    const [Add_Inscription_List_Apprenant_result, setAdd_Inscription_List_Apprenant_result] = useState();
    function Add_Inscription_List_Apprenant() {

        var tab_eu_ids = [];
        for (var i = 0; i < tab_selected_list_ue.length; i++) {

            var local_eu_id = tab_selected_list_ue[i]._id;
            tab_eu_ids.push(local_eu_id);
        }


        var liste_apprenant = GetSelectedRowsSession();
        var form = new FormData();

        const stored_cookie = getCookie('tokenmysypart');
        form.append("token", stored_cookie);
        form.append("list_apprenant_id", liste_apprenant);
        form.append("session_id", p_dialog_session_id);
        form.append("type_apprenant", p_dialog_type_apprenant);
        form.append("modefinancement", p_dialog_financement);
        form.append("tab_ue_ids", tab_eu_ids);


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

        Dialog_add_inscription_handleClose_buton();

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

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

                setAdd_Inscription_List_Apprenant_api("true");
                setAdd_Inscription_List_Apprenant_result(res.data.message);

                Dialog_add_inscription_handleClose_buton();

                setp_dialog_session_id('');
                setp_dialog_eu_id("");
                setp_dialog_type_apprenant('');
                setp_dialog_financement('');

                setselectionModel_note_Session_classement([]);

                setactionmass_ftion_val('');

                settab_selected_list_ue([]);


                //  alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("success");
                if (document.getElementById('myRef_head')) {
                    var divh = document.getElementById('myRef_head').offsetTop;
                    window.scrollTo({
                        top: divh,
                        behavior: "smooth",
                    });
                }

            }
            else {
                setAdd_Inscription_List_Apprenant_api("false");
                setAdd_Inscription_List_Apprenant_message(res.data.message);
                //alert(res.data.message);

                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("error");

            }

        }).catch((error) => {
            setLoading(false);
            console.warn('Add_Inscription_List_Apprenant : Not good man :( Add_Inscription_List_Apprenant = ' + error);
            setAdd_Inscription_List_Apprenant_api("false");
            alert(" Impossible d'inscrire les apprenant à cette session ");

        })
    }


    const fixedVal_list_ue = [];
    const [tab_selected_list_ue, settab_selected_list_ue] = useState([...fixedVal_list_ue]);

    return (
        <div className="module_session_note_classement">

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

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


            {/*** Dialog pour reinscrire un apprenant à une session */}
            <Dialog
                open={Dialog_add_inscription_open}
                //onClose={Dialog_add_inscription_handleClose}
                className="displaypartnersession"
                static
                onClose={() => null}

                PaperProps={{
                    className: classes.paper, // Apply the paper style
                    style: {
                        overflowY: 'unset',
                        position: 'absolute',
                        top: '7rem',
                        margin: "2px",
                    },
                }}
                hideBackdrop={true}
                disableScrollLock
                classes={{
                    paper: classes.dialog
                }}

                PaperComponent={PaperComponent}
                aria-labelledby="draggable-dialog-title"
            >

                <DialogTitle style={{ cursor: 'move', fontFamily: "DM Sans" }} id="draggable-dialog-title" > Inscrire </DialogTitle>
                <DialogContent className="DialogContent_width">

                    {New_Getall_TrainingSession_result && <div className="session_caract_Dialog"> <b> Formation</b>

                        <Autocomplete
                            disablePortal
                            id="combo-box-demo"
                            className="session_caract_Dialog"
                            fullWidth
                            options={New_Getall_TrainingSession_result.filter((data) => (data).invoiced_statut !== "2")}
                            onChange={(event, value) => {
                                if (value && value._id) {
                                    setp_dialog_session_id(value._id);
                                    Reinscription_Getall_Class_List_UE_Given_Class(value.class_id);

                                } else {
                                    setReinscription_Getall_Class_List_UE_Given_Class_result([]);
                                    setNew_Reinscription_Getall_Class_List_UE_Given_Class_result([]);
                                }

                            }}

                            renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                            />
                            }
                        />
                    </div>}

                    <div className="session_caract_Dialog">
                        <Tooltip className="tooltip_css" id="test01" style={{ "fontSize": "12px" }} />
                        <a data-tooltip-id="test01" data-tooltip-html="Par defaut, toutes les matières liées à la formation sont selectionnées">
                            <b> Matière <FcInfo /></b>
                        </a>

                        {New_GetListeInscrit_result.length > 0 &&
                            <Autocomplete
                                disablePortal
                                name="eu_data"
                                id="eu_data"
                                className="session_caract_Dialog"
                                // value={New_Getall_Class_List_UE_result.filter((data) => (data)._id === String(p_filtre1_value))[0].label}
                                options={New_Reinscription_Getall_Class_List_UE_Given_Class_result}
                                value={tab_selected_list_ue}
                                multiple

                                onChange={(event, value) => {
                                    settab_selected_list_ue([
                                        ...fixedVal_list_ue,
                                        ...value.filter((i) => fixedVal_list_ue.indexOf(i) === -1),
                                    ]);

                                }}

                                renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une matière"
                                    inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                                />
                                }
                            />
                        }
                    </div>

                    <div className="session_caract_Dialog" > <b> Type apprenant </b>
                        <Autocomplete
                            disablePortal
                            id="combo-box-demo"
                            className="session_caract_Dialog"
                            fullWidth
                            options={New_Type_apprenant}
                            onChange={(event, value) => {
                                if (value && value.id) {
                                    setp_dialog_type_apprenant(value.id);

                                }

                            }}

                            renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                            />
                            }
                        />

                    </div>

                    <div className="session_caract_Dialog" > <b> Mode Financement </b>
                        <Autocomplete
                            disablePortal
                            id="combo-box-demo"
                            className="session_caract_Dialog"
                            fullWidth
                            options={New_Financement}
                            onChange={(event, value) => {
                                if (value && value.value) {
                                    setp_dialog_financement(value.value);

                                }

                            }}

                            renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                            />
                            }
                        />

                    </div>


                    <div className="div_row" > &nbsp;

                    </div>
                </DialogContent>

                <DialogActions>
                    <IconButton
                        autoFocus
                        onClick={Dialog_add_inscription_handleClose_buton}
                        color="primary"
                        className={classes.customizedButton}
                    >
                        <CancelPresentationIcon />
                    </IconButton>


                    <div className="div_row">
                        <div className="div_row_gauche">

                            {selectionModel_note_Session_classement.length >= 1 && <Button onClick={Add_Inscription_List_Apprenant} className="bton_enreg_dialog"> Inscrire {selectionModel_note_Session_classement.length} apprenat(s) </Button>}
                        </div>
                        <div className="div_row_droite" style={{ "textAlign": 'center' }}>
                            <Button onClick={Dialog_add_inscription_handleClose_buton} className="bton_annule_dialog" >Fermer</Button>
                        </div>
                    </div>

                </DialogActions>


            </Dialog>


            {/*** Fin  Dialog pour reinscrire un apprenant à une session */}


            {/*  Dialog pour gerer les JURY_INFO */}
            <Dialog
                open={Dialog_JURY_INFO_open}
                //  onClose={Dialog_JURY_INFO_handleClose}
                //  className="displaypartnersession"

                className="displaypartnersession"

                static
                onClose={() => null}

                PaperProps={{


                    className: classes.paper, // Apply the paper style
                    style: {
                        overflowY: 'unset',
                        position: 'absolute',
                        top: '7rem',
                        margin: "2px",
                    },
                }}
                hideBackdrop={true}
                disableScrollLock
                classes={{
                    paper: classes.dialog
                }}

                PaperComponent={PaperComponent}
                aria-labelledby="draggable-dialog-title"

            >

                <DialogTitle style={{ cursor: 'move', background: '#fff', fontFamily:'DM Sans'}} id="draggable-dialog-title">  Délibération du Jury</DialogTitle>
                <DialogContent className="DialogContent_width" style={{ "minHeight": "30rem" }}>
                    <DialogContentText>
                        {Dialog_1_message}
                    </DialogContentText>

                    <div className="session_caract_Dialog" > <b> Observation  </b> <br />

                        <TextareaAutosize
                            name="detail_jury_observation"
                            id="detail_jury_observation"
                            aria-label="minimum height"
                            minRows={3}
                            maxRows={5}
                            //placeholder="Minimum 3 rows"
                            style={{
                                border: "1px solid gainsboro", width: '99%', padding: '2px',
                                maxHeight: '10rem', height: '5rem', minHeight: '5rem', marginBottom: '3rem'
                            }}
                            value={p_detail_jury_observation}
                            onChange={(e) => {
                                setp_detail_jury_observation(e.target.value);

                            }}

                        />

                    </div>

                    <div className="session_caract_Dialog" > <b> Note </b> <br />

                        <TextareaAutosize
                            name="detail_jury_note"
                            id="detail_jury_note"
                            aria-label="minimum height"
                            rows={1}

                            style={{
                                border: "1px solid gainsboro", width: '99%', padding: '2px',
                                maxHeight: '3rem', height: '3rem', minHeight: '3rem', marginBottom: '3rem'
                            }}
                            value={p_detail_jury_note}
                            onChange={(e) => {
                                setp_detail_jury_note(e.target.value);
                            }}

                        />

                    </div>

                    <div className="session_caract_Dialog" > <b> Validation </b> <br />

                        <TextareaAutosize
                            name="detail_jury_note"
                            id="detail_jury_note"
                            aria-label="minimum height"
                            rows={1}

                            style={{
                                border: "1px solid gainsboro", width: '99%', padding: '2px',
                                maxHeight: '3rem', height: '3rem', minHeight: '3rem', marginBottom: '3rem'
                            }}
                            value={p_detail_jury_validation}
                            onChange={(e) => {
                                setp_detail_jury_validation(e.target.value);
                            }}

                        />

                    </div>



                </DialogContent>

                <DialogActions>

                    <IconButton
                        autoFocus
                        onClick={Dialog_JURY_INFO_handleClose_buton}
                        color="primary"
                        className={classes.customizedButton}
                    >
                        <CancelPresentationIcon />
                    </IconButton>

                    <div className="div_row">
                        <div className="div_row_gauche">
                            <Button
                                className="bton_enreg_dialog" onClick={(e) => {

                                    if (selected_jury_type_for_observation === "classement_final")
                                        Update_Jury_Promo_List_Inscrit();
                                    else if (selected_jury_type_for_observation === "classement_ue")
                                        Update_Jury_UE_List_Inscrit()

                                    Dialog_JURY_INFO_handleClose_buton();
                                }}
                            >Mettre à jour </Button>

                        </div>


                        <div className="div_row_droite" style={{ "textAlign": 'center' }}>
                            <Button onClick={Dialog_JURY_INFO_handleClose_buton} className="bton_annule_dialog" >Fermer</Button>
                        </div>
                    </div>

                </DialogActions>

            </Dialog>
            {/* FIN  Dialog pour gerer les JURY_INFO */}



            <div style={{ width: '100%', float: 'left' }}>


                <nav style={{ textAlign: 'right', width: '50%', float: 'left' }}>
                    <Button variant="outlined" onClick={(e) => {
                        setvue_note("classement");
                    }} className="detail_class_submenu" id='calcul_moyenne' name='calcul_moyenne'> Classement Gle </Button>

                    <Button variant="outlined" onClick={(e) => {
                        setvue_note("detail_note");
                    }} className="detail_class_submenu" id='calcul_moyenne' name='calcul_moyenne'> Détail Notes </Button>
                </nav>
            </div>


            {vue_note && String(vue_note) === "classement" && <div style={{ "border": "None" }}>

                <div className="div_row" style={{ paddingRight: '10px' }}>

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

                            <div style={{ height: 550, width: '100%', paddingRight: '5px' }}>

                                &nbsp;
                                <div style={{ width: '100%', float: 'left' }}>
                                    <nav style={{ textAlign: 'center', width: '50%', float: 'left' }}> Notes & Classement Final (session)</nav>

                                    <nav style={{ textAlign: 'right', width: '50%', float: 'left' }}>
                                        <Button variant="outlined" onClick={Calcul_Note_Classement_Session} className="detail_class_submenu" id='calcul_moyenne' name='calcul_moyenne'> Calcul Moyenne </Button>
                                        <Button variant="outlined" onClick={Jury_Update_Final_Session} className="detail_class_submenu" id='calcul_moyenne' name='calcul_moyenne'> Mettre à jour </Button>

                                    </nav>

                                </div>
                                <Box
                                    sx={{
                                        height: 500,
                                        width: '100%',
                                        paddingRight: '1px',

                                        // Gestion des cellules reservée au jury
                                        '& .cell--jury': {
                                            backgroundColor: '#AFE1AF',
                                            border: "1px solid rgb(224, 224, 224)",
                                        },

                                        "& .MuiDataGrid-columnHeaders": {
                                            backgroundColor: "#c8cfd5",
                                            color: "black",
                                            fontSize: 14
                                        },

                                        '& .line--statut--selected': {
                                            backgroundColor: '#FBF2EF',
                                            color: 'black',
                                        },
                                        '& .line--statut--pair': {
                                            backgroundColor: 'rgba(235, 235, 235, .7)',
                                            color: 'black',
                                        },
                                        '& .line--statut--impair': {
                                            backgroundColor: '#FFFFFF',
                                            color: 'black',
                                        },
                                        '& .line--statut--isvalide': {
                                            backgroundColor: '#ABEBC6',
                                            color: 'black',
                                            fontWeight: '600',
                                        },

                                        [`& .${gridClasses.cell}`]: {
                                            py: 1,
                                        },


                                    }}
                                >
                                    <DataGrid

                                        onCellEditCommit={OnchangeCellDataGrid}

                                        checkboxSelection
                                        onSelectionModelChange={(newSelectionModel) => {
                                            setselectionModel_note_Session_classement(newSelectionModel);
                                            /*if (newSelectionModel.length === 1)
                                                handleClick_edit_employee_From_Line(newSelectionModel);*/
                                            if (newSelectionModel.length !== 1) {
                                                /*  setsubmenu();
                                                  setdisplay_detail_employe();
                                                  setadd_One_Employee();*/
                                            }
                                        }}




                                        selectionModel={selectionModel_note_Session_classement}

                                        localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
                                        rows={New_Getall_Session_Final_Note_Classement_result.map((item, index) => (
                                            {
                                                id: index,
                                                _id: (item)._id,
                                                session_id: (item).session_id,
                                                apprenant_id: (item).apprenant_id,
                                                class_id: (item).class_id,
                                                nom: (item).nom,
                                                prenom: (item).prenom,
                                                rang: (item).rang,
                                                note_finale: (item).note_finale,
                                                rang_calculation_date: (item).rang_calculation_date.substring(0, 10),
                                                credit_acquis: (item).credit_acquis,

                                                jury_note: (item).jury_note,
                                                jury_observation: (item).jury_observation,
                                                jury_validation: (item).jury_validation,
                                                jury_validation_champ_technique: (item).jury_validation_champ_technique,

                                            }
                                        ))}

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

                                        onRowDoubleClick={(newSelectionModel) => {

                                        }}

                                        rowsPerPageOptions={[10]}
                                        disableSelectionOnClick
                                        /* components={{
                                             Toolbar: GridToolbar,
                                         }}*/

                                        components={{
                                            Toolbar: CustomToolbar
                                        }}
                                        componentsProps={{ toolbar: { data_colums: columns_list_session_note_classement_final } }}
                                        //sx={datagridSx}


                                        getCellClassName={(params) => {

                                            // Traitement des cellules du jury (note, commentaire, validation) 
                                            if (String(params.field).startsWith("jury")) {
                                                return 'cell--jury';
                                            }

                                        }}
                                        getRowClassName={(params) => {
                                            // Pour la gestion de la couleur de zone double cliquée
                                            if (String(params.row.ue_validation) === "1") {
                                                return 'line--statut--isvalide';
                                            }

                                            if (String(params.row.id) === String(gridline_id)) {
                                                return 'line--statut--selected';
                                            }
                                            else if (parseInt(String(params.row.id)) % 2 === 0) {
                                                return 'line--statut--pair';
                                            }
                                            else if (parseInt(String(params.row.id)) % 2 !== 0) {
                                                return 'line--statut--impair';
                                            }


                                        }}
                                        getEstimatedRowHeight={() => 200}
                                        getRowHeight={() => "auto"}
                                        sx={{
                                            "& .MuiDataGrid-cellContent": {
                                                minHeight: 50,

                                            }
                                        }}

                                    />
                                </Box>
                                <br />

                            </div>

                            <div className="div_row">

                                {selectionModel_note_Session_classement && selectionModel_note_Session_classement.length >= 1 && <div className="block_en_mass">
                                    <nav >Traitement en masse </nav>
                                    &nbsp;
                                    <Autocomplete
                                        disablePortal
                                        id="combo-box-demo"
                                        className="block_en_mass_select"

                                        options={New_Option}
                                        onChange={(event, value) => {
                                            if (value && value.value) {
                                                if (String(value.value) === "inscription") {
                                                    setactionmass_ftion_val(value.value);
                                                }
                                                else {
                                                    setactionmass_ftion_val();
                                                }

                                            }

                                        }}

                                        renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                            inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                                        />
                                        }
                                    />


                                    {actionmass_ftion_val && String(actionmass_ftion_val) === "inscription" && <nav className='block_en_mass_bton_action'>
                                        <Button className="bton_enreg" style={{ "width": "90%" }} onClick={(event) => {

                                            setNew_Reinscription_Getall_Class_List_UE_Given_Class_result([]);
                                            settab_selected_list_ue([]);
                                            setDialog_add_inscription_open(true);
                                        }}>
                                            <FcAcceptDatabase /> Traiter
                                        </Button>

                                    </nav>}



                                </div>}
                            </div>


                        </div>
                    </div>


                </div>

            </div>}


            {vue_note && String(vue_note) === "detail_note" && <div style={{ "border": "None" }}>

                {/***** On n'affiche les filtre que si necessaire  */}
                <div className="div_row">

                    <div className="div_row" style={{ "marginBottom": "5px" }}>
                        <div className="div_row_gauche texte_area_filter" >

                            {New_Option_Filter && New_Option_Filter.length > 0 && <Autocomplete
                                disablePortal
                                name="filtre1"
                                id="filtre1"
                                className="disabled_style"
                                value={New_Option_Filter.filter((data) => (data).value === String(p_filtre1))[0].label}
                                options={New_Option_Filter}
                                onChange={(event, value) => {
                                    if (value && value.value) {
                                        setp_filtre1(value.value);

                                    }

                                }}

                                renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                    inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                                />
                                }
                            />}


                        </div>



                        <div className="div_row_droite texte_area_filter_value" >
                            {p_filtre1 && String(p_filtre1) === "ue_id" && New_Getall_Class_List_UE_result.length > 0 &&

                                <Autocomplete
                                    disablePortal
                                    name="filtre1_value"
                                    id="filtre1_value"
                                    className="disabled_style"
                                    // value={New_Getall_Class_List_UE_result.filter((data) => (data)._id === String(p_filtre1_value))[0].label}
                                    options={New_Getall_Class_List_UE_result}
                                    onChange={(event, value) => {
                                        if (value && value._id) {
                                            setp_filtre1_value(value._id);
                                        }
                                    }}

                                    renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                        inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                                    />
                                    }
                                />

                            }

                            {p_filtre1 && String(p_filtre1) === "inscrit_id" && New_GetListeInscrit_result.length > 0 &&

                                <Autocomplete
                                    disablePortal
                                    name="filtre1_value"
                                    id="filtre1_value"
                                    className="disabled_style"
                                    // value={New_Getall_Class_List_UE_result.filter((data) => (data)._id === String(p_filtre1_value))[0].label}
                                    options={New_GetListeInscrit_result}
                                    onChange={(event, value) => {
                                        if (value && value._id) {
                                            setp_filtre1_value(value._id);
                                        }
                                    }}

                                    renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                        inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                                    />
                                    }
                                />

                            }

                        </div>
                        {p_filtre1 && <div className='filter_bton_add'>
                            <Tooltip className="tooltip_css" id="my-tooltip01" style={{ "fontSize": "12px" }} />
                            <a data-tooltip-id="my-tooltip01" data-tooltip-html="Ajouter une nouvelle ligne de filtre">
                                &nbsp; <MdAddCircleOutline onClick={(e) => {
                                    setp_filtre2("1");
                                    setp_filtre2_value("");
                                }} />
                            </a>
                        </div>}
                        {p_filtre1 && <div className='filter_bton_add'>
                            <Tooltip className="tooltip_css" id="my-tooltip02" style={{ "fontSize": "12px" }} />
                            <a data-tooltip-id="my-tooltip02" data-tooltip-html="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">

                                {New_Option_Filter && New_Option_Filter.length > 0 && <Autocomplete
                                    disablePortal
                                    name="filtre2"
                                    id="filtre2"
                                    className="disabled_style"
                                    value={New_Option_Filter.filter((data) => (data).value === String(p_filtre2))[0].label}
                                    options={New_Option_Filter}
                                    onChange={(event, value) => {
                                        if (value && value.value) {
                                            setp_filtre2(value.value);

                                        }

                                    }}

                                    renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                        inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                                    />
                                    }
                                />}

                            </div>
                            <div className="div_row_droite texte_area_filter_value" style={{ "marginTop": "0.5rem" }}>
                                {String(p_filtre2).length > 2 && String(p_filtre2) === "ue_id" && New_Getall_Class_List_UE_result.length > 0 &&
                                    <Autocomplete
                                        disablePortal
                                        name="filtre2_value"
                                        id="filtre2_value"
                                        className="disabled_style"
                                        // value={New_Getall_Class_List_UE_result.filter((data) => (data)._id === String(p_filtre1_value))[0].label}
                                        options={New_Getall_Class_List_UE_result}
                                        onChange={(event, value) => {
                                            if (value && value._id) {
                                                setp_filtre2_value(value._id);
                                            }
                                        }}

                                        renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                            inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                                        />
                                        }
                                    />
                                }

                                {String(p_filtre2).length > 2 && String(p_filtre2) === "inscrit_id" && New_GetListeInscrit_result.length > 0 &&
                                    <Autocomplete
                                        disablePortal
                                        name="filtre2_value"
                                        id="filtre2_value"
                                        className="disabled_style"
                                        // value={New_Getall_Class_List_UE_result.filter((data) => (data)._id === String(p_filtre1_value))[0].label}
                                        options={New_GetListeInscrit_result}
                                        onChange={(event, value) => {
                                            if (value && value._id) {
                                                setp_filtre2_value(value._id);
                                            }
                                        }}

                                        renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                            inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                                        />
                                        }
                                    />
                                }
                            </div>

                            {String(p_filtre2).length > 2 && <div className='filter_bton_add' >
                                <Tooltip className="tooltip_css" id="my-tooltip03" style={{ "fontSize": "12px" }} />
                                <a data-tooltip-id="my-tooltip03" data-tooltip-html="Ajouter une nouvelle ligne de filtre">
                                    &nbsp; <MdAddCircleOutline
                                        onClick={(e) => {
                                            setp_filtre3("1");
                                            setp_filtre3_value("");
                                        }}
                                    />
                                </a>
                            </div>}

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

                        </div>
                    }


                    {p_filtre3 &&
                        <div className="div_row" style={{ "marginBottom": "5px" }}>
                            <div className="div_row_gauche texte_area_filter">

                                {New_Option_Filter && New_Option_Filter.length > 0 && <Autocomplete
                                    disablePortal
                                    name="filtre3"
                                    id="filtre3"
                                    className="disabled_style"
                                    value={New_Option_Filter.filter((data) => (data).value === String(p_filtre3))[0].label}
                                    options={New_Option_Filter}
                                    onChange={(event, value) => {
                                        if (value && value.value) {
                                            setp_filtre3(value.value);

                                        }

                                    }}

                                    renderInput={(params) => <TextField {...params} label="" placeholder="Choisir une option"
                                        inputProps={{ ...params.inputProps, style: { fontSize: 12, height: "1.4rem" } }}

                                    />
                                    }
                                />}


                            </div>
                            <div className="div_row_droite texte_area_filter_value" style={{ "marginTop": "0.5rem" }}>
                                {String(p_filtre3).length > 2 &&
                                    <TextField
                                        sx={{ '& legend': { display: 'none' }, '& fieldset': { top: 0 }, }}
                                        required
                                        name="filtre3_value"
                                        id="filtre3_value"

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

                                    />}
                            </div>

                            {String(p_filtre2).length > 2 && <div className='filter_bton_add' >
                                <Tooltip className="tooltip_css" id="my-tooltip03" style={{ "fontSize": "12px" }} />
                                <a data-tooltip-id="my-tooltip03" data-tooltip-html="Ajouter une nouvelle ligne de filtre">
                                    &nbsp; <MdAddCircleOutline
                                        onClick={(e) => {
                                            setp_filtre4("1");
                                            setp_filtre4_value("");
                                        }}
                                    />
                                </a>
                            </div>}

                            {String(p_filtre3).length > 2 && <div className='filter_bton_add'>
                                <Tooltip className="tooltip_css" id="my-tooltip05" style={{ "fontSize": "12px" }} />
                                <a data-tooltip-id="my-tooltip05" data-tooltip-html="Supprimer cette ligne de filtre">
                                    &nbsp; <MdRemoveCircleOutline onClick={(e) => {
                                        setp_filtre3("");
                                        setp_filtre3_value("");
                                    }} />
                                </a>
                            </div>}
                        </div>
                    }


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

                        <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>
                            <Button variant="contained" className="bton_enreg"
                                onClick={(event) => {

                                    Getall_Session_UE_Final_Note_Classement();
                                    Getall_Session_Detail_Final_Note_Classement();
                                }} >

                                Appliquer
                            </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>

                {/******* End filtre */}

                <div className="div_row" style={{ paddingRight: '10px' }}>

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

                            <div style={{ height: 550, width: '100%', paddingRight: '5px' }}>

                                &nbsp;
                                <nav style={{ textAlign: 'center' }}> Notes & Rang par UE</nav>
                                <Box
                                    sx={{
                                        height: 500,
                                        width: '100%',
                                        paddingRight: '1px',

                                        // Gestion des cellule a distance ou presentiel
                                        '& .cell--distantiel': {
                                            backgroundColor: '#AFE1AF',
                                            color: 'black',
                                        },

                                        '& .cell--presentiel': {
                                            backgroundColor: '#AFE1AF',
                                            color: 'black',
                                        },


                                        // gestion couleur des lignes avec le statut d'inscription
                                        '& .line--statut--annule': {
                                            backgroundColor: '#D8D8D8',
                                            color: 'white',
                                        },

                                        '& .line--statut--inscrit': {
                                            backgroundColor: '#CEF6D8',
                                            color: 'black',
                                        },
                                        '& .line--statut--preinscrit': {
                                            backgroundColor: '#F7F2E0',
                                            color: 'black',
                                        },


                                        /*"& .MuiDataGrid-virtualScrollerRenderZone": {
                                            "& .MuiDataGrid-row": {
                                                "&:nth-child(2n)": { backgroundColor: "rgba(235, 235, 235, .7)" }
                                            }
                                        },*/
                                        "& .MuiDataGrid-columnHeaders": {
                                            backgroundColor: "#c8cfd5",
                                            color: "black",
                                            fontSize: 14
                                        },

                                        '& .line--statut--selected': {
                                            backgroundColor: '#FBF2EF',
                                            color: 'black',
                                        },
                                        '& .line--statut--pair': {
                                            backgroundColor: 'rgba(235, 235, 235, .7)',
                                            color: 'black',
                                        },
                                        '& .line--statut--impair': {
                                            backgroundColor: '#FFFFFF',
                                            color: 'black',
                                        },
                                        '& .line--statut--isvalide': {
                                            backgroundColor: '#ABEBC6',
                                            color: 'black',
                                            fontWeight: '600',
                                        },

                                        [`& .${gridClasses.cell}`]: {
                                            py: 1,
                                        },


                                    }}
                                >
                                    <DataGrid
                                        checkboxSelection
                                        onSelectionModelChange={(newSelectionModel) => {
                                            setselectionModel_note_UE_classement(newSelectionModel);
                                            /*if (newSelectionModel.length === 1)
                                                handleClick_edit_employee_From_Line(newSelectionModel);*/
                                            if (newSelectionModel.length !== 1) {
                                                /*  setsubmenu();
                                                  setdisplay_detail_employe();
                                                  setadd_One_Employee();*/
                                            }
                                        }}
                                        selectionModel={selectionModel_note_UE_classement}

                                        localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
                                        rows={Getall_Session_UE_Final_Note_Classement_result.map((item, index) => (
                                            {
                                                id: index,
                                                _id: JSON.parse(item)._id,
                                                inscription_id: JSON.parse(item).inscription_id,
                                                session_id: JSON.parse(item).session_id,
                                                type_eval: JSON.parse(item).type_eval,
                                                ue_id: JSON.parse(item).ue_id,
                                                class_id: JSON.parse(item).class_id,
                                                note_td: JSON.parse(item).note_td,
                                                note_tp: JSON.parse(item).note_tp,
                                                note_examen: JSON.parse(item).note_examen,
                                                note_finale: JSON.parse(item).note_finale,
                                                rang: JSON.parse(item).rang,
                                                credit: JSON.parse(item).credit,

                                                regle_calcul: JSON.parse(item).regle_calcul,
                                                seuil_validation: JSON.parse(item).seuil_validation,
                                                ue_coefficient: JSON.parse(item).ue_coefficient,
                                                ue_validation: JSON.parse(item).ue_validation,

                                                ue_id_code: JSON.parse(item).ue_id_code,
                                                class_id_external_code: JSON.parse(item).class_id_external_code,
                                                inscription_id_mail: JSON.parse(item).inscription_id_mail,
                                                inscription_id_nom: JSON.parse(item).inscription_id_nom,
                                                inscription_id_prenom: JSON.parse(item).inscription_id_prenom,

                                                jury_note: JSON.parse(item).jury_note,
                                                jury_observation: JSON.parse(item).jury_observation,
                                                jury_validation: JSON.parse(item).jury_validation,
                                            }
                                        ))}

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

                                        onRowDoubleClick={(newSelectionModel) => {



                                        }}

                                        rowsPerPageOptions={[10]}
                                        disableSelectionOnClick
                                        /*   components={{
                                               Toolbar: GridToolbar,
                                           }}*/

                                        components={{
                                            Toolbar: CustomToolbar
                                        }}
                                        componentsProps={{ toolbar: { data_colums: columns_list_evaluation_note_classement_final } }}
                                        //sx={datagridSx}
                                        getCellClassName={(params) => {



                                        }}
                                        getRowClassName={(params) => {
                                            // Pour la gestion de la couleur de zone double cliquée
                                            if (String(params.row.ue_validation) === "1") {
                                                return 'line--statut--isvalide';
                                            }

                                            if (String(params.row.id) === String(gridline_id)) {
                                                return 'line--statut--selected';
                                            }
                                            else if (parseInt(String(params.row.id)) % 2 === 0) {
                                                return 'line--statut--pair';
                                            }
                                            else if (parseInt(String(params.row.id)) % 2 !== 0) {
                                                return 'line--statut--impair';
                                            }


                                        }}
                                        getEstimatedRowHeight={() => 200}
                                        getRowHeight={() => "auto"}
                                        sx={{
                                            "& .MuiDataGrid-cellContent": {
                                                minHeight: 50,

                                            }
                                        }}

                                    />
                                </Box>
                                <br />

                            </div>


                        </div>
                    </div>


                </div>

            </div>}


            {vue_note && String(vue_note) === "detail_note" && <div style={{ "border": "None" }}>

                <div className="div_row" style={{ paddingRight: '10px' }}>

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

                            <div style={{ height: 550, width: '100%', paddingRight: '5px' }}>

                                &nbsp;
                                <nav style={{ textAlign: 'center' }}> Matrice détaillée des notes Toutes UE </nav>
                                <Box
                                    sx={{
                                        height: 500,
                                        width: '100%',
                                        paddingRight: '1px',

                                        // Gestion des cellule a distance ou presentiel
                                        '& .cell--distantiel': {
                                            backgroundColor: '#AFE1AF',
                                            color: 'black',
                                        },

                                        '& .cell--presentiel': {
                                            backgroundColor: '#AFE1AF',
                                            color: 'black',
                                        },


                                        // gestion couleur des lignes avec le statut d'inscription
                                        '& .line--statut--annule': {
                                            backgroundColor: '#D8D8D8',
                                            color: 'white',
                                        },

                                        '& .line--statut--inscrit': {
                                            backgroundColor: '#CEF6D8',
                                            color: 'black',
                                        },
                                        '& .line--statut--preinscrit': {
                                            backgroundColor: '#F7F2E0',
                                            color: 'black',
                                        },


                                        /*"& .MuiDataGrid-virtualScrollerRenderZone": {
                                            "& .MuiDataGrid-row": {
                                                "&:nth-child(2n)": { backgroundColor: "rgba(235, 235, 235, .7)" }
                                            }
                                        },*/
                                        "& .MuiDataGrid-columnHeaders": {
                                            backgroundColor: "#c8cfd5",
                                            color: "black",
                                            fontSize: 14
                                        },

                                        '& .line--statut--selected': {
                                            backgroundColor: '#FBF2EF',
                                            color: 'black',
                                        },
                                        '& .line--statut--pair': {
                                            backgroundColor: 'rgba(235, 235, 235, .7)',
                                            color: 'black',
                                        },
                                        '& .line--statut--impair': {
                                            backgroundColor: '#FFFFFF',
                                            color: 'black',
                                        },
                                        [`& .${gridClasses.cell}`]: {
                                            py: 1,
                                        },


                                    }}
                                >
                                    <DataGrid
                                        checkboxSelection
                                        onSelectionModelChange={(newSelectionModel) => {
                                            setselectionModel_detail_note_finale_classement(newSelectionModel);
                                            /*if (newSelectionModel.length === 1)
                                                handleClick_edit_employee_From_Line(newSelectionModel);*/
                                            if (newSelectionModel.length !== 1) {
                                                /*  setsubmenu();
                                                  setdisplay_detail_employe();
                                                  setadd_One_Employee();*/
                                            }
                                        }}
                                        selectionModel={selectionModel_detail_note_finale_classement}

                                        localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
                                        rows={Getall_Session_Detail_Final_Note_Classement_result.map((item, index) => (
                                            {
                                                id: index,
                                                _id: JSON.parse(item)._id,
                                                inscription_id: JSON.parse(item).inscription_id,
                                                session_id: JSON.parse(item).session_id,
                                                type_eval: JSON.parse(item).type_eval,
                                                ue_id: JSON.parse(item).ue_id,
                                                class_id: JSON.parse(item).class_id,
                                                moyenne: JSON.parse(item).moyenne,
                                                somme: JSON.parse(item).somme,
                                                nb_evaluation: JSON.parse(item).nb_evaluation,

                                                ue_id_code: JSON.parse(item).ue_id_code,
                                                class_id_external_code: JSON.parse(item).class_id_external_code,
                                                inscription_id_mail: JSON.parse(item).inscription_id_mail,
                                                inscription_id_nom: JSON.parse(item).inscription_id_nom,
                                                inscription_id_prenom: JSON.parse(item).inscription_id_prenom,

                                            }
                                        ))}

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

                                        onRowDoubleClick={(newSelectionModel) => {

                                            /* Getall_Evaluation_Participant_List(newSelectionModel.row._id);
                     
                                             setselected_id(newSelectionModel.row._id);
                     
                                             setgridline_id(newSelectionModel.row.id);
                     
                                             handleClick_edit_evaluation_From_Line(newSelectionModel.row.id);
                                             setselectionModel_evalutions_participant([]);
                                             settab_convention_pieces_jointes_result([]);*/


                                        }}

                                        rowsPerPageOptions={[10]}
                                        disableSelectionOnClick
                                        /*  components={{
                                              Toolbar: GridToolbar,
                                          }}*/

                                        components={{
                                            Toolbar: CustomToolbar
                                        }}
                                        componentsProps={{ toolbar: { data_colums: columns_list_evaluation_detail_note_classement_final } }}
                                        //sx={datagridSx}
                                        getCellClassName={(params) => {



                                        }}
                                        getRowClassName={(params) => {
                                            // Pour la gestion de la couleur de zone double cliquée
                                            if (String(params.row.id) === String(gridline_id)) {
                                                return 'line--statut--selected';
                                            }
                                            else if (parseInt(String(params.row.id)) % 2 === 0) {
                                                return 'line--statut--pair';
                                            }
                                            else if (parseInt(String(params.row.id)) % 2 !== 0) {
                                                return 'line--statut--impair';
                                            }


                                        }}
                                        getEstimatedRowHeight={() => 200}
                                        getRowHeight={() => "auto"}
                                        sx={{
                                            "& .MuiDataGrid-cellContent": {
                                                minHeight: 50,

                                            }
                                        }}

                                    />
                                </Box>
                                <br />

                            </div>


                        </div>
                    </div>


                </div>

            </div>}
        </div >
    );
}

export default Module_Session_Notes_Classement;

