import NavBar from '../components/NavBar'
import { useId, useState, useEffect, useMemo } from 'react';
import 'react-phone-number-input/style.css'
import { useRouter } from 'next/router'


export default function addSchoolForm() {

 
  const router = useRouter();
  
  const [school, setSchool] = useState({});
    
  useEffect(()=>{
    // if(router.query.school<1) {
    // const { sid } = router.query;
    // setSchool(sid)
    if(router.query.school && router.query.school>1 ){
  fetch(`https://management.beanstalkedu.com/items/school/${router.query.school}`)
    .then(res => res.json())
      .then(data => {
         console.log(router.query.school); setSchool(data.data)
      })
    }
  
  }, [router.query.school]);

  const handleSubmit = async (event) => {
    event.preventDefault()
    const data = {
      "status":"published",
      name: event.target.schoolName.value,
      country: event.target.country.value,
      state: event.target.state.value,
      cities: event.target.cities.value,
      anual: event.target.anual.value,
      toddlers: event.target.toddlers.value,
      early_start_programme: event.target.early_start_programme.value,
      interakto: event.target.interakto.value,
      agreement_expiry_date: event.target.agreement_expiry_date.value,
      school_agreement: event.target.school_agreement.value,
      school_contact_number: event.target.school_contact_number.value,
      school_email_id: event.target.school_email_id.value,

    }
    const JSONdata = JSON.stringify(data)
    console.log(data)
    const endpoint = 'https://management.beanstalkedu.com/items/school'
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSONdata,
    }
    const response = await fetch(endpoint, options)

    const result = await response.json()
  //   alert(`Is this your full name: ${result.data}`)
    alert(`School Saved`)
  }
  
    
    return (
        <main> 
            <div>
            <NavBar />
            <section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
                <div className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
                    <div className='flex flex-col justify-center place-items-center'>
                        <img src="/img/1.svg" alt="" />
                        <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>School Registration Form</p>
                    </div>
                    <form className='w-full px-6 md:px-20'>
                    <div className='flex flex-col w-full'>
                        <label htmlFor="school" className='text-xl font-bold'>School Name</label>
                        <input type="text" value={school.name} onChange={e => setSchool(e.target.value)} name="schoolName" placeholder='School Name' className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
                    </div>
                    <div className='flex flex-col w-full pt-4'>
                        <label htmlFor="school_email_id" className='text-xl font-bold'> Email ID</label>
                        <input type="text" value={school.school_email_id} onChange={e => setSchool(e.target.value)}  name="school_email_id" id="school_email_id" placeholder='School Email ID' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
                    </div>
                    <div className='flex flex-col w-full'>
                <label htmlFor="country" className='text-xl font-bold'>Country</label>
                <input type="text" value={school.country} onChange={e => setSchool(e.target.value)}  name="country" />

              </div>
              <div className='flex flex-col w-full'>
                <label htmlFor="state" className='text-xl font-bold'>State</label>
                <input type="text" value={school.state} onChange={e => setSchool(e.target.value)}  name="state"  />

              </div>
                <div className='flex flex-col w-full'>
                  <label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
                  <input type="text" value={school.cities} onChange={e => setSchool(e.target.value)}  name="cities" />
                  
                </div>
                    <div className='flex flex-col w-full'>
                        <label htmlFor="school_contact_number" className='text-xl font-bold'> Phone</label>
                        <input type="text" value={school.school_contact_number} onChange={e => setSchool(e.target.value)}  name="school_contact_number" />
                    </div>
                    <div className='flex flex-col w-full pt-4'>
                        <label htmlFor="anual" className='text-xl font-bold'>Anual</label>
                        <input type="text"  value={school.anual} onChange={e => setSchool(e.target.value)} />
                    </div>
                    <div className='flex flex-col w-full pt-4'>
                        <label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
                        <input type="text" name="toddlers" value={school.toddlers} onChange={e => setSchool(e.target.value)}  />
                    </div>
                    <div className='flex flex-col w-full pt-4'>
                        <label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
                        <input type="text" name="early_start_programme" value={school.early_start_programme} onChange={e => setSchool(e.target.value)}  />
                    </div>
                    <div className='flex flex-col w-full pt-4'>
                        <label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
                        <input type="text" name="interakto" value={school.interakto} onChange={e => setSchool(e.target.value)}  />
                    </div>
                    <div className='flex flex-col w-full'>
                        <label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
                        <input type="date" name="agreement_expiry_date" value={school.agreement_expiry_date} onChange={e => setSchool(e.target.value)}  id="agreement_expiry_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
                    </div>
                    <div className='flex justify-center pt-8'>
                        <input type="submit" value="Save" className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer' />
                    </div>
                    </form>
                </div>
            </section>
            </div>
        </main>
    )
  }