import React, { useEffect, useState } from 'react'
import {
  TextField,
  Button,
  Grid,
  Card,
  CardContent,
  Avatar,
  Typography,
  InputAdornment,
  Modal,
  Box,
  Autocomplete,
  IconButton
} from '@mui/material'
import { Tooltip } from 'react-tooltip'
import { FaClipboardList, FaEdit } from 'react-icons/fa'
import { AiOutlineUser, AiOutlineCalendar, AiOutlineNumber } from 'react-icons/ai'
import { Link, useParams } from 'react-router-dom'
import classe from '../assets/AllStyleComponents.module.css'
import { FaCamera } from 'react-icons/fa'
import { styled } from '@mui/material/styles'
import warning from '../assets/warning.svg'
import { FaRegTimesCircle } from 'react-icons/fa'
import MenuItem from '@mui/material/MenuItem'
import { MdGrade, MdRule } from 'react-icons/md'
import { FaLeftLong, FaRightLong } from 'react-icons/fa6'
import dayjs from 'dayjs'

const SingleEtudiant = () => {
  const { id } = useParams()
  const [etudiant, setEtudiant] = useState({})
  const [niveaus, setNiveaus] = useState([])
  const [mention, setMention] = useState([])
  const [parcours, setParcours] = useState([])

  const [editMode, setEditMode] = useState(false)
  const [formData, setFormData] = useState({
    nom: '',
    prenom: '',
    photos: null,
    date_de_naissances: '',
    niveau: '',
    annee_scolaire: '',
    status: '',
    mention_id: '',
    num_inscription: '',
    sexe: 'Garçon',
    nationalite: '',
    cin: '',
    date_delivrance: '',
    annee_bacc: '',
    serie: '',
    boursier: 'oui',
    domaine: '',
    contact: '',
    parcours: ''
  })
  const [status, setStatus] = useState([])
  const [scolaire, setScolaire] = useState([])

  // Fetch the student data
  useEffect(() => {
    window.etudiants.getSingle({ id }).then((response) => {
      setEtudiant(response)
    })

    window.niveaus.getNiveau().then((response) => {
      setNiveaus(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)
    })
  }, [id])

  function comparestatut(statutID) {
    let statusText

    status.map((statu) => {
      if (statutID == statu.id) {
        statusText = statu.nom
      }
    })
    return statusText
  }

  function compareMention(mentionId) {
    let mentionText

    mention.map((ment) => {
      if (mentionId == ment.id) {
        mentionText = ment.nom
      }
    })
    return mentionText
  }

  // Populate formData with etudiant values when etudiant changes
  useEffect(() => {
    if (etudiant) {
      setFormData({
        nom: etudiant.nom || '',
        prenom: etudiant.prenom || '',
        photos: etudiant.photos || null,
        date_de_naissances: dayjs(etudiant.date_de_naissances).format('YYYY-MM-DD') || '',
        niveau: etudiant.niveau || '',
        annee_scolaire: etudiant.annee_scolaire || '',
        status: etudiant.status || '',
        mention_id: etudiant.mention_id || '',
        num_inscription: etudiant.num_inscription || '',
        id: etudiant.id || '',
        sexe: etudiant.sexe,
        nationalite: etudiant.nationalite,
        cin: etudiant.cin,
        date_delivrance: dayjs(etudiant.date_delivrance).format('YYYY-MM-DD'),
        annee_bacc: dayjs(etudiant.annee_bacc).format('YYYY-MM-DD'),
        serie: etudiant.serie,
        boursier: etudiant.boursier,
        domaine: etudiant.domaine,
        contact: etudiant.contact,
        parcours: etudiant.parcours
      })
    }
  }, [etudiant])

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData({
      ...formData,
      [name]: value
    })
  }

  const handleSubmit = async () => {
    const {
      nom,
      prenom,
      date_de_naissances,
      niveau,
      annee_scolaire,
      num_inscription,
      sexe,
      nationalite,
      cin,
      date_delivrance,
      annee_bacc,
      serie,
      boursier,
      domaine,
      contact,
      parcours
    } = formData

    // Validation check: Ensure all required fields are filled
    if (
      !nom ||
      !prenom ||
      !date_de_naissances ||
      !niveau ||
      !annee_scolaire ||
      !num_inscription ||
      !sexe ||
      !nationalite ||
      !cin ||
      !date_delivrance ||
      !annee_bacc ||
      !serie ||
      !boursier ||
      !domaine ||
      !contact
    ) {
      // setOpen(true)
      alert('Veuillez remplir tous les champs obligatoires.')
      console.log(formData);

      return // Prevent submission if validation fails
    }

    // If validation passes, proceed with the submission
    try {
      let response = await window.etudiants.updateEtudiants(formData)
      if (response.success) {
        setEtudiant(formData)
      }

      setEditMode(false)
    } catch (error) {
      console.error('Error updating student:', error)
    }
  }

  /**
   * hook to open modal
   */
  const [open, setOpen] = useState(false)

  /**
   * function to close modal
   */
  const handleClose = () => setOpen(false)

  /**
   * function to return the view Modal
   *
   * @returns {JSX}
   */
  const modals = () => (
    <Modal
      open={open}
      onClose={handleClose}
      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
        }}
      >
        <Typography id="modal-description" sx={{ mt: 2 }}>
          <img src={warning} width={50} height={50} style={{ margin: '1%', width: 70 }} alt="" />{' '}
          <span>Voulez vous modifier la photos ?</span>
        </Typography>
        <Box
          sx={{
            marginTop: '2%',
            display: 'flex',
            gap: '20px',
            alignItems: 'end',
            justifyContent: 'flex-end'
          }}
        >
          <Button onClick={handleClose} color="error" variant="contained">
            Non
          </Button>
          <Button onClick={updatePDP} color="warning" variant="contained">
            Oui
          </Button>
        </Box>
      </Box>
    </Modal>
  )

  const [pdp, setPdp] = useState(null)

  const updatePDP = () => {
    let avatar = document.getElementById('imagepdpdynamic')
    let imgAvatar = avatar.querySelector('img')

    window.etudiants.updateEtudiantsPDP({ pdp, id }).then((responses) => {
      console.log(responses);

      if (responses.success) {
        if (imgAvatar === null) {
          let image = document.createElement('img')
          image.setAttribute('src', pdp)
          image.style.width = '100%'
          avatar.appendChild(image)
        } else {
          imgAvatar.removeAttribute('src')
          imgAvatar.setAttribute('src', pdp)
        }
        setOpen(false)
      }
    })
  }

  const changePDP = () => {
    document.getElementById('inputhiden').click()
  }

  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)
        setPdp(new_URL)
        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
  })

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

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

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

  const seePage3 = () => {
    setPage1(false)
    setPage2(false)
    setPage3(true)
  }

  return (
    <div className={classe.mainHome}>
      {modals()}
      <div
        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
      >
        <Card
          style={{ maxWidth: 600, margin: '0 auto', padding: '20px 5px', position: 'relative' }}
        >
          <Link to={'/student'}>
            <FaRegTimesCircle
              style={{ position: 'absolute', top: 0, right: 0, color: 'orange', fontSize: '30px' }}
            />
          </Link>
          <CardContent>
            <Grid container spacing={3}>
              <Grid item xs={12} align="center" style={{ position: 'relative' }}>
                <Avatar
                  id="imagepdpdynamic"
                  src={etudiant.photos}
                  alt={etudiant.nom}
                  style={{
                    width: 100,
                    height: 100,
                    border: 'solid 2px #ff9800',
                    objectFit: 'cover'
                  }}
                />
                <div
                  style={{
                    position: 'absolute',
                    bottom: 5,
                    right: '39%',
                    cursor: 'pointer',
                    background: 'orange',
                    borderRadius: '50%',
                    width: '28px',
                    height: '28px'
                  }}
                >
                  <FaCamera
                    className="text-light"
                    style={{ cursor: 'pointer' }}
                    onClick={changePDP}
                  />
                  <VisuallyHiddenInput
                    type="file"
                    onChange={handleFileChange}
                    name="photos"
                    accept="image/*"
                    id="inputhiden"
                  />
                </div>
              </Grid>
              {editMode ? (
                <>
                  {page1 && (
                    <Box sx={{ flexGrow: 1, marginTop: '20px' }}>
                      {/* Group Nom and Prenom */}
                      <Grid container spacing={2}>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Nom"
                            name="nom"
                            color="warning"
                            defaultValue={etudiant.nom} // Controlled component value
                            onChange={handleChange}
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineUser />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          />
                        </Grid>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Prenom"
                            name="prenom"
                            color="warning"
                            defaultValue={etudiant.prenom} // Controlled component value
                            onChange={handleChange}
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineUser />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          />
                        </Grid>
                      </Grid>

                      {/* Group Niveau and Date de Naissance */}
                      <Grid container spacing={2}>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Niveau"
                            name="niveau"
                            color="warning"
                            defaultValue={etudiant.niveau} // Valeur par défaut
                            onChange={handleChange} // Gestionnaire de changement
                            select // Ajout de la propriété `select` pour activer le menu déroulant
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineNumber />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Couleur de la bordure au survol
                                }
                              }
                            }}
                          >
                            {/* Liste des options */}
                            {niveaus.map((niveau) => (
                              <MenuItem key={niveau.value} value={niveau.nom}>
                                {niveau.nom}
                              </MenuItem>
                            ))}
                          </TextField>
                        </Grid>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Date de Naissance"
                            name="date_de_naissances"
                            color="warning"
                            type="date"
                            defaultValue={dayjs(etudiant.date_de_naissances).format('YYYY-MM-DD')} // Controlled component value
                            onChange={handleChange}
                            InputLabelProps={{
                              shrink: true
                            }}
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineCalendar />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          />
                        </Grid>
                      </Grid>

                      {/* Group Année Univesitaire and Numero d'Inscription */}
                      <Grid container spacing={2}>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Année Univesitaire"
                            name="annee_scolaire"
                            color="warning"
                            defaultValue={etudiant.annee_scolaire} // Controlled component value
                            onChange={handleChange}
                            select
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineCalendar />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          >
                            {scolaire.map((statu) => (
                              <MenuItem key={statu.id} value={statu.code}>
                                {statu.code}
                              </MenuItem>
                            ))}
                          </TextField>
                        </Grid>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Numero d'Inscription"
                            name="num_inscription"
                            color="warning"
                            defaultValue={etudiant.num_inscription} // Controlled component value
                            onChange={handleChange}
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineNumber />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          />
                        </Grid>
                      </Grid>

                      {/* Group status*/}
                      <Grid container spacing={2}>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Status"
                            name="status"
                            color="warning"
                            defaultValue={etudiant.status} // Valeur par défaut
                            onChange={handleChange} // Gestionnaire de changement
                            select // Ajout de la propriété `select` pour activer le menu déroulant
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <MdGrade />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Couleur de la bordure au survol
                                }
                              }
                            }}
                          >
                            {status.map((statu) => (
                              <MenuItem key={statu.value} value={statu.id}>
                                {statu.nom}
                              </MenuItem>
                            ))}
                          </TextField>
                        </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: 2,
                                  padding: 1,
                                  marginLeft: '4%',
                                  // marginBottom: '5px',
                                  '& .MuiOutlinedInput-root': {
                                    '&:hover fieldset': {
                                      borderColor: '#ff9800' // Set border color on hover
                                    }
                                  }
                                }}
                              />
                            )}
                          />
                        </Grid>
                      </Grid>
                    </Box>
                  )}

                  {page2 && (
                    <Box sx={{ flexGrow: 1, marginTop: '20px' }}>
                      {/* Group Nom and Prenom */}
                      <Grid container spacing={2}>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="CIN"
                            name="cin"
                            color="warning"
                            defaultValue={etudiant.cin} // Controlled component value
                            onChange={handleChange}
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineUser />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          />
                        </Grid>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Date de delivrance"
                            name="date_delivrance"
                            color="warning"
                            type="date"
                            defaultValue={dayjs(etudiant.date_delivrance).format('YYYY-MM-DD')} // Controlled component value
                            onChange={handleChange}
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineUser />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          />
                        </Grid>
                      </Grid>

                      {/* Group Niveau and Date de Naissance */}
                      <Grid container spacing={2}>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Sexe"
                            name="sexe"
                            color="warning"
                            defaultValue={etudiant.sexe} // Valeur par défaut
                            onChange={handleChange} // Gestionnaire de changement
                            select // Ajout de la propriété `select` pour activer le menu déroulant
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineNumber />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Couleur de la bordure au survol
                                }
                              }
                            }}
                          >
                            {/* Liste des options */}
                            <MenuItem value={'M'}>Garçon</MenuItem>
                            <MenuItem value={'F'}>Fille</MenuItem>
                          </TextField>
                        </Grid>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Nationnalité"
                            name="nationalite"
                            color="warning"
                            type="text"
                            defaultValue={etudiant.nationalite} // Controlled component value
                            onChange={handleChange}
                            InputLabelProps={{
                              shrink: true
                            }}
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineCalendar />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          />
                        </Grid>
                      </Grid>

                      {/* Group Année Univesitaire and Numero d'Inscription */}
                      <Grid container spacing={2}>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Année du Bacc"
                            name="annee_bacc"
                            color="warning"
                            defaultValue={etudiant.annee_bacc} // Controlled component value
                            onChange={handleChange}
                            type="text"
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineCalendar />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          ></TextField>
                        </Grid>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Série"
                            name="serie"
                            color="warning"
                            defaultValue={etudiant.serie} // Controlled component value
                            onChange={handleChange}
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineNumber />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          />
                        </Grid>
                      </Grid>

                      {/* Group status*/}
                      <Grid container spacing={2}>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="boursier"
                            name="boursier"
                            color="warning"
                            defaultValue={etudiant.boursier} // Valeur par défaut
                            onChange={handleChange} // Gestionnaire de changement
                            select // Ajout de la propriété `select` pour activer le menu déroulant
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <MdGrade />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Couleur de la bordure au survol
                                }
                              }
                            }}
                          >
                            <MenuItem value={'oui'}>Oui</MenuItem>
                            <MenuItem value={'non'}>Non</MenuItem>
                          </TextField>
                        </Grid>
                        <Grid item xs={6}>
                          <Autocomplete
                            options={parcours} // Options array for Autocomplete
                            getOptionLabel={(option) => option.nom || ''} // Display `nom`
                            value={parcours.find((item) => item.nom === etudiant.parcours) || null} // Find selected option based on `nom`
                            onChange={(event, newValue) => {
                              setFormData((prevData) => ({
                                ...prevData,
                                parcours: newValue ? newValue.nom : '' // Store only `nom`
                              }))
                            }}
                            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: 2,
                                  padding: 1,
                                  marginLeft: '4%',
                                  // marginBottom: '5px',
                                  '& .MuiOutlinedInput-root': {
                                    '&:hover fieldset': {
                                      borderColor: '#ff9800' // Set border color on hover
                                    }
                                  }
                                }}
                              />
                            )}
                          />
                        </Grid>
                      </Grid>
                    </Box>
                  )}

                  {page3 && (
                    <Box sx={{ flexGrow: 1, marginTop: '20px' }}>
                      <Grid container spacing={2}>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Domaine"
                            name="domaine"
                            color="warning"
                            defaultValue={etudiant.domaine} // Controlled component value
                            onChange={handleChange}
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineUser />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          />
                        </Grid>
                        <Grid item xs={6}>
                          <TextField
                            fullWidth
                            label="Contact"
                            name="contact"
                            color="warning"
                            type="text"
                            defaultValue={etudiant.contact} // Controlled component value
                            onChange={handleChange}
                            InputProps={{
                              startAdornment: (
                                <InputAdornment position="start">
                                  <AiOutlineUser />
                                </InputAdornment>
                              )
                            }}
                            sx={{
                              marginBottom: 2,
                              padding: 1,
                              marginLeft: '4%',
                              '& .MuiOutlinedInput-root': {
                                '&:hover fieldset': {
                                  borderColor: '#ff9800' // Set the border color on hover
                                }
                              }
                            }}
                          />
                        </Grid>
                      </Grid>
                    </Box>
                  )}

                  {/* Submit Button */}
                  <Grid
                    item
                    xs={12}
                    style={{ display: 'flex', gap: '30px', justifyContent: 'space-between' }}
                  >
                    <div>
                      <IconButton color="warning" onClick={page3 == true ? seePage2 : 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={page1 == true ? seePage2 : seePage3}>
                        <FaRightLong className="pagesuivant" style={{ outline: 'none' }} />
                      </IconButton>
                      {/* <Tooltip anchorSelect=".pagesuivant" className="custom-tooltip" place="top">
                        Page suivants
                      </Tooltip> */}
                    </div>
                    <Button
                      variant="contained"
                      color="warning"
                      onClick={handleSubmit}
                      sx={{ marginTop: 2 }}
                    >
                      Mettre à jour
                    </Button>
                  </Grid>
                </>
              ) : (
                <>
                  <div
                    style={{
                      width: '100%',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center'
                    }}
                  >
                    <div
                      style={{
                        width: '85%',
                        gap: '20px',
                        padding: '0 5%',
                        margin: '0 5%',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center'
                      }}
                    >
                      <Grid item xs={12}>
                        <Typography
                          variant="h6"
                          style={{ display: 'flex', justifyContent: 'space-between' }}
                        >
                          <span>Nom:</span> <span>{etudiant.nom}</span>
                        </Typography>
                      </Grid>
                      <Grid item xs={12}>
                        <Typography
                          variant="h6"
                          style={{ display: 'flex', justifyContent: 'space-between' }}
                        >
                          <span>Prenom:</span> {etudiant.prenom}
                        </Typography>
                      </Grid>
                      <Grid item xs={12}>
                        <Typography
                          variant="h6"
                          style={{ display: 'flex', justifyContent: 'space-between' }}
                        >
                          <span>Niveau:</span> {etudiant.niveau}
                        </Typography>
                      </Grid>
                      <Grid item xs={12}>
                        <Typography
                          variant="h6"
                          style={{ display: 'flex', justifyContent: 'space-between' }}
                        >
                          <span>Status:</span> {comparestatut(etudiant.status)}
                        </Typography>
                      </Grid>
                      <Grid item xs={12}>
                        <Typography
                          variant="h6"
                          style={{ display: 'flex', justifyContent: 'space-between' }}
                        >
                          <span>Date de Naissance:</span> {dayjs(etudiant.date_de_naissances).format('YYYY-MM-DD')}
                        </Typography>
                      </Grid>
                      <Grid item xs={12}>
                        <Typography
                          variant="h6"
                          style={{ display: 'flex', justifyContent: 'space-between' }}
                        >
                          <span>Année Univesitaire:</span> {etudiant.annee_scolaire}
                        </Typography>
                      </Grid>
                      <Grid item xs={12}>
                        <Typography
                          variant="h6"
                          style={{ display: 'flex', justifyContent: 'space-between' }}
                        >
                          <span>Numero d'Inscription:</span> {etudiant.num_inscription}
                        </Typography>
                      </Grid>
                      <Grid item xs={12}>
                        <Typography
                          variant="h6"
                          style={{ display: 'flex', justifyContent: 'space-between' }}
                        >
                          <span>Mention:</span> {compareMention(etudiant.mention_id)}
                        </Typography>
                      </Grid>
                    </div>
                  </div>
                </>
              )}

              <Grid item xs={12} align="center">
                <Button
                  variant="contained"
                  color="warning"
                  startIcon={<FaEdit />}
                  onClick={() => setEditMode(!editMode)}
                >
                  {editMode ? 'Annuler' : 'Editer'}
                </Button>
              </Grid>
            </Grid>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export default SingleEtudiant
