import { BooleanField, DateField, NumberField, ReferenceField, Show, SimpleShowLayout, TextField ,DateInput,
    SelectInput,required,useTranslate,
    useRecordContext,} from 'react-admin';
    import { Stack, Grid, Box, Typography, Card } from '@mui/material';
    import { EDIT_MODE, REFERENCE_INPUT_PAGESIZE } from '@/config/setting';
    import EditBaseAside from "../../components/EditBaseAside";
    import CustomerTopToolBar from "../../components/EditTopToolBar";
    import AsnOrderItemLogList from "./AsnOrderItemLogList"


const Aa = () =>{
    const translate = useTranslate();

    return(
        <>
        <Show
            redirect="list"
            mutationMode={EDIT_MODE}
            actions={<CustomerTopToolBar />}
            aside={<EditBaseAside />}
            >
            <SimpleShowLayout
            shouldUnregister
            warnWhenUnsavedChanges
            
            mode="onTouched"
            defaultValues={{}}
            >
    
                <Grid sx={{
                    "& .MuiInputBase-input": {
                        bgcolor: "white" 
                    }
                }} container width={{ xs: '100%', xl: '80%' }} rowSpacing={3} columnSpacing={3}>
                    
                    <Grid item xs={24} md={12}>
                    <Typography variant="h6" gutterBottom>
                        {translate('common.edit.title.main')}
                    </Typography>                        
                        <Stack display="flax" justifyContent="space-between" flexWrap="wrap" direction='row' gap={2} >
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" >
                                        {translate('table.field.asnOrderLog.code')}
                                    </Typography>
                                    <TextField source="code" label="id"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.poCode')}
                                    </Typography>
                                    <TextField source="poCode" label="poCode"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.poId')}
                                    </Typography>
                                    <NumberField source="poId" label="poId"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.type')}
                                    </Typography>
                                    <TextField source="type$" label="type"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.wkType')}
                                    </Typography>
                                    <TextField source="wkType$" label="type"/>
                                </Box>
                            </Grid>                            
                        
                        </Stack>
                        <Stack display="flax" justifyContent="space-between"  flexWrap="wrap" direction='row' gap={2} sx={{mt:5 }}>
                        <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.anfme')}
                                    </Typography>
                                    <TextField source="anfme" label="id"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.qty')}
                                    </Typography>
                                    <TextField source="qty" label="poCode"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.logisNo')}
                                    </Typography>
                                    <NumberField source="logisNo" label="poId"/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.arrTime')}
                                    </Typography>
                                    <DateField source="arrTime" label="type" showTime/>
                                </Box>
                            </Grid>
                            <Grid item  display="flex" gap={1} minWidth={150}>                            
                                <Box flexGrow={1}>
                                    <Typography variant="body2" sx={{fontSize: 20}}>
                                        {translate('table.field.asnOrderLog.ntyStatus')}
                                    </Typography>
                                    <TextField source="ntyStatus$" label="type"/>
                                </Box>
                            </Grid> 
                        </Stack>
                    </Grid>
                </Grid>
    
            </SimpleShowLayout>
        </Show>
        <Grid item xs={24} md={16} sx={{ marginTop: '1em' }}>
                <Typography variant="h6" gutterBottom >
                    {translate('common.edit.title.common')}
                </Typography>
            </Grid>
            <AsnOrderItemLogList />
        </>
        
       ); 
}

const AsnorderlogShow = () => (
   
    <Aa />
        
    
   
);

export default AsnorderlogShow