import React, { useState, useEffect } from "react";
import { Helmet } from "react-helmet";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { Button, FormGroup, Label, Input } from "reactstrap";


import { useCookies } from "react-cookie";
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css

import 'reactjs-popup/dist/index.css';
import axios from "axios";
import { useParams } from 'react-router-dom'
import { FcInfo } from "react-icons/fc";

import { useLocation } from "react-router-dom";
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import 'react-tooltip/dist/react-tooltip.css'

import TextField from '@mui/material/TextField';

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 { makeStyles } from "@material-ui/core/styles";
import Paper from '@material-ui/core/Paper';
import Draggable from 'react-draggable';
import { IconButton } from '@material-ui/core';
import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip } from 'react-tooltip'
import Module_Alert_Confirmation from "./Module_Alert_Confirmation";

import Sign_In_Logo_MySy_SVG from '../img_new_design_2025/Logo_MySy.svg';
import Sign_In_Line_Arrow_Left_SVG from '../img_new_design_2025/line-arrow-left.svg';
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',
    },
}));


function New_C_Sign_Up_2025() {

    const classes = useStyles();
    const [isconnected, setisconnected] = useState("");
    const [cookie_acces_right, setCookie_acces_right, removeCookie_acces_right] = useCookies(['mysy_user_access_right']);
    const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych'], { path: '/' });
    const [cookie_part, setCookie_part, removeCookie_part] = useCookies(['tokenmysypart'], { path: '/' });
    const [retval, setretval] = useState("0");
    const [myApimyApiMessage, setmyApimyApiMessage] = useState("");
    const [initpasswd, setinitpasswd] = useState();
    const [result, setResult] = useState("");
    const [myApiResponse, setmyApiResponse] = useState("false");
    const url_login = process.env.REACT_APP_API_URL + "myclass/api/login/";

    const random1 = Math.floor(Math.random() * 10);
    const random2 = Math.floor(Math.random() * 10);

    const [closepopup, setclosepopup] = useState(0);
    const { obj, objid } = useParams();
    const [menucompte, setmenucompte] = useState("partner");
    const [currentpawdvisible, setcurrentpawdvisible] = useState(false);
    const [typecompte, settypecompte] = useState("partner");

    const {
        register,
        formState: { errors },
        handleSubmit,
    } = useForm();


    const history = useHistory();

    function logout_partner_confirmation() {
        removeCookie_part('tokenmysypart', { path: '/' });
    }

    function retnull() {
        setretval("-1");
    }

    function Logout_Partenaire() {
        confirmAlert({
            title: '',
            message: 'Confirmez la deconnexion compte PRO',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => logout_partner_confirmation()
                },

            ]
        });
    }


    function logout_user_confirmation() {
        removeCookie_part('tokenmysych', { path: '/' });
    }

    function Logout_User() {
        confirmAlert({
            title: 'Deconnexion utilisateur ?',
            message: 'Confirmez la deconnexion utilisateur',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => logout_user_confirmation()
                },
                /* {
                   label: 'Non',
                   onClick: () => retnull()
         
                 }*/
            ]
        });
    }

    const onSubmit_mobile = async (data) => {

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


        const formData = new FormData();


        document.getElementsByName("raison_sociale")[0].style.border = "1px solid white";
        if (!document.getElementsByName("raison_sociale")[0] || document.getElementsByName("raison_sociale")[0].value.length < 3) {
            document.getElementsByName("raison_sociale")[0].style.border = "1px solid red";

            setdisplay_alert_mysy("1");
            setalert_message("La raison sociale de la société doit faire au moins 3 caractère ");
            setalert_type("error");

            //  alert("La raison sociale du contact principal est incorrecte");
            return
        }

        document.getElementsByName("telephone")[0].style.border = "1px solid white";
        if (!document.getElementsByName("telephone")[0] || document.getElementsByName("telephone")[0].value.length <= 8) {
            document.getElementsByName("telephone")[0].style.border = "1px solid red";

            setdisplay_alert_mysy("1");
            setalert_message("Le téléphone de l'entreprise doit faire au moins 10 chiffres");
            setalert_type("error");

            // alert("Le téléphone du contact principal est incorrect ");
            return
        }


        var mymail = document.getElementsByName("email")[0].value;
        var re = /\S+@\S+\.\S+/;
        document.getElementsByName("email")[0].style.border = "1px solid white";
        if (re.test(mymail) === false) {
            document.getElementsByName("email")[0].style.border = "1px solid red";
            //alert("Votre adresse email est incorrecte");
            setdisplay_alert_mysy("1");
            setalert_message("L'adresse email de l'entreprise est incorrecte");
            setalert_type("error");
            return;
        }



        var new_pwd = document.getElementsByName("new_pwd")[0].value;
        var conf_new_pwd = document.getElementsByName("new_pwd_conf")[0].value;

        document.getElementsByName("new_pwd")[0].style.border = "1px solid white";
        document.getElementsByName("new_pwd_conf")[0].style.border = "1px solid white";


        if (new_pwd.length < 8) {
            //alert("Le mot de passe doit faire au moins 8 caractères ");

            document.getElementsByName("new_pwd")[0].style.border = "1px solid red";

            setdisplay_alert_mysy("1");
            setalert_message("Le mot de passe doit faire au moins 8 caractères ");
            setalert_type("error");
            return;
        }


        if (new_pwd !== conf_new_pwd) {

            document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
            document.getElementsByName("new_pwd_conf")[0].style.border = "1px solid red";

            setdisplay_alert_mysy("1");
            setalert_message(" Les mots de passe ne sont pas identiques");
            setalert_type("error");
            return
        }


        if (String(new_pwd).length < 8) {
            document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
            document.getElementsByName("caractere")[0].style.border = "1px solid red";
            setdisplay_alert_mysy("1");
            setalert_message(" Le mot de passe doit faire au moins 8 caractères");
            setalert_type("error");
            return
        }

        var regex = /\d/g;
        if (!regex.test(new_pwd)) {
            document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
            setdisplay_alert_mysy("1");
            setalert_message(" Le mot de passe doit contenir au un chiffre au moins");
            setalert_type("error");
            return
        }

        const specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;

        if (!specialChars.test(new_pwd)) {
            document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
            setdisplay_alert_mysy("1");
            setalert_message(" Le mot de passe doit contenir au un caractère spécial au moins");
            setalert_type("error");
            return
        }


        var mymail = document.getElementsByName("email")[0].value;
        var contact_nom = "";
        var contact_prenom = "";
        var contact_mail = "";
        var contact_tel = "";

        var raison_sociale = "";
        var telephone = "";


        var url_sign_up = process.env.REACT_APP_API_URL + "myclass/api/add_user_account/";
        if (String(menucompte) === String("partner")) {

            // Verification des champs obligatoires
            document.getElementsByName("contact_nom")[0].style.border = "1px solid white";
            if (!document.getElementsByName("contact_nom")[0] || document.getElementsByName("contact_nom")[0].value.length <= 1) {
                document.getElementsByName("contact_nom")[0].style.border = "1px solid red";

                setdisplay_alert_mysy("1");
                setalert_message(" Le nom du contact principal est incorrect ");
                setalert_type("error");

                // alert("Le nom du contact principal est incorrect ");
                return
            }

            document.getElementsByName("contact_prenom")[0].style.border = "1px solid white";
            if (!document.getElementsByName("contact_prenom")[0] || document.getElementsByName("contact_prenom")[0].value.length <= 1) {
                document.getElementsByName("contact_prenom")[0].style.border = "1px solid red";

                setdisplay_alert_mysy("1");
                setalert_message(" Le prenom du contact principal est incorrect ");
                setalert_type("error");

                // alert("Le prenom du contact principal est incorrect ");
                return
            }

            document.getElementsByName("contact_email")[0].style.border = "1px solid white";
            if (!document.getElementsByName("contact_email")[0] || document.getElementsByName("contact_email")[0].value.length <= 1) {
                document.getElementsByName("contact_email")[0].style.border = "1px solid red";

                setdisplay_alert_mysy("1");
                setalert_message("L'email du contact principal est incorrect  ");
                setalert_type("error");

                // alert("L'email du contact principal est incorrect ");
                return
            }
            var re2 = /\S+@\S+\.\S+/;
            if (re2.test(document.getElementsByName("contact_email")[0].value) === false) {
                setdisplay_alert_mysy("1");
                setalert_message(" L'email du contact principal est incorrect ");
                setalert_type("error");

                //  alert("L'email du contact principal est incorrect ");
                document.getElementsByName("contact_email")[0].style.border = "1px solid red";
                return;
            }


            document.getElementsByName("contact_telephone")[0].style.border = "1px solid white";
            if (!document.getElementsByName("contact_telephone")[0] || document.getElementsByName("contact_telephone")[0].value.length <= 8) {
                document.getElementsByName("contact_telephone")[0].style.border = "1px solid red";

                setdisplay_alert_mysy("1");
                setalert_message("Le téléphone du contact principal doit faire au moins 10 chiffres");
                setalert_type("error");

                // alert("Le téléphone du contact principal est incorrect ");
                return
            }


            document.getElementsByName("pasrobot")[0].style.border = "1px solid white";
            var total = " ?? ";
            if (document.getElementsByName("sommerandom_mobile")[0].value) {
                total = document.getElementsByName("sommerandom_mobile")[0].value;
            }

            var calcaul_total = parseInt(random1) + parseInt(random2);
            if (parseInt(total) != parseInt(calcaul_total)) {
                document.getElementsByName("pasrobot")[0].style.border = "1px solid white";
                setdisplay_alert_mysy("1");
                setalert_message(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!");
                setalert_type("error");

                //alert(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!");

                return;
            }



            contact_nom = document.getElementsByName("contact_nom")[0].value;
            contact_prenom = document.getElementsByName("contact_prenom")[0].value;
            contact_mail = document.getElementsByName("contact_email")[0].value;
            contact_tel = document.getElementsByName("contact_telephone")[0].value;
            raison_sociale = document.getElementsByName("raison_sociale")[0].value;
            telephone = document.getElementsByName("telephone")[0].value;

            formData.append("nom", raison_sociale);

            var new_nom = (raison_sociale).replace(/[^0-9a-z]/gi, '').toLocaleLowerCase();
            formData.append('subdomaine_catalog_pub', new_nom);

            formData.append("telephone", telephone);
            formData.append("contact_nom", contact_nom);
            formData.append("contact_prenom", contact_prenom);
            formData.append("contact_tel", contact_tel);
            formData.append("contact_mail", contact_mail);

            url_sign_up = process.env.REACT_APP_API_URL + "myclass/api/add_partner_account/";
        }

        if (!document.getElementsByName("cgu_mobile")[0].checked) {
            // alert(" Vous devez accepter les conditions générales d'utilisation du site. Merci.");

            setdisplay_alert_mysy("1");
            setalert_message("Vous devez accepter les conditions générales d'utilisation du site. Merci. ");
            setalert_type("error");


            document.getElementsByName("cgu_mobile")[0].style.backgroundColor = "red";
            return;
        }
        formData.append("email", mymail);
        formData.append("pwd", new_pwd);

       

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

                if (String(result['status']) == String("true")) {
                    alert(String(result['message']));
                    setisconnected("true");
                    setmyApimyApiMessage(result['message']);
                    window.scrollTo({
                        top: 0,
                        behavior: "smooth",
                    });

                    if (String(menucompte) === String("user")) {
                        history.push("/Connexion-utilisateur-0");
                    }
                    else if (String(menucompte) === String("partner")) {
                        history.push("/PartnerLogin0");
                    }
                }
                else {
                    //alert(" GRR "+String(result['message']+ "  result['status'] = "+ result['status']));
                    setisconnected("false");
                    //setmyApimyApiMessage(result['message']);

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

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

                setdisplay_alert_mysy("1");
                setalert_message("Le service est momentanémentindisponible, merci de ressayer plus tard.  ");
                setalert_type("error");


                // setmyApimyApiMessage("Le service est momentanémentindisponible, merci de ressayer plus tard. ");

            });

    };


    const onSubmit = async (data) => {
        
        
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });


        const formData = new FormData();


        document.getElementsByName("raison_sociale")[0].style.border = "1px solid white";
        if (!document.getElementsByName("raison_sociale")[0] || document.getElementsByName("raison_sociale")[0].value.length < 3) {
            document.getElementsByName("raison_sociale")[0].style.border = "1px solid red";

            setdisplay_alert_mysy("1");
            setalert_message("La raison sociale de la société doit faire au moins 3 caractère ");
            setalert_type("error");

            //  alert("La raison sociale du contact principal est incorrecte");
            return
        }

        document.getElementsByName("telephone")[0].style.border = "1px solid white";
        if (!document.getElementsByName("telephone")[0] || document.getElementsByName("telephone")[0].value.length <= 8) {
            document.getElementsByName("telephone")[0].style.border = "1px solid red";

            setdisplay_alert_mysy("1");
            setalert_message("Le téléphone de l'entreprise doit faire au moins 10 chiffres");
            setalert_type("error");

            // alert("Le téléphone du contact principal est incorrect ");
            return
        }


        var mymail = document.getElementsByName("email")[0].value;
        var re = /\S+@\S+\.\S+/;
        document.getElementsByName("email")[0].style.border = "1px solid white";
        if (re.test(mymail) === false) {
            document.getElementsByName("email")[0].style.border = "1px solid red";
            //alert("Votre adresse email est incorrecte");
            setdisplay_alert_mysy("1");
            setalert_message("L'adresse email de l'entreprise est incorrecte");
            setalert_type("error");
            return;
        }



        var new_pwd = document.getElementsByName("new_pwd")[0].value;
        var conf_new_pwd = document.getElementsByName("new_pwd_conf")[0].value;

        document.getElementsByName("new_pwd")[0].style.border = "1px solid white";
        document.getElementsByName("new_pwd_conf")[0].style.border = "1px solid white";


        if (new_pwd.length < 8) {
            //alert("Le mot de passe doit faire au moins 8 caractères ");

            document.getElementsByName("new_pwd")[0].style.border = "1px solid red";

            setdisplay_alert_mysy("1");
            setalert_message("Le mot de passe doit faire au moins 8 caractères ");
            setalert_type("error");
            return;
        }


        if (new_pwd !== conf_new_pwd) {

            document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
            document.getElementsByName("new_pwd_conf")[0].style.border = "1px solid red";

            setdisplay_alert_mysy("1");
            setalert_message(" Les mots de passe ne sont pas identiques");
            setalert_type("error");
            return
        }


        if (String(new_pwd).length < 8) {
            document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
            document.getElementsByName("caractere")[0].style.border = "1px solid red";
            setdisplay_alert_mysy("1");
            setalert_message(" Le mot de passe doit faire au moins 8 caractères");
            setalert_type("error");
            return
        }

        var regex = /\d/g;
        if (!regex.test(new_pwd)) {
            document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
            setdisplay_alert_mysy("1");
            setalert_message(" Le mot de passe doit contenir au un chiffre au moins");
            setalert_type("error");
            return
        }

        const specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;

        if (!specialChars.test(new_pwd)) {
            document.getElementsByName("new_pwd")[0].style.border = "1px solid red";
            setdisplay_alert_mysy("1");
            setalert_message(" Le mot de passe doit contenir au un caractère spécial au moins");
            setalert_type("error");
            return
        }


        var mymail = document.getElementsByName("email")[0].value;
        var contact_nom = "";
        var contact_prenom = "";
        var contact_mail = "";
        var contact_tel = "";

        var raison_sociale = "";
        var telephone = "";


        var url_sign_up = process.env.REACT_APP_API_URL + "myclass/api/add_user_account/";
        if (String(menucompte) === String("partner")) {

            // Verification des champs obligatoires
            document.getElementsByName("contact_nom")[0].style.border = "1px solid white";
            if (!document.getElementsByName("contact_nom")[0] || document.getElementsByName("contact_nom")[0].value.length <= 1) {
                document.getElementsByName("contact_nom")[0].style.border = "1px solid red";

                setdisplay_alert_mysy("1");
                setalert_message(" Le nom du contact principal est incorrect ");
                setalert_type("error");

                // alert("Le nom du contact principal est incorrect ");
                return
            }

            document.getElementsByName("contact_prenom")[0].style.border = "1px solid white";
            if (!document.getElementsByName("contact_prenom")[0] || document.getElementsByName("contact_prenom")[0].value.length <= 1) {
                document.getElementsByName("contact_prenom")[0].style.border = "1px solid red";

                setdisplay_alert_mysy("1");
                setalert_message(" Le prenom du contact principal est incorrect ");
                setalert_type("error");

                // alert("Le prenom du contact principal est incorrect ");
                return
            }

            document.getElementsByName("contact_email")[0].style.border = "1px solid white";
            if (!document.getElementsByName("contact_email")[0] || document.getElementsByName("contact_email")[0].value.length <= 1) {
                document.getElementsByName("contact_email")[0].style.border = "1px solid red";

                setdisplay_alert_mysy("1");
                setalert_message("L'email du contact principal est incorrect  ");
                setalert_type("error");

                // alert("L'email du contact principal est incorrect ");
                return
            }
            var re2 = /\S+@\S+\.\S+/;
            if (re2.test(document.getElementsByName("contact_email")[0].value) === false) {
                setdisplay_alert_mysy("1");
                setalert_message(" L'email du contact principal est incorrect ");
                setalert_type("error");

                //  alert("L'email du contact principal est incorrect ");
                document.getElementsByName("contact_email")[0].style.border = "1px solid red";
                return;
            }


            document.getElementsByName("contact_telephone")[0].style.border = "1px solid white";
            if (!document.getElementsByName("contact_telephone")[0] || document.getElementsByName("contact_telephone")[0].value.length <= 8) {
                document.getElementsByName("contact_telephone")[0].style.border = "1px solid red";

                setdisplay_alert_mysy("1");
                setalert_message("Le téléphone du contact principal doit faire au moins 10 chiffres");
                setalert_type("error");

                // alert("Le téléphone du contact principal est incorrect ");
                return
            }


            document.getElementsByName("pasrobot")[0].style.border = "1px solid white";
            var total = " ?? ";
            if (document.getElementsByName("sommerandom_creation")[0].value) {
                total = document.getElementsByName("sommerandom_creation")[0].value;
            }

            var calcaul_total = parseInt(random1) + parseInt(random2);
            if (parseInt(total) != parseInt(calcaul_total)) {
                document.getElementsByName("pasrobot")[0].style.border = "1px solid white";
                setdisplay_alert_mysy("1");
                setalert_message(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!");
                setalert_type("error");

                //alert(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!");

                return;
            }



            contact_nom = document.getElementsByName("contact_nom")[0].value;
            contact_prenom = document.getElementsByName("contact_prenom")[0].value;
            contact_mail = document.getElementsByName("contact_email")[0].value;
            contact_tel = document.getElementsByName("contact_telephone")[0].value;
            raison_sociale = document.getElementsByName("raison_sociale")[0].value;
            telephone = document.getElementsByName("telephone")[0].value;

            formData.append("nom", raison_sociale);

            var new_nom = (raison_sociale).replace(/[^0-9a-z]/gi, '').toLocaleLowerCase();
            formData.append('subdomaine_catalog_pub', new_nom);

            formData.append("telephone", telephone);
            formData.append("contact_nom", contact_nom);
            formData.append("contact_prenom", contact_prenom);
            formData.append("contact_tel", contact_tel);
            formData.append("contact_mail", contact_mail);

            url_sign_up = process.env.REACT_APP_API_URL + "myclass/api/add_partner_account/";
        }

        if (!document.getElementsByName("cgu")[0].checked) {
            // alert(" Vous devez accepter les conditions générales d'utilisation du site. Merci.");

            setdisplay_alert_mysy("1");
            setalert_message("Vous devez accepter les conditions générales d'utilisation du site. Merci. ");
            setalert_type("error");


            document.getElementsByName("cgu")[0].style.backgroundColor = "red";
            return;
        }
        formData.append("email", mymail);
        formData.append("pwd", new_pwd);
       

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

                if (String(result['status']) == String("true")) {
                    alert(String(result['message']));
                    setisconnected("true");
                    setmyApimyApiMessage(result['message']);
                    window.scrollTo({
                        top: 0,
                        behavior: "smooth",
                    });

                    if (String(menucompte) === String("user")) {
                        history.push("/Connexion-utilisateur-0");
                    }
                    else if (String(menucompte) === String("partner")) {
                        history.push("/PartnerLogin0");
                    }
                }
                else {
                    //alert(" GRR "+String(result['message']+ "  result['status'] = "+ result['status']));
                    setisconnected("false");
                    //setmyApimyApiMessage(result['message']);

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

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

                setdisplay_alert_mysy("1");
                setalert_message("Le service est momentanémentindisponible, merci de ressayer plus tard.  ");
                setalert_type("error");


                // setmyApimyApiMessage("Le service est momentanémentindisponible, merci de ressayer plus tard. ");

            });

    };



    const handleMouseDownPassword = (event) => {
        event.preventDefault();
    };


    const location = useLocation();

    useEffect(() => {

        setmenucompte("partner");

        const listener = event => {
            if (event.code === "Enter" || event.code === "NumpadEnter") {
                event.preventDefault();
                onSubmit();
            }

        };
        document.addEventListener("keydown", listener);
        //menu_user_account();
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });

        if (String(menucompte) === String("user")) {
            menu_user_account()
        }
        else {
            menu_parter_account();
        }


    }, []);



    function menu_parter_account() {
        //alert(" menu_parter_account  =  "+String(menucompte));
        setmenucompte("partner");

        if (document.getElementsByName("partner_account") && document.getElementsByName("partner_account")[0])
            document.getElementsByName("partner_account")[0].style.backgroundColor = "#81BC3A";

        if (document.getElementsByName("user_account") && document.getElementsByName("user_account")[0])
            document.getElementsByName("user_account")[0].style.backgroundColor = "#ffffff";


    }

    function menu_user_account() {

        setmenucompte("user");

        if (document.getElementsByName("user_account") && document.getElementsByName("user_account")[0])
            document.getElementsByName("user_account")[0].style.backgroundColor = "#81BC3A";

        if (document.getElementsByName("partner_account") && document.getElementsByName("partner_account")[0])
            document.getElementsByName("partner_account")[0].style.backgroundColor = "#ffffff";
    }


    function resetpasswd_ok(e) {

       
        // Controle du mail
        var mymail = reset_login_email;
        //alert(" le mail de reset  = "+mymail);
        var re = /\S+@\S+\.\S+/;
        if (re.test(mymail) === false) {
            //  alert("l'adresse email est incorrecte");
            document.getElementsByName("zoneemail")[0].style.border = "1px solid red";
            var txt = "L'adresse email est incorrecte"

            setdisplay_alert_mysy("1");
            setalert_message(txt);
            setalert_type("error");

            return;
        }


        var total = " ?? ";
        if (document.getElementsByName("sommerandom_reset_pwd")[0].value) {
            total = document.getElementsByName("sommerandom_reset_pwd")[0].value;
        }

        var calcul_total = parseInt(random1) + parseInt(random2);

      
        if (parseInt(total) != parseInt(calcul_total)) {
            document.getElementsByName("pasrobot")[0].style.border = "1px solid red";

            // alert(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!");

            var txt = "Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!"
            //  alert(res.data.message);
            setdisplay_alert_mysy("1");
            setalert_message(txt);
            setalert_type("error");

            return;
        }

        var form = new FormData();

        form.append("email", mymail);
        form.append("account_type", typecompte);


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

        //alert("myurl = "+myurl);
        axios.post(myurl, form).then(res => {
            setclosepopup(1);
            setinitpasswd("true");
            if (String(res.data.status) != String("false")) {
                setmyApiResponse("true");
                setResult(res.data.message);
                // alert(res.data.message);
                setdisplay_alert_mysy("1");
                setalert_message(res.data.message);
                setalert_type("success");
                Dialog_reset_pwd_open_handleClose();

            }
            else {

                setmyApiResponse("false");
                setResult(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 :( mysearchtext = ', error);
            setmyApiResponse("false");
            setinitpasswd("false");
            //setmyApimyApiMessage("")

            //  alert(res.data.message);
            var txt = " Impossible de prendre en compte la demande de réinitialisation"
            setdisplay_alert_mysy("1");
            setalert_message(txt);
            setalert_type("error");

        })


    }


    // Cette fonction permet de cacher le mot de passer et eviter les 
    // autocompletion
    const [realpwdvalue, setrealpwdvalue] = useState("");
    const [realpwdhidenvalue, setrealpwdhidenvalue] = useState("");
    function realpwd(e) {
        const val = e.target.value;
        const last = val.charAt(val.length - 1);
        var new_val = realpwdvalue;
        var new_val_hiden = realpwdhidenvalue;

        //alert(" new_val avant saisie= "+new_val);
        new_val = new_val + last;
        new_val_hiden = new_val_hiden + "*";

        //alert("  - new_val apres sisie = "+new_val+"  new_val_hiden = "+new_val_hiden);
        setrealpwdhidenvalue(new_val_hiden);
        setrealpwdvalue(new_val);

        //setrealpwdvalue(val);
        //document.getElementById("cle_secrete").value = new_val_hiden;

    }

    /*  function displayvlaue(){
          alert(" la valeur secrete = "+realpwdvalue);
      }*/


    const handleClickShowPassword = () => {
        if (currentpawdvisible == false) {
            document.getElementsByName("new_pwd")[0].type = "text";
            document.getElementsByName("new_pwd_conf")[0].type = "text";
            setcurrentpawdvisible(true);
        }
        else if (currentpawdvisible == true) {
            document.getElementsByName("new_pwd")[0].type = "password";
            document.getElementsByName("new_pwd_conf")[0].type = "password";
            setcurrentpawdvisible(false);
        }
    };

    const [login_email, setlogin_email] = useState("");
    const [login_pwd, setlogin_pwd] = useState("");

    const [compte_raison_sociale, setcompte_raison_sociale] = useState("");
    const [compte_telephone, setcompte_telephone] = useState("");
    const [compte_email, setcompte_email] = useState("");
    const [compte_pwd, setcompte_pwd] = useState("");
    const [compte_repwd, setcompte_repwd] = useState("");

    const [contact_nom, setcontact_nom] = useState("");
    const [contact_prenom, setcontact_prenom] = useState("");
    const [contact_email, setcontact_email] = useState("");
    const [contact_phone, setcontact_phone] = useState("");




    const [reset_login_email, setreset_login_email] = useState("");
    const [reset_somme_random, setreset_somme_random] = useState("");

    const [Dialog_reset_pwd_open, setDialog_reset_pwd_open] = React.useState(false);
    const Dialog_reset_pwd_open_handleClose = () => {

        setDialog_reset_pwd_open(false)
        setreset_login_email("");

    };


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


    return (
        <div className="new_s_sign_up_2025">

            {/***  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*/}

            {/***   GESTION RESET PWD */}
            <Dialog
                open={Dialog_reset_pwd_open}
                className="displaypartnersession"

                static
                onClose={() => null}

                PaperProps={{


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

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

            >
                <DialogTitle style={{ cursor: 'move', fontWeight: '700', fontFamily: "DM Sans-Bold, Helvetica" }} id="draggable-dialog-title" > &nbsp; Réinitialiser votre mot de passe </DialogTitle>

                <DialogContent className="DialogContent_width" >


                    <div className="session_caract_Dialog" name="zoneemail"> <b> Votre email </b>
                        <TextField
                            autoFocus
                            margin="dense"
                            id="new_login"

                            fullWidth
                            //variant="standard"
                            onChange={(e) => {
                                setreset_login_email(e.target.value);
                            }
                            }
                            placeholder="Votre email"
                        />



                    </div>


                    <div className="session_caract_Dialog" name="pasrobot" > <b>Je ne suis un robot</b>  :  {random1} + {random2} =
                        <TextField
                            // autoFocus
                            margin="dense"
                            id="sommerandom_reset_pwd"
                            name="sommerandom_reset_pwd"
                            fullWidth
                            //variant="standard"

                          
                            placeholder="Calculez la somme des valeurs"

                        />


                    </div>


                </DialogContent>

                <DialogActions>

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


                    <Button color="success" onClick={resetpasswd_ok}>
                        Envoyer
                    </Button>

                    <Button outline onClick={Dialog_reset_pwd_open_handleClose}>
                        Annuler
                    </Button>



                </DialogActions>


            </Dialog>
            {/***  FIN GESTION RESET PWD */}


            <Helmet>
                <title>Connexion</title>
                <meta name="description" content="Éditeur Français de logiciels pour organisme de formation. Avec solutions de E-Learning, gestion administrative et gestion relation client nous accompagnons les organismes de formation à réaliser l’audit QUALIOPI en toute sérénité. Nous sommes les moins cher du marché. Nous vous accompagnons automatiser vos process : inscription, évaluation, émargement (qr-code), Check-list QUALIOPI, Personnalisation et édition documents, Gestion formateurs, Catalogue formations personnalisé" />
                <meta name="robots" content="index,follow" />
                <meta name="title" content="Création compte MySy Trainig Technology" />
                <link rel="canonical" href={window.location.href} />
            </Helmet>

            <div className="log-in-page-mobile">
                <div className="div">
                    <div className="sign-in">
                        <div className="sign-in-content">
                            <div className="text">
                                <div className="text-wrapper">Création de compte</div>

                            </div>
                            <div className="info">
                                <div className="inputs">
                                    <div className="input"><div className="text-wrapper-2">
                                        <TextField
                                            required
                                            id="raison_sociale"
                                            name="raison_sociale"
                                            type="text"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Nom de votre entreprise"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={compte_raison_sociale}
                                            onChange={(event) => {
                                                setcompte_raison_sociale(event.target.value);

                                            }}

                                        />
                                    </div>
                                    </div>

                                    <div className="input"><div className="text-wrapper-2">
                                        <TextField
                                            required
                                            id="telephone"
                                            name="telephone"
                                            type="text"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Votre Téléphone"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={compte_telephone}
                                            onChange={(event) => {
                                                setcompte_telephone(event.target.value);

                                            }}

                                        />
                                    </div>
                                    </div>


                                    <div className="input"><div className="text-wrapper-2">
                                        <TextField
                                            required
                                            id="email"
                                            name="email"
                                            type="email"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Votre email"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={compte_email}
                                            onChange={(event) => {
                                                setcompte_email(event.target.value);

                                            }}

                                        />
                                    </div>
                                    </div>

                                    <div className="input"><div className="text-wrapper-2">
                                        <TextField
                                            required
                                            type="password"
                                            autoComplete="current-password"
                                            id="new_pwd"
                                            name="new_pwd"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Mot de passe"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={compte_pwd}
                                            onChange={(event) => {
                                                setcompte_pwd(event.target.value);

                                            }}

                                        />


                                    </div>

                                    </div>

                                    <div className="input"><div className="text-wrapper-2">
                                        <TextField
                                            required
                                            type="password"
                                            autoComplete="current-password"
                                            id="new_pwd_conf"
                                            name="new_pwd_conf"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Confirmer mot de passe"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={compte_repwd}
                                            onChange={(event) => {
                                                setcompte_repwd(event.target.value);

                                            }}

                                        />


                                    </div>

                                    </div>


                                    <div style={{
                                        "textAlign": "right",
                                        width: "100%",
                                        paddingRight: '10px'
                                    }} >
                                        <nav style={{
                                            width: "10%",
                                            float: "right"
                                        }}
                                            onClick={handleClickShowPassword}>
                                            {currentpawdvisible ? <Visibility style={{ fontSize: '15px' }} /> : <VisibilityOff style={{ fontSize: '15px' }} />}
                                        </nav>

                                        <nav style={{
                                            width: "10%",
                                            float: "left",
                                            textAlign: 'left'
                                        }}
                                        >
                                            <Tooltip className="tooltip_css" id="tooltip_pwd" style={{ "fontSize": "12px" }} />
                                            <a data-tooltip-id="tooltip_pwd" data-tooltip-html='Le mot de passe contenant au moins :
                                        <ul>
                                            <li name="caractere">
                                                8 caractères
                                            </li>
                                            <li name="nombre">
                                                1 nombre
                                            </li>
                                            <li name="special">
                                                1 caractère spécial p. ex., $, !, @, %, &
                                            </li>

                                            <li name="identique">
                                                Identiques
                                            </li>
                                        </ul>'>

                                                <FcInfo />
                                            </a>
                                        </nav>
                                    </div>
                                    <div style={{ width: '100%', float: 'left', marginTop: "2rem" }}>

                                        <div className="titre1"> Contact Principal </div>
                                        <div className="inputs">
                                            <div className="input"><div className="text-wrapper-2">
                                                <TextField
                                                    required
                                                    id="contact_nom"
                                                    name="contact_nom"
                                                    type="text"
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    fullWidth
                                                    placeholder="Nom du Contact"
                                                    InputProps={{
                                                        style: {

                                                        },
                                                        disableUnderline: true,
                                                    }}

                                                    variant="standard"

                                                    value={contact_nom}
                                                    onChange={(event) => {
                                                        setcontact_nom(event.target.value);

                                                    }}

                                                />
                                            </div>
                                            </div>

                                            <div className="input"><div className="text-wrapper-2">
                                                <TextField
                                                    required
                                                    id="contact_prenom"
                                                    name="contact_prenom"
                                                    type="text"
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    fullWidth
                                                    placeholder="Prénom du Contact"
                                                    InputProps={{
                                                        style: {

                                                        },
                                                        disableUnderline: true,
                                                    }}

                                                    variant="standard"

                                                    value={contact_prenom}
                                                    onChange={(event) => {
                                                        setcontact_prenom(event.target.value);

                                                    }}

                                                />
                                            </div>
                                            </div>


                                            <div className="input"><div className="text-wrapper-2">
                                                <TextField
                                                    required
                                                    id="contact_email"
                                                    name="contact_email"
                                                    type="text"
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    fullWidth
                                                    placeholder="Email du Contact"
                                                    InputProps={{
                                                        style: {

                                                        },
                                                        disableUnderline: true,
                                                    }}

                                                    variant="standard"

                                                    value={contact_email}
                                                    onChange={(event) => {
                                                        setcontact_email(event.target.value);

                                                    }}

                                                />
                                            </div>
                                            </div>

                                            <div className="input"><div className="text-wrapper-2">
                                                <TextField
                                                    required
                                                    id="contact_telephone"
                                                    name="contact_telephone"
                                                    type="text"
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    fullWidth
                                                    placeholder="Téléphone du Contact"
                                                    InputProps={{
                                                        style: {

                                                        },
                                                        disableUnderline: true,
                                                    }}

                                                    variant="standard"

                                                    value={contact_phone}
                                                    onChange={(event) => {
                                                        setcontact_phone(event.target.value);

                                                    }}

                                                />
                                            </div>
                                            </div>


                                        </div>

                                        <div style={{ "textAlign": "left", "width": "100%", marginTop: "2rem" }}>

                                            <input type={"checkbox"} unchecked
                                                id="cgu_mobile"
                                                name="cgu_mobile"
                                                style={{ "textAlign": "left", "width": "auto", "height": "1rem" }} />
                                            <label for="cgu_mobile" style={{ "textAlign": "left", maxWidth: "90%", "fontSize": "small" }}>Accepter <a href='/sample/MYSY_CGU.pdf' download>les conditions générales d'usage </a></label>

                                            <div name="pasrobot" > <b>Je ne suis un robot</b>  :  {random1} + {random2} =
                                                <TextField
                                                    // autoFocus
                                                    margin="dense"
                                                    id="sommerandom_mobile"
                                                    name="sommerandom_mobile"
                                                    fullWidth
                                                    placeholder="Calculez la somme des valeurs"

                                                />

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <footer className="footer">
                                    &nbsp;

                                </footer>


                            </div>
                        </div>
                        <div className="log-in">
                            <div className="button-text" onClick={onSubmit_mobile}>
                                <div className="div-wrapper"><div className="text-2">Créer un compte</div></div>
                            </div>
                            <div className="create-account">
                                <p className="text-wrapper-4">Vous avez déjà un compte ?</p>
                                <div className="text-wrapper-5" style={{cursor:'pointer'}} onClick={(e) => {
                                   history.push("/signin");
                                }}>Connectez-vous</div>
                            </div>
                        </div>
                    </div>
                    <div className="logo-mysy">
                        <div className="logo-mysy-2">
                            <div className="overlap">
                                <img className="vector" />
                                <img className="img" />
                                <img className="vector-2" />
                            </div>
                            <div className="overlap-group">
                            <img  src={Sign_In_Logo_MySy_SVG} />
                            </div>
                        </div>
                        <div className="text-wrapper-6">TRAINING</div>
                    </div>
                    <div className="back">
                        <img className="line-arrow-left" src={Sign_In_Line_Arrow_Left_SVG} />
                        <div className="text-wrapper-7" style={{cursor:'pointer'}} onClick={(e) => {
                                   history.push("/");
                                }}>Retour à l'accueil</div>
                    </div>
                    <div className="status-bar-mini">
                        <div className="status-mini">
                            &nbsp;

                        </div>

                    </div>
                    <div className="URL-bar-scroll-mini">
                        <div className="home"></div>
                        <div className="domain">
                            <img className="trust" src="img/trust.svg" />
                            <div className="domain-2">{window.location.host} </div>
                        </div>
                    </div>
                </div>
            </div>



            <div className="log-in-page-desktop">
                <div className="div">
                    <div className="back">
                        <img className="line-arrow-left" src={Sign_In_Line_Arrow_Left_SVG} />
                        <div className="text-wrapper" style={{cursor:'pointer'}} onClick={(e) => {
                                   history.push("/");
                                }}>Retour à l'accueil</div>
                    </div>
                    <div className="sign-in">
                        <div className="sign-in-content">
                            <div className="text">
                                <div className="text-wrapper-2">Création de compte</div>
                            </div>
                            <div className="info">
                                <div className="inputs">
                                    <div className="input"><div className="text-wrapper-3">
                                        <TextField
                                            required
                                            id="raison_sociale"
                                            name="raison_sociale"
                                            type="text"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Nom de votre entreprise"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={compte_raison_sociale}
                                            onChange={(event) => {
                                                setcompte_raison_sociale(event.target.value);

                                            }}

                                        />
                                    </div>
                                    </div>

                                    <div className="input"><div className="text-wrapper-3">
                                        <TextField
                                            required
                                            id="telephone"
                                            name="telephone"
                                            type="text"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Votre Téléphone"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={compte_telephone}
                                            onChange={(event) => {
                                                setcompte_telephone(event.target.value);

                                            }}

                                        />
                                    </div>
                                    </div>


                                    <div className="input"><div className="text-wrapper-3">
                                        <TextField
                                            required
                                            id="email"
                                            name="email"
                                            type="email"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Votre email"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={compte_email}
                                            onChange={(event) => {
                                                setcompte_email(event.target.value);

                                            }}

                                        />
                                    </div>
                                    </div>

                                    <div className="input"><div className="text-wrapper-3">
                                        <TextField
                                            required
                                            type="password"
                                            autoComplete="current-password"
                                            id="new_pwd"
                                            name="new_pwd"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Mot de passe"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={compte_pwd}
                                            onChange={(event) => {
                                                setcompte_pwd(event.target.value);

                                            }}

                                        />


                                    </div>

                                    </div>

                                    <div className="input"><div className="text-wrapper-3">
                                        <TextField
                                            required
                                            type="password"
                                            autoComplete="current-password"
                                            id="new_pwd_conf"
                                            name="new_pwd_conf"
                                            InputLabelProps={{
                                                shrink: true,
                                            }}
                                            disabled={false}
                                            fullWidth
                                            placeholder="Confirmer mot de passe"
                                            InputProps={{
                                                style: {

                                                },
                                                disableUnderline: true,
                                            }}

                                            variant="standard"

                                            value={compte_repwd}
                                            onChange={(event) => {
                                                setcompte_repwd(event.target.value);

                                            }}

                                        />


                                    </div>

                                    </div>


                                    <div style={{
                                        "textAlign": "right",
                                        width: "100%",
                                        paddingRight: '10px'
                                    }} >
                                        <nav style={{
                                            width: "10%",
                                            float: "right"
                                        }}
                                            onClick={handleClickShowPassword}>
                                            {currentpawdvisible ? <Visibility style={{ fontSize: '15px' }} /> : <VisibilityOff style={{ fontSize: '15px' }} />}
                                        </nav>

                                        <nav style={{
                                            width: "10%",
                                            float: "left",
                                            textAlign: 'left'
                                        }}
                                        >
                                            <Tooltip className="tooltip_css" id="tooltip_pwd" style={{ "fontSize": "12px" }} />
                                            <a data-tooltip-id="tooltip_pwd" data-tooltip-html='Le mot de passe contenant au moins :
                                        <ul>
                                            <li name="caractere">
                                                8 caractères
                                            </li>
                                            <li name="nombre">
                                                1 nombre
                                            </li>
                                            <li name="special">
                                                1 caractère spécial p. ex., $, !, @, %, &
                                            </li>

                                            <li name="identique">
                                                Identiques
                                            </li>
                                        </ul>'>

                                                <FcInfo />
                                            </a>
                                        </nav>
                                    </div>
                                    <div style={{ width: '100%', float: 'left', marginTop: "2rem" }}>

                                        <div className="titre1"> Contact Principal </div>
                                        <div className="inputs">
                                            <div className="input"><div className="text-wrapper-3">
                                                <TextField
                                                    required
                                                    id="contact_nom"
                                                    name="contact_nom"
                                                    type="text"
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    fullWidth
                                                    placeholder="Nom du Contact"
                                                    InputProps={{
                                                        style: {

                                                        },
                                                        disableUnderline: true,
                                                    }}

                                                    variant="standard"

                                                    value={contact_nom}
                                                    onChange={(event) => {
                                                        setcontact_nom(event.target.value);

                                                    }}

                                                />
                                            </div>
                                            </div>

                                            <div className="input"><div className="text-wrapper-3">
                                                <TextField
                                                    required
                                                    id="contact_prenom"
                                                    name="contact_prenom"
                                                    type="text"
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    fullWidth
                                                    placeholder="Prénom du Contact"
                                                    InputProps={{
                                                        style: {

                                                        },
                                                        disableUnderline: true,
                                                    }}

                                                    variant="standard"

                                                    value={contact_prenom}
                                                    onChange={(event) => {
                                                        setcontact_prenom(event.target.value);

                                                    }}

                                                />
                                            </div>
                                            </div>


                                            <div className="input"><div className="text-wrapper-3">
                                                <TextField
                                                    required
                                                    id="contact_email"
                                                    name="contact_email"
                                                    type="text"
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    fullWidth
                                                    placeholder="Email du Contact"
                                                    InputProps={{
                                                        style: {

                                                        },
                                                        disableUnderline: true,
                                                    }}

                                                    variant="standard"

                                                    value={contact_email}
                                                    onChange={(event) => {
                                                        setcontact_email(event.target.value);

                                                    }}

                                                />
                                            </div>
                                            </div>

                                            <div className="input"><div className="text-wrapper-3">
                                                <TextField
                                                    required
                                                    id="contact_telephone"
                                                    name="contact_telephone"
                                                    type="text"
                                                    InputLabelProps={{
                                                        shrink: true,
                                                    }}
                                                    disabled={false}
                                                    fullWidth
                                                    placeholder="Téléphone du Contact"
                                                    InputProps={{
                                                        style: {

                                                        },
                                                        disableUnderline: true,
                                                    }}

                                                    variant="standard"

                                                    value={contact_phone}
                                                    onChange={(event) => {
                                                        setcontact_phone(event.target.value);

                                                    }}

                                                />
                                            </div>
                                            </div>


                                        </div>

                                        <div style={{ "textAlign": "left", "width": "100%", marginTop: "2rem" }}>

                                            <input type={"checkbox"} unchecked
                                                id="cgu"
                                                name="cgu"
                                                style={{ "textAlign": "left", "width": "auto", "height": "1rem" }} />
                                            <label for="cgu" style={{ "textAlign": "left", maxWidth: "90%", "fontSize": "small" }}>Accepter <a href='/sample/MYSY_CGU.pdf' download>les conditions générales d'usage </a></label>

                                            <div name="pasrobot" > <b>Je ne suis un robot </b>  :  {random1} + {random2} =
                                                <TextField
                                                    // autoFocus
                                                    margin="dense"
                                                    id="sommerandom_creation"
                                                    name="sommerandom_creation"
                                                    fullWidth
                                                    placeholder="Calculez la somme des valeurs"

                                                />

                                            </div>

                                        </div>

                                    </div>

                                </div>
                                <footer className="footer">

                                </footer>
                            </div>
                        </div>
                        <div className="log-in">
                            <div className="button-text" onClick={onSubmit}>
                                <div className="div-wrapper"><div className="text-2" >Créer un compte</div></div>
                            </div>
                            <div className="create-account">
                                <p className="text-wrapper-6">Vous avez déjà un compte ?</p>
                                <div className="text-wrapper-7" style={{cursor:'pointer'}} onClick={(e) => {
                                   history.push("/signin");
                                }}>Connectez-vous</div>
                            </div>
                        </div>
                    </div>
                    <div className="logo-mysy">
                        <div className="logo-mysy-2">
                            <div className="overlap-group">
                                <img className="vector" />
                                <img className="img" />
                                <img className="vector-2" />
                            </div>
                            <div className="overlap">
                            <img  src={Sign_In_Logo_MySy_SVG} />
                            </div>
                        </div>
                        <div className="text-wrapper-8">TRAINING</div>
                    </div>
                </div>
            </div>

        </div>
    );
}

export default New_C_Sign_Up_2025;

