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

const Config_Documents = (props) => {
    const history = useHistory();
    const [submenu, setsubmenu] = useState("");
    const [rowss, setRows] = useState([]);
    const [selectionModel, setSelectionModel] = React.useState([]);
    const editorRef_programme = useRef(null);
    const [editorRef_programme_limite, seteditorRef_programme] = useState(1000);
    const [field_programme, setfield_programme] = useState("");
    const [editor_tochange, seteditor_tochange] = useState("");


    const one_editorRef_programme = useRef(null);
    const [one_editorRef_programme_limite, setone_editorRef_programme_limite] = useState(1000);
    const [one_field_programme, setone_field_programme] = useState("");
    const [one_editor_tochange, setone_editor_tochange] = useState("");



    var date_today_90j = new Date();
    date_today_90j.setDate(date_today_90j.getDate() + 90);

    const columns = [
        { field: '_id', headerName: '_id', hide: true },
        { field: 'id', headerName: 'id', hide: true },
        { field: 'nom', headerName: 'nom', width: 150, hideable: false, },
        { field: 'ref_interne', headerName: 'ref_interne', width: 150, hideable: false, },
        { field: 'type_doc', headerName: 'type_doc', width: 150, hideable: false, },
        { field: 'cible', headerName: 'cible', width: 150, hide: false, editable: true },
        { field: 'sujet', headerName: 'sujet', width: 150, hide: false, editable: true },


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

                    <Button

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

                    </Button>

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

                    <Popup
                        trigger={<Button

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

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

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

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

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


                );
            }
        }

    ]



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

    const myRef = useRef(null)
    const myRef_head = useRef(null);

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

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

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


    function editor_keyup() {
        seteditor_tochange("1");
    }




    const [selected_id, setselected_id] = useState();
    const [selected_template_ref_interne, setselected_template_ref_interne] = useState();

    function handleClick_display_partner_document(selected_row_id) {

        setdisplay_detail_document("1");
        //submenu_detail_employe();

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

        //console.log("### line = ", line);
        var document_id = line._id;
        setselected_id(document_id);

        setselected_template_ref_interne(line.ref_interne);

        console.log(" ### line.ref_interne  = ", line.ref_interne);
        Get_Partner_Document_Data(document_id);

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

    }

    {/*function Display_Detail_Document(event, cellValues) {

        var local_document_id = String(cellValues.row._id);

        setselected_id(cellValues.row._id);
        Get_Partner_Document_Data(local_document_id);

    }*/}

    const [p_detail_cible, setp_detail_cible] = useState("");
    const [p_detail_contenu_doc, setp_detail_contenu_doc] = useState("");
    const [p_detail_nom, setp_detail_nom] = useState("");
    const [p_detail_ref_interne, setp_detail_ref_interne] = useState("");
    const [p_detail_sujet, setp_detail_sujet] = useState("");
    const [p_detail_type_doc, setp_detail_type_doc] = useState("");


    const [p_one_detail_cible, setp_one_detail_cible] = useState("");
    const [p_one_detail_contenu_doc, setp_one_detail_contenu_doc] = useState("");
    const [p_one_detail_nom, setp_one_detail_nom] = useState("");
    const [p_one_detail_ref_interne, setp_one_detail_ref_interne] = useState("");
    const [p_one_detail_sujet, setp_one_detail_sujet] = useState("");
    const [p_one_detail_type_doc, setp_one_detail_type_doc] = useState("");


    function clear_detail_fields() {
        setp_detail_cible("");
        setp_detail_contenu_doc();
        setp_detail_nom("");
        setp_detail_ref_interne("");
        setp_detail_sujet("");
        setp_detail_type_doc("");
        setfield_programme();
    }


    function clear_one_detail_fields() {
        setp_one_detail_cible("");
        setp_one_detail_contenu_doc();
        setp_one_detail_nom("");
        setp_one_detail_ref_interne("");
        setp_one_detail_sujet("");
        setp_one_detail_type_doc("");
        setone_field_programme();
    }


    const [display_detail_document, setdisplay_detail_document] = useState("");

    const [Get_Partner_Document_Data_api, setGet_Partner_Document_Data_api] = useState();
    const [Get_Partner_Document_Data_message, setGet_Partner_Document_Data_message] = useState();
    const [Get_Partner_Document_Data_result, setGet_Partner_Document_Data_result] = useState();
    function Get_Partner_Document_Data(local_partner_document_id) {
        setpartner_document_data_changed("");
        setpartner_document_data_edit_mode("");

        var form = new FormData();

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

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

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

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

            if (String(res.data.status) === "true") {
                //console.log(" In Get_Partner_Document_Data  res.data.status = " + res.data.status);
                //console.log(" In Get_Partner_Document_Data  res.data.message r_class = " + res.data.message);
                setGet_Partner_Document_Data_api("true");
                setGet_Partner_Document_Data_result(res.data.message);

                if (res.data.message.length > 0) {
                    var mylocal_document = JSON.parse(res.data.message);

                    if (mylocal_document.nom)
                        setp_detail_nom(mylocal_document.nom);


                    if (mylocal_document.type_doc)
                        setp_detail_type_doc(mylocal_document.type_doc);

                    if (mylocal_document.cible)
                        setp_detail_cible(mylocal_document.cible);


                    if (mylocal_document.ref_interne) {
                        setp_detail_ref_interne(mylocal_document.ref_interne);
                    }


                    if (mylocal_document.sujet) {
                        setp_detail_sujet(mylocal_document.sujet);
                    }

                    setfield_programme("");
                    if (mylocal_document.contenu_doc) {
                        setp_detail_contenu_doc(mylocal_document.contenu_doc);
                        setfield_programme(mylocal_document.contenu_doc);
                    }

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

                } else {
                    alert(" Aucun document recuperé");
                }


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

            else {
                setGet_Partner_Document_Data_api("false");
                setGet_Partner_Document_Data_message(res.data.message);
                alert(res.data.message);
            }

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



    const [Get_Default_Original_Partner_Document_Data_api, setGet_Default_Original_Partner_Document_Data_api] = useState();
    const [Get_Default_Original_Partner_Document_Data_message, setGet_Default_Original_Partner_Document_Data_message] = useState();
    const [Get_Default_Original_Partner_Document_Data_result, setGet_Default_Original_Partner_Document_Data_result] = useState();
    function Get_Default_Original_Partner_Document_Data() {
        setpartner_document_data_changed("");
        setpartner_document_data_edit_mode("");

        clear_detail_fields();

        var form = new FormData();

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

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

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

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

            if (String(res.data.status) === "true") {
                console.log(" In Get_Default_Original_Partner_Document_Data  res.data.status = " + res.data.status);
                console.log(" In Get_Default_Original_Partner_Document_Data  res.data.message r_class = " + res.data.message);
                setGet_Default_Original_Partner_Document_Data_api("true");
                setGet_Default_Original_Partner_Document_Data_result(res.data.message);

                if (res.data.message.length > 0) {
                    var mylocal_document = JSON.parse(res.data.message);

                    if (mylocal_document.nom)
                        setp_detail_nom(mylocal_document.nom);

                    document.getElementsByName("document_type")[0].value = "";
                    if (mylocal_document.type_doc)
                        setp_detail_type_doc(mylocal_document.type_doc);



                    if (mylocal_document.cible)
                        setp_detail_cible(mylocal_document.cible);



                    document.getElementsByName("document_ref_interne")[0].value = "";
                    if (mylocal_document.ref_interne) {
                        setp_detail_ref_interne(mylocal_document.ref_interne);
                    }

                    document.getElementsByName("document_sujet")[0].value = "";
                    if (mylocal_document.sujet) {
                        setp_detail_sujet(mylocal_document.sujet);
                    }

                    setfield_programme("");
                    if (mylocal_document.contenu_doc) {
                        setp_detail_contenu_doc(String(mylocal_document.contenu_doc));
                        setfield_programme(String(mylocal_document.contenu_doc));
                    }

                    disable_Partner_DocumentFields();
                    if (myRef.current) {
                        myRef.current.scrollIntoView({ behavior: "smooth" });
                    }
                    setpartner_document_data_changed("1");
                    setpartner_document_data_edit_mode("1");

                } else {
                    alert(" Aucun document recuperé");
                }


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

            else {
                setGet_Default_Original_Partner_Document_Data_api("false");
                setGet_Default_Original_Partner_Document_Data_message(res.data.message);
                alert(res.data.message);
            }

        }).catch((error) => {
            console.warn('Not good man :( Get_Default_Original_Partner_Document_Data = ', error);
            setGet_Default_Original_Partner_Document_Data_api("false");
            alert(" Impossible de recuperer le modèle initial");
            //setmyApimyApiMessage("")
        })
    }


    const [Get_Default_Original_Partner_Document_Data_By_id_api, setGet_Default_Original_Partner_Document_Data_By_id_api] = useState();
    const [Get_Default_Original_Partner_Document_Data_By_id_message, setGet_Default_Original_Partner_Document_Data_By_id_message] = useState();
    const [Get_Default_Original_Partner_Document_Data_By_id_result, setGet_Default_Original_Partner_Document_Data_By_id_result] = useState();
    function Get_Default_Original_Partner_Document_Data_By_id(local_id) {
        setpartner_document_data_changed("");
        setpartner_document_data_edit_mode("");

        clear_detail_fields();

        var form = new FormData();

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

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

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

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

            if (String(res.data.status) === "true") {
                console.log(" In Get_Default_Original_Partner_Document_Data_By_id  res.data.status = " + res.data.status);
                console.log(" In Get_Default_Original_Partner_Document_Data_By_id  res.data.message r_class = " + res.data.message);
                setGet_Default_Original_Partner_Document_Data_By_id_api("true");
                setGet_Default_Original_Partner_Document_Data_By_id_result(res.data.message);

                if (res.data.message.length > 0) {
                    var mylocal_document = JSON.parse(res.data.message);

                    if (mylocal_document.nom)
                        setp_one_detail_nom(mylocal_document.nom);


                    if (mylocal_document.type_doc)
                        setp_one_detail_type_doc(mylocal_document.type_doc);


                    if (mylocal_document.cible)
                        setp_one_detail_cible(mylocal_document.cible);



                    if (mylocal_document.ref_interne) {
                        setp_one_detail_ref_interne(mylocal_document.ref_interne);
                    }


                    if (mylocal_document.sujet) {
                        setp_one_detail_sujet(mylocal_document.sujet);
                    }

                    setfield_programme("");
                    if (mylocal_document.contenu_doc) {
                        setp_one_detail_contenu_doc(String(mylocal_document.contenu_doc));
                        setone_field_programme(String(mylocal_document.contenu_doc));
                    }


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


                } else {
                    alert(" Aucun document recuperé");
                }


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

            else {
                setGet_Default_Original_Partner_Document_Data_By_id_api("false");
                setGet_Default_Original_Partner_Document_Data_By_id_message(res.data.message);
                alert(res.data.message);
            }

        }).catch((error) => {
            console.warn('Not good man :( Get_Default_Original_Partner_Document_Data_By_id = ', error);
            setGet_Default_Original_Partner_Document_Data_By_id_api("false");
            alert(" Impossible de recuperer le modèle initial");
            //setmyApimyApiMessage("")
        })
    }



    function disable_Partner_DocumentFields() {
        setpartner_document_data_edit_mode("0");

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

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

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

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

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


    }


    function Edit_Document_Data_Fields() {
        Enable_Partner_DocumentFields();
        Get_Given_Personnalisable_Collection_and_Fields(selected_template_ref_interne);
    }

    function Enable_Partner_DocumentFields() {
        setpartner_document_data_edit_mode("1");

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

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

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

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

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


    }


    const [partner_document_data_changed, setpartner_document_data_changed] = useState("");
    const [partner_document_data_edit_mode, setpartner_document_data_edit_mode] = useState("");


    const [p_champ_table, setp_champ_table] = useState();
    const [p_collection, setp_collection] = useState();

    function add_selected_fields() {
        if (String(p_champ_table).length > 4)
            editorRef_programme.current.insertContent(String(p_champ_table));
        else
            alert(" Le champ est invalide");
    }


    function add_one_selected_fields() {
        if (String(p_champ_table).length > 4)
            one_editorRef_programme.current.insertContent(String(p_champ_table));
        else
            alert(" Le champ est invalide");
    }


    const [Get_Personnalisable_Collection_and_Fields_api, setGet_Personnalisable_Collection_and_Fields_api] = useState();
    const [Get_Personnalisable_Collection_and_Fields_message, setGet_Personnalisable_Collection_and_Fields_message] = useState();
    const [Get_Personnalisable_Collection_and_Fields_result, setGet_Personnalisable_Collection_and_Fields_result] = useState();
    function Get_Personnalisable_Collection_and_Fields() {

        var form = new FormData();


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


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



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

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

                setGet_Personnalisable_Collection_and_Fields_api("true");
                setGet_Personnalisable_Collection_and_Fields_result(res.data.message);

            }
            else {
                setGet_Personnalisable_Collection_and_Fields_api("false");
                setGet_Personnalisable_Collection_and_Fields_message(res.data.message);
                alert(res.data.message)
            }

        }).catch((error) => {
            console.warn('Not good man :( Get_Personnalisable_Collection_and_Fields = ', error);
            setGet_Personnalisable_Collection_and_Fields_api("false");
            alert(" Impossible de recuperer la liste des collection et champs personnalisables");
            //setmyApimyApiMessage("")
        })
    }

    const [Get_Personnalisable_Collections_api, setGet_Personnalisable_Collections_api] = useState();
    const [Get_Personnalisable_Collections_message, setGet_Personnalisable_Collections_message] = useState();
    const [Get_Personnalisable_Collections_result, setGet_Personnalisable_Collections_result] = useState();
    function Get_Personnalisable_Collections() {

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

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

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

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

                setGet_Personnalisable_Collections_api("true");
                setGet_Personnalisable_Collections_result(res.data.message);

            }
            else {
                setGet_Personnalisable_Collections_api("false");
                setGet_Personnalisable_Collections_message(res.data.message);
                alert(res.data.message)
            }

        }).catch((error) => {
            console.warn('Not good man :( Get_Personnalisable_Collections = ', error);
            setGet_Personnalisable_Collections_api("false");
            alert(" Impossible de recuperer la liste des collection et champs personnalisables");
            //setmyApimyApiMessage("")
        })
    }

    useEffect(() => {
        Get_Personnalisable_Collections();
        //Get_Personnalisable_Collection_and_Fields();

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

    }, [])



    const [Add_one_Partner_Document_api, setAdd_one_Partner_Document_api] = useState();
    const [Add_one_Partner_Document_message, setAdd_one_Partner_Document_message] = useState();
    const [Add_one_Partner_Document_result, setAdd_one_Partner_Document_result] = useState();
    function Add_one_Partner_Document() {
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");


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

        if (p_one_detail_ref_interne)
            form.append("ref_interne", p_one_detail_ref_interne);
        else {
            alert(" Vous devez definir une reference interne");
            return;
        }


        if (p_one_detail_type_doc)
            form.append("type_doc", p_one_detail_type_doc);
        else {
            alert(" Vous devez definir un type de document");
            return;
        }


        if (p_one_detail_cible)
            form.append("cible", p_one_detail_cible);
        else {
            form.append("cible", "");
            return;
        }




        if (p_one_detail_nom)
            form.append("nom", p_one_detail_nom);
        else {
            alert(" Vous devez definir un nom de document");
            return;
        }


        if (p_one_detail_sujet)
            form.append("sujet", p_one_detail_sujet);
        else {
            alert(" Vous devez definir un sujet");
            return;
        }



        if (one_editorRef_programme) {
            var programme = one_editorRef_programme.current.getContent();
            programme = programme.replace('&lt;', '<');
            programme = programme.replace('&gt;', '>');
            programme = programme.replace('&le;', '<=');
            programme = programme.replace('&ge;', '>=');
            form.append("contenu_doc", programme);
        }
        else {
            form.append("contenu_doc", "");
        }

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


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

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

            if (String(res.data.status) === String("true")) {
                setAdd_one_Partner_Document_api("true");
                setAdd_one_Partner_Document_result(res.data.message);

                alert(res.data.message);
                clear_one_detail_fields();
                setadd_one_document();
                setdisplay_add_one_document();
                Getall_Partner_Document_No_filter();
            }
            else {
                setAdd_one_Partner_Document_api("false");
                setAdd_one_Partner_Document_message(res.data.message);
                alert(res.data.message);

            }

        }).catch((error) => {

            console.log('UpdateStagiaireData : Not good man :( Add_one_Partner_Document = ' + error);
            setAdd_one_Partner_Document_api("false");
            alert(" Impossible d'ajouter le nouveau  document");

        })
    }


    const [Get_Given_Personnalisable_Collection_and_Fields_api, setGet_Given_Personnalisable_Collection_and_Fields_api] = useState();
    const [Get_Given_Personnalisable_Collection_and_Fields_message, setGet_Given_Personnalisable_Collection_and_Fields_message] = useState();
    const [Get_Given_Personnalisable_Collection_and_Fields_result, setGet_Given_Personnalisable_Collection_and_Fields_result] = useState();
    function Get_Given_Personnalisable_Collection_and_Fields(local_courrier_template_ref_interne) {

        var form = new FormData();


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


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


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

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

                setGet_Given_Personnalisable_Collection_and_Fields_api("true");
                setGet_Given_Personnalisable_Collection_and_Fields_result(res.data.message);

            }
            else {
                setGet_Given_Personnalisable_Collection_and_Fields_api("false");
                setGet_Given_Personnalisable_Collection_and_Fields_message(res.data.message);
                alert(res.data.message)
            }

        }).catch((error) => {
            console.warn('Not good man :( Get_Given_Personnalisable_Collection_and_Fields = ', error);
            setGet_Given_Personnalisable_Collection_and_Fields_api("false");
            alert(" Impossible de recuperer la liste des collection et champs personnalisables de l'objet");
            //setmyApimyApiMessage("")
        })
    }


    const [Update_one_Partner_Document_api, setUpdate_one_Partner_Document_api] = useState();
    const [Update_one_Partner_Document_message, setUpdate_one_Partner_Document_message] = useState();
    const [Update_one_Partner_Document_result, setUpdate_one_Partner_Document_result] = useState();
    function Update_one_Partner_Document() {
        var form = new FormData();
        //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA");


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

        if (p_detail_ref_interne)
            form.append("ref_interne", p_detail_ref_interne);
        else {
            alert(" Vous devez definir une reference interne");
            return;
        }


        if (p_detail_cible)
            form.append("cible", p_detail_cible);
        else {
            form.append("cible", "");
        }




        if (p_detail_type_doc)
            form.append("type_doc", p_detail_type_doc);
        else {
            alert(" Vous devez definir un type de document");
            return;
        }


        if (p_detail_nom)
            form.append("nom", p_detail_nom);
        else {
            alert(" Vous devez definir un nom de document");
            return;
        }


        if (p_detail_sujet)
            form.append("sujet", p_detail_sujet);
        else {
            alert(" Vous devez definir un sujet");
            return;
        }


        if (editorRef_programme) {
            var programme = editorRef_programme.current.getContent();

            programme = programme.replace('&lt;', '<');
            programme = programme.replace('&gt;', '>');
            programme = programme.replace('&le;', '<=');
            programme = programme.replace('&ge;', '>=');


            form.append("contenu_doc", programme);
            setp_detail_contenu_doc(programme);
        }
        else {
            form.append("contenu_doc", "");
            setp_detail_contenu_doc("");
        }



        //console.log(" Update_one_Partner_Document affectation form == ", form);


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

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

            if (String(res.data.status) === String("true")) {
                setUpdate_one_Partner_Document_api("true");
                setUpdate_one_Partner_Document_result(res.data.message);
                if (myRef.current) {
                    myRef.current.scrollIntoView({ behavior: "smooth" });
                }

                disable_Partner_DocumentFields();
                setpartner_document_data_edit_mode("0");
                setpartner_document_data_changed("0");
                Get_Partner_Document_Data(selected_id);
                alert(res.data.message);

            }
            else {
                setUpdate_one_Partner_Document_api("false");
                setUpdate_one_Partner_Document_message(res.data.message);
                alert(res.data.message);
            }

        }).catch((error) => {

            console.log('UpdateStagiaireData : Not good man :( Update_one_Partner_Document = ' + error);
            setUpdate_one_Partner_Document_api("false");
            alert(" Impossible de mettre à jour le document");

        })
    }

    const [Getall_Partner_Document_No_filter_api, setGetall_Partner_Document_No_filter_api] = useState();
    const [Getall_Partner_Document_No_filter_message, setGetall_Partner_Document_No_filter_message] = useState();
    const [Getall_Partner_Document_No_filter_result, setGetall_Partner_Document_No_filter_result] = useState();
    function Getall_Partner_Document_No_filter(event) {

        var form = new FormData();


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

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

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

            if (String(res.data.status) === String("true")) {
                //console.log(" In Getall_Partner_Document_No_filter  res.data.status = " + res.data.status);
                //console.log(" In Getall_Partner_Document_No_filter  res.data.message r_class = " + res.data.message);
                setGetall_Partner_Document_No_filter_api("true");
                setGetall_Partner_Document_No_filter_result(res.data.message);
                setRows(res.data.message);
            }
            else {
                setGetall_Partner_Document_No_filter_api("false");
                setGetall_Partner_Document_No_filter_message(res.data.message);
                alert(res.data.message);
            }

        }).catch((error) => {
            console.warn('Not good man :( Getall_Partner_Document_No_filter = ', error);
            setGetall_Partner_Document_No_filter_api("false");
            alert(" Impossible de recuperer la liste des documents");
            //setmyApimyApiMessage("")
        })
    }



    const [Get_Given_Personnalisable_Fields_From_template_ID_api, setGet_Given_Personnalisable_Fields_From_template_ID_api] = useState();
    const [Get_Given_Personnalisable_Fields_From_template_ID_message, setGet_Given_Personnalisable_Fields_From_template_ID_message] = useState();
    const [Get_Given_Personnalisable_Fields_From_template_ID_result, setGet_Given_Personnalisable_Fields_From_template_ID_result] = useState();
    function Get_Given_Personnalisable_Fields_From_template_ID(local_courrier_template_id) {

        var form = new FormData();


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


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


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

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

                setGet_Given_Personnalisable_Fields_From_template_ID_api("true");
                setGet_Given_Personnalisable_Fields_From_template_ID_result(res.data.message);

            }
            else {
                setGet_Given_Personnalisable_Fields_From_template_ID_api("false");
                setGet_Given_Personnalisable_Fields_From_template_ID_message(res.data.message);
                alert(res.data.message)
            }

        }).catch((error) => {
            console.warn('Not good man :( Get_Given_Personnalisable_Fields_From_template_ID = ', error);
            setGet_Given_Personnalisable_Fields_From_template_ID_api("false");
            alert(" Impossible de recuperer la liste des collection et champs personnalisables de l'objet");
            //setmyApimyApiMessage("")
        })
    }


    const [display_partner_document, setdisplay_partner_document] = React.useState();
    function Annule_Partner_Document_DetailFields() {

        Get_Partner_Document_Data(selected_id);

        setpartner_document_data_changed("");
        setpartner_document_data_edit_mode("");

    }


    const [Get_List_Personnalisable_Default_Document_api, setGet_List_Personnalisable_Default_Document_api] = useState();
    const [Get_List_Personnalisable_Default_Document_message, setGet_List_Personnalisable_Default_Document_message] = useState();
    const [Get_List_Personnalisable_Default_Document_result, setGet_List_Personnalisable_Default_Document_result] = useState();
    function Get_List_Personnalisable_Default_Document() {

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

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

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

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

                setGet_List_Personnalisable_Default_Document_api("true");
                setGet_List_Personnalisable_Default_Document_result(res.data.message);

            }
            else {
                setGet_List_Personnalisable_Default_Document_api("false");
                setGet_List_Personnalisable_Default_Document_message(res.data.message);
                alert(res.data.message)
            }

        }).catch((error) => {
            console.warn('Not good man :( Get_List_Personnalisable_Default_Document = ', error);
            setGet_List_Personnalisable_Default_Document_api("false");
            alert(" Impossible de recuperer la liste des documents par default");
            //setmyApimyApiMessage("")
        })
    }

    const [selecte_defaul_doc_to_add, setselecte_defaul_doc_to_add] = React.useState();

    const [add_one_document, setadd_one_document] = React.useState();
    function submenu_add_one_model_document() {
        setSelectionModel([]);
        clear_one_detail_fields();
        setpartner_document_data_edit_mode();
        setpartner_document_data_changed();
        clear_detail_fields();
        setdisplay_partner_document();
        setdisplay_detail_document();

        Get_List_Personnalisable_Default_Document();
        setadd_one_document("1");

    }

    const [display_add_one_document, setdisplay_add_one_document] = React.useState();
    function Get_And_Display_Selected_Document() {
        setdisplay_add_one_document("1");
        console.log(" ## selecte_defaul_doc_to_add = ", selecte_defaul_doc_to_add);
        setadd_one_document("1");
        setdisplay_detail_document("0");
        setselected_id(selecte_defaul_doc_to_add);
        Get_Default_Original_Partner_Document_Data_By_id(selecte_defaul_doc_to_add);
        Get_Given_Personnalisable_Fields_From_template_ID(selecte_defaul_doc_to_add);
    }


    function Annule_Add_One_New_Doc() {
        clear_one_detail_fields();
        setadd_one_document();
        setdisplay_add_one_document();

    }

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

            >

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

                </DialogContent>

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

                </DialogActions>
            </Dialog>

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

                            }}
                        >
                            <MenuItem value="email" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Email &nbsp;</MenuItem>
                            <MenuItem value="nom" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Nom  &nbsp;</MenuItem>
                            <MenuItem value="formation" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Lié a la Formation (code externe) &nbsp;</MenuItem>
                            <MenuItem value="session" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Lié a la Session (code session) &nbsp;</MenuItem>


                        </TextField>
                    </div>



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

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

                            />

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


                </div>

                {p_filtre2 &&
                    <div className="div_row" style={{ "marginBottom": "5px" }}>
                        <div className="div_row_gauche texte_area_filter">
                            <TextField
                                name="filtre2"
                                label="Choisir un champ"
                                select
                                sx={{ m: 1, width: '100%' }}

                                value={p_filtre2}
                                onChange={(e) => {
                                    setp_filtre2(e.target.value);

                                }}
                            >
                                <MenuItem value="email" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Email &nbsp;</MenuItem>
                                <MenuItem value="nom" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Nom  &nbsp;</MenuItem>
                                <MenuItem value="formation" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Lié a la Formation (code externe) &nbsp;</MenuItem>
                                <MenuItem value="session" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Lié a la Session (code session) &nbsp;</MenuItem>


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

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

                                />}
                        </div>

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

                    </div>
                }


                {p_filtre3 &&
                    <div className="div_row" style={{ "marginBottom": "5px" }}>
                        <div className="div_row_gauche texte_area_filter">
                            <TextField
                                name="filtre3"
                                label="Choisir un champ"
                                select
                                sx={{ m: 1, width: '100%' }}

                                value={p_filtre3}
                                onChange={(e) => {
                                    setp_filtre3(e.target.value)
                                }}
                            >
                                <MenuItem value="email" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Email &nbsp;</MenuItem>
                                <MenuItem value="nom" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Nom  &nbsp;</MenuItem>
                                <MenuItem value="formation" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Lié a la Formation (code externe) &nbsp;</MenuItem>
                                <MenuItem value="session" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Lié a la Session (code session) &nbsp;</MenuItem>


                            </TextField>
                        </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 id="my-tooltip03" style={{ "fontSize": "12px" }} />
                            <a data-tooltip-id="my-tooltip03" data-tooltip-content="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 id="my-tooltip05" style={{ "fontSize": "12px" }} />
                            <a data-tooltip-id="my-tooltip05" data-tooltip-content="Supprimer cette ligne de filtre">
                                &nbsp; <MdRemoveCircleOutline onClick={(e) => {
                                    setp_filtre3();
                                    setp_filtre3_value();
                                }} />
                            </a>
                        </div>}
                    </div>
                }

                {/*
                {p_filtre4 &&
                    <div className="div_row" style={{ "marginBottom": "5px" }}>
                        <div className="div_row_gauche texte_area_filter">
                            <TextField
                                name="filtre4"
                                label="Choisir un champ"
                                select
                                sx={{ m: 1, width: '100%' }}

                                value={p_filtre4}
                                onChange={(e) => {
                                    setp_filtre4(e.target.value)
                                }}
                            >
                                <MenuItem value="email" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Email &nbsp;</MenuItem>
                                <MenuItem value="nom" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Nom  &nbsp;</MenuItem>
                                <MenuItem value="code_session" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }}>Code Session &nbsp;&nbsp;</MenuItem>
                                <MenuItem value="class_title" style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%" }} >Titre Formation &nbsp;</MenuItem>


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

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

                                />}
                        </div>



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

                    </div>
                }
                */}
                <div className="div_row" ref={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={"Getall_Training_Employee"}>Rechercher
                        </Button>
                    </div>

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

                    </div>

                </div>

                <br />
            </div>


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

                        <div style={{ height: 550, width: '100%', paddingRight: '1px' }}>
                            &nbsp;
                            <Box
                                sx={{
                                    height: 500,
                                    width: '100%',
                                    paddingRight: '1px',

                                    // 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
                                    },

                                }}
                            >
                                <DataGrid
                                    checkboxSelection
                                    onSelectionModelChange={(newSelectionModel) => {
                                        setSelectionModel(newSelectionModel);
                                        if (newSelectionModel.length === 1)
                                            handleClick_display_partner_document(newSelectionModel);
                                        if (newSelectionModel.length !== 1) {
                                            setpartner_document_data_edit_mode();
                                            setpartner_document_data_changed();
                                            clear_detail_fields();
                                            setsubmenu();
                                            setdisplay_partner_document();
                                            setdisplay_detail_document();
                                        }
                                    }}
                                    selectionModel={selectionModel}

                                    localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
                                    rows={rowss.map((item, index) => (
                                        {
                                            id: index,
                                            _id: JSON.parse(item)._id,
                                            nom: JSON.parse(item).nom,
                                            ref_interne: JSON.parse(item).ref_interne,
                                            type_doc: JSON.parse(item).type_doc,
                                            cible: JSON.parse(item).cible,
                                            sujet: JSON.parse(item).sujet,

                                        }
                                    ))}

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

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


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

                                        if (params.field === "status" && String(params.value) == "1") {
                                            return 'cell--statut--inscrit';
                                        }

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

                                    }}
                                    getRowClassName={(params) => {

                                        if (String(params.row.status) === "-1") {
                                            return 'line--statut--annule';
                                        }
                                        if (String(params.row.status) === "0") {
                                            return 'line--statut--preinscrit';
                                        }
                                        if (String(params.row.status) === "1") {
                                            return 'line--statut--inscrit';
                                        }
                                    }}


                                />
                            </Box>
                            <br />

                        </div>

                    </div>
                    <div className="div_row" style={{ "border": "None" }}>
                        <Button variant="outlined" onClick={submenu_add_one_model_document}
                            className="detail_class_submenu bton_add_session"
                            id='menu_import_participant' name='menu_import_participant'>Ajout 1 modèle de Document &nbsp;
                            <img src={add_plus} alt="ajout session" className="icon_plus" />
                        </Button>
                    </div>

                </div>
            </div>


            {String(display_detail_document) === "1" && String(add_one_document) !== "1" && <div className="div_row">
                <h3> Détail document <i> {p_detail_nom} </i></h3>

                <div className="div_row">

                    <div className="div_row_gauche">

                        {String(partner_document_data_edit_mode) !== "1" && <div className="div_row_gauche texte_area_filter" >
                            <TextField
                                name="nom_document"
                                label="Nom document"
                                sx={{ m: 1, width: '100%' }}
                                value={p_one_detail_nom}

                            />

                        </div>}


                        {String(partner_document_data_edit_mode) !== "1" && <div className="div_row_gauche texte_area_filter" >
                            <TextField
                                name="document_type"
                                label="Type de document"
                                sx={{ m: 1, width: '100%' }}
                                value={p_detail_type_doc}

                            />

                        </div>}


                        <div className="div_row_gauche texte_area_filter" ref={myRef}>
                            <TextField
                                name="document_ref_interne"
                                label="Code Document"
                                sx={{ m: 1, width: '100%' }}
                                value={p_detail_ref_interne}

                            />

                        </div>

                        <div className="div_row_gauche texte_area_filter" >
                            <TextField
                                name="document_sujet"
                                label="Sujet"
                                sx={{ m: 1, width: '100%' }}
                                value={p_detail_sujet}
                                onChange={(e) => {
                                    setp_detail_sujet(e.target.value);
                                    setpartner_document_data_changed("1");
                                }}
                            />

                        </div>

                    </div>
                    <div className="div_row_droite" style={{ "textAlign": "left" }}>
                        {String(partner_document_data_edit_mode) === "1" && <div className="div_row"> Choisir un champ  <br />
                            <TextField
                                name="champ_table"
                                id="champ_table"
                                select
                                InputLabelProps={{
                                    shrink: true,
                                }}
                                disabled={false}
                                className="disabled_style enable_style"
                                value={p_champ_table}
                                onChange={(e) => {
                                    setp_champ_table(e.target.value);
                                }}
                            >

                                {Get_Given_Personnalisable_Collection_and_Fields_result &&
                                    Get_Given_Personnalisable_Collection_and_Fields_result.filter((local_mymanager) => JSON.parse(local_mymanager).courrier_template_ref_interne === p_detail_ref_interne).map((mycollection) => (
                                        <MenuItem key={JSON.parse(mycollection).nom_champ_technique}
                                            value={JSON.parse(mycollection).nom_champ_technique}
                                            style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%", "fontSize": "12px" }}>
                                            {JSON.parse(mycollection).nom_champ_fonctionel}&nbsp;&nbsp;

                                        </MenuItem>
                                    ))}
                            </TextField>

                        </div>}

                        {String(partner_document_data_edit_mode) === "1" && <div className="div_row">
                            <Button className="bton_enreg" onClick={add_selected_fields} style={{ "margin": "1rem" }}
                            >Ajouter Champ Choisi &nbsp;

                            </Button>
                        </div>}

                    </div>

                </div>
                {String(partner_document_data_edit_mode) === "1" && <div className="div_row">
                    <div style={{ "width": "98%", "marginLeft": "1%", "marginRight": "1%", "float": "left" }}>
                        <div className="titre_training_text"> Mofifier le contenu du document </div>
                        <Editor
                            id="document_contente"
                            name="document_contente"
                            onInit={(evt, editor) => editorRef_programme.current = editor}
                            initialValue={field_programme}
                            onKeyUp={editor_keyup}
                            onEditorChange={(newValue, editor) => {
                                if (String(editor_tochange) === "1") {
                                    //alert(" change");
                                    seteditor_tochange("");
                                    setpartner_document_data_changed("1");
                                }
                            }}
                            init={{
                                resize: false,
                                height: 700,
                                menubar: true,
                                plugins: [
                                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor', 'searchreplace',
                                    'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'paste', 'code', 'help', 'wordcount',
                                    'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',

                                ],
                                toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
                                    'alignleft aligncenter alignright alignjustify | ' +
                                    'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',

                                content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px; }'
                            }}
                        />

                    </div>


                </div>}

                {String(partner_document_data_edit_mode) !== "1" && <div>
                    <div style={{ "width": "98%", "marginLeft": "1%", "marginRight": "1%", "float": "left" }}>
                        <div className="titre_training_text"> Votre document </div>
                        <Editor
                            id="document_contente"
                            name="document_contente"
                            onInit={(evt, editor) => editorRef_programme.current = editor}
                            initialValue={field_programme}

                            disabled={true}
                            init={{
                                resize: false,
                                height: 700,
                                menubar: true,
                                readonly: 1,
                                plugins: [
                                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor', 'searchreplace',
                                    'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'paste', 'code', 'help', 'wordcount',
                                    'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',

                                ],
                                toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
                                    'alignleft aligncenter alignright alignjustify | ' +
                                    'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',

                                content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px; }'
                            }}
                        />

                    </div>
                </div>}

                <div className="div_row" style={{ "border": "None" }}>
                    &nbsp;
                </div>
                {String(partner_document_data_changed) === "1" && String(partner_document_data_edit_mode) === "1" && <div className="div_row" style={{ "border": "None", "color": "orange", "textAlign": "center" }}>
                    /!\ Pensez à enregistrer les modifications
                </div>}


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

                    {String(partner_document_data_changed) === "1" && String(partner_document_data_edit_mode) === "1" && <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>

                        <Button variant="contained" className="bton_enreg" onClick={Update_one_Partner_Document}>Enregistrer les modifications
                        </Button>

                    </div>}

                    {String(partner_document_data_edit_mode) === "1" && <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }} >
                        <Button variant="contained" className="bton_annule" onClick={Annule_Partner_Document_DetailFields}>Annuler
                        </Button>
                    </div>}
                </div>

                {String(partner_document_data_edit_mode) !== "1" && <div className="div_row_gauche" style={{ "textAlign": 'left', 'marginLeft': '15px' }}>

                    <Button variant="contained" className="bton_enreg" onClick={Get_Default_Original_Partner_Document_Data}>Réinitialiser avec le modèle d'origine
                    </Button>

                </div>}


                {String(partner_document_data_edit_mode) !== "1" && <div className="div_row_droite" style={{ "textAlign": 'right', 'marginRight': '15px' }}>

                    <Button variant="contained" className="bton_edit" onClick={Edit_Document_Data_Fields}>Editer
                    </Button>

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

            </div>}

            {String(display_detail_document) !== "1" && String(add_one_document) === "1" && <div className="div_row">
                <h3> Personnaliser un nouveau document </h3>
                <div className="div_row" style={{ "textAlign": "left" }}>
                    <div className="div_row"> Choisir le document à ajouter  <br />
                        <TextField
                            name="champ_table"
                            id="champ_table"
                            select
                            InputLabelProps={{
                                shrink: true,
                            }}
                            disabled={false}
                            className="disabled_style enable_style"
                            value={selecte_defaul_doc_to_add}
                            onChange={(e) => {
                                setselecte_defaul_doc_to_add(e.target.value);
                            }}
                        >

                            {Get_List_Personnalisable_Default_Document_result &&
                                Get_List_Personnalisable_Default_Document_result.map((mycollection) => (
                                    <MenuItem key={JSON.parse(mycollection)._id}
                                        value={JSON.parse(mycollection)._id}
                                        style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%", "fontSize": "12px" }}>
                                        {JSON.parse(mycollection).nom}&nbsp;&nbsp;

                                    </MenuItem>
                                ))}
                        </TextField>

                    </div>

                    <div className="div_row">
                        <Button className="bton_enreg" onClick={Get_And_Display_Selected_Document} style={{ "margin": "1rem" }}
                        >Afficher le modèle par defaut &nbsp;

                        </Button>
                    </div>

                </div>

                {String(display_add_one_document) === "1" && <div className="div_row">

                    <div className="div_row">

                        <div className="div_row_gauche">
                            <div className="div_row_gauche texte_area_filter" >
                                <TextField
                                    name="one_document_type"
                                    label="Type de document"

                                    sx={{ m: 1, width: '100%' }}
                                    value={p_one_detail_type_doc}
                                />
                            </div>

                            <div className="div_row_gauche texte_area_filter" >
                                <TextField
                                    name="one_nom_document"
                                    label="Nom document"

                                    sx={{ m: 1, width: '100%' }}
                                    value={p_one_detail_nom}
                                />
                            </div>



                            <div className="div_row_gauche texte_area_filter" ref={myRef}>
                                <TextField
                                    name="one_document_ref_interne"
                                    label="Code Document"
                                    sx={{ m: 1, width: '100%' }}
                                    value={p_one_detail_ref_interne}

                                />

                            </div>

                            <div className="div_row_gauche texte_area_filter" >
                                <TextField
                                    name="one_document_sujet"
                                    label="Sujet"
                                    sx={{ m: 1, width: '100%' }}
                                    value={p_one_detail_sujet}
                                    onChange={(e) => {
                                        setp_detail_sujet(e.target.value);
                                        setpartner_document_data_changed("1");
                                    }}
                                />

                            </div>

                        </div>
                        <div className="div_row_droite" style={{ "textAlign": "left" }}>
                               <div className="div_row"> Choisir un champ  fff <br />
                                <TextField
                                    name="one_champ_table"
                                    id="one_champ_table"
                                    select
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    disabled={false}
                                    className="disabled_style enable_style"
                                    value={p_champ_table}
                                    onChange={(e) => {
                                        setp_champ_table(e.target.value);
                                    }}
                                >

                                    {Get_Given_Personnalisable_Fields_From_template_ID_result &&
                                        Get_Given_Personnalisable_Fields_From_template_ID_result.map((mycollection) => (
                                            <MenuItem key={JSON.parse(mycollection).nom_champ_technique}
                                                value={JSON.parse(mycollection).nom_champ_technique}
                                                style={{ "paddingLeft": "5px", "textAlign": "left", "width": "100%", "fontSize": "12px" }}>
                                                {JSON.parse(mycollection).nom_champ_fonctionel}&nbsp;&nbsp;

                                            </MenuItem>
                                        ))}
                                </TextField>

                            </div>

                            <div className="div_row">
                                <Button className="bton_enreg" onClick={add_one_selected_fields} style={{ "margin": "1rem" }}
                                >Ajouter Champ Choisi &nbsp;

                                </Button>
                            </div>

                        </div>
                        <div className="div_row">
                            <div style={{ "width": "98%", "marginLeft": "1%", "marginRight": "1%", "float": "left" }}>
                                <div className="titre_training_text"> Mofifier le contenu du document </div>
                                <Editor
                                    id="document_contente"
                                    name="document_contente"
                                    onInit={(evt, editor) => one_editorRef_programme.current = editor}
                                    initialValue={one_field_programme}
                                    onKeyUp={editor_keyup}
                                    onEditorChange={(newValue, editor) => {

                                    }}
                                    init={{
                                        resize: false,
                                        height: 700,
                                        menubar: true,
                                        plugins: [
                                            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor', 'searchreplace',
                                            'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'paste', 'code', 'help', 'wordcount',
                                            'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',

                                        ],
                                        toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
                                            'alignleft aligncenter alignright alignjustify | ' +
                                            'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help',

                                        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px; }'
                                    }}
                                />

                            </div>


                        </div>

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


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

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

                            <Button variant="contained" className="bton_enreg" onClick={Add_one_Partner_Document}>Enregistrer les modifications
                            </Button>

                        </div>

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




                </div>}
            </div>}

        </div >
    );
}

export default Config_Documents;
