import React from "react";
import CONFIG from "../../config.json";
import { useState } from "react";
import axios from 'axios';
import Router from 'next/router';
import Link from "next/link";
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
import {Swiper, Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
 function Careers() {

  new Swiper('.carousel-gallery .swiper-container', {
        effect: 'slide',
        speed: 900,
        slidesPerView: 5,
        spaceBetween: 20,
        simulateTouch: true,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        pagination: {
          el: '.carousel-gallery .swiper-pagination',
          clickable: true
        },
        breakpoints: {
      
          320: {
            slidesPerView: 1,
            spaceBetween: 5
          },
    
          425: {
            slidesPerView: 2,
            spaceBetween: 10
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20
          },
          1200: {
            slidesPerView: 5,
            spaceBetween: 20
          }
          
        }
      });


    const needToParse = JSON.stringify(postCareers.data);
    const arrData = JSON.parse(JSON.parse(needToParse));
    const [image, setImage] = useState(null);
    const [position, setName] = useState(null);
    const [createObjectURL, setCreateObjectURL] = useState(null);
    const [isDisabled, setDisabled] = useState(false);
    const uploadToClient = (event) => {
      if (event.target.files && event.target.files[0]) {
        const i = event.target.files[0];
         setImage(i);
        setCreateObjectURL(URL.createObjectURL(i));
      }
    };

    const onClickButton = (event) => {
    let attribute = event.target.attributes.getNamedItem('data').value;
     setName(attribute)
  };
 const postForm = async event => {
        event.preventDefault();
         if(event.target.fullname.value !="" && event.target.email.value !="" && event.target.number.value && event.target.message.value !=''){
            setDisabled(true);
            const body = new FormData();
            body.append("file", image);
            body.append("fullname", event.target.fullname.value);
            body.append("email", event.target.email.value);
            body.append("number", event.target.number.value);
            body.append("message", event.target.message.value);
            body.append("position", position);
          
            const res = await axios.post(CONFIG.SERVER_URL+'postcareers', body)
             if(res.data.status){
                Router.push('/thankyou');
              }else{
                setDisabled(false); 
              }
        }
      }

      const scrollPage = () => {
        window.scrollTo({ top: 900, behavior: 'smooth' })
      };
      try {
 return (
      <>
   <section className="site-hero overlay justify-content-center align-items-center" data-stellar-background-ratio="0.5">
        <div className="bg-section">
            <img src="/images/career.jpg" alt="" title=""/>
            <h1 className="bg-text heading-employee">Career</h1>
        </div>
        <div className="container">
            <div className="row site-hero-inner justify-content-center align-items-center">
                <div className="mouse-down" onClick={() => scrollPage()}>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                </div>
            </div>
        </div>
    </section>
    <main className="site-main">
    <section className="home-section-alt position-relative">
            <div className="container">
                <div className="row bod-block">
                    <div className="col-md-6 aos-init aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                            <div className="abt-org-col-text">
                                <div className="heading-section">
                                    <h2 className="home-section-title">Life @ Formula</h2>
                                    <p className="text-left p-text mb-3">All work and no play makes Jack, Sheela, Arun and David and pretty much anyone dull. We work in a fast paced global environment but work can&apos;t happen unless our greatest asset, our employees, are happy.
                                    </p>
                                    <p className="text-left p-text mb-3">We swear by our company values that include teamwork as a core pillar. Our company culture encourages dedication towards client satisfaction as much towards the happiness of our team. We burn the midnight oil together, we go to the dance together, and we even serve the underprivileged together.
                                    </p>
                                    <p className="text-left p-text mb-3">Happy minds are the window to an efficient and innovative work environment. We foster innovation, push the boundary and deliver excellence from wherever we are. But as we do that, we never forget to have a little fun.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img className="img-fluid img-csr aos-init aos-init aos-animate" data-aos="fade-up" data-aos-duration="500"
                alt="..." src="/images/life-formula.jpg"/>
              
        </section>
        <section className="career-section">
            <div className="container">
                <div className="row bod-block">
                    <div className="col-md-12 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="abt-org-col">
                        <div className="abt-org-col-text">
                                <div className="heading-section">
                                    <h2 className="home-section-title">come, join us! we&apos;ar hiring.</h2>
                                    <p className="text-left mb-3">Are you tired of being in a mundane job? Do you want to
                                        see your skills translate into new possibilities for you? Do you have the zeal
                                        to make a difference to the world around you? Come be a part of one of India&apos;s
                                        fastest growing sectors. A work environment filled with young, fresh and dynamic
                                        energy. A place where hardwork and dedication is given precedence over your
                                        equation with the boss. A place where your learning and earning potential is
                                        only defined by your potential.
                                    </p>
                                    <p className="text-left mb-7">If you think you have it in you, come join us at Formula
                                        Corporate Services. We&apos;re eagerly waiting for you at <span className="email-text">enquiry@formulaindia.com</span>.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h1>Hello!</h1>
                </div>
            </div>



            <div className="modal fade" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div className="modal-dialog" role="document">
                    
                  <div className="modal-content">
                  <form className="contact-us-form" onSubmit={postForm}>
                    <div className="modal-header">
                      <h5 className="modal-title" id="exampleModalLabel">Apply for a Position</h5>
                      <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div className="modal-body">
                        <div className="form-group">
                            <label htmlFor="fullname">Full Name<span
                                    className="requireclass">*</span></label>
                            <input className="form-control" name="fullname" id="fullname" type="text"
                                placeholder="Full Name" required/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="email">Email address<span
                                    className="requireclass">*</span></label>
                            <input className="form-control" name="email" id="email" type="email"
                                placeholder="Email address" required/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="number">Mobile Number<span
                                    className="requireclass">*</span></label>
                            <input className="form-control" name="number" id="number" type="text"
                                placeholder="Mobile Number" required/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="number">Upload Resume<span
                                className="requireclass">*</span></label>
                            <input type="file" className="form-control-file form-control upload" id="resume" name="resume" onChange={uploadToClient} required/>
                          </div>
                        <div className="form-group">
                            <label htmlFor="message">Message<span className="requireclass">*</span></label>
                            <textarea className="form-control w-100" name="message" id="message" cols="30"
                                rows="9" placeholder="Write message" required></textarea>
                        </div>
                     

                    </div>
                    <div className="modal-footer">
                      <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
                      <button type="submit" className="btn btn-primary" disabled={isDisabled}>Submit</button>
                    </div>
                    </form>

                  </div>
                </div>
              </div>
        </section>
     
         <section className="home-section-alt1">
            <div className="container">
                <div className="home-section-content">
                    <div className="row bod-block">
                        <div className="col-md-12 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                            <div className="abt-org-col">
                                <div className="abt-org-col-text">
                                    <p className="businessNeed">Not sure which solution fits your business needs?</p>
                                        <button className="btn btn-primary contact"><Link href="/contact-us">Connect us</Link></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="vl"></div>
        </section>
        </main>
</>
  );
    
} catch (error) {
  console.log(error);
}
}

// export async function getServerSideProps() {
//     try{
//     const res = await fetch(CONFIG.SERVER_URL+'getcareerlist');
//     const postCareers = await res.json();
//     if (!postCareers) {
//       return {
//         notFound: true,
//       }
//     }
//     return {
//       props: {
//         postCareers,
//       }
//     };
//   }catch(e){  
//     console.log("======DATA=======",e)
//     return {
//         props: null
//       }
//   }

//   }
export default Careers;