import React, { useEffect, useRef, useState } from 'react'
import classe from '../assets/AllStyleComponents.module.css'
import classeAdd from '../assets/AddStudent.module.css'
import { IoMdMale, IoMdPersonAdd } from 'react-icons/io'
import { IoMdReturnRight } from 'react-icons/io'
import classeHome from '../assets/Home.module.css'
import { Link, useNavigate } from 'react-router-dom'
import {
  Box,
  Button,
  InputAdornment,
  Typography,
  Modal,
  TextField,
  Grid,
  Autocomplete,
  IconButton
} from '@mui/material'
import {
  FaUser,
  FaIdBadge,
  FaBirthdayCake,
  FaGraduationCap,
  FaCalendarAlt,
  FaFileUpload,
  FaFileExcel,
  FaClipboardList,
  FaPassport,
  FaGlobeAfrica,
  FaMoneyBillWave,
  FaHome,
  FaPhone
} from 'react-icons/fa'
import { styled } from '@mui/material/styles'
import InputLabel from '@mui/material/InputLabel'
import MenuItem from '@mui/material/MenuItem'
import FormControl from '@mui/material/FormControl'
import Select from '@mui/material/Select'
import { OutlinedInput } from '@mui/material'
import svgSuccess from '../assets/success.svg'
import svgError from '../assets/error.svg'
import ChangeCapital from './function/ChangeCapitalLetter'
import ChangeCapitalize from './function/ChangeCapitalizeLetter'
import { MdChangeCircle, MdGrade, MdRule } from 'react-icons/md'
import ModalRecepice from './ModalRecepice'
import { FaLeftLong, FaRightLong } from 'react-icons/fa6'
import { Tooltip } from 'react-tooltip'

const AddStudent = () => {
  const [niveaus, setNiveau] = useState([])
  const [status, setStatus] = useState([])
  const [scolaire, setScolaire] = useState([])
  const [mention, setMention] = useState([])
  const [parcours, setParcours] = useState([])

  useEffect(() => {
    window.niveaus.getNiveau().then((response) => {
      setNiveau(response)
    })

    window.statuss.getStatus().then((response) => {
      setStatus(response)
    })

    window.anneescolaire.getAnneeScolaire().then((response) => {
      setScolaire(response)
    })

    window.mention.getMention().then((response) => {
      setMention(response)
    })

    window.notesysteme.getParcours().then((response) => {
      setParcours(response)
    })
  }, [])

  const navigate = useNavigate()

  /**
   * hook for storing data in the input
   */
  const [formData, setFormData] = useState({
    nom: '',
    prenom: '',
    photos: null,
    date_de_naissances: '',
    niveau: '',
    annee_scolaire: '',
    status: '',
    num_inscription: '',
    mention_id: '',
    sexe: 'Garçon',
    nationaliter: '',
    cin: '',
    date_delivrence: '',
    annee_bacc: '',
    serie: '',
    boursier: 'oui',
    domaine: '',
    contact: '',
    parcours: ''
  })

  const [dataToSend, setDataToSend] = useState({})

  useEffect(() => {
    setDataToSend({
      mention: compareMention(formData.mention_id),
      niveau: formData.niveau,
      nomPrenom: formData.nom + ' ' + formData.prenom,
      inscri: formData.num_inscription,
      annee: formData.annee_scolaire
    })
  }, [formData])

  function compareMention(mentionID) {
    let statusText

    mention.map((statu) => {
      if (mentionID == statu.id) {
        statusText = statu.nom
      }
    })

    return statusText ? statusText.charAt(0).toUpperCase() + statusText.slice(1) : statusText
  }

  /**
   * ref for each input
   */
  const nomRef = useRef()
  const prenomRef = useRef()
  const date_de_naissancesRef = useRef()

  /**
   * function to set the data in state
   * @param {*} e
   */
  const handleInputChange = (e) => {
    const { name, value } = e.target
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }))
  }

  const imageVisual = useRef()

  const handleFileChange = (e) => {
    let img_file = e.target.files[0]
    const reader = new FileReader()
    reader.readAsDataURL(img_file)
    reader.onload = (ev) => {
      const url = ev.target.result
      // initialisation de nouvelle imageURL
      const image = document.createElement('img')
      image.src = url

      // create a new image
      image.onload = (event) => {
        let canvas = document.createElement('canvas')
        let ratio = 250 / event.target.width
        canvas.width = 250
        canvas.height = event.target.height * ratio
        const context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, canvas.width, canvas.height)

        // new url
        const new_URL = canvas.toDataURL('image/jpeg', 90)
        imageVisual.current.style.display = 'block'
        imageVisual.current.src = new_URL
        // rendement de l'url a notre variable global
        setFormData((prevData) => ({
          ...prevData,
          photos: new_URL
        }))
      }
    }
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    // Handle form submission logic
    const response = await window.etudiants.insertEtudiant(formData)

    console.log(response)
    if (!response.success) {
      setCode(422)
      setOpen(true)
    }

    if (response.success) {
      imageVisual.current.style.display = 'none'
      imageVisual.current.src = ''
      setCode(200)
      setOpen(true)
    }
  }

  const VisuallyHiddenInput = styled('input')({
    clip: 'rect(0 0 0 0)',
    clipPath: 'inset(50%)',
    height: 1,
    overflow: 'hidden',
    position: 'absolute',
    bottom: 0,
    left: 0,
    whiteSpace: 'nowrap',
    width: 1
  })

  /**
   * hook to open modal
   */
  const [open, setOpen] = useState(false)
  const [open2, setOpen2] = useState(false)
  const [code, setCode] = useState(200)

  /**
   * function to close modal
   */
  const handleClose = () => {
    setOpen2(false)
    navigate('/student')
  }
  const handleOpen3 = () => {
    setOpenModal3(true)
  }

  const handleClose2 = () => {
    setOpen(false)
  }

  /**
   * function to return the view Modal
   *
   * @returns {JSX}
   */
  const modals = () => (
    <Modal
      open={open}
      onClose={code === 200 ? handleOpen3 : handleClose2}
      aria-labelledby="modal-title"
      aria-describedby="modal-description"
    >
      <Box
        sx={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: 450,
          bgcolor: 'background.paper',
          boxShadow: 24,
          p: 4
        }}
      >
        {code == 422 ? (
          <Typography
            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}
          >
            <img src={svgError} alt="" width={50} height={50} />{' '}
            <span style={{ marginLeft: '10px' }}>Vérifier les champs</span>
          </Typography>
        ) : (
          <Typography
            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}
          >
            <img src={svgSuccess} alt="" width={50} height={50} />{' '}
            <span>Insertion a été effectuée avec succès</span>
          </Typography>
        )}
        <Box
          sx={{
            marginTop: '2%',
            display: 'flex',
            gap: '20px',
            alignItems: 'end',
            justifyContent: 'flex-end'
          }}
        >
          {code === 200 ? (
            <Button onClick={handleOpen3} color="warning" variant="contained">
              OK
            </Button>
          ) : (
            <Button onClick={handleClose2} color="warning" variant="contained">
              OK
            </Button>
          )}
        </Box>
      </Box>
    </Modal>
  )

  const [openModal3, setOpenModal3] = useState(false)

  const handleClose3 = () => {
    navigate('/student')
    setOpenModal3(false)
  }

  const [page1, setPage1] = useState(true)
  const [page2, setPage2] = useState(false)

  const seePage1 = () => {
    setPage2(false)
    setPage1(true)
  }

  const seePage2 = () => {
    setPage1(false)
    setPage2(true)
  }

  return (
    <div className={classe.mainHome}>
      {modals()}
      <ModalRecepice open={openModal3} onClose={handleClose3} json={dataToSend} />
      <div className={classeAdd.header}>
        <div className={classe.h1style}>
          <div className={classeHome.blockTitle}>
            <h1 style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
              <IoMdPersonAdd />
              Ajout étudiant
            </h1>
            <Link to={'/student'}>
              <Button color="warning" variant="contained">
                <IoMdReturnRight style={{ fontSize: '20px' }} />
              </Button>
            </Link>
          </div>
        </div>
      </div>
      <div className={classeAdd.boxEtudiantsCard}>
        <Box
          sx={{
            textAlign: 'center',
            width: 700,
            borderRadius: '2%',
            bgcolor: 'background.paper',
            boxShadow: 24,
            p: 4
          }}
        >
          <div style={{ textAlign: 'right', fontWeight: 'bold' }}>
            <Link to={'/exportetudiant'} style={{ textDecoration: 'none', color: 'orange' }}>
              Importer un fichier excel <FaFileExcel />
            </Link>
          </div>
          <Box
            sx={{
              marginTop: '2%',
              display: 'flex',
              gap: '20px',
              alignItems: 'end',
              justifyContent: 'flex-end'
            }}
          >
            <form onSubmit={handleSubmit}>
              <div
                style={{
                  margin: '0 0 3% 0',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }}
              >
                <img
                  ref={imageVisual}
                  className="rounded-circle"
                  width={130}
                  height={130}
                  style={{ objectFit: 'cover', display: 'none' }}
                  alt=""
                />
              </div>
              <Grid container spacing={2}>
                {page1 == true && (
                  <Grid container spacing={2}>
                    {/* Nom and Prenom Fields */}
                    <Grid item xs={12} sm={6}>
                      <TextField
                        label="Nom"
                        name="nom"
                        color="warning"
                        size="small"
                        fullWidth
                        value={formData.nom}
                        onChange={handleInputChange}
                        onInput={() => ChangeCapital(nomRef)}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <FaUser />
                            </InputAdornment>
                          )
                        }}
                        inputRef={nomRef}
                        sx={{
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        label="Prénom"
                        name="prenom"
                        fullWidth
                        size="small"
                        color="warning"
                        value={formData.prenom}
                        onChange={handleInputChange}
                        onInput={() => ChangeCapitalize(prenomRef)}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <FaUser />
                            </InputAdornment>
                          )
                        }}
                        inputRef={prenomRef}
                        sx={{
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                      />
                    </Grid>

                    {/* Date de Naissance and Niveau Fields */}
                    <Grid item xs={12} sm={6}>
                      <TextField
                        label="Date de Naissance"
                        name="date_de_naissances"
                        fullWidth
                        color="warning"
                        size="small"
                        value={formData.date_de_naissances}
                        onChange={handleInputChange}
                        type="date"
                        InputLabelProps={{ shrink: true }}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <FaBirthdayCake />
                            </InputAdornment>
                          )
                        }}
                        inputRef={date_de_naissancesRef}
                        sx={{
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        label="Numéro d'Inscription"
                        name="num_inscription"
                        fullWidth
                        size="small"
                        color="warning"
                        value={formData.num_inscription}
                        onChange={handleInputChange}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <FaIdBadge />
                            </InputAdornment>
                          )
                        }}
                        sx={{
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <FormControl
                        size="small"
                        sx={{
                          width: '100%',
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                        variant="outlined"
                      >
                        <InputLabel id="demo-select-small-label" color="warning">
                          Année Univesitaire
                        </InputLabel>
                        <Select
                          labelId="demo-select-small-label"
                          id="demo-select-small"
                          value={formData.annee_scolaire}
                          label="Année Univesitaire"
                          color="warning"
                          size="small"
                          onChange={handleInputChange}
                          name="annee_scolaire"
                          input={
                            <OutlinedInput
                              startAdornment={
                                <InputAdornment position="start">
                                  <FaCalendarAlt />
                                </InputAdornment>
                              }
                              label="Année Univesitaire"
                            />
                          }
                          sx={{
                            '& .MuiOutlinedInput-root': {
                              '&:hover fieldset': {
                                borderColor: '#ff9800' // Set the border color on hover
                              }
                            }
                          }}
                        >
                          <MenuItem value="">
                            <em>None</em>
                          </MenuItem>
                          {scolaire.map((sc) => (
                            <MenuItem value={sc.code} key={sc.id}>
                              {sc.code}
                            </MenuItem>
                          ))}
                        </Select>
                      </FormControl>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <FormControl
                        sx={{
                          width: '100%',
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                        size="small"
                        variant="outlined"
                      >
                        <InputLabel id="demo-select-small-label" color="warning">
                          Niveau
                        </InputLabel>
                        <Select
                          labelId="demo-select-small-label"
                          id="demo-select-small"
                          value={formData.niveau}
                          label="Niveau"
                          color="warning"
                          onChange={handleInputChange}
                          name="niveau"
                          input={
                            <OutlinedInput
                              startAdornment={
                                <InputAdornment position="start">
                                  <FaGraduationCap />
                                </InputAdornment>
                              }
                              label="Niveau"
                            />
                          }
                          sx={{
                            '& .MuiOutlinedInput-root': {
                              '&:hover fieldset': {
                                borderColor: '#ff9800' // Set the border color on hover
                              }
                            }
                          }}
                        >
                          <MenuItem value="">
                            <em>None</em>
                          </MenuItem>
                          {niveaus.map((niveau) => (
                            <MenuItem value={niveau.nom} key={niveau.id}>
                              {niveau.nom}
                            </MenuItem>
                          ))}
                        </Select>
                      </FormControl>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <FormControl
                        sx={{
                          width: '100%',
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                        size="small"
                        variant="outlined"
                      >
                        <InputLabel id="demo-select-small-label" color="warning">
                          Status
                        </InputLabel>
                        <Select
                          labelId="demo-select-small-label"
                          id="demo-select-small"
                          value={formData.status}
                          label="Status"
                          color="warning"
                          onChange={handleInputChange}
                          name="status"
                          input={
                            <OutlinedInput
                              startAdornment={
                                <InputAdornment position="start">
                                  <MdGrade />
                                </InputAdornment>
                              }
                              label="Niveau"
                            />
                          }
                          sx={{
                            '& .MuiOutlinedInput-root': {
                              '&:hover fieldset': {
                                borderColor: '#ff9800' // Set the border color on hover
                              }
                            }
                          }}
                        >
                          <MenuItem value="">
                            <em>None</em>
                          </MenuItem>
                          {status.map((statu) => (
                            <MenuItem value={statu.id} key={statu.id}>
                              {statu.nom}
                            </MenuItem>
                          ))}
                        </Select>
                      </FormControl>
                    </Grid>
                    <Grid item xs={6}>
                      <Autocomplete
                        options={mention} // Options array for Autocomplete
                        getOptionLabel={(option) => option.nom || ''} // Safely access `nom`
                        value={mention.find((item) => item.id === formData.mention_id) || null} // Bind selected value to form data
                        onChange={(event, newValue) => {
                          setFormData((prevData) => ({
                            ...prevData,
                            mention_id: newValue ? newValue.id : null // Store the ID of the selected mention
                          }))
                        }}
                        size="small" // Make the Autocomplete small
                        isOptionEqualToValue={(option, value) => option.id === value.id} // Ensure correct matching of options
                        renderInput={(params) => (
                          <TextField
                            {...params}
                            label="Mention"
                            color="warning"
                            placeholder="Sélectionnez une mention"
                            InputProps={{
                              ...params.InputProps,
                              startAdornment: (
                                <>
                                  <InputAdornment position="start">
                                    <FaClipboardList />
                                  </InputAdornment>
                                  {params.InputProps.startAdornment}
                                </>
                              )
                            }}
                            sx={{
                              marginBottom: '5px',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set border color on hover
                                }
                              }
                            }}
                          />
                        )}
                      />
                    </Grid>

                    {/* Photos Field */}
                    <Grid item xs={12}>
                      <Button
                        component="label"
                        role={undefined}
                        variant="outlined"
                        color="warning"
                        tabIndex={-1}
                        fullWidth
                        startIcon={<FaFileUpload />}
                      >
                        Photos
                        <VisuallyHiddenInput
                          type="file"
                          onChange={handleFileChange}
                          name="photos"
                          accept="image/*"
                        />
                      </Button>
                    </Grid>
                  </Grid>
                )}
                {page2 && (
                  <Grid container spacing={2}>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        label="CIN"
                        name="cin"
                        color="warning"
                        size="small"
                        fullWidth
                        value={formData.cin}
                        onChange={handleInputChange}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <FaPassport />
                            </InputAdornment>
                          )
                        }}
                        sx={{
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        label="Nationnalité"
                        name="nationaliter"
                        color="warning"
                        size="small"
                        fullWidth
                        value={formData.nationaliter}
                        onChange={handleInputChange}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <FaGlobeAfrica />
                            </InputAdornment>
                          )
                        }}
                        sx={{
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <FormControl
                        sx={{
                          width: '100%',
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                        size="small"
                        variant="outlined"
                      >
                        <InputLabel id="demo-select-small-label" color="warning">
                          Sexe
                        </InputLabel>
                        <Select
                          labelId="demo-select-small-label"
                          id="demo-select-small"
                          value={formData.sexe}
                          label="Sexe"
                          color="warning"
                          onChange={handleInputChange}
                          name="sexe"
                          input={
                            <OutlinedInput
                              startAdornment={
                                <InputAdornment position="start">
                                  <IoMdMale />
                                </InputAdornment>
                              }
                              label="Sexe"
                            />
                          }
                          sx={{
                            '& .MuiOutlinedInput-root': {
                              '&:hover fieldset': {
                                borderColor: '#ff9800' // Set the border color on hover
                              }
                            }
                          }}
                        >
                          <MenuItem value={'Garçon'}>Garçon</MenuItem>
                          <MenuItem value={'Fille'}>Fille</MenuItem>
                        </Select>
                      </FormControl>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        label="Date de delivrance"
                        name="date_delivrence"
                        color="warning"
                        size="small"
                        fullWidth
                        type="date"
                        value={formData.date_delivrence}
                        onChange={handleInputChange}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <FaCalendarAlt />
                            </InputAdornment>
                          )
                        }}
                        sx={{
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        label="Année du bacc"
                        name="annee_bacc"
                        color="warning"
                        size="small"
                        fullWidth
                        type="date"
                        value={formData.annee_bacc}
                        onChange={handleInputChange}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <FaCalendarAlt />
                            </InputAdornment>
                          )
                        }}
                        sx={{
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        label="Serie"
                        name="serie"
                        color="warning"
                        size="small"
                        fullWidth
                        type="text"
                        value={formData.serie}
                        onChange={handleInputChange}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <MdChangeCircle />
                            </InputAdornment>
                          )
                        }}
                        sx={{
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <FormControl
                        sx={{
                          width: '100%',
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                        size="small"
                        variant="outlined"
                      >
                        <InputLabel id="demo-select-small-label" color="warning">
                          Boursier
                        </InputLabel>
                        <Select
                          labelId="demo-select-small-label"
                          id="demo-select-small"
                          value={formData.boursier}
                          label="Boursier"
                          color="warning"
                          onChange={handleInputChange}
                          name="boursier"
                          input={
                            <OutlinedInput
                              startAdornment={
                                <InputAdornment position="start">
                                  <FaMoneyBillWave />
                                </InputAdornment>
                              }
                              label="Boursier"
                            />
                          }
                          sx={{
                            '& .MuiOutlinedInput-root': {
                              '&:hover fieldset': {
                                borderColor: '#ff9800' // Set the border color on hover
                              }
                            }
                          }}
                        >
                          <MenuItem value={'oui'}>Oui</MenuItem>
                          <MenuItem value={'non'}>Non</MenuItem>
                        </Select>
                      </FormControl>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        label="Domaine"
                        name="domaine"
                        color="warning"
                        size="small"
                        fullWidth
                        type="text"
                        value={formData.domaine}
                        onChange={handleInputChange}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <FaHome />
                            </InputAdornment>
                          )
                        }}
                        sx={{
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        label="Contact"
                        name="contact"
                        color="warning"
                        size="small"
                        fullWidth
                        type="text"
                        value={formData.contact}
                        onChange={handleInputChange}
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <FaPhone />
                            </InputAdornment>
                          )
                        }}
                        sx={{
                          '& .MuiOutlinedInput-root': {
                            '&:hover fieldset': {
                              borderColor: '#ff9800' // Set the border color on hover
                            }
                          }
                        }}
                      />
                    </Grid>
                    <Grid item xs={6}>
                      <Autocomplete
                        options={parcours} // Options array for Autocomplete
                        getOptionLabel={(option) => option.nom || ''} // Display `nom`
                        value={parcours.find((item) => item.nom === formData.parcours) || null} // Find selected option based on `nom`
                        onChange={(event, newValue) => {
                          setFormData((prevData) => ({
                            ...prevData,
                            parcours: newValue ? newValue.nom : '' // Store only `nom`
                          }))
                        }}
                        size="small"
                        isOptionEqualToValue={(option, value) => option.nom === value?.nom} // Ensure correct matching
                        renderInput={(params) => (
                          <TextField
                            {...params}
                            label="Parcours"
                            color="warning"
                            placeholder="Sélectionnez une mention"
                            InputProps={{
                              ...params.InputProps,
                              startAdornment: (
                                <>
                                  <InputAdornment position="start">
                                    <MdRule />
                                  </InputAdornment>
                                  {params.InputProps.startAdornment}
                                </>
                              )
                            }}
                            sx={{
                              marginBottom: '5px',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set border color on hover
                                }
                              }
                            }}
                          />
                        )}
                      />
                    </Grid>
                  </Grid>
                )}
                {/* Submit Button */}
                <Grid
                  item
                  xs={12}
                  style={{ display: 'flex', gap: '30px', justifyContent: 'space-between' }}
                >
                  <div>
                    <IconButton color="warning" onClick={seePage1}>
                      <FaLeftLong className="pageprecedent" style={{ outline: 'none' }} />
                    </IconButton>
                    <Tooltip anchorSelect=".pageprecedent" className="custom-tooltip" place="top">
                      Page précédents
                    </Tooltip>
                    <IconButton color="warning" onClick={seePage2}>
                      <FaRightLong className="pagesuivant" style={{ outline: 'none' }} />
                    </IconButton>
                    <Tooltip anchorSelect=".pagesuivant" className="custom-tooltip" place="top">
                      Page suivants
                    </Tooltip>
                  </div>
                  <Button type="submit" color="warning" variant="contained">
                    Enregister
                  </Button>
                </Grid>
              </Grid>
            </form>
          </Box>
        </Box>
      </div>
    </div>
  )
}

export default AddStudent
