<AccordionDetails>
                <div
                  className="row"
                  style={{
                    marginLeft: '0px', marginRight: '0px',
                  }}
                >
                  <div className="col" style={{ paddingRight: '0px', borderRight: '1px solid', paddingTop: '40px' }}>
                    <div className="row" style={{ paddingBottom: '24px' }}>
                      <div className="col" style={{ maxWidth: '52px', paddingTop: '10px' }}>
                        <img src={sharePercentage} alt="" width="42px" height="39px" />
                      </div>
                      <div className="col">
                        <Typography sx={{ fontWeight: '500', fontSize: '24px', lineHeight: '45px' }}>
                          {/* {calculateTotalShare()} */}
                          %
                        </Typography>
                        <Typography sx={{ fontWeight: '300', fontSize: '14px', lineHeight: '18px' }}>
                          Total Assigned to This Property
                        </Typography>
                      </div>
                    </div>
                    <div className="row">
                      <ul className="beneficiary-list">
                        {beneficiaryList1.length !== 0 && beneficiaryList1.map((b: any, i: number) => (
                          <li
                            onClick={(e) => handleSelectedBeneficiary(b.profileGUID, i, b.surName, b.sharePercentage)}
                            className={(activeBeneficiary === b.profileGUID) ? 'beneficiary-selected-byshare' : 'beneficiary-li'}
                          >
                            {b.foreName}
                            &nbsp;
                            {b.surName}
                            <button className="shareBtn" type="button">
                              {/* {b.sharePercentage} */}
                              {shareValue}
                              {' '}
                              %
                            </button>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                  <div className="col" style={{ padding: '40px' }}>
                    <div className="row">
                      <div className="col">
                        <Box>
                          <Typography id="input-slider" gutterBottom sx={{ fontWeight: '500', fontSize: '14px', lineHeight: '18px' }}>
                            Share of This Property (%)
                          </Typography>
                          <Typography sx={{ fontWeight: '300', fontSize: '14px', lineHeight: '18px' }}>
                            Seek The Bar To Increase Or Decrease Share for Aron Matew
                          </Typography>
                          <Grid container spacing={2} alignItems="center">
                            <Grid item xs>
                              <Slider
                                // value={typeof shareValues[n] === 'number' ? shareValues[n] : 0}
                                // onChange={(event, newValue) => handleSliderChange(event, newValue, n)}
                                value={shareValue}
                                onChange={handleSliderChange}
                                aria-labelledby="input-slider"
                                max={totalShare}
                                sx={{ width: '501px', paddingTop: '33px' }}
                              />
                              <Typography
                                sx={{
                                  display: 'inline-block',
                                  fontWeight: '500',
                                  fontSize: '18px',
                                }}
                              >
                                {/* {typeof shareValues[n] === 'number' ? shareValues[n] : 0} */}
                                {shareValue}
                                % Share for
                                {' '}
                                {shareListusername}
                              </Typography>
                            </Grid>
                          </Grid>
                        </Box>
                      </div>
                    </div>
                    <div className="row">
                      <div className="col">
                        <div className="mb-3">
                          <label style={{ paddingTop: '24px' }} htmlFor="propertyShare" className="form-label w-100">
                            Or Enter Percentage Here
                          </label>
                          {/* <Input
                            className="form-control"
                            value={shareValue}
                            size="small"
                            onChange={handleInputChange}
                            onBlur={handleBlur}
                            name="propertyShare"
                            inputProps={{
                              step: 0,
                              min: 0,
                              max: { totalShare },
                              type: 'number',
                              'aria-labelledby': 'input-slider',
                            }}
                            placeholder="0.0%"
                            sx={{ maxWidth: '287px' }}
                          /> */}

                          <input
                            type="number"
                            placeholder="0.0%"
                            maxLength={3}
                            value={shareValue}
                            // onBlur={handleBlur}
                            // className={`${
                            //   value < 1 ? 'validate-field' : 'form-control'
                            // } `}
                            onChange={handleInputChange}
                          />
                          <br />
                        </div>
                      </div>
                      <div className="col" />
                    </div>
                    <div className="row">
                      <div className="col">
                        <span className="helper">
                          If you have decimal no, enter % here (Eg:13.33%)
                        </span>
                      </div>
                    </div>
                    <div className="row">
                      <div className="col">
                        <Typography
                          id="input-slider"
                          gutterBottom
                          sx={{
                            fontWeight: '500', fontSize: '14px', lineHeight: '18px', paddingTop: '40px',
                          }}
                        >
                          Substitute Share (%)
                        </Typography>
                        <Typography sx={{ fontWeight: '300', fontSize: '14px', lineHeight: '18px' }}>
                          You can divide
                          {' '}
                          {shareListusername}
                          {' '}
                          share  to substitute
                        </Typography>
                      </div>
                    </div>
                    <div className="row" style={{ paddingTop: '24px' }}>

                      {filteredArray.map((item) => (
                        <div className="col">
                          <div className="mb-3">
                            <label htmlFor="substitute" className="form-label w-100">
                              {item.foreName}
                            </label>
                            <input
                              type="text"
                              id="substitute"
                              className="form-control"
                              placeholder="0%"
                              value={substituteValues[item.profileGUID] || item.sharePercentage}
                              onChange={(event) => handleInputChangesubstitute(event, item.profileGUID)}
                            />
                          </div>
                        </div>
                      ))}
                      <div className="col" />
                      {totalSubstituteValue !== 100
                        ? <p className="totalShare">Total substitute share percentage must be 100.</p> : <p /> }
                      {totalSubstituteValue !== 0 && shareValue === 0
                        ? <p className="totalShare">Assign share to the main beneficiary before assigning it to the substitute.</p> : <p /> }
                      <Box sx={{ flex: '1 1 auto' }} />
                    </div>
                  </div>
                </div>
              </AccordionDetails>