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


export default function SchoolSlug() {
  const router = useRouter();

  const [school, setSchool] = useState({});
    
  useEffect(()=>{
    if(router.query.school && router.query.school>0 ){
      console.log(router.query);
    fetch(`/api/getSchoolDetails?school=${router.query.school}`)
      .then(res => res.json())
        .then(data => {
           console.log(data);
          setSchool(data[0])
          // console.log(school)
        })
      }
    
  }, [router.query.school]);
  
  const updateSchoolData = async (event) => {
    event.preventDefault()
    const data = {
      schoolId: router.query.school,
      sname: event.target.sname.value,
      status: event.target.status.value,
      country: event.target.country.value,
      state: event.target.state.value,
      city: event.target.city.value,
      annual: event.target.annual.value,
      toddlers: event.target.toddlers.value,
      early_start_programme: event.target.early_start_programme.value,
      interakto: event.target.interakto.value,
      agg_expiry: event.target.agg_expiry.value,
      usage_expiry: event.target.usage_expiry.value,
      phone: event.target.phone.value,
      email: event.target.email.value,
    }
    const JSONdata = JSON.stringify(data)
    console.log(data)
    const endpoint = '/api/editSchool'
    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(`User data updated`)

  }
  
  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='inline-flex p-4 '>
                <Link href="/add-school-form" className="m-2  inline-flex place-items-center justify-center p-2 pl-4 pr-4 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap"> 
                   <img src="/img/4.svg" alt="" /> &nbsp;
                    List Users Under This School
                </Link>
                <div className="place-items-center justify-center m-2 p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
                    <span className="text-small">CSV Upload &nbsp;</span>
                    <input type="file" />
                </div>
              {/* <img src="/img/2.svg" alt=""/> */}
              
            </div>
            <p className='text-2xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>Update School Information </p>
            <form onSubmit={updateSchoolData} action="" className='w-full px-6 md:px-20'>
              <div className='flex flex-col w-full pt-4'>
                <label htmlFor="sname" className='text-xl font-bold'>School Name</label>
                <input value={school.sname} onChange={e => setSchool(e.target.value)} type="text"  name="sname"  className=' bg-white 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="status" className='text-xl font-bold'>Status</label>
                <input value={school.status} onChange={e => setSchool(e.target.value)} type="text"  name="status"  className=' bg-white 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="phone" className='text-xl font-bold'>School contact Number</label>
                <input  value={school.phone} onChange={e => setSchool(e.target.value)} type="text" name="phone" 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="email" className='text-xl font-bold'> School contact Email ID</label>
                <input  value={school.email} onChange={e => setSchool(e.target.value)} type="text" name="email" 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 value={school.country} onChange={e => setSchool(e.target.value)} type="text" name="country" 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="state" className='text-xl font-bold'>State</label>
                <input value={school.state} onChange={e => setSchool(e.target.value)} type="text" name="state" 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="city" className='text-xl font-bold'>Cities</label>
                <input value={school.city} onChange={e => setSchool(e.target.value)} type="text" name="city" 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="annual" className='text-xl font-bold'>Annual</label>
                <input value={school.annual} onChange={e => setSchool(e.target.value)}  type="text" name="annual" placeholder='' 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="toddlers" className='text-xl font-bold'>Toddlers</label>
                <input value={school.toddlers} onChange={e => setSchool(e.target.value)}   type="text"  name="toddlers"  className=' bg-white 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="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
                <input value={school.early_start_programme} onChange={e => setSchool(e.target.value)}   type="text"  name="early_start_programme"  className=' bg-white 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="interakto" className='text-xl font-bold'>Interakto</label>
                <input value={school.interakto} onChange={e => setSchool(e.target.value)}   type="text"  name="interakto"  className=' bg-white 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="usage_expiry" className='text-xl font-bold'> Usage Expiry Date: (YYYY-MM-DD)</label>
                <input value={school.usage_expiry} onChange={e => setSchool(e.target.value)}   type="text"  name="usage_expiry"  className=' bg-white 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="agg_expiry" className='text-xl font-bold'> Agreement Expiry Date: (YYYY-MM-DD)</label>
                <input value={school.agg_expiry} onChange={e => setSchool(e.target.value)}   type="text"  name="agg_expiry"  className=' bg-white 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'>
                <button type="submit"
                        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'>Update
                </button>
              </div>
            </form>
          </div>

          <div className='flex flex-col w-full'>
            <label htmlFor="agreement_documents" className='text-xl font-bold'>Upload Agreement Document&apos;s</label>
            <input onChange={e => setSchool(e.target.value)}   type="file"  name="agreement_documents"  className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
            <div className='flex justify-end pt-2'>
                <button className=' bg-[#FE4501] px-4 py-1.5 rounded-lg text-white'>Download Agreement</button>
            </div>
            
          </div>


        </section>
      </div>
    </main>
  )
}