{"version":3,"file":"static/js/557.039e8db3.chunk.js","mappings":"uOACA,SAAgB,gBAAkB,qCAAqC,kBAAoB,uCAAuC,aAAe,kCAAkC,aAAe,kCAAkC,YAAc,iCAAiC,UAAY,+BAA+B,UAAY,+BAA+B,aAAe,kCAAkC,WAAa,gCAAgC,iBAAmB,uCCA1d,EAA0B,oCAA1B,EAAqF,iDAArF,EAAsJ,0CAAtJ,EAAiN,2CAAjN,EAAsQ,oCAAtQ,EAAiU,iDAAjU,EAAgY,wCAAhY,EAAib,mCAAjb,EAA0d,gCAA1d,EAA6gB,6C,2LCU7gB,MAqIA,EArI0BA,KACtB,MAAOC,EAAgBC,IAAqBC,EAAAA,EAAAA,UAAS,GAC/CC,GAAcC,EAAAA,EAAAA,QAAO,MACrBC,GAAWD,EAAAA,EAAAA,QAAO,KAClB,KAAEE,IAASC,EAAAA,EAAAA,MACVC,EAAMC,IAAWP,EAAAA,EAAAA,UAAS,OAEjCQ,EAAAA,EAAAA,YAAU,KACN,MAAMC,EAAcC,EAAAA,EAAKC,MAAKC,GAAQA,EAAKR,OAASA,IACpDG,EAAQE,EAAY,GACrB,CAACL,IAGJ,MAAMS,EAAiBA,KACnB,IAAKZ,EAAYa,UAAYX,EAASW,QAAQC,OAAQ,OAEtD,MAAMC,EAAef,EAAYa,QAAQG,wBACnCC,EAAcF,EAAaG,OAC3BC,EAAgBC,KAAKC,IAAIC,OAAOC,YAAcR,EAAaS,IAAKP,GAGhEQ,EAAWL,KAAKM,IAAKP,EAAgBF,EAAe,IAAK,GAC/DnB,EAAkB2B,EAAS,EAiB/B,OAdAlB,EAAAA,EAAAA,YAAU,KACN,MAAMoB,EAAwBA,IAAMf,IAOpC,OALAU,OAAOM,iBAAiB,SAAUD,GAClCL,OAAOM,iBAAiB,SAAUD,GAElCf,IAEO,KACHU,OAAOO,oBAAoB,SAAUF,GACrCL,OAAOO,oBAAoB,SAAUF,EAAsB,CAC9D,GACF,KAGCG,EAAAA,EAAAA,MAAAC,EAAAA,SAAA,CAAAC,SAAA,EAEIF,EAAAA,EAAAA,MAAA,OACIG,UAAWC,EAAOC,kBAClBC,IAAKpC,EACLqC,MAAO,CACHC,gBAAgB,OAADC,OAASC,EAAU,KAClCC,eAAgB,QAChBC,mBAAoB,SACpBC,iBAAkB,aACpBX,SAAA,EAEFY,EAAAA,EAAAA,KAAA,OAAKX,UAAWC,EAAOW,gBAAgBb,SAClC3B,GACGyB,EAAAA,EAAAA,MAAA,KAAAE,SAAA,CAAG,sCAAkCY,EAAAA,EAAAA,KAAA,QAAMP,MAAO,CAAES,MAAO,WAAYd,SAAE3B,EAAK0C,kBAAuB,uBAErGH,EAAAA,EAAAA,KAAA,KAAAZ,SAAG,kBAIXF,EAAAA,EAAAA,MAAA,OAAKG,UAAWC,EAAOc,YAAYhB,SAAA,EAC/BY,EAAAA,EAAAA,KAAA,OAAKX,UAAWC,EAAOe,aAAajB,UAChCY,EAAAA,EAAAA,KAAA,OACIX,UAAWC,EAAOgB,aAClBb,MAAO,CAAEnB,OAAO,GAADqB,OAAK1C,EAAc,UAKzCQ,GAAQA,EAAK8C,gBAAkB9C,EAAK8C,eAAeC,KAAI,CAACC,EAAOC,KAC5DxB,EAAAA,EAAAA,MAAA,OAEIG,UAAS,GAAAM,OAAKL,EAAOqB,UAAS,KAAAhB,OAAIL,EAAO,QAADK,OAASe,EAAQ,KACzDlB,IAAMoB,GAAQtD,EAASW,QAAQyC,GAASE,EAAIxB,SAAA,EAE5CY,EAAAA,EAAAA,KAAA,OAAKX,UAAWC,EAAOuB,UAAUzB,UAC7BY,EAAAA,EAAAA,KAACc,EAAAA,EAAe,CAACC,KAAMN,EAAMM,KAAM1B,UAAWoB,EAAMO,eAExD9B,EAAAA,EAAAA,MAAA,OAAKG,UAAWC,EAAO2B,aAAa7B,SAAA,EAChCY,EAAAA,EAAAA,KAAA,MAAIX,UAAWC,EAAO4B,WAAW9B,SAAEqB,EAAMU,SACzCnB,EAAAA,EAAAA,KAAA,KAAGX,UAAWC,EAAO8B,iBAAiBhC,SACjCqB,EAAMY,mBAVVX,YAmBrBV,EAAAA,EAAAA,KAAA,OAAKX,UAAWiC,EAA2BlC,UACvCF,EAAAA,EAAAA,MAAA,OAAKG,UAAWiC,EAAwClC,SAAA,EACpDF,EAAAA,EAAAA,MAAA,OAAKG,UAAWiC,EAAiClC,SAAA,EAC7CF,EAAAA,EAAAA,MAAA,MAAIG,UAAWiC,EAA2BlC,SAAA,CAAC,OACpCY,EAAAA,EAAAA,KAAA,QAAAZ,SAAM,uBAEbF,EAAAA,EAAAA,MAAA,OAAKG,UAAWiC,EAAwClC,SAAA,EACpDF,EAAAA,EAAAA,MAAA,KAAGG,UAAWiC,EAA+BlC,SAAA,EACzCY,EAAAA,EAAAA,KAAA,QAAMX,UAAWiC,EAA0BlC,UACvCY,EAAAA,EAAAA,KAACc,EAAAA,EAAe,CAACC,KAAMQ,EAAAA,QACpB,yCAGXrC,EAAAA,EAAAA,MAAA,KAAGG,UAAWiC,EAA+BlC,SAAA,EACzCY,EAAAA,EAAAA,KAAA,QAAMX,UAAWiC,EAA0BlC,UACvCY,EAAAA,EAAAA,KAACc,EAAAA,EAAe,CAACC,KAAMS,EAAAA,QACpB,sCAGXtC,EAAAA,EAAAA,MAAA,KAAGG,UAAWiC,EAA+BlC,SAAA,EACzCY,EAAAA,EAAAA,KAAA,QAAMX,UAAWiC,EAA0BlC,UACvCY,EAAAA,EAAAA,KAACc,EAAAA,EAAe,CAACC,KAAMU,EAAAA,QACpB,kCAGXzB,EAAAA,EAAAA,KAAA,OAAKX,UAAWiC,EAAuBlC,UACnCY,EAAAA,EAAAA,KAAC0B,EAAAA,EAAY,CAACC,MAAM,2BAIhC3B,EAAAA,EAAAA,KAAA,OAAKX,UAAWiC,EAAkClC,UAC9CY,EAAAA,EAAAA,KAAA,OACI4B,IAAKnE,GAAQA,EAAKoE,YAAcpE,EAAKoE,YAAcA,EACnDC,IAAI,sBACJzC,UAAWiC,aAK5B,C,kFCvIX,MAiBA,EAjBqBS,IAA0B,IAAzB,MAAEJ,EAAK,SAAEK,GAAUD,EACvC,MAAOE,EAAgBC,IAAqB/E,EAAAA,EAAAA,WAAS,GAE/CgF,EAAcA,KAClBD,GAAmBD,EAAe,EAGpC,OACE/C,EAAAA,EAAAA,MAAA,OAAKG,UAAW+C,EAAAA,EAAYC,aAAajD,SAAA,EACvCY,EAAAA,EAAAA,KAAA,UAAQX,UAAW+C,EAAAA,EAAYE,SAAUC,QAASJ,EAAY/C,UAC5DF,EAAAA,EAAAA,MAAA,QAAAE,SAAA,CAAM,IAAEuC,OAGTM,IAAkBjC,EAAAA,EAAAA,KAACwC,EAAAA,EAAU,CAACC,QAASN,EAAaH,SAAUA,EAAUU,WAAW,iBAChF,C,yGCbV,MA0LA,EA1LmBX,IAAwC,IAAvC,QAAEU,EAAO,SAAET,EAAQ,WAAEU,GAAYX,EACjD,MAAM,KAAExE,IAASC,EAAAA,EAAAA,MACVC,EAAMC,IAAWP,EAAAA,EAAAA,UAAS,OAC1BwF,EAAWC,IAAgBzF,EAAAA,EAAAA,WAAS,GACrC0F,GAAWC,EAAAA,EAAAA,OAEVC,EAAUC,IAAe7F,EAAAA,EAAAA,UAAS,CACrC8F,SAAU,GACVC,MAAO,GACPC,MAAO,GACPC,OAAQ,GACRC,KAAM,GACNC,QAAS5E,OAAO6E,SAASC,KACzBjG,KAAMA,GAAQ,GACdmF,WAAYA,GAAc,MAI9B/E,EAAAA,EAAAA,YAAU,KACN,MAAMC,EAAcC,EAAAA,EAAKC,MAAKL,GAAQA,EAAKF,OAASA,IACpDG,EAAQE,EAAY,GACrB,CAACL,IAEJ,MAoDMkG,EAAgBC,IAClB,MAAM,KAAEC,EAAI,MAAEC,GAAUF,EAAEG,OAC1Bb,EAAY,IAAKD,EAAU,CAACY,GAAOC,GAAQ,EAG/C,OACI1E,EAAAA,EAAAA,MAAA,OAAKG,UAAWC,EAAAA,EAAOwE,QAAQ1E,SAAA,CAE1BuD,IACG3C,EAAAA,EAAAA,KAAA,OAAKX,UAAWC,EAAAA,EAAOyE,eAAe3E,UAClCY,EAAAA,EAAAA,KAACgE,EAAAA,SAAQ,CAACC,UAAUjE,EAAAA,EAAAA,KAAA,OAAAZ,SAAK,eAAiBA,UACtCY,EAAAA,EAAAA,KAACkE,EAAAA,EAAO,SAKpBhF,EAAAA,EAAAA,MAAA,OAAKG,UAAWC,EAAAA,EAAO6E,cAAc/E,SAAA,EACjCY,EAAAA,EAAAA,KAAA,UACIX,UAAWC,EAAAA,EAAO8E,YAClB7B,QAASE,EACT,aAAW,aAAYrD,SAC1B,UAGDF,EAAAA,EAAAA,MAAA,QAAAE,SAAA,EACIY,EAAAA,EAAAA,KAAA,MAAAZ,SAAI,gBAEJY,EAAAA,EAAAA,KAAA,OAAKX,UAAWC,EAAAA,EAAO+E,UAAUjF,UAC7BY,EAAAA,EAAAA,KAAA,SACIsE,KAAK,OACLX,KAAK,WACLY,YAAY,YACZX,MAAOb,EAASE,SAChBuB,SAAUf,EACVgB,UAAQ,OAKhBzE,EAAAA,EAAAA,KAAA,OAAKX,UAAWC,EAAAA,EAAO+E,UAAUjF,UAC7BY,EAAAA,EAAAA,KAAA,SACIsE,KAAK,QACLX,KAAK,QACLY,YAAY,QACZX,MAAOb,EAASG,MAChBsB,SAAUf,EACVgB,UAAQ,OAKhBzE,EAAAA,EAAAA,KAAA,OAAKX,UAAWC,EAAAA,EAAO+E,UAAUjF,UAC7BY,EAAAA,EAAAA,KAAA,SACIsE,KAAK,MACLX,KAAK,QACLY,YAAY,eACZX,MAAOb,EAASI,MAChBqB,SAAUf,EACVgB,UAAQ,OAKhBzE,EAAAA,EAAAA,KAAA,OAAKX,UAAWC,EAAAA,EAAO+E,UAAUjF,UAC7BF,EAAAA,EAAAA,MAAA,UACIyE,KAAK,SACLC,MAAOb,EAASK,OAChBoB,SAAUf,EACVgB,UAAQ,EAAArF,SAAA,EAERY,EAAAA,EAAAA,KAAA,UAAQ4D,MAAM,GAAExE,SAAC,kBAChB3B,GAAQA,EAAKiH,sBAAwBjH,EAAKiH,qBAAqBxG,OAAS,EACrET,EAAKiH,qBAAqBlE,KAAK4C,IAC3BpD,EAAAA,EAAAA,KAAA,UAAgC4D,MAAOR,EAAOuB,WAAWvF,SACpDgE,EAAOuB,YADCvB,EAAOwB,eAKxB5E,EAAAA,EAAAA,KAAA,UAAQ6E,UAAQ,EAAAzF,SAAC,+BAM7BY,EAAAA,EAAAA,KAAA,OAAKX,UAAWC,EAAAA,EAAO+E,UAAUjF,UAC7BF,EAAAA,EAAAA,MAAA,UACIyE,KAAK,OACLC,MAAOb,EAASM,KAChBmB,SAAUf,EACVgB,UAAQ,EAAArF,SAAA,EAERY,EAAAA,EAAAA,KAAA,UAAQ4D,MAAM,GAAExE,SAAC,0BACjBY,EAAAA,EAAAA,KAAA,UAAQ4D,MAAM,SAAQxE,SAAC,YACvBY,EAAAA,EAAAA,KAAA,UAAQ4D,MAAM,UAASxE,SAAC,kBAKhCY,EAAAA,EAAAA,KAAA,UACIsE,KAAK,SACLjF,UAAWC,EAAAA,EAAOwF,aAClBvC,QAvJCwC,UACjBrB,EAAEsB,iBACF,MAAM,SAAE/B,EAAQ,MAAEC,EAAK,MAAEC,EAAK,WAAET,EAAU,OAAEU,EAAM,KAAEC,EAAI,QAAEC,EAAO,KAAE/F,GAASwF,EAG5E,GADmB,WACHkC,KAAK9B,GAMrB,GAAKF,GAAaC,GAAUC,GAAUC,GAAWC,EAAjD,CAKAT,GAAa,GAEb,IACI,MAAMsC,EAAc,IAAIC,SACxBD,EAAYE,OAAO,WAAYrC,EAASE,UACxCiC,EAAYE,OAAO,QAASrC,EAASG,OACrCgC,EAAYE,OAAO,QAASrC,EAASI,OACrC+B,EAAYE,OAAO,aAAc1C,GACjCwC,EAAYE,OAAO,SAAUrC,EAASK,QACtC8B,EAAYE,OAAO,OAAQrC,EAASM,MACpC6B,EAAYE,OAAO,UAAW9B,GAC9B4B,EAAYE,OAAO,OAAQ7H,GAG3B,MAAM8H,QAAiBC,MAhCb,mHAgC8B,CACpCC,OAAQ,OACRC,KAAMN,IAGVtC,GAAa,GAETyC,EAASI,IACTC,MAAM,gCACN7C,EAAS,eAET6C,MAAM,2CAEd,CAAE,MAAOC,GACL/C,GAAa,GACbgD,QAAQD,MAAM,SAAUA,GACxBD,MAAM,0CACV,CAjCA,MAFIA,MAAM,4CANNA,MAAM,8CAyCV,EAwGsCtG,SAErBuD,EAAY,gBAAkB,mBAIzC,C,mCC3Ld,SAAgB,QAAU,2BAA2B,eAAiB,kCAAkC,cAAgB,iCAAiC,UAAY,6BAA6B,aAAe,gCAAgC,YAAc,+B","sources":["webpack://Top Choice for Training in Hyderabad - Social Prachar/./src/components/Pageslices/Certificatepart/Certificate.module.css?41e3","webpack://Top Choice for Training in Hyderabad - Social Prachar/./src/components/Pageslices/Certificatepart/CertificateStyling.module.css?942b","components/Pageslices/Certificatepart/Certificate.js","components/Pageslices/Enrollbutton/Enrollbutton.js","components/Pageslices/Enrollbutton/PopupSignInForm.js","webpack://Top Choice for Training in Hyderabad - Social Prachar/./src/components/Pageslices/Enrollbutton/PopUpForm.module.css?5a53"],"sourcesContent":["// extracted by mini-css-extract-plugin\nexport default {\"timelineHeading\":\"Certificate_timelineHeading__PRx1v\",\"timelineContainer\":\"Certificate_timelineContainer__VthgC\",\"timelineLine\":\"Certificate_timelineLine__9lSP0\",\"progressLine\":\"Certificate_progressLine__U2CVB\",\"courseLevel\":\"Certificate_courseLevel__AnK-e\",\"levelCard\":\"Certificate_levelCard__M7Qrr\",\"levelIcon\":\"Certificate_levelIcon__bzev-\",\"levelContent\":\"Certificate_levelContent__wMX5e\",\"levelTitle\":\"Certificate_levelTitle__YsWVR\",\"levelDescription\":\"Certificate_levelDescription__EBhqN\"};","// extracted by mini-css-extract-plugin\nexport default {\"content\":\"CertificateStyling_content__W7hvn\",\"certificateContainer\":\"CertificateStyling_certificateContainer__p774i\",\"textContainer\":\"CertificateStyling_textContainer__rxFY3\",\"imageContainer\":\"CertificateStyling_imageContainer__aNSh9\",\"heading\":\"CertificateStyling_heading__FvdAa\",\"descriptionContainer\":\"CertificateStyling_descriptionContainer__M7ytb\",\"description\":\"CertificateStyling_description__eVpvj\",\"symbol\":\"CertificateStyling_symbol__cwRIr\",\"btn\":\"CertificateStyling_btn__cvNKD\",\"certificateImage\":\"CertificateStyling_certificateImage__cCApp\"};","import React, { useEffect, useRef, useState } from \"react\";\r\nimport styles from \"./Certificate.module.css\";\r\nimport certificateStyling from './CertificateStyling.module.css';\r\nimport background from '../../../assets/background.png';\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCircleCheck, faCrown, faShareNodes } from \"@fortawesome/free-solid-svg-icons\";\r\nimport EnrollButton from '../Enrollbutton/Enrollbutton';\r\nimport certificate from '../../../assets/AssetsOfDetailsPage/1-1.png';\r\nimport { data } from '../../Cards/CardData';\r\nimport { useParams } from \"react-router-dom\";\r\n\r\nconst TimelineComponent = () => {\r\n    const [progressHeight, setProgressHeight] = useState(0);\r\n    const timelineRef = useRef(null);\r\n    const cardRefs = useRef([]);\r\n    const { slug } = useParams();\r\n    const [card, setCard] = useState(null);\r\n\r\n    useEffect(() => {\r\n        const cardDetails = data.find(item => item.slug === slug);\r\n        setCard(cardDetails);\r\n    }, [slug]);\r\n\r\n    // Update progress line based on visible cards\r\n    const updateProgress = () => {\r\n        if (!timelineRef.current || !cardRefs.current.length) return;\r\n\r\n        const timelineRect = timelineRef.current.getBoundingClientRect();\r\n        const totalHeight = timelineRect.height;\r\n        const visibleHeight = Math.min(window.innerHeight - timelineRect.top, totalHeight);\r\n\r\n        // Ensure visibleHeight is non-negative\r\n        const progress = Math.max((visibleHeight / totalHeight) * 100, 0);\r\n        setProgressHeight(progress);\r\n    };\r\n\r\n    useEffect(() => {\r\n        const handleScrollAndResize = () => updateProgress();\r\n\r\n        window.addEventListener(\"scroll\", handleScrollAndResize);\r\n        window.addEventListener(\"resize\", handleScrollAndResize);\r\n\r\n        updateProgress(); // Initial calculation\r\n\r\n        return () => {\r\n            window.removeEventListener(\"scroll\", handleScrollAndResize);\r\n            window.removeEventListener(\"resize\", handleScrollAndResize);\r\n        };\r\n    }, []);\r\n\r\n    return (\r\n        <>\r\n            {/* Timeline Section */}\r\n            <div\r\n                className={styles.timelineContainer}\r\n                ref={timelineRef}\r\n                style={{\r\n                    backgroundImage: `url(${background})`,\r\n                    backgroundSize: \"cover\",\r\n                    backgroundPosition: \"center\",\r\n                    backgroundRepeat: \"no-repeat\",\r\n                }}\r\n            >\r\n                <div className={styles.timelineHeading}>\r\n                    {card ? (\r\n                        <p>Your Path to Becoming a Job-Ready <span style={{ color: \"#ff5003\" }}>{card.timeLineHeading}</span> Starts Here!</p>\r\n                    ) : (\r\n                        <p>Loading...</p>\r\n                    )}\r\n                </div>\r\n\r\n                <div className={styles.courseLevel}>\r\n                    <div className={styles.timelineLine}>\r\n                        <div\r\n                            className={styles.progressLine}\r\n                            style={{ height: `${progressHeight}%` }}\r\n                        />\r\n                    </div>\r\n\r\n                    {/* Dynamic Level Cards */}\r\n                    {card && card.levelcardIndex && card.levelcardIndex.map((level, index) => (\r\n                        <div\r\n                            key={index}\r\n                            className={`${styles.levelCard} ${styles[`level${index + 1}`]}`}\r\n                            ref={(el) => (cardRefs.current[index] = el)}\r\n                        >\r\n                            <div className={styles.levelIcon}>\r\n                                <FontAwesomeIcon icon={level.icon} className={level.iconClass} />\r\n                            </div>\r\n                            <div className={styles.levelContent}>\r\n                                <h3 className={styles.levelTitle}>{level.title}</h3>\r\n                                <p className={styles.levelDescription}>\r\n                                    {level.description}\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    ))}\r\n                </div>\r\n            </div>\r\n\r\n            {/* Certificate Section */}\r\n            <div className={certificateStyling.content}>\r\n                <div className={certificateStyling.certificateContainer}>\r\n                    <div className={certificateStyling.textContainer}>\r\n                        <h3 className={certificateStyling.heading}>\r\n                            Get<span>&nbsp; Certified</span>\r\n                        </h3>\r\n                        <div className={certificateStyling.descriptionContainer}>\r\n                            <p className={certificateStyling.description}>\r\n                                <span className={certificateStyling.symbol}>\r\n                                    <FontAwesomeIcon icon={faCrown} />\r\n                                </span>\r\n                                Earn your credentials of Expertise\r\n                            </p>\r\n                            <p className={certificateStyling.description}>\r\n                                <span className={certificateStyling.symbol}>\r\n                                    <FontAwesomeIcon icon={faShareNodes} />\r\n                                </span>\r\n                                Share your verified certificate\r\n                            </p>\r\n                            <p className={certificateStyling.description}>\r\n                                <span className={certificateStyling.symbol}>\r\n                                    <FontAwesomeIcon icon={faCircleCheck} />\r\n                                </span>\r\n                                Add certificate on LinkedIn\r\n                            </p>\r\n                            <div className={certificateStyling.btn}>\r\n                                <EnrollButton label=\"Upskill Today\" />\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div className={certificateStyling.imageContainer}>\r\n                        <img\r\n                            src={card && card.certificate ? card.certificate : certificate} \r\n                            alt=\"Certificate Preview\"\r\n                            className={certificateStyling.certificateImage}\r\n                        />\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </>\r\n    );\r\n};\r\n\r\nexport default TimelineComponent;\r\n","// EnrollButton.js\r\nimport React, { useState } from 'react';\r\nimport Buttonstyle from './Enrollbutton.module.css';\r\nimport SignInForm from './PopupSignInForm.js';\r\n\r\nconst EnrollButton = ({ label, courseID }) => {\r\n  const [isPopupVisible, setIsPopupVisible] = useState(false);\r\n\r\n  const togglePopup = () => {\r\n    setIsPopupVisible(!isPopupVisible);\r\n  };\r\n\r\n  return (\r\n    <div className={Buttonstyle.Enrollbutton}>\r\n      <button className={Buttonstyle.shinebtn} onClick={togglePopup}>\r\n        <span> {label}</span>\r\n      </button>\r\n\r\n      {isPopupVisible && <SignInForm onClose={togglePopup} courseID={courseID} actionType=\"Enroll Now\"/>}\r\n    </div>\r\n  );\r\n};\r\nexport default EnrollButton;\r\n","import React, { useState, useEffect, Suspense } from 'react';\r\nimport styles from './PopUpForm.module.css';\r\nimport { data } from './../../Cards/CardData';\r\nimport { useNavigate, useParams } from 'react-router-dom';\r\nimport Loading from '../../extraComponents/loading';\r\n\r\nconst SignInForm = ({ onClose, courseID, actionType }) => {\r\n    const { slug } = useParams();\r\n    const [card, setCard] = useState(null);\r\n    const [isLoading, setIsLoading] = useState(false);\r\n    const navigate = useNavigate();\r\n\r\n    const [formData, setFormData] = useState({\r\n        fullName: '',\r\n        email: '',\r\n        phone: '',\r\n        course: '',\r\n        mode: '',\r\n        pageUrl: window.location.href,\r\n        slug: slug || \"\",\r\n        actionType: actionType || \"\"\r\n    });\r\n\r\n\r\n    useEffect(() => {\r\n        const cardDetails = data.find(card => card.slug === slug);\r\n        setCard(cardDetails);\r\n    }, [slug]);\r\n\r\n    const scriptURL = 'https://script.google.com/macros/s/AKfycbyiFH6YnpFoN2CeaCSOIB5Uv0667e_H3u183xrWTeK95GHV7iUBO1TPn40C6ydXYME2/exec';\r\n\r\n    const handleSubmit = async (e) => {\r\n        e.preventDefault();\r\n        const { fullName, email, phone, actionType, course, mode, pageUrl, slug } = formData;\r\n\r\n        const phoneRegex = /^\\d{10}$/;\r\n        if (!phoneRegex.test(phone)) {\r\n            alert(\"Please enter a valid 10-digit phone number.\");\r\n            return;\r\n        }\r\n\r\n\r\n        if (!fullName || !email || !phone || !course || !mode) {\r\n            alert('Please fill in all required fields.');\r\n            return;\r\n        }\r\n\r\n        setIsLoading(true); // Show loading spinner\r\n\r\n        try {\r\n            const formPayload = new FormData();\r\n            formPayload.append('fullName', formData.fullName);\r\n            formPayload.append('email', formData.email);\r\n            formPayload.append('phone', formData.phone);\r\n            formPayload.append('actionType', actionType);\r\n            formPayload.append('course', formData.course);\r\n            formPayload.append('mode', formData.mode);\r\n            formPayload.append('pageUrl', pageUrl); // Send Page URL\r\n            formPayload.append('slug', slug); // Send Page Slug\r\n\r\n\r\n            const response = await fetch(scriptURL, {\r\n                method: 'POST',\r\n                body: formPayload,\r\n            });\r\n\r\n            setIsLoading(false);\r\n\r\n            if (response.ok) {\r\n                alert('Form submitted successfully!');\r\n                navigate('/thank-you');\r\n            } else {\r\n                alert('Failed to submit form. Please try again.');\r\n            }\r\n        } catch (error) {\r\n            setIsLoading(false);\r\n            console.error('Error:', error);\r\n            alert('There was an error submitting the form.');\r\n        }\r\n    };\r\n\r\n    const handleChange = (e) => {\r\n        const { name, value } = e.target;\r\n        setFormData({ ...formData, [name]: value });\r\n    };\r\n\r\n    return (\r\n        <div className={styles.overlay}>\r\n            {/* Lazy Loading Spinner at the top */}\r\n            {isLoading && (\r\n                <div className={styles.loadingOverlay}>\r\n                    <Suspense fallback={<div>Loading...</div>}>\r\n                        <Loading />\r\n                    </Suspense>\r\n                </div>\r\n            )}\r\n\r\n            <div className={styles.formContainer}>\r\n                <button\r\n                    className={styles.closeButton}\r\n                    onClick={onClose}\r\n                    aria-label=\"Close Form\"\r\n                >\r\n                    &times;\r\n                </button>\r\n                <form>\r\n                    <h2>Enroll Now</h2>\r\n                    {/* Full Name */}\r\n                    <div className={styles.formGroup}>\r\n                        <input\r\n                            type=\"text\"\r\n                            name=\"fullName\"\r\n                            placeholder=\"Full Name\"\r\n                            value={formData.fullName}\r\n                            onChange={handleChange}\r\n                            required\r\n                        />\r\n                    </div>\r\n\r\n                    {/* Email */}\r\n                    <div className={styles.formGroup}>\r\n                        <input\r\n                            type=\"email\"\r\n                            name=\"email\"\r\n                            placeholder=\"Email\"\r\n                            value={formData.email}\r\n                            onChange={handleChange}\r\n                            required\r\n                        />\r\n                    </div>\r\n\r\n                    {/* Phone Number */}\r\n                    <div className={styles.formGroup}>\r\n                        <input\r\n                            type=\"tel\"\r\n                            name=\"phone\"\r\n                            placeholder=\"Phone Number\"\r\n                            value={formData.phone}\r\n                            onChange={handleChange}\r\n                            required\r\n                        />\r\n                    </div>\r\n\r\n                    {/* Select Course */}\r\n                    <div className={styles.formGroup}>\r\n                        <select\r\n                            name=\"course\"\r\n                            value={formData.course}\r\n                            onChange={handleChange}\r\n                            required\r\n                        >\r\n                            <option value=\"\">Select Course</option>\r\n                            {card && card.popUpDropDownCourses && card.popUpDropDownCourses.length > 0 ? (\r\n                                card.popUpDropDownCourses.map((course) => (\r\n                                    <option key={course.dropDownid} value={course.courseName}>\r\n                                        {course.courseName}\r\n                                    </option>\r\n                                ))\r\n                            ) : (\r\n                                <option disabled>No available courses</option>\r\n                            )}\r\n                        </select>\r\n                    </div>\r\n\r\n                    {/* Select Training Mode */}\r\n                    <div className={styles.formGroup}>\r\n                        <select\r\n                            name=\"mode\"\r\n                            value={formData.mode}\r\n                            onChange={handleChange}\r\n                            required\r\n                        >\r\n                            <option value=\"\">Select Training Mode</option>\r\n                            <option value=\"Online\">Online</option>\r\n                            <option value=\"Offline\">Offline</option>\r\n                        </select>\r\n                    </div>\r\n\r\n                    {/* Submit Button */}\r\n                    <button\r\n                        type=\"submit\"\r\n                        className={styles.submitButton}\r\n                        onClick={handleSubmit}\r\n                    >\r\n                        {isLoading ? 'Submitting...' : 'Submit'}\r\n                    </button>\r\n                </form>\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default SignInForm;\r\n","// extracted by mini-css-extract-plugin\nexport default {\"overlay\":\"PopUpForm_overlay__It6SE\",\"loadingOverlay\":\"PopUpForm_loadingOverlay__7YVjw\",\"formContainer\":\"PopUpForm_formContainer__AuNgd\",\"formGroup\":\"PopUpForm_formGroup__gBm+J\",\"submitButton\":\"PopUpForm_submitButton__L34e2\",\"closeButton\":\"PopUpForm_closeButton__SEQea\"};"],"names":["TimelineComponent","progressHeight","setProgressHeight","useState","timelineRef","useRef","cardRefs","slug","useParams","card","setCard","useEffect","cardDetails","data","find","item","updateProgress","current","length","timelineRect","getBoundingClientRect","totalHeight","height","visibleHeight","Math","min","window","innerHeight","top","progress","max","handleScrollAndResize","addEventListener","removeEventListener","_jsxs","_Fragment","children","className","styles","timelineContainer","ref","style","backgroundImage","concat","background","backgroundSize","backgroundPosition","backgroundRepeat","_jsx","timelineHeading","color","timeLineHeading","courseLevel","timelineLine","progressLine","levelcardIndex","map","level","index","levelCard","el","levelIcon","FontAwesomeIcon","icon","iconClass","levelContent","levelTitle","title","levelDescription","description","certificateStyling","faCrown","faShareNodes","faCircleCheck","EnrollButton","label","src","certificate","alt","_ref","courseID","isPopupVisible","setIsPopupVisible","togglePopup","Buttonstyle","Enrollbutton","shinebtn","onClick","SignInForm","onClose","actionType","isLoading","setIsLoading","navigate","useNavigate","formData","setFormData","fullName","email","phone","course","mode","pageUrl","location","href","handleChange","e","name","value","target","overlay","loadingOverlay","Suspense","fallback","Loading","formContainer","closeButton","formGroup","type","placeholder","onChange","required","popUpDropDownCourses","courseName","dropDownid","disabled","submitButton","async","preventDefault","test","formPayload","FormData","append","response","fetch","method","body","ok","alert","error","console"],"sourceRoot":""}