import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import {
  Autocomplete,
  Box,
  Button,
  Card,
  Checkbox,
  Collapse,
  Dialog,
  DialogContent,
  DialogTitle,
  Divider,
  FormControlLabel,
  FormGroup,
  Grid,
  IconButton,
  Modal,
  Paper,
  Popper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
} from '@mui/material';

// components
import {
  FormProvider,
  RHFTextField,
  RHFRadioGroup,
  RHFUploadAvatar,
  RHFSwitch,
  RHFSelect,
  RHFEditor,
  RHFDatepicker,
  RHFMultiCheckbox,
  RHFCheckbox,
  RHFCustomMultiCheckbox,
} from '../../../components/hook-form';
import { Controller, useForm } from 'react-hook-form';
import { useParams } from 'react-router-dom';
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
import Page from '../../../components/Page';
import useSettings from '../../../hooks/useSettings';
import CorporateTabNavigations from '../CorporateTabNavigations';
import DivisionsList from './List';
import { ChangeEvent, useContext, useEffect, useMemo, useState } from 'react';
import axios from '../../../utils/axios';
import { Corporate, CorporateService } from '../../../@types/corporates';
import { InfoIcon } from '../../../theme/overrides/CustomIcons';
import { includes, min, set } from 'lodash';
import { array } from 'yup/lib/locale';
import CancelIcon from '@mui/icons-material/Cancel';
import { enqueueSnackbar, useSnackbar } from 'notistack';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';

export default function Divisions() {
  const { themeStretch } = useSettings();

  const { corporate_id, service_code } = useParams();
  const [corporate, setCorporate] = useState<Corporate | null>();

  const configuredCorporateContext = useContext(ConfiguredCorporateContext);

  useEffect(() => {
    setCorporate(configuredCorporateContext.currentCorporate);
  }, [configuredCorporateContext]);

  const [service, setService] = useState<CorporateService>({
    configurations: {},
    corporate_id: 'null',
    name: '',
    description: '',
    service_code: '',
    status: 'active',
  });

  const [specialities, setSpecialities] = useState([]);
  const [plans, setPlans] = useState([]);
  // const [dataExclusions, setDataExclusions] = useState([]);

  // console.log('specialities', specialities);

  useEffect(() => {
    axios.get('/corporates/' + corporate_id + '/services/' + service_code).then((res) => {
      setService(res.data.service);
      setPlans(
        res.data.corporate.plans.map((item: any) => ({
          value: item.code,
          label: item.code,
        }))
      );

      setSpecialities(res.data.specialities);
      // var dataExclusions = res.data.service?.exclusions;
      var dataExclusions = res.data.service?.exclusions;
      console.log('dataExclusions', dataExclusions);

      var defaultExclusion = res.data.specialities.map((item: any) => {
        var findExclusion = dataExclusions.find(
          (exclusion: any) => exclusion.speciality_id == item.id
        );

        if (findExclusion) {
          return findExclusion;
        } else {
          return {
            speciality_id: item.id,
            msc: {
              m: false,
              s: false,
              c: false,
            },
            gender: {
              male: false,
              female: false,
            },
            min_age: null,
            max_age: null,
            plan: '',
          };
        }
      });

      setExclusion(defaultExclusion);
    });
  }, [corporate_id, service_code]);

  const handleConfigChange = (event: ChangeEvent<HTMLInputElement>, service: any) => {
    axios
      .put(`/corporates/${corporate_id}/services`, {
        service_code: service_code,
        config_name: event.target.name,
        config_value: event.target.checked,
      })
      .then((res) => {
        let newConfigurations = service.configurations;
        newConfigurations[res.data.name] = res.data.value == true;

        setService({
          ...service,
          configurations: { ...newConfigurations },
        });
      });
  };

  const handleConfigExclusion = (
    event: ChangeEvent<HTMLInputElement>,
    service: any,
    speciality: any,
    value: any,
    type: string
  ) => {
    console.log(event.target.checked, service, speciality, value, type);

    const allData = exclusion.find((item: any) => item.speciality_id === speciality.id);

    try {
      axios
        .post(`/corporates/${corporate_id}/services/${service_code}/specialities/exclusion`, {
          // service_code: service.service_code,
          speciality_id: speciality.id,
          checked: event.target.checked ? '1' : '0',
          value: value,
          type: type,
          one_row: allData,
        })
        .then((res) => {
          console.log('update', res.data);
          setService({
            ...service,
            selected_specialities: res.data?.selected_specialities,
            exclusions: res.data?.service?.exclusions,
          });
        });

      enqueueSnackbar('Exclusion Updated', {
        variant: 'success',
      });
    } catch (error) {
      console.log(error);
      enqueueSnackbar('Exclusion Update Failed', {
        variant: 'error',
      });
    }
  };

  const handleToggleSpeciality = (
    event: ChangeEvent<HTMLInputElement>,
    service: any,
    speciality: any
  ) => {
    console.log('Changing Service ', service, 'and', speciality);
    try {
      axios
        .post(`/corporates/${corporate_id}/services/${service_code}/specialities`, {
          // service_code: service.service_code,
          speciality_id: speciality.id,
          active: event.target.checked ? '1' : '0',
        })
        .then((res) => {
          setService({
            ...service,
            selected_specialities: res.data,
          });
          // let newConfigurations = service.configurations
          // newConfigurations[res.data.name] = res.data.value == true

          // setService({
          //   ...service,
          //   configurations: { ...newConfigurations }
          // })
          enqueueSnackbar('Speciality Updated', {
            variant: 'success',
          });
        });
    } catch (error) {
      console.log(error);
      enqueueSnackbar('Speciality Update Failed', {
        variant: 'error',
      });
    }
  };

  const [minAge, setMinAge] = useState('');
  const [maxAge, setMaxAge] = useState('');
  const [valuePlan, setValuePlan] = useState([]);

  const [exclusion, setExclusion] = useState([
    {
      min_age: '',
      max_age: '',
      plan: '',
    },
  ]);

  console.log('exclusion', exclusion);

  const handleChange = (index: any, evnt: any, type: any, row: any, value: any) => {
    if (type !== 'plan') {
      const { name, value } = evnt.target;
      const list = [...exclusion];

      console.log('list', list);
      list[index][type] = value;
      list[index].speciality_id = row;
      setExclusion(list);
    } else {
      const data = value.map((item: any) => item.value);

      const string = data.join(',');
      const list = [...exclusion];
      list[index][type] = string;
      setExclusion(list);
    }
  };

  // const handleSubmit = (event: any, service: any, row: any) => {
  //   const allData = exclusion.find((item: any) => item.speciality_id === row.id);

  //   try {
  //     axios
  //       .post(`/corporates/${corporate_id}/services/${service_code}/specialities/all-exclusion`, {
  //         // service_code: service.service_code,
  //         speciality_id: row.id,
  //         one_row: allData,
  //       })
  //       .then((res) => {
  //         console.log('update', res.data);
  //         setService({
  //           ...service,
  //           selected_specialities: res.data?.selected_specialities,
  //           exclusions: res.data?.service?.exclusions,
  //         });
  //       });

  //     enqueueSnackbar('Exclusion Updated', {
  //       variant: 'success',
  //     });
  //   } catch (error) {
  //     console.log(error);
  //     enqueueSnackbar('Exclusion Update Failed', {
  //       variant: 'error',
  //     });
  //   }
  // };

  console.log('object', exclusion);

  console.log('plan', valuePlan);
  console.log('max age', maxAge);
  console.log('min age', minAge);

  const handleSaveConfigExclusion = (
    event: ChangeEvent<HTMLInputElement>,
    service: any,
    speciality: any
  ) => {};

  const specialityModalStyle = {
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '90%',
    maxHeight: '90%',
    overflowY: 'scroll',
    bgcolor: 'background.paper',
    border: '2px solid gray',
    boxShadow: 24,
    p: 4,
  };
  const [specialityModal, setSpecialityModal] = useState(false);

  const listMsc = [
    {
      id: 1,
      name: 'Member',
      value: 'm',
      checked: false,
    },
    {
      id: 2,
      name: 'Spouse',
      value: 's',
      checked: false,
    },
    {
      id: 3,
      name: 'Child',
      value: 'c',
      checked: false,
    },
  ];

  const handleMinAge = (event: ChangeEvent<HTMLInputElement>) => {
    setMinAge(event.target.value);
  };

  const handleMaxAge = (event: ChangeEvent<HTMLInputElement>) => {
    setMaxAge(event.target.value);
  };

  const handlePlanChange = (event: ChangeEvent<HTMLInputElement>, value: any) => {
    setValuePlan(value);
  };
  // const [currentValuePlan, setCurrentValuePlan] = useState([]);

  const convertToArray = (value: any) => {
    console.log('value', value);
    if (value == null || value == '') {
      return null;
    }
    const array = value.split(',') ?? [];
    const currentValuePlan = array.map((item: any) => ({
      value: item,
      label: item,
    }));
    console.log('currentValuePlan', currentValuePlan);

    return currentValuePlan;
  };

  return (
    <Page title="Create Benefit">
      <HeaderBreadcrumbs
        heading={'Create Benefit'}
        links={[
          {
            name: 'Corporates',
            href: '/corporates',
          },
          {
            name: corporate?.name ?? '-',
            href: '/corporate/' + corporate_id,
          },
          {
            name: 'Services',
            href: '/corporate/' + corporate_id + '/services',
          },
          {
            name: service_code ?? '-',
            href: '/corporate/' + corporate_id + '/services/' + service_code,
          },
        ]}
      />

      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Card sx={{ p: 2 }}>
            {/* <FormProvider methods={methods}> */}
            <Box sx={{ borderBottom: 1 }}>
              <Stack>
                <TableContainer sx={{ mb: 4 }}>
                  <Table sx={{ minWidth: 650 }} size="small">
                    <TableHead>
                      <TableRow>
                        <TableCell colSpan={4} sx={{ py: 1 }} align="center">
                          General Practitioner
                        </TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      <TableRow>
                        <TableCell colSpan={2}>External Doctor</TableCell>
                        <TableCell colSpan={2}>Internal Doctor</TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={service?.configurations?.gp_external_doctor_online == '1'}
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="gp_external_doctor_online"
                              />
                            }
                            label="Online"
                          />
                        </TableCell>
                        <TableCell>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={service?.configurations?.gp_external_doctor_offline == '1'}
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="gp_external_doctor_offline"
                              />
                            }
                            label="Offline"
                          />
                        </TableCell>
                        <TableCell>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={service?.configurations?.gp_internal_doctor_online == '1'}
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="gp_internal_doctor_online"
                              />
                            }
                            label="Online"
                          />
                        </TableCell>
                        <TableCell>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={service?.configurations?.gp_internal_doctor_offline == '1'}
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="gp_internal_doctor_offline"
                              />
                            }
                            label="Offline"
                          />
                        </TableCell>
                      </TableRow>
                    </TableBody>
                  </Table>
                </TableContainer>

                <TableContainer sx={{ mb: 4 }}>
                  <Table sx={{ minWidth: 650 }} size="small">
                    <TableHead>
                      <TableRow>
                        <TableCell colSpan={4} sx={{ py: 1 }} align="center">
                          Specialist Practitioner
                        </TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      <TableRow>
                        <TableCell colSpan={2}>External Doctor</TableCell>
                        <TableCell colSpan={2}>Internal Doctor</TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={service?.configurations?.sp_external_doctor_online == '1'}
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="sp_external_doctor_online"
                              />
                            }
                            label="Online"
                          />
                        </TableCell>
                        <TableCell>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={service?.configurations?.sp_external_doctor_offline == '1'}
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="sp_external_doctor_offline"
                              />
                            }
                            label="Offline"
                          />
                        </TableCell>
                        <TableCell>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={service?.configurations?.sp_internal_doctor_online == '1'}
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="sp_internal_doctor_online"
                              />
                            }
                            label="Online"
                          />
                        </TableCell>
                        <TableCell>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={service?.configurations?.sp_internal_doctor_offline == '1'}
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="sp_internal_doctor_offline"
                              />
                            }
                            label="Offline"
                          />
                        </TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell colSpan={4}>
                          <Typography
                            onClick={() => {
                              setSpecialityModal(true);
                            }}
                          >
                            <Button variant='contained'>Specialities</Button>
                          </Typography>
                          <Typography sx={{mt: 2}}>
                            {(service.selected_specialities && service.selected_specialities != '')
                              ? Object.keys(service.selected_specialities).length + ' Spesialis Diijinkan : {' + Object.values(service.selected_specialities).join(', ') + '}'
                              : 'Tidak Ada Spesialis yang diijinkan'}
                          </Typography>
                        </TableCell>
                      </TableRow>
                    </TableBody>
                  </Table>
                </TableContainer>

                <Dialog
                  open={specialityModal}
                  onClose={() => {
                    setSpecialityModal(false);
                  }}
                  sx={{
                    '& .MuiDialog-paper': {
                      width: '100%',
                      maxWidth: 1500,
                      maxHeight: 750,
                      bgcolor: 'background.paper',
                      boxShadow: 24,
                    },
                  }}
                  aria-labelledby="modal-modal-title"
                  aria-describedby="modal-modal-description"
                >
                  <DialogTitle>
                    <Stack
                      spacing={2}
                      direction="row"
                      justifyContent={'space-between'}
                      sx={{ mb: 4, pb: 2, borderBottom: 1, borderColor: 'divider' }}
                      alignItems="center"
                    >
                      <Typography id="modal-modal-title" variant="h6" component="h2">
                        Specialities
                      </Typography>
                      <Button
                        sx={{ color: 'red' }}
                        aria-label="close"
                        onClick={() => setSpecialityModal(false)}
                      >
                        <CancelIcon />
                      </Button>
                    </Stack>
                  </DialogTitle>
                  <DialogContent>
                    <Box>
                      <TableContainer component={Paper}>
                        <Table aria-label="simple table">
                          <TableHead>
                            <TableRow>
                              <TableCell>Covered</TableCell>
                              <TableCell sx={{ width: 10 }}>Nama Spesialisasi</TableCell>
                              <TableCell align="center">MSC</TableCell>
                              <TableCell align="center">Gender</TableCell>
                              <TableCell sx={{ width: 100 }} align="center">
                                Min Age
                              </TableCell>
                              <TableCell sx={{ width: 100 }} align="center">
                                Max Age
                              </TableCell>
                              <TableCell align="center">Plan</TableCell>
                              <TableCell />
                            </TableRow>
                          </TableHead>
                          <TableBody>
                            {specialities.map((row: any, index: any) => (
                              <TableRow
                                key={row.id}
                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                              >
                                <TableCell>
                                  <Checkbox
                                    checked={Object.keys(service.selected_specialities).includes(
                                      String(row.id)
                                    )}
                                    onChange={(event) => {
                                      handleToggleSpeciality(event, service, row);
                                    }}
                                  />
                                </TableCell>
                                <TableCell component="th" scope="row">
                                  {row.name}
                                </TableCell>
                                <TableCell align="center">
                                  <Stack direction="row" spacing={2} justifyContent="center">
                                    <FormControlLabel
                                      control={
                                        <Checkbox
                                          checked={service.exclusions.find(
                                            (item: { speciality_id: any; msc: { m: string } }) =>
                                              item.speciality_id == row.id && item.msc?.m == '1'
                                          )}
                                          onChange={(event) => {
                                            handleConfigExclusion(event, service, row, 'm', 'msc');
                                          }}
                                        />
                                      }
                                      label="Member"
                                    />
                                    <FormControlLabel
                                      control={
                                        <Checkbox
                                          checked={service.exclusions.find(
                                            (item: { speciality_id: any; msc: { s: string } }) =>
                                              item.speciality_id == row.id && item.msc?.s == '1'
                                          )}
                                          onChange={(event) => {
                                            handleConfigExclusion(event, service, row, 's', 'msc');
                                          }}
                                        />
                                      }
                                      label="Spouse"
                                    />
                                    <FormControlLabel
                                      control={
                                        <Checkbox
                                          checked={service.exclusions.find(
                                            (item: { speciality_id: any; msc: { c: string } }) =>
                                              item.speciality_id == row.id && item.msc?.c == '1'
                                          )}
                                          onChange={(event) => {
                                            handleConfigExclusion(event, service, row, 'c', 'msc');
                                          }}
                                        />
                                      }
                                      label="Child"
                                    />
                                  </Stack>
                                </TableCell>
                                <TableCell align="center">
                                  <Stack direction="row" spacing={2} justifyContent="center">
                                    <FormControlLabel
                                      control={
                                        <Checkbox
                                          checked={service.exclusions.find(
                                            (item: {
                                              speciality_id: any;
                                              gender: { male: string };
                                            }) =>
                                              item.speciality_id == row.id &&
                                              item.gender?.male == '1'
                                          )}
                                          onChange={(event) => {
                                            handleConfigExclusion(
                                              event,
                                              service,
                                              row,
                                              'male',
                                              'gender'
                                            );
                                          }}
                                        />
                                      }
                                      label="Male"
                                    />
                                    <FormControlLabel
                                      control={
                                        <Checkbox
                                          checked={service.exclusions.find(
                                            (item: {
                                              speciality_id: any;
                                              gender: { female: string };
                                            }) =>
                                              item.speciality_id == row.id &&
                                              item.gender?.female == '1'
                                          )}
                                          onChange={(event) => {
                                            handleConfigExclusion(
                                              event,
                                              service,
                                              row,
                                              'female',
                                              'gender'
                                            );
                                          }}
                                        />
                                      }
                                      label="Female"
                                    />
                                  </Stack>
                                </TableCell>

                                <TableCell align="center">
                                  <TextField
                                    id="outlined-number"
                                    type="number"
                                    name="min_age"
                                    defaultValue={
                                      service.exclusions.find(
                                        (item: { speciality_id: any }) =>
                                          item.speciality_id == row.id
                                      )?.min_age
                                    }
                                    onChange={(event) => {
                                      handleMinAge(event);
                                      handleChange(index, event, 'min_age', row.id);
                                    }}
                                    onKeyDown={(event) => {
                                      if (event.key === 'Enter') {
                                        handleConfigExclusion(
                                          event,
                                          service,
                                          row,
                                          minAge,
                                          'min_age'
                                        );
                                      }
                                    }}
                                  />
                                </TableCell>
                                <TableCell align="center">
                                  <TextField
                                    id="outlined-number"
                                    type="number"
                                    name="max_age"
                                    defaultValue={
                                      service.exclusions.find(
                                        (item: { speciality_id: any }) =>
                                          item.speciality_id == row.id
                                      )?.max_age
                                    }
                                    onChange={(event) => {
                                      handleMaxAge(event);
                                      handleChange(index, event, 'max_age', row.id);
                                    }}
                                    onKeyDown={(event) => {
                                      if (event.key === 'Enter') {
                                        handleConfigExclusion(
                                          event,
                                          service,
                                          row,
                                          maxAge,
                                          'max_age'
                                        );
                                      }
                                    }}
                                  />
                                </TableCell>
                                <TableCell align="center">
                                  <Autocomplete
                                    id="combo-box-demo"
                                    options={plans}
                                    multiple
                                    limitTags={1}
                                    fullWidth
                                    getOptionLabel={(option) => option.label}
                                    defaultValue={
                                      convertToArray(
                                        service.exclusions.find(
                                          (item: { speciality_id: any }) =>
                                            item.speciality_id == row.id
                                        )?.plan
                                      ) || []
                                    }
                                    isOptionEqualToValue={(option, value) =>
                                      option.value === value.value
                                    }
                                    onChange={(event, value) => {
                                      handlePlanChange(event, value);
                                      handleChange(index, event, 'plan', row.id, value);
                                    }}
                                    onKeyDown={(event) => {
                                      if (event.key === 'Enter') {
                                        handleConfigExclusion(
                                          event,
                                          service,
                                          row,
                                          valuePlan,
                                          'plan'
                                        );
                                      }
                                    }}
                                    renderInput={(params) => (
                                      <TextField {...params} label="Plan" variant="outlined" />
                                    )}
                                  />
                                </TableCell>
                                <TableCell align="center">
                                  <Button
                                    variant="outlined"
                                    color="primary"
                                    onClick={(event) => {
                                      handleConfigExclusion(event, service, row, '', 'one_row');
                                    }}
                                  >
                                    Save
                                  </Button>
                                </TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </TableContainer>
                    </Box>
                  </DialogContent>
                </Dialog>

                <TableContainer sx={{ mb: 4 }}>
                  <Table sx={{ minWidth: 650 }} size="small">
                    <TableHead>
                      <TableRow>
                        <TableCell colSpan={4} sx={{ py: 1 }} align="center">
                          Medicine
                        </TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      <TableRow>
                        <TableCell width={'25%'}>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={service?.configurations?.vitamins == '1'}
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="vitamins"
                              />
                            }
                            label="Vitamins"
                          />
                        </TableCell>
                        <TableCell width={'25%'}>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={service?.configurations?.delivery_fee == '1'}
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="delivery_fee"
                              />
                            }
                            label="Delivery Fee"
                          />
                        </TableCell>
                        <TableCell width={'25%'} />
                        <TableCell width={'25%'} />
                      </TableRow>
                    </TableBody>
                  </Table>
                </TableContainer>

                <TableContainer sx={{ mb: 4 }}>
                  <Table sx={{ minWidth: 650 }} size="small">
                    <TableHead>
                      <TableRow>
                        <TableCell colSpan={4} sx={{ py: 1 }} align="center">
                          Free Admin Fee
                        </TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      <TableRow>
                        <TableCell width={'25%'}>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={service?.configurations?.general_practitioner_fee == '1'}
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="general_practitioner_fee"
                              />
                            }
                            label="General Practitioner"
                          />
                        </TableCell>
                        <TableCell width={'25%'}>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={
                                  service?.configurations?.specialist_practitioner_fee == '1'
                                }
                                onChange={(event) => {
                                  handleConfigChange(event, service);
                                }}
                                name="specialist_practitioner_fee"
                              />
                            }
                            label="Specialist Practitioner"
                          />
                        </TableCell>
                        <TableCell width={'25%'} />
                        <TableCell width={'25%'} />
                      </TableRow>
                    </TableBody>
                  </Table>
                </TableContainer>
              </Stack>
            </Box>
            {/* </FormProvider> */}
          </Card>
        </Grid>
      </Grid>
    </Page>
  );
}
