import React, { useRef, useState, useMemo, useEffect } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";
import Formation_Partner_Catalog from "./Formation_Partner_Catalog";
import { FaSearch, FaRegArrowAltCircleDown, FaRegArrowAltCircleUp } from 'react-icons/fa';

import { IoAppsSharp, IoListSharp } from "react-icons/io5";
import Formation_Grid_2Col from "./Formation_Grid_2Col";
import Pagination from "./TestPagination";

import { useHistory } from "react-router-dom";
import { getCookie, removeCookie } from 'react-use-cookie';
import { Helmet } from "react-helmet";

import AideRecherche from "./AideRecherche"
import { useParams } from 'react-router-dom'
import Fotter_Catalog_Pub from "./Fotter_Catalog_Pub";


import { confirmAlert } from 'react-confirm-alert'; // Import
import { useCookies } from "react-cookie";
import InputRange from 'react-input-range';
import 'react-input-range/lib/css/index.css';
import tick_ko from "../mysy_img/tick_KO.png";
import img_header from "../mysy_img2/img_header.png"
import { TbArrowsDownUp } from "react-icons/tb";
import { CiCircleRemove, CiCircleMinus } from "react-icons/ci";
let PageSize = 10;
const Mon_Catalogue_Public = (props) => {



    const { type, categorie } = useParams();
    const { NewSearchText } = useParams();
    const [v11, setv11] = useState("");
    const [userconnected, setuserconnected] = useState("0");
    const [TrainingSupport, setTrainingSupport] = useState("");
    const [TrainingType, setTrainingType] = useState("");
    const [TrainingCertif, setTrainingCertif] = useState("");
    const [TrainingCPF, setTrainingCPF] = useState("");
    const [TrainingLang, setTrainingLang] = useState("");
    const [TrainingPrice, setTrainingPrice] = useState("");
    const [SearchText, setSearchText] = useState("");
    const [SearchcitiesText, setSearchcitiesText] = useState("");
    const [result, setResult] = useState("");
    const [myApiResponse, setmyApiResponse] = useState("false");
    const [displayAllClasses, setdisplayAllClasses] = useState("0");
    const [showelement, setshowelement] = useState("init");
    const [country_code, setcountry_code] = useState("FR");
    const [country_name, setcountry_name] = useState("France");
    const [city, setcity] = useState("Paris");
    const [postal, setpostal] = useState("75001");
    const [latitude, setlatitude] = useState("48.861000061035156");
    const [longitude, setlongitude] = useState("2.3380000591278076");
    const [IPv4, setIPv4] = useState("172.71.122.128");
    const [state, setstate] = useState("France");
    const [userIp, setuserIp] = useState("172.71.122.128");
    const [currentPage, setCurrentPage] = useState(1);
    const [currentPage2, setCurrentPage2] = useState(1);
    const [fin, setfin] = useState(0);
    const [ismobilephone, setismobilephone] = useState();
    const [TrainingDistanciel, setTrainingDistanciel] = useState();
    const textInput = useRef(null);
    const scrollDiv = useRef(null);

    const [url_subdomain, seturl_subdomain] = useState(window.location.host.split(".")[0]);


    const [textplaceholder, settextplaceholder] = useState("");
    const [empltysearch, setempltysearch] = useState("1");
    const [empltycitiessearch, setempltycitiessearch] = useState("1");

    const [filtredistance, setfiltredistance] = useState("0");
    const continent = ['oui', 'non'];
    const [selectedcontinent, setselectedcontinent] = useState("");
    const [newresult, setnewresult] = useState();
    const stored_user = getCookie('tokenmysych');
    const history = useHistory();
    const [besoinaiderecherche, setbesoinaiderecherche] = useState("");
    const [istrier, setistrier] = useState();
    const [selectmetier, setselectmetier] = useState();
    const [initAllfiter, setinitAllfiter] = useState();
    const testDivRef = useRef(null);
    const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']);
    const inputEl = useRef(null);




    const url = process.env.REACT_APP_API_URL + "myclass/api/add_user_account/";
    const {
        register,
        formState: { errors },
        handleSubmit,
        watch,
    } = useForm();
    const pwd = useRef({});
    pwd.current = watch("pwd", "");



    const onSubmit = async (data) => {

        searchFunction();
    };

    const [Trainingdistance, setTrainingdistance] = useState(0);
    const handleInput = (e) => {
        setTrainingdistance(e.target.value);
    }

    const [Trainingduration, setTrainingduration] = useState(0);
    const handleInputDuration = (e) => {
        setTrainingduration(e.target.value);
    }


    function showdisplayfilter(event) {

        if (showelement == "true") {
            setshowelement("false");
            document.getElementById('block_partner').style.top = "5200px"
            document.getElementById('pieddepage_v2').style.top = "5800px"
        }
        else if (showelement == "false") {
            setshowelement("true");
            document.getElementById('block_partner').style.top = "6300px"
            document.getElementById('pieddepage_v2').style.top = "6800px"
        }


    }

    function clearsearchtext(event) {
        setSearchText("");
        setResult([]);
        document.getElementById("SearchText").value = "";
        setempltysearch("1")
        setbesoinaiderecherche("");
        settext("");
        DisplayXfirstClas();
    }

    const [suggestion2, setsuggestion2] = useState([]);
    const [suggestioncities, setsuggestioncities] = useState([]);

    function SearchTextHandle(event) {
        setempltysearch("0");
        setSearchText(event.target.value);

        var val = String(event.target.value).toLocaleLowerCase();
        let matches = [];
        // 13/01 : A faire absolument. j'ai bloqué car bug d'affichage (pas au bon endroit)

        if (String(val).length > 2) {
            matches = suggestedwords.filter(usr => {
                //alert(JSON.parse(usr).name );
                const regex = new RegExp(`${val}`, "gi");
                return JSON.parse(usr).name.match(regex);
            }

            )

        }

        //console.log("matches = " + matches);
        setsuggestion2(matches);
        settext(event.target.value);
    }

    function SearchcitiesHandle(event) {
        setempltycitiessearch("0");
        setSearchcitiesText(event.target.value);

        var val = String(event.target.value).toLocaleLowerCase().trimStart();
        const regex = new RegExp(`^${val}`, "gi");

        let matches = [];

        if (String(val).length > 2) {
            matches = suggestedcities.filter(usr => {
                return JSON.parse(usr).ville.match(regex);
            })
        }

        //console.log("matches = " + matches);
        setsuggestioncities(matches);
        setcities(event.target.value);

    }


    const [v1, setv1] = useState();
    const [v2, setv2] = useState();


    function TrainingSupportHandle(event) {
        setsupportchecked("1");
        var toto = "";
        var filtre1 = "";
        var filtre2 = "";
        var filtre3 = "";

        var crit_TrainingSupport = "";
        var crit_TrainingSupport22 = "";


        if (document.getElementById("supoort_list_derou")) {
            crit_TrainingSupport = document.getElementById("supoort_list_derou").value;

            //console.log("crit_TrainingSupport = ", crit_TrainingSupport);

            if (crit_TrainingSupport.length > 0) {
                filtre1 = result.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
                setv11(filtre1);
            }
            else if (crit_TrainingSupport.length <= 0) {
                /* l'utilisateur a choisi d'annuler le filter */
                annulefiltresupportchecked();
                return;
                //filtre1 = result;
                //setv11(filtre1);
            }
        }

        /*
        
        
        
                if (document.querySelector('input[name="TrainingSupport"]:checked')) {
                    crit_TrainingSupport = document.querySelector('input[name="TrainingSupport"]:checked').value;
                    if (crit_TrainingSupport.length > 0) {
                        filtre1 = result.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
                        setv11(filtre1);
                    }
                    else if (crit_TrainingSupport.length <= 0 || String(crit_TrainingSupport) === String("NA")) {
                        filtre1 = result;
                        setv11(filtre1);
                    }
        
                }
        */


        var crit_TrainingCertif = "";
        if (document.querySelector('input[name="TrainingCertif"]:checked')) {
            crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
            if (crit_TrainingCertif.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);

        }

        // recuperation du filtre  du type (cours, tuto, etc)
        var crit_TrainingType = "";
        if (document.querySelector('input[name="TrainingType"]:checked')) {
            crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value;
            if (crit_TrainingType.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);

        }

        // recuperation du filtre de la distance
        var crit_Trainingdistance = "";
        if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
            crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value;
            if (crit_Trainingdistance.length > 0) {
                // filtre presentiel = 1
                if (String(crit_Trainingdistance) === String("1")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
                    setv11(filtre1);

                }
                else if (String(crit_Trainingdistance) === String("0")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
                    setv11(filtre1);
                }
            }
        }
        // Recup du filtre de prix
        var crit_TrainingPrice = range_price.min + ":" + range_price.max;

        if (range_price.min && range_price.max) {
            filtre1 = filtre1.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
                Number(JSON.parse(maformation).price) <= Number(range_price.max)
            );

            setv11(filtre1);
        }


        setnewresult(filtre1);

        //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET  crit_TrainingSupport = " + crit_TrainingSupport + "  ET crit_TrainingType = " + crit_TrainingType);
        //console.log("############################  filtre1 = " + filtre1);
        setCurrentPage2(1);
        //console.log(" ????????????????????????????filtre2 = "+filtre2);

    }



    function TrainingCertifHandle(event) {

        var ele = document.querySelector('input[name="TrainingCertif"]:checked').value

        var toto = "";
        var filtre1 = "";
        var filtre2 = "";
        var filtre3 = "";

        setcertifchecked("");
        var crit_TrainingCertif = "";
        if (document.querySelector('input[name="TrainingCertif"]:checked')) {
            setcertifchecked("1");
            crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value
            if (crit_TrainingCertif.length > 0) {
                //alert(" laa = " + crit_TrainingCertif);
                //console.log(result)
                filtre1 = result.filter((maformation) => String(JSON.parse(maformation).certif) === String(crit_TrainingCertif));
                setv11(filtre1);
            }

        } else {

            filtre1 = result;
            setv11(filtre1);
        }

        /*
                // recuperation du filtre  du support
                var crit_TrainingSupport = "";
                if (document.querySelector('input[name="TrainingSupport"]:checked')) {
                    crit_TrainingSupport = document.querySelector('input[name="TrainingSupport"]:checked').value
                    if (crit_TrainingSupport.length > 0)
                        filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
        
                }
        */
        // recuperation du filtre  du support
        var crit_TrainingSupport = "";
        if (document.getElementById("supoort_list_derou")) {
            crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
            if (crit_TrainingSupport.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);

        }


        // recuperation du filtre  du CPF
        var crit_TrainingCPF = "";
        if (document.querySelector('input[name="TrainingCPF"]:checked')) {
            crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value
            if (crit_TrainingCPF.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);

        }


        // recuperation du filtre  du type
        var crit_TrainingType = "";
        if (document.querySelector('input[name="TrainingType"]:checked')) {
            crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value
            if (crit_TrainingType.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingType);

        }

        // recuperation du filtre de la distance
        var crit_Trainingdistance = "";
        if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
            crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
            if (crit_Trainingdistance.length > 0) {
                // filtre presentiel = 1
                if (String(crit_Trainingdistance) === String("1")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
                    setv11(filtre1);

                }
                else if (String(crit_Trainingdistance) === String("0")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
                    setv11(filtre1);
                }
            }

        }

        // Recup du filtre de prix
        var crit_TrainingPrice = range_price.min + ":" + range_price.max;

        if (range_price.min && range_price.max) {
            filtre1 = filtre1.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
                Number(JSON.parse(maformation).price) <= Number(range_price.max)
            );

            setv11(filtre1);
        }


        setnewresult(filtre1);
        //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET  crit_TrainingSupport = " + crit_TrainingSupport + "  ET crit_TrainingType = " + crit_TrainingType);
        //console.log("############################  filtre1 = " + filtre1);
        setCurrentPage2(1);
        //console.log(" ????????????????????????????filtre2 = "+filtre2);


        return;
    }



    // Pour le CPF
    const [cpfchecked, setcpfchecked] = useState();
    function TrainingCPFHandle(event) {

        var ele = document.querySelector('input[name="TrainingCPF"]:checked').value
        var myelement;

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


        var toto = "";
        var filtre1 = "";
        var filtre2 = "";
        var filtre3 = "";

        setcpfchecked("");
        var crit_TrainingCPF = "";
        if (document.querySelector('input[name="TrainingCPF"]:checked')) {
            setcpfchecked("1");
            crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value
            if (crit_TrainingCPF.length > 0) {
                //alert(" crit_TrainingCPF = " + crit_TrainingCPF);

                filtre1 = result.filter((maformation) => String(JSON.parse(maformation).cpf) === String(crit_TrainingCPF));
                setv11(filtre1);
                //console.log(" #### ",filtre1);
            }

        } else {

            filtre1 = result;
            setv11(filtre1);
        }

        // recuperation du filtre  du certificat
        var crit_TrainingCertif = "";
        if (document.querySelector('input[name="TrainingCertif"]:checked')) {
            crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value
            if (crit_TrainingCertif.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);

        }


        // recuperation du filtre  du support
        var crit_TrainingSupport = "";
        if (document.getElementById("supoort_list_derou")) {
            crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
            if (crit_TrainingSupport.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);

        }


        // recuperation du filtre  du type
        var crit_TrainingType = "";
        if (document.querySelector('input[name="TrainingType"]:checked')) {
            crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value
            if (crit_TrainingType.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingType);

        }

        // recuperation du filtre de la distance
        var crit_Trainingdistance = "";
        if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
            crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
            if (crit_Trainingdistance.length > 0) {
                // filtre presentiel = 1
                if (String(crit_Trainingdistance) === String("1")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
                    setv11(filtre1);

                }
                else if (String(crit_Trainingdistance) === String("0")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
                    setv11(filtre1);
                }
            }



        }

        // Recup du filtre de prix
        var crit_TrainingPrice = range_price.min + ":" + range_price.max;

        if (range_price.min && range_price.max) {
            filtre1 = filtre1.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
                Number(JSON.parse(maformation).price) <= Number(range_price.max)
            );

            setv11(filtre1);
        }


        setnewresult(filtre1);
        //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET  crit_TrainingSupport = " + crit_TrainingSupport + "  ET crit_TrainingType = " + crit_TrainingType);
        //console.log("############################  filtre1 = " + filtre1);
        setCurrentPage2(1);
        //console.log(" ????????????????????????????filtre2 = "+filtre2);
        if (myelement) {
            myelement.scrollIntoView({ behavior: 'smooth' });
        }

        return;
    }


    // END PR CPF
    function TrainingTypeHandle(event) {

        settypechecked("1");
        var toto = "";
        var filtre1 = "";
        var filtre2 = "";
        var filtre3 = "";

        var myelement;

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

        var crit_TrainingPrice = "";

        var crit_TrainingType = "";
        if (document.querySelector('input[name="TrainingType"]:checked')) {
            crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value
            if (crit_TrainingType.length > 0) {
                filtre1 = result.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);
                setv11(filtre1);
            }

        } else {

            filtre1 = result;
            setv11(filtre1);
        }

        // recuperation du filtre  du support
        var crit_TrainingSupport = "";
        if (document.getElementById("supoort_list_derou")) {
            crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
            if (crit_TrainingSupport.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);

        }


        // recuperation du filtre  du CPF
        var crit_TrainingCPF = "";
        if (document.querySelector('input[name="TrainingCPF"]:checked')) {
            crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value
            if (crit_TrainingCPF.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);

        }

        // recuperation du filtre  du certificat
        var crit_TrainingCertif = "";
        if (document.querySelector('input[name="TrainingCertif"]:checked')) {
            crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value
            if (crit_TrainingCertif.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);

        }

        // recuperation du filtre de la distance
        var crit_Trainingdistance = "";
        if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
            crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
            if (crit_Trainingdistance.length > 0) {
                // filtre presentiel = 1
                if (String(crit_Trainingdistance) === String("1")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
                    setv11(filtre1);

                }
                else if (String(crit_Trainingdistance) === String("0")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
                    setv11(filtre1);
                }
            }

        }

        // Recup du filtre de prix
        var crit_TrainingPrice = range_price.min + ":" + range_price.max;

        if (range_price.min && range_price.max) {
            filtre1 = filtre1.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
                Number(JSON.parse(maformation).price) <= Number(range_price.max)
            );

            setv11(filtre1);
        }


        setnewresult(filtre1);
        //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET  crit_TrainingSupport = " + crit_TrainingSupport + "  ET crit_TrainingType = " + crit_TrainingType);
        //console.log("############################  filtre1 = " + filtre1);
        setCurrentPage2(1);
        //console.log(" ????????????????????????????filtre2 = "+filtre2);

        if (myelement) {
            // 👇 Will scroll smoothly to the top of the next section
            myelement.scrollIntoView({ behavior: 'smooth' });

        }


        return;





    }


    function TrainingLangHandle(event) {
        setTrainingLang(event.target.value);
        alert("newresult newresultnewresultnewresult = " + newresult);
    }


    function TrainingPriceHandle(event) {


        var crit_TrainingPrice = range_price.min + ":" + range_price.max;

        setTrainingPrice(event.target.value);
        var toto = "";
        var filtre1 = "";


        var crit_TrainingPrice = range_price.min + ":" + range_price.max;

        var myprices = crit_TrainingPrice.split(':');
        if (range_price.min && range_price.max) {
            filtre1 = result.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
                Number(JSON.parse(maformation).price) <= Number(range_price.max)
            );
            //console.log(" PRICEEEEEEEEEEEEEEEE = "+filtre1);
            setv11(filtre1);
        }
        else {
            //alert(" Annulation du filtre prix");
            filtre1 = result;
            setv11(filtre1);
        }



        // Recuperation des autres filtres.
        // recuperation du filtre  du support
        var crit_TrainingSupport = "";
        if (document.getElementById("supoort_list_derou")) {
            crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
            if (crit_TrainingSupport.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
        }

        // recuperation du filtre  du CPF
        var crit_TrainingCPF = "";
        if (document.querySelector('input[name="TrainingCPF"]:checked')) {
            crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value
            if (crit_TrainingCPF.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);

        }


        // recuperation du filtre  du certification
        var crit_TrainingCertif = "";
        if (document.querySelector('input[name="TrainingCertif"]:checked')) {
            crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
            if (crit_TrainingCertif.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
        }

        // recuperation du filtre  du type (cours, tuto, etc)
        var crit_TrainingType = "";
        if (document.querySelector('input[name="TrainingType"]:checked')) {
            crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value;
            if (crit_TrainingType.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);
        }

        // recuperation du filtre de la distance
        var crit_Trainingdistance = "";
        if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
            crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value;
            if (crit_Trainingdistance.length > 0) {
                // filtre presentiel = 1
                if (String(crit_Trainingdistance) === String("1")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
                    setv11(filtre1);

                }
                else if (String(crit_Trainingdistance) === String("0")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
                    setv11(filtre1);
                }
            }

        }


        setnewresult(filtre1);
        setCurrentPage2(1);

    }


    // Traitement du filtre presentiel / distantiel
    function TrainingDistancielHandle(event) {


        isonsite();
        setlieuchecked("1");
        var toto = "";
        var filtre1 = "";
        var filtre0 = [];
        var filtre01 = [];
        var my_ville = "";
        var my_cp = "";

        if (document.getElementById("ville")) {
            my_ville = crit_TrainingSupport = document.getElementById("ville").value;
            my_ville = my_ville.trim();

        }

        if (document.getElementById("zip_code")) {
            my_cp = crit_TrainingSupport = document.getElementById("zip_code").value;
            my_cp = my_cp.trim();

        }

        var crit_Trainingdistance = "";
        // Recuperation du filtre principale modifié dans ce event (distance)
        if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
            crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value;
            //alert("crit_Trainingdistance = " + crit_Trainingdistance);
            if (crit_Trainingdistance.length > 0) {
                // filtre presentiel = 1

                if (String(crit_Trainingdistance) === String("1")) {

                    filtre1 = result.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
                    setv11(filtre1);

                }
                else if (String(crit_Trainingdistance) === String("0")) {
                    filtre1 = result.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");

                    // Traitement du nom de la ville
                    if (my_ville.length > 3) {

                        var filtre2 = filtre1.map(obj => {

                            if (JSON.parse(obj).datelieu) {

                                var tmp = JSON.parse(obj).datelieu.length
                                var i = 0;
                                while (i < tmp) {
                                    //console.log(JSON.parse(obj).datelieu[i]);
                                    //console.log(" ville =" + JSON.parse(obj).datelieu[i].ville)
                                    if (JSON.parse(obj).datelieu[i].ville === my_ville) {
                                        return obj
                                    }
                                    i++;
                                }
                            }

                        });

                        var filtre3 = filtre2.filter(function (element) {
                            return element !== undefined;
                        });


                        filtre1 = filtre3;
                    }

                    // Traitement du zip code
                    if (my_cp.length > 2) {

                        var filtre2 = filtre1.map(obj => {

                            if (JSON.parse(obj).datelieu) {

                                var tmp = JSON.parse(obj).datelieu.length
                                var i = 0;
                                while (i < tmp) {
                                    //console.log(JSON.parse(obj).datelieu[i]);
                                    //console.log(" ville =" + JSON.parse(obj).datelieu[i].ville)
                                    if (JSON.parse(obj).datelieu[i].code_postal.startsWith(my_cp)) {
                                        return obj
                                    }
                                    i++;
                                }
                            }

                        });

                        var filtre3 = filtre2.filter(function (element) {
                            return element !== undefined;
                        });


                        filtre1 = filtre3;
                    }

                    setv11(filtre1);


                }
                else if (String(crit_Trainingdistance) === String("NA")) {

                    filtre1 = result;
                    setv11(filtre1);
                }
            }
            else if (crit_Trainingdistance.length <= 0) {

                filtre1 = result;
                setv11(filtre1);
            }
        }


        /* Recuperation des autres filtres */
        // recuperation du filtre  du support
        var crit_TrainingSupport = "";
        if (document.getElementById("supoort_list_derou")) {
            crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
            if (crit_TrainingSupport.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
        }

        // recuperation du filtre  du certification
        var crit_TrainingCertif = "";
        if (document.querySelector('input[name="TrainingCertif"]:checked')) {
            crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
            if (crit_TrainingCertif.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
        }

        // recuperation du filtre  du CPF
        var crit_TrainingCPF = "";
        if (document.querySelector('input[name="TrainingCPF"]:checked')) {
            crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value
            if (crit_TrainingCPF.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);

        }


        // recuperation du filtre  du type (cours, tuto, etc)
        var crit_TrainingType = "";
        if (document.querySelector('input[name="TrainingType"]:checked')) {
            crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value;
            if (crit_TrainingType.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);
        }

        // Recup du filtre de prix
        var crit_TrainingPrice = range_price.min + ":" + range_price.max;

        if (range_price.min && range_price.max) {
            filtre1 = filtre1.filter((maformation) => Number(JSON.parse(maformation).price) >= Number(range_price.min) &&
                Number(JSON.parse(maformation).price) <= Number(range_price.max)
            );

            setv11(filtre1);
        }


        setnewresult(filtre1);
        setCurrentPage2(1);
    }



    function displayAllClassesHandle(event) {
        setdisplayAllClasses(event.target.checked);
        if (event.target.checked == true)
            document.getElementById("SearchText").disabled = true;
        else
            document.getElementById("SearchText").disabled = false;
    }


    const [suggestedwords, setsuggestedwords] = useState([]);
    const [texte, settext] = useState("");

    const [cities, setcities] = useState("");

    const [suggestedcities, setsuggestedcities] = useState([]);



    useEffect(() => {

        var ip = "";

        Get_Subdomain_Partner_Data(window.location.host)

        async function fetchData() {
            //  const result = await axios('https://geolocation-db.com/json/',);



            /* setuserIp("172.71.122.128");
             setcountry_code("FR");
             setcountry_name("France");
             setcity("Paris");
             setpostal("75001");
             setlatitude("48.861000061035156");
             setlongitude("2.3380000591278076");
             setIPv4("172.71.122.128");
             setstate("France");*/

            let windowWidth = window.innerWidth;

            if (showelement === "init") {

                if (windowWidth < 601) {
                    setismobilephone(true);
                    setshowelement("false");
                    settextplaceholder("Plus de 10 000 formations (gratuites, payantes...)");

                } else if (windowWidth >= 601) {
                    setismobilephone(false);
                    setshowelement("true");
                    //settextplaceholder("Ex : graphiste     ...sur plus de 10 000 formations (gratuites, payantes,..)");
                    settextplaceholder("Recherche par Titre, Description, Contenu video    ...     sur plus de 10 000 formations (gratuites, payantes,..)");
                }
            }


            if (categorie && String(categorie).length > 0) {

                getClassByMetier_categorie(categorie);

            }
            else {

                DisplayXfirstClas(result.data);

            }
        }


        fetchData();
        async function loadSuggestedWord() {
            var myurl = process.env.REACT_APP_API_URL + "myclass/api/Get_Suggested_Word/";
            //alert(" URL = "+process.env.REACT_APP_API_URL + "myclass/api/Get_Suggested_Word/");
            //console.log("  ### URL ##### = "+process.env.REACT_APP_API_URL + "myclass/api/Get_Suggested_Word/");

            var form = new FormData();

            fetch(
                process.env.REACT_APP_API_URL + "myclass/api/Get_Suggested_Word/",
                {
                    method: 'POST',

                }
            ).then((response) => response.json())
                .then((result) => {
                    //console.log('Success:', result['message']);
                    setsuggestedwords(result['message']);


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

        }
        loadSuggestedWord();

        async function loadSuggestedFrCities() {

            fetch(
                process.env.REACT_APP_API_URL + "myclass/api/Get_Suggested_Fr_Cities/",
                {
                    method: 'POST',

                }
            ).then((response) => response.json())
                .then((result) => {
                    //console.log(' loadSuggestedFrCities CITIES = Success:', result['message']);
                    setsuggestedcities(result['message']);
                    //console.log(" CITIES = " + result['message']);

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

        }
        loadSuggestedFrCities();


        async function loadDomainMetier() {

            var form = new FormData();

            fetch(
                process.env.REACT_APP_API_URL + "myclass/api/get_List_domaine_metier/",
                {
                    method: 'POST',

                }
            ).then((response) => response.json())
                .then((result) => {
                    //console.log('### loadDomainMetier Success:', result['message']);
                    setdomaine_metier(result['message']);
                    var tab = [];

                    result.message.map(obj => {

                        if (JSON.parse(obj).label) {


                            var month = {};
                            month.label = JSON.parse(obj).label;
                            month.value = JSON.parse(obj).value;
                            month.domaine = JSON.parse(obj).domaine;
                            tab.push({ ...month });
                        }
                    });


                    setdomaine_v11(tab);
                    setdomaine_v11_orig(tab);
                    setdomaine_metier(tab);
                    setdomaine_metier_orig(tab);


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

        }
        //loadDomainMetier();


        async function loadDomain() {

            var form = new FormData();

            fetch(
                process.env.REACT_APP_API_URL + "myclass/api/get_List_domaine_formation/",
                {
                    method: 'POST',

                }
            ).then((response) => response.json())
                .then((result) => {
                    //console.log('### loadDomainMetier Success:', result['message']);
                    setdomaine_metier(result['message']);

                })
                .catch((error) => {
                    console.error('loadDomain :', error);

                });

        }

        loadDomain();

        const listener = event => {
            if (event.code === "Enter" || event.code === "NumpadEnter") {
                event.preventDefault();
                searchFunction();
            }
        };
        document.addEventListener("keydown", listener);


        if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
            setuserconnected("0");
        } else {
            setuserconnected("1");
        }


        setinitAllfiter();

        whosisconnected();

        if (categorie) {
            //console.log(" ### categorie = ", categorie);
            setmymetier(categorie);
        } else {
            setmymetier();
        }

        //document.getElementById("_1234").checked = true;



    }, [initAllfiter, categorie]);


    // Cette fonction reinitialise les filtres
    function InitAllfilters() {
        //document.getElementById("TrainingCertif").selectedv = 0;
        const $select = document.querySelector('#TrainingCertif');
        $select.value = ''

        const $select2 = document.querySelector('#TrainingSupport');
        $select2.value = ''

        const $select3 = document.querySelector('#TrainingType');
        $select3.value = ''

        const $select4 = document.querySelector('#TrainingPresentiel');
        $select4.value = 'NA'

        const $select5 = document.querySelector('#TrainingPrice');
        $select5.value = 'NA'



    }

    function DisplayClassByDomainFilter() {
        var tab_domaine = list_domaine.split(";")
        //console.log("tab_domaine = ", tab_domaine)

        if (tab_domaine.length <= 0) {
            setdomaine_v11(domaine_v11_orig);
            DisplayXfirstClas();
            return;
        }



    }

    const handleChangeMetier = (event) => {

        var local_list_metier = ""


        for (let i = 0; i < event.length; i++) {
            const label = event[i].label;
            const value = event[i].value;

            local_list_metier += value + ";"

        }

        //console.log(" ### local_list_metier = ",local_list_metier);
        setlist_metier(local_list_metier);
        //TrainingMetierHandle();

        // Verification si on a une valeur
        if (event.length > 0 && local_list_metier.trim().length > 0) {
            getClassByMetier(local_list_metier);
        } else {
            DisplayClassByDomainFilter();
        }

    }



    const [domaine_metier, setdomaine_metier] = useState([]);
    const [domaine_metier_orig, setdomaine_metier_orig] = useState([]);

    const [domaine_formation, setdomaine_formation] = useState([]);

    const [domaine_v11, setdomaine_v11] = useState("");
    const [domaine_v11_orig, setdomaine_v11_orig] = useState("");

    const [list_domaine, setlist_domaine] = useState("");
    const [list_metier, setlist_metier] = useState("");

    const handleChangeDomaine = (event) => {


        if (event.length <= 0) {
            setdomaine_v11(domaine_v11_orig);
            DisplayXfirstClas();
            return;
        }
        //console.log(domaine_metier);
        //console.log(" taille =" + event.length);
        //console.log(domaine_v11_orig);

        var tt = domaine_v11_orig;
        var dump = [];
        var local_list_domaine = ""


        for (let i = 0; i < event.length; i++) {
            const label = event[i].label;
            const value = event[i].value;

            local_list_domaine += value + ";"

            tt = domaine_v11_orig.filter((maformation) => maformation.domaine === String(value));
            //console.log(" TT = ", tt);

            for (let i2 = 0; i2 < tt.length; i2++) {
                //console.log(" push de ", tt[i2])
                dump.push(tt[i2]);
            }

            setlist_domaine(local_list_domaine);
            setdomaine_v11(dump);
        }

        getClassByDomaine(local_list_domaine);



    }



    const currentTableData2 = useMemo(() => {
        if (newresult) {
            const firstPageIndex = (currentPage2 - 1) * PageSize;
            const lastPageIndex = firstPageIndex + PageSize;
            setfin(1);
            return newresult.slice(firstPageIndex, lastPageIndex);
        }


        if (result) {
            const firstPageIndex = (currentPage2 - 1) * PageSize;
            const lastPageIndex = firstPageIndex + PageSize;
            setfin(1);
            return result.slice(firstPageIndex, lastPageIndex);
        }
        else {
            return [];
            setfin(0);
        }
    }, [currentPage2]);

    function searchFunction(e) {
        // Nettoyage du resultat precedent.
        setResult([]);

        var crit_TrainingSupport = "";
        var crit_TrainingType = "";
        var crit_TrainingCertif = "";
        var crit_TrainingLang = "";
        var crit_TrainingPresentiel = "";
        var crit_TrainingPrice = "";
        var crit_TrainingDuration = "";
        var my_ville = "";

        var my_cp = "";

        var my_domaine = "";



        if (document.getElementById("searchdomain"))
            my_domaine = document.getElementById("searchdomain").value;



        //Get Criterias
        var crit_SearchText = document.getElementById("SearchText").value;

        if (document.getElementById("TrainingSupport"))
            crit_TrainingSupport = document.getElementById("TrainingSupport").value;

        if (document.getElementById("TrainingType"))
            crit_TrainingType = document.getElementById("TrainingType").value;

        if (document.getElementById("TrainingCertif"))
            crit_TrainingCertif = document.getElementById("TrainingCertif").value;
        if (crit_TrainingCertif.length == 0)
            crit_TrainingCertif = "NA";


        if (document.getElementById("TrainingLang"))
            crit_TrainingLang = document.getElementById("TrainingLang").value;

        if (document.getElementById("TrainingPresentiel"))
            crit_TrainingPresentiel = document.getElementById("TrainingPresentiel").value;

        if (document.getElementById("TrainingPrice"))
            crit_TrainingPrice = document.getElementById("TrainingPrice").value;

        if (document.getElementById("duration"))
            crit_TrainingDuration = document.getElementById("duration").value;


        if (document.getElementById("ville")) {
            my_ville = crit_TrainingSupport = document.getElementById("ville").value;

        }

        if (document.getElementById("zip_code")) {
            my_cp = crit_TrainingSupport = document.getElementById("zip_code").value;

        }


        var crit_Trainingdistance = Trainingdistance;

        //console.log(" my_domaine = ", my_domaine);

        /*console.log('SearchText = ' + crit_SearchText + ' - TrainingSupport = ' + crit_TrainingSupport +
            ' - TrainingType = ' + crit_TrainingType + ' - TrainingCertif ' + crit_TrainingCertif +
            " Langue = " + crit_TrainingLang + " TrainingPrice = " + crit_TrainingPrice +
            " - Distance = " + crit_Trainingdistance + " -- Presentiel :" + crit_TrainingPresentiel +
            " - Duration = " + crit_TrainingDuration + " - stored_user_cookie = " + stored_user);*/


        var form = new FormData();
        form.append("search_text", crit_SearchText);


        var my_local_user_connect;
        var my_local_part_connect;
        if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
            my_local_user_connect = 0;
        } else {
            my_local_user_connect = 1;
        }

        if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
            my_local_part_connect = 0;
        } else {
            my_local_part_connect = 1;
        }



        if (String(my_local_user_connect) === "1") {
            form.append("token", stored_user);
            form.append("connection_type", "user");
        }
        else if (String(my_local_part_connect) === "1") {
            form.append("token", stored_part);
            form.append("connection_type", "partner");
        }
        else {
            form.append("token", "");
            form.append("connection_type", "");
        }
        form.append("certif", crit_TrainingCertif);
        form.append("support", crit_TrainingSupport);
        form.append("type", crit_TrainingType);
        form.append("lang", crit_TrainingLang);
        form.append("price", crit_TrainingPrice);
        form.append("distance", crit_Trainingdistance);
        form.append("duration", crit_TrainingDuration);


        // Ajout des info IP user
        form.append("user_ip", IPv4);
        form.append("user_country_code", country_code);
        form.append("user_country_name", country_name);
        form.append("user_city", city);
        form.append("user_postal", postal);
        form.append("user_latitude", latitude);
        form.append("user_longitude", longitude);
        form.append("user_state", state);
        form.append("subdomain", window.location.host.split(".")[0]);


        var myurl = ""
        if (displayAllClasses == true) {
            myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_class_Given_partner_owner_recid_No_Login/";
        }
        else {
            myurl = process.env.REACT_APP_API_URL + "myclass/api/recherche_text_simple_for_partner_catalog/";

        }

        // alert("myurl = " + myurl);
        axios.post(myurl, form).then(res => {
            if (String(res.data.status) != String("false")) {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setmyApiResponse("True");
                setResult(res.data.message)

                //Verification si le resutlat est vide
                if (res.data.message.length <= 0) {
                    setbesoinaiderecherche("1");
                }
                /*if (scrollDiv.current) {
                    scrollDiv.current.scrollIntoView({ behavior: "smooth" });
                }*/

                var myelement;

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

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

            }

            else {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setmyApiResponse("False");
                //setmyApimyApiMessage("")
                //textInput.current.focus();
            }


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

        // window.scrollTo(0, 600);




    }

    // Cette fonction affiche les X premieres formations
    function DisplayXfirstClas(ip) {

        // Nettoyage du resultat precedent.
        setResult([]);



        //Get Criterias
        var crit_SearchText = "";
        var myurl = "";

        var form = new FormData();
        form.append("search_text", crit_SearchText);


        if (typeof (NewSearchText) === "undefined" || String(NewSearchText) === '') {
            crit_SearchText = "";
            myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_class_Given_partner_owner_recid_No_Login/";
            form.append("subdomain", window.location.host.split(".")[0]);

            //console.log(" ######### laaaaaaaaaaaaa subdomain = ", window.location.host.split(".")[0])


        } else {
            crit_SearchText = NewSearchText;
            myurl = process.env.REACT_APP_API_URL + "myclass/api/recherche_text_simple_for_partner_catalog/";

        }





        var my_local_user_connect;
        var my_local_part_connect;

        if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
            my_local_user_connect = 0;
        } else {
            my_local_user_connect = 1;
        }

        if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
            my_local_part_connect = 0;
        } else {
            my_local_part_connect = 1;
        }

        if (String(my_local_user_connect) === "1") {
            form.append("token", stored_user);
            form.append("connection_type", "user");
        }
        else if (String(my_local_part_connect) === "1") {
            form.append("token", stored_part);
            form.append("connection_type", "partner");
        }
        else {
            form.append("token", "");
            form.append("connection_type", "");
        }

        form.append("certif", "");
        form.append("support", "");
        form.append("type", "");
        form.append("lang", "");
        form.append("price", "");
        form.append("distance", "");
        form.append("duration", "");
        form.append("cpf", "");



        // Ajout des info IP user
        if (ip) {
            //console.log(" ### with IP");
            form.append("user_ip", ip.IPv4);
            form.append("user_country_code", ip.country_code);
            form.append("user_country_name", ip.country_name);
            form.append("user_city", ip.city);
            form.append("user_postal", ip.postal);
            form.append("user_latitude", ip.latitude);
            form.append("user_longitude", ip.longitude);
            form.append("user_state", ip.state);
        }
        else {
            //console.log(" ### with OUT IP");
            form.append("user_ip", IPv4);
            form.append("user_country_code", country_code);
            form.append("user_country_name", country_name);
            form.append("user_city", city);
            form.append("user_postal", postal);
            form.append("user_latitude", latitude);
            form.append("user_longitude", longitude);
            form.append("user_state", state);
            // alert(" rrtt ");
        }


        //alert("myurl = " + myurl);
        axios.post(myurl, form).then(res => {
            if (String(res.data.status) != String("false")) {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In DisplayXfirstClas  res.data.message = " + res.data.message);

                setmyApiResponse("True");
                setResult(res.data.message)
                // textInput.current.focus();
                setbesoinaiderecherche("");

            }
            else {
                //console.log(" In test  res.data.status = " + res.data.status);
                //console.log(" In test  res.data.message = " + res.data.message);
                setmyApiResponse("False");
                //setmyApimyApiMessage("")
                //textInput.current.focus();
            }


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


    }

    const [trier_par, settrier_par] = useState("1");

    function trier(e) {

        setistrier();
        var trierpar = ""
        if (document.getElementById("trierpar"))
            trierpar = document.getElementById("trierpar").value;

        if (String(trierpar) === String("duration")) {
            setCurrentPage2(1);
            setCurrentPage(1);

            if (typeof (newresult) === "undefined" || String(newresult) === '') {

                //console.log(" AVANT TRIE : [0].duration = " + JSON.parse(result[0]).duration + " - [1].duration = " + JSON.parse(result[1]).duration)
                result.sort(function (a, b) {
                    if (trier_par === "1")
                        return JSON.parse(a).duration - JSON.parse(b).duration;
                    else
                        return JSON.parse(b).duration - JSON.parse(a).duration;
                });

                //console.log("APRES TRIE :  [0].duration = " + JSON.parse(result[0]).duration + " - [1].duration = " + JSON.parse(result[1]).duration)

                setistrier("1");
            }
            else if (typeof (newresult) !== "undefined" || newresult.length > 0) {
                newresult.sort(function (a, b) {
                    if (trier_par === "1")
                        return JSON.parse(a).duration - JSON.parse(b).duration;
                    else
                        return JSON.parse(b).duration - JSON.parse(a).duration;
                });
            }
        }

        else if (String(trierpar) === String("price")) {
            setCurrentPage2(1);

            if (typeof (newresult) === "undefined" || String(newresult) === '') {
                //console.log(" AVANT TRIE : [0].price = " + JSON.parse(result[0]).price + " - [1].price = " + JSON.parse(result[1]).price);
                result.sort(function (a, b) {

                    if (trier_par === "1")
                        return JSON.parse(a).price - JSON.parse(b).price;
                    else
                        return JSON.parse(b).price - JSON.parse(a).price;
                });
                //console.log("APRES TRIE :  [0].price = " + JSON.parse(result[0]).price + " - [1].price = " + JSON.parse(result[1]).price);
                setistrier("2");
            }
            else if (typeof (newresult) !== "undefined" || newresult.length > 0) {
                newresult.sort(function (a, b) {
                    if (trier_par === "1")
                        return JSON.parse(a).price - JSON.parse(b).price;
                    else
                        return JSON.parse(b).price - JSON.parse(a).price;
                });
            }
        }

        else if (String(trierpar) === String("note")) {
            setCurrentPage2(1);

            if (typeof (newresult) === "undefined" || String(newresult) === '') {
                //console.log(" AVANT TRIE : [0].price = " + JSON.parse(result[0]).price + " - [1].price = " + JSON.parse(result[1]).price);
                result.sort(function (a, b) {
                    if (trier_par === "1")
                        return JSON.parse(b).note - JSON.parse(a).note;
                    else
                        return JSON.parse(a).note - JSON.parse(b).note;
                });
                //console.log("APRES TRIE :  [0].price = " + JSON.parse(result[0]).price + " - [1].price = " + JSON.parse(result[1]).price);
                setistrier("2");
            }
            else if (typeof (newresult) !== "undefined" || newresult.length > 0) {
                newresult.sort(function (a, b) {
                    if (trier_par === "1")
                        return JSON.parse(b).note - JSON.parse(a).note;
                    else
                        return JSON.parse(a).note - JSON.parse(b).note;
                });
            }
        }

        if (trier_par === "1")
            settrier_par("-1");
        else
            settrier_par("1");

    }


    function getClassByMetier_categorie(mycate) {

        var mymetier = mycate;


        // Nettoyage du resultat precedent.
        setResult([]);
        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class_by_metier/";

        /*if (mymetier === "tout") {
            //alert(" tout et sortir");
            setinitAllfiter("1");
            return;

        }*/

        var form = new FormData();
        form.append("metier", mymetier);
        form.append("token", "");


        //alert("myurl = "+myurl);
        axios.post(myurl, form).then(res => {
            if (String(res.data.status) != String("false")) {

                setmyApiResponse("True");
                setResult(res.data.message)
                //textInput.current.focus();
                setbesoinaiderecherche("");
                setnewresult("");
                //console.log(" In getClassByMetier  res.data.status = " + res.data.status);
                //console.log(" In getClassByMetier  res.data.message = " + res.data.message);
                //setnewresult(res.data.message);
                setCurrentPage2(1);
                if (scrollDiv.current) {
                    scrollDiv.current.scrollIntoView({ behavior: "smooth" });
                }

                // reinitialisation de tous les filtre

                //setmyApimyApiMessage("OK")
                //console.log("taille = "+res.data.message.length);
            }
            else {
                //console.log(" In getClassByMetier  res.data.status = " + res.data.status);
                //console.log(" In getClassByMetier  res.data.message = " + res.data.message);
                setmyApiResponse("False");
                //setmyApimyApiMessage("")
                //textInput.current.focus();
            }


        }).catch((error) => {
            console.warn(' getClassByMetier : Not good man :( mysearchtext = ');
            setmyApiResponse("False");
            //setmyApimyApiMessage("")
        })

    }


    function getClassByDomaine(List_Domaine) {

        // Nettoyage du resultat precedent.
        setResult([]);
        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class_by_domaine/";

        /*if (mymetier === "tout") {
            //alert(" tout et sortir");
            setinitAllfiter("1");
            return;

        }*/

        var form = new FormData();
        form.append("domaine", List_Domaine);
        form.append("token", "");


        //alert("myurl = "+myurl);
        axios.post(myurl, form).then(res => {
            if (String(res.data.status) != String("false")) {

                setmyApiResponse("True");
                setResult(res.data.message)
                //textInput.current.focus();
                setbesoinaiderecherche("");
                setnewresult("");
                //console.log(" In getClassByDomaine  res.data.status = " + res.data.status);
                //console.log(" In getClassByDomaine  res.data.message = " + res.data.message);
                //setnewresult(res.data.message);
                setCurrentPage2(1);
                if (scrollDiv.current) {
                    scrollDiv.current.scrollIntoView({ behavior: "smooth" });
                }

                // reinitialisation de tous les filtre

                //setmyApimyApiMessage("OK")
                //console.log("taille = "+res.data.message.length);
            }
            else {
                //console.log(" In getClassByMetier  res.data.status = " + res.data.status);
                //console.log(" In getClassByMetier  res.data.message = " + res.data.message);
                setmyApiResponse("False");
                //setmyApimyApiMessage("")
                //textInput.current.focus();
            }


        }).catch((error) => {
            console.warn(' getClassByMetier : Not good man :( mysearchtext = ');
            setmyApiResponse("False");
            //setmyApimyApiMessage("")
        })

    }

    function ReinitFilters() {
        // Reinitialisation des filtre
        annulefiltrecertif();
        annulefiltresupportchecked();
        annulefiltretypechecked();
        annulefiltrelieuchecked();
        annulefiltrecpf();
    }

    const [mymetier, setmymetier] = useState("");

    function getClassByMetier(my_liste_metier) {


        if (NewSearchText && NewSearchText.length > 2) {
            alert(" Réinitialiser les filtres pour utiliser cette fonctionalité");
            return;
        }
        var myelement;

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

        var check_metier = "";
        if (document.querySelector('input[name="metier_radio"]:checked')) {

            check_metier = document.querySelector('input[name="metier_radio"]:checked').value;
        }

        setmymetier(check_metier);
        ReinitFilters();


        if (check_metier === "tout") {
            // Nettoyage du resultat precedent.
            setResult([]);
            setnewresult("");
            //alert(" tout et sortir");

            setdomaine_v11(domaine_v11_orig);
            DisplayXfirstClas();
            //setResult([]);

            /*const pieces = window.location.href.split("/")
            const last = pieces[pieces.length - 1]
            const last2 = pieces[pieces.length - 2]

            if (last === "Recherche_new_v2" || last2 === "Recherche_new_v2") {
                console.log(" ## RELAOD");
                window.location.reload(true);
            } else {


                history.push("/Recherche_new_v2");
            }
            */
            if (myelement) {
                // 👇 Will scroll smoothly to the top of the next section
                myelement.scrollIntoView({ behavior: 'smooth' });
            }
            return;

        }



        // Nettoyage du resultat precedent.
        setResult([]);
        var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_class_by_metier/";


        var form = new FormData();
        form.append("metier", check_metier);
        form.append("token", "");

        //console.log(" recherif pour metier ", check_metier);
        //alert("myurl = "+myurl);
        axios.post(myurl, form).then(res => {
            if (String(res.data.status) != String("false")) {

                setmyApiResponse("True");
                setResult(res.data.message)
                //textInput.current.focus();
                setbesoinaiderecherche("");
                setnewresult("");
                //console.log(" In getClassByMetier  res.data.status = " + res.data.status);
                //console.log(" In getClassByMetier  res.data.message = " + res.data.message);
                //setnewresult(res.data.message);
                setCurrentPage2(1);
                if (scrollDiv.current) {
                    scrollDiv.current.scrollIntoView({ behavior: "smooth" });
                }

                // reinitialisation de tous les filtre

                //setmyApimyApiMessage("OK")
                //console.log("taille = "+res.data.message.length);
            }
            else {
                //console.log(" In getClassByMetier  res.data.status = " + res.data.status);
                //console.log(" In getClassByMetier  res.data.message = " + res.data.message);
                setmyApiResponse("False");
                //setmyApimyApiMessage("")
                //textInput.current.focus();
            }


        }).catch((error) => {
            console.warn(' getClassByMetier : Not good man :( mysearchtext = ');
            setmyApiResponse("False");
            //setmyApimyApiMessage("")
        })

        //console.log(" ICI MOVE TO ");
        if (myelement) {
            // 👇 Will scroll smoothly to the top of the next section
            myelement.scrollIntoView({ behavior: 'smooth' });
        }

    }


    const [PartnerMenu, setPartnerMenu] = React.useState(null);
    const [AccountMenu, setAccountMenu] = React.useState(null);
    const [ProduitMenu, setproduitMenu] = React.useState(null);
    const [AvisMenu, setavisMenu] = React.useState(null);



    const PartnerMenu_Close = () => {
        setPartnerMenu(null);
    };

    const AccountMenu_Close = () => {
        setAccountMenu(null);
    };


    const ProduitMenu_Close = () => {
        setproduitMenu(null);
    };

    const handlePartnerMenu = (event) => {
        setPartnerMenu(event.currentTarget);
    };

    const handleAccountMenu = (event) => {
        setAccountMenu(event.currentTarget);
    };


    const handleProduitMenu = (event) => {
        setproduitMenu(event.currentTarget);
    };




    const handleClose_Account = () => {
        //alert(" my account");
        setAccountMenu(null);
    };

    const handleBlogMenu = (event) => {
        setproduitMenu(event.currentTarget);
        history.push("/Recherche-Article-formation")
    };

    const handleQuisommesNousMenu = (event) => {
        setproduitMenu(event.currentTarget);
        history.push("/qui-sommes-nous")
    };

    const handleAccountConnexion = () => {
        setAccountMenu(null);
        history.push("/Connexion")
    };

    const handleMyAccount = () => {
        setAccountMenu(null);
        history.push("/mysy-user-account")
    };


    const handleMyPartnerAccount = () => {
        setAccountMenu(null);
        history.push("/Partner")
    };


    const handleAccountCreation = () => {
        setAccountMenu(null);
        history.push("/create_account")
    };

    const handlePartnerConnexion = () => {
        setAccountMenu(null);
        history.push("/PartnerLogin")
    };


    const handleProduitService = () => {
        setproduitMenu(null);
        history.push("/tarifs_produits_services/")
    };

    const handleAvis = () => {
        setavisMenu(null);
        history.push("/Recherche-Article-formation")
    };

    function test() {
        alert(" coucou");
    }


    const [someoneconnected, setsomeoneconnected] = useState("0");
    const [partnerconnected, setpartnerconnected] = useState("0");
    const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']);

    const stored_part = getCookie('tokenmysypart');



    function whosisconnected() {
        var local_user_connect = 0;
        var local_part_connect = 0;

        if (typeof (stored_user) === "undefined" || String(stored_user) === '') {
            setuserconnected("0");
            local_user_connect = 0;
        } else {
            setuserconnected("1");
            setsomeoneconnected("1");
            local_user_connect = 1;
            //alert(" user connected OK");
        }

        if (typeof (stored_part) === "undefined" || String(stored_part) === '') {
            setpartnerconnected("0");
            local_part_connect = 0;
        } else {
            setpartnerconnected("1");
            setsomeoneconnected("1");
            local_part_connect = 1;
            //alert(" partner connected OK");
        }
    }

    function handleAccountLogout() {

        if (String(userconnected) === String("1")) {
            user_logout();
        }
        else if (String(partnerconnected) === String("1")) {
            part_logout();
        }
    }

    function user_logout_confirmation() {
        /* si c'est une connexion partner qui est active */
        if (typeof (stored_user) != "undefined") {
            setCookie("tokenmysych", "");
        }
        history.push("/recherche-formation");
    }

    function user_logout() {
        confirmAlert({
            title: '',
            message: 'Confirmez la deconnexion (user)',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => user_logout_confirmation()
                },
                {
                    label: 'Non',
                    onClick: () => { return }
                }
            ]
        });
    }




    function handleAccountConnexion_v2() {

        if (String(userconnected) === String("1")) {
            handleMyAccount();
        }
        else if (String(partnerconnected) === String("1")) {
            handleMyPartnerAccount();
        }
    }


    function part_logout_confirmation() {
        /* si c'est une connexion partner qui est active */
        if (typeof (stored_part) != "undefined") {
            const stored_cookie = getCookie('tokenmysypart');
            var acces_right_token_name = stored_cookie + "_uar";

            setpartCookie("tokenmysypart", "", { path: '/' });

            setpartCookie(acces_right_token_name, "", { path: '/' });
            removeCookie(acces_right_token_name, { path: '/' });

        }
        setsomeoneconnected("0");
        setDialog_1_open(false);
        history.push("/recherche-formation");
    }

    function part_logout() {
        confirmAlert({
            title: '',
            message: 'Confirmez la deconnexion (pro)',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => part_logout_confirmation()
                },
                {
                    label: 'Non',
                    onClick: () => { return }
                }
            ]
        });
    }

    const [range_price, setrange_price] = useState({ min: 0, max: 9999, });
    function rangevalue() {
        alert(range_price.max + "   -   " + range_price.min);
        //console.log(" range = " + range_price);
    }

    const [trainingonsite, settrainingonsite] = useState()
    function isonsite() {
        settrainingonsite(document.querySelector('input[name="TrainingPresentiel"]:checked').value)

    }

    const [certifchecked, setcertifchecked] = useState();
    function annulefiltrecertif() {
        if (document.querySelector('input[name="TrainingCertif"]:checked')) {
            var radio = document.querySelector('input[name="TrainingCertif"]:checked');
            radio.checked = false;
            setcertifchecked("");

            var toto = "";
            var filtre1 = "";


            // Reinitialisation
            filtre1 = result;
            setv11(filtre1);


            // recuperation du filtre  du support
            var crit_TrainingSupport = "";
            if (document.getElementById("supoort_list_derou")) {
                crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
                if (crit_TrainingSupport.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);

            }

            // recuperation du filtre  du CPF
            var crit_TrainingCPF = "";
            if (document.querySelector('input[name="TrainingCPF"]:checked')) {
                crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value;
                if (crit_TrainingCPF.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);

            }

            // recuperation du filtre  du type
            var crit_TrainingType = "";
            if (document.querySelector('input[name="TrainingType"]:checked')) {
                crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value
                if (crit_TrainingType.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingType);

            }

            // recuperation du filtre de la distance
            var crit_Trainingdistance = "";
            if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
                crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
                if (crit_Trainingdistance.length > 0) {
                    // filtre presentiel = 1
                    if (String(crit_Trainingdistance) === String("1")) {
                        filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
                        setv11(filtre1);

                    }
                    else if (String(crit_Trainingdistance) === String("0")) {
                        filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
                        setv11(filtre1);
                    }
                }

            }

            var crit_TrainingPrice = range_price.min + ":" + range_price.max;

            setnewresult(filtre1);
            //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET  crit_TrainingSupport = " + crit_TrainingSupport + "  ET crit_TrainingType = " + crit_TrainingType);
            //console.log("############################  filtre1 = " + filtre1);
            setCurrentPage2(1);
            //console.log(" ????????????????????????????filtre2 = "+filtre2);

        }
        return;


    }


    function annulefiltrecpf() {
        if (document.querySelector('input[name="TrainingCPF"]:checked')) {
            var radio = document.querySelector('input[name="TrainingCPF"]:checked');
            radio.checked = false;
            setcpfchecked("");

            var toto = "";
            var filtre1 = "";


            // Reinitialisation
            filtre1 = result;
            setv11(filtre1);

            // recuperation du filtre  de la certification
            var crit_TrainingCertif = "";
            if (document.querySelector('input[name="TrainingCertif"]:checked')) {
                crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
                if (crit_TrainingCertif.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);

            }

            // recuperation du filtre  du support
            var crit_TrainingSupport = "";
            if (document.getElementById("supoort_list_derou")) {
                crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
                if (crit_TrainingSupport.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);

            }


            // recuperation du filtre  du type
            var crit_TrainingType = "";
            if (document.querySelector('input[name="TrainingType"]:checked')) {
                crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value
                if (crit_TrainingType.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingType);

            }

            // recuperation du filtre de la distance
            var crit_Trainingdistance = "";
            if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
                crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
                if (crit_Trainingdistance.length > 0) {
                    // filtre presentiel = 1
                    if (String(crit_Trainingdistance) === String("1")) {
                        filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
                        setv11(filtre1);

                    }
                    else if (String(crit_Trainingdistance) === String("0")) {
                        filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
                        setv11(filtre1);
                    }
                }

            }

            var crit_TrainingPrice = range_price.min + ":" + range_price.max;

            setnewresult(filtre1);
            //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET  crit_TrainingSupport = " + crit_TrainingSupport + "  ET crit_TrainingType = " + crit_TrainingType);
            //console.log("############################  filtre1 = " + filtre1);
            setCurrentPage2(1);
            //console.log(" ????????????????????????????filtre2 = "+filtre2);

        }
        return;


    }

    const [supportchecked, setsupportchecked] = useState();
    function annulefiltresupportchecked() {
        //var radio = document.querySelector('input[name="TrainingSupport"]:checked');
        //radio.checked = false;
        setsupportchecked("");
        var crit_TrainingSupport = "";
        var toto = "";
        var filtre1 = "";



        // Reinitialisation
        filtre1 = result;
        setv11(filtre1);

        // recuperation du filtre  de la certification
        var crit_TrainingCertif = "";
        if (document.querySelector('input[name="TrainingCertif"]:checked')) {
            crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
            if (crit_TrainingCertif.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);

        }


        // recuperation du filtre  du CPF
        var crit_TrainingCPF = "";
        if (document.querySelector('input[name="TrainingCPF"]:checked')) {
            crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value;
            if (crit_TrainingCPF.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);

        }


        // recuperation du filtre  du type (cours, tuto, etc)
        var crit_TrainingType = "";
        if (document.querySelector('input[name="TrainingType"]:checked')) {
            crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value;
            if (crit_TrainingType.length > 0)
                filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);

        }

        // recuperation du filtre de la distance
        var crit_Trainingdistance = "";
        if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
            crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value;
            if (crit_Trainingdistance.length > 0) {
                // filtre presentiel = 1
                if (String(crit_Trainingdistance) === String("1")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
                    setv11(filtre1);

                }
                else if (String(crit_Trainingdistance) === String("0")) {
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
                    setv11(filtre1);
                }
            }
        }
        // Recup du filtre de prix
        var crit_TrainingPrice = "";

        setnewresult(filtre1);

        //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET  crit_TrainingSupport = " + crit_TrainingSupport + "  ET crit_TrainingType = " + crit_TrainingType);
        //console.log("############################  filtre1 = " + filtre1);
        setCurrentPage2(1);
        //console.log(" ????????????????????????????filtre2 = "+filtre2);
    }


    const [typechecked, settypechecked] = useState();
    function annulefiltretypechecked() {

        if (document.querySelector('input[name="TrainingType"]:checked')) {
            var radio = document.querySelector('input[name="TrainingType"]:checked');
            radio.checked = false;
            settypechecked("");

            var toto = "";
            var filtre1 = "";
            var filtre2 = "";
            var filtre3 = "";



            // Reinitialisation 
            filtre1 = result;
            setv11(filtre1);
            //alert("rinitialisation")
            ;

            // recuperation du filtre  du support
            var crit_TrainingSupport = "";
            if (document.getElementById("supoort_list_derou")) {
                crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
                if (crit_TrainingSupport.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);

            }

            // recuperation du filtre  du certificat
            var crit_TrainingCertif = "";
            if (document.querySelector('input[name="TrainingCertif"]:checked')) {
                crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value
                if (crit_TrainingCertif.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);

            }

            // recuperation du filtre  du CPF
            var crit_TrainingCPF = "";
            if (document.querySelector('input[name="TrainingCPF"]:checked')) {
                crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value;
                if (crit_TrainingCPF.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);

            }


            // recuperation du filtre de la distance
            var crit_Trainingdistance = "";
            if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
                crit_Trainingdistance = document.querySelector('input[name="TrainingPresentiel"]:checked').value
                if (crit_Trainingdistance.length > 0) {
                    // filtre presentiel = 1
                    if (String(crit_Trainingdistance) === String("1")) {
                        filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.distantiel === "1");
                        setv11(filtre1);

                    }
                    else if (String(crit_Trainingdistance) === String("0")) {
                        filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).presentiel.presentiel === "1");
                        setv11(filtre1);
                    }
                }

            }


            setnewresult(filtre1);
            //alert("crit_TrainingCertif = " + crit_TrainingCertif + " ET  crit_TrainingSupport = " + crit_TrainingSupport + "  ET crit_TrainingType = " + crit_TrainingType);
            //console.log("############################  filtre1 = " + filtre1);
            setCurrentPage2(1);
            //console.log(" ????????????????????????????filtre2 = "+filtre2);
        }
        return;

    }


    const [lieuchecked, setlieuchecked] = useState();
    function annulefiltrelieuchecked() {
        if (document.querySelector('input[name="TrainingPresentiel"]:checked')) {
            var radio = document.querySelector('input[name="TrainingPresentiel"]:checked');
            radio.checked = false;
            setlieuchecked("");
            var toto = "";
            var filtre1 = "";
            settrainingonsite('');



            //reinitialisation des filtres
            filtre1 = result;
            setv11(filtre1);

            // Annulation de la suggestion de villes
            setsuggestioncities([]);


            /* Recuperation des autres filtres */
            // recuperation du filtre  du support
            var crit_TrainingSupport = "";
            if (document.getElementById("supoort_list_derou")) {
                crit_TrainingSupport = document.getElementById("supoort_list_derou").value;
                if (crit_TrainingSupport.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).support === crit_TrainingSupport);
            }

            // recuperation du filtre  du certification
            var crit_TrainingCertif = "";
            if (document.querySelector('input[name="TrainingCertif"]:checked')) {
                crit_TrainingCertif = document.querySelector('input[name="TrainingCertif"]:checked').value;
                if (crit_TrainingCertif.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).certif === crit_TrainingCertif);
            }

            // recuperation du filtre  du CPF
            var crit_TrainingCPF = "";
            if (document.querySelector('input[name="TrainingCPF"]:checked')) {
                crit_TrainingCPF = document.querySelector('input[name="TrainingCPF"]:checked').value;
                if (crit_TrainingCPF.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).cpf === crit_TrainingCPF);

            }

            // recuperation du filtre  du type (cours, tuto, etc)
            var crit_TrainingType = "";
            if (document.querySelector('input[name="TrainingType"]:checked')) {
                crit_TrainingType = document.querySelector('input[name="TrainingType"]:checked').value;
                if (crit_TrainingType.length > 0)
                    filtre1 = filtre1.filter((maformation) => JSON.parse(maformation).type === crit_TrainingType);
            }
            setnewresult(filtre1);
            setCurrentPage2(1);
        }
    }

    function OnblurHandle(e) {
        setTimeout(() => {
            setsuggestion2([])
        }, 100)
    }


    function OnSuggestionHandler(text) {
        var val = text;
        settext(val);
    }

    function OnCitiesSuggestionHandler(text) {
        var val = text;
        setcities(val);
        document.getElementById("ville").value = val;
        LeaveCity();
        // Annulation de la suggestion de villes
        setsuggestioncities([]);
    }

    function publiecatalogue() {

        history.push("/Partner", { mysy_arg: 'partner' });
    }

    function LeaveCity() {
        TrainingDistancielHandle();
    }

    function LeaveZipCode() {
        TrainingDistancielHandle();
    }

    const Recherche_Domaine_Metier = (event) => {

        //console.log(" ### liste domaine = ", list_domaine);
        //console.log(" ### liste metier = ", list_metier);

    }

    const [displayAllmetiers, setdisplayAllmetiers] = useState();

    function DisplayAllmetier() {
        if (displayAllmetiers)
            setdisplayAllmetiers(false);
        else
            setdisplayAllmetiers(true);
    }


    function init_Filter_Change_url() {
        history.push("/");
        window.location.reload();

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

    }

    function message_to_init_Filter_Change_url() {
        alert(" Réinitialiser les filtres pour réactivier cette fonctionnalité")

    }


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


    //console.log(" c'est url_subdomain ", url_subdomain);

    const [subdomain_recid, setsubdomain_recid] = useState("");
    const [my_theme_code, setmy_theme_code] = useState("");


    const [New_Get_Subdomain_Partner_Data_result, setNew_Get_Subdomain_Partner_Data_result] = useState([]);

    const [Get_Subdomain_Partner_Data_api, setGet_Subdomain_Partner_Data_api] = useState();
    const [Get_Subdomain_Partner_Data_message, setGet_Subdomain_Partner_Data_message] = useState();
    const [Get_Subdomain_Partner_Data_result, setGet_Subdomain_Partner_Data_result] = useState();
    function Get_Subdomain_Partner_Data(local_url_subdomain) {

        let domain = local_url_subdomain;
        if (local_url_subdomain.includes("://")) {
            domain = url.split('://')[1];
        }

        console.log(" ### local_url_subdomain = ", local_url_subdomain);

        const subdomain = domain.split('.')[0];

        console.log(" ### subdomain = ", subdomain);

        var form = new FormData();

        form.append("subdomain", subdomain);

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

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

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

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

                    //---

                    var _id = JSON.parse(x)._id;
                    var recid = JSON.parse(x).recid;
                    var nom = JSON.parse(x).nom;

                    var catalog_pub_logo = JSON.parse(x).catalog_pub_logo;
                    var catalog_pub_banniere_img = JSON.parse(x).catalog_pub_banniere_img;

                    var theme_code = JSON.parse(x).theme_code;

                    var catalog_pub_message_1_txt = JSON.parse(x).catalog_pub_message_1_txt;

                    var catalog_pub_cgv_pdf = ""
                    if (JSON.parse(x).catalog_pub_cgv_pdf)
                        catalog_pub_cgv_pdf = JSON.parse(x).catalog_pub_cgv_pdf;


                    var catalog_pub_cgu_pdf = ""
                    if (JSON.parse(x).catalog_pub_cgu_pdf)
                        catalog_pub_cgu_pdf = JSON.parse(x).catalog_pub_cgu_pdf;

                    var catalog_pub_mention_legale_pdf = ""
                    if (JSON.parse(x).catalog_pub_mention_legale_pdf)
                        catalog_pub_mention_legale_pdf = JSON.parse(x).catalog_pub_mention_legale_pdf;



                    var catalog_pub_message_1_taille = "12"
                    if (JSON.parse(x).catalog_pub_message_1_taille)
                        catalog_pub_message_1_taille = JSON.parse(x).catalog_pub_message_1_taille;

                    var catalog_pub_message_1_color = "#000000";
                    if (JSON.parse(x).catalog_pub_message_1_color)
                        catalog_pub_message_1_color = JSON.parse(x).catalog_pub_message_1_color;

                    var catalog_pub_message_1_gras = "400"
                    if (JSON.parse(x).catalog_pub_message_1_gras)
                        catalog_pub_message_1_gras = JSON.parse(x).catalog_pub_message_1_gras;


                    var catalog_pub_message_2_txt = ""
                    if (JSON.parse(x).catalog_pub_message_2_txt)
                        catalog_pub_message_2_txt = JSON.parse(x).catalog_pub_message_2_txt;


                    var catalog_pub_message_2_taille = "12"
                    if (JSON.parse(x).catalog_pub_message_2_taille)
                        catalog_pub_message_2_taille = JSON.parse(x).catalog_pub_message_2_taille;

                    var catalog_pub_message_2_color = "#000000"
                    if (JSON.parse(x).catalog_pub_message_2_color)
                        catalog_pub_message_2_color = JSON.parse(x).catalog_pub_message_2_color;

                    var catalog_pub_message_2_gras = "400"
                    if (JSON.parse(x).catalog_pub_message_2_gras)
                        catalog_pub_message_2_gras = JSON.parse(x).catalog_pub_message_2_gras;



                    var catalog_pub_message_3_txt = ""
                    if (JSON.parse(x).catalog_pub_message_3_txt)
                        catalog_pub_message_3_txt = JSON.parse(x).catalog_pub_message_3_txt;

                    var catalog_pub_message_3_taille = "12"
                    if (JSON.parse(x).catalog_pub_message_3_taille)
                        catalog_pub_message_3_taille = JSON.parse(x).catalog_pub_message_3_taille;

                    var catalog_pub_message_3_color = "#000000";
                    if (JSON.parse(x).catalog_pub_message_3_color)
                        catalog_pub_message_3_color = JSON.parse(x).catalog_pub_message_3_color;

                    var catalog_pub_message_3_gras = "400"
                    if (JSON.parse(x).catalog_pub_message_3_gras)
                        catalog_pub_message_3_gras = JSON.parse(x).catalog_pub_message_3_gras;

                    // Indicateur 1
                    var catalog_pub_indicateur_1_txt = ""
                    if (JSON.parse(x).catalog_pub_indicateur_1_txt)
                        catalog_pub_indicateur_1_txt = JSON.parse(x).catalog_pub_indicateur_1_txt;

                    var catalog_pub_indicateur_1_color = "#000000";
                    if (JSON.parse(x).catalog_pub_indicateur_1_color)
                        catalog_pub_indicateur_1_color = JSON.parse(x).catalog_pub_indicateur_1_color;

                    var catalog_pub_indicateur_1_gras = "400"
                    if (JSON.parse(x).catalog_pub_indicateur_1_gras)
                        catalog_pub_indicateur_1_gras = JSON.parse(x).catalog_pub_indicateur_1_gras;

                    var catalog_pub_indicateur_1_taille = "12"
                    if (JSON.parse(x).catalog_pub_indicateur_1_taille)
                        catalog_pub_indicateur_1_taille = JSON.parse(x).catalog_pub_indicateur_1_taille;

                    // Indicateur 2
                    var catalog_pub_indicateur_2_txt = ""
                    if (JSON.parse(x).catalog_pub_indicateur_2_txt)
                        catalog_pub_indicateur_2_txt = JSON.parse(x).catalog_pub_indicateur_2_txt;

                    var catalog_pub_indicateur_2_color = "#000000";
                    if (JSON.parse(x).catalog_pub_indicateur_2_color)
                        catalog_pub_indicateur_2_color = JSON.parse(x).catalog_pub_indicateur_2_color;

                    var catalog_pub_indicateur_2_gras = "400"
                    if (JSON.parse(x).catalog_pub_indicateur_2_gras)
                        catalog_pub_indicateur_2_gras = JSON.parse(x).catalog_pub_indicateur_2_gras;

                    var catalog_pub_indicateur_2_taille = "12"
                    if (JSON.parse(x).catalog_pub_indicateur_2_taille)
                        catalog_pub_indicateur_2_taille = JSON.parse(x).catalog_pub_indicateur_2_taille;

                    // Indicateur 3
                    var catalog_pub_indicateur_3_txt = ""
                    if (JSON.parse(x).catalog_pub_indicateur_3_txt)
                        catalog_pub_indicateur_3_txt = JSON.parse(x).catalog_pub_indicateur_3_txt;

                    var catalog_pub_indicateur_3_color = "#000000";
                    if (JSON.parse(x).catalog_pub_indicateur_3_color)
                        catalog_pub_indicateur_3_color = JSON.parse(x).catalog_pub_indicateur_3_color;

                    var catalog_pub_indicateur_3_gras = "400"
                    if (JSON.parse(x).catalog_pub_indicateur_3_gras)
                        catalog_pub_indicateur_3_gras = JSON.parse(x).catalog_pub_indicateur_3_gras;

                    var catalog_pub_indicateur_3_taille = "12"
                    if (JSON.parse(x).catalog_pub_indicateur_3_taille)
                        catalog_pub_indicateur_3_taille = JSON.parse(x).catalog_pub_indicateur_3_taille;


                    // Indicateur 4
                    var catalog_pub_indicateur_4_txt = ""
                    if (JSON.parse(x).catalog_pub_indicateur_4_txt)
                        catalog_pub_indicateur_4_txt = JSON.parse(x).catalog_pub_indicateur_4_txt;

                    var catalog_pub_indicateur_4_color = "#000000";
                    if (JSON.parse(x).catalog_pub_indicateur_4_color)
                        catalog_pub_indicateur_4_color = JSON.parse(x).catalog_pub_indicateur_4_color;

                    var catalog_pub_indicateur_4_gras = "400"
                    if (JSON.parse(x).catalog_pub_indicateur_4_gras)
                        catalog_pub_indicateur_4_gras = JSON.parse(x).catalog_pub_indicateur_4_gras;

                    var catalog_pub_indicateur_4_taille = "12"
                    if (JSON.parse(x).catalog_pub_indicateur_4_taille)
                        catalog_pub_indicateur_4_taille = JSON.parse(x).catalog_pub_indicateur_4_taille;

                    // Les contacts publics
                    var catalog_pub_contact_public_email = ""
                    if (JSON.parse(x).catalog_pub_contact_public_email)
                        catalog_pub_contact_public_email = JSON.parse(x).catalog_pub_contact_public_email;

                    var catalog_pub_contact_public_telephone = ""
                    if (JSON.parse(x).catalog_pub_contact_public_telephone)
                        catalog_pub_contact_public_telephone = JSON.parse(x).catalog_pub_contact_public_telephone;


                    var catalog_pub_theme_id = JSON.parse(x).catalog_pub_theme_id;

                    setmy_theme_code(theme_code);

                    console.log(" ### setmy_theme_code = ", theme_code);


                    //---
                    var node = {
                        "_id": _id,
                        "recid": recid,
                        "nom": nom,
                        "label": nom,

                        "catalog_pub_cgv_pdf": catalog_pub_cgv_pdf,
                        "catalog_pub_cgu_pdf": catalog_pub_cgu_pdf,
                        "catalog_pub_mention_legale_pdf": catalog_pub_mention_legale_pdf,

                        "catalog_pub_logo": catalog_pub_logo,
                        "catalog_pub_banniere_img": catalog_pub_banniere_img,
                        "catalog_pub_message_1_txt": catalog_pub_message_1_txt,
                        "catalog_pub_message_1_taille": catalog_pub_message_1_taille,
                        "catalog_pub_message_1_color": catalog_pub_message_1_color,
                        "catalog_pub_message_1_gras": catalog_pub_message_1_gras,


                        "catalog_pub_message_2_txt": catalog_pub_message_2_txt,
                        "catalog_pub_message_2_taille": catalog_pub_message_2_taille,
                        "catalog_pub_message_2_color": catalog_pub_message_2_color,
                        "catalog_pub_message_2_gras": catalog_pub_message_2_gras,


                        "catalog_pub_message_3_txt": catalog_pub_message_3_txt,
                        "catalog_pub_message_3_taille": catalog_pub_message_3_taille,
                        "catalog_pub_message_3_color": catalog_pub_message_3_color,
                        "catalog_pub_message_3_gras": catalog_pub_message_3_gras,

                        /// les indicateurs
                        "catalog_pub_indicateur_1_txt": catalog_pub_indicateur_1_txt,
                        "catalog_pub_indicateur_1_color": catalog_pub_indicateur_1_color,
                        "catalog_pub_indicateur_1_gras": catalog_pub_indicateur_1_gras,
                        "catalog_pub_indicateur_1_taille": catalog_pub_indicateur_1_taille,

                        "catalog_pub_indicateur_2_txt": catalog_pub_indicateur_2_txt,
                        "catalog_pub_indicateur_2_color": catalog_pub_indicateur_2_color,
                        "catalog_pub_indicateur_2_gras": catalog_pub_indicateur_2_gras,
                        "catalog_pub_indicateur_2_taille": catalog_pub_indicateur_2_taille,

                        "catalog_pub_indicateur_3_txt": catalog_pub_indicateur_3_txt,
                        "catalog_pub_indicateur_3_color": catalog_pub_indicateur_3_color,
                        "catalog_pub_indicateur_3_gras": catalog_pub_indicateur_3_gras,
                        "catalog_pub_indicateur_3_taille": catalog_pub_indicateur_3_taille,

                        "catalog_pub_indicateur_4_txt": catalog_pub_indicateur_4_txt,
                        "catalog_pub_indicateur_4_color": catalog_pub_indicateur_4_color,
                        "catalog_pub_indicateur_4_gras": catalog_pub_indicateur_4_gras,
                        "catalog_pub_indicateur_4_taille": catalog_pub_indicateur_4_taille,

                        // les contacts publics
                        "catalog_pub_contact_public_email": catalog_pub_contact_public_email,
                        "catalog_pub_contact_public_telephone": catalog_pub_contact_public_telephone,

                        "catalog_pub_theme_id": catalog_pub_theme_id,
                        "theme_code": theme_code,

                    };
                    //  console.log(" --- node = ", node);
                    new_data2.push(node);
                });

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


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

                    if (mylocal_materiel.recid)
                        setsubdomain_recid(mylocal_materiel.recid);
                    else
                        setsubdomain_recid("");

                }


            }
            else {
                setGet_Subdomain_Partner_Data_api("false");
                setGet_Subdomain_Partner_Data_message(res.data.message);
                alert(res.data.message);
            }

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

    const [display_mode_grid_or_list, setdisplay_mode_grid_or_list] = useState("list");

    function func_display_grid_view() {
        setdisplay_mode_grid_or_list("grid");
    }

    function func_display_list_view() {
        setdisplay_mode_grid_or_list("list");
    }



    return (


        <div className="mon_catalogue_public" >


            <Helmet>
                <title>Formation & Tutoriel Gratuit ou payant Excellente qualité</title>
                <meta name="description" content="(zzz)Trouver des Formations et Tutoriels d'excellente qualité : Gratuit ou payant / A distance ou en presentiel, etc." />
                <meta name="robots" content="index,follow" />
                <link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/recherche-formation"} />
                <meta name="title" content="Formation & Tutoriel Gratuit ou payant Excellente qualité" />
            </Helmet>

            {/******* Gestion du THEME  "MySy_Theme2" */}
            {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                && String(my_theme_code) === "MySy_Theme2" && <div>

                    <div className="reherche_new_v4" >

                        {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                            && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_banniere_img && <div >
                                <img src={New_Get_Subdomain_Partner_Data_result[0].catalog_pub_banniere_img} className="Partner_Catalog_Background_Header_model_2" ></img>

                            </div>}

                        <div className="bloc_logo_indic_model_2">

                            <div className="bloc_logo_indic_logo_model_2">
                                <img src={New_Get_Subdomain_Partner_Data_result[0].catalog_pub_logo} alt={New_Get_Subdomain_Partner_Data_result[0].nom} />
                            </div>

                            <div className="bloc_logo_indic_contact_model_2">

                                &nbsp;
                            </div>

                            <div className="bloc_logo_indic_indic_model_2">
                                &nbsp;
                            </div>
                        </div>


                        <div className="bloc_milieu_model_2">

                            <div className="bloc_milieu_text_model_2">

                                <div className="bloc_milieu_text_model_2_gauche">
                                    <font className="bloc_logo_indic_indic_text"> Indicateurs  </font> <br />
                                    {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                                        && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_1_txt &&
                                        <div style={{
                                            textAlign: "left",
                                            width: '100%',
                                            fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_1_taille}` + "px",
                                            color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_1_color}`,
                                            fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_1_gras}`,
                                        }}>  {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_1_txt}
                                        </div>}

                                    {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                                        && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_2_txt &&
                                        <div style={{
                                            textAlign: "left",
                                            width: '100%',
                                            fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_2_taille}` + "px",
                                            color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_2_color}`,
                                            fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_2_gras}`,
                                        }}>  {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_2_txt}
                                        </div>}

                                    {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                                        && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_3_txt &&
                                        <div style={{
                                            textAlign: "left",
                                            width: '100%',
                                            fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_3_taille}` + "px",
                                            color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_3_color}`,
                                            fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_3_gras}`,
                                        }}> {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_3_txt}
                                        </div>}

                                    {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                                        && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_4_txt &&
                                        <div style={{
                                            textAlign: "left",
                                            width: '100%',
                                            fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_4_taille}` + "px",
                                            color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_4_color}`,
                                            fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_4_gras}`,
                                        }}>  {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_4_txt}
                                        </div>}

                                </div>
                                <div className="bloc_milieu_text_model_2_centre">
                                    {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0 &&
                                        <nav>
                                            <font className='title1_nom_model_2'>   {New_Get_Subdomain_Partner_Data_result[0].nom} </font> <br />
                                            <font className='title1_text1_model_2' style={{
                                                fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_1_taille}` + "px",
                                                color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_1_color}`,
                                                fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_1_gras}`,
                                            }}>   {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_1_txt} </font>
                                        </nav>}


                                    {New_Get_Subdomain_Partner_Data_result[0] && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_2_txt &&
                                        <nav className="title2_model_2" style={{
                                            fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_2_taille}` + "px",
                                            color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_2_color}`,
                                            fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_2_gras}`,
                                        }}> {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_2_txt} </nav>}

                                </div>
                                <div className="bloc_milieu_text_model_2_droite">

                                    <font className="bloc_logo_indic_contact_text_model_2"> Contact  </font> <br />
                                    Tel : {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_contact_public_telephone} <br />
                                    Email : {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_contact_public_email}

                                </div>
                            </div>

                        </div>



                        <div className="Header_Content">



                        </div>

                        <div className="block_nos_formation">
                            <div style={{ "width": "100%" }}>

                                <div className="forma_et_tuto"> Nos Formations & Tutoriels</div>
                                {showelement === "true" && <div onClick={showdisplayfilter} className="recherchefilter">

                                    <div className="recherchedivgauche">Masquer les Métiers & Filtres</div>
                                    <div className="recherchedivdroite ch_form_svg"> <FaRegArrowAltCircleUp /> </div>

                                </div>
                                }

                                {showelement === "false" && <div onClick={showdisplayfilter} className="recherchefilter">
                                    <div className="recherchedivgauche">Afficher les Métiers & Filtres</div>
                                    <div className="recherchedivdroite ch_form_svg"> <FaRegArrowAltCircleDown /> </div>

                                </div>
                                }

                                {showelement === "true" && <div className="rech_leftbox_v2">
                                    <div className="sous_filter">
                                        <div className="sous_filter_txt"> Les filtres </div>

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

                                            <div className="sous_filter_txt_grp_filtre">
                                                <div className="tab_critere_espace">
                                                    <div className="filter_valeur" onChange={TrainingCPFHandle}>
                                                        <div className="filter_valeur_txt" > Eligible CPF
                                                        </div>
                                                        <div className="filter_valeur_block_val">
                                                            <div className="frame_133" >

                                                                <div className="frame_133_grp" >
                                                                    <input className="frame_133_grp_radio" type="radio" value="1" id={"TrainingCPF"} name={"TrainingCPF"} />
                                                                    <nav className="frame_133_grp_txt"> Oui </nav>
                                                                </div>
                                                            </div>

                                                            <div className="frame_134">
                                                                <div className="frame_134_grp" >
                                                                    <input className="frame_133_grp_radio" type="radio" value="0" id={"TrainingCPF"} name={"TrainingCPF"} />
                                                                    <nav className="frame_133_grp_txt"> Non </nav>
                                                                </div>
                                                            </div>

                                                            {String(cpfchecked) === String("1") && <div className="frame_135" onClick={annulefiltrecpf}>
                                                                <div className="frame_135_grp" >
                                                                    <img src={tick_ko} alt="KO" className="tick_ok_ko" />

                                                                </div>
                                                            </div>}

                                                        </div>
                                                    </div>


                                                    <div className="filter_valeur" onChange={TrainingCertifHandle}>
                                                        <div className="filter_valeur_txt" > Certification
                                                        </div>

                                                        <div className="filter_valeur_block_val">
                                                            <div className="frame_133" >
                                                                <div className="frame_133_grp" >
                                                                    <input className="frame_133_grp_radio" type="radio" value="1" id={"TrainingCertif"} name={"TrainingCertif"} />
                                                                    <nav className="frame_133_grp_txt"> Oui </nav>
                                                                </div>
                                                            </div>

                                                            <div className="frame_134">
                                                                <div className="frame_134_grp" >
                                                                    <input className="frame_133_grp_radio" type="radio" value="0" id={"TrainingCertif"} name={"TrainingCertif"} />
                                                                    <nav className="frame_133_grp_txt"> Non </nav>
                                                                </div>
                                                            </div>
                                                            {String(certifchecked) === String("1") && <div className="frame_135" onClick={annulefiltrecertif}>
                                                                <div className="frame_135_grp" >
                                                                    <img src={tick_ko} alt="KO" className="tick_ok_ko" />

                                                                </div>
                                                            </div>}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div className="sous_filter_txt_grp_filtre">
                                                <div className="tab_critere_espace">
                                                    <div className="filter_valeur" onChange={TrainingTypeHandle}>
                                                        <div className="filter_valeur_txt" > Type
                                                        </div>

                                                        <div className="filter_valeur_block_val">
                                                            <div className="frame_133" >
                                                                <div className="frame_133_grp" >
                                                                    <input className="frame_133_grp_radio" type="radio" value="cours" id={"TrainingType"} name={"TrainingType"} />
                                                                    <nav className="frame_133_grp_txt"> Cours </nav>
                                                                </div>
                                                            </div>

                                                            <div className="frame_134">
                                                                <div className="frame_134_grp" >
                                                                    <input className="frame_133_grp_radio" type="radio" value="tuto" id={"TrainingType"} name={"TrainingType"} />
                                                                    <nav className="frame_133_grp_txt"> Tuto </nav>
                                                                </div>
                                                            </div>
                                                            {String(typechecked) === String("1") && <div className="frame_135" onClick={annulefiltretypechecked}>
                                                                <div className="frame_135_grp" >
                                                                    <img src={tick_ko} alt="KO" className="tick_ok_ko" />

                                                                </div>
                                                            </div>}
                                                        </div>
                                                    </div>


                                                    <div className="filter_valeur" onChange={TrainingDistancielHandle}>
                                                        <div className="filter_valeur_txt" > Lieu
                                                        </div>

                                                        <div className="filter_valeur_block_val">
                                                            <div className="frame_133" >
                                                                <div className="frame_133_grp" >
                                                                    <input className="frame_133_grp_radio" type="radio" value="0" id={"TrainingPresentiel"} name={"TrainingPresentiel"} />
                                                                    <nav className="frame_133_grp_txt"> Site </nav>
                                                                </div>
                                                            </div>

                                                            <div className="frame_134">
                                                                <div className="frame_134_grp" >
                                                                    <input className="frame_133_grp_radio" type="radio" value="1" id={"TrainingPresentiel"} name={"TrainingPresentiel"} />
                                                                    <nav className="frame_133_grp_txt"> Distance </nav>
                                                                </div>
                                                            </div>
                                                            {String(lieuchecked) === String("1") && <div className="frame_135" onClick={annulefiltrelieuchecked}>
                                                                <div className="frame_135_grp" >
                                                                    <img src={tick_ko} alt="KO" className="tick_ok_ko" />

                                                                </div>
                                                            </div>}
                                                        </div>
                                                    </div>


                                                    {trainingonsite && String(trainingonsite) === String("0") && <div className="new_filter_zone_row" onClick={isonsite}>
                                                        <div className="filter_valeur_txt"> Ville
                                                        </div>

                                                        <div className="new_filter_zone_cerif_radio_left" style={{ "width": "100%" }}>
                                                            <input type="text"
                                                                id={"ville"}
                                                                name={"ville"}
                                                                onBlur={LeaveCity}
                                                                onChange={SearchcitiesHandle}
                                                                style={{ "borderRadius": "5px", "width": "100%", "height": "2rem" }}
                                                            //values={cities}
                                                            />
                                                            {suggestioncities && suggestioncities.slice(0, 3).map((suggestion, id) =>
                                                                <div key={id} style={{
                                                                    "cursor": "pointer", "color": "black", "textAlign": "left",
                                                                    "fontSize": "small", "paddingLeft": "5px", "fontStyle": "italic", "letterSpacing": "1px",
                                                                    "marginBottom": "10px"
                                                                }}
                                                                    onClick={() => OnCitiesSuggestionHandler(JSON.parse(suggestion).ville)}> {JSON.parse(suggestion).ville}</div>
                                                            )}

                                                        </div>


                                                        <div> &nbsp;</div>
                                                    </div>}

                                                    {trainingonsite && String(trainingonsite) === String("0") && <div className="new_filter_zone_row" onClick={isonsite} onBlur={LeaveZipCode}>
                                                        <div className="filter_valeur_txt"> Code postale
                                                        </div>

                                                        <div className="new_filter_zone_cerif_radio_left" style={{ "width": "100%" }}>
                                                            <input type="text"
                                                                id={"zip_code"}
                                                                name={"zip_code"}
                                                                style={{ "borderRadius": "5px", "width": "100%", "height": "2rem" }}
                                                            />
                                                        </div>


                                                        <div> &nbsp;</div>
                                                    </div>}

                                                </div>
                                            </div>

                                            <div className="sous_filter_txt_grp_filtre">

                                                <div className="tab_critere_espace">

                                                    <div className="filter_valeur" >
                                                        <div className="filter_valeur_txt" > Support
                                                        </div>

                                                        <div className="filter_valeur_block_val">

                                                            <select className="form-select form-select-sm limite_input" onChange={TrainingSupportHandle} aria-label=".form-select-sm example"
                                                                id="supoort_list_derou" name="supoort_list_derou"  >
                                                                <option selected value="">Choisir</option>
                                                                <option value="video">Video</option>
                                                                <option value="réalité virtuelle">Realité Virtuelle</option>
                                                                <option value="document">Document</option>
                                                                <option value="mixte">Mixte</option>

                                                            </select>


                                                        </div>
                                                    </div>

                                                    <div className="filter_valeur">
                                                        <div className="filter_valeur_txt" > Prix
                                                        </div>

                                                        <div className="new_filter_zone_cerif_radio_left range_prix_mobile" style={{
                                                            "width": "90%",
                                                            'float': "right", "textAlign": 'right', "marginTop": "1rem",
                                                            "fontFamily": 'Manrope',
                                                        }} onClick={TrainingPriceHandle}>
                                                            <InputRange
                                                                maxValue={10000}
                                                                minValue={0}
                                                                formatLabel={value => `${value} €`}
                                                                value={range_price}
                                                                step={500}
                                                                name="toto"

                                                                onChange={value => setrange_price(value)}
                                                                //onChange={TrainingPriceHandle}
                                                                onChangeComplete={value => console.log(value)}
                                                            />
                                                        </div>


                                                        <div> &nbsp;</div>
                                                    </div>

                                                </div>

                                            </div>

                                        </div>
                                    </div>

                                </div>
                                }

                                <div className="rech_middlebox_v2" id="rech_middlebox">

                                    <div className="forma_et_tuto_mobile"> Nos Formations & Tutoriels</div>
                                    {String(userconnected) === String("1") && <div>
                                        <label className="default_font">
                                            <i>Afficher toutes les formations :</i>  &nbsp;&nbsp;
                                            <input type="checkbox" onChange={displayAllClassesHandle} />
                                        </label>
                                    </div>
                                    }

                                    {myApiResponse == "False" && <div className="koUpdateData">

                                        Impossible de contacter l'hote distant
                                    </div>}

                                    {myApiResponse == "True" && String(besoinaiderecherche) === String("1") && <div className="okUpdateData">

                                        Le resultat est vide, besoin d'aide ?
                                        <AideRecherche />

                                    </div>}





                                    {result && myApiResponse === "True" && !newresult &&
                                        <div style={{ width: '100%', float: 'left' }}>
                                            <div className="okUpdateData">
                                                <div style={{ "width": "100%", "float": "left" }}>

                                                    <div style={{ "width": "65%", "float": "left", "paddingTop": '10px' }}>
                                                        <Pagination
                                                            className="pagination-bar"
                                                            currentPage={currentPage2}
                                                            totalCount={result.length}
                                                            pageSize={PageSize}
                                                            onPageChange={page => setCurrentPage2(page)}
                                                        />
                                                    </div>


                                                    <div style={{ "width": "25%", "float": "left" }}>
                                                        <div className="input-group input-group-sm mb-3 ">
                                                            <span className="filter_span">Trier par </span>

                                                            <select className="filter_val" style={{ "marginTop": '10px' }}
                                                                id={"trierpar"} name={"trierpar"}
                                                                onChange={trier}>
                                                                <option value="price">Prix</option>

                                                                <option value="duration">Duree</option>
                                                                <option selected value="note">Pertinence</option>
                                                            </select>
                                                            <span style={{ width: '10%' }}><TbArrowsDownUp style={{ height: '2rem', paddingTop: '5px', width: '40%' }}
                                                                onClick={(e) => {
                                                                    if (trier_par === "1")
                                                                        settrier_par("-1");
                                                                    else
                                                                        settrier_par("1");

                                                                    trier();
                                                                }}

                                                            /> </span>
                                                        </div>
                                                    </div>

                                                    <div className="display_grid_list_bton">
                                                        {result && result.length > 0 &&
                                                            <div style={{
                                                                "textAlign": "right", "float": "right", "width": "100%", "paddingRight": "15px",
                                                                "marginBottom": "15px", "marginTop": "15px", "width": '100%'
                                                            }}>
                                                                <nav style={{ "width": "50%", "float": "left", "cursor": 'pointer' }} onClick={func_display_grid_view}> <IoAppsSharp style={{ fontSize: '20px' }} />  </nav>
                                                                <nav style={{ "width": "50%", "float": "left", "cursor": 'pointer' }} onClick={func_display_list_view}> <IoListSharp style={{ fontSize: '20px' }} /> </nav>
                                                            </div>}
                                                    </div>


                                                </div>

                                            </div>
                                        </div>}



                                    {result && myApiResponse === "True" && newresult &&
                                        <div className="okUpdateData">

                                            <div style={{ "width": "100%", "float": "left" }}>
                                                <div style={{ "width": "90%", "float": "left", "paddingTop": '10px' }}>

                                                    <Pagination
                                                        className="pagination-bar2" style="padding: 0;"
                                                        currentPage={currentPage2}
                                                        totalCount={newresult.length}
                                                        pageSize={PageSize}
                                                        onPageChange={page => setCurrentPage2(page)}
                                                    />

                                                </div>

                                                <div className="display_grid_list_bton" >
                                                    {result && result.length > 0 &&
                                                        <div style={{
                                                            "textAlign": "right", "float": "right", "width": "100%", "paddingRight": "15px",
                                                            "marginBottom": "15px", "marginTop": "15px", "width": '100%'
                                                        }}>
                                                            <nav style={{ "width": "50%", "float": "left", "cursor": 'pointer' }} onClick={func_display_grid_view}> <IoAppsSharp style={{ fontSize: '20px' }} />  </nav>
                                                            <nav style={{ "width": "50%", "float": "left", "cursor": 'pointer' }} onClick={func_display_list_view}> <IoListSharp style={{ fontSize: '20px' }} /> </nav>
                                                        </div>}
                                                </div>

                                            </div>


                                        </div>}


                                    {newresult && (newresult.length <= PageSize) && <div className="okUpdateData"> 88
                                        &nbsp;
                                        <br />
                                        &nbsp;
                                    </div>}

                                    <div style={{ "width": '100%' }}> &nbsp; </div>




                                    {String(display_mode_grid_or_list) !== "grid" && <div>
                                        {result && myApiResponse == "True" && fin == 0 && !newresult &&
                                            result.slice(0, PageSize).map((formation) => (
                                                <div className="rech_list_formation2" ref={inputEl} id="inputEl_element">
                                                    <Formation_Partner_Catalog formation={JSON.parse(formation)} key={JSON.parse(formation).title} coeur={JSON.parse(formation).title} />
                                                </div>
                                            ))}


                                        {result && myApiResponse == "True" && fin == 0 && newresult &&
                                            newresult.slice(0, PageSize).map((formation) => (
                                                <div className="rech_list_formation2">
                                                    <Formation_Partner_Catalog formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
                                                </div>

                                            ))}



                                        {result && myApiResponse === "True" && fin === 1 && !newresult
                                            && currentTableData2
                                            && currentTableData2.map((formation) => (
                                                <div className="rech_list_formation2">
                                                    <Formation_Partner_Catalog formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
                                                </div>

                                            ))}

                                        {result && myApiResponse === "True" && fin === 1 && newresult
                                            && currentTableData2
                                            && currentTableData2.map((formation) => (
                                                <div className="rech_list_formation2">
                                                    <Formation_Partner_Catalog formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
                                                </div>

                                            ))}
                                    </div>}


                                    {String(display_mode_grid_or_list) === "grid" && <div>
                                        {result && myApiResponse == "True" && fin == 0 && !newresult &&
                                            result.slice(0, PageSize).map((formation) => (
                                                <div className="rech_list_formation2 view_grid" ref={inputEl} id="inputEl_element">
                                                    <Formation_Grid_2Col formation={JSON.parse(formation)} key={JSON.parse(formation).title} coeur={JSON.parse(formation).title} />
                                                </div>
                                            ))}


                                        {result && myApiResponse == "True" && fin == 0 && newresult &&
                                            newresult.slice(0, PageSize).map((formation) => (
                                                <div className="rech_list_formation2 view_grid">
                                                    <Formation_Grid_2Col formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
                                                </div>

                                            ))}



                                        {result && myApiResponse === "True" && fin === 1 && !newresult
                                            && currentTableData2
                                            && currentTableData2.map((formation) => (
                                                <div className="rech_list_formation2 view_grid">
                                                    <Formation_Grid_2Col formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
                                                </div>

                                            ))}

                                        {result && myApiResponse === "True" && fin === 1 && newresult
                                            && currentTableData2
                                            && currentTableData2.map((formation) => (
                                                <div className="rech_list_formation2 view_grid">
                                                    <Formation_Grid_2Col formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
                                                </div>

                                            ))}
                                    </div>}




                                    {result && !newresult && <div>

                                        {String(userconnected) === String("1") && <label className="default_font">
                                            <i>Afficher toutes les formations :</i>  &nbsp;&nbsp;
                                            <input type="checkbox" onChange={displayAllClassesHandle} />
                                        </label>}
                                        <Pagination
                                            className="pagination-bar2" style={{ 'padding': "0px" }}
                                            currentPage={currentPage2}
                                            totalCount={result.length}
                                            pageSize={PageSize}
                                            onPageChange={page => setCurrentPage2(page)}
                                        />
                                    </div>
                                    }

                                    {result && newresult && <div>

                                        {String(userconnected) === String("1") && <label className="default_font">
                                            <i>Afficher toutes les formations :</i>  &nbsp;&nbsp;
                                            <input type="checkbox" onChange={displayAllClassesHandle} />
                                        </label>}
                                        <Pagination
                                            className="pagination-bar3" style="padding: 0;"
                                            currentPage={currentPage2}
                                            totalCount={newresult.length}
                                            pageSize={PageSize}
                                            onPageChange={page => setCurrentPage2(page)}
                                        />
                                    </div>
                                    }
                                </div>



                            </div>


                            <div className="block_actualite" >

                                <div className="block_actualite_sous_block">
                                    <div className="block_actualite_sous_block_text">Notre actualité

                                    </div>

                                    <div className="block_list_actu">

                                        <div className="block_list_actu_actu1">

                                            <div className="block_list_actu_actu1_img">

                                            </div>

                                            <div className="block_list_actu_actu1_date_text">

                                                <div className="block_list_actu_actu1_date_text_date">
                                                    19 DECEMBRE 2022
                                                </div>

                                                <div className="block_list_actu_actu1_date_text_txt">
                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                                </div>

                                            </div>


                                        </div>

                                        <div className="block_list_actu_actu1">

                                            <div className="block_list_actu_actu1_img">

                                            </div>

                                            <div className="block_list_actu_actu1_date_text">

                                                <div className="block_list_actu_actu1_date_text_date">
                                                    19 DECEMBRE 2022
                                                </div>

                                                <div className="block_list_actu_actu1_date_text_txt">
                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                                </div>

                                            </div>


                                        </div>

                                        <div className="block_list_actu_actu1">

                                            <div className="block_list_actu_actu1_img">

                                            </div>

                                            <div className="block_list_actu_actu1_date_text">

                                                <div className="block_list_actu_actu1_date_text_date">
                                                    19 DECEMBRE 2022
                                                </div>

                                                <div className="block_list_actu_actu1_date_text_txt">
                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                                </div>

                                            </div>


                                        </div>




                                    </div>

                                </div>

                                <div className="bton_tout_nos_article">
                                    <div className="bton_tout_nos_article_account_box">


                                    </div>
                                    <a
                                        href="/Recherche-Article-formation"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        style={{ "textDecoration": "none" }}
                                    >
                                        <div className="bton_tout_nos_article_txt" style={{ "textDecoration": "none" }}>

                                            Voir tous nos articles

                                        </div>
                                    </a>

                                </div>
                            </div>

                        </div>
                        <div className="pieddepage_v2" id="pieddepage_v2">

                            <Fotter_Catalog_Pub partner_data={New_Get_Subdomain_Partner_Data_result[0]} />
                        </div>

                    </div >


                </div>}

            {/******* FIN Gestion du THEME  "MySy_Theme2" */}



            {/******* Gestion du THEME PAR DEFAULT " */}
            {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                && String(my_theme_code) !== "MySy_Theme2" && <div>

                    {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                        && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_banniere_img && <div >
                            <img src={New_Get_Subdomain_Partner_Data_result[0].catalog_pub_banniere_img} className="Partner_Catalog_Background_Header" ></img>

                        </div>}

                    <div className="bloc_logo_indic">

                        <div className="bloc_logo_indic_logo">
                            <img src={New_Get_Subdomain_Partner_Data_result[0].catalog_pub_logo} alt={New_Get_Subdomain_Partner_Data_result[0].nom} />
                        </div>

                        <div className="bloc_logo_indic_contact">

                            <font className="bloc_logo_indic_contact_text"> Contact  </font> <br />
                            Tel : {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_contact_public_telephone} <br />
                            Email : {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_contact_public_email}
                        </div>

                        <div className="bloc_logo_indic_indic">
                            <font className="bloc_logo_indic_indic_text"> Indicateurs  </font> <br />
                            {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                                && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_1_txt &&
                                <div style={{
                                    textAlign: "left",
                                    width: '100%',
                                    fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_1_taille}` + "px",
                                    color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_1_color}`,
                                    fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_1_gras}`,
                                }}>  {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_1_txt}
                                </div>}

                            {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                                && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_2_txt &&
                                <div style={{
                                    textAlign: "left",
                                    width: '100%',
                                    fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_2_taille}` + "px",
                                    color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_2_color}`,
                                    fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_2_gras}`,
                                }}>  {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_2_txt}
                                </div>}

                            {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                                && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_3_txt &&
                                <div style={{
                                    textAlign: "left",
                                    width: '100%',
                                    fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_3_taille}` + "px",
                                    color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_3_color}`,
                                    fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_3_gras}`,
                                }}> {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_3_txt}
                                </div>}

                            {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0
                                && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_4_txt &&
                                <div style={{
                                    textAlign: "left",
                                    width: '100%',
                                    fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_4_taille}` + "px",
                                    color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_4_color}`,
                                    fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_4_gras}`,
                                }}>  {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_indicateur_4_txt}
                                </div>}
                        </div>
                    </div>


                    <div className="bloc_milieu">

                        <div className="bloc_milieu_text">
                            {New_Get_Subdomain_Partner_Data_result && New_Get_Subdomain_Partner_Data_result.length > 0 &&
                                <nav className="title1_nom" >
                                    {New_Get_Subdomain_Partner_Data_result[0].nom} <br />
                                    <font className='title1_text1' style={{
                                        fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_1_taille}` + "px",
                                        color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_1_color}`,
                                        fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_1_gras}`,
                                    }}>   {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_1_txt} </font>
                                </nav>}


                            {New_Get_Subdomain_Partner_Data_result[0] && New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_2_txt &&
                                <nav className="title2" style={{
                                    fontSize: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_2_taille}` + "px",
                                    color: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_2_color}`,
                                    fontWeight: `${New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_2_gras}`,
                                }}> {New_Get_Subdomain_Partner_Data_result[0].catalog_pub_message_2_txt} </nav>}
                        </div>
                        <div className="bloc_img_milieu_gauche">
                            <img style={{ width: '60%' }}
                                src={img_header} />
                        </div>
                    </div>


                    <div className="Header_Content">
                        <div className="rectangle_8"> </div>
                    </div>


                    <div className="block_nos_formation">
                        <div style={{ "width": "100%" }}>

                            <div className="forma_et_tuto"> Nos Formations</div>
                            {showelement === "true" && <div onClick={showdisplayfilter} className="recherchefilter">

                                <div className="recherchedivgauche">Masquer les Métiers & Filtres</div>
                                <div className="recherchedivdroite ch_form_svg"> <FaRegArrowAltCircleUp /> </div>

                            </div>
                            }

                            {showelement === "false" && <div onClick={showdisplayfilter} className="recherchefilter">
                                <div className="recherchedivgauche">Afficher les Métiers & Filtres</div>
                                <div className="recherchedivdroite ch_form_svg"> <FaRegArrowAltCircleDown /> </div>

                            </div>
                            }

                            {showelement === "true" && <div className="rech_leftbox">
                                <div className="sous_filter">
                                    <div className="sous_filter_txt"> Les filtres </div>


                                    <div className="tab_critere_espace">
                                        <div className="filter_valeur" onChange={TrainingCPFHandle}>
                                            <div className="filter_valeur_txt" > Eligible CPF
                                            </div>
                                            <div className="filter_valeur_block_val">
                                                <div className="frame_133" >

                                                    <div className="frame_133_grp" >
                                                        <input className="frame_133_grp_radio" type="radio" value="1" id={"TrainingCPF"} name={"TrainingCPF"} />
                                                        <nav className="frame_133_grp_txt"> Oui </nav>
                                                    </div>
                                                </div>

                                                <div className="frame_134">
                                                    <div className="frame_134_grp" >
                                                        <input className="frame_133_grp_radio" type="radio" value="0" id={"TrainingCPF"} name={"TrainingCPF"} />
                                                        <nav className="frame_133_grp_txt"> Non </nav>
                                                    </div>
                                                </div>

                                                {String(cpfchecked) === String("1") && <div className="frame_135" onClick={annulefiltrecpf}>
                                                    <div className="frame_135_grp" >
                                                        <img src={tick_ko} alt="KO" className="tick_ok_ko" />

                                                    </div>
                                                </div>}

                                            </div>
                                        </div>


                                        <div className="filter_valeur" onChange={TrainingCertifHandle}>
                                            <div className="filter_valeur_txt" > Certification
                                            </div>

                                            <div className="filter_valeur_block_val">
                                                <div className="frame_133" >
                                                    <div className="frame_133_grp" >
                                                        <input className="frame_133_grp_radio" type="radio" value="1" id={"TrainingCertif"} name={"TrainingCertif"} />
                                                        <nav className="frame_133_grp_txt"> Oui </nav>
                                                    </div>
                                                </div>

                                                <div className="frame_134">
                                                    <div className="frame_134_grp" >
                                                        <input className="frame_133_grp_radio" type="radio" value="0" id={"TrainingCertif"} name={"TrainingCertif"} />
                                                        <nav className="frame_133_grp_txt"> Non </nav>
                                                    </div>
                                                </div>
                                                {String(certifchecked) === String("1") && <div className="frame_135" onClick={annulefiltrecertif}>
                                                    <div className="frame_135_grp" >
                                                        <img src={tick_ko} alt="KO" className="tick_ok_ko" />

                                                    </div>
                                                </div>}
                                            </div>
                                        </div>


                                        <div className="filter_valeur" onChange={TrainingTypeHandle}>
                                            <div className="filter_valeur_txt" > Type
                                            </div>

                                            <div className="filter_valeur_block_val">
                                                <div className="frame_133" >
                                                    <div className="frame_133_grp" >
                                                        <input className="frame_133_grp_radio" type="radio" value="cours" id={"TrainingType"} name={"TrainingType"} />
                                                        <nav className="frame_133_grp_txt"> Cours </nav>
                                                    </div>
                                                </div>

                                                <div className="frame_134">
                                                    <div className="frame_134_grp" >
                                                        <input className="frame_133_grp_radio" type="radio" value="tuto" id={"TrainingType"} name={"TrainingType"} />
                                                        <nav className="frame_133_grp_txt"> Tuto </nav>
                                                    </div>
                                                </div>
                                                {String(typechecked) === String("1") && <div className="frame_135" onClick={annulefiltretypechecked}>
                                                    <div className="frame_135_grp" >
                                                        <img src={tick_ko} alt="KO" className="tick_ok_ko" />

                                                    </div>
                                                </div>}
                                            </div>
                                        </div>


                                        {/*<div className="filter_valeur" onChange={TrainingSupportHandle}>
                                    <div className="filter_valeur_txt" > Support
                                    </div>

                                    <div className="filter_valeur_block_val">
                                        <div className="frame_133" >
                                            <div className="frame_133_grp" >
                                                <input className="frame_133_grp_radio" type="radio" value="cours" id={"TrainingType"} name={"TrainingType"} />
                                                <nav className="frame_133_grp_txt"> Cours </nav>
                                            </div>
                                        </div>

                                        <div className="frame_134">
                                            <div className="frame_134_grp" >
                                                <input className="frame_133_grp_radio" type="radio" value="tuto" id={"TrainingType"} name={"TrainingType"} />
                                                <nav className="frame_133_grp_txt"> Tuto </nav>
                                            </div>
                                        </div>
                                        {String(supportchecked) === String("1") && <div className="frame_135" onClick={annulefiltresupportchecked}>
                                            <div className="frame_135_grp" >
                                                <img src={tick_ko} alt="KO" className="tick_ok_ko" />

                                            </div>
                                        </div>}
                                    </div>
                                </div>*/}



                                        <div className="filter_valeur" onChange={TrainingDistancielHandle}>
                                            <div className="filter_valeur_txt" > Lieu
                                            </div>

                                            <div className="filter_valeur_block_val">
                                                <div className="frame_133" >
                                                    <div className="frame_133_grp" >
                                                        <input className="frame_133_grp_radio" type="radio" value="0" id={"TrainingPresentiel"} name={"TrainingPresentiel"} />
                                                        <nav className="frame_133_grp_txt"> Site </nav>
                                                    </div>
                                                </div>

                                                <div className="frame_134">
                                                    <div className="frame_134_grp" >
                                                        <input className="frame_133_grp_radio" type="radio" value="1" id={"TrainingPresentiel"} name={"TrainingPresentiel"} />
                                                        <nav className="frame_133_grp_txt"> Distance </nav>
                                                    </div>
                                                </div>
                                                {String(lieuchecked) === String("1") && <div className="frame_135" onClick={annulefiltrelieuchecked}>
                                                    <div className="frame_135_grp" >
                                                        <img src={tick_ko} alt="KO" className="tick_ok_ko" />

                                                    </div>
                                                </div>}
                                            </div>
                                        </div>


                                        {trainingonsite && String(trainingonsite) === String("0") && <div className="new_filter_zone_row" onClick={isonsite}>
                                            <div className="filter_valeur_txt"> Ville
                                            </div>

                                            <div className="new_filter_zone_cerif_radio_left" style={{ "width": "100%" }}>
                                                <input type="text"
                                                    id={"ville"}
                                                    name={"ville"}
                                                    onBlur={LeaveCity}
                                                    onChange={SearchcitiesHandle}
                                                    style={{ "borderRadius": "5px", "width": "100%", "height": "2rem" }}
                                                //values={cities}
                                                />
                                                {suggestioncities && suggestioncities.slice(0, 3).map((suggestion, id) =>
                                                    <div key={id} style={{
                                                        "cursor": "pointer", "color": "black", "textAlign": "left",
                                                        "fontSize": "small", "paddingLeft": "5px", "fontStyle": "italic", "letterSpacing": "1px",
                                                        "marginBottom": "10px"
                                                    }}
                                                        onClick={() => OnCitiesSuggestionHandler(JSON.parse(suggestion).ville)}> {JSON.parse(suggestion).ville}</div>
                                                )}

                                            </div>


                                            <div> &nbsp;</div>
                                        </div>}

                                        {trainingonsite && String(trainingonsite) === String("0") && <div className="new_filter_zone_row" onClick={isonsite} onBlur={LeaveZipCode}>
                                            <div className="filter_valeur_txt"> Code postale
                                            </div>

                                            <div className="new_filter_zone_cerif_radio_left" style={{ "width": "100%" }}>
                                                <input type="text"
                                                    id={"zip_code"}
                                                    name={"zip_code"}
                                                    style={{ "borderRadius": "5px", "width": "100%", "height": "2rem" }}
                                                />
                                            </div>


                                            <div> &nbsp;</div>
                                        </div>}

                                        <div className="filter_valeur" >
                                            <div className="filter_valeur_txt" > Support
                                            </div>

                                            <div className="filter_valeur_block_val">

                                                <select className="form-select form-select-sm limite_input" onChange={TrainingSupportHandle} aria-label=".form-select-sm example"
                                                    id="supoort_list_derou" name="supoort_list_derou"  >
                                                    <option selected value="">Choisir</option>
                                                    <option value="video">Video</option>
                                                    <option value="réalité virtuelle">Realité Virtuelle</option>
                                                    <option value="document">Document</option>
                                                    <option value="mixte">Mixte</option>

                                                </select>


                                            </div>
                                        </div>

                                        <div className="filter_valeur">
                                            <div className="filter_valeur_txt" > Prix
                                            </div>

                                            <div className="new_filter_zone_cerif_radio_left range_prix_mobile" style={{
                                                "width": "90%",
                                                'float': "right", "textAlign": 'right', "marginTop": "1rem",
                                                "fontFamily": 'Manrope',
                                            }} onClick={TrainingPriceHandle}>
                                                <InputRange
                                                    maxValue={10000}
                                                    minValue={0}
                                                    formatLabel={value => `${value} €`}
                                                    value={range_price}
                                                    step={500}
                                                    name="toto"

                                                    onChange={value => setrange_price(value)}
                                                    //onChange={TrainingPriceHandle}
                                                    onChangeComplete={value => console.log(value)}
                                                />
                                            </div>


                                            <div> &nbsp;</div>
                                        </div>


                                    </div>


                                </div>



                                <div className="sous_filter_txt"> Les Métiers </div>
                                {NewSearchText && <div className="tab_critere_espace">

                                    <div className="sous_filter_metier">
                                        <div className="filter_metier_sous_block_content_txt_formation" style={{ "width": "100%", "fontWeight": "normal", "fontStyle": "italic", "color": "green" }}>
                                            Recherhe pour : "{NewSearchText}"
                                        </div>

                                        <div className="filter_metier_sous_block" style={{ "cursor": "pointer" }}>
                                            <div className="filter_metier_sous_block_content" onClick={init_Filter_Change_url} style={{ "width": "100%" }} >

                                                <div className="filter_metier_sous_block_content_txt" style={{ "width": "100%" }}>
                                                    <div className="filter_metier_sous_block_content_txt_formation" style={{ "width": "100%" }}>
                                                        Réinitaliser les filtres <CiCircleRemove style={{ "fontSize": "larger", "color": "yellowgreen", }} />
                                                    </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="filter_metier_sous_block" onClick={message_to_init_Filter_Change_url}>
                                            <div className="filter_metier_sous_block_content" >
                                                <CiCircleMinus style={{ "fontSize": "large" }} />
                                                <div className="filter_metier_sous_block_content_txt">
                                                    <div className="filter_metier_sous_block_content_txt_formation">
                                                        Management                                             </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">

                                                    </div>

                                                </div>
                                            </div>
                                        </div>

                                        <div className="filter_metier_sous_block" onClick={message_to_init_Filter_Change_url}>
                                            <div className="filter_metier_sous_block_content" >
                                                <CiCircleMinus style={{ "fontSize": "large" }} />
                                                <div className="filter_metier_sous_block_content_txt">
                                                    <div className="filter_metier_sous_block_content_txt_formation">
                                                        Informatique                                             </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">

                                                    </div>

                                                </div>
                                            </div>
                                        </div>

                                        <div className="filter_metier_sous_block" onClick={message_to_init_Filter_Change_url}>
                                            <div className="filter_metier_sous_block_content" >
                                                <CiCircleMinus style={{ "fontSize": "large" }} />
                                                <div className="filter_metier_sous_block_content_txt">
                                                    <div className="filter_metier_sous_block_content_txt_formation">
                                                        Graphisme                                             </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">

                                                    </div>

                                                </div>
                                            </div>
                                        </div>

                                        <div className="filter_metier_sous_block" onClick={message_to_init_Filter_Change_url}>
                                            <div className="filter_metier_sous_block_plus_metier">
                                                <div className="filter_metier_sous_block_plus_metier_1">
                                                    +
                                                </div>
                                                <div className="filter_metier_sous_block_plus_metier_2">
                                                    Afficher plus de métiers
                                                </div>

                                            </div>
                                        </div>


                                    </div>
                                </div>}


                                {!NewSearchText && <div className="tab_critere_espace" >
                                    <div className="sous_filter_metier">

                                        <div className="filter_metier_sous_block" >
                                            <div className="filter_metier_sous_block_content" onClick={getClassByMetier}>
                                                <input className="frame_133_grp_radio" type="radio" value="tout" id="metier_radio" name="metier_radio" />

                                                <div className="filter_metier_sous_block_content_txt">
                                                    <div className="filter_metier_sous_block_content_txt_formation">
                                                        Tous les métiers
                                                    </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                        <div className="filter_metier_sous_block" >
                                            <div className="filter_metier_sous_block_content" onClick={getClassByMetier}>
                                                {mymetier && String(mymetier) === "management" &&
                                                    <input className="frame_133_grp_radio" type="radio" value="management" id="metier_radio" name="metier_radio" checked />}

                                                {!mymetier || String(mymetier) !== "management" &&
                                                    <input className="frame_133_grp_radio" type="radio" value="management" id="metier_radio" name="metier_radio" />}

                                                {!mymetier &&
                                                    <input className="frame_133_grp_radio" type="radio" value="management" id="metier_radio" name="metier_radio" />}


                                                <div className="filter_metier_sous_block_content_txt">
                                                    <div className="filter_metier_sous_block_content_txt_formation">
                                                        Management
                                                    </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">

                                                    </div>

                                                </div>
                                            </div>
                                        </div>


                                        <div className="filter_metier_sous_block">
                                            <div className="filter_metier_sous_block_content" onClick={getClassByMetier}>
                                                {mymetier && String(mymetier) === "IT" &&
                                                    <input className="frame_133_grp_radio" type="radio" value="IT" id="metier_radio" name="metier_radio" checked />}

                                                {!mymetier || String(mymetier) !== "IT" &&
                                                    <input className="frame_133_grp_radio" type="radio" value="IT" id="metier_radio" name="metier_radio" />}

                                                {!mymetier &&
                                                    <input className="frame_133_grp_radio" type="radio" value="IT" id="metier_radio" name="metier_radio" />}

                                                <div className="filter_metier_sous_block_content_txt">
                                                    <div className="filter_metier_sous_block_content_txt_formation">
                                                        Informatique
                                                    </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="filter_metier_sous_block">
                                            <div className="filter_metier_sous_block_content" onClick={getClassByMetier}>
                                                {mymetier && String(mymetier) === "graphisme" &&
                                                    <input className="frame_133_grp_radio" type="radio" value="graphisme" id="metier_radio" name="metier_radio" checked />}

                                                {!mymetier || String(mymetier) !== "graphisme" &&
                                                    <input className="frame_133_grp_radio" type="radio" value="graphisme" id="metier_radio" name="metier_radio" />}

                                                {!mymetier &&
                                                    <input className="frame_133_grp_radio" type="radio" value="graphisme" id="metier_radio" name="metier_radio" />}


                                                <div className="filter_metier_sous_block_content_txt">

                                                    <div className="filter_metier_sous_block_content_txt_formation">
                                                        Graphisme
                                                    </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="filter_metier_sous_block">
                                            <div className="filter_metier_sous_block_content" onClick={getClassByMetier}>
                                                {mymetier && String(mymetier) === "sante_nat" &&
                                                    <input className="frame_133_grp_radio" type="radio" value="sante_nat" id="metier_radio" name="metier_radio" checked />}

                                                {!mymetier || String(mymetier) !== "sante_nat" &&
                                                    <input className="frame_133_grp_radio" type="radio" value="sante_nat" id="metier_radio" name="metier_radio" />}

                                                {!mymetier &&
                                                    <input className="frame_133_grp_radio" type="radio" value="sante_nat" id="metier_radio" name="metier_radio" />}


                                                <div className="filter_metier_sous_block_content_txt">

                                                    <div className="filter_metier_sous_block_content_txt_formation">
                                                        Santé naturelle
                                                    </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>




                                        {!displayAllmetiers && <div className="filter_metier_sous_block" onClick={DisplayAllmetier}>
                                            <div className="filter_metier_sous_block_plus_metier">
                                                <div className="filter_metier_sous_block_plus_metier_1">
                                                    +
                                                </div>
                                                <div className="filter_metier_sous_block_plus_metier_2">
                                                    Afficher plus de métiers
                                                </div>

                                            </div>
                                        </div>}



                                        {displayAllmetiers && <div className="filter_metier_sous_block">
                                            <div className="filter_metier_sous_block_content" onClick={getClassByMetier}>
                                                <input className="frame_133_grp_radio" type="radio" value="dev_perso" id="metier_radio" name="metier_radio" />

                                                <div className="filter_metier_sous_block_content_txt">
                                                    <div className="filter_metier_sous_block_content_txt_formation">
                                                        Développement Personnel
                                                    </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">

                                                    </div>
                                                </div>

                                            </div>
                                        </div>}

                                        {displayAllmetiers && <div className="filter_metier_sous_block">
                                            <div className="filter_metier_sous_block_content" onClick={getClassByMetier}>
                                                {mymetier && String(mymetier) === "projets" &&
                                                    <input className="frame_133_grp_radio" type="radio" value="projets" id="metier_radio" name="metier_radio" checked />}

                                                {!mymetier || String(mymetier) !== "projets" &&
                                                    <input className="frame_133_grp_radio" type="radio" value="projets" id="metier_radio" name="metier_radio" />}

                                                {!mymetier &&
                                                    <input className="frame_133_grp_radio" type="radio" value="projets" id="metier_radio" name="metier_radio" />}

                                                <div className="filter_metier_sous_block_content_txt">
                                                    <div className="filter_metier_sous_block_content_txt_formation">
                                                        Projets
                                                    </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">

                                                    </div>
                                                </div>

                                            </div>
                                        </div>}
                                        {displayAllmetiers && <div className="filter_metier_sous_block">
                                            <div className="filter_metier_sous_block_content" onClick={getClassByMetier}>
                                                <input className="frame_133_grp_radio" type="radio" value="sport" id="metier_radio" name="metier_radio" />

                                                <div className="filter_metier_sous_block_content_txt">
                                                    <div className="filter_metier_sous_block_content_txt_formation">
                                                        Sport
                                                    </div>
                                                    <div className="filter_metier_sous_block_content_txt_nb">

                                                    </div>
                                                </div>

                                            </div>
                                        </div>}


                                        {displayAllmetiers && <div className="filter_metier_sous_block" onClick={DisplayAllmetier}>
                                            <div className="filter_metier_sous_block_plus_metier">
                                                <div className="filter_metier_sous_block_plus_metier_1">
                                                    -
                                                </div>
                                                <div className="filter_metier_sous_block_plus_metier_2">
                                                    Afficher Moins de métiers
                                                </div>

                                            </div>
                                        </div>}


                                    </div>
                                </div>}


                                {/*  <div className="tab_logo_metier">
                            <div className="criteres tab_gauche_metier">
                                <div className="met_polaroid_gauche" onClick={getClassByMetier} >
                                    <img src={img_met_program} alt="Formation Programmation" className="img_categorie" id="IT" name="programmation" />
                                    <div className="met_container">
                                        <p className="met_text" id="IT">Informatique </p>
                                    </div>
                                </div>
                            </div>


                            <div className="criteres tab_gauche_metier">
                                <div className="met_polaroid_gauche" onClick={getClassByMetier} >
                                    <img src={img_met_graphisme} alt="Formation graphisme" className="img_categorie" id="graphisme" />
                                    <div className="met_container">
                                        <p className="met_text" id="graphisme">Graphisme</p>
                                    </div>
                                </div>
                            </div>


                            <div className="criteres tab_gauche_metier">
                                <div className="met_polaroid_gauche" onClick={getClassByMetier}>
                                    <img src={img_met_projet} alt="Formation gestion projets" className="img_categorie" id="projets" />
                                    <div className="met_container">
                                        <p className="met_text" id="projets" >Projets </p>
                                    </div>
                                </div>
                            </div>

                            <div className="calage"> &nbsp; </div>

                            <div className="criteres tab_gauche_metier">
                                <div className="met_polaroid_gauche" onClick={getClassByMetier}>
                                    <img src={img_met_management} alt="Formation Management" className="img_categorie" id="management" />
                                    <div className="met_container">
                                        <p className="met_text" id="management">Management</p>
                                    </div>
                                </div>



                            </div>

                            <div className="criteres tab_gauche_metier">
                                <div className="met_polaroid_gauche" onClick={getClassByMetier}>
                                    <img src={img_met_digital} alt="Formation Digitale" className="img_categorie" id="digital" />
                                    <div className="met_container">
                                        <p className="met_text" id="digital">Digital </p>
                                    </div>
                                </div>
                            </div>

                            <div className="criteres tab_gauche_metier">
                                <div className="met_polaroid_gauche" onClick={getClassByMetier}>
                                    <img src={img_met_rh} alt="Ressources Humaines" className="img_categorie" id="RH" />
                                    <div className="met_container">
                                        <p className="met_text" id="RH">RH</p>
                                    </div>
                                </div>



                            </div>
                            <div className="calage"> &nbsp; </div>
                            <div className="criteres tab_gauche_metier">
                                <div className="met_polaroid_gauche" onClick={getClassByMetier}>
                                    <img src={img_met_market} alt="Marketing" className="img_categorie" id="marketing" />
                                    <div className="met_container">
                                        <p className="met_text" id="marketing">Marketing </p>
                                    </div>
                                </div>
                            </div>

                            <div className="criteres tab_gauche_metier">
                                <div className="met_polaroid_gauche" onClick={getClassByMetier}>
                                    <img src={img_met_bureautic} alt="Autres" className="img_categorie" id="Office" />
                                    <div className="met_container">
                                        <p className="met_text" id="Office">Bureautique</p>
                                    </div>
                                </div>

                            </div>


                            <div className="criteres tab_gauche_metier">
                                <div className="met_polaroid_gauche" onClick={getClassByMetier}>
                                    <img src={img_met_vente} alt="Commerce" className="img_categorie" id="vente" />
                                    <div className="met_container">
                                        <p className="met_text" id="vente">Commerce </p>
                                    </div>
                                </div>
                            </div>
                            <div className="calage"> &nbsp; </div>

                            <div className="criteres tab_gauche_metier">
                                <div className="met_polaroid_gauche" onClick={getClassByMetier}>
                                    <img src={img_met_dev_perso} alt="Autres" className="img_categorie" id="dev_perso" />
                                    <div className="met_container">
                                        <p className="met_text_larg" id="dev_perso">Dev. Personnel</p>
                                    </div>
                                </div>


                            </div>
                            <div className="calage"> &nbsp; </div>
                        </div>*/}

                                {/*<div>
                            <div className="criteres tab_gauche_all_categories" >
                                <div className="met_polaroid_gauche_all_categories" onClick={getClassByMetier} >
                                    <div className="met_container_all_categories">
                                        <p className="met_text_all_categories" id="tout" >Tous les Métiers </p>
                                    </div>
                                </div>
                            </div>
                </div>*/}




                            </div>
                            }

                            <div className="rech_middlebox" id="rech_middlebox">

                                <div className="forma_et_tuto_mobile"> Nos Formations</div>
                                {String(userconnected) === String("1") && <div>
                                    <label className="default_font">
                                        <i>Afficher toutes les formations :</i>  &nbsp;&nbsp;
                                        <input type="checkbox" onChange={displayAllClassesHandle} />
                                    </label>
                                </div>
                                }

                                {myApiResponse == "False" && <div className="koUpdateData">

                                    Impossible de contacter l'hote distant
                                </div>}

                                {myApiResponse == "True" && String(besoinaiderecherche) === String("1") && <div className="okUpdateData">

                                    Le resultat est vide, besoin d'aide ?
                                    <AideRecherche />

                                </div>}


                                {result && myApiResponse === "True" && !newresult &&
                                    <div className="okUpdateData">
                                        <div style={{ "width": "100%" }}>
                                            <div style={{ "width": "50%", "float": "left" }}>
                                                <Pagination
                                                    className="pagination-bar"
                                                    currentPage={currentPage2}
                                                    totalCount={result.length}
                                                    pageSize={PageSize}
                                                    onPageChange={page => setCurrentPage2(page)}
                                                />
                                            </div>
                                            <div style={{ "width": "40%", "float": "right" }}>
                                                <div className="input-group input-group-sm mb-3 ">
                                                    <span className="filter_span">Trier par </span>

                                                    <select className="filter_val"
                                                        id={"trierpar"} name={"trierpar"}
                                                        onChange={trier}>
                                                        <option value="price">Prix</option>

                                                        <option value="duration">Duree</option>
                                                        <option selected value="note">Pertinence</option>
                                                    </select>
                                                    <span style={{ width: '10%' }}><TbArrowsDownUp style={{ height: '2rem', paddingTop: '5px', width: '40%' }}
                                                        onClick={(e) => {
                                                            if (trier_par === "1")
                                                                settrier_par("-1");
                                                            else
                                                                settrier_par("1");

                                                            trier();
                                                        }}

                                                    /> </span>
                                                </div>
                                            </div>


                                        </div>


                                    </div>}

                                {result && myApiResponse === "True" && newresult &&
                                    <div className="okUpdateData">
                                        <Pagination
                                            className="pagination-bar2" style="padding: 0;"
                                            currentPage={currentPage2}
                                            totalCount={newresult.length}
                                            pageSize={PageSize}
                                            onPageChange={page => setCurrentPage2(page)}
                                        />


                                    </div>}


                                {newresult && (newresult.length <= PageSize) && <div className="okUpdateData">
                                    &nbsp;
                                    <br />
                                    &nbsp;
                                </div>}


                                {result && myApiResponse == "True" && fin == 0 && !newresult &&
                                    result.slice(0, PageSize).map((formation) => (
                                        <div className="rech_list_formation2" ref={inputEl} id="inputEl_element">

                                            <Formation_Partner_Catalog formation={JSON.parse(formation)} key={JSON.parse(formation).title} coeur={JSON.parse(formation).title} />
                                        </div>

                                    ))}

                                {result && myApiResponse == "True" && fin == 0 && newresult &&
                                    newresult.slice(0, PageSize).map((formation) => (
                                        <div className="rech_list_formation2">

                                            <Formation_Partner_Catalog formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
                                        </div>

                                    ))}



                                {result && myApiResponse === "True" && fin === 1 && !newresult
                                    && currentTableData2
                                    && currentTableData2.map((formation) => (
                                        <div className="rech_list_formation2">

                                            <Formation_Partner_Catalog formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
                                        </div>

                                    ))}

                                {result && myApiResponse === "True" && fin === 1 && newresult
                                    && currentTableData2
                                    && currentTableData2.map((formation) => (
                                        <div className="rech_list_formation2">

                                            <Formation_Partner_Catalog formation={JSON.parse(formation)} key={JSON.parse(formation).title} />
                                        </div>

                                    ))}


                                {result && !newresult && <div>

                                    {String(userconnected) === String("1") && <label className="default_font">
                                        <i>Afficher toutes les formations :</i>  &nbsp;&nbsp;
                                        <input type="checkbox" onChange={displayAllClassesHandle} />
                                    </label>}
                                    <Pagination
                                        className="pagination-bar2" style={{ 'padding': "0px" }}
                                        currentPage={currentPage2}
                                        totalCount={result.length}
                                        pageSize={PageSize}
                                        onPageChange={page => setCurrentPage2(page)}
                                    />
                                </div>
                                }

                                {result && newresult && <div>

                                    {String(userconnected) === String("1") && <label className="default_font">
                                        <i>Afficher toutes les formations :</i>  &nbsp;&nbsp;
                                        <input type="checkbox" onChange={displayAllClassesHandle} />
                                    </label>}
                                    <Pagination
                                        className="pagination-bar3" style="padding: 0;"
                                        currentPage={currentPage2}
                                        totalCount={newresult.length}
                                        pageSize={PageSize}
                                        onPageChange={page => setCurrentPage2(page)}
                                    />
                                </div>
                                }
                            </div>



                        </div>


                    </div>
                    <div className="pieddepage_v2" id="pieddepage_v2">

                        <Fotter_Catalog_Pub partner_data={New_Get_Subdomain_Partner_Data_result[0]} />
                    </div>

                </div>}
            {/******* FIN Gestion du THEME PAR DEFAULT " */}

        </div >

    );
}


export default Mon_Catalogue_Public;