Untitled

import React, { useState, useEffect } from 'react'
import CustomTextField2 from 'src/@core/components/mui/temptext-field'
import Button from '@mui/material/Button'
import { Stepper, Step, StepLabel } from '@mui/material'
import List from '@mui/material/List'
import Avatar from '@mui/material/Avatar'
import ListItem from '@mui/material/ListItem'
import Box from '@mui/material/Box'
import { styled } from '@mui/material/styles'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import ListItemText from '@mui/material/ListItemText'
import ListItemAvatar from '@mui/material/ListItemAvatar'
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'
import IconButton from '@mui/material/IconButton'
import { FaLink } from 'react-icons/fa'
import Typography from '@mui/material/Typography'
import Icon from 'src/@core/components/icon'
import toast from 'react-hot-toast'

import TimelineDot from '@mui/lab/TimelineDot'
import TimelineItem from '@mui/lab/TimelineItem'
import { useSettings } from 'src/@core/hooks/useSettings'

import TimelineContent from '@mui/lab/TimelineContent'
import TimelineSeparator from '@mui/lab/TimelineSeparator'
import TimelineConnector from '@mui/lab/TimelineConnector'
import MuiTimeline from '@mui/lab/Timeline'
import Grid from '@mui/material/Grid'
import { useRouter } from 'next/router'

import Tooltip from '@mui/material/Tooltip'


import Image from 'next/image'
import LinearProgress from '@mui/material/LinearProgress'
import rs from 'text-readability'



function MyStepper({ activeStep }) {
  const steps = ['Details', 'Target Profiles', 'Configure', 'Compose', 'Start Campaign']

  return (
    <Stepper alternativeLabel activeStep={activeStep}>
      {steps.map((label, index) => (
        <Step key={label}>
          <StepLabel>
            <Typography variant='h6'>{label}</Typography>
          </StepLabel>
        </Step>
      ))}
    </Stepper>
  )
}

export default function AddDynamicInputFields1() {
  // Retrieve inputs array from local storage on component mount
  const storedInputs = JSON.parse(localStorage.getItem('inputs')) || [
    { days: '0', hours: '0', message: '' },
    { days: '0', hours: '1', message: '' },
    { days: '1', hours: '0', message: '' },
    { days: '1', hours: '0', message: '' },
    { days: '1', hours: '0', message: '' }
  ]

  const storedemailInputs = JSON.parse(localStorage.getItem('emailinputs')) || [
    { days: '0', hours: '0', message: '' ,subject:''},
    { days: '0', hours: '1', message: '',subject:''},
    { days: '1', hours: '0', message: '' ,subject:''},
    { days: '1', hours: '0', message: '' ,subject:''},
    { days: '1', hours: '0', message: '' ,subject:''}
  ]


  const [inputs, setInputs] = useState(storedInputs)
   const [emailinputs, setemailInputs] = useState(storedemailInputs)
  const [isvariant, setIsvariant] = useState(false)
  const [activeStep, setActiveStep] = useState(3)
   const [isMessageVisible, setIsMessageVisible] = useState([])
   const [isemailVisible, setIsemailVisible] = useState([])

  const [isStartCampaignVisible, setIsStartCampaignVisible] = useState(false)

   const toggleMessageVisibility = index => {
     setIsMessageVisible(prev => {
       const newVisibility = [...prev]
       newVisibility[index] = !newVisibility[index]
       return newVisibility
     })
   }

    const toggleemailVisibility = index => {
      setIsemailVisible(prev => {
        const newVisibility = [...prev]
        newVisibility[index] = !newVisibility[index]
        return newVisibility
      })
    }

   const [scores, setScores] = useState(
     storedInputs.map(() => ({
       'Chance Of Response': 0,
       'Readability Score': 0,
       'Question Counts': 0,
       'Personalization Score': 0,
       'Word Count': 0,
       'Spam Word Count': 0
     }))
   )

    const [emailscores, setemailScores] = useState(
      storedemailInputs.map(() => ({
        'Chance Of Response': 0,
        'Readability Score': 0,
        'Question Counts': 0,
        'Personalization Score': 0,
        'Word Count': 0,
        'Spam Word Count': 0
      }))
    )


  useEffect(() => {
    // Delete the 'inputs' key from localStorage
    const check = [
      { days: '0', hours: '0', message: '' },
      { days: '0', hours: '1', message: '' },
      { days: '1', hours: '0', message: '' },
      { days: '1', hours: '0', message: '' },
      { days: '1', hours: '0', message: '' }
    ]

    const emailcheck = [
      { days: '0', hours: '0', message: '', subject: '' },
      { days: '0', hours: '1', message: '', subject: '' },
      { days: '1', hours: '0', message: '', subject: '' },
      { days: '1', hours: '0', message: '', subject: '' },
      { days: '1', hours: '0', message: '', subject: '' }
    ]
    setInputs(check)
    setemailInputs(emailcheck)
  }, [])

  // Update local storage whenever inputs change
  useEffect(() => {
    localStorage.setItem('inputs', JSON.stringify(inputs))
  }, [inputs])

    useEffect(() => {
      localStorage.setItem('emailinputs', JSON.stringify(emailinputs))
    }, [emailinputs])

  const spamWordsPhrases = [
    'Guaranteed returns',
'No risk',
'Skyrocketing profits',
'Quick money',
'Trust me',
'Disruptive innovation',
'Exclusive offer',
'Limited time',
'Magic bullet',
'Unbeatable',
'Risk-free investment',
'Breakthrough',
'Massive profits',
'Game-changer',
'Instant success',
'Secret formula',
'Ground-breaking',
'Unprecedented opportunity',
'Miracle',
'Cash cow',
'Surefire',
'High yield',
'Easy money',
'Next big thing',
`Can't miss`,
'Incredible returns',
'Financial freedom',
'Overnight success',
'Phenomenal growth',
'Turnkey solution',
'Cutting-edge',
'Mind-blowing',
'Never before seen',
'Amazing discovery',
'Insider information',
'Zero effort',
'Get rich quick',
'Foolproof',
'Instant results',
'Pure gold',
'Hidden gem',
'Shocking results',
'Beat the market',
'Secret to success',
'Free money',
'Unmatched',
'Revolutionary technology',
'Unlimited potential',
'Exceptional opportunity',
'Cash machine',
'Quick fix',
'Miracle cure',
'Sure thing',
'Top secret',
'Exclusive access',
'Ultimate solution',
'Jaw-dropping',
'Best kept secret',
'Explosive growth',
'Money-making',
'Breakthrough solution',
'Ironclad',
'Pioneering',
'Stellar',
'Supercharge',
'Turbocharged',
'Vault to success',
'Win big',
'Zero to hero',
'Cash bonanza',
'Dream come true',
'Elite',
'Fast-track',
'Heavy hitter',
'Knockout',
'Monumental',
'No brainer',
'Out of this world',
'Powerhouse',
'Quick win',
'Rare opportunity',
'Slam dunk',
'Trailblazing',
'Unstoppable',
'Value-packed',
'Wealth-building',
'X-factor',
'Yield maximizer'

  ]

  const countSpamWords = text => {
    // Normalize text to lowercase
    const lowerCaseText = text.toLowerCase()

    // Count occurrences of each spam word/phrase
    const spamCount = spamWordsPhrases.reduce((count, phrase) => {
      const match = lowerCaseText.match(new RegExp('\\b' + phrase.toLowerCase() + '\\b', 'g'))
      return count + (match ? match.length : 0)
    }, 0)

    return Math.min(spamCount*10,90)
  }

const countWords = text => {
  // Remove any non-standard word separators and replace them with standard spaces
  let cleanedText = text.replace(/[\r\n\t]+/g, ' ')

  if (cleanedText === '') {
    // If empty, there are no words
    return 0
  }

  // Split the cleaned text by one or more spaces
  let words = cleanedText.trim().split(/\s+/)

  // Return the word count
  return Math.min(words.length,100)
}

const calculateScores = (text, index) => {
  text = String(text)

  // Calculate individual scores
  const readabilityScore = Math.max(0, Math.min(Math.floor(rs.daleChallReadabilityScore(text) * 10), 100))
  const questionCount = Math.min((text.match(/\?/g) || []).length*5, 100)
  const personalizationScore = Math.min((text.match(/{{\w+}}/g) || []).length * 25, 100)
  const wordCount = countWords(text)
  const spamWordCount = countSpamWords(text) // Counts occurrences of "spam"

  let scoresWithoutSpam = {
    'Readability Score': readabilityScore,
    'Question Counts': questionCount,
    'Personalization Score': personalizationScore,
    'Word Count': wordCount
  }

  // Sum scores without spam count
  let sumOfScores = Object.values(scoresWithoutSpam).reduce((sum, value) => sum + value, 0)
  console.log('before', sumOfScores)

  // Subtract spam word count from the sum
  sumOfScores = Math.max(0, sumOfScores - spamWordCount) // Ensure it doesn't go below 0

  const chanceOfResponse = Math.round(sumOfScores / Object.keys(scoresWithoutSpam).length)



setScores(scores => {
      const newScores = [...scores];
      newScores[index] = {
        ...newScores[index],
        'Chance Of Response': chanceOfResponse,
        'Readability Score': readabilityScore,
        'Question Counts': questionCount,
        'Personalization Score': personalizationScore,
        'Word Count': wordCount,
        'Spam Word Count': spamWordCount
      }
      return newScores;
    })
}


const calculateemailScores = (text, index) => {
  text = String(text)

  // Calculate individual scores
  const readabilityScore = Math.max(0, Math.min(Math.floor(rs.daleChallReadabilityScore(text) * 10), 100))
  const questionCount = Math.min((text.match(/\?/g) || []).length * 5, 100)
  const personalizationScore = Math.min((text.match(/{{\w+}}/g) || []).length * 25, 100)
  const wordCount = countWords(text)
  const spamWordCount = countSpamWords(text) // Counts occurrences of "spam"

  let scoresWithoutSpam = {
    'Readability Score': readabilityScore,
    'Question Counts': questionCount,
    'Personalization Score': personalizationScore,
    'Word Count': wordCount
  }

  // Sum scores without spam count
  let sumOfScores = Object.values(scoresWithoutSpam).reduce((sum, value) => sum + value, 0)
  console.log('before', sumOfScores)

  // Subtract spam word count from the sum
  sumOfScores = Math.max(0, sumOfScores - spamWordCount) // Ensure it doesn't go below 0

  const chanceOfResponse = Math.round(sumOfScores / Object.keys(scoresWithoutSpam).length)

  setemailScores(emailscores => {
    const newemailScores = [...emailscores]
    newemailScores[index] = {
      ...newemailScores[index],
      'Chance Of Response': chanceOfResponse,
      'Readability Score': readabilityScore,
      'Question Counts': questionCount,
      'Personalization Score': personalizationScore,
      'Word Count': wordCount,
      'Spam Word Count': spamWordCount
    }
    return newemailScores
  })
}

function ScoreCard({ scores }) {
  return (
    <Card sx={{ borderRadius: '15px', boxShadow: 'none', border: '1px solid #E56BFC', marginBottom: '20px' }}>
      <CardContent>
        <ChanceOfResponseItem value={scores['Chance Of Response']} />
        {Object.entries(scores).map(([key, value]) => {
          // Render each score except for 'Chance Of Response'
          return key !== 'Chance Of Response' && <ScoreItem key={key} label={key} value={value} />
        })}
      </CardContent>
    </Card>
  )
}

function ScoreemailCard({ emailscores }) {
  return (
    <Card sx={{ borderRadius: '15px', boxShadow: 'none', border: '1px solid #E56BFC', marginBottom: '20px' }}>
      <CardContent>
        <ChanceOfResponseItem value={emailscores['Chance Of Response']} />
        {Object.entries(emailscores).map(([key, value]) => {
          // Render each score except for 'Chance Of Response'
          return key !== 'Chance Of Response' && <ScoreItem key={key} label={key} value={value} />
        })}
      </CardContent>
    </Card>
  )
}

  const handleAddInput = () => {
    setInputs([...inputs, { message: '', days: '1', hours: '0' }])
  }

  
  const handleemailAddInput = () => {
    setemailInputs([...emailinputs, { message: '', subject:'',days: '1', hours: '0' }])
  }


  const handleChange = (event, index) => {
    let { name, value } = event.target
    let onChangeValue = [...inputs]
    onChangeValue[index][name] = value
    setInputs(onChangeValue)
    calculateScores(value,index)
  }

   const handleemailChange = (event, index) => {
     let { name, value } = event.target
     let onChangeValue = [...emailinputs]
     onChangeValue[index][name] = value
     setemailInputs(onChangeValue)
     calculateemailScores(value, index)
   }

  const handleDeleteInput = index => {
    const newArray = [...inputs]
    newArray.splice(index, 1)
    setInputs(newArray)
  }

   const handleemailDeleteInput = index => {
     const newArray = [...emailinputs]
     newArray.splice(index, 1)
     setemailInputs(newArray)
   }

  const handleButtonClick = (text, index) => {
    const updatedInputs = [...inputs]
    updatedInputs[index].message = `${inputs[index].message}${text}`
    setInputs(updatedInputs)
    calculateemailScores(updatedInputs[index].message,index)
  }

   const handleemailButtonClick = (text, index) => {
     const updatedInputs = [...emailinputs]
     updatedInputs[index].message = `${emailinputs[index].message}${text}`
     setemailInputs(updatedInputs)
     calculateemailScores(updatedInputs[index].message, index)
   }

  const router = useRouter()

  const handlesave = async values => {
    const isEmptyField = inputs
      .slice(1)
      .some(input => !input.message.trim() || !input.days.trim() || !input.hours.trim())

    if (isEmptyField) {
      toast.error('Please fill in all input fields')
      return
    }
    const response = await fetch('/api/scratchMessages/save', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'user-data': localStorage.getItem('userData')
      },
      body: JSON.stringify({
        campaignName: localStorage.getItem('campaignName'),
        linkedinemail: localStorage.getItem('linkedinemail'),
        message: localStorage.getItem('inputs')
      })
    })

    const json = await response.json()
    console.log(json.message)
    if (json.message === 'New OTP Added') {
      toast.success('Saved')
      setIsvariant(true)

      setIsStartCampaignVisible(true)
      setActiveStep(4)
    } else if (json.message === 'Existing message updated') {
      console.log('Existing message updated')
      toast.success('Saved')
      setIsvariant(true)
      setIsStartCampaignVisible(true)
       setActiveStep(4)
    } else {
      toast.error('Please add text to all messages')
    }
  }

  const handlec = async values => {
    router.push('/apps/campaigns/')
    const response = await fetch('/api/campaign/save', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'user-data': localStorage.getItem('userData')
      },
      body: JSON.stringify({
        campaignName: localStorage.getItem('campaignName'),
        linkedinemail: localStorage.getItem('linkedinemail')
      })
    })
    toast.success('Campaign Started')
    const keysToRemove = ['inputs']
    keysToRemove.forEach(key => localStorage.removeItem(key))
  }

  const Timeline = styled(MuiTimeline)({
    '& .MuiTimelineItem-root': {
      width: '100%',
      minHeight: '40px',
      '&:before': {
        display: 'none'
      }
    }
  })

  const cardStyle = {
    backgroundColor: 'transparent',
    boxShadow:'none',
    display: 'flex',
    flexDirection: 'column'
   
  }

  const { settings } = useSettings()
  const { direction } = settings

   const buttonInfo = {
     'First Name': 'Add a personal touch with the recipient’s first name.',
     'Company Name': 'Mention the recipient’s company name for a professional approach.',
     'Job Title': 'Include the recipient’s job title to make your message relevant.',
     'Personal Hook': 'Write a personalized message to engage the recipient.'
   }

   const ScoreItem = ({ label, value }) => (
     <Box sx={{ marginBottom: '10px' }}>
       <Typography variant='subtitle2' sx={{ opacity: 0.7 }}>
         {label}
       </Typography>
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <LinearProgress
           variant='determinate'
           value={value}
           sx={{
             flexGrow: 1,
             height: '10px',
             borderRadius: '5px',
             '& .MuiLinearProgress-bar': {
               backgroundColor: '#E56BFC' // Your color
             }
           }}
         />
         <Typography variant='subtitle2' sx={{ marginLeft: '10px' }}>
           {`${value}%`}
         </Typography>
       </Box>
     </Box>
   )

   const ChanceOfResponseItem = ({ value }) => (
  <Box sx={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <Typography variant="subtitle2" sx={{ fontSize: '16px', fontWeight: 'bold' }}>
      Chance Of Response
    </Typography>
    <Typography variant="h6" sx={{ fontWeight: 'bold', fontSize: '1rem', color: '#E56BFC' }}>
      {`${value}% `} {/* Add an arrow or icon as needed to indicate dropdown */}
    </Typography>
  </Box>
);

  return (
    <Card style={cardStyle}>
      <MyStepper activeStep={activeStep} />
      <CardContent sx={{ marginTop: '30px', padding: ['0', '10px'] }}>
        <Grid container spacing={2} alignItems='center' justifyContent='space-between'>
          <Grid item xs={12} md={6}>
            <Typography
              variant='h2'
              sx={{
                color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                fontWeight: '600',
                fontSize: ['26px', '32px'],
                textAlign: ['center', 'start']
              }}
            >
              Create A Sequence
            </Typography>
          </Grid>
          <Grid
            item
            xs={12}
            md={6}
            sx={{ display: 'flex', justifyContent: ['center', 'flex-end'], marginTop: ['10px', '0px'] }}
          >
            <Button
              variant='contained'
              color='primary'
              onClick={handlesave}
              sx={{
                background: 'linear-gradient(90deg, rgba(226,105,252,1) 0%, rgba(145,56,254,1) 100%)',
                borderRadius: '100px',
                color: '#FFFFFF',
                mr: 4,
                width: '120px' // margin right
              }}
            >
              Save
            </Button>
            <Button
              variant='contained'
              color='primary'
              onClick={handlec}
              sx={{
                background: 'linear-gradient(90deg, rgba(226,105,252,1) 0%, rgba(145,56,254,1) 100%)',
                borderRadius: '100px',
                color: '#FFFFFF',
                width: '180px'
              }}
              disabled={!isStartCampaignVisible}
            >
              Start Campaign
            </Button>
          </Grid>
        </Grid>

        <List style={{ width: '100%', marginTop: '20px' }}>
          <div className='input_container' key={0}>
            <ListItem
              sx={{
                marginBottom: '10px',
                borderRadius: '10px',
                backgroundColor: theme => (theme.palette.mode === 'light' ? '#FBFBFB' : '#180C2B'),
                color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                border: theme => (theme.palette.mode === 'light' ? '1px solid #E5E5E5' : 'none')
              }}
            >
              <ListItemAvatar>
                <div
                  style={{
                    background: '#E56BFC',
                    width: '33px',
                    height: '32px',
                    borderRadius: '6px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <Image src='/images/linkk.svg' alt='Picture' width={22} height={22} />
                </div>
              </ListItemAvatar>
              <ListItemText
                primary={`Step ${1}`}
                secondary='Send Connection Request'
                primaryTypographyProps={{
                  sx: { fontSize: ['13px', '15px'] } // Change the font size as needed
                }}
                secondaryTypographyProps={{
                  sx: { fontSize: ['11px', '13px'] } // Change the font size as needed
                }}
              />
              <ListItemText style={{ textAlign: 'end' }}>
                <div
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-evenly'
                  }}
                >
                  <CustomTextField2
                    name='days'
                    value={inputs[0].days}
                    onChange={event => handleChange(event, 0)}
                    sx={{
                      width: ['50px', '40px'],
                      '& .MuiInputBase-root': { border: '1px solid #E56BFC', fontSize: ['13px', '15px'] },
                      marginRight: ['10px', '0px']
                    }}
                  />
                  <Typography sx={{ fontSize: ['13px', '15px'], marginRight: ['10px', '0px'] }}>Days</Typography>
                  <CustomTextField2
                    name='hours'
                    value={inputs[0].hours}
                    onChange={event => handleChange(event, 0)}
                    sx={{
                      width: ['50px', '40px'],
                      '& .MuiInputBase-root': { border: '1px solid #E56BFC', fontSize: ['13px', '15px'] },
                      marginRight: ['10px', '0px']
                    }}
                  />

                  <Typography sx={{ fontSize: ['13px', '15px'] }}>Hours</Typography>

                  <Typography sx={{ fontSize: ['0px', '15px'] }}>Due after last step</Typography>
                  {/* <IconButton onClick={() => toggleMessageVisibility(0)}>
                    {isMessageVisible[0] ? <Icon icon='tabler:x' /> : <Icon icon='tabler:pencil' />}
                  </IconButton> */}
                </div>
              </ListItemText>
            </ListItem>
          </div>

          <div className='input_container' key={1}>
            <ListItem
              sx={{
                marginBottom: '10px',

                borderRadius: '10px',
                backgroundColor: theme => (theme.palette.mode === 'light' ? '#FBFBFB' : '#180C2B'),
                color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                border: theme => (theme.palette.mode === 'light' ? '1px solid #E5E5E5' : 'none')
              }}
            >
              <ListItemAvatar>
                <div
                  style={{
                    background: '#21CD7A',
                    width: '33px',
                    height: '33px',
                    color: 'black',
                    borderRadius: '6px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <Image src='/images/mes.svg' alt='Picture' width={25} height={25} />
                </div>
              </ListItemAvatar>
              <ListItemText
                primary={`Step ${2}`}
                secondary='Send Message'
                primaryTypographyProps={{
                  sx: { fontSize: ['13px', '15px'] } // Change the font size as needed
                }}
                secondaryTypographyProps={{
                  sx: { fontSize: ['11px', '13px'] } // Change the font size as needed
                }}
              />
              <ListItemText style={{ textAlign: 'end' }}>
                <div
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-evenly'
                  }}
                >
                  <CustomTextField2
                    name='days'
                    value={inputs[1].days}
                    onChange={event => handleChange(event, 1)}
                    sx={{
                      width: '40px',
                      '& .MuiInputBase-root': { border: '1px solid #E56BFC', fontSize: ['13px', '15px'] },
                      marginRight: ['10px', '0px']
                    }}
                  />
                  <Typography sx={{ fontSize: ['13px', '15px'], marginRight: ['10px', '0px'] }}>Days</Typography>
                  <CustomTextField2
                    name='hours'
                    value={inputs[1].hours}
                    onChange={event => handleChange(event, 1)}
                    sx={{
                      width: '40px',
                      '& .MuiInputBase-root': { border: '1px solid #E56BFC', fontSize: ['13px', '15px'] },
                      marginRight: ['10px', '0px']
                    }}
                  />

                  <Typography sx={{ fontSize: ['13px', '15px'] }}>Hours</Typography>

                  <Typography sx={{ fontSize: ['0px', '15px'] }}>Due after last step</Typography>
                </div>
              </ListItemText>
              <>
                <IconButton onClick={() => toggleMessageVisibility(1)}>
                  {isMessageVisible[1] ? <Icon icon='tabler:x' /> : <Icon icon='tabler:pencil' />}
                </IconButton>
              </>
            </ListItem>
            {isMessageVisible[1] && (
              <>
                <Grid container spacing={6} alignItems='center' sx={{ marginBottom: '10px' }}>
                  <Grid item xs={12} md={8}>
                    <Typography
                      variant='h6'
                      sx={{
                        marginTop: '5px',
                        fontSize: '18px',
                        fontWeight: '400',
                        color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF') // Space between the heading and the text field
                      }}
                    >
                      Message Body
                    </Typography>
                  </Grid>
                  <Grid item xs={12} md={4}>
                    <Typography
                      variant='h6'
                      sx={{
                        marginTop: '5px',
                        fontSize: '18px',
                        fontWeight: '400',
                        color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF') // Space between the heading and the text field // Space between the heading and the text field
                      }}
                    >
                      Add Personalisation
                    </Typography>
                  </Grid>
                </Grid>
                <Grid container spacing={6} alignItems='flex-start'>
                  <Grid item xs={12} md={8}>
                    <CustomTextField2
                      fullWidth
                      multiline
                      rows={21}
                      name='message'
                      placeholder='Hi {{FirstName}}, {{PersonalHook}}'
                      sx={{
                        borderRadius: '15px',

                        '& .MuiInputBase-root': { border: '1px solid #E56BFC' }
                      }}
                      value={inputs[1].message}
                      onChange={event => handleChange(event, 1)}
                    />
                  </Grid>
                  <Grid item xs={12} md={4} container spacing={1}>
                    <Grid item xs={6}>
                      <Button
                        color='primary'
                        onClick={() => handleButtonClick('{{FirstName}}', 1)}
                        sx={{
                          width: '95%', // Buttons should expand to fill the container
                          height: '80%',
                          marginTop: '5px',
                          marginRight: '10px',
                          boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                          color: 'white',
                          backgroundColor: '#E269FC2E',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                          fontSize: ['13px', '15px']
                        }}
                      >
                        First Name
                        <Tooltip title={buttonInfo['First Name']} placement='top' arrow>
                          <IconButton
                            size='small'
                            sx={{
                              color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                              height: '25px'
                            }}
                          >
                            <Icon icon='tabler:info-circle' />
                          </IconButton>
                        </Tooltip>
                      </Button>
                    </Grid>
                    <Grid item xs={6}>
                      <Button
                        color='primary'
                        onClick={() => handleButtonClick('{{CompanyName}}', 1)}
                        sx={{
                          width: '95%', // Buttons should expand to fill the container
                          height: '80%',
                          marginTop: '5px',
                          marginRight: '10px',
                          boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                          backgroundColor: '#E269FC2E',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                          fontSize: ['13px', '15px']
                        }}
                      >
                        Company Name
                        <Tooltip title={buttonInfo['Company Name']} placement='top' arrow>
                          <IconButton
                            size='small'
                            sx={{
                              color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                              height: '25px'
                            }}
                          >
                            <Icon icon='tabler:info-circle' />
                          </IconButton>
                        </Tooltip>
                      </Button>
                    </Grid>
                    <Grid item xs={6}>
                      <Button
                        color='primary'
                        onClick={() => handleButtonClick('{{JobTitle}}', 1)}
                        sx={{
                          width: '95%', // Buttons should expand to fill the container
                          height: '80%',
                          marginTop: '5px',
                          marginRight: '10px',
                          boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                          backgroundColor: '#E269FC2E',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                          fontSize: ['13px', '15px']
                        }}
                      >
                        Job Title
                        <Tooltip title={buttonInfo['Job Title']} placement='top' arrow>
                          <IconButton
                            size='small'
                            sx={{
                              color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                              height: '25px'
                            }}
                          >
                            <Icon icon='tabler:info-circle' />
                          </IconButton>
                        </Tooltip>
                      </Button>
                    </Grid>
                    <Grid item xs={6}>
                      <Button
                        color='primary'
                        onClick={() => handleButtonClick('{{PersonalHook}}', 1)}
                        sx={{
                          width: '95%', // Buttons should expand to fill the container
                          height: '80%',
                          marginTop: '5px',
                          marginRight: '10px',
                          boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                          backgroundColor: '#E269FC2E',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                          fontSize: ['13px', '15px']
                        }}
                      >
                        Personal Hook
                        <Tooltip title={buttonInfo['Personal Hook']} placement='top' arrow>
                          <IconButton
                            size='small'
                            sx={{
                              color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                              height: '25px'
                            }}
                          >
                            <Icon icon='tabler:info-circle' />
                          </IconButton>
                        </Tooltip>
                      </Button>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography
                        variant='h5'
                        sx={{
                          marginTop: '10px',
                          marginBottom: '10px',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF')
                        }}
                      >
                        Score
                      </Typography>

                      <div className='input_container' key={1}>
                        <ScoreCard scores={scores[1]} />
                      </div>
                    </Grid>
                  </Grid>
                </Grid>
              </>
            )}
            <div style={{ marginTop: '20px' }}>
              {inputs.length == 2 && (
                <Button variant='tonal' color='primary' onClick={() => handleAddInput()}>
                  + Add Message
                </Button>
              )}
            </div>
          </div>

          {inputs.slice(2).map((item, index) => (
            <div className='input_container' key={index + 2}>
              <ListItem
                sx={{
                  marginBottom: '10px',
                  borderRadius: '10px',
                  backgroundColor: theme => (theme.palette.mode === 'light' ? '#FBFBFB' : '#180C2B'),
                  color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                  border: theme => (theme.palette.mode === 'light' ? '1px solid #E5E5E5' : 'none')
                }}
              >
                <ListItemAvatar>
                  <div
                    style={{
                      background: '#21CD7A',
                      width: '33px',
                      height: '33px',
                      color: 'black',
                      borderRadius: '6px',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center'
                    }}
                  >
                    <Image src='/images/mes.svg' alt='Picture' width={25} height={25} />
                  </div>
                </ListItemAvatar>
                <ListItemText
                  primary={`Step ${index + 3}`}
                  secondary='Send Message'
                  primaryTypographyProps={{
                    sx: { fontSize: ['13px', '15px'] } // Change the font size as needed
                  }}
                  secondaryTypographyProps={{
                    sx: { fontSize: ['11px', '13px'] } // Change the font size as needed
                  }}
                />
                <ListItemText style={{ textAlign: 'end' }}>
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      alignItems: 'center',
                      justifyContent: 'space-evenly'
                    }}
                  >
                    <CustomTextField2
                      name='days'
                      value={item.days}
                      onChange={event => handleChange(event, index + 2)}
                      sx={{
                        width: '40px',
                        '& .MuiInputBase-root': { border: '1px solid #E56BFC', fontSize: ['13px', '15px'] },
                        marginRight: ['10px', '0px']
                      }}
                    />
                    <Typography sx={{ fontSize: ['13px', '15px'], marginRight: ['10px', '0px'] }}>Days</Typography>
                    <CustomTextField2
                      name='hours'
                      value={item.hours}
                      onChange={event => handleChange(event, index + 2)}
                      sx={{
                        width: '40px',
                        '& .MuiInputBase-root': { border: '1px solid #E56BFC', fontSize: ['13px', '15px'] },
                        marginRight: ['10px', '0px']
                      }}
                    />

                    <Typography sx={{ fontSize: ['13px', '15px'] }}>Hours</Typography>

                    <Typography sx={{ fontSize: ['0px', '15px'] }}>Due after last step</Typography>
                  </div>
                </ListItemText>
                {inputs.length > 1 && (
                  <>
                    <IconButton onClick={() => toggleMessageVisibility(index + 2)}>
                      {isMessageVisible[index + 2] ? <Icon icon='tabler:x' /> : <Icon icon='tabler:pencil' />}
                    </IconButton>
                    <IconButton onClick={() => handleDeleteInput(index + 2)}>
                      <Icon icon='tabler:trash' />
                    </IconButton>
                  </>
                )}
              </ListItem>
              {isMessageVisible[index + 2] && (
                <>
                  <Grid container spacing={6} alignItems='center' sx={{ marginBottom: '10px' }}>
                    <Grid item xs={12} md={8}>
                      <Typography
                        variant='h6'
                        sx={{
                          marginTop: '5px',
                          fontSize: '18px',
                          fontWeight: '400',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF') // Space between the heading and the text field
                        }}
                      >
                        Message Body
                      </Typography>
                    </Grid>
                    <Grid item xs={12} md={4}>
                      <Typography
                        variant='h6'
                        sx={{
                          marginTop: '5px',
                          fontSize: '18px',
                          fontWeight: '400',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF') // Space between the heading and the text field // Space between the heading and the text field
                        }}
                      >
                        Add Personalisation
                      </Typography>
                    </Grid>
                  </Grid>
                  <Grid container spacing={6} alignItems='flex-start'>
                    <Grid item xs={12} md={8}>
                      <CustomTextField2
                        fullWidth
                        multiline
                        rows={21}
                        name='message'
                        sx={{
                          borderRadius: '15px',

                          '& .MuiInputBase-root': { border: '1px solid #E56BFC' }
                        }}
                        value={item.message}
                        onChange={event => handleChange(event, index + 2)}
                      />
                    </Grid>
                    <Grid item xs={12} md={4} container spacing={1}>
                      <Grid item xs={6}>
                        <Button
                          color='primary'
                          onClick={() => handleButtonClick('{{FirstName}}', index + 2)}
                          sx={{
                            width: '95%', // Buttons should expand to fill the container
                            height: '80%',
                            marginTop: '5px',
                            marginRight: '10px',
                            boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                            color: 'white',
                            backgroundColor: '#E269FC2E',
                            color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                            fontSize: ['13px', '15px']
                          }}
                        >
                          First Name
                          <Tooltip title={buttonInfo['First Name']} placement='top' arrow>
                            <IconButton
                              size='small'
                              sx={{
                                color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                                height: '25px'
                              }}
                            >
                              <Icon icon='tabler:info-circle' />
                            </IconButton>
                          </Tooltip>
                        </Button>
                      </Grid>
                      <Grid item xs={6}>
                        <Button
                          color='primary'
                          onClick={() => handleButtonClick('{{CompanyName}}', index + 2)}
                          sx={{
                            width: '95%', // Buttons should expand to fill the container
                            height: '80%',
                            marginTop: '5px',
                            marginRight: '10px',
                            boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                            backgroundColor: '#E269FC2E',
                            color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                            fontSize: ['13px', '15px']
                          }}
                        >
                          Company Name
                          <Tooltip title={buttonInfo['Company Name']} placement='top' arrow>
                            <IconButton
                              size='small'
                              sx={{
                                color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                                height: '25px'
                              }}
                            >
                              <Icon icon='tabler:info-circle' />
                            </IconButton>
                          </Tooltip>
                        </Button>
                      </Grid>
                      <Grid item xs={6}>
                        <Button
                          color='primary'
                          onClick={() => handleButtonClick('{{JobTitle}}', index + 2)}
                          sx={{
                            width: '95%', // Buttons should expand to fill the container
                            height: '80%',
                            marginTop: '5px',
                            marginRight: '10px',
                            boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                            backgroundColor: '#E269FC2E',
                            color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                            fontSize: ['13px', '15px']
                          }}
                        >
                          Job Title
                          <Tooltip title={buttonInfo['Job Title']} placement='top' arrow>
                            <IconButton
                              size='small'
                              sx={{
                                color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                                height: '25px'
                              }}
                            >
                              <Icon icon='tabler:info-circle' />
                            </IconButton>
                          </Tooltip>
                        </Button>
                      </Grid>
                      <Grid item xs={12}>
                        <Typography
                          variant='h5'
                          sx={{
                            marginTop: '10px',
                            marginBottom: '10px',
                            color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF')
                          }}
                        >
                          Score
                        </Typography>

                        <div className='input_container' key={index + 2}>
                          <ScoreCard scores={scores[index + 2]} />
                        </div>
                      </Grid>
                    </Grid>
                  </Grid>
                </>
              )}
              <div style={{ marginTop: '20px' }}>
                {index === inputs.length - 3 && (
                  <Button variant='tonal' color='primary' onClick={() => handleAddInput()}>
                    + Add Message
                  </Button>
                )}
              </div>
            </div>
          ))}
        </List>
        <Grid container spacing={2} alignItems='center' justifyContent='space-between'>
          <Grid item xs={12} md={6}>
            <Typography
              variant='h2'
              sx={{
                color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                fontWeight: '600',
                fontSize: ['26px', '32px'],
                marginTop: '15px',
                textAlign: ['center', 'start']
              }}
            >
              Create Email Sequences
            </Typography>
          </Grid>
        </Grid>

        <List style={{ width: '100%', marginTop: '20px' }}>
          <div className='input_container' key={0}>
            <ListItem
              sx={{
                marginBottom: '10px',

                borderRadius: '10px',
                backgroundColor: theme => (theme.palette.mode === 'light' ? '#FBFBFB' : '#180C2B'),
                color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                border: theme => (theme.palette.mode === 'light' ? '1px solid #E5E5E5' : 'none')
              }}
            >
              <ListItemAvatar>
                <div
                  style={{
                    background: '#b7b3ff',
                    width: '33px',
                    height: '33px',
                    color: 'black',
                    borderRadius: '6px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <Image src='/images/email.svg' alt='Picture' width={20} height={20} />
                </div>
              </ListItemAvatar>
              <ListItemText
                primary={`Step ${1}`}
                secondary='Send Email'
                primaryTypographyProps={{
                  sx: { fontSize: ['13px', '15px'] } // Change the font size as needed
                }}
                secondaryTypographyProps={{
                  sx: { fontSize: ['11px', '13px'] } // Change the font size as needed
                }}
              />
              <ListItemText style={{ textAlign: 'end' }}>
                <div
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-evenly'
                  }}
                >
                  <CustomTextField2
                    name='days'
                    value={emailinputs[0].days}
                    onChange={event => handleemailChange(event, 0)}
                    sx={{
                      width: '40px',
                      '& .MuiInputBase-root': { border: '1px solid #E56BFC', fontSize: ['13px', '15px'] },
                      marginRight: ['10px', '0px']
                    }}
                  />
                  <Typography sx={{ fontSize: ['13px', '15px'], marginRight: ['10px', '0px'] }}>Days</Typography>
                  <CustomTextField2
                    name='hours'
                    value={emailinputs[0].hours}
                    onChange={event => handleemailChange(event, 0)}
                    sx={{
                      width: '40px',
                      '& .MuiInputBase-root': { border: '1px solid #E56BFC', fontSize: ['13px', '15px'] },
                      marginRight: ['10px', '0px']
                    }}
                  />

                  <Typography sx={{ fontSize: ['13px', '15px'] }}>Hours</Typography>

                  <Typography sx={{ fontSize: ['0px', '15px'] }}>Due after last step</Typography>
                </div>
              </ListItemText>
              <>
                <IconButton onClick={() => toggleemailVisibility(0)}>
                  {isemailVisible[0] ? <Icon icon='tabler:x' /> : <Icon icon='tabler:pencil' />}
                </IconButton>
              </>
            </ListItem>
            {isemailVisible[0] && (
              <>
                <Grid container spacing={6} alignItems='center' sx={{ marginBottom: '10px' }}>
                  <Grid item xs={12} md={8}>
                    <Typography
                      variant='h6'
                      sx={{
                        marginTop: '5px',
                        fontSize: '18px',
                        fontWeight: '400',
                        color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF') // Space between the heading and the text field
                      }}
                    >
                      Message Body
                    </Typography>
                  </Grid>
                  <Grid item xs={12} md={4}>
                    <Typography
                      variant='h6'
                      sx={{
                        marginTop: '5px',
                        fontSize: '18px',
                        fontWeight: '400',
                        color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF') // Space between the heading and the text field // Space between the heading and the text field
                      }}
                    >
                      Add Personalisation
                    </Typography>
                  </Grid>
                </Grid>
                <Grid container spacing={6} alignItems='flex-start'>
                  <Grid item xs={12} md={8}>
                    <CustomTextField2
                      fullWidth
                      multiline
                      rows={21}
                      name='message'
                      placeholder='Hi {{FirstName}}, {{PersonalHook}}'
                      sx={{
                        borderRadius: '15px',

                        '& .MuiInputBase-root': { border: '1px solid #E56BFC' }
                      }}
                      value={emailinputs[0].message}
                      onChange={event => handleemailChange(event, 0)}
                    />
                  </Grid>
                  <Grid item xs={12} md={4} container spacing={1}>
                    <Grid item xs={6}>
                      <Button
                        color='primary'
                        onClick={() => handleemailButtonClick('{{FirstName}}', 0)}
                        sx={{
                          width: '95%', // Buttons should expand to fill the container
                          height: '80%',
                          marginTop: '5px',
                          marginRight: '10px',
                          boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                          color: 'white',
                          backgroundColor: '#E269FC2E',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                          fontSize: ['13px', '15px']
                        }}
                      >
                        First Name
                        <Tooltip title={buttonInfo['First Name']} placement='top' arrow>
                          <IconButton
                            size='small'
                            sx={{
                              color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                              height: '25px'
                            }}
                          >
                            <Icon icon='tabler:info-circle' />
                          </IconButton>
                        </Tooltip>
                      </Button>
                    </Grid>
                    <Grid item xs={6}>
                      <Button
                        color='primary'
                        onClick={() => handleemailButtonClick('{{CompanyName}}', 0)}
                        sx={{
                          width: '95%', // Buttons should expand to fill the container
                          height: '80%',
                          marginTop: '5px',
                          marginRight: '10px',
                          boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                          backgroundColor: '#E269FC2E',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                          fontSize: ['13px', '15px']
                        }}
                      >
                        Company Name
                        <Tooltip title={buttonInfo['Company Name']} placement='top' arrow>
                          <IconButton
                            size='small'
                            sx={{
                              color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                              height: '25px'
                            }}
                          >
                            <Icon icon='tabler:info-circle' />
                          </IconButton>
                        </Tooltip>
                      </Button>
                    </Grid>
                    <Grid item xs={6}>
                      <Button
                        color='primary'
                        onClick={() => handleemailButtonClick('{{JobTitle}}', 0)}
                        sx={{
                          width: '95%', // Buttons should expand to fill the container
                          height: '80%',
                          marginTop: '5px',
                          marginRight: '10px',
                          boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                          backgroundColor: '#E269FC2E',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                          fontSize: ['13px', '15px']
                        }}
                      >
                        Job Title
                        <Tooltip title={buttonInfo['Job Title']} placement='top' arrow>
                          <IconButton
                            size='small'
                            sx={{
                              color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                              height: '25px'
                            }}
                          >
                            <Icon icon='tabler:info-circle' />
                          </IconButton>
                        </Tooltip>
                      </Button>
                    </Grid>
                    <Grid item xs={6}>
                      <Button
                        color='primary'
                        onClick={() => handleemailButtonClick('{{PersonalHook}}', 0)}
                        sx={{
                          width: '95%', // Buttons should expand to fill the container
                          height: '80%',
                          marginTop: '5px',
                          marginRight: '10px',
                          boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                          backgroundColor: '#E269FC2E',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                          fontSize: ['13px', '15px']
                        }}
                      >
                        Personal Hook
                        <Tooltip title={buttonInfo['Personal Hook']} placement='top' arrow>
                          <IconButton
                            size='small'
                            sx={{
                              color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                              height: '25px'
                            }}
                          >
                            <Icon icon='tabler:info-circle' />
                          </IconButton>
                        </Tooltip>
                      </Button>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography
                        variant='h5'
                        sx={{
                          marginTop: '10px',
                          marginBottom: '10px',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF')
                        }}
                      >
                        Score
                      </Typography>

                      <div className='input_container' key={0}>
                        <ScoreemailCard emailscores={emailscores[0]} />
                      </div>
                    </Grid>
                  </Grid>
                </Grid>
              </>
            )}
            <div style={{ marginTop: '20px' }}>
              {emailinputs.length == 1 && (
                <Button variant='tonal' color='primary' onClick={() => handleemailAddInput()}>
                  + Add Email
                </Button>
              )}
            </div>
          </div>

          {emailinputs.slice(1).map((item, index) => (
            <div className='input_container' key={index + 1}>
              <ListItem
                sx={{
                  marginBottom: '10px',
                  borderRadius: '10px',
                  backgroundColor: theme => (theme.palette.mode === 'light' ? '#FBFBFB' : '#180C2B'),
                  color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                  border: theme => (theme.palette.mode === 'light' ? '1px solid #E5E5E5' : 'none')
                }}
              >
                <ListItemAvatar>
                  <div
                    style={{
                      background: '#b7b3ff',
                      width: '33px',
                      height: '33px',
                      color: 'black',
                      borderRadius: '6px',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center'
                    }}
                  >
                    <Image src='/images/email.svg' alt='Picture' width={20} height={20} />
                  </div>
                </ListItemAvatar>
                <ListItemText
                  primary={`Step ${index + 2}`}
                  secondary='Send Email'
                  primaryTypographyProps={{
                    sx: { fontSize: ['13px', '15px'] } // Change the font size as needed
                  }}
                  secondaryTypographyProps={{
                    sx: { fontSize: ['11px', '13px'] } // Change the font size as needed
                  }}
                />
                <ListItemText style={{ textAlign: 'end' }}>
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      alignItems: 'center',
                      justifyContent: 'space-evenly'
                    }}
                  >
                    <CustomTextField2
                      name='days'
                      value={item.days}
                      onChange={event => handleemailChange(event, index + 1)}
                      sx={{
                        width: '40px',
                        '& .MuiInputBase-root': { border: '1px solid #E56BFC', fontSize: ['13px', '15px'] },
                        marginRight: ['10px', '0px']
                      }}
                    />
                    <Typography sx={{ fontSize: ['13px', '15px'], marginRight: ['10px', '0px'] }}>Days</Typography>
                    <CustomTextField2
                      name='hours'
                      value={item.hours}
                      onChange={event => handleemailChange(event, index + 1)}
                      sx={{
                        width: '40px',
                        '& .MuiInputBase-root': { border: '1px solid #E56BFC', fontSize: ['13px', '15px'] },
                        marginRight: ['10px', '0px']
                      }}
                    />

                    <Typography sx={{ fontSize: ['13px', '15px'] }}>Hours</Typography>

                    <Typography sx={{ fontSize: ['0px', '15px'] }}>Due after last step</Typography>
                  </div>
                </ListItemText>
                {emailinputs.length > 1 && (
                  <>
                    <IconButton onClick={() => toggleemailVisibility(index + 1)}>
                      {isemailVisible[index + 1] ? <Icon icon='tabler:x' /> : <Icon icon='tabler:pencil' />}
                    </IconButton>
                    <IconButton onClick={() => handleemailDeleteInput(index + 1)}>
                      <Icon icon='tabler:trash' />
                    </IconButton>
                  </>
                )}
              </ListItem>
              {isemailVisible[index + 1] && (
                <>
                  <Grid container spacing={6} alignItems='center' sx={{ marginBottom: '10px' }}>
                    <Grid item xs={12} md={8}>
                      <Typography
                        variant='h6'
                        sx={{
                          marginTop: '5px',
                          fontSize: '18px',
                          fontWeight: '400',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF') // Space between the heading and the text field
                        }}
                      >
                        Message Body
                      </Typography>
                    </Grid>
                    <Grid item xs={12} md={4}>
                      <Typography
                        variant='h6'
                        sx={{
                          marginTop: '5px',
                          fontSize: '18px',
                          fontWeight: '400',
                          color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF') // Space between the heading and the text field // Space between the heading and the text field
                        }}
                      >
                        Add Personalisation
                      </Typography>
                    </Grid>
                  </Grid>
                  <Grid container spacing={6} alignItems='flex-start'>
                    <Grid item xs={12} md={8}>
                      <CustomTextField2
                        fullWidth
                        multiline
                        rows={21}
                        name='message'
                        sx={{
                          borderRadius: '15px',

                          '& .MuiInputBase-root': { border: '1px solid #E56BFC' }
                        }}
                        value={item.message}
                        onChange={event => handleemailChange(event, index + 1)}
                      />
                    </Grid>
                    <Grid item xs={12} md={4} container spacing={1}>
                      <Grid item xs={6}>
                        <Button
                          color='primary'
                          onClick={() => handleemailButtonClick('{{FirstName}}', index + 1)}
                          sx={{
                            width: '95%', // Buttons should expand to fill the container
                            height: '80%',
                            marginTop: '5px',
                            marginRight: '10px',
                            boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                            color: 'white',
                            backgroundColor: '#E269FC2E',
                            color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                            fontSize: ['13px', '15px']
                          }}
                        >
                          First Name
                          <Tooltip title={buttonInfo['First Name']} placement='top' arrow>
                            <IconButton
                              size='small'
                              sx={{
                                color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                                height: '25px'
                              }}
                            >
                              <Icon icon='tabler:info-circle' />
                            </IconButton>
                          </Tooltip>
                        </Button>
                      </Grid>
                      <Grid item xs={6}>
                        <Button
                          color='primary'
                          onClick={() => handleemailButtonClick('{{CompanyName}}', index + 1)}
                          sx={{
                            width: '95%', // Buttons should expand to fill the container
                            height: '80%',
                            marginTop: '5px',
                            marginRight: '10px',
                            boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                            backgroundColor: '#E269FC2E',
                            color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                            fontSize: ['13px', '15px']
                          }}
                        >
                          Company Name
                          <Tooltip title={buttonInfo['Company Name']} placement='top' arrow>
                            <IconButton
                              size='small'
                              sx={{
                                color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                                height: '25px'
                              }}
                            >
                              <Icon icon='tabler:info-circle' />
                            </IconButton>
                          </Tooltip>
                        </Button>
                      </Grid>
                      <Grid item xs={6}>
                        <Button
                          color='primary'
                          onClick={() => handleemailButtonClick('{{JobTitle}}', index + 1)}
                          sx={{
                            width: '95%', // Buttons should expand to fill the container
                            height: '80%',
                            marginTop: '5px',
                            marginRight: '10px',
                            boxShadow: '0 0 2px rgba(18,40,44,.12), 0 2px 4px rgba(18,40,44,.1)',
                            backgroundColor: '#E269FC2E',
                            color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                            fontSize: ['13px', '15px']
                          }}
                        >
                          Job Title
                          <Tooltip title={buttonInfo['Job Title']} placement='top' arrow>
                            <IconButton
                              size='small'
                              sx={{
                                color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF'),
                                height: '25px'
                              }}
                            >
                              <Icon icon='tabler:info-circle' />
                            </IconButton>
                          </Tooltip>
                        </Button>
                      </Grid>
                      <Grid item xs={12}>
                        <Typography
                          variant='h5'
                          sx={{
                            marginTop: '10px',
                            marginBottom: '10px',
                            color: theme => (theme.palette.mode === 'light' ? '#000000' : '#FFFFFF')
                          }}
                        >
                          Score
                        </Typography>

                        <div className='input_container' key={index + 1}>
                          <ScoreemailCard emailscores={emailscores[index + 1]} />
                        </div>
                      </Grid>
                    </Grid>
                  </Grid>
                </>
              )}
              <div style={{ marginTop: '20px' }}>
                {index === emailinputs.length - 2 && (
                  <Button variant='tonal' color='primary' onClick={() => handleemailAddInput()}>
                    + Add Email
                  </Button>
                )}
              </div>
            </div>
          ))}
        </List>
      </CardContent>
    </Card>
  )
}