import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { Button, FormGroup, Label, Input } from "reactstrap";
import { FacebookLoginButton, GoogleLoginButton } from "react-social-login-buttons";
//import { getCookie, setCookie, removeCookie  } from 'react-use-cookie';
import { Helmet } from "react-helmet";
import { useCookies } from "react-cookie";
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import tick_ok from "../mysy_img/tick_OK.png";
import tick_ko from "../mysy_img/tick_KO.png";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import axios from "axios";
import { useParams } from 'react-router-dom'
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import Header from "./Header";


function ProduitsServices() {
    const history = useHistory();
    const [check, setCheck] = useState(false);
    const [periode, setperiode] = useState("Mensuel");

    function handleChange(checked) {
        //this.setState({ checked });
        setCheck(checked);
        if (String(periode) === String("Mensuel")) {
            setperiode("Annuel");
        }
        else if (String(periode) === String("Annuel")) {
            setperiode("Mensuel");
        }
    }


    function Clik_bton_mensuel(e) {
        document.getElementsByName("bton_mensuel")[0].style.backgroundColor = "#81BC3A";
        document.getElementsByName("bton_mensuel")[0].style.opacity = "100%";

        document.getElementsByName("bton_annuel")[0].style.backgroundColor = "#F8F9F9";
        //document.getElementsByName("bton_annuel")[0].style.opacity = "60%";
        document.getElementsByName("bton_annuel")[0].style.color = "black";


        setperiode("Mensuel");
    }

    function Clik_bton_annuel(e) {
        document.getElementsByName("bton_annuel")[0].style.backgroundColor = "#81BC3A";
        document.getElementsByName("bton_annuel")[0].style.opacity = "100%";

        document.getElementsByName("bton_mensuel")[0].style.backgroundColor = "#F8F9F9";
        document.getElementsByName("bton_mensuel")[0].style.opacity = "60%";
        document.getElementsByName("bton_mensuel")[0].style.color = "black";

        setperiode("Annuel");
    }
    const [PartnerMenu, setPartnerMenu] = React.useState(null);
    const [AccountMenu, setAccountMenu] = React.useState(null);

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

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

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

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

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

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

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

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


    return (
        <div className="produitsservices">
                <div className="critere">

                    <div className="critere_gauche">

                        <div className="input-group input-group-sm mb-3">
                            <span className="input-group-text" id="inputGroup-sizing-sm3">Devise  </span>
                            <select className="form-select form-select-sm limite_input" onChange={"ChangeDevise"} aria-label=".form-select-sm example"
                                id={"devise"} name={"devise"}  >
                                <option selected value="euro">€</option>
                                {/*<option value="dollard">$ US</option>*/}

                            </select>
                        </div>
                    </div>
                    <div className="critere_droite">
                        <span className="span1"> Periodicité &nbsp; </span>
                        <button
                            onClick={Clik_bton_mensuel}
                            className="bton_radius_gauche"
                            id="bton_mensuel" name="bton_mensuel">Mensuelle
                        </button>


                        <button
                            onClick={Clik_bton_annuel}
                            className="bton_radius_droite"
                            id="bton_annuel" name="bton_annuel">Annuelle
                        </button>


                    </div>

                </div>
              

                <div className="div_row">
                    <div className="div_row_description">
                        <div className="div_basique_header">  &nbsp;
                        </div>
                        <div style={{ "marginBottom": "1rem", "background": "#E9ECEF" }}>
                            Produits & Services
                        </div>
                        <div className="produits_service_label">
                            Publication des formations
                        </div>
                        <div className="produits_service_label">
                            Support téléphonique
                        </div>

                        <div className="produits_service_label">
                            Customisation de l'affichage d'une formation
                        </div>
                        <div className="produits_service_label">
                            Mots clés par formation
                        </div>
                        <div className="produits_service_label">
                            Reporting standard
                        </div>
                        <div className="produits_service_label">
                            Reporting Dynamique et personnalisé
                        </div>
                        <div className="produits_service_label">
                            Préférence/ Diffusion géographique
                        </div>
                        <div className="produits_service_label">
                            Publication d'un article
                            (plateforme + réseaux sociaux )

                        </div>

                        <div className="produits_service_label">
                            Community management externalisé

                        </div>

                        <div className="produits_service_label">
                            Accompagnement aux certifications ( NDA, QUALIOPI,…)

                        </div>

                        <div className="produits_service_label">
                            Design catalogue numérique

                        </div>
                        <div className="produits_service_label">
                            ---

                        </div>
                        {/* <div className="div_row_description" >
                            {String(periode) === String("Mensuel") && <div style={{ "background": "#E9ECEF", "minHeight": "3.5rem", "paddingTop": "1rem" }}>
                                Prix par Mois

                            </div>}

                            {String(periode) === String("Annuel") && <div style={{ "background": "#E9ECEF", "minHeight": "3.5rem", "paddingTop": "1rem" }}>
                                Prix par An

                            </div>}

                    </div>*/}


                    </div>

                    <div className="div_row_basique">
                        <div className="div_basique_header">  Découverte </div>
                        <hr style={{ "margin": "0.2rem" }} />
                        <div style={{ "marginBottom": "0.5rem" }}>
                            &nbsp;
                        </div>

                        <div className="produits_service_tick">
                            5 Formations
                        </div>

                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>

                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            ----
                        </div>

                        <div className="div_row_basique_price">
                            Gratuit 15 jours
                        </div>
                        <div className="div_row_basique_price">
                            &nbsp;
                        </div>

                        <div className="abonnement">
                            <Button variant="contained"
                                color="success"
                                className="btn_abonnement"
                                onClick={(e) => {
                                    e.preventDefault();
                                    window.location.href = "/ContactezNous";
                                }}
                            > Je m'abonne  </Button>
                        </div>

                    </div>

                    <div className="div_row_standard">
                        <div className="div_standard_header"> Standard </div>
                        <hr style={{ "margin": "0.2rem" }} />
                        <div style={{ "marginBottom": "0.5rem" }}>
                            &nbsp;
                        </div>

                        <div className="produits_service_tick">
                            7 Formations
                        </div>

                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>

                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            ----
                        </div>

                        <div className="div_row_standard_price">

                            {String(periode) === String("Mensuel") && "50 €/mois"}
                           

                        </div>

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

                        <div className="abonnement">
                            <Button variant="contained"
                                color="success"
                                className="btn_abonnement"
                                onClick={(e) => {
                                    e.preventDefault();
                                    window.location.href = "/ContactezNous";
                                }}> Je m'abonne  </Button>
                        </div>


                    </div>

                    <div className="div_row_gold">
                        <div className="div_gold_header">   Gold </div>
                        <hr style={{ "margin": "0.2rem" }} />
                        <div style={{ "marginBottom": "0.5rem" }}>
                            &nbsp;
                        </div>

                        <div className="produits_service_tick">
                            10 Formations
                        </div>

                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>

                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>

                        <div className="produits_service_tick">
                            ----
                        </div>

                        <div className="div_row_gold_price">
                            {String(periode) === String("Mensuel") && "550 €/mois"}
                            {String(periode) === String("Annuel") && "4 950 €/an - (3 mois offerts)"}

                        </div>

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

                        <div className="abonnement">
                            <Button variant="contained"
                                color="success"
                                className="btn_abonnement"
                                onClick={(e) => {
                                    e.preventDefault();
                                    window.location.href = "/ContactezNous";
                                }}
                            > Je m'abonne  </Button>
                        </div>


                    </div>

                    <div className="div_row_sur_mesure">
                        <div className="div_sur_mesure_header">   Sur mesure </div>
                        <hr style={{ "margin": "0.2rem" }} />
                        <div style={{ "marginBottom": "0.5rem" }}>
                            &nbsp;
                        </div>

                        <div className="produits_service_tick">
                            Illimité
                        </div>

                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>

                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>

                        <div className="produits_service_tick">
                            ----
                        </div>

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

                        <div className="abonnement">
                            <Button variant="contained"
                                color="success"
                                className="btn_abonnement_sur_mesure"
                                style={{ "whiteSpace": "nowrap", "paddingLeft": "1px" }}
                                onClick={(e) => {
                                    e.preventDefault();
                                    window.location.href = "/ContactezNous";
                                }}
                            > CONTACTEZ-NOUS  </Button>
                        </div>

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

                </div>
            </div>

    );


}

export default ProduitsServices;